/* ==========================================================================
   Axis Canva Shop — Styles v3
   Aligned with The Agency Web Component Library (2026-05).
   Tokens, type, spacing, radii, and shadows mirror the brand guide so the
   shop / connect / generate surfaces sit alongside the rest of the site.
   ========================================================================== */

/* ---------- Variables ---------- */
:root {
    /* Brand — mirrors :root in The Agency design guide. */
    --acs-charcoal:        #282828;
    --acs-coral:           #eb5342;
    --acs-coral-hover:     #c9422f;
    --acs-dark-grey:       #6d6f71;
    --acs-light-grey:      #c3c3c3;
    --acs-white:           #ffffff;

    /* Surface + text */
    --acs-bg:              #ffffff;
    --acs-bg-muted:        #f6f6f6;
    --acs-bg-page:         #fafafa;
    --acs-text:            #282828;
    --acs-text-muted:      #6b6b6b;
    --acs-text-subtle:     #8a8a8a;
    --acs-text-inverse:    #ffffff;
    --acs-border:          #e3e3e3;
    --acs-border-strong:   #c3c3c3;
    --acs-hairline:        #ececec;

    /* Focus — charcoal outline + coral halo (passes on white, charcoal, coral). */
    --acs-focus-ring:      #282828;
    --acs-focus-halo:      rgba(235, 83, 66, 0.35);

    /* Status */
    --acs-success:         #1d7a3b;
    --acs-success-bg:      #e6f4ea;
    --acs-warn:            #b8751f;
    --acs-warn-bg:         #fdf3e1;
    --acs-danger:          #c6391e;
    --acs-danger-bg:       #fde8e3;
    --acs-info:            #2563a6;
    --acs-info-bg:         #e4eff9;

    /* Elevation */
    --acs-shadow-sm:       0 1px 2px rgba(0,0,0,0.06);
    --acs-shadow-md:       0 4px 14px rgba(0,0,0,0.08);
    --acs-shadow-lg:       0 10px 40px rgba(0,0,0,0.12);

    /* Radius — guide leans square (2/4/8). */
    --acs-radius-sm:       2px;
    --acs-radius-md:       4px;
    --acs-radius-lg:       8px;

    /* Spacing scale */
    --acs-sp-1: 4px;
    --acs-sp-2: 8px;
    --acs-sp-3: 12px;
    --acs-sp-4: 16px;
    --acs-sp-5: 24px;
    --acs-sp-6: 32px;
    --acs-sp-7: 48px;
    --acs-sp-8: 64px;

    /* Type */
    --acs-font-sans:       'Helvetica Neue', Helvetica, Arial, sans-serif;
    --acs-font-serif:      Georgia, 'Times New Roman', serif;

    /* Motion */
    --acs-transition:      0.15s ease;

    /* Legacy aliases kept so older selectors keep rendering with the new
       design tokens. New selectors should reach for the explicit names. */
    --acs-cream:           var(--acs-bg-muted);
    --acs-mid:             var(--acs-text-muted);
    --acs-gold:            var(--acs-coral);          /* legacy "gold" accents → coral */
    --acs-primary:         var(--acs-charcoal);       /* primary CTA → charcoal */
    --acs-primary-hover:   #000;
    --acs-secondary:       var(--acs-bg-muted);
    --acs-secondary-hover: var(--acs-hairline);
    --acs-radius:          var(--acs-radius-md);
    --acs-radius-xs:       var(--acs-radius-sm);
    --acs-shadow:          var(--acs-shadow-sm);
    --acs-shadow-hover:    var(--acs-shadow-md);
}

/* ---------- Box-sizing reset ---------- */
.acs-shop-wrap *,
.acs-content-wrap *,
.acs-modal * {
    box-sizing: border-box;
}

/* ==========================================================================
   Notices
   ========================================================================== */
.acs-notice {
    padding: var(--acs-sp-3) var(--acs-sp-4);
    border-radius: var(--acs-radius-md);
    margin-bottom: var(--acs-sp-5);
    font-size: 14px;
    font-weight: 500;
    border: 1px solid transparent;
    border-left-width: 3px;
}
.acs-notice-success { background: var(--acs-success-bg); color: #10421f; border-color: var(--acs-success); }
.acs-notice-error   { background: var(--acs-danger-bg);  color: #7a1c0d; border-color: var(--acs-danger);  }
.acs-notice-info    { background: var(--acs-info-bg);    color: #0e3a6b; border-color: var(--acs-info);    }

/* ==========================================================================
   Canva Connect Banner
   ========================================================================== */
.acs-canva-connect-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--acs-cream);
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius);
    padding: 18px 24px;
    margin-bottom: 28px;
}

.acs-canva-connect-content {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.acs-canva-connect-content strong {
    display: block;
    font-size: 15px;
    color: var(--acs-text);
    margin-bottom: 2px;
}

.acs-canva-connect-content p {
    margin: 0;
    font-size: 13px;
    color: var(--acs-text-muted);
}

.acs-canva-connected-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--acs-sp-2);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #10421f;
    background: var(--acs-success-bg);
    border: 1px solid var(--acs-success);
    border-radius: 999px;
    padding: 4px 12px;
    margin-bottom: var(--acs-sp-5);
}

.acs-dot-green {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--acs-success);
    display: inline-block;
}

/* ==========================================================================
   Shop Header
   ========================================================================== */
.acs-shop-header,
.acs-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.acs-shop-title,
.acs-content-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--acs-text);
    letter-spacing: -0.02em;
}

.acs-shop-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

.acs-shop-controls input,
.acs-shop-search input {
    padding: 9px 14px;
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius-sm);
    font-size: 14px;
    min-width: 220px;
    transition: border-color var(--acs-transition);
    color: var(--acs-text);
}

.acs-shop-controls input:focus,
.acs-shop-search input:focus {
    outline: none;
    border-color: var(--acs-gold);
}

.acs-content-filter select {
    padding: 8px 14px;
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius-sm);
    font-size: 14px;
    background: #fff;
    color: var(--acs-text);
}

/* ==========================================================================
   Loading State
   ========================================================================== */
.acs-loading-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--acs-text-muted);
}

.acs-loading-state p { margin-top: 12px; font-size: 14px; }

/* ==========================================================================
   Grid
   ========================================================================== */
.acs-shop-grid,
.acs-content-grid {
    display: grid;
    grid-template-columns: repeat(var(--acs-columns, 3), 1fr);
    gap: 24px;
}

@media (max-width: 991px) {
    .acs-shop-grid,
    .acs-content-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .acs-shop-grid,
    .acs-content-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Template Pack Card
   ========================================================================== */
.acs-template-card {
    background: var(--acs-bg);
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--acs-transition), transform var(--acs-transition), border-color var(--acs-transition);
    cursor: pointer;
}

.acs-template-card:hover {
    box-shadow: var(--acs-shadow-hover);
    transform: translateY(-3px);
    border-color: var(--acs-gold);
}

.acs-template-thumb {
    position: relative;
    width: 100%;
    padding-top: 66.67%;
    background: var(--acs-cream);
    overflow: hidden;
}

.acs-template-thumb img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.acs-template-card:hover .acs-template-thumb img {
    transform: scale(1.04);
}

.acs-template-thumb-placeholder {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acs-text-muted);
    font-size: 13px;
    background: linear-gradient(135deg, #f0ece7 0%, #e8e2da 100%);
}

/* Mini thumbnails strip for packs with multiple templates */
.acs-pack-thumbs {
    position: absolute;
    bottom: 8px; left: 8px;
    display: flex;
    gap: 4px;
}

.acs-pack-thumbs-badge {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 2px solid rgba(255,255,255,0.8);
    overflow: hidden;
    background: var(--acs-cream);
}

.acs-pack-thumbs-badge img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.acs-template-info {
    padding: 14px 16px 8px;
    flex: 1;
}

.acs-template-category {
    display: inline-block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--acs-gold);
    font-weight: 700;
    margin-bottom: 5px;
}

.acs-template-name {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--acs-text);
    line-height: 1.3;
}

.acs-template-count {
    font-size: 12px;
    color: var(--acs-text-muted);
}

.acs-create-btn {
    margin: 0 16px 16px;
    width: calc(100% - 32px);
}

/* ==========================================================================
   Content Card (My Designs)
   ========================================================================== */
.acs-content-card {
    background: var(--acs-bg);
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--acs-transition);
}

.acs-content-card:hover {
    box-shadow: var(--acs-shadow-hover);
}

.acs-content-thumb {
    position: relative;
    width: 100%;
    padding-top: 66.67%;
    background: var(--acs-cream);
    overflow: hidden;
}

.acs-content-thumb img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

.acs-content-thumb-placeholder {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acs-text-muted);
    font-size: 13px;
    background: linear-gradient(135deg, #f0ece7 0%, #e8e2da 100%);
}

/* Status Badges */
.acs-status-badge {
    position: absolute;
    top: 10px; right: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid transparent;
}

.acs-status-completed,
.acs-status-done       { background: var(--acs-success-bg); color: #10421f; border-color: var(--acs-success); }
.acs-status-autofill,
.acs-status-export,
.acs-status-pending    { background: var(--acs-warn-bg);    color: #6b4110; border-color: var(--acs-warn);    }
.acs-status-failed     { background: var(--acs-danger-bg);  color: #7a1c0d; border-color: var(--acs-danger);  }

.acs-content-info {
    padding: 14px 16px 6px;
    flex: 1;
}

.acs-content-name {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--acs-text);
}

.acs-content-date {
    font-size: 12px;
    color: var(--acs-text-muted);
}

.acs-status-message {
    margin: 6px 0 0;
    font-size: 12px;
    color: #721c24;
}

.acs-content-actions {
    padding: 8px 16px 16px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Empty state */
.acs-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--acs-text-muted);
}

.acs-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.35;
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.acs-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.acs-page-btn {
    min-width: 36px;
    padding: 8px 14px;
    border: 1px solid var(--acs-border-strong);
    border-radius: var(--acs-radius-sm);
    background: var(--acs-bg);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    color: var(--acs-text);
    transition: background var(--acs-transition), border-color var(--acs-transition), color var(--acs-transition);
}

.acs-page-btn:hover { border-color: var(--acs-charcoal); }

.acs-page-btn.is-active {
    background: var(--acs-charcoal);
    border-color: var(--acs-charcoal);
    color: var(--acs-white);
}

.acs-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ==========================================================================
   Buttons — mirror .btn from the brand guide.
   Charcoal is the workhorse; coral is the brand accent; secondary is the
   outlined neutral. Tracking + uppercase keep them on-brand at every size.
   ========================================================================== */
.acs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--acs-sp-2);
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: var(--acs-radius-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--acs-transition), color var(--acs-transition), border-color var(--acs-transition);
}

.acs-btn:hover { text-decoration: none; }

.acs-btn:focus-visible {
    outline: 2px solid var(--acs-focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--acs-focus-halo);
}

.acs-btn-sm { padding: 8px 14px; font-size: 12px; }
.acs-btn-lg { padding: 16px 32px; font-size: 15px; }

/* Primary — solid charcoal. Top of the page CTA. */
.acs-btn-primary {
    background: var(--acs-charcoal);
    color: var(--acs-white);
    border-color: var(--acs-charcoal);
}
.acs-btn-primary:hover {
    background: #000;
    border-color: #000;
    color: var(--acs-white);
}

/* Coral — brand accent. Reserve for emphasis (e.g. final-step submits). */
.acs-btn-coral {
    background: var(--acs-coral);
    color: var(--acs-white);
    border-color: var(--acs-coral);
}
.acs-btn-coral:hover {
    background: var(--acs-coral-hover);
    border-color: var(--acs-coral-hover);
    color: var(--acs-white);
}

/* Secondary — outlined charcoal, fills on hover. */
.acs-btn-secondary {
    background: transparent;
    color: var(--acs-charcoal);
    border-color: var(--acs-charcoal);
}
.acs-btn-secondary:hover {
    background: var(--acs-charcoal);
    color: var(--acs-white);
}

/* Outline — kept as alias for legacy callers, mapped to secondary. */
.acs-btn-outline {
    background: transparent;
    color: var(--acs-charcoal);
    border-color: var(--acs-charcoal);
}
.acs-btn-outline:hover {
    background: var(--acs-charcoal);
    color: var(--acs-white);
}

/* Coral outline — used for the connect-card "Continue" CTA, which
   visually steps down from the solid-coral Connect/Retry without
   losing the brand accent. */
.acs-btn-coral-outline {
    background: transparent;
    color: var(--acs-coral);
    border-color: var(--acs-coral);
}
.acs-btn-coral-outline:hover {
    background: var(--acs-coral);
    border-color: var(--acs-coral);
    color: var(--acs-white);
}

/* Light — for charcoal/coral surfaces. */
.acs-btn-light {
    background: var(--acs-white);
    color: var(--acs-charcoal);
    border-color: var(--acs-white);
}
.acs-btn-light:hover {
    background: transparent;
    color: var(--acs-white);
    border-color: var(--acs-white);
}

.acs-btn:disabled,
.acs-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ==========================================================================
   Modal
   ========================================================================== */
.acs-modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(28, 28, 30, 0.55);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(2px);
}

.acs-modal {
    background: var(--acs-bg);
    border-radius: var(--acs-radius);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 80px rgba(28, 28, 30, 0.22);
    animation: acsSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes acsSlideUp {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.acs-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--acs-border);
    position: sticky;
    top: 0;
    background: var(--acs-bg);
    z-index: 10;
}

.acs-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--acs-text);
}

.acs-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--acs-text-muted);
    padding: 0;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background var(--acs-transition);
}

.acs-modal-close:hover {
    background: var(--acs-secondary);
    color: var(--acs-text);
}

.acs-modal-body { padding: 24px; }

/* Loading inside modal */
.acs-loading {
    text-align: center;
    padding: 40px 20px;
}

.acs-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--acs-hairline);
    border-top-color: var(--acs-coral);
    border-radius: 50%;
    animation: acsSpin 0.7s linear infinite;
    margin: 0 auto var(--acs-sp-3);
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .acs-spinner { animation-duration: 1.6s; }
}

@keyframes acsSpin {
    to { transform: rotate(360deg); }
}

/* Pack Description */
.acs-pack-description {
    font-size: 14px;
    color: var(--acs-text-muted);
    margin: 0 0 16px;
}

/* Mini template list inside modal */
.acs-templates-mini-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.acs-mini-template {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--acs-text-muted);
    max-width: 80px;
    text-align: center;
}

.acs-mini-template img {
    width: 72px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--acs-border);
}

.acs-mini-template-thumb-placeholder {
    width: 72px;
    height: 48px;
    background: var(--acs-cream);
    border: 1px solid var(--acs-border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--acs-text-muted);
}

/* ==========================================================================
   Form Fields
   ========================================================================== */
.acs-field-group {
    margin-bottom: 18px;
}

.acs-field-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--acs-text);
    margin-bottom: 6px;
}

.acs-field-group input[type="text"],
.acs-field-group input[type="email"],
.acs-field-group input[type="url"],
.acs-field-group input[type="number"],
.acs-field-group input[type="date"],
.acs-field-group input[type="color"],
.acs-field-group textarea,
.acs-field-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius-sm);
    font-size: 14px;
    color: var(--acs-text);
    transition: border-color var(--acs-transition);
    background: #fff;
}

.acs-field-group input:focus,
.acs-field-group textarea:focus,
.acs-field-group select:focus {
    outline: none;
    border-color: var(--acs-gold);
    box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.15);
}

.acs-field-group textarea { min-height: 80px; resize: vertical; }

.acs-field-hint {
    font-size: 12px;
    color: var(--acs-text-muted);
    margin-top: 4px;
}

.acs-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--acs-border);
}

/* ==========================================================================
   Result (modal success / error)
   ========================================================================== */
.acs-result-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #d4edda;
    color: #155724;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.acs-result-icon.error {
    background: #f8d7da;
    color: #721c24;
}

#acs-modal-result {
    text-align: center;
    padding: 10px 0;
}

#acs-modal-result p {
    font-size: 15px;
    color: var(--acs-text);
    margin-bottom: 12px;
}

#acs-result-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* ==========================================================================
   Login notice / Error / Empty
   ========================================================================== */
.acs-login-notice {
    padding: 20px;
    background: var(--acs-cream);
    border-radius: var(--acs-radius-sm);
    text-align: center;
    color: var(--acs-text-muted);
}

.acs-error {
    padding: var(--acs-sp-4);
    background: var(--acs-danger-bg);
    border: 1px solid var(--acs-danger);
    border-left-width: 3px;
    border-radius: var(--acs-radius-md);
    color: #7a1c0d;
    font-size: 14px;
    line-height: 1.55;
    text-align: center;
}

.acs-hidden { display: none !important; }

/* ==========================================================================
   Connect Flow (TA-2496) — [canva_connect_shop] onboarding shortcode.
   Card pattern lifted off the page with shadow-md, weight-300 display title.
   ========================================================================== */
.acs-connect-flow-root {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 320px;
    padding: var(--acs-sp-5) var(--acs-sp-4);
    background: #efefef;
    color: var(--acs-text);
    font-family: var(--acs-font-sans);
    box-sizing: border-box;
}
.acs-connect-flow-root *,
.acs-connect-flow-root *::before,
.acs-connect-flow-root *::after { box-sizing: border-box; }

.acs-connect-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    width: 100%;
}

.acs-connect-card {
    width: 100%;
    max-width: 440px;
    background: var(--acs-bg);
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius-md);
    box-shadow: var(--acs-shadow-md);
    padding: var(--acs-sp-7) var(--acs-sp-6);
    text-align: center;
}

.acs-connect-card__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--acs-sp-4);
}
.acs-connect-card__logo svg { display: block; }

.acs-connect-card__title {
    font-family: var(--acs-font-sans);
    font-size: 32px;
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--acs-text);
    margin: 0 0 var(--acs-sp-3);
}

/* Coral hairline under the card title (matches section coral-rule). */
.acs-connect-card__title::after {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    background: var(--acs-coral);
    margin: var(--acs-sp-3) auto 0;
}

.acs-connect-card__body {
    font-size: 15px;
    line-height: 1.55;
    color: var(--acs-text-muted);
    margin: 0 0 var(--acs-sp-5);
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Card CTA — full-width charcoal, sits a touch larger than the base size. */
.acs-connect-card__cta.acs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 24px;
    font-size: 13px;
}

/* TA-2539 State A — body copy reframed as invite-required guidance. Slightly
   tighter than `.acs-connect-card__body` because it carries a mailto link
   that anchors the message. */
.acs-connect-card__invite-note {
    font-size: 15px;
    line-height: 1.55;
    color: var(--acs-text);
    margin: 0 auto var(--acs-sp-5);
    max-width: 36ch;
    text-align: center;
}

/* TA-2539 — mailto link inside the card. Coral hover keeps it consistent with
   the existing `.acs-connect-error-notice__email` treatment. */
.acs-connect-card__invite-link {
    color: var(--acs-coral);
    text-decoration: underline;
}
.acs-connect-card__invite-link:hover,
.acs-connect-card__invite-link:focus {
    color: var(--acs-coral-hover);
}

/* TA-2539 — italic note rendered as a SIBLING of .acs-connect-card, sitting
   below the white card on the page background. Used in both pre-OAuth states:
   State A carries the "Already joined? Proceed to connect" action; State B
   carries the "Not yet joined…" invite hint. */
.acs-connect-below-note {
    margin: var(--acs-sp-5) auto 0;
    max-width: 360px;
    font-size: 13px;
    font-style: italic;
    line-height: 1.55;
    color: var(--acs-text);
    text-align: center;
}

/* Inline button styled as an underlined coral link — State A's
   "Proceed to connect" sits inside `.acs-connect-below-note` and triggers
   the same OAuth init as the primary Connect button. Italic is inherited
   from the parent paragraph.
   Selector is double-classed so it beats the eduma theme's global
   `button:not(.owl-page)` rule (specificity 0,1,1) — single-class fails. */
.acs-connect-below-note .acs-connect-below-note__action {
    display: inline;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    color: var(--acs-coral);
    text-decoration: underline;
    cursor: pointer;
    box-shadow: none;
    text-transform: none;
    line-height: inherit;
    border-radius: 0;
}
.acs-connect-below-note .acs-connect-below-note__action:hover,
.acs-connect-below-note .acs-connect-below-note__action:focus {
    background: none;
    color: var(--acs-coral-hover);
}
.acs-connect-below-note .acs-connect-below-note__action:disabled {
    color: var(--acs-text-muted);
    cursor: not-allowed;
}

/* State B mailto link inside `.acs-connect-below-note`. Anchor tag inherits
   italic from the parent paragraph; only the colour/underline treatment is
   set here (same coral hover behaviour as `.acs-connect-card__invite-link`). */
.acs-connect-below-note__link {
    color: var(--acs-coral);
    text-decoration: underline;
}
.acs-connect-below-note__link:hover,
.acs-connect-below-note__link:focus {
    color: var(--acs-coral-hover);
}

/* Help card under the Canva + Axis widget (TA-2536). Flags the
   "client ID is invalid" error and points users at the admin who can
   add them to the Canva org. Rendered as a sibling of .acs-connect-card
   by the three connect-flow states only. */
.acs-connect-error-notice {
    width: 100%;
    max-width: 300px;
    margin: var(--acs-sp-6) auto 0;
    text-align: center;
}

.acs-connect-error-notice__intro {
    font-style: italic;
    font-size: 14px;
    line-height: 1.55;
    color: var(--acs-text);
    margin: 0 0 var(--acs-sp-4);
}

.acs-connect-error-notice__email {
    color: var(--acs-coral);
    text-decoration: underline;
}

.acs-connect-error-notice__email:hover,
.acs-connect-error-notice__email:focus {
    color: var(--acs-coral-hover);
}

.acs-connect-error-notice__example {
    background: var(--acs-bg);
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius-md);
    box-shadow: var(--acs-shadow-md);
    padding: var(--acs-sp-5);
}

.acs-connect-error-notice__image {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    margin: 0 auto;
}

.acs-shop-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    padding: var(--acs-sp-6);
    border: 1px dashed var(--acs-border-strong);
    border-radius: var(--acs-radius-md);
    color: var(--acs-text-muted);
    font-size: 15px;
    background: var(--acs-bg-muted);
}

/* ==========================================================================
   Shop scaffold (TA-2500) — non-functional layout: search, pills,
   "Your designs" empty state, and template packs grouped by category.
   Mirrors the design-guide search-bar + chip + empty-state patterns.
   ========================================================================== */
.acs-shop-scaffold,
.acs-shop-scaffold *,
.acs-shop-scaffold *::before,
.acs-shop-scaffold *::after { box-sizing: border-box; }

.acs-shop-scaffold {
    width: 100%;
    color: var(--acs-text);
    font-family: var(--acs-font-sans);
}

.acs-shop-scaffold__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--acs-sp-3);
    margin-bottom: var(--acs-sp-5);
    padding-bottom: var(--acs-sp-3);
    border-bottom: 1px solid var(--acs-hairline);
}

.acs-shop-scaffold__title {
    margin: 0;
    font-family: var(--acs-font-sans);
    font-size: 28px;
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--acs-text);
}

/* Coral hairline beneath the title — same pattern as design-guide sections. */
.acs-shop-scaffold__title::after {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    background: var(--acs-coral);
    margin-top: var(--acs-sp-3);
}

.acs-shop-scaffold__search {
    flex: 0 1 320px;
}

.acs-shop-scaffold__search-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius-md);
    background: var(--acs-bg);
    font-family: inherit;
    font-size: 14px;
    color: var(--acs-text-subtle);
    cursor: not-allowed;
    transition: border-color var(--acs-transition);
}

.acs-shop-scaffold__search-input::placeholder { color: var(--acs-text-subtle); }
.acs-shop-scaffold__search-input:focus { outline: none; }

/* Pills row — chip pattern. Disabled in this ticket; charcoal hover/active
   states are kept so a future pass can wire them up without a re-skin. */
.acs-shop-scaffold__pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--acs-sp-2);
    margin-bottom: var(--acs-sp-6);
}

.acs-shop-scaffold__pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid var(--acs-border-strong);
    border-radius: 999px;
    background: var(--acs-bg);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--acs-text);
    white-space: nowrap;
    cursor: not-allowed;
    transition: border-color var(--acs-transition), background var(--acs-transition), color var(--acs-transition);
}

.acs-shop-scaffold__pill:hover { border-color: var(--acs-charcoal); }

.acs-shop-scaffold__pill.is-active {
    background: var(--acs-charcoal);
    border-color: var(--acs-charcoal);
    color: var(--acs-white);
}

.acs-shop-scaffold__section {
    margin-bottom: var(--acs-sp-7);
}

.acs-shop-scaffold__section--your-designs { margin-bottom: var(--acs-sp-7); }

/* Eyebrow-style section titles — small caps, coral, before each row. */
.acs-shop-scaffold__section-title {
    margin: 0 0 var(--acs-sp-3);
    font-family: var(--acs-font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--acs-coral);
}

/* Empty state — empty-state pattern: centered, padded, subtle. */
.acs-shop-scaffold__empty {
    border: 1px solid var(--acs-hairline);
    background: var(--acs-bg-muted);
    border-radius: var(--acs-radius-md);
    color: var(--acs-text-muted);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    padding: var(--acs-sp-6) var(--acs-sp-5);
}

.acs-shop-scaffold__empty--block { padding: var(--acs-sp-7) var(--acs-sp-5); }

.acs-shop-scaffold__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
}

.acs-shop-scaffold__row {
    position: relative;
    margin: 0 -4px;
}

.acs-shop-scaffold__row-track {
    display: flex;
    gap: var(--acs-sp-4);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.acs-shop-scaffold__row-track::-webkit-scrollbar { display: none; }

/* Tile cards (TA-2501) — property-card pattern: white surface, hover lift,
   thumbnail with aspect-ratio, link-with-arrow style "Generate >" CTA. */
.acs-shop-scaffold__tile {
    flex: 0 0 280px;
    scroll-snap-align: start;
    background: var(--acs-bg);
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.2s, border-color var(--acs-transition);
}

.acs-shop-scaffold__tile:hover {
    box-shadow: var(--acs-shadow-md);
    transform: translateY(-2px);
}

.acs-shop-scaffold__tile:focus-visible {
    outline: 2px solid var(--acs-focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--acs-focus-halo);
}

.acs-shop-scaffold__tile-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--acs-bg-muted);
    overflow: hidden;
}

/* Fallback for browsers without aspect-ratio support. */
@supports not (aspect-ratio: 1) {
    .acs-shop-scaffold__tile-thumb {
        padding-top: 62.5%; /* 10/16 */
        height: 0;
    }
}

.acs-shop-scaffold__tile-thumb img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}

.acs-shop-scaffold__tile-placeholder {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acs-text-subtle);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--acs-bg-muted);
}

.acs-shop-scaffold__tile-body {
    padding: var(--acs-sp-4) var(--acs-sp-4) var(--acs-sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--acs-sp-3);
    flex: 1;
}

.acs-shop-scaffold__tile-name {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--acs-charcoal);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.3em * 2);
    word-break: break-word;
}

.acs-shop-scaffold__chips {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: var(--acs-sp-2);
    min-height: 24px;
}

/* Card chip — a touch tighter than the pill row above. */
.acs-shop-scaffold__chip {
    display: inline-block;
    max-width: 120px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--acs-bg);
    border: 1px solid var(--acs-border-strong);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.4;
    color: var(--acs-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.acs-shop-scaffold__chip--more {
    background: transparent;
    border-style: dashed;
    color: var(--acs-text-muted);
    flex-shrink: 0;
}

/* Link-with-arrow style — charcoal label, coral on hover, arrow nudges right. */
.acs-shop-scaffold__tile-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: var(--acs-sp-1);
    color: var(--acs-charcoal);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.4;
    transition: color var(--acs-transition);
}

.acs-shop-scaffold__tile:hover .acs-shop-scaffold__tile-cta { color: var(--acs-coral); }

.acs-shop-scaffold__tile-cta-arrow {
    font-size: 16px;
    line-height: 1;
    transition: transform var(--acs-transition);
}

.acs-shop-scaffold__tile:hover .acs-shop-scaffold__tile-cta-arrow {
    transform: translateX(3px);
}

@media (max-width: 991px) {
    .acs-shop-scaffold__tile { flex-basis: 240px; }
}

@media (max-width: 575px) {
    .acs-shop-scaffold__header { align-items: stretch; }
    .acs-shop-scaffold__search { flex-basis: 100%; }
    .acs-shop-scaffold__pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-left: -4px;
        margin-right: -4px;
        padding: 4px;
        scrollbar-width: thin;
    }
    .acs-shop-scaffold__pill { flex: 0 0 auto; }
    .acs-shop-scaffold__tile { flex-basis: 220px; }
    .acs-shop-scaffold__row-track { scrollbar-width: thin; }
}

/* ==========================================================================
   Generate screen — required-objects driven, included templates with
   per-card include + export controls, advanced overrides table, and a
   right-aligned primary CTA. Originally TA-2508; extended for the
   Phase A wireframe rev (template selection / export options /
   editable overrides).
   ========================================================================== */
.acs-generate-screen,
.acs-generate-screen *,
.acs-generate-screen *::before,
.acs-generate-screen *::after { box-sizing: border-box; }

/* The screen is a vertical stack of independent section cards (Content
   details / Included templates / Overrides) rather than a single big
   card. The pack header (title + back link) sits above the first card;
   the inline error sits below the last card. */
.acs-generate-screen {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    color: var(--acs-text);
    font-family: var(--acs-font-sans);
    display: flex;
    flex-direction: column;
    gap: var(--acs-sp-5);
}

/* Per-section group: title + optional helper sit OUTSIDE the white
   card (above it); body + footer sit inside. The whole group can be
   hidden via the `hidden` HTML attribute (used for the overrides card
   while Advanced is collapsed). */
.acs-generate-screen__group {
    display: flex;
    flex-direction: column;
    gap: var(--acs-sp-2);
    margin: 0;
}
.acs-generate-screen__group[hidden] { display: none; }

.acs-generate-screen__group-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 4px;
}

.acs-generate-screen__group-title {
    margin: 0;
    font-family: var(--acs-font-sans);
    font-size: 18px;
    font-weight: 600;
    color: var(--acs-text);
    line-height: 1.25;
    letter-spacing: -0.005em;
    text-transform: none;
}

.acs-generate-screen__group-helper {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--acs-text-muted);
}

.acs-generate-screen__card {
    background: var(--acs-bg);
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius-md);
    box-shadow: var(--acs-shadow-md);
    overflow: hidden;
}

.acs-generate-screen__card-body {
    padding: var(--acs-sp-5) var(--acs-sp-6);
}

/* Card footer — right-aligned coral Generate button on a faint muted
   strip, separated from the body by a hairline. */
.acs-generate-screen__card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--acs-sp-3);
    padding: var(--acs-sp-3) var(--acs-sp-6);
    border-top: 1px solid var(--acs-hairline);
    background: var(--acs-bg-muted, #fafafa);
}

.acs-generate-screen__header {
    display: flex;
    flex-direction: column;
    gap: var(--acs-sp-2);
    margin-bottom: var(--acs-sp-5);
}

/* Back link — chevron + label, slides on hover, mirrors the events
   page back-link partial so the affordance reads identically across the site. */
.acs-generate-screen__back {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    padding: 0;
    color: var(--acs-text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.2;
    cursor: pointer;
    transition: color var(--acs-transition);
}

.acs-generate-screen__back svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.8;
    transition: transform var(--acs-transition);
}

.acs-generate-screen__back:hover { color: var(--acs-coral); }
.acs-generate-screen__back:hover svg { transform: translateX(-3px); }

.acs-generate-screen__back:focus-visible {
    outline: 2px solid var(--acs-focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--acs-focus-halo);
}

.acs-generate-screen__title {
    font-family: var(--acs-font-sans);
    font-size: 32px;
    font-weight: 400;
    color: var(--acs-text);
    margin: var(--acs-sp-2) 0 0;
    line-height: 1.15;
    letter-spacing: -0.005em;
}

.acs-generate-screen__rule {
    width: 36px;
    height: 3px;
    background: var(--acs-coral);
    margin-top: var(--acs-sp-2);
}

.acs-generate-screen__body { display: block; }

.acs-generate-screen__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--acs-sp-2);
    margin-top: var(--acs-sp-2);
}

.acs-generate-screen__helper {
    margin: 0 0 var(--acs-sp-4);
    font-size: 14px;
    line-height: 1.55;
    color: var(--acs-text-muted);
}

.acs-generate-screen__section { margin-bottom: var(--acs-sp-5); }

/* Eyebrow-style section titles — keeps form sections quiet but present. */
.acs-generate-screen__section-title {
    margin: 0 0 var(--acs-sp-3);
    font-family: var(--acs-font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--acs-text-muted);
}

/* ----- Content details: two-column grid (fields | info note) ----- */
.acs-generate-screen__content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--acs-sp-5);
    align-items: start;
}

.acs-generate-screen__content-fields {
    display: flex;
    flex-direction: column;
    gap: var(--acs-sp-3);
}

/* Slot field shell — label above the select. */
.acs-generate-screen__field {
    display: flex;
    flex-direction: column;
    gap: var(--acs-sp-1);
}

.acs-generate-screen__label {
    font-size: 13px;
    font-weight: 500;
    color: var(--acs-text);
}

/* ----- Slot select component ----- */
.acs-select {
    position: relative;
    display: block;
}

.acs-select__el {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 11px 36px 11px 14px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    color: var(--acs-text);
    background: var(--acs-bg);
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius-md);
    transition: border-color var(--acs-transition), box-shadow var(--acs-transition);
    cursor: pointer;
}

/* Chevron rendered via background-image so we don't need an extra DOM node
   per select (some selects sit inside the export panel which packs tight). */
.acs-select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 10px;
    height: 10px;
    pointer-events: none;
    transform: translateY(-65%) rotate(45deg);
    border-right: 2px solid var(--acs-text-muted);
    border-bottom: 2px solid var(--acs-text-muted);
}

.acs-select__el:focus {
    outline: none;
    border-color: var(--acs-charcoal);
    box-shadow: 0 0 0 3px rgba(40, 40, 40, 0.08);
}

.acs-select__el:disabled {
    background: var(--acs-bg-muted);
    color: var(--acs-text-subtle);
    cursor: not-allowed;
}

/* ----- Slot typeahead (search-as-you-type combobox) -----
   Built on top of .acs-select so the wrapper styling, focus ring and
   chevron carry over from the plain-select look. The inner element is a
   text input rather than a select; we add behaviour-specific bits here. */
.acs-select.acs-typeahead .acs-select__el {
    /* Text-entry cursor for the input — overrides .acs-select__el's pointer
       cursor (which made sense for a real <select> but not for typing). */
    cursor: text;
}
.acs-select.acs-typeahead .acs-select__el:disabled {
    cursor: not-allowed;
}
.acs-typeahead__listbox {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    max-height: 260px;
    overflow-y: auto;
    background: var(--acs-bg);
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius-md);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.acs-typeahead__option {
    display: block;
    padding: 8px 14px;
    font-size: 14px;
    line-height: 1.35;
    color: var(--acs-text);
    cursor: pointer;
}
.acs-typeahead__option:hover,
.acs-typeahead__option.is-active {
    background: var(--acs-bg-muted);
}
.acs-typeahead__option-secondary {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--acs-text-subtle);
}
.acs-typeahead__empty {
    padding: 8px 14px;
    font-size: 13px;
    color: var(--acs-text-subtle);
    font-style: italic;
}

/* ----- Included templates: card grid ----- */
.acs-generate-screen__templates-track {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--acs-sp-4);
    padding: 2px;
}

/* `.acs-gen-card` is the generate-screen's per-template tile. Distinct from
   the legacy [canva_shop] modal's `.acs-template-card` (pack browser). */
.acs-gen-card {
    position: relative;
    background: var(--acs-bg);
    border: 2px solid var(--acs-border);
    border-radius: var(--acs-radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color var(--acs-transition), box-shadow var(--acs-transition);
}

.acs-gen-card.is-included {
    border-color: var(--acs-coral);
    box-shadow: 0 0 0 1px rgba(235, 83, 66, 0.15);
}

/* Top-right include checkbox — visible affordance on the thumb. */
.acs-gen-card__include {
    position: absolute;
    top: var(--acs-sp-2);
    right: var(--acs-sp-2);
    z-index: 2;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.acs-gen-card__include input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.acs-gen-card__include-box {
    width: 22px;
    height: 22px;
    background: var(--acs-bg);
    border: 1px solid var(--acs-border-strong);
    border-radius: var(--acs-radius-sm);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--acs-charcoal);
    transition: background var(--acs-transition), border-color var(--acs-transition);
}

.acs-gen-card__include input:checked + .acs-gen-card__include-box::after {
    /* Subtle checkmark using a rotated rectangle border. */
    content: "";
    width: 6px;
    height: 11px;
    margin-top: -2px;
    border-right: 2px solid var(--acs-charcoal);
    border-bottom: 2px solid var(--acs-charcoal);
    transform: rotate(45deg);
}

.acs-gen-card__include input:focus-visible + .acs-gen-card__include-box {
    outline: 2px solid var(--acs-focus-ring);
    outline-offset: 2px;
}

.acs-gen-card__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--acs-bg-muted);
    overflow: hidden;
}

@supports not (aspect-ratio: 1) {
    .acs-gen-card__thumb { padding-top: 75%; height: 0; }
}

.acs-gen-card__thumb img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}

.acs-gen-card__placeholder {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acs-text-subtle);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--acs-bg-muted);
}

.acs-gen-card__name {
    padding: var(--acs-sp-2) var(--acs-sp-3);
    font-size: 13px;
    font-weight: 600;
    color: var(--acs-text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----- Per-card export region ----- */
.acs-gen-card__export {
    border-top: 1px solid var(--acs-hairline);
    padding: var(--acs-sp-2) var(--acs-sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--acs-sp-2);
    background: var(--acs-bg);
}

.acs-gen-card__export-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--acs-text);
    cursor: pointer;
    user-select: none;
}

.acs-gen-card__export-toggle input {
    width: 14px;
    height: 14px;
    accent-color: var(--acs-charcoal);
    cursor: pointer;
}

/* Disclosure button — used by both Export options and Advanced options. */
.acs-disclosure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    padding: 4px 0;
    color: var(--acs-text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--acs-transition);
}

.acs-disclosure:hover { color: var(--acs-text); }
.acs-disclosure:focus-visible {
    outline: 2px solid var(--acs-focus-ring);
    outline-offset: 2px;
    border-radius: var(--acs-radius-sm);
}

.acs-disclosure__icon {
    transition: transform var(--acs-transition);
}

.acs-disclosure[aria-expanded="true"] .acs-disclosure__icon {
    transform: rotate(180deg);
}

.acs-gen-card__export-disclosure {
    align-self: flex-start;
}

.acs-gen-card__export-panel {
    border-top: 1px dashed var(--acs-hairline);
    padding-top: var(--acs-sp-2);
}

.acs-gen-card__export-panel[hidden] { display: none; }

/* ----- Export options panel rows ----- */
.acs-export-panel {
    display: flex;
    flex-direction: column;
    gap: var(--acs-sp-2);
}

.acs-export-panel__row {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: var(--acs-sp-2);
    align-items: center;
}

.acs-export-panel__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--acs-text-muted);
    letter-spacing: 0.04em;
}

.acs-export-panel__radios {
    display: inline-flex;
    align-items: center;
    gap: var(--acs-sp-3);
}

.acs-export-panel__input {
    width: 100%;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 13px;
    color: var(--acs-text);
    background: var(--acs-bg);
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius-md);
    transition: border-color var(--acs-transition), box-shadow var(--acs-transition);
}

.acs-export-panel__input:focus {
    outline: none;
    border-color: var(--acs-charcoal);
    box-shadow: 0 0 0 3px rgba(40, 40, 40, 0.08);
}

/* Compact radio used in the export panel. */
.acs-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--acs-text);
    cursor: pointer;
}

.acs-radio input {
    accent-color: var(--acs-charcoal);
    cursor: pointer;
}

/* Tighter select inside the export panel. */
.acs-export-panel .acs-select__el {
    padding: 8px 30px 8px 12px;
    font-size: 13px;
}

.acs-export-panel__row > .acs-select__el {
    /* Standalone select (no .acs-select wrapper) — drop the chevron sliver
       provided by the wrapper since it lives on .acs-select::after. */
}

/* ----- Advanced options toggle ----- */
.acs-generate-screen__advanced {
    margin: var(--acs-sp-5) 0;
}

.acs-generate-screen__advanced-toggle {
    width: 100%;
    background: none;
    border: 0;
    padding: var(--acs-sp-3) 0;
    display: flex;
    align-items: center;
    gap: var(--acs-sp-3);
    color: var(--acs-text-muted);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.acs-generate-screen__advanced-rule {
    flex: 1 1 auto;
    height: 1px;
    background: var(--acs-light-grey);
}

.acs-generate-screen__advanced-label {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--acs-text-muted);
    font-weight: 500;
    transition: color var(--acs-transition);
}

.acs-generate-screen__advanced-toggle:hover .acs-generate-screen__advanced-label { color: var(--acs-text); }
.acs-generate-screen__advanced-toggle:focus-visible {
    outline: 2px solid var(--acs-focus-ring);
    outline-offset: 2px;
    border-radius: var(--acs-radius-sm);
}

.acs-generate-screen__section--overrides[hidden] { display: none; }

/* ----- Inline Content preview & overrides panel ----- */
.acs-generate-screen__advanced-panel {
    margin-top: var(--acs-sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--acs-sp-3);
}
.acs-generate-screen__advanced-panel[hidden] { display: none; }

.acs-generate-screen__advanced-panel-title {
    margin: 0;
    font-family: var(--acs-font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--acs-text);
    line-height: 1.25;
}

/* ----- Overrides table ----- */
.acs-override-table-wrap {
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius-md);
    overflow: hidden;
}

.acs-override-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: var(--acs-bg);
    /* Host themes commonly add a default margin-bottom to <table>; the
       table sits inside its own bordered/rounded wrapper here, so any
       cascading margin shows up as a gap below the wrapper's frame. */
    margin-bottom: 0;
}

.acs-override-table thead th {
    text-align: left;
    padding: var(--acs-sp-2) var(--acs-sp-3);
    background: var(--acs-bg-muted);
    color: var(--acs-text-muted);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--acs-border);
}

.acs-override-table__row + .acs-override-table__row th,
.acs-override-table__row + .acs-override-table__row td {
    border-top: 1px solid var(--acs-hairline);
}

.acs-override-table__field {
    width: 38%;
    padding: var(--acs-sp-2) var(--acs-sp-3);
    font-family: var(--acs-font-sans);
    font-weight: 400;
    color: var(--acs-text-muted);
    text-align: left;
    vertical-align: middle;
    background: #fafafa;
}

.acs-override-table__field label {
    cursor: text;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 12.5px;
    color: var(--acs-text);
}

.acs-override-table__value {
    padding: var(--acs-sp-1) var(--acs-sp-2);
    vertical-align: middle;
}

.acs-override-table__input {
    width: 100%;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13px;
    color: var(--acs-text);
    background: var(--acs-bg);
    border: 1px solid transparent;
    border-radius: var(--acs-radius-sm);
    transition: border-color var(--acs-transition), background var(--acs-transition);
}

.acs-override-table__input::placeholder { color: var(--acs-text-subtle); }

.acs-override-table__input:hover {
    border-color: var(--acs-border);
}

.acs-override-table__input:focus {
    outline: none;
    border-color: var(--acs-charcoal);
    box-shadow: 0 0 0 3px rgba(40, 40, 40, 0.08);
}

.acs-override-table__empty td {
    text-align: center;
    padding: var(--acs-sp-4);
    color: var(--acs-text-subtle);
    font-style: italic;
}

/* ----- Image override control ----- */
.acs-override-table__image {
    display: flex;
    align-items: center;
    gap: var(--acs-sp-3);
    padding: 4px 0;
}

.acs-override-table__image-preview {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius-sm);
    background: var(--acs-bg-muted);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.acs-override-table__image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.acs-override-table__image-empty {
    font-size: 11px;
    color: var(--acs-text-subtle);
    text-align: center;
    padding: 0 4px;
    line-height: 1.2;
}

.acs-override-table__image-actions {
    display: flex;
    align-items: center;
    gap: var(--acs-sp-2);
    flex: 1 1 auto;
    min-width: 0;
}

/* The label itself is the clickable "button"; the real file input sits
   inside it, visually hidden but still keyboard-focusable through the
   surrounding label. */
.acs-override-table__image-pick {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 12px;
    padding: 6px 12px;
    margin: 0;
}

.acs-override-table__image-file {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.acs-override-table__image-status {
    font-size: 12px;
    color: var(--acs-text-muted);
}
.acs-override-table__image-status[hidden] { display: none; }

/* ----- Footer ----- */
.acs-generate-screen__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--acs-sp-3);
    margin-top: var(--acs-sp-5);
    padding-top: var(--acs-sp-5);
    border-top: 1px solid var(--acs-hairline);
    flex-wrap: wrap;
}

.acs-generate-screen__cancel {
    margin-right: auto;
}

.acs-generate-screen__cancel,
.acs-generate-screen__submit {
    padding: 12px 22px;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-transform: none;
}

.acs-generate-screen__submit {
    background: var(--acs-coral);
    border: 1px solid var(--acs-coral);
    color: var(--acs-text-inverse);
    transition: background var(--acs-transition), border-color var(--acs-transition);
}

.acs-generate-screen__submit:hover:not([disabled]) {
    background: var(--acs-coral-hover);
    border-color: var(--acs-coral-hover);
}

.acs-generate-screen__submit[disabled] {
    cursor: not-allowed;
    opacity: 0.4;
}

/* In-flight Generating state — the JS swaps the button label to
   "Generating…" which conveys the loading state on its own. No spinner. */
.acs-generate-screen__submit.is-loading {
    cursor: progress;
}

/* Inline error — alert-danger pattern: tinted bg + danger-coloured text. */
.acs-generate-screen__inline-error {
    flex: 1 0 100%;
    margin: var(--acs-sp-3) 0 0;
    padding: var(--acs-sp-3) var(--acs-sp-4);
    background: var(--acs-danger-bg);
    color: #7a1c0d;
    border: 1px solid var(--acs-danger);
    border-left-width: 3px;
    border-radius: var(--acs-radius-md);
    font-size: 13px;
    line-height: 1.5;
}

.acs-generate-screen__inline-error[hidden] { display: none; }

.acs-generate-screen--error .acs-error {
    margin-top: var(--acs-sp-2);
}

/* ==========================================================================
   Responsive tweaks
   ========================================================================== */
@media (max-width: 880px) {
    .acs-generate-screen__content-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .acs-canva-connect-banner { flex-direction: column; }
    .acs-canva-connect-banner .acs-btn { width: 100%; }
    .acs-modal { max-height: 95vh; }
    .acs-shop-controls input { min-width: 160px; }
    .acs-connect-card { padding: var(--acs-sp-6) var(--acs-sp-5); }
    .acs-connect-error-notice__example { padding: var(--acs-sp-4); }
    .acs-generate-screen { padding: var(--acs-sp-5) var(--acs-sp-4); }
    .acs-generate-screen__title { font-size: 26px; }
    .acs-generate-screen__templates-track { grid-template-columns: 1fr; }
    .acs-generate-screen__footer { flex-direction: column; align-items: stretch; }
    .acs-generate-screen__cancel { margin-right: 0; }
    .acs-generate-screen__cancel,
    .acs-generate-screen__submit { width: 100%; justify-content: center; }
    .acs-export-panel__row { grid-template-columns: 56px 1fr; }
    .acs-override-table__field { width: 42%; }
    .acs-shop-scaffold__header { align-items: flex-start; flex-direction: column; }
    .acs-shop-scaffold__search { flex-basis: 100%; width: 100%; }
}