*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            /* AuraLinks — Litbuy palette: bright yellow + BLACK chrome + flame
               orange + white content. Yellow fills always carry near-black ink
               (--accent-ink); orange is the emphasis colour (like "Finds LIT!");
               nav / footer / banner strips are black (--chrome). */
            /* BLACK-first: black is the main surface; white survives in the
               product tiles, hero search pill, text and highlights. */
            --bg: #0d0d0d;
            --surface: #161616;
            --surface-2: #1e1e1e;
            --surface-3: #282828;
            --border: #2b6f9559;
            --border-subtle: rgba(255,255,255,0.09);
            --text: #ffffff;
            --text-secondary: rgba(255,255,255,0.65);
            --text-muted: rgba(255, 255, 255, 0.45);
            --accent: #2b6f95;
            --accent-hover: #1c4a68;
            --accent-dim: #2b6f952e;
            --accent-glow: #2b6f9559;
            --accent-ink: #ffffff;
--accent-on-dark: #ffffff;           /* text colour ON blue fills */
            --red: #2b6f95;   /* emphasis = brand blue */
            --accent-text: #2b6f95;  /* brand blue text on black */
            --chrome: #0d0d0d;               /* black chrome: nav, footer, banners */
            --font-display: 'Anton', sans-serif;
            --font-body: 'Inter', sans-serif;
            --font-mono: 'Space Grotesk', monospace;
            --radius: 20px;
            --radius-sm: 12px;
        }
        html { scroll-behavior: smooth; overflow-x: clip; }
        body { font-family: var(--font-body); font-size: 14px; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; line-height: 1.5; }
        a { color: inherit; text-decoration: none; }
        img { max-width: 100%; display: block; }

        .nav {
            position: fixed; top: 0; left: 0; right: 0; z-index: 100;
            min-height: 64px;
            display: flex; align-items: center; justify-content: space-between;
            padding-top: max(env(safe-area-inset-top), 12px);
            padding-bottom: 8px;
            padding-left: max(env(safe-area-inset-left), 24px);
            padding-right: max(env(safe-area-inset-right), 24px);
            background: rgba(13,13,13,0.97); backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }

        /* Reusable recent-searches dropdown (used by any search input via
           window.attachRecentSearches). */
        .aural-rsdd {
            display: none;
            position: absolute; top: calc(100% + 6px); left: 0; right: 0;
            z-index: 1000;
            background: var(--surface); border: 1px solid var(--border);
            border-radius: 12px; overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.55);
            max-height: 60vh; overflow-y: auto;
            text-align: left;
        }
        .aural-rsdd.active { display: block; }
        .aural-rsdd .rs-head {
            display: flex; justify-content: space-between; align-items: center;
            padding: 10px 14px;
            font-family: var(--font-mono); font-size: 10px; font-weight: 700;
            color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px;
            border-bottom: 1px solid var(--border-subtle);
        }
        .aural-rsdd .rs-clear {
            background: transparent; border: none; color: var(--text-muted);
            font-family: var(--font-mono); font-size: 10px; font-weight: 700;
            cursor: pointer; letter-spacing: 1.5px; text-transform: uppercase;
            padding: 2px 6px; border-radius: 4px;
        }
        .aural-rsdd .rs-clear:hover { color: var(--accent); }
        .aural-rsdd .rs-row {
            display: grid; grid-template-columns: 18px 1fr auto; gap: 10px;
            padding: 10px 14px;
            align-items: center; cursor: pointer;
            border-bottom: 1px solid var(--border-subtle);
            color: var(--text); text-decoration: none;
        }
        .aural-rsdd .rs-row:last-of-type { border-bottom: none; }
        .aural-rsdd .rs-row:hover { background: var(--surface-2); }
        .aural-rsdd .rs-row svg { color: var(--text-muted); flex-shrink: 0; }
        .aural-rsdd .rs-q {
            font-family: var(--font-body); font-size: 13px; font-weight: 500;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .aural-rsdd .rs-x {
            background: transparent; border: none; cursor: pointer;
            width: 24px; height: 24px; border-radius: 6px;
            display: inline-flex; align-items: center; justify-content: center;
            color: var(--text-muted); font-size: 16px; line-height: 1;
        }
        .aural-rsdd .rs-x:hover { background: rgba(239,68,68,0.12); color: #ef4444; }
        .nav-brand { font-family: var(--font-display); font-size: 36px; text-transform: uppercase; letter-spacing: 1px; }
        .nav-brand .accent { color: var(--accent); }
        .nav-links { display: flex; gap: 0; list-style: none; align-items: center; }
        /* ---- header tools ------------------------------------------------
           Compact, the way Jake's Locker presents them: an icon and a short
           label per tool, no box and no second line, so the whole header is
           one ~60px row instead of two stacked ones. What each tool does is
           spelled out on the tool's own page. Only geometry lives here - the
           type, the accent and the CTA are the site's own. */
        /* 64px of min-height plus 12/8 padding made a 84px row; the reference
           is a 56px one. The row's own children carry the height now. */
        .nav { min-height: 44px; padding-top: max(env(safe-area-inset-top), 8px); padding-bottom: 8px; }
        .nav-tools { display: flex; align-items: center; gap: 2px; margin-left: 10px; flex: 0 0 auto; }
        .nav-tool {
            position: relative; display: inline-flex; align-items: center; gap: 6px;
            min-height: 40px; min-width: 40px; padding: 0 9px;
            border: 0; border-radius: 8px; background: transparent;
            color: var(--text-secondary); text-decoration: none;
            font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
            letter-spacing: 1px; text-transform: uppercase; line-height: 1; white-space: nowrap;
            transition: color .15s ease, background .15s ease;
        }
        .nav-tool svg { width: 17px; height: 17px; flex: 0 0 auto; }
        .nav-tool:hover { color: var(--text); background: var(--surface-2, rgba(255,255,255,0.05)); }
        .nav-tool.active { color: var(--accent); }
        .nav-tool.active::after { content: ''; position: absolute; left: 9px; right: 9px; bottom: 1px;
                                  height: 2px; background: var(--accent); border-radius: 1px; }
        /* The row's other pieces were 22px-padded columns; at 40px they sit on
           one line with the tools without changing their look. Desktop only:
           these selectors out-specify each site's "hide the text links and the
           CTA on a phone" rule, and an un-hidden CTA squeezed the wordmark to
           18px at 390. Phones keep their own header rules untouched. */
        @media (min-width: 1024px) {
            .nav-links a:not(.nav-cta) { padding: 0 11px; min-height: 40px; display: inline-flex; align-items: center; }
            .nav-links .nav-wishlist { padding: 0 9px; min-height: 40px; }
            .nav-links .currency-btn { min-height: 34px; }
            /* the CTA is an <a> inside .nav-links, so it inherits that rule's
               22px vertical padding - it needs the same specificity to shed it */
            .nav-links a.nav-cta { padding: 0 20px; min-height: 40px; display: inline-flex; align-items: center; }
            /* the wordmark was a 36px display line - 54px tall on its own, taller
               than every control beside it; 28px keeps the face and the weight.
               NOT inline-flex: that makes the two halves flex items and the space
               between them collapses ("BEST SPREADSHEETFINDS"). */
            .nav-brand { font-size: 28px; line-height: 1.15; }
        }
        .nav-search {
            display: flex; align-items: center; gap: 8px; flex: 1 1 180px; min-width: 0;
            max-width: 380px; margin-left: 12px; padding: 0 14px; min-height: 38px;
            border: 1px solid var(--border-subtle); border-radius: 999px;
            background: var(--surface-2, rgba(255,255,255,0.04));
        }
        .nav-search:focus-within { border-color: var(--accent); }
        .nav-search-ic { width: 16px; height: 16px; color: var(--text-muted); flex: 0 0 auto; }
        .nav-search input {
            flex: 1 1 auto; min-width: 0; width: 0; background: transparent; border: 0; outline: 0;
            color: var(--text); font-family: var(--font-mono); font-size: 12px; letter-spacing: .5px;
        }
        .nav-search input::placeholder { color: var(--text-muted); text-transform: uppercase; font-size: 11px; }
        /* Nothing in the row may shrink below its own content: a squeezed CTA
           clipped its label outside the pill at every width from 1100 to 1366. */
        .nav-links { flex-wrap: nowrap; }
        .nav-links a { white-space: nowrap; }
        .nav-cta { flex: 0 0 auto; white-space: nowrap; }
        .nav-cta-short { display: none; }
        .nav-brand { white-space: nowrap; }
        @media (max-width: 1399px) { .nav-search { display: none; } }
        @media (max-width: 1199px) { .nav-tool .lbl { display: none; } .nav-tool { padding: 0 7px; } }
        @media (max-width: 1099px) { .nav-cta-long { display: none; } .nav-cta-short { display: inline; } }
        /* The same ladder driven by measurement, because a long site name
           overflows the row at widths where a short one still fits. */
        .nav.hdr-s1 .nav-search { display: none; }
        .nav.hdr-s2 .nav-cta-long { display: none; }
        .nav.hdr-s2 .nav-cta-short { display: inline; }
        .nav.hdr-s3 .nav-links a { padding-left: 8px; padding-right: 8px; letter-spacing: 0.5px; }
        .nav.hdr-s3 .nav-links .currency-btn { padding-left: 7px; padding-right: 7px; }
        .nav.hdr-s4 .nav-tool .lbl { display: none; }
        .nav.hdr-s4 .nav-tool { padding: 0 7px; }
        .nav.hdr-s5 .nav-brand { font-size: 22px; }
        .nav.hdr-s6 .nav-tools { margin-left: 4px; }
        .nav.hdr-s6 .nav-tool { padding: 0 5px; }
        @media (max-width: 1023px) {
            /* Below a laptop the tools are their own strip under the header:
               four equal targets, icon over label, 44px tall. */
            .nav-tools {
                position: fixed; left: 0; right: 0; top: var(--nav-h, 65px); z-index: 99;
                margin: 0; padding: 5px 8px; gap: 6px;
                background: var(--surface, #0d0d0f); border-bottom: 1px solid var(--border-subtle);
            }
            .nav-tool {
                flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 4px; gap: 3px;
                flex-direction: column; justify-content: center; font-size: 9px; letter-spacing: .6px;
            }
            .nav-tool .lbl { display: block; }
            .nav-tool svg { width: 18px; height: 18px; }
            .nav-tool.active::after { display: none; }
            body { padding-top: var(--tools-strip, 60px); }   /* room for the strip */
        }
        .nav-links a { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1.5px; padding: 22px 16px; transition: color 0.2s; position: relative; }
        .nav-links a:hover { color: var(--text); }
        .nav-links a.active { color: var(--accent); }
        .nav-links a.active::after { content: ''; position: absolute; bottom: 0; left: 16px; right: 16px; height: 2px; background: var(--accent); }
        .nav-cta { padding: 8px 18px; background: var(--accent); color: var(--accent-ink); font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; border-radius: 8px; transition: background 0.2s; margin-left: 8px; }
        .nav-cta:hover { background: var(--accent-hover); }
        /* Wishlist heart in nav + on cards */
        /* .nav-links .nav-wishlist (2 classes) so it beats `.nav-links a {font-size:12px}` — a plain .nav-wishlist loses on specificity and the heart stayed tiny */
        .nav-links .nav-wishlist { position: relative; display: inline-flex; align-items: center; font-size: 24px; color: var(--text); padding: 20px 12px; transition: color .2s; }
        .nav-links .nav-wishlist:hover { color: #e0245e; } .nav-links .nav-wishlist.active { color: var(--accent); }
        .nav-wish-count { position: absolute; top: 11px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--accent); color: var(--accent-ink, #fff); border-radius: 999px; font-family: var(--font-mono); font-size: 9px; font-weight: 800; line-height: 16px; text-align: center; display: none; }
        .nav-wish-count.show { display: inline-block; }
        /* empty-wishlist "!" nudge: a few gentle pulses to draw the eye to the heart */
        .nav-wish-count.wl-nudge { animation: wlNudge 1.5s ease-in-out 3; }
        @keyframes wlNudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
        /* wishlist add/remove feedback — fires from every heart (cards, product page, wishlist) */
        @keyframes wlPop { 0% { transform: scale(1); } 30% { transform: scale(1.5); } 55% { transform: scale(.82); } 100% { transform: scale(1); } }
        .wl-pop { animation: wlPop .46s cubic-bezier(.2,.7,.3,1.3); }
        @keyframes wlBump { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.32); } }
        .wl-bump { animation: wlBump .44s ease; }
        .wl-particle { position: fixed; pointer-events: none; z-index: 99999; font-size: 15px; line-height: 1; opacity: 1; transition: transform .66s cubic-bezier(.15,.75,.3,1), opacity .66s ease; will-change: transform, opacity; }
        @keyframes wlCardOut { to { opacity: 0; transform: scale(.8); } }
        .wl-removing { animation: wlCardOut .3s ease forwards; pointer-events: none; }
        /* Bottom-left so it never collides with the "Best Selling" badge (top-left)
           or the agent ⇄ button (top-right). */
        .product-card-wish {
            position: absolute; bottom: 8px; left: 8px; z-index: 5;
            width: 34px; height: 34px; border-radius: 999px;
            background: rgba(0,0,0,0.32); border: 1px solid rgba(255,255,255,0.55);
            color: #fff; display: flex; align-items: center; justify-content: center;
            font-size: 16px; cursor: pointer; transition: all .15s; padding: 0; line-height: 1;
            box-shadow: 0 1px 4px rgba(0,0,0,0.28);
        }
        .product-card-wish:hover { background: rgba(0,0,0,0.66); color: #ff5a7a; border-color: #ff5a7a; transform: scale(1.08); }
        .product-card-wish.on { color: #fff; border-color: #e0245e; background: #e0245e; }
        @media (hover: none) {
            /* touch devices: 42px tap target (CLAUDE.md: min 44px), matches agent btn */
            .product-card-wish { width: 42px; height: 42px; font-size: 18px; }
        }

        /* Currency switcher */
        .currency-switcher { position: relative; margin-right: 4px; }
        .currency-btn { background: transparent; border: 1px solid var(--border-subtle); color: var(--text-secondary); font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1px; padding: 7px 10px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: border-color .2s, color .2s; }
        .currency-btn:hover { border-color: var(--border); color: var(--text); }
        .currency-btn .caret { font-size: 8px; opacity: 0.7; }
        .currency-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 140px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 4px; box-shadow: 0 8px 30px rgba(0,0,0,0.5); display: none; z-index: 110; }
        .currency-menu.open { display: block; }
        .currency-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 9px 12px; background: transparent; border: none; color: var(--text-secondary); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; border-radius: 6px; text-align: left; }
        .currency-menu button:hover { background: var(--surface-2); color: var(--text); }
        .currency-menu button .sym { color: var(--text-muted); font-size: 11px; }
        /* Language switcher reuses the currency-switcher styling */
        .lang-switcher { position: relative; margin-right: 4px; }
        .lang-menu { min-width: 150px; }
        @media (max-width: 768px) {
            .currency-switcher, .lang-switcher { display: none; }
        }
        /* Mobile top-bar actions (language, currency and the wishlist heart),
           shown when the desktop nav row collapses into the hamburger. Matches
           the dark nav chrome. The light/dark switch is in the hamburger menu. */
        .nav-mobile-actions { display: none; align-items: center; gap: 4px; margin-left: auto; }
        .nav-mobile-actions .mob-lang { position: relative; }
        .nav-mobile-actions .mob-lang-btn { background: transparent; border: 1px solid rgba(255,255,255,0.28); color: rgba(255,255,255,0.85); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1px; padding: 8px 9px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
        .nav-mobile-actions .mob-lang-btn:hover { border-color: rgba(255,255,255,0.5); color: #fff; }
        /* 8px of padding round an 11px line makes a 31px chip, and the 5-6px
           padding below 390 left "EN" 28px wide - the phone language and
           currency pills were the only tap targets in the header under the
           44px floor. Both are at least 44x44 now. The theme switch moved
           into the hamburger menu to pay for the width, so the row is
           narrower than before at every size (140px at 375 with the heart).
           The rows of their two menus get 44px too - picking a currency is
           the step that matters for buying - and the menus scroll on their
           own, because 12 languages x 44px would run off a 568px phone
           under the fixed nav. The three sites that kept their controls
           inside .nav-links have had 44px all along. */
        .nav-mobile-actions .mob-lang-btn { min-height: 44px; min-width: 44px; }
        .nav-mobile-actions .currency-menu { max-height: calc(100vh - 88px); max-height: calc(100dvh - 88px - env(safe-area-inset-top)); overflow-y: auto; overscroll-behavior: contain; }
        .nav-mobile-actions .currency-menu button { min-height: 44px; }
        /* The fleet's longest wordmark ("Best Spreadsheet Finds", 22 characters)
           needed 100px in a 92px box at 360 and came out "BEST SPREADSHE...".
           The carets are decoration, so below 390 they go and the pill text
           gets tighter padding. The 44px min-width above keeps EN and USD
           full tap targets, so the narrow padding now only trims the wider
           labels. Below 340 the heart goes as well - it is the one control in
           this cluster the hamburger menu already carries as its own tile. */
        @media (max-width: 389px) {
            .nav-mobile-actions .mob-lang-btn { padding-left: 5px; padding-right: 5px; font-size: 10px; }
            .nav-mobile-actions .mob-lang-btn .caret { display: none; }
            .nav-mobile-actions .nav-mob-wish { padding-left: 3px; padding-right: 3px; }
            .nav-brand { font-size: clamp(10px, 3.15vw, 20px); }
        }

        .nav-mobile-actions .mob-lang-btn .caret { font-size: 8px; opacity: .7; }
        .nav-mobile-actions #mobLangMenu, .nav-mobile-actions #mobCurMenu { right: 0; left: auto; }
        .nav-mobile-actions .nav-mob-wish { position: relative; display: inline-flex; align-items: center; font-size: 25px; line-height: 1; color: rgba(255,255,255,0.85); text-decoration: none; padding: 5px 7px; }
        .nav-mobile-actions .nav-mob-wish:hover { color: #e0245e; } .nav-mobile-actions .nav-mob-wish.active { color: var(--accent); }
        /* count badge to the heart's TOP-RIGHT CORNER — the shared desktop top:11/right:2 lands dead-centre on the small mobile heart and covers it */
        .nav-mobile-actions .nav-mob-wish .nav-wish-count { top: -5px; right: -5px; min-width: 15px; height: 15px; line-height: 15px; font-size: 9px; }
        @media (max-width: 900px) {
            .nav-mobile-actions { display: flex; }
        }

        /* Floating right-side widget (Discord + Tutorial + Back-to-top) */
        .side-widget { position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; gap: 10px; }
        .side-btn { width: 52px; height: 52px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border-subtle); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s ease; position: relative; box-shadow: 0 8px 24px rgba(0,0,0,0.4); text-decoration: none; }
        .side-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); transform: translateX(-3px); box-shadow: 0 12px 30px var(--accent-dim); }
        .side-btn svg { width: 22px; height: 22px; }
        .side-btn .side-tip { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 6px 10px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s; }
        .side-btn:hover .side-tip { opacity: 1; }
        .side-btn.discord:hover { background: #5865F2; border-color: #5865F2; box-shadow: 0 12px 30px rgba(88,101,242,0.35); }
        @media (max-width: 768px) {
            /* The floating How-to-Buy + Discord rail overlapped product BUY buttons
               on phones; both actions live in the hamburger menu + footer, so the
               rail is hidden on mobile to keep the right edge of every card tappable. */
            .side-widget { display: none; }
            .side-btn { width: 40px; height: 40px; border-radius: 10px; }
            .side-btn svg { width: 16px; height: 16px; }
            .side-btn .side-tip { display: none; }
        }
        .nav-hamburger { display: none; background: none; border: none; color: var(--text); font-size: 22px; cursor: pointer; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; }
        .mobile-menu {
            display: flex; position: fixed; inset: 0;
            background: rgba(10,10,10,0.97); backdrop-filter: blur(12px);
            z-index: 600; /* above the signup popup (z-index 500) so they never overlap */
            flex-direction: column; align-items: center; justify-content: flex-start;
            gap: 24px;
            /* Top padding reserves room for the absolutely-positioned wordmark
               (top: safe-area + 56px, ~38px tall) so the search field lands BELOW
               it instead of overlapping. flex-start + scroll keeps everything
               reachable on short phones (was justify-content:center, which slid
               the content stack up under the brand). */
            padding: calc(env(safe-area-inset-top) + 132px) 0 40px;
            overflow-y: auto; -webkit-overflow-scrolling: touch;
            opacity: 0; visibility: hidden; pointer-events: none;
            transition: opacity .3s ease, visibility 0s linear .3s, backdrop-filter .3s ease;
        }
        .mobile-menu.open {
            opacity: 1; visibility: visible; pointer-events: auto;
            transition: opacity .3s ease, backdrop-filter .3s ease;
        }
        .mobile-menu a {
            font-family: var(--font-display); font-size: 32px; text-transform: uppercase; letter-spacing: 3px; color: #ffffff;
            text-align: center; max-width: 90vw; line-height: 1.1;
            opacity: 0; transform: translateY(12px);
            transition: opacity .35s ease, transform .45s cubic-bezier(.16, 1, .3, 1), color 0.2s;
        }
        .mobile-menu.open a { opacity: 1; transform: translateY(0); }
        .mobile-menu.open a:nth-child(2) { transition-delay: .04s; }
        .mobile-menu.open a:nth-child(3) { transition-delay: .10s; }
        .mobile-menu.open a:nth-child(4) { transition-delay: .16s; }
        .mobile-menu.open a:nth-child(5) { transition-delay: .22s; }
        .mobile-menu.open a:nth-child(6) { transition-delay: .28s; }
        .mobile-menu.open a:nth-child(7) { transition-delay: .34s; }
        .mobile-menu a:hover { color: var(--accent); }
        .mobile-menu .mobile-menu-cta {
            display: flex; flex-direction: column; align-items: center; gap: 5px;
            background: var(--accent-dim, rgba(255,255,255,0.08));
            border: 1.5px solid var(--accent); color: #ffffff !important;
            padding: 16px 34px; border-radius: 16px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.42), 0 0 22px -6px var(--accent);
            margin-top: 4px; min-width: 244px; max-width: 86vw;
            transition: opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1), box-shadow .18s ease;
        }
        .mobile-menu .mobile-menu-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 30px -3px var(--accent);
        }
        .mobile-menu .mobile-menu-cta .mm-cta-line1 {
            font-family: var(--font-display); font-size: 32px; letter-spacing: 3px; line-height: 1; color: #ffffff;
        }
        .mobile-menu .mobile-menu-cta .mm-cta-line2 {
            font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 2px; line-height: 1; color: rgba(255,255,255,0.7); text-transform: uppercase;
        }
        .mobile-menu .mobile-menu-cta:hover .mm-cta-line1 { color: var(--accent); }
        .mobile-menu .mobile-menu-brand {
            /* 56px (was 110px) — at 110px the wordmark collided with the search
               pill on short phones (≈667px viewports) */
            position: absolute; top: calc(env(safe-area-inset-top) + 56px);
            left: 50%; transform: translateX(-50%);
            font-family: var(--font-display); font-size: 38px; letter-spacing: 2px; line-height: 1;
            color: #ffffff; text-transform: uppercase;
            pointer-events: none;
            opacity: 1;
        }
        .mobile-menu .mobile-menu-brand .accent { color: var(--accent); }
        .mobile-close { position: absolute; top: 20px; right: 24px; background: none; border: none; color: #ffffff; font-size: 28px; cursor: pointer; }
        /* Light/dark switch, moved here from the phone top bar so EN and USD
           there could keep 44px. Pinned top-left as the mirror of the close
           button: out of the flex flow, so the tiles and the coupon pill keep
           every pixel they had. Stacked under the pill, 44px plus a 20px gap
           would leave the tile grid 178px of its 220px minimum at 320x568, and
           the tiles would overlap the pill. No border or fill on purpose: a
           44px box would cross the top of a full-width wordmark at 320-375. */
        .mobile-menu .mm-theme { position: absolute; top: 20px; left: 24px; width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 12px; color: #ffffff; font-size: 22px; line-height: 1; cursor: pointer; }
        .mobile-menu .mm-theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        html[data-theme="light"] .mobile-menu .mm-theme { color: #111; }
        /* Mobile menu: the five links (plus Spreadsheet) as a 3x2 grid of tiles
           instead of a stack; the language grid is gone (the header button
           already switches language). */
        .mm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; width: min(86vw, 360px); }
        .mobile-menu .mm-grid a {
            display: flex; align-items: center; justify-content: center; gap: 6px;
            min-height: 64px; min-width: 0; padding: 10px 8px; box-sizing: border-box; max-width: none;
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.16); border-radius: 14px;
            font-size: 22px; letter-spacing: 2px; line-height: 1.05; text-align: center;
        }
        .mobile-menu .mm-grid a:hover, .mobile-menu .mm-grid a:active { border-color: var(--accent); color: var(--accent); }
        .mobile-menu .mm-grid a #mobWishCount { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--accent); }
        .mobile-menu .mobile-menu-cta { width: min(86vw, 360px); min-width: 0; max-width: none; box-sizing: border-box; padding-left: 14px; padding-right: 14px; }
        html[data-theme="light"] .mobile-menu .mm-grid a { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.16); }
        /* The wordmark is absolutely positioned from the middle, so it only got
           half the screen to lay out in and a three-word name wrapped onto the
           search field. One line, shrunk to fit by the script below. */
        .mobile-menu .mobile-menu-brand { white-space: nowrap; }
        /* Fill the phone screen: tiles grow to 118px and the coupon pill takes
           everything left under them, so nothing sits empty at the bottom. On a
           short phone both shrink (tiles to 64px, pill to its natural height)
           before anything would need to scroll. */
        .mobile-menu { gap: 20px; padding-bottom: calc(env(safe-area-inset-bottom) + 20px); }
        .mm-grid { flex: 0 1 auto; min-height: 0; grid-template-rows: repeat(3, minmax(64px, 118px)); gap: 14px; width: min(88vw, 380px); }
        .mobile-menu .mm-grid a { height: 100%; font-size: clamp(22px, 6.6vw, 26px); letter-spacing: 2.5px; border-radius: 18px; }
        .mobile-menu .mobile-menu-cta { width: min(88vw, 380px); flex: 1 1 auto; min-height: 82px; justify-content: center; gap: 8px; border-radius: 18px; }
        .mobile-menu .mobile-menu-cta .mm-cta-line1 { font-size: clamp(32px, 3.6vh, 38px); line-height: 1.1; }
        .mobile-menu .mobile-menu-cta .mm-cta-line2 { font-size: 13px; }

        .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; cursor: pointer; border: none; text-transform: uppercase; letter-spacing: 1.5px; transition: all 0.2s; border-radius: var(--radius-sm); }
        .btn-primary { background: var(--accent); color: var(--accent-ink, #fff); }
        .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
        .btn-outline { background: transparent; color: var(--text); border: 1px solid var(--border); }
        .btn-outline:hover { border-color: var(--accent); color: var(--accent); }

        .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
        .product-card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius); overflow: hidden; transition: all 0.3s; display: block; color: inherit; text-decoration: none; }
        .product-card:hover { border-color: var(--border); transform: translateY(-4px); box-shadow: 0 12px 40px var(--accent-dim); }
        .product-card-img-wrap { overflow: hidden; position: relative; background: #ffffff !important; aspect-ratio: 1; }
        .product-card-img { width: 100%; height: 100%; object-fit: contain !important; padding: 8px; transition: transform 0.5s ease; background: #ffffff !important; }
        /* Catch-all: anything that looks like a product image gets white bg
           regardless of wrapper. Defensive against missed cases. */
        img.product-card-img, img.pd-img, img.pd-thumb,
        img.uc-img, img.thumb, img.ri-img, img.edit-preview,
        .pd-variant img, .pd-thumb img, .scrape-card img,
        .padmin-card img, .bundle-card-imgs img, .pd-qc img,
        .hero-search-suggestion img, .hero-bg-card img,
        .padmin-compact .pcomp .img { background: #ffffff !important; object-fit: contain !important; }
        /* NUCLEAR: every image whose src is from a product-image CDN gets a
           white background, no matter what class or wrapper it's in. This
           covers JS-injected <img> tags in variant grids, QC modals, search
           suggestions, scrape preview, agent picker, and anywhere else a
           product image lands that the class-based selectors above miss. */
        img[src*="postimg.cc"],
        img[src*="iili.io"],
        img[src*="geilicdn.com"],
        img[src*="googleusercontent.com"],
        img[src*="alicdn.com"],
        img[src*="img.kakobuy.com"],
        img[src*="bcebos.com"],
        img[src*="dhresource.com"],
        img[src*="kongfupack.com"],
        img[src*="weidian.com"],
        img[src*="taobao.com"],
        img[src*="alibaba.com"],
        img[src*="aliimg.com"],
        img[src*="/uploads/"] {
            background: #ffffff !important;
            object-fit: contain !important;
        }
        /* Wrapper-based catch-all: every img inside any product container,
           regardless of class on the img itself. Last-resort coverage for
           JS-injected images that don't carry a recognized class. */
        .product-card img, .product-grid img,
        .pd-modal img:not(.agent-icon):not(.lang-flag),
        .hero-bg-ticker img, .hero-bg-col img,
        .bundle-card img, .bundle-card-imgs img,
        .variant-grid img, .pd-variant img,
        .scrape-card img, .pd-qc img,
        .hero-search-dropdown img, .hero-search-suggestion img,
        .conveyor-card img {
            background: #ffffff !important;
            object-fit: contain !important;
        }
        .product-card:hover .product-card-img { transform: scale(1.05); }
        /* A product photo that will not load left a blank white square: the
           images are all on one third-party host, and two rows in the sheet
           carry no image URL at all. The card says so instead. */
        .product-card-img-wrap.img-missing::after {
            content: attr(data-missing); position: absolute; inset: 0;
            display: flex; align-items: center; justify-content: center;
            background: var(--surface-2, #1a1a1c); color: var(--text-muted);
            font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px;
            text-transform: uppercase; text-align: center; padding: 10px;
        }
        .product-card-img-wrap.img-missing .product-card-img { visibility: hidden; }
        /* Hero ticker keeps cover-fit so the masthead background stays full-bleed */
        .hero-bg-card { background: #ffffff !important; }
        .hero-bg-card img { aspect-ratio: 4/5; object-fit: contain !important; padding: 4px; background: #ffffff !important; }
        /* Product detail modal image */
        #pdMainImage { background: #ffffff !important; object-fit: contain !important; padding: 12px; }
        .pd-thumbs {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
            gap: 6px; margin-top: 8px;
        }
        .pd-thumb {
            aspect-ratio: 1; background: #ffffff;
            border: 2px solid var(--border-subtle); border-radius: 8px;
            overflow: hidden; cursor: pointer;
            transition: all 0.15s ease;
            padding: 0;
        }
        .pd-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
        .pd-thumb:hover { border-color: var(--border); transform: translateY(-1px); }
        .pd-thumb.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
        .pd-thumb.qc::after {
            content: 'QC'; position: absolute; top: 2px; right: 2px;
            background: var(--accent); color: var(--accent-ink, #fff); font-family: var(--font-mono);
            font-size: 8px; font-weight: 800; padding: 1px 4px; border-radius: 3px;
            letter-spacing: 0.5px;
        }
        .pd-thumb { position: relative; }
        .product-card-badge { position: absolute; top: 10px; left: 10px; padding: 4px 10px; background: var(--accent); color: var(--accent-ink, #fff); font-family: var(--font-mono); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; border-radius: 6px; }
        .product-card-body { padding: 16px; }
        /* One nowrap line in a 150px card body truncated a third of the names
           mid-word at 390 ("Swatch x Audemars Pigu..."). Two lines, clamped. */
        .product-card-name { font-family: var(--font-body); font-size: 13px; font-weight: 600; margin-bottom: 8px; line-height: 1.4; overflow: hidden;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.8em; }
        .product-card-seller { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px; }
        .product-card-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
        .product-card-price { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--accent); }
        /* The money control was 49x30 with a 9px label - smaller than the price
           beside it and under the 44px floor this template states for every
           other control. Beacon's pill, ported. */
        .product-card-buy { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
            min-height: 44px; min-width: 64px; padding: 0 16px; background: var(--accent); color: var(--accent-ink, #fff);
            font-family: var(--font-mono); font-size: 11px; font-weight: 700; line-height: 1; border: none; border-radius: 8px;
            cursor: pointer; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap;
            transition: background .15s ease, transform 80ms ease; }
        .product-card-buy:active { transform: scale(0.98); }
        /* Out-of-stock state on a product card */
        .product-card.out-of-stock { opacity: 0.55; }
        .product-card.out-of-stock .product-card-img { filter: grayscale(70%); }
        .product-card.out-of-stock .product-card-img-wrap::after {
            content: var(--oos-label, 'OUT OF STOCK'); position: absolute; inset: 0;
            display: flex; align-items: center; justify-content: center;
            background: rgba(0,0,0,0.55); color: #fff;
            font-family: var(--font-mono); font-size: 11px; font-weight: 800;
            letter-spacing: 2px; text-transform: uppercase;
            pointer-events: none;
        }
        .product-card.out-of-stock .product-card-buy { background: var(--surface-3); color: var(--text-muted); pointer-events: none; }
        .product-card-buy:hover { background: var(--accent-hover); }

        .section { padding: 64px 24px; max-width: 1200px; margin: 0 auto; }
        .section-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
        .section-title { font-family: var(--font-display); font-size: 48px; text-transform: uppercase; letter-spacing: 1px; line-height: 1; }
        .sec-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: nowrap; }
        /* The header row never wraps. With wrap, a heading too long for a phone
           row pushed View All onto a line of its own, alone and left-aligned
           under the heading. Now a long heading breaks inside its own box and
           the link stays inline right on every section header. Top level. */
        .sec-header > .sec-title { min-width: 0; overflow-wrap: break-word; }
        .sec-header > .sec-link { flex: 0 0 auto; white-space: nowrap; }
        .sec-title { font-family: var(--font-display); font-size: 28px; text-transform: uppercase; letter-spacing: 1px; }
        /* Full strength. At opacity .7 the link measured 3.4:1 on the dark page.
           Dark takes --accent-on-dark (the accent where it reads, white where a
           dark brand colour would not - squatchreps' green is 3.2:1 even at full
           opacity), light takes --accent-text. (0,2,1), so both also beat the
           theme patch's (0,1,0) .sec-link colour group further down. */
        .sec-link { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 1.5px; }
        .sec-link:hover { text-decoration: underline; text-underline-offset: 3px; }
        html:not([data-theme="light"]) .sec-link { color: var(--accent-on-dark, var(--accent)); }
        html[data-theme="light"] .sec-link { color: var(--accent-text, var(--accent)); }
        .divider { border: none; border-top: 1px solid var(--border-subtle); margin: 0; }

        .stat-row { display: flex; justify-content: center; gap: 48px; padding: 48px 0; flex-wrap: wrap; }
        .stat { text-align: center; }
        .stat-num { font-family: var(--font-display); font-size: 48px; color: var(--accent); }
        .stat-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }

        .cta-section { padding: 80px 24px; text-align: center; position: relative; overflow: hidden; }
        .cta-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, var(--accent-dim), transparent 70%); filter: blur(60px); pointer-events: none; }
        .cta-section h2 { font-family: var(--font-display); font-size: 48px; text-transform: uppercase; margin-bottom: 12px; position: relative; }
        .cta-section p { color: var(--text-secondary); font-size: 14px; margin-bottom: 32px; max-width: 400px; margin-left: auto; margin-right: auto; position: relative; }

        .popup-overlay {
            display: flex; position: fixed; inset: 0;
            background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
            z-index: 500;
            align-items: center; justify-content: center;
            padding: 20px;
            opacity: 0; visibility: hidden; pointer-events: none;
            transition: opacity .25s ease, visibility 0s linear .25s;
        }
        .popup-overlay.active {
            opacity: 1; visibility: visible; pointer-events: auto;
            transition: opacity .25s ease;
        }
        .popup {
            /* translucent glass panel; must NEVER exceed the viewport (the close
               button was getting clipped off-screen on phones) */
            background: rgba(18,18,18,0.95);
            backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            max-width: 400px; width: 100%;
            max-height: calc(100vh - 32px);
            max-height: calc(100dvh - 32px);
            overflow-y: auto; -webkit-overflow-scrolling: touch;
            text-align: center; padding: 48px 32px;
            position: relative;
            opacity: 0; transform: scale(.94) translateY(10px);
            transition: opacity .3s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
        }
        .popup-overlay.active .popup {
            opacity: 1; transform: scale(1) translateY(0);
        }
        .popup-close {
            position: absolute; top: 8px; right: 8px;
            width: 44px; height: 44px;
            background: var(--surface-2); border: 1px solid var(--border-subtle);
            border-radius: 50%;
            color: var(--text);
            font-size: 22px; line-height: 1; cursor: pointer;
            display: inline-flex; align-items: center; justify-content: center;
            transition: all 0.15s ease;
        }
        .popup-close:hover { background: var(--accent); color: var(--accent-ink, #fff); border-color: var(--accent); transform: scale(1.05); }

        /* ---- Agent picker modal ---- */
        .agent-picker-overlay {
            display: none; position: fixed; inset: 0; z-index: 600;
            background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
            align-items: center; justify-content: center; padding: 20px;
        }
        .agent-picker-overlay.active { display: flex; }
        .agent-picker {
            position: relative;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            max-width: 460px; width: 100%;
            padding: 32px 28px 24px;
            max-height: 84vh; overflow: hidden;
            display: flex; flex-direction: column;
        }
        .agent-picker-close {
            position: absolute; top: 6px; right: 6px;
            background: none; border: none;
            color: var(--text-muted); font-size: 22px; cursor: pointer;
            line-height: 1; padding: 0; width: 44px; height: 44px;
            display: inline-flex; align-items: center; justify-content: center;
        }
        .agent-picker-close:hover { color: var(--text); }
        .agent-picker-head { margin-bottom: 18px; padding-right: 24px; }
        .agent-picker-label {
            font-family: var(--font-mono); font-size: 10px; font-weight: 700;
            color: var(--accent);
            letter-spacing: 2px; text-transform: uppercase;
            margin-bottom: 6px;
        }
        .agent-picker-title {
            font-family: var(--font-display); font-size: 22px;
            color: var(--text);
            text-transform: uppercase; letter-spacing: 1px;
            line-height: 1.2;
        }
        .agent-picker-list {
            display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
            overflow-y: auto;
            padding: 4px 4px 4px 0;
        }
        @media (max-width: 480px) { .agent-picker-list { grid-template-columns: 1fr; } }
        .agent-picker-item {
            display: flex; align-items: center; gap: 10px;
            padding: 12px 14px;
            background: var(--surface-2);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            font-family: var(--font-mono);
            font-size: 12px; font-weight: 700;
            text-transform: uppercase; letter-spacing: 1px;
            color: var(--text);
            text-decoration: none;
            transition: all 0.15s ease;
            cursor: pointer;
            text-align: left;
        }
        .agent-picker-item .logo {
            display: inline-flex; align-items: center; justify-content: center;
            width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
            color: #fff; font-family: var(--font-mono); font-size: 13px;
            font-weight: 800; letter-spacing: 0;
            background: #fff; overflow: hidden;
        }
        .agent-picker-item .logo img { width: 100%; height: 100%; object-fit: contain; }
        .agent-picker-item .logo.letter { color: #fff; }
        .agent-picker-item .name { flex: 1; }
        .agent-picker-item:hover {
            background: var(--accent);
            color: var(--accent-ink, #fff);
            border-color: var(--accent);
            transform: translateY(-1px);
        }
        .agent-picker-item .arrow { font-size: 14px; opacity: 0.6; }
        .agent-picker-item.selected { border-color: var(--accent); background: var(--accent); color: var(--accent-ink, #fff); }
        .agent-picker-item.selected::after { content: '✓'; font-size: 14px; margin-left: 10px; }
        .agent-picker-buy-wrap { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-subtle); display: none; }
        .agent-picker-buy-wrap.active { display: block; }
        .agent-picker-buy {
            display: block; text-align: center;
            padding: 14px 22px;
            background: var(--accent); color: var(--accent-ink, #fff);
            font-family: var(--font-mono); font-size: 12px; font-weight: 800;
            letter-spacing: 1.5px; text-transform: uppercase;
            border: none; border-radius: var(--radius-sm);
            cursor: pointer; text-decoration: none;
            transition: background 0.15s ease;
        }
        .agent-picker-buy:hover { background: var(--accent-hover); }
        .agent-picker-empty {
            grid-column: 1 / -1;
            text-align: center; padding: 24px;
            font-family: var(--font-mono); font-size: 11px;
            color: var(--text-muted);
            text-transform: uppercase; letter-spacing: 2px;
        }
        .agent-picker-foot {
            margin-top: 18px; padding-top: 14px;
            border-top: 1px solid var(--border-subtle);
            font-family: var(--font-mono); font-size: 10px;
            color: var(--text-muted);
            text-align: center;
            letter-spacing: 1px;
        }

        /* ---- Inline change-agent button on product cards ---- */
        .product-card-agents {
            position: absolute; top: 8px; right: 8px;
            z-index: 3;
            width: 32px; height: 32px;
            border-radius: 50%;
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(6px);
            border: 1px solid rgba(255,255,255,0.18);
            color: #fff;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 16px; cursor: pointer;
            opacity: 0; transition: opacity 0.15s ease, background 0.15s ease;
        }
        .product-card:hover .product-card-agents { opacity: 1; }
        .product-card-agents:hover { background: var(--accent); border-color: var(--accent); }
        @media (hover: none) {
            /* touch devices: always visible + 42px tap target (was 32px, below the 40px min) */
            .product-card-agents { opacity: 1; background: rgba(0,0,0,0.5); width: 42px; height: 42px; font-size: 18px; }
        }
        .popup-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
        .popup h2 { font-family: var(--font-display); font-size: 32px; text-transform: uppercase; margin-bottom: 12px; }
        .popup p { color: var(--text-secondary); font-size: 13px; margin-bottom: 24px; line-height: 1.6; }
        .popup .btn { width: 100%; justify-content: center; }
        .popup-dismiss {
            font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
            margin-top: 16px; cursor: pointer;
            letter-spacing: 1px; text-transform: uppercase;
            display: inline-block; padding: 12px 18px;
            border-radius: 8px;
            min-height: 44px;
        }
        .popup-dismiss:hover { color: var(--text); background: var(--surface-2); }

        /* Welcome popup — agent picker w/ KakoBuy featured */
        .popup.signup-popup { max-width: 520px; padding: 22px 20px 18px; text-align: left; }
        .popup-headline { text-align: center; margin-bottom: 14px; padding: 0 36px; }
        .popup-headline .eyebrow {
            display: inline-block; font-family: var(--font-mono); font-size: 9px;
            letter-spacing: 3px; text-transform: uppercase; color: var(--accent-on-dark);
            margin-bottom: 6px;
        }
        .popup-headline h2 {
            font-family: var(--font-display); font-size: clamp(19px, 4.5vw, 26px);
            text-transform: uppercase; line-height: 1.05; margin-bottom: 6px;
            letter-spacing: 1px;
        }
        .popup-headline h2 .accent { color: var(--accent-on-dark); }
        .popup-headline p { font-size: 12px; color: var(--text-secondary); margin: 0; line-height: 1.45; }
        .signup-featured {
            display: flex; align-items: center; gap: 12px;
            padding: 16px 18px;
            margin-bottom: 12px;
            background: var(--accent);
            border-radius: 12px;
            text-decoration: none; color: var(--accent-ink, #fff);
            position: relative;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        .signup-featured:hover { transform: translateY(-1px); box-shadow: 0 10px 30px var(--accent-dim); text-decoration: none; }
        .signup-featured .logo {
            width: 40px; height: 40px; border-radius: 8px;
            background: #fff; display: inline-flex; align-items: center; justify-content: center;
            overflow: hidden; flex-shrink: 0;
        }
        .signup-featured .logo img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
        .signup-featured .meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
        .signup-featured .meta .ttl { display: block; font-family: var(--font-display); font-size: 18px; text-transform: uppercase; letter-spacing: 1.5px; line-height: 1.05; }
        .signup-featured .meta .sub { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent-ink, #ffffff); margin-top: 5px; line-height: 1.3; }
        .signup-featured .badge {
            position: absolute; top: -10px; right: 12px;
            background: #fff;
            /* The chip is white in both themes, but --accent-text is reset to the
               raw accent inside the dark-theme block, which put this at 3.74:1.
               Bind the derived light-surface value so the theme cannot undo it. */
            color: #2b6f95;
            font-family: var(--font-mono); font-size: 9px; font-weight: 800;
            letter-spacing: 1.5px; text-transform: uppercase;
            padding: 3px 8px; border-radius: 5px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.25);
        }
        .signup-featured .go-arrow { font-size: 22px; opacity: 0.8; }
        .signup-other-label {
            font-family: var(--font-mono); font-size: 9px; font-weight: 700;
            letter-spacing: 2px; text-transform: uppercase;
            color: var(--text-muted);
            margin: 14px 0 8px;
            text-align: center;
        }
        .signup-grid {
            display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
        }
        @media (max-width: 460px) { .signup-grid { grid-template-columns: 1fr; } }
        .signup-other {
            display: flex; align-items: center; gap: 8px;
            padding: 9px 10px;
            background: var(--surface-2);
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            text-decoration: none;
            color: var(--text);
            font-family: var(--font-mono); font-size: 11px; font-weight: 700;
            letter-spacing: 1px; text-transform: uppercase;
            transition: all 0.15s ease;
        }
        .signup-other:hover { border-color: var(--border); transform: translateY(-1px); text-decoration: none; }
        .signup-other .logo {
            width: 22px; height: 22px; border-radius: 4px;
            background: #fff; display: inline-flex; align-items: center; justify-content: center;
            overflow: hidden; flex-shrink: 0;
        }
        .signup-other .logo img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
        .signup-other-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
        .signup-other-meta .nm { font-weight: 700; }
        .signup-other-meta .cp { font-family: var(--font-mono); font-size: 8.5px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.5px; text-transform: none; margin-top: 3px; }
        /* "See our agents" under the popup's agent grid: the comparison page
           with every invite code. A 44px row; top level, outside every @media. */
        .signup-see-all { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 8px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }
        .signup-see-all:hover { color: var(--text); }
        @media (max-width: 480px) {
            /* phones: compact everything so the whole popup (X included) fits the frame */
            .popup-overlay { padding: 12px; }
            .popup { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
            .popup.signup-popup { padding: 14px 12px 12px; }
            .popup-headline { padding: 0 34px; margin-bottom: 10px; }
            .popup-headline p { font-size: 11px; }
            .signup-featured { padding: 12px 14px; margin-bottom: 10px; }
            .signup-featured .meta .ttl { font-size: 16px; }
            .signup-other-label { margin: 10px 0 6px; }
            .signup-other { padding: 8px 9px; }
            .popup-dismiss { margin-top: 6px; padding: 10px 16px; min-height: 40px; }
        }

        /* Product detail modal */
        .pd-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(10px); z-index: 400; display: none; align-items: center; justify-content: center; padding: 24px; }
        .pd-overlay.active { display: flex; }
        .pd-modal { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 20px; max-width: 1100px; width: 100%; max-height: 92vh; overflow-y: auto; position: relative; box-shadow: 0 30px 90px rgba(0,0,0,0.6); }
        .pd-close {
            position: fixed;
            top: max(env(safe-area-inset-top), 14px);
            left: 14px;
            width: 40px; height: 40px; border-radius: 50%;
            background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18);
            color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            z-index: 500; transition: all .15s;
            backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        }
        .pd-close:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.3); }
        .pd-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; padding: 32px; }
        .pd-img-wrap { background: #ffffff; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1; position: relative; }
        .pd-img { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity .2s; background: #ffffff; }
        .pd-buy-row { display: flex; gap: 8px; margin-top: 16px; }
        .pd-buy { flex: 1 1 50%; min-width: 0; display: inline-flex; align-items: center; justify-content: center; padding: 16px; background: var(--accent); color: var(--accent-ink); font-family: var(--font-mono); font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; border: none; border-radius: 12px; cursor: pointer; transition: all .15s; text-decoration: none; white-space: nowrap; }
        .pd-buy:hover { background: var(--accent-hover); color: var(--accent-ink); }
        .pd-copy { flex: 1 1 50%; min-width: 0; padding: 16px 14px; background: var(--surface-2); border: 1px solid var(--border-subtle); color: var(--text); border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all .15s; font-family: var(--font-mono); font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; }
        .pd-copy svg { flex-shrink: 0; }
        .pd-copy:hover { border-color: var(--accent); color: var(--accent); }
        .pd-copy.copied { background: var(--accent); color: var(--accent-ink, #fff); border-color: var(--accent); }
        .pd-raw-copy {
            display: inline-flex; align-items: center; gap: 6px;
            margin-top: 10px; padding: 8px 12px;
            background: transparent; border: 1px solid var(--border-subtle);
            color: var(--text-muted); border-radius: 8px; cursor: pointer;
            font-family: var(--font-mono); font-size: 10px; font-weight: 600;
            text-transform: uppercase; letter-spacing: 1px;
            transition: all .15s ease;
        }
        .pd-raw-copy:hover { color: var(--text); border-color: var(--border); }
        .pd-raw-copy.copied { background: var(--accent); color: var(--accent-ink, #fff); border-color: var(--accent); }
        .pd-buy-note { margin-top: 10px; padding: 10px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary, var(--text)); background: rgba(245,158,11,0.10); border: 1px solid rgba(245,158,11,0.45); }
        .pd-buy-note a { color: inherit; font-weight: 700; text-decoration: underline; }
        /* Solid chip, white text: 4.9:1 on the chip itself, so it stays legible
           on a dark row, a light row and the accent-coloured selected row alike.
           The translucent version it replaces measured 2.46:1 on a dark row. */
        .agent-note-tag { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: #b45309; color: #fff; font-family: var(--font-mono); font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }
        #apBuyNote { margin-top: 0; margin-bottom: 10px; }
        .pd-agent-pickprompt {
            display: none; align-items: center; gap: 8px;
            padding: 12px 14px; margin-top: 10px;
            background: rgba(239,68,68,0.12); border: 1px solid #ef4444;
            border-radius: 8px; color: #ef4444;
            font-family: var(--font-mono); font-size: 11px; font-weight: 700;
            text-transform: uppercase; letter-spacing: 1px;
        }
        .pd-agent-pickprompt.active { display: inline-flex; animation: pdShake 0.45s cubic-bezier(.36,.07,.19,.97); }
        .pd-agent-pickprompt::before { content: '!'; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #ef4444; color: #fff; border-radius: 50%; font-weight: 900; font-size: 12px; flex-shrink: 0; }
        @keyframes pdShake {
            0%, 100% { transform: translateX(0); }
            12%, 60% { transform: translateX(-6px); }
            24%, 72% { transform: translateX(6px); }
            36%, 84% { transform: translateX(-3px); }
            48%, 96% { transform: translateX(3px); }
        }
        .pd-agent-btn-shake { animation: pdShake 0.45s cubic-bezier(.36,.07,.19,.97); }

        .pd-side { display: flex; flex-direction: column; gap: 18px; }
        .pd-source { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--text-muted); letter-spacing: 1.5px; text-transform: uppercase; }
        .pd-source .src-dot { width: 14px; height: 14px; border-radius: 4px; background: var(--accent); display: inline-block; }
        .pd-title { font-family: var(--font-display); font-size: 38px; line-height: 1; letter-spacing: 0.5px; text-transform: uppercase; }
        .pd-badges { display: flex; gap: 6px; flex-wrap: wrap; }
        .pd-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 7px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1px; }
        .pd-badge.quality { background: rgba(34,197,94,0.15); color: #22c55e; text-transform: uppercase; }
        .pd-badge.verified { background: rgba(59,130,246,0.15); color: #60a5fa; }
        .pd-badge.cat { background: var(--surface-2); color: var(--text-secondary); text-transform: uppercase; }
        .pd-price { font-family: var(--font-display); font-size: 32px; color: var(--accent); letter-spacing: 0.5px; }

        .pd-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; padding: 14px; background: var(--surface-2); border-radius: 12px; }
        .pd-meta-cell { padding: 0 4px; }
        .pd-meta-cell .lbl { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
        .pd-meta-cell .val { font-size: 13px; font-weight: 600; }

        .pd-sec-head { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--text-muted); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; }

        .pd-variants { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; max-height: 380px; overflow-y: auto; padding: 4px; }
        .pd-variant {
            border-radius: 9px; overflow: hidden;
            cursor: pointer; border: 2px solid transparent;
            background: #ffffff; transition: all .15s; padding: 0;
            display: flex; flex-direction: column;
        }
        .pd-variant img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 2px; }
        .pd-variant:hover { transform: translateY(-2px); }
        .pd-variant.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }
        .pd-variant-lbl {
            display: block; background: var(--surface-2); color: var(--text);
            font-family: var(--font-mono); font-size: 10px; font-weight: 700;
            letter-spacing: 0.3px; padding: 4px 4px 1px; text-align: center;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .pd-variant-price {
            display: block; background: var(--surface-2); color: var(--accent-text);
            font-family: var(--font-mono); font-size: 11px; font-weight: 800;
            padding: 0 4px 4px; text-align: center;
        }

        .pd-qc { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px;
  /* Scrolls in place, like the Versions grid directly above it. Without a cap
     the QC set (three batches, often 40+ photos) ran the page on for screens -
     on a phone everything below it was pushed out of reach. */
  max-height: 420px; overflow-y: auto; padding: 4px;
  }
/* The overscroll/momentum rule is scoped to the mobile-capped scroller ONLY - deliberately
   not in the base .pd-qc rule, so the desktop modal and the desktop standalone page
   keep the behaviour they had before. Under 768px the modal copy (#pdQc) is uncapped
   by the rule just below, so this lands on the standalone page's #ppQc: the one QC
   grid that still caps and scrolls on a phone. Overscroll is AUTO, not contain: once
   the photos run out the swipe carries on down the page (contain held it in the
   grid, leaving a 20px gutter as the only way past). Momentum scrolling on iOS. */
@media (max-width: 768px) { .pd-qc {
  max-height: 60vh;
  overscroll-behavior: auto; -webkit-overflow-scrolling: touch; } }
/* The MODAL copy (#pdQc) is the last element of .pd-side — nothing follows it, so
   on a phone the cap buys no reach; it only nests a scroller inside .pd-modal
   (max-height:92vh; overflow-y:auto), showing ~3 rows of a 20-row set. Let it run
   and scroll the modal instead. The standalone product page (#ppQc) KEEPS the cap:
   content does follow the grid there, which is what the operator asked for. */
@media (max-width: 768px) { #pdQc.pd-qc { max-height: none; overflow-y: visible; } }
        .pd-qc-empty { padding: 28px 14px; text-align: center; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: 1.5px; text-transform: uppercase; background: var(--surface-2); border: 1px dashed var(--border-subtle); border-radius: 12px; }
        .pd-qc img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 9px; background: #ffffff; cursor: pointer; transition: transform .15s; padding: 4px; }
        .pd-qc img:hover { transform: scale(1.05); }

        /* QC lightbox — full-screen inline viewer for QC photos */
        .qc-lightbox {
            position: fixed; inset: 0; background: rgba(0,0,0,0.92);
            display: none; align-items: center; justify-content: center;
            z-index: 1000; padding: 60px 20px;
        }
        .qc-lightbox.open { display: flex; }
        .qc-lb-img {
            max-width: 100%; max-height: 100%;
            background: #ffffff !important; object-fit: contain;
            border-radius: 8px; padding: 10px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.7);
        }
        .qc-lb-close, .qc-lb-nav {
            position: absolute; background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2); color: #fff;
            cursor: pointer; user-select: none;
            backdrop-filter: blur(10px); transition: all .15s;
        }
        .qc-lb-close {
            top: 18px; right: 18px;
            width: 44px; height: 44px; border-radius: 50%;
            font-size: 24px; line-height: 1;
        }
        .qc-lb-nav {
            top: 50%; transform: translateY(-50%);
            width: 52px; height: 80px; border-radius: 10px;
            font-size: 36px; line-height: 1;
            display: flex; align-items: center; justify-content: center;
        }
        .qc-lb-prev { left: 18px; }
        .qc-lb-next { right: 18px; }
        .qc-lb-close:hover, .qc-lb-nav:hover {
            background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.4);
        }
        .qc-lb-counter {
            position: absolute; bottom: 18px; left: 50%;
            transform: translateX(-50%);
            padding: 8px 16px; background: rgba(0,0,0,0.6);
            color: #fff; border-radius: 999px;
            font-family: var(--font-mono); font-size: 12px; font-weight: 700;
            letter-spacing: 1.5px;
        }
        @media (max-width: 600px) {
            .qc-lightbox { padding: 40px 8px; }
            .qc-lb-nav { width: 40px; height: 60px; font-size: 28px; }
            .qc-lb-prev { left: 6px; }
            .qc-lb-next { right: 6px; }
            .qc-lb-close { top: 10px; right: 10px; width: 44px; height: 44px; font-size: 22px; }
        }

        @media (max-width: 860px) {
            .pd-body { grid-template-columns: 1fr; padding: 20px; gap: 22px; }
            .pd-title { font-size: 28px; }
            .pd-price { font-size: 26px; }
            .pd-buy-row { flex-wrap: wrap; }
        }

        .footer { padding: 48px 24px 24px; max-width: 1200px; margin: 0 auto; border-top: 1px solid var(--border-subtle); }
        .footer-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; gap: 40px; flex-wrap: wrap; }
        .footer-brand { font-family: var(--font-display); font-size: 30px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
        .footer-desc { font-size: 12px; color: var(--text-muted); max-width: 280px; line-height: 1.6; }
        .footer-col h2 { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; }
        .footer-col a { display: block; padding: 3px 0; color: var(--text-secondary); font-size: 12px; transition: color 0.2s; }
        .footer-col a:hover { color: var(--accent); }
        .footer-bottom { text-align: center; padding-top: 20px; border-top: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; }   .back-top { position: fixed; bottom: 24px; right: 24px; z-index: 300; width: 40px; height: 40px; background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: 10px; color: var(--text-muted); cursor: pointer; font-size: 14px; display: none; align-items: center; justify-content: center; }
        .back-top.vis { display: flex; }
        .back-top:hover { color: var(--accent); }

        /* Floating back button shown on every non-home page */
        .page-back {
            position: fixed;
            top: calc(max(env(safe-area-inset-top), 12px) + 100px);
            left: 14px;
            z-index: 95;
            display: inline-flex; align-items: center; gap: 8px;
            padding: 8px 14px 8px 10px;
            background: rgba(20,20,20,0.9); backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid var(--border-subtle);
            border-radius: 999px;
            color: var(--text-secondary);
            font-family: var(--font-mono); font-size: 11px; font-weight: 700;
            letter-spacing: 1.5px; text-transform: uppercase;
            cursor: pointer; text-decoration: none;
            box-shadow: 0 8px 24px rgba(0,0,0,0.4);
            transition: all .15s;
        }
        .page-back:hover { color: var(--text); border-color: var(--border); background: rgba(30,30,30,0.95); }
        .page-back svg { width: 14px; height: 14px; }
        /* Scrolled down, the pill sat over the page (on a phone it covered the first column of a
           product's tiles, and a tap there went Back): it steps aside until the top of the page. */
        .page-back.page-back-away { opacity: 0; transform: translateY(-6px); pointer-events: none; }
        @media (max-width: 768px) {
            /* Fully opaque on mobile so it reads as solid chrome over scrolling
               content instead of a translucent layering glitch. */
            .page-back { top: calc(max(env(safe-area-inset-top), 12px) + 90px); padding: 7px 12px 7px 8px; font-size: 10px; background: rgba(16,16,16,0.97); }        }
        /* Below a laptop the tools strip is fixed under the header, so the Back
           button moves down by the strip's height instead of hiding under it. */
        @media (max-width: 1023px) {
            .page-back { top: calc(max(env(safe-area-inset-top), 12px) + 90px + var(--tools-strip, 72px)); }
        }


        /* Fail open. The animation is opt-in via html.rv, which the script adds
           only once it is running: a page that paints without script, prints,
           or never gets an observer pass shows filled panels instead of a
           black one. (A full-page capture caught exactly that: two screens of
           the home page rendered empty.) */
        .reveal { opacity: 1; transform: none; }
        html.rv .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
        html.rv .reveal.vis { opacity: 1; transform: translateY(0); }
        @media (prefers-reduced-motion: reduce) { html.rv .reveal { opacity: 1; transform: none; transition: none; } }
        @keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

        /* Collapse the desktop nav to the hamburger at 900px — below that the full
           link row + language + currency + wishlist + the long Sign-Up CTA no longer
           fit and the rightmost item would clip (everything stays reachable: the
           phone top bar keeps language, currency and the heart, and the hamburger
           menu carries the light/dark switch and a wishlist tile). */
        @media (max-width: 900px) {
            .nav-links { display: none; }
            .nav-hamburger { display: flex; }
        }
        @media (max-width: 768px) {
            /* bigger footer tap targets on mobile (were ~24px, below the 40px min) */
            .footer-col a { padding: 11px 0; }
            /* search field inside the mobile menu */
            .mm-search { width: min(86vw, 360px); margin-bottom: 6px; }
            .mm-search input { width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); border-radius: 12px; color: #fff; font-size: 15px; padding: 13px 15px; outline: none; }
            .mm-search input:focus { border-color: var(--accent); }
            .mm-search input::placeholder { color: rgba(255,255,255,0.5); }
            /* The nav squeezes the brand below its own max-width on a small
               phone, and a fixed 20px then clipped the site's OWN name with no
               ellipsis - measured at 360px: merespreadsheet needed 141px in a
               93px box, sharkfactory 111 in 88, squatchreps 102 in 85. Scaling
               with the viewport keeps it whole and still caps at the original
               20px once there is room; the ellipsis is the backstop. */
            .nav-brand { font-size: clamp(11px, 3.4vw, 20px); letter-spacing: 0; max-width: 46vw;
                        line-height: 44px;
                        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        }
        /* A phone narrower than 390px cannot fit the three-word name AND the heart
           chip; the wishlist keeps its tile in the menu, so the chip goes first. */
        @media (max-width: 389px) {
            .nav-links .nav-wishlist { display: none !important; }
            .nav-brand { font-size: clamp(10px, 3.0vw, 20px); }
            /* the chip row gives back 12px so a 15-letter name still fits whole */
            .nav-mobile-actions .mob-lang-btn { padding-left: 6px; padding-right: 6px; }
        }
        @media (max-width: 768px) {
            .section { padding: 48px 16px; }
            .section-title { font-size: 32px; }
            .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
            .product-card-body { padding: 12px; }
            .product-card-name { font-size: 11px; }
            .product-card-price { font-size: 14px; }
            .product-card-buy { padding: 0 14px; }   /* 44px min-height and the 11px label come from the base rule */
            /* Let price + a long buy label ("Buy on KakoBuy" on the spreadsheet)
               wrap on very narrow cards instead of cramming against each other.
               Short labels (Buy/View) still sit inline since wrap only triggers on overflow. */
            .product-card-row { flex-wrap: wrap; row-gap: 6px; }
            .stat-num { font-size: 36px; }
            .cta-section h2 { font-size: 32px; }
            .footer-top { flex-direction: column; }
        }
        
/* min-height + safe center (not fixed height + center): with a fixed height the
   flex centring CLIPPED the top of the hero under the fixed nav on short screens */
/* --- agent banner ---------------------------------------------------------
   A wide marketing graphic, shown WHOLE across the top rather than cropped to
   fill the hero: at 4:1 or wider, `cover` on a full-height hero magnifies a
   sliver into unrecognisable texture. The page fades in underneath it. */
.hero-agent-bg { position: absolute; top: 0; left: 0; right: 0; z-index: 0;
    width: 100%; height: 640px; object-fit: cover;
    /* The right crop depends on the artwork, so it is a per-site setting fed in
       as a custom property; the fallback is what a site with no setting gets. */
    object-position: var(--abp, center 45%);
    /* the stock agent renders are soft and low-contrast; without this they
       wash out completely against a light page */
    filter: contrast(1.12) saturate(1.28); }
/* Kept OFF the full hero height on purpose: covering ~900px with a 4:1 banner
   zooms straight past the subject - KakoBuy's plane disappears entirely and all
   that is left is blur. 640px is sized to the copy: the sub-heading ends 558px in,
   and the page fade must not start above it.
   still reads. */
.hero-agent-scrim { position: absolute; top: 0; left: 0; right: 0; height: 640px;
    z-index: 1; pointer-events: none;
    /* CLEAR over the artwork. Any wash across the whole banner - even at 2% -
       is what made this read as a ghost. The gradient does nothing until 62%
       and then blends into the page so there is no hard edge. */
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 88%,
                rgba(0,0,0,.30) 95%, var(--bg) 100%); }
/* LIGHT MODE NEEDS ITS OWN SCRIM. The dark one above is rgba(0,0,0,...) fading
   into var(--bg) - which in light mode is #fafafa, so it read as a black wash
   fading to white: it dimmed the artwork AND fought the dark hero text sitting
   on top of it. Light mode fades through WHITE instead, so the image stays
   bright and the text keeps its ground. */
html[data-theme="light"] .hero-agent-scrim {
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 88%,
                rgba(255,255,255,.35) 95%, var(--bg) 100%); }
/* The artwork is no longer dimmed, so the hero copy has to carry its own
   legibility rather than lean on a wash that is no longer there. */
.hero-agent-bg ~ .hero-content .hero-title { text-shadow: 0 2px 10px rgba(0,0,0,.75), 0 6px 46px rgba(0,0,0,.55); }
.hero-agent-bg ~ .hero-content .hero-sub { text-shadow: 0 1px 8px rgba(0,0,0,.8); }
/* The eyebrow is accent-coloured, and this site's accent is a red that vanishes
   against KakoBuy's warm amber artwork. Over a banner it drops the accent for
   plain white (dark) / near-black (light) with a hard shadow, so it is legible
   whatever the artwork underneath happens to be. */
.hero-agent-bg ~ .hero-content .hero-label {
    color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 2px 14px rgba(0,0,0,.8); }
/* Light mode does NOT invert this copy. The page is light, but what sits behind
   the copy is a photograph - the light theme's near-black title over dark bokeh
   was simply unreadable, and a white text-shadow cannot rescue dark text on a
   dark image. Over a banner both themes use the same light-on-dark treatment
   that dark mode already reads well with. */
html[data-theme="light"] .hero-agent-bg ~ .hero-content .hero-title,
html[data-theme="light"] .hero-agent-bg ~ .hero-content .hero-label { color: #ffffff; }
html[data-theme="light"] .hero-agent-bg ~ .hero-content .hero-title .accent { color: var(--accent); }
html[data-theme="light"] .hero-agent-bg ~ .hero-content .hero-sub { color: rgba(255,255,255,.92); }
/* A veil belonging to the COPY, not to the banner. The scrim fades the artwork
   into the page at the bottom, which is a different job and leaves whatever the
   text happens to land on to chance - here the sub-heading sits three-quarters
   down, exactly where light mode fades to white. This darkens only the middle
   and reaches zero at the banner's edges, so the artwork stays bright at the
   sides while the text always has ground under it, in either theme. It paints
   inside .hero-content's stacking context, so it is above the scrim and below
   the text. */
.hero-agent-bg ~ .hero-content::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 640px;
    z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 82% 70% at 50% 46%,
        rgba(0,0,0,.62) 0%, rgba(0,0,0,.54) 40%, rgba(0,0,0,.34) 66%,
        rgba(0,0,0,.12) 85%, rgba(0,0,0,0) 100%); }

@media (max-width: 768px) {
    /* `contain` on a 4:1 banner at 390px wide is a 98px sliver - measured. Crop
       the sides instead so the artwork has some presence on the device most of
       this traffic actually uses. */
    .hero-agent-bg, .hero-agent-scrim { height: 360px; }
    /* A phone box is nearly square, so it crops far harder than desktop and
       usually wants a different part of the picture - its own setting, falling
       back to the desktop one. */
    .hero-agent-bg { object-position: var(--abp-m, var(--abp, center 45%)); }
    .hero-agent-scrim { background: linear-gradient(180deg, rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 87%, rgba(0,0,0,.32) 95%, var(--bg) 100%); }
    html[data-theme="light"] .hero-agent-scrim {
        background: linear-gradient(180deg, rgba(255,255,255,0) 0%,
            rgba(255,255,255,0) 87%, rgba(255,255,255,.35) 95%, var(--bg) 100%); }
    .hero-agent-bg ~ .hero-content::before { height: 360px;
        background: radial-gradient(ellipse 96% 74% at 50% 44%,
            rgba(0,0,0,.62) 0%, rgba(0,0,0,.50) 46%, rgba(0,0,0,.24) 74%,
            rgba(0,0,0,0) 100%); }
}
/* .hero-overlay exists to make the hero copy readable over the PRODUCT TICKER,
   and in light mode it is a 96%-opaque white wash. With an agent banner behind
   it that wash was the whole reason the artwork looked absent in light mode -
   no change to the banner's own scrim could ever out-argue it. When a banner is
   present the scrim above does that job, so the ticker's overlay stands down.
   The light-mode selector needs the theme prefix or it loses on specificity to
   html[data-theme="light"] .hero-overlay. */
.hero-agent-bg ~ .hero-overlay,
html[data-theme="light"] .hero-agent-bg ~ .hero-overlay { display: none; }
/* --- creator band -------------------------------------------------------
   Optional per-site identity above the hero copy. Absent settings => absent
   markup, so an un-personalised site renders exactly as before. */
.hero-creator { position: relative; z-index: 2; display: flex; flex-direction: column;
    align-items: center; gap: 12px; margin-bottom: 26px; animation: fadeUp .5s ease both; }
.hc-avatar { width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
    border: 3px solid var(--accent); background: var(--surface);
    box-shadow: 0 8px 32px rgba(0,0,0,.55); }
.hc-name { max-width: 100%; overflow-wrap: anywhere; word-break: break-word;
    font-family: var(--font-display); font-size: clamp(30px, 7vw, 56px);
    line-height: 1.02; letter-spacing: 1px; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
.hc-name .accent { color: var(--accent); }
.hc-tagline { max-width: 46ch; overflow-wrap: anywhere; font-size: 14px; color: var(--text-muted); max-width: 46ch; line-height: 1.5; }
.hc-socials { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.hc-social { width: 44px; height: 44px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18); color: #fff; transition: background .15s, transform .15s; }
.hc-social:hover { background: var(--accent); color: var(--accent-ink, #000); transform: translateY(-2px); }
.hc-social svg { width: 20px; height: 20px; fill: currentColor; display: block; }
/* creator background replaces the product ticker when one is set */
.hero-creator-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
    object-fit: cover; }
.hero-creator-scrim { position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.72) 60%, var(--bg) 100%); }
@media (max-width: 768px) {
    .hero-creator { gap: 9px; margin-bottom: 16px; }
    .hc-avatar { width: 64px; height: 64px; border-width: 2px; }
    .hc-name { font-size: clamp(24px, 8.5vw, 38px); }
    .hc-tagline { font-size: 12.5px; }
    /* 44px stays: these are tap targets, not decoration */
}
.hero-combined { position: relative; overflow: hidden; min-height: 100vh; height: auto; }
.hero-bg-ticker { position: absolute; inset: 0; z-index: 0; display: flex; gap: 16px; padding: 0 16px; align-items: flex-start; justify-content: center;
    /* The scrim can only dim these tiles, and at the centre it bottoms out
       around 0.6 alpha - product names and prices printed straight through
       the headline and the sub-copy. A mask removes the tiles from the copy
       column outright, and being a mask it fixes dark and light at once. */
    -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, transparent 0%, transparent 40%, rgba(0,0,0,0.55) 66%, #000 88%);
            mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, transparent 0%, transparent 40%, rgba(0,0,0,0.55) 66%, #000 88%); }
.hero-bg-col { flex: 1; max-width: 380px; height: 100%; overflow: hidden; }
.hero-bg-scroll { display: flex; flex-direction: column; gap: 14px; animation: bgTick 80s linear infinite; }
.hero-bg-col:nth-child(2) .hero-bg-scroll { animation-duration: 95s; animation-direction: reverse; }
.hero-bg-col:nth-child(3) .hero-bg-scroll { animation-duration: 70s; }
@keyframes bgTick { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
.hero-bg-card { border-radius: 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--border-subtle); }
.hero-bg-card img { width: 100%; aspect-ratio: 4/5; object-fit: contain; background: #ffffff; padding: 6px; }
.hero-bg-card-info { padding: 12px 14px; }
.hero-bg-card-name { font-family: var(--font-display); font-size: 13px; text-transform: uppercase; line-height: 1.1; margin-bottom: 4px; }
.hero-bg-card-price { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--accent); }
.hero-overlay {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    /* Litbuy-style YELLOW band over the product ticker — black headline +
       flame accent word sit on top; fades to white at the bottom into content */
    background:
        /* dark tint fading in from the sides + dark centre scrim (no yellow) */
        linear-gradient(to right, rgba(13,13,13,1) 0%, rgba(13,13,13,0.8) 18%, rgba(13,13,13,0.45) 40%, rgba(13,13,13,0.4) 50%, rgba(13,13,13,0.45) 60%, rgba(13,13,13,0.8) 82%, rgba(13,13,13,1) 100%),
        linear-gradient(to bottom, rgba(13,13,13,0.9) 0%, rgba(13,13,13,0.45) 30%, rgba(13,13,13,0.35) 50%, rgba(13,13,13,0.45) 70%, rgba(13,13,13,1) 100%);
}
.hero-content { position: relative; z-index: 2; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: safe center; min-height: 100vh; text-align: center; padding: 96px 24px 40px; }
.hero-label { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 3px; margin-bottom: 24px; animation: fadeUp 0.5s ease 0.1s both; }
.hero-title { font-family: var(--font-display); font-size: clamp(52px, 11vw, 110px); text-transform: uppercase; line-height: 0.92; letter-spacing: 2px; margin-bottom: 20px; animation: fadeUp 0.5s ease 0.2s both; text-shadow: 0 4px 40px rgba(0,0,0,0.5); }
.hero-title .accent { color: var(--accent); }
.hero-sub { font-size: 15px; color: var(--text-secondary); line-height: 1.6; max-width: 480px; margin: 0 auto 32px; animation: fadeUp 0.5s ease 0.3s both; text-shadow: 0 2px 16px rgba(0,0,0,0.4); }
.hero-cta-row { display: flex; gap: 12px; animation: fadeUp 0.5s ease 0.4s both; flex-wrap: wrap; justify-content: center; }
.hero-signup { padding: 16px 32px; background: var(--accent); color: var(--accent-ink); font-family: var(--font-mono); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; border-radius: var(--radius-sm); transition: all 0.2s; text-decoration: none; }
.hero-signup:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 8px 24px var(--accent-dim); }

/* Hero search */
.hero-search {
    position: relative; display: flex; align-items: center; gap: 0;
    width: 100%; max-width: 540px; margin: 0 auto;
    background: rgba(255,255,255,0.9); backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle);
    border-radius: 999px; padding: 6px 6px 6px 18px;
    box-shadow: 0 10px 30px rgba(20,16,0,0.12);
    animation: fadeUp 0.5s ease 0.4s both;
    z-index: 100;
}
.hero-search:has(.hero-search-dropdown.active) { z-index: 1000; }
.hero-search:focus-within { border-color: var(--accent); box-shadow: 0 12px 32px var(--accent-dim); }
.hero-search-icon { color: var(--text-muted); flex-shrink: 0; }
.hero-search input {
    flex: 1; min-width: 0;
    padding: 14px 14px; background: transparent; border: none; outline: none;
    color: var(--text);
    font-family: var(--font-body); font-size: 16px;
}
.hero-search input::placeholder { color: var(--text-muted); }
.hero-search-go {
    padding: 12px 24px; background: var(--accent); color: #fff;
    border: none; border-radius: 999px; cursor: pointer;
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 2px;
    transition: background 0.15s ease; flex-shrink: 0;
}
.hero-search-go:hover { background: var(--accent-hover); }
.hero-search-dropdown {
    display: none;
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.55);
    max-height: 60vh; overflow-y: auto;
    z-index: 1000; text-align: left;
}
.hero-search-dropdown.active { display: block; }
.hero-search-suggestion {
    display: grid; grid-template-columns: 48px 1fr auto; gap: 12px;
    padding: 10px 14px;
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
    color: inherit; text-decoration: none;
    cursor: pointer;
    transition: background 0.1s ease;
}
.hero-search-suggestion:last-child { border-bottom: none; }
.hero-search-suggestion:hover, .hero-search-suggestion.active { background: var(--surface-2); }
.hero-search-suggestion img {
    width: 48px; height: 48px; object-fit: contain; border-radius: 8px;
    background: #ffffff; padding: 2px;
}
.hero-search-sug-text { min-width: 0; }
.hero-search-sug-name {
    font-family: var(--font-body); font-size: 13px; font-weight: 600;
    color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-search-sug-cat {
    font-family: var(--font-mono); font-size: 9px; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 1.5px;
    margin-top: 2px;
}
.hero-search-sug-price {
    font-family: var(--font-mono); font-size: 13px; font-weight: 700;
    color: var(--accent);
}
.hero-search-empty {
    padding: 24px;
    font-family: var(--font-mono); font-size: 11px;
    color: var(--text-muted);
    text-align: center; text-transform: uppercase; letter-spacing: 2px;
}
.hero-search-allbtn {
    display: block; text-align: center;
    padding: 12px 14px;
    background: var(--accent-dim); color: var(--accent);
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px;
    border-top: 1px solid var(--border-subtle);
    text-decoration: none;
}
.hero-search-allbtn:hover { background: var(--accent); color: #fff; }
.hero-search-allbtn.active { background: var(--accent); color: var(--accent-ink); }

/* Recent searches */
.hero-search-recent-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px;
    font-family: var(--font-mono); font-size: 10px; font-weight: 700;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px;
    border-bottom: 1px solid var(--border-subtle);
}
.hero-search-recent-clear {
    background: transparent; border: none; color: var(--text-muted);
    font-family: var(--font-mono); font-size: 10px; font-weight: 700;
    cursor: pointer; letter-spacing: 1.5px; text-transform: uppercase;
    padding: 2px 6px; border-radius: 4px;
}
.hero-search-recent-clear:hover { color: var(--accent); }
.hero-search-recent-row {
    display: grid; grid-template-columns: 18px 1fr auto; gap: 10px;
    padding: 10px 14px;
    align-items: center; cursor: pointer;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text); text-decoration: none;
}
.hero-search-recent-row:last-of-type { border-bottom: none; }
.hero-search-recent-row:hover, .hero-search-recent-row.active { background: var(--surface-2); }
.hero-search-recent-row svg { color: var(--text-muted); width: 14px; height: 14px; flex-shrink: 0; }
.hero-search-recent-q {
    font-family: var(--font-body); font-size: 13px; font-weight: 500;
    color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-search-recent-x {
    background: transparent; border: none; cursor: pointer;
    width: 24px; height: 24px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-muted); font-size: 14px; line-height: 1;
    transition: all 0.15s;
}
.hero-search-recent-x:hover { background: rgba(239,68,68,0.12); color: #ef4444; }
.hero-browse-btn {
    margin: 22px auto 0;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 18px 46px !important;
    background: var(--accent) !important; color: #fff !important; border: none !important;
    font-size: 15px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
    border-radius: 14px;
    box-shadow: 0 12px 34px var(--accent-dim);
    animation: fadeUp 0.5s ease 0.5s both, heroBrowsePulse 2.6s ease-in-out 1s infinite;
}
.hero-browse-btn:hover { background: var(--accent-hover) !important; transform: translateY(-2px); box-shadow: 0 16px 44px var(--accent-glow); }

/* Hero CTAs: Products (secondary) sits above Sign Up (primary, in the site accent
   so it reads as THE call to action). Same width as the search field above them. */
.hero-cta-stack { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 360px;
    margin: 18px auto 0; animation: fadeUp 0.5s ease 0.5s both; }
.hero-products-btn, .hero-signup-btn { display: block; text-align: center; border-radius: 13px;
    font-family: var(--font-mono, inherit); text-transform: uppercase; text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.hero-products-btn { padding: 14px 24px; font-size: 12.5px; font-weight: 700; letter-spacing: 1.6px;
    background: rgba(255,255,255,.06); color: var(--text); border: 1px solid var(--border-subtle);
    backdrop-filter: blur(6px); }
.hero-products-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.hero-signup-btn { padding: 17px 24px; font-size: 13.5px; font-weight: 800; letter-spacing: 1.4px;
    background: var(--accent); color: var(--accent-ink, #fff); border: none;
    box-shadow: 0 12px 34px var(--accent-dim); }
.hero-signup-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 44px var(--accent-glow, var(--accent-dim)); }
@keyframes heroBrowsePulse {
    0%, 100% { box-shadow: 0 12px 34px var(--accent-dim); }
    50% { box-shadow: 0 12px 40px var(--accent-glow), 0 0 0 6px var(--accent-dim); }
}
/* Best Sellers sit in the same grid as every other section: the centred
   1060px override inset them 46px from their own heading and made their cards
   23px narrower than the thirteen category grids below. */
.hero-scroll { font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--text-muted); margin-top: 36px; animation: fadeUp 0.5s ease 0.6s both; }

.conveyor-section { padding: 48px 0; }
.conveyor-wrap { overflow: hidden; position: relative; }
.conveyor-track { display: flex; gap: 16px; width: max-content; cursor: grab; user-select: none; -webkit-user-select: none;
    /* vertical swipes still scroll the page; horizontal ones drag the row */
    touch-action: pan-y pinch-zoom; }
.conveyor-track:active { cursor: grabbing; }
.conveyor-fade-l, .conveyor-fade-r { position: absolute; top: 0; bottom: 0; width: 100px; z-index: 5; pointer-events: none; }
.conveyor-fade-l { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.conveyor-fade-r { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }
.conv-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 40px; height: 40px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border-subtle); color: var(--text); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.conv-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.conv-btn-l { left: 12px; }
.conv-btn-r { right: 12px; }
.conveyor-track .product-card { flex: 0 0 220px; }

.mid-cta { background: var(--accent); padding: 20px 24px; text-align: center; overflow: hidden; }
.mid-cta a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px; font-family: var(--font-display); font-size: 20px; text-transform: uppercase; color: var(--accent-ink); letter-spacing: 2px; line-height: 1.2; word-break: break-word; }
/* Only the second line is the small mono sub-line: '.mid-cta span' matched
   both, so the headline never got the display face set on the link. */
.mid-cta span + span { font-family: var(--font-mono); font-size: 12px; color: var(--accent-ink); display: block; margin-top: 4px; letter-spacing: 1px; line-height: 1.4; word-break: break-word; }

/* Outfit bundles — kai-style cards */
.bundle-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.bundle-card { display: block; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); overflow: hidden; color: inherit; text-decoration: none; transition: all 0.2s ease; }
.bundle-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 24px var(--accent-dim); text-decoration: none; }
.bundle-card-imgs { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; background: var(--border-subtle); aspect-ratio: 1; overflow: hidden; }
.bundle-card-imgs img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: contain; background: #ffffff; display: block; padding: 4px; min-width: 0; min-height: 0; }
.bundle-card-body { padding: 14px 16px; }
.bundle-card-name { font-family: var(--font-display); font-size: 16px; text-transform: uppercase; letter-spacing: 1px; line-height: 1.1; margin-bottom: 8px; color: var(--text); }
.bundle-card-row { display: flex; justify-content: space-between; align-items: baseline; padding-top: 8px; border-top: 1px solid var(--border-subtle); }
.bundle-card-count { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.bundle-card-price { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--accent); }

@media (max-width: 768px) {
    /* Hero = its natural content height (not a forced 100vh) so the product
       catalogue peeks above the fold + no huge empty space at the top. The
       earlier 550px cap was defeated by .hero-content's own min-height:100vh. */
    .hero-combined { min-height: 0; }
    .hero-content { min-height: 0; justify-content: flex-start; padding: 74px 20px 26px; }
    .hero-bg-col:nth-child(3) { display: none; }
    /* the copy column is nearly the whole width on a phone, so the clear area
       is wider and sits higher, where the title and sub actually are */
    .hero-bg-ticker {
        -webkit-mask-image: radial-gradient(ellipse 104% 44% at 50% 34%, transparent 0%, transparent 54%, #000 92%);
                mask-image: radial-gradient(ellipse 104% 44% at 50% 34%, transparent 0%, transparent 54%, #000 92%); }
    /* Below the mask's clear zone the backdrop cards printed their own names
       and prices behind the buttons and the SCROLL DOWN line - "$16.54",
       "CORTEIZ LONG TEE" reading straight through the CTA on a phone. The
       photographs stay; only their captions go. */
    .hero-bg-card-info { display: none; }
    .hero-cta-row { flex-direction: column; align-items: center; }
    /* Mobile hero rhythm: the desktop gaps (24+20+32+22+36px) stack up to more
       than a phone screen's worth of empty space. Tighten every gap and scale the
       type down so label -> title -> sub -> search -> button read as one block. */
    .hero-label { font-size: 9.5px; letter-spacing: 2px; margin-bottom: 7px; }
    .hero-title { font-size: clamp(36px, 11.5vw, 54px); line-height: 0.94; letter-spacing: .5px; margin-bottom: 9px; }
    .hero-sub { font-size: 13px; line-height: 1.45; margin-bottom: 14px; max-width: 330px; }
    .hero-search { padding: 5px 5px 5px 15px; }
    .hero-cta-stack { margin-top: 12px; gap: 9px; max-width: 340px; }
    .hero-products-btn { padding: 12px 20px; font-size: 11.5px; }
    .hero-signup-btn { padding: 15px 20px; font-size: 12.5px; }
    .hero-scroll { margin-top: 13px; font-size: 8.5px; letter-spacing: 2.2px; }
    .conveyor-track .product-card { flex: 0 0 170px; }
    .mid-cta { padding: 16px 14px; }
    .mid-cta a { font-size: 15px; letter-spacing: 1px; }
    .mid-cta span + span { font-size: 10px; letter-spacing: 0.6px; }
    /* The 100px edge fades covered half a 390px screen and greyed the white
       photo of the one whole card; on a phone they only cover the gutter. */
    .conveyor-fade-l, .conveyor-fade-r { width: 16px; }
    /* 48px gaps and no side padding ran the three stats to 8px from the edge
       in German; keep the 16px gutter in every locale. */
    .stat-row { gap: 24px; padding: 40px 16px; }
}

/* ---- Shop by Category: a photo card per category --------------------
   The owner's pick (B) of three mock-ups, Oct 2 2026. Each card is a product
   on white (app.tile_photos, picked for a clean single item), the category
   name and its count. Seven to a row on a laptop, five on a small one; on a
   phone and tablet two rows scroll sideways, edge to edge, with the right
   edge faded so the swipe is visible. Long names wrap rather than ending in
   "..." (Russian "Tracksuits & Sets" takes three lines; the cards on that
   row grow with it). Declared after the phone block at the top of
   this file, so these rules win at every width. */
.cx-sec { max-width: 1200px; margin: 0 auto; padding: 36px 24px 28px; border-bottom: 1px solid var(--border-subtle); }
.cx-sec .sec-header { margin-bottom: 18px; }
.cx-cards { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.cx-card { display: flex; flex-direction: column; min-width: 0; text-decoration: none; border-radius: 16px; overflow: hidden; scroll-snap-align: start;
    background: var(--surface, #111); border: 1px solid var(--border-subtle); transition: transform .15s, border-color .15s, box-shadow .15s; }
.cx-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 12px 28px rgba(0,0,0,.35); text-decoration: none; }
.cx-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cx-card-img { aspect-ratio: 1 / 1; background: #ffffff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cx-card-img img { width: 84%; height: 84%; object-fit: contain; }
.cx-card-body { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; }
.cx-card-name { font-family: var(--font-mono); font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--text); overflow-wrap: break-word; }
.cx-card-n { font-size: 11px; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .cx-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 899px) {
    .cx-sec { padding: 28px 0 22px; }
    .cx-sec .sec-header { padding: 0 16px; margin-bottom: 14px; }
    .cx-cards { grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 128px; gap: 10px;
        overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
        padding: 0 16px 6px; scroll-padding-left: 16px;
        -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
    .cx-cards::-webkit-scrollbar { display: none; }
    /* a 128px card holds 106px of name: tighter tracking keeps SURVÊTEMENTS and
       KOPFBEDECKUNG whole; the longest compounds break at a soft hyphen in i18n.js */
    .cx-card-body { padding: 9px 10px 11px; }
    .cx-card-name { letter-spacing: .6px; }
}
.cat-more-all { display: flex; align-items: center; justify-content: center; min-height: 48px;
    margin-top: 20px; width: 100%; }
@media (min-width: 900px) { .cat-more-all { max-width: 320px; margin-left: auto; margin-right: auto; } }

/* ---- home polish: all rules below are top level, after the chip rules ----
   Quiet text that still reads. --text-muted measures 4.3:1 on the dark page,
   under the 4.5:1 floor for the 10-13px text it carried here: the labels
   under the headline numbers, the per-category card counts and the closing
   catalogue paragraphs. They take the step halfway between muted and
   secondary (white at 0.55 = 6.2:1 dark, black at 0.6 = 5.7:1 light), so
   they stay a step quieter than body copy instead of turning the same grey.
   Mixed from the two theme tokens so the light theme and the older palettes
   follow on their own; without color-mix() the secondary grey applies. */
.stat-label, .cx-card-n, .oc-section > p {
    color: var(--text-secondary);
    color: color-mix(in srgb, var(--text-muted), var(--text-secondary));
}
/* The coupon block's eyebrow is a .section-label inside .cta-section, where
   the (0,1,1) paragraph rule outranks .section-label (0,1,0): it printed in
   body grey at 14px with a 32px gap instead of as the accent label. (0,2,0)
   takes the label's own values back; html[data-theme="light"] .section-label
   (0,2,1) still wins in light mode. --accent-on-dark is the brand colour
   wherever it reads on the dark page, and white where it would not. */
.cta-section .section-label { color: var(--accent-on-dark, var(--accent)); font-size: 10px; margin-bottom: 12px; }
/* The closing Open Catalogue block was a .section with a narrower cap,
   which centred it, so at 1440 it started ~199px inside the rail every other
   section starts on. The section keeps the full rail; only the text measure
   is capped, at the same 752px of text it had before. */
.oc-section > h2, .oc-section > p { max-width: 752px; }
/* Carousel arrows ride the middle of the photo, between the agent button
   (top-right) and the save heart (bottom-left) of whatever card is under
   them. At top:50% of the whole card they landed on the edge cards' hearts,
   so a tap meant for save scrolled the row. The photo is square, so its
   middle is half the card width: 220px cards here, 170px on phones.
   Top level, after every block that sets .conv-btn. */
.conv-btn { top: 110px; }
@media (max-width: 768px) { .conv-btn { top: 85px; } }
/* "Up to" over the coupon figure, like every other place it is quoted.
   Out of flow, so the three numbers keep one baseline, and outside the
   counted element, which rewrites its own text as it counts up. */
.stat--upto { position: relative; }
.stat-pre { position: absolute; left: 0; right: 0; bottom: 100%; margin-bottom: 2px;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
    white-space: nowrap; color: var(--text-secondary);
    color: color-mix(in srgb, var(--text-muted), var(--text-secondary)); }
/* Reduced motion: the hero's product columns stand still. (The conveyor
   checks the same query in initConveyor.) Top level, after every rule
   that sets the animation. */
@media (prefers-reduced-motion: reduce) {
    .hero-bg-scroll { animation: none; }
}


        /* ============================================================
           AURALINKS LIGHT-THEME PATCH — keep LAST in this stylesheet.
           The engine was authored dark; this block re-inks everything
           the variables can't reach. Three rules of the theme:
             1. Yellow fills ALWAYS carry dark ink (never white-on-yellow).
             2. Yellow as TEXT becomes readable amber (--accent-text).
             3. Brand/display accents go red — the "bit of red".
           Placed after extra_css so it also overrides page-level styles.
           ============================================================ */
        /* 1 — dark ink on yellow fills */
        .nav-cta, .nav-wish-count, .btn-primary, .product-card-badge,
        .product-card-buy, .popup-close:hover, .agent-picker-item.selected,
        .agent-picker-item:hover,
        .agent-picker-buy, .pd-buy:hover, .pd-copy.copied, .pd-raw-copy.copied,
        .side-btn:hover, .hero-signup, .hero-search-go, .hero-search-allbtn:hover,
        .conv-btn:hover, .tut-step-num, .tut-card .tut-link, .converter-input button,
        .agent-rec-badge, .product-card-agents:hover, .nf-btn,
        .agent-card-cta, .agent-card.featured .featured-badge, .agent-row-open,
        .signup-featured, .signup-featured .meta .ttl, .signup-featured .go-arrow {
            color: var(--accent-ink);
        }
        .signup-featured .meta .sub { color: var(--accent-ink, #111111); }
        .signup-featured .badge { background: var(--chrome); color: var(--accent); }

        /* 2 — yellow text on light surfaces -> flame-orange accents (Litbuy) */
        .nav-links a.active, .product-card-price, .sec-link,
        .hero-bg-card-price,
        .mm-lang button.active, .cat-tab.active,
        .result-meta .accent, .pp-agentchip.active, .pd-price,
        .hero-search-allbtn, .spread-stat-num, .bundle-total-amount,
        .bundle-eyebrow .accent,
        .agent-card-coupon .amount,
        .agents-foot a, .tut-faq-q .chev {
            color: var(--accent-text);
        }

        /* 3 — black nav chrome (Litbuy): white links, yellow brand + active */
        .nav-brand { color: #ffffff; }
        .nav-brand .accent { color: var(--accent); }
        .nav-links a { color: rgba(255,255,255,0.72); }
        .nav-links a:hover { color: #ffffff; }
        .nav-links a.active { color: var(--accent); }
        .nav-links a.active::after { background: var(--accent); }
        .nav-hamburger { color: #ffffff; }
        .nav-wishlist { color: rgba(255,255,255,0.85); }
        .nav-links .nav-wishlist:hover { color: #e0245e; } .nav-links .nav-wishlist.active { color: var(--accent); }
        .nav-links .currency-btn { border-color: rgba(255,255,255,0.28); color: rgba(255,255,255,0.85); }
        .nav-links .currency-btn:hover { border-color: rgba(255,255,255,0.5); color: #ffffff; }
        /* SIGN-UP CTA: force BLACK ink on the yellow fill. `.nav-links a` (white,
           specificity 0,1,1) was overriding plain `.nav-cta` (0,1,0), so the text
           stayed white — pin it with higher specificity + !important (both themes). */
        .nav-links a.nav-cta { color: var(--accent-ink) !important; }
        .mobile-menu .mobile-menu-brand .accent { color: var(--accent); }

        /* 4 — display accents in brand yellow (they all sit on dark surfaces) */
        .wl-title .accent,
        .agents-hero h1 .accent, .spread-hero h1 .accent,
        .bundle-page-header h1 .accent, .nf-code, .stat-num {
            color: var(--accent);
        }
        /* the popup is a fixed dark panel, so its accent text needs the
           readable-on-dark value rather than the raw brand colour */
        .popup-headline h2 .accent { color: var(--accent-on-dark); }
        /* hero accent word in brand yellow on the dark scrim */
        .hero-title .accent { color: var(--accent); }

        /* 5 — small accents in yellow (black ink where yellow is a fill) */
        .section-label,
        .agents-hero .eyebrow, .tut-eyebrow {
            color: var(--accent);
        }
        /* the popup eyebrow is excluded above: it sits on the fixed dark popup
           panel, so it needs the readable-on-dark value. Listing it there reset
           it to the raw accent at equal specificity but later in the file, which
           silently undid the fix on every dark-accent site. */
        .popup-headline .eyebrow { color: var(--accent-on-dark); }
        .nav-wish-count { background: var(--accent); color: var(--accent-ink); }
        /* Best Selling chip: black tag with yellow text, like Litbuy's banners */
        .product-card-badge { background: var(--chrome); color: var(--accent); }
        /* hearts: classic favorite red on hover + when saved */
        .product-card-wish:hover, .product-card-wish.on { color: #e0245e; border-color: #e0245e; }

        /* 6 — on the black page the banner strip flips to YELLOW so it pops
           (Litbuy's yellow promo bands); footer stays black with a separator */
        .mid-cta { background: var(--accent); }
        .mid-cta a { color: var(--accent-ink); }
        /* both band lines take the derived ink: the fixed 0.75 near-black was
           picked for a yellow band and measured 4.10:1 on green (about 2:1 on
           the white-ink blue and forest bands) */
        .mid-cta span { color: var(--accent-ink); }
        .mid-cta a > span:first-child { color: var(--accent-ink); }
        .footer { max-width: none; background: var(--chrome); border-top: 1px solid rgba(255,255,255,0.1);
                  padding-left: max(24px, calc((100% - 1200px) / 2));
                  padding-right: max(24px, calc((100% - 1200px) / 2)); }
        .footer-brand { color: #ffffff; }
        .footer-brand span { color: var(--accent) !important; }
        .footer-desc { color: rgba(255,255,255,0.55); }
        .footer-col h2 { color: var(--accent); }
        .footer-col a { color: rgba(255,255,255,0.7); }
        .footer-col a:hover { color: var(--accent); }
        .footer-bottom { color: rgba(255,255,255,0.45); border-top-color: rgba(255,255,255,0.12); }
        .footer-bottom p { color: rgba(255,255,255,0.45) !important; }
        /* hero Browse CTA: yellow pill + black ink pops on the dark scrim */
        .hero-browse-btn { background: var(--accent) !important; color: var(--accent-ink) !important; }

        /* ghost controls on dark surfaces */
        .pd-close { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: var(--text); }
        .pd-close:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.35); }

        /* 7 — dark hero scrim: light text; the white search pill keeps dark
           internals (it's one of the deliberate white survivors) */
        .hero-title { color: var(--text); }
        .hero-label { color: var(--accent); }
        .hero-search input { color: #111111; }
        .hero-search input::placeholder { color: rgba(17,17,17,0.45); }
        .hero-search-icon { color: rgba(17,17,17,0.45); }
        /* mobile-menu search input on the BLACK menu */
        .mm-search input { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.2) !important; color: #ffffff !important; }
        .mm-search input::placeholder { color: rgba(255,255,255,0.5) !important; }        .currency-menu { box-shadow: 0 8px 30px rgba(0,0,0,0.16); }
        .aural-rsdd { box-shadow: 0 18px 40px rgba(0,0,0,0.16); }
        .side-btn { box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
        .pd-modal { box-shadow: 0 30px 90px rgba(0,0,0,0.18); }
        .hero-search-dropdown { box-shadow: 0 18px 40px rgba(0,0,0,0.16); }

        /* ============================================================
           PUBLIC LIGHT MODE — opt-in via the header ☀/☾ toggle
           (html[data-theme="light"]). Default (no attribute) keeps the dark
           brand theme. Flips the content surfaces to light; the nav, footer,
           hero scrim, mobile menu and signup popup stay dark chrome (they're
           built for white text) so there is never white-on-white. Palette
           lifted from the studio preview tool's THEMES.light. Keep LAST.
           ============================================================ */
        html[data-theme="light"] {
            --bg: #fafafa;
            --surface: #ffffff;
            --surface-2: #f3f3f4;
            --surface-3: #e5e5e8;
            --text: #0a0a0b;
            --text-secondary: rgba(0,0,0,0.7);
            --text-muted: rgba(0,0,0,0.6);
            --border-subtle: rgba(0,0,0,0.10);
            --accent-text: #2b6f95;   /* accent as TEXT on white, derived */
        }
        /* product tiles get a hairline + soft shadow on the off-white page */
        html[data-theme="light"] .product-card { border-color: rgba(0,0,0,0.10); box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
        html[data-theme="light"] .product-card:hover { box-shadow: 0 14px 40px rgba(0,0,0,0.12); }
        /* bright-yellow accent TEXT that the dark theme paints on dark surfaces
           would be illegible on white → switch to the readable gold. (Hero and
           popup keep bright yellow because they stay on dark surfaces.) */
        html[data-theme="light"] .section-label,
        html[data-theme="light"] .stat-num,
        html[data-theme="light"] .tut-eyebrow,
        html[data-theme="light"] .agents-hero .eyebrow,
        html[data-theme="light"] .agents-hero h1 .accent,
        html[data-theme="light"] .wl-title .accent,
        html[data-theme="light"] .spread-hero h1 .accent,
        html[data-theme="light"] .bundle-page-header h1 .accent,
        html[data-theme="light"] .nf-code {
            color: var(--accent-text);
        }
        /* the signup popup is a hardcoded-dark glass panel — re-scope the dark
           palette inside it so its content stays light-on-dark in light mode */
        html[data-theme="light"] .popup-overlay {
            --surface: #161616; --surface-2: #1e1e1e; --surface-3: #282828;
            --text: #ffffff; --text-secondary: rgba(255,255,255,0.65); --text-muted: rgba(255,255,255,0.5);
            --border-subtle: rgba(255,255,255,0.09); --accent-text: var(--accent);
        }
        /* darker scrim so modals pop over the light page */
        html[data-theme="light"] .pd-overlay { background: rgba(0,0,0,0.5); }
        /* floating chrome (back-to-top + the page Back pill) read dark-on-light;
           both have hardcoded-dark backgrounds that would otherwise show their
           var(--text*) glyph dark-on-dark in light mode. */
        html[data-theme="light"] .back-top { background: #fff; border-color: rgba(0,0,0,0.12); color: rgba(0,0,0,0.5); box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
        html[data-theme="light"] .page-back { background: rgba(255,255,255,0.92); color: rgba(0,0,0,0.6); border-color: rgba(0,0,0,0.12); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
        html[data-theme="light"] .page-back:hover { background: #fff; color: #000; border-color: rgba(0,0,0,0.22); }
        /* page-specific accent-as-TEXT spots that sit on light surfaces in light
           mode (audited per template; not covered by the --accent-text group). */
        html[data-theme="light"] .hero-search-sug-price,
        html[data-theme="light"] .hero-search-recent-clear:hover,
        html[data-theme="light"] .bundle-card-price,
        html[data-theme="light"] .tut-trust .tb svg,
        html[data-theme="light"] .tut-icon,
        html[data-theme="light"] .tut-card .tut-link.ghost:hover,
        html[data-theme="light"] .wl-suggest-link,
        html[data-theme="light"] .spread-cat:hover {
            color: var(--accent-text);
        }
        html[data-theme="light"] .agents-foot a { border-bottom-color: var(--accent-text); }
        html[data-theme="light"] .bundle-back:hover { color: var(--accent-text); border-bottom-color: var(--accent-text); }
        /* component hover/label states hard-pinned to bright --accent that land on
           light surfaces in light mode: the agent-picker panel "Open with" label
           (panel flips white; only its scrim stays dark), outline-button hover,
           the Choose-Agent (pd-copy) hover, and the reusable recent-search
           "Clear all" hover. Swap to the readable gold. */
        html[data-theme="light"] .agent-picker-label,
        html[data-theme="light"] .aural-rsdd .rs-clear:hover {
            color: var(--accent-text);
        }
        html[data-theme="light"] .btn-outline:hover,
        html[data-theme="light"] .pd-copy:hover {
            color: var(--accent-text); border-color: var(--accent-text);
        }
        /* ---- CHROME flip: in light mode the nav, footer, mobile menu and hero
           were hardcoded dark (they applied in BOTH themes), which made light mode
           look "mostly black". Flip them to light with dark text here. ---- */
        /* nav bar */
        html[data-theme="light"] .nav { background: rgba(255,255,255,0.9); border-bottom-color: rgba(0,0,0,0.08); }
        html[data-theme="light"] .nav-brand { color: #0a0a0b; }
        html[data-theme="light"] .nav-links a { color: rgba(0,0,0,0.72); }
        html[data-theme="light"] .nav-links a:hover { color: #000; }
        html[data-theme="light"] .nav-hamburger { color: #111; }
        html[data-theme="light"] .nav-links .currency-btn { border-color: rgba(0,0,0,0.2); color: rgba(0,0,0,0.72); }
        html[data-theme="light"] .nav-links .currency-btn:hover { border-color: rgba(0,0,0,0.45); color: #000; }
        /* mobile top-bar actions (lang/currency/wishlist shown <=900px) */
        html[data-theme="light"] .nav-mobile-actions .mob-lang-btn { border-color: rgba(0,0,0,0.25); color: rgba(0,0,0,0.75); }
        html[data-theme="light"] .nav-mobile-actions .mob-lang-btn:hover { border-color: rgba(0,0,0,0.45); color: #000; }
        html[data-theme="light"] .nav-mobile-actions .nav-mob-wish { color: rgba(0,0,0,0.75); }
        /* mobile slide-out menu */
        html[data-theme="light"] .mobile-menu { background: rgba(255,255,255,0.97); }
        html[data-theme="light"] .mobile-menu a { color: #0a0a0b; }
        html[data-theme="light"] .mobile-menu .mobile-menu-brand { color: #0a0a0b; }
        html[data-theme="light"] .mobile-menu .mobile-menu-cta .mm-cta-line1 { color: #0a0a0b; }
        html[data-theme="light"] .mobile-menu .mobile-menu-cta .mm-cta-line2 { color: rgba(0,0,0,0.6); }
        html[data-theme="light"] .mobile-close { color: #111; }
        html[data-theme="light"] .mm-search input { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.15) !important; color: #111 !important; }
        html[data-theme="light"] .mm-search input::placeholder { color: rgba(0,0,0,0.45) !important; }
        /* footer */
        html[data-theme="light"] .footer { background: #f3f3f4; border-top-color: rgba(0,0,0,0.1); }
        html[data-theme="light"] .footer-brand { color: #0a0a0b; }
        html[data-theme="light"] .footer-desc { color: rgba(0,0,0,0.6); }
        html[data-theme="light"] .footer-col h2 { color: var(--accent-text); }
        html[data-theme="light"] .footer-col a { color: rgba(0,0,0,0.72); }
        html[data-theme="light"] .footer-bottom { color: var(--text-muted); border-top-color: rgba(0,0,0,0.12); }
        html[data-theme="light"] .footer-bottom p { color: var(--text-muted) !important; }
        /* hero: lighten the scrim, darken the headline, gold the accents */
        html[data-theme="light"] .hero-overlay {
            background:
              linear-gradient(to right, rgba(250,250,250,0.96) 0%, rgba(250,250,250,0.82) 18%, rgba(250,250,250,0.55) 40%, rgba(250,250,250,0.5) 50%, rgba(250,250,250,0.55) 60%, rgba(250,250,250,0.82) 82%, rgba(250,250,250,0.96) 100%),
              linear-gradient(to bottom, rgba(250,250,250,0.85) 0%, rgba(250,250,250,0.5) 30%, rgba(250,250,250,0.4) 50%, rgba(250,250,250,0.5) 70%, rgba(250,250,250,1) 100%);
        }
        html[data-theme="light"] .hero-title { color: #0a0a0b; text-shadow: 0 2px 18px rgba(255,255,255,0.5); }
        html[data-theme="light"] .hero-title .accent { color: var(--accent-text); }
        html[data-theme="light"] .hero-label { color: var(--accent-text); }
        html[data-theme="light"] .hero-sub { color: rgba(0,0,0,0.72); text-shadow: none; }
        /* ===== END LIGHT MODE (page-specific overrides may be appended below) ===== */