/* ════════════════════════════════════════════════════════════
   Shared collection grid styles, extracted from products.php so the
   homepage and the pre-order page render the identical browse/pick grid.
   Every selector is class-scoped (.product-*, .pc-*, .fb-quickview*, ...).
   ════════════════════════════════════════════════════════════ */
.cg-shell { width: 100%; }
        /* ── Product toolbar ──
           Layered responsive layout:
             · Desktop (≥1024px): search fills remaining space, 4 filters +
               density line up on one row (6 columns total).
             · Tablet (560–1023px): search breaks to its own full-width row,
               4 filters share a single row, density pinned to the right edge.
             · Phone (≤560px): search on row 1 (full width), filters in a
               2×2 grid, density centered on its own row. Ensures every
               control has a legible tap target on small screens.          */
        /* Two-row layout: search + density on row 1, the five filters on row 2.
           Density lives top-right (no longer wraps to its own line). */
        .product-toolbar {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 0.55rem 0.6rem;
            align-items: center;
            margin: 0 0 0.875rem;
            padding: 0 0 0.875rem;
        }
        .product-toolbar .product-search      { grid-column: 1 / 6; grid-row: 1; }
        .product-toolbar .density-switcher    { grid-column: 6 / 7; grid-row: 1; justify-self: end; align-self: center; }
        .product-toolbar .product-notes-filter { grid-column: span 2; }

        @media (max-width: 1023px) { .product-toolbar { gap: 0.5rem 0.5rem; } }

        @media (max-width: 560px) {
            .product-toolbar { grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1.25rem; padding-bottom: 0.875rem; }
            .product-toolbar .product-search      { grid-column: 1 / -1; grid-row: auto; }
            .product-toolbar .product-filter      { min-width: 0; }
            .product-toolbar .product-notes-filter { grid-column: 1 / -1; }
            .product-toolbar .density-switcher    { grid-column: 1 / -1; grid-row: auto; justify-self: center; margin-top: 0.125rem; }
        }

        /* Search input */
        .product-search {
            position: relative;
            display: flex;
            align-items: center;
            min-width: 0;
        }
        .product-search svg {
            position: absolute;
            left: 0.875rem;
            width: 14px; height: 14px;
            color: rgba(0, 0, 0, 0.4);
            pointer-events: none;
        }
        .product-search input {
            width: 100%;
            padding: 0.5rem 2.25rem 0.5rem 2.375rem;
            background: rgba(0, 0, 0, 0.03);
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 999px;
            font-family: inherit;
            font-size: 0.875rem;
            font-weight: 400;
            color: #000;
            min-height: 40px;
            transition: background 0.2s ease, border-color 0.2s ease;
            -webkit-appearance: none;
            appearance: none;
        }
        .product-search input::placeholder { color: rgba(0, 0, 0, 0.4); }
        .product-search input:focus {
            outline: none;
            background: #fff;
            border-color: rgba(0, 0, 0, 0.35);
        }
        .product-search input::-webkit-search-cancel-button,
        .product-search input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
        .product-search-clear {
            position: absolute; right: 0.5rem;
            width: 22px; height: 22px;
            display: inline-flex; align-items: center; justify-content: center;
            background: rgba(0, 0, 0, 0.06);
            border: none; border-radius: 50%;
            color: rgba(0, 0, 0, 0.55);
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease;
        }
        .product-search-clear:hover { background: rgba(0, 0, 0, 0.12); color: #000; }
        .product-search-clear svg {
            position: static;
            width: 10px; height: 10px;
            color: inherit;
        }
        .product-search-clear[hidden] { display: none; }

        /* Filter selects — grid cell aware, truncates long brand names
           rather than overflowing the cell on narrow screens. */
        .product-filter {
            position: relative;
            display: flex;
            align-items: center;
            min-width: 0;
        }
        .product-filter select {
            appearance: none;
            -webkit-appearance: none;
            width: 100%;
            padding: 0.5rem 2rem 0.5rem 0.875rem;
            background: transparent;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 999px;
            font-family: inherit;
            font-size: 0.6875rem;
            font-weight: 500;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: rgba(0, 0, 0, 0.65);
            cursor: pointer;
            min-height: 40px;
            max-width: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
        }
        .product-filter select:hover {
            color: #000;
            border-color: rgba(0, 0, 0, 0.32);
            background: rgba(0, 0, 0, 0.02);
        }
        .product-filter select:focus-visible {
            outline: 2px solid rgba(0, 0, 0, 0.35);
            outline-offset: 2px;
        }
        .product-filter::after {
            content: '';
            position: absolute;
            right: 0.875rem; top: 50%;
            margin-top: -5px;
            width: 7px; height: 7px;
            border-right: 1.4px solid rgba(0, 0, 0, 0.55);
            border-bottom: 1.4px solid rgba(0, 0, 0, 0.55);
            transform: rotate(45deg);
            pointer-events: none;
        }
        .product-filter.is-active select {
            background: #000;
            color: #fff;
            border-color: #000;
        }
        .product-filter.is-active::after { border-color: #fff; }

        /* Phone-specific filter sizing — slightly smaller typography so
           longer brand labels (e.g. "Editions de Parfums Frédéric Malle")
           still read cleanly when truncated. */
        @media (max-width: 560px) {
            .product-search input { font-size: 0.8125rem; min-height: 40px; }
            .product-filter select {
                font-size: 0.625rem;
                letter-spacing: 0.12em;
                padding: 0.5rem 1.625rem 0.5rem 0.75rem;
                min-height: 38px;
            }
            .product-filter::after { right: 0.625rem; width: 6px; height: 6px; }
        }

        /* ── Notes filter — chip-tag input + layer selector ──
           Modern multi-select pattern: each note becomes a removable chip
           inline with the input. Press Enter, comma, or pick from the
           autocomplete to add. Backspace on empty input removes the last
           chip. AND logic across chips within the chosen layer. */
        .product-notes-filter {
            display: flex;
            align-items: stretch;
            gap: 0;
            grid-column: 1 / -1;
            min-width: 0;
        }
        .notes-chip-host {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.375rem;
            flex: 1 1 auto;
            min-width: 0;
            padding: 0.3125rem 2.25rem 0.3125rem 2.25rem;
            background: transparent;
            border: 1px solid rgba(0,0,0,0.1);
            border-right: 0;
            border-radius: 999px 0 0 999px;
            min-height: 40px;
            transition: border-color 0.2s ease, background 0.2s ease;
            cursor: text;
        }
        .notes-chip-host:focus-within {
            background: #fff;
            border-color: rgba(0,0,0,0.45);
        }
        .product-notes-filter:not([data-empty="1"]) .notes-chip-host {
            border-radius: 18px 0 0 18px;
        }
        .notes-filter-icon {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            margin-top: -7px;
            width: 14px; height: 14px;
            color: rgba(0,0,0,0.4);
            pointer-events: none;
        }
        .notes-chips {
            display: contents;
        }
        .notes-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
            padding: 0.25rem 0.25rem 0.25rem 0.625rem;
            background: #000;
            color: #fff;
            border-radius: 999px;
            font-size: 0.625rem;
            font-weight: 500;
            letter-spacing: 0.06em;
            line-height: 1.3;
            white-space: nowrap;
            max-width: 100%;
            overflow: hidden;
            animation: noteChipIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        @keyframes noteChipIn {
            from { transform: scale(0.6); opacity: 0; }
            to   { transform: scale(1);   opacity: 1; }
        }
        .notes-chip-label {
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .notes-chip-remove {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 16px; height: 16px;
            border-radius: 50%;
            background: rgba(255,255,255,0.18);
            border: 0;
            color: #fff;
            cursor: pointer;
            padding: 0;
            transition: background 0.15s ease;
            flex: none;
        }
        .notes-chip-remove:hover { background: rgba(255,255,255,0.32); }
        .notes-chip-remove svg { width: 8px; height: 8px; }
        .notes-chip-input {
            flex: 1 1 80px;
            min-width: 80px;
            border: 0;
            background: transparent;
            outline: 0;
            padding: 0.25rem 0;
            font-family: inherit;
            font-size: 0.75rem;
            font-weight: 400;
            color: #000;
            min-height: 28px;
        }
        .notes-chip-input::placeholder {
            color: rgba(0,0,0,0.4);
            font-size: 0.6875rem;
            letter-spacing: 0.05em;
        }
        .notes-chip-clearall {
            position: absolute;
            right: 0.5rem;
            top: 50%;
            margin-top: -11px;
            width: 22px; height: 22px;
            display: inline-flex; align-items: center; justify-content: center;
            background: rgba(0,0,0,0.06);
            border: none; border-radius: 50%;
            color: rgba(0,0,0,0.55);
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease;
        }
        .notes-chip-clearall:hover { background: rgba(0,0,0,0.12); color: #000; }
        .notes-chip-clearall svg { width: 10px; height: 10px; }
        .notes-chip-clearall[hidden] { display: none; }
        .product-notes-filter select {
            appearance: none;
            -webkit-appearance: none;
            padding: 0.5rem 1.75rem 0.5rem 0.75rem;
            background: rgba(0,0,0,0.03);
            border: 1px solid rgba(0,0,0,0.1);
            border-radius: 0 999px 999px 0;
            font-family: inherit;
            font-size: 0.625rem;
            font-weight: 500;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: rgba(0,0,0,0.6);
            min-height: 40px;
            cursor: pointer;
            transition: border-color 0.2s ease, color 0.2s ease;
            white-space: nowrap;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0 2l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.2'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.625rem center;
            align-self: stretch;
        }
        .product-notes-filter select:hover { border-color: rgba(0,0,0,0.3); color: #000; }
        .product-notes-filter select:focus-visible { outline: 2px solid rgba(0,0,0,0.35); outline-offset: 2px; }
        .product-notes-filter.is-active .notes-chip-host { border-color: #000; background: #fff; }
        .product-notes-filter.is-active select { border-color: #000; color: #000; }
        @media (max-width: 560px) {
            .notes-chip-host { padding-left: 2rem; min-height: 38px; }
            .notes-filter-icon { left: 0.625rem; width: 12px; height: 12px; }
            .notes-chip-input { font-size: 0.6875rem; min-width: 60px; }
            .notes-chip { font-size: 0.5625rem; }
            .product-notes-filter select { font-size: 0.5625rem; padding: 0.5rem 1.5rem 0.5rem 0.625rem; min-height: 38px; }
        }

        /* Summary strip — count + active chips + clear */
        .product-summary {
            display: flex; align-items: center; justify-content: space-between;
            gap: 0.75rem; flex-wrap: wrap;
            margin: 0 0 1.25rem;
            padding: 0 0 0.875rem;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            font-size: 0.625rem; font-weight: 500;
            letter-spacing: 0.22em; text-transform: uppercase;
            color: rgba(0, 0, 0, 0.45);
            font-variant-numeric: tabular-nums;
        }
        @media (max-width: 560px) {
            .product-summary { gap: 0.5rem; font-size: 0.5625rem; letter-spacing: 0.18em; }
            .product-summary-count { flex: 0 0 100%; }
            .product-summary-chip { font-size: 0.5rem; padding: 0.2rem 0.5rem; }
        }
        .product-summary-count strong { color: #000; font-weight: 500; }
        .product-summary-chips {
            display: inline-flex; align-items: center; gap: 0.375rem; flex-wrap: wrap;
        }
        .product-summary-chip {
            display: inline-flex; align-items: center;
            padding: 0.25rem 0.625rem;
            background: rgba(0, 0, 0, 0.04);
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 999px;
            font-size: 0.5625rem;
            color: rgba(0, 0, 0, 0.65);
            letter-spacing: 0.18em;
            text-transform: none;
        }
        .product-summary-clear {
            background: transparent; border: none;
            padding: 0.25rem 0.5rem;
            font-family: inherit;
            font-size: 0.625rem; font-weight: 500;
            letter-spacing: 0.22em; text-transform: uppercase;
            color: rgba(0, 0, 0, 0.5);
            cursor: pointer;
            text-decoration: underline;
            text-underline-offset: 3px;
        }
        .product-summary-clear:hover { color: #000; }

        /* Empty-filter state */
        .product-empty-filter {
            text-align: center;
            padding: 3rem 1.5rem;
            border: 1px dashed rgba(0, 0, 0, 0.12);
            color: rgba(0, 0, 0, 0.55);
        }
        .product-empty-filter p { margin-bottom: 1rem; line-height: 1.7; }
        .product-empty-filter .product-summary-clear {
            text-decoration: none;
            background: #000;
            color: #fff;
            padding: 0 1.5rem;
            min-height: 40px;
            display: inline-flex; align-items: center;
            border-radius: 999px;
        }
        .product-empty-filter .product-summary-clear:hover { background: #1a1a1a; color: #fff; }
        .product-count {
            font-size: 0.625rem; font-weight: 500;
            letter-spacing: 0.25em; text-transform: uppercase;
            color: rgba(0, 0, 0, 0.45);
            font-variant-numeric: tabular-nums;
        }
        .product-count strong { color: #000; font-weight: 500; }

        .density-switcher {
            display: inline-flex;
            gap: 0;
            padding: 3px;
            background: rgba(0, 0, 0, 0.03);
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 999px;
            align-self: center;
        }
        .density-btn {
            display: inline-flex; align-items: center; justify-content: center;
            width: 38px; height: 34px;
            padding: 0;
            background: transparent;
            border: none;
            border-radius: 999px;
            color: rgba(0, 0, 0, 0.4);
            cursor: pointer;
            transition: color 0.2s ease, background 0.2s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .density-btn:hover { color: #000; }
        .density-btn:focus-visible {
            outline: 2px solid rgba(0, 0, 0, 0.4);
            outline-offset: 2px;
        }
        .density-btn.is-active {
            background: #fff;
            color: #000;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        }
        .density-btn svg { width: 14px; height: 14px; }

        /* Slightly compacter switcher on phones so it reads "control cluster"
           rather than "huge row". Still 44px tall tap target per button. */
        @media (max-width: 560px) {
            .density-switcher { padding: 2px; }
            .density-btn { width: 42px; height: 36px; }
            .density-btn svg { width: 13px; height: 13px; }
        }

        /* ── Product grid — driven by data-density on the grid root ─── */
        .product-grid {
            display: grid;
            transition: gap 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 0.75rem;
        }

        /* ── Micro density — image-only, maximum information density ──
           Hides the entire card body (brand/name/meta/stats) leaving only
           the product image + the action bar + selected-state ring. Great
           for rapid visual scanning of bottles when the user already knows
           what they're looking for. The card becomes a square tile. */
        .product-grid[data-density="micro"] {
            grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
            gap: 0.375rem;
        }
        .product-grid[data-density="micro"] .product-card-body { display: none; }
        .product-grid[data-density="micro"] .product-card-media { aspect-ratio: 1 / 1; }
        .product-grid[data-density="micro"] .product-card {
            border: 1px solid rgba(0, 0, 0, 0.04);
        }
        .product-grid[data-density="micro"] .product-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.35);
        }
        .product-grid[data-density="micro"] .product-card-badge {
            top: 0.3125rem; left: 0.3125rem;
            padding: 0.1875rem 0.375rem;
            font-size: 0.375rem;
            letter-spacing: 0.2em;
        }
        .product-grid[data-density="micro"] .product-card-state-badge {
            top: 0.3125rem; right: 0.3125rem;
            padding: 0.1875rem 0.375rem;
            font-size: 0.3125rem;
            letter-spacing: 0.18em;
        }
        .product-grid[data-density="micro"] .product-card-state-badge svg { width: 7px; height: 7px; }
        .product-grid[data-density="micro"] .product-card.is-picked .product-card-media::after {
            top: 0.25rem; right: 0.25rem;
            width: 18px; height: 18px;
            background-size: 10px;
            border-width: 1.5px;
        }
        .product-grid[data-density="micro"] .pc-quickview-btn {
            min-height: 28px;
            padding: 0 0.375rem;
            font-size: 0.4375rem;
            letter-spacing: 0.18em;
        }
        .product-grid[data-density="micro"] .pc-quickview-btn svg { width: 10px; height: 10px; }
        .product-grid[data-density="micro"] .pc-favorite { width: 28px; min-height: 28px; }
        .product-grid[data-density="micro"] .pc-favorite svg { width: 12px; height: 12px; }
        .product-grid[data-density="micro"] .pc-quickadd { width: 28px; min-height: 28px; }
        .product-grid[data-density="micro"] .pc-quickadd svg { width: 12px; height: 12px; }

        /* Density modes — desktop */
        .product-grid[data-density="compact"]     { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; }
        .product-grid[data-density="comfortable"] { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
        .product-grid[data-density="spacious"]    { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }

        /* Tablet */
        @media (max-width: 820px) {
            .product-grid[data-density="micro"]       { grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)); gap: 0.3125rem; }
            .product-grid[data-density="compact"]     { grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: 0.625rem; }
            .product-grid[data-density="comfortable"] { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.875rem; }
            .product-grid[data-density="spacious"]    { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; }
        }

        /* Phone */
        @media (max-width: 560px) {
            .product-toolbar { margin-bottom: 1.25rem; padding-bottom: 0.875rem; }
            .product-grid[data-density="micro"]       { grid-template-columns: repeat(auto-fill, minmax(65px, 1fr)); gap: 0.25rem; }
            .product-grid[data-density="compact"]     { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.5rem; }
            .product-grid[data-density="comfortable"] { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.625rem; }
            .product-grid[data-density="spacious"]    { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.875rem; }
        }

        /* Narrow phones */
        @media (max-width: 380px) {
            .product-grid[data-density="micro"]   { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.1875rem; }
            .product-grid[data-density="compact"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
        }

        /* ── Card content scales with density ───────────────── */
        .product-grid[data-density="compact"] .product-card-body {
            padding: 0.625rem 0.75rem 0.75rem;
            gap: 0.1875rem;
        }
        .product-grid[data-density="compact"] .product-card-brand {
            font-size: 0.5rem;
            letter-spacing: 0.22em;
        }
        .product-grid[data-density="compact"] .product-card-name {
            font-size: 0.8125rem;
            line-height: 1.3;
        }
        .product-grid[data-density="compact"] .product-card-meta {
            font-size: 0.5rem;
            letter-spacing: 0.16em;
            padding-top: 0.5rem;
        }
        .product-grid[data-density="compact"] .product-card-badge {
            top: 0.5rem; left: 0.5rem;
            padding: 0.25rem 0.5rem;
            font-size: 0.4375rem;
            letter-spacing: 0.22em;
        }

        .product-grid[data-density="spacious"] .product-card-body {
            padding: 1.375rem 1.375rem 1.5rem;
        }
        .product-grid[data-density="spacious"] .product-card-name {
            font-size: 1.0625rem;
        }

        .product-card {
            display: flex; flex-direction: column;
            background: #fff;
            border: 1px solid rgba(0, 0, 0, 0.06);
            text-decoration: none; color: #000;
            position: relative;
            overflow: hidden;
            transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                        box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
            will-change: transform, box-shadow;
        }
        .product-card:hover,
        .product-card:focus-within {
            border-color: rgba(0, 0, 0, 0.35);
            transform: translateY(-3px);
            box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.35);
        }

        /* Staggered scroll-reveal — OPT-IN. The hidden initial state only
           applies once JS adds [data-reveal] to the grid, so if the script
           never runs the catalog is always fully visible. JS adds .is-revealed
           per card (with a small JS-timed stagger) as cards enter the viewport,
           backed by a hard safety timeout. */
        .product-grid[data-reveal] .product-card {
            opacity: 0;
            transform: translateY(16px);
        }
        .product-grid[data-reveal] .product-card.is-revealed {
            opacity: 1;
            transform: none;
        }
        @media (prefers-reduced-motion: reduce) {
            .product-grid[data-reveal] .product-card {
                opacity: 1 !important;
                transform: none !important;
            }
        }

        .product-card-media {
            position: relative;
            aspect-ratio: 4 / 5;
            background: linear-gradient(180deg, #fafafa 0%, #f1f1f1 100%);
            overflow: hidden;
        }
        .product-card-media img {
            position: absolute; inset: 0;
            width: 100%; height: 100%;
            object-fit: cover;
            transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .product-card:hover .product-card-media img { transform: scale(1.04); }
        .product-card-media-empty {
            position: absolute; inset: 0;
            display: flex; align-items: center; justify-content: center;
            color: rgba(0,0,0,0.15);
            font-size: 0.5625rem; letter-spacing: 0.3em; text-transform: uppercase;
        }
        .product-card-badge {
            position: absolute;
            top: 0.75rem; left: 0.75rem;
            padding: 0.3125rem 0.625rem;
            background: #000; color: #fff;
            font-size: 0.5rem; font-weight: 500; letter-spacing: 0.3em;
            text-transform: uppercase;
            z-index: 1;
        }
        .product-card-badge.low-stock { background: #a06a00; }
        .product-card-badge.featured { background: #b89a4e; }

        .product-card-body {
            padding: 1.25rem 1.25rem 1.375rem;
            display: flex; flex-direction: column;
            gap: 0.375rem;
            flex-grow: 1;
        }
        @media (max-width: 560px) {
            .product-card-body { padding: 1rem; }
        }
        .product-card-brand {
            font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.28em;
            text-transform: uppercase; color: rgba(0,0,0,0.5);
        }
        .product-card-name {
            font-size: 1rem; font-weight: 300;
            letter-spacing: 0.015em;
            line-height: 1.35;
            color: #000;
        }
        .product-card-meta {
            margin-top: auto;
            padding-top: 0.875rem;
            display: flex; justify-content: space-between; align-items: baseline;
            gap: 0.5rem;
            font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.2em;
            text-transform: uppercase; color: rgba(0,0,0,0.5);
        }
        .product-card-arrow {
            font-size: 0.75rem; color: rgba(0,0,0,0.3);
            transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
        }
        .product-card:hover .product-card-arrow {
            transform: translateX(4px); color: #000;
        }

        /* ── Empty state ─────────────────────────────────────── */
        .collection-empty {
            text-align: center; padding: 4rem 1.5rem;
            border: 1px dashed rgba(0,0,0,0.15);
            max-width: 520px; margin: 0 auto;
        }
        .collection-empty p { margin-bottom: 1rem; color: rgba(0,0,0,0.55); }

        /* ── Closing section ─────────────────────────────────── */
        /* ── For fragrance lovers: editorial benefits row under the FAQ ── */
        .fl-section { max-width: 1120px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid rgba(0,0,0,0.08); }
        .fl-h2 { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(0,0,0,0.4); margin: 0 0 0.75rem; text-align: center; }
        .fl-lead { font-size: 0.9375rem; line-height: 1.7; font-weight: 300; color: rgba(0,0,0,0.6); text-align: center; max-width: 560px; margin: 0 auto clamp(1.75rem, 3.5vw, 2.75rem); text-wrap: pretty; }
        .fl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.75rem, 1.6vw, 1.1rem); }
        .fl-feature { display: flex; align-items: flex-start; gap: 1rem; padding: clamp(1.1rem, 2vw, 1.5rem); background: rgba(255,255,255,0.62); border: 1px solid rgba(0,0,0,0.07); border-radius: 16px; transition: transform 0.4s cubic-bezier(.16,1,.3,1), box-shadow 0.4s ease, border-color 0.3s ease; }
        @media (hover: hover) { .fl-feature:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(0,0,0,0.45); border-color: rgba(0,0,0,0.12); } }
        .fl-feature-ico { flex: none; width: 48px; height: 48px; object-fit: contain; }
        .fl-feature-text h3 { font-size: 0.95rem; font-weight: 500; letter-spacing: 0.01em; margin: 0 0 0.35rem; color: #000; }
        .fl-feature-text p { font-size: 0.84rem; line-height: 1.6; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0; }
        @media (max-width: 680px) { .fl-grid { grid-template-columns: 1fr; } .fl-feature { border-radius: 14px; } }

        /* ── Auto-curate docked button (collision-aware, product-grid only) ── */
        .fb-curate-dock { position: fixed; left: clamp(1rem, 2vw, 1.5rem); bottom: clamp(1rem, 2vw, 1.5rem); z-index: 399; display: inline-flex; align-items: center; gap: 0.5rem; height: 46px; padding: 0 1.1rem 0 0.9rem; background: #000; color: #fff; border: 0; border-radius: 999px; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.015em; text-decoration: none; box-shadow: 0 10px 30px -8px rgba(0,0,0,0.5); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.96); transition: opacity 0.4s cubic-bezier(.16,1,.3,1), transform 0.4s cubic-bezier(.16,1,.3,1), box-shadow 0.3s ease; -webkit-tap-highlight-color: transparent; }
        .fb-curate-dock.is-visible { opacity: 1; visibility: visible; transform: none; }
        .fb-curate-dock.fb-curate-hidden { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(12px) scale(0.96) !important; }
        @media (hover: hover) { .fb-curate-dock:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px rgba(0,0,0,0.6); } }
        .fb-curate-dock:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
        .fb-curate-dock svg { width: 17px; height: 17px; flex: none; }
        .fb-curate-dock-label { white-space: nowrap; }
        @media (prefers-reduced-motion: reduce) { .fb-curate-dock { transition: none; } }
        @media (max-width: 480px) { .fb-curate-dock { height: 44px; width: 44px; padding: 0; justify-content: center; } .fb-curate-dock-label { display: none; } }

        .collection-outro {
            max-width: 760px;
            margin: 5rem auto 0;
            padding: 3rem clamp(1rem, 3vw, 2rem);
            border-top: 1px solid rgba(0,0,0,0.08);
            text-align: center;
        }
        .collection-outro h2 {
            font-size: clamp(1.5rem, 3vw, 2rem);
            font-weight: 200; letter-spacing: 0.02em;
            margin-bottom: 1rem;
        }
        .collection-outro p {
            font-size: 0.9375rem; line-height: 1.75; color: rgba(0,0,0,0.6);
            font-weight: 300; max-width: 600px; margin: 0 auto 1.5rem;
        }
        .collection-outro .btn-primary {
            display: inline-block;
            padding: 0 2.25rem;
            background: #000; color: #fff;
            font-size: 0.6875rem; font-weight: 500;
            letter-spacing: 0.25em; text-transform: uppercase;
            min-height: 48px; line-height: 48px;
            text-decoration: none;
            transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                        box-shadow 0.3s ease;
        }
        .collection-outro .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 18px 36px -18px rgba(0,0,0,0.55);
        }

        /* Footer (minimal) */
        footer.page-footer {
            text-align: center; padding: 2.5rem 1rem 3rem;
            font-size: 0.625rem; letter-spacing: 0.25em; text-transform: uppercase;
            color: rgba(0,0,0,0.35);
            border-top: 1px solid rgba(0,0,0,0.04);
            margin-top: 4rem;
        }

        ::selection { background: rgba(0,0,0,0.08); color: #000; }

        /* ── Optional-box hint bar ──
           Reassures visitors that picking is additive, not required — builds
           conversion trust while also introducing the + button semantics. */
        .product-pickhint {
            display: flex;
            align-items: center;
            gap: 0.625rem;
            margin: 0 auto 1.25rem;
            max-width: 960px;
            padding: 0.75rem 1rem;
            background: rgba(184, 154, 78, 0.05);
            border: 1px solid rgba(184, 154, 78, 0.32);
            font-size: 0.8125rem;
            line-height: 1.55;
            color: rgba(0,0,0,0.7);
            font-weight: 300;
        }
        .product-pickhint svg { width: 14px; height: 14px; color: #b89a4e; flex: none; }
        .product-pickhint strong { color: #000; font-weight: 500; }
        @media (max-width: 560px) {
            .product-pickhint { font-size: 0.75rem; padding: 0.625rem 0.75rem; }
        }

        /* ───────────────────────────────────────────────────────────
           QUICK VIEW + QUICK ADD — per-card actions, state badges,
           modal overlay, and toast host. All interactions are scoped
           to the .product-card; the server renders initial state via
           data-picked / data-blacklisted attributes and JS flips them
           on successful mutations.
           ─────────────────────────────────────────────────────────── */

        /* Card is an <article>. The product-name <a.product-card-link> uses
           a "stretched link" ::before pseudo-element to make the entire card
           clickable via a single anchor — no nested interactive content, no
           double links, and buttons inside the media (Quick View / Quick Add)
           layer above the overlay via z-index so they intercept their own
           clicks without triggering navigation. */
        /* Card is now directly clickable (adds to cart). The name still
           renders as an <a> for SEO crawlability but JS prevents default
           and toggles cart instead. Quick View in the action bar is the
           route to the full product page. */
        .product-card { cursor: pointer; }
        .product-card-link {
            color: inherit;
            text-decoration: none;
        }
        .product-card-link:focus-visible {
            outline: 2px solid rgba(0,0,0,0.55);
            outline-offset: 3px;
            border-radius: 2px;
        }

        /* ── Selected state (in cart) ──────────────────────────
           Clean modern selection indicator: green inset ring around the
           entire card + a small circular check badge top-right of the
           media. Replaces the old "In Your Box" text badge with a
           purely visual treatment that reads at a glance in a dense grid.
           Inspired by Apple Photos / Spotify selection UX. */
        .product-card.is-picked {
            box-shadow: inset 0 0 0 2.5px #1a6b2a;
        }
        .product-card.is-picked:hover,
        .product-card.is-picked:focus-within {
            box-shadow: inset 0 0 0 2.5px #1a6b2a, 0 24px 48px -28px rgba(0, 0, 0, 0.35);
        }
        .product-card.is-picked .product-card-media::after {
            content: '';
            position: absolute;
            top: 0.625rem; right: 0.625rem;
            width: 26px; height: 26px;
            background: #1a6b2a;
            border: 2px solid #fff;
            border-radius: 50%;
            z-index: 4;
            pointer-events: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 13 10 18 19 7'/%3E%3C/svg%3E");
            background-size: 14px;
            background-repeat: no-repeat;
            background-position: center;
            animation: fb-check-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        @keyframes fb-check-pop {
            0%   { transform: scale(0); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }
        .product-grid[data-density="compact"] .product-card.is-picked .product-card-media::after {
            top: 0.4375rem; right: 0.4375rem;
            width: 22px; height: 22px;
            background-size: 12px;
            border-width: 1.5px;
        }

        /* Blacklisted badge — kept as a text pill since the state needs
           more explanation than a simple icon can convey. */
        .product-card-state-badge {
            position: absolute;
            top: 0.75rem; right: 0.75rem;
            display: inline-flex; align-items: center;
            gap: 0.35rem;
            padding: 0.3125rem 0.625rem;
            color: #fff;
            font-size: 0.5rem;
            font-weight: 500;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            z-index: 2;
            pointer-events: none;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            background: rgba(30, 30, 30, 0.92);
        }
        .product-card-state-badge svg { width: 10px; height: 10px; flex: none; }
        .product-grid[data-density="compact"] .product-card-state-badge {
            top: 0.5rem; right: 0.5rem;
            padding: 0.25rem 0.5rem;
            font-size: 0.4375rem;
            letter-spacing: 0.22em;
        }
        .product-grid[data-density="compact"] .product-card-state-badge svg { width: 8px; height: 8px; }

        /* Visual treatment for blacklisted cards */
        .product-card.is-blacklisted .product-card-media img { filter: grayscale(0.6) brightness(0.92); }
        .product-card.is-blacklisted:hover .product-card-media img { filter: none; }

        /* ── Quick action bar (bottom edge of media, full-width) ──
           Modern premium e-commerce pattern (Nordstrom / NET-A-PORTER):
           a horizontal bar with a labeled "QUICK VIEW" primary action
           and a compact quick-add icon button on the right. Slides up
           from below on hover (desktop / pointer) and sits persistently
           visible on touch devices. Lives INSIDE the .product-card-media
           so it overlays the bottom of the image without affecting card
           height — same render footprint, just a layered affordance. */
        .product-card-actions {
            position: absolute;
            left: 0; right: 0; bottom: 0;
            display: flex;
            align-items: stretch;
            background: rgba(255, 255, 255, 0.96);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-top: 1px solid rgba(0, 0, 0, 0.05);
            z-index: 3;
            transform: translateY(100%);
            transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
        }
        /* Desktop (pointer with hover): slide up on hover / focus-within */
        @media (hover: hover) and (pointer: fine) {
            .product-card:hover .product-card-actions,
            .product-card:focus-within .product-card-actions {
                transform: translateY(0);
            }
        }
        /* Touch (no hover): always visible. Keeping the bar at rest
           removes the hover-teaser discoverability problem on phones. */
        @media (hover: none), (pointer: coarse) {
            .product-card-actions { transform: translateY(0); }
        }

        .pc-quickview-btn {
            flex: 1 1 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            min-height: 42px;
            padding: 0 0.875rem;
            background: transparent;
            border: 0;
            color: #000;
            font-family: inherit;
            font-size: 0.625rem;
            font-weight: 500;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            cursor: pointer;
            transition: background-color 0.2s ease, color 0.2s ease;
            white-space: nowrap;
            overflow: hidden;
        }
        .pc-quickview-btn svg { width: 14px; height: 14px; flex: none; opacity: 0.75; transition: opacity 0.2s ease; }
        .pc-quickview-btn:hover,
        .pc-quickview-btn:focus-visible {
            background: #000;
            color: #fff;
            outline: none;
        }
        .pc-quickview-btn:hover svg,
        .pc-quickview-btn:focus-visible svg { opacity: 1; }
        .pc-quickview-btn:focus-visible {
            box-shadow: inset 0 0 0 2px #fff;
        }

        .pc-quickadd {
            flex: none;
            width: 44px;
            min-height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: 0;
            border-left: 1px solid rgba(0, 0, 0, 0.07);
            color: #000;
            cursor: pointer;
            transition: background-color 0.2s ease, color 0.2s ease;
        }
        .pc-quickadd svg { width: 16px; height: 16px; }
        .pc-quickadd:hover,
        .pc-quickadd:focus-visible {
            background: #000;
            color: #fff;
            outline: none;
        }
        .pc-quickadd:focus-visible { box-shadow: inset 0 0 0 2px #fff; }
        .pc-quickadd[disabled] {
            cursor: not-allowed;
            color: rgba(0,0,0,0.35);
        }
        .pc-quickadd[disabled]:hover { background: transparent; color: rgba(0,0,0,0.35); }

        /* Picked state — persistent green confirming "in your box" */
        .pc-quickadd[data-state="picked"]:not([disabled]) {
            background: #1a6b2a;
            color: #fff;
            border-left-color: #1a6b2a;
        }
        .pc-quickadd[data-state="picked"]:not([disabled]):hover {
            background: #0f4a1d;
        }

        /* Quick Add icon swap by state (unpicked / picked / blacklisted / full) */
        .pc-quickadd .pc-ico { display: none; }
        .pc-quickadd[data-state="unpicked"]:not([disabled]) .pc-ico-add   { display: block; }
        .pc-quickadd[data-state="picked"]:not([disabled])   .pc-ico-check { display: block; }
        .pc-quickadd[disabled] .pc-ico-block { display: block; }
        .pc-quickadd.is-loading .pc-ico { display: none; }
        .pc-quickadd.is-loading::after {
            content: '';
            width: 14px; height: 14px;
            border-radius: 999px;
            border: 1.5px solid currentColor;
            border-top-color: transparent;
            animation: fb-spin 0.65s linear infinite;
        }
        @keyframes fb-spin { to { transform: rotate(1turn); } }

        /* ── Density-aware sizing ──
           Compact cards (≥160px wide): shrink label, keep bar usable.
           Below that, hide the label text so only the eye icon remains
           — cards become tiny on phones and the text won't fit. */
        .product-grid[data-density="compact"] .pc-quickview-btn {
            min-height: 36px;
            padding: 0 0.625rem;
            font-size: 0.5625rem;
            letter-spacing: 0.22em;
            gap: 0.375rem;
        }
        .product-grid[data-density="compact"] .pc-quickview-btn svg { width: 12px; height: 12px; }
        .product-grid[data-density="compact"] .pc-quickadd { width: 36px; min-height: 36px; }
        .product-grid[data-density="compact"] .pc-quickadd svg { width: 14px; height: 14px; }

        .product-grid[data-density="spacious"] .pc-quickview-btn {
            min-height: 48px;
            font-size: 0.6875rem;
            letter-spacing: 0.3em;
        }
        .product-grid[data-density="spacious"] .pc-quickadd { width: 50px; min-height: 48px; }

        /* ── Favorite heart button (between Quick View and Quick Add) ── */
        .pc-favorite {
            flex: none;
            width: 44px;
            min-height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: 0;
            border-left: 1px solid rgba(0, 0, 0, 0.07);
            color: #000;
            cursor: pointer;
            transition: background-color 0.2s ease, color 0.2s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .pc-favorite svg { width: 17px; height: 17px; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
        .pc-favorite .pc-heart-filled { display: none; }
        .pc-favorite[data-state="on"] .pc-heart-outline { display: none; }
        .pc-favorite[data-state="on"] .pc-heart-filled  { display: block; color: #c8334b; }
        .pc-favorite:hover,
        .pc-favorite:focus-visible {
            background: #000;
            color: #fff;
            outline: none;
        }
        .pc-favorite:focus-visible { box-shadow: inset 0 0 0 2px #fff; }
        .pc-favorite[data-state="on"]:hover .pc-heart-filled { color: #ff9db0; }
        .pc-favorite.is-pulse svg { animation: fb-heart-pulse 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
        @keyframes fb-heart-pulse {
            0%   { transform: scale(1); }
            45%  { transform: scale(1.35); }
            100% { transform: scale(1); }
        }
        .product-grid[data-density="compact"]  .pc-favorite { width: 36px; min-height: 36px; }
        .product-grid[data-density="compact"]  .pc-favorite svg { width: 15px; height: 15px; }
        .product-grid[data-density="spacious"] .pc-favorite { width: 50px; min-height: 48px; }

        /* ── Community stats row (likes / dislikes) ──
           Sits between the name and the tier·gender meta line. Renders only
           when there are real community reactions (zero-state is clean — no
           "0 likes" clutter for launch-day products). Highlights the user's
           own vote with a tinted pill. */
        .product-card-stats {
            display: inline-flex;
            align-items: center;
            gap: 0.625rem;
            font-size: 0.625rem;
            font-weight: 500;
            letter-spacing: 0.08em;
            color: rgba(0, 0, 0, 0.55);
            margin-top: 0.125rem;
            font-variant-numeric: tabular-nums;
        }
        .pc-stat {
            display: inline-flex;
            align-items: center;
            gap: 0.3125rem;
        }
        .pc-stat svg { width: 11px; height: 11px; opacity: 0.7; }
        .pc-stat-like.is-mine    { color: #1a6b2a; }
        .pc-stat-dislike.is-mine { color: #7a1f1f; }
        .pc-stat.is-mine svg { opacity: 1; }
        .product-grid[data-density="compact"] .product-card-stats { font-size: 0.5625rem; gap: 0.5rem; }
        .product-grid[data-density="compact"] .pc-stat svg { width: 10px; height: 10px; }

        /* Desktop (pointer: fine + ≥540px): hide the eye icon and lean on
           the "QUICK VIEW" wordmark alone — avoids cramped action bars on
           packed compact grids where the bar already competes with the
           heart and + buttons. Touch screens still show icon. */
        @media (hover: hover) and (pointer: fine) and (min-width: 541px) {
            .pc-quickview-btn svg { display: none; }
            .pc-quickview-btn { gap: 0; }
        }

        /* Micro mode: hide the label text entirely — eye icon only */
        .product-grid[data-density="micro"] .pc-quickview-btn .pc-qv-label { display: none; }
        .product-grid[data-density="micro"] .pc-quickview-btn { gap: 0; padding: 0 0.25rem; }
        .product-grid[data-density="micro"] .pc-quickview-btn svg { display: block !important; }

        /* Very narrow cards: hide the "Quick View" text so only the eye
           icon shows (still with proper aria-label for screen readers). */
        @media (max-width: 540px) {
            .product-grid[data-density="compact"] .pc-quickview-btn .pc-qv-label { display: none; }
            .product-grid[data-density="compact"] .pc-quickview-btn { gap: 0; }
        }
        @media (max-width: 380px) {
            .pc-quickview-btn .pc-qv-label { display: none; }
            .pc-quickview-btn { gap: 0; padding: 0 0.5rem; }
        }

        /* ───────── Exclusive offerings ─────────
           Products flagged `exclusive` are rare / premium add-ons carrying a
           per-vial surcharge. They're treated as first-class in the catalog
           (still sortable, still filterable, still pickable) but receive a
           refined visual signature so shoppers instantly recognize them:
             · subtle gold top accent (inset box-shadow, no layout shift)
             · EXCLUSIVE badge replaces Featured/Low-Stock top-left
             · surcharge pill (e.g. "+$10 / VIAL") sits between name & meta
           The gold palette is shared with the Featured badge for consistency.
         */
        .product-card.is-exclusive {
            box-shadow: inset 0 2px 0 0 #b89a4e;
        }
        .product-card.is-exclusive:hover,
        .product-card.is-exclusive:focus-within {
            box-shadow: inset 0 2px 0 0 #b89a4e, 0 24px 48px -28px rgba(0, 0, 0, 0.35);
        }
        .product-card-badge.exclusive {
            background: linear-gradient(135deg, #14120d 0%, #1e1a11 100%);
            color: #d8c38a;
            border: 1px solid rgba(216, 195, 138, 0.55);
            letter-spacing: 0.34em;
        }
        .product-card-surcharge {
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
            align-self: flex-start;
            padding: 0.25rem 0.5625rem;
            background: rgba(184, 154, 78, 0.08);
            border: 1px solid rgba(184, 154, 78, 0.42);
            color: #7a6222;
            font-size: 0.5rem;
            font-weight: 500;
            letter-spacing: 0.24em;
            text-transform: uppercase;
            margin-top: 0.125rem;
            line-height: 1;
            min-height: 18px;
        }
        .product-card-surcharge svg { width: 9px; height: 9px; flex: none; opacity: 0.7; }
        .product-grid[data-density="compact"] .product-card-surcharge {
            font-size: 0.4375rem;
            padding: 0.1875rem 0.4375rem;
            letter-spacing: 0.2em;
            gap: 0.25rem;
        }
        .product-grid[data-density="compact"] .product-card-surcharge svg { width: 8px; height: 8px; }

        /* ───────── Quick View modal ─────────
           Smooth, premium fade-in: the modal always lives in the DOM (no
           display:none toggle) so opacity/transform transitions actually
           fire. Visibility is delayed off on close to let the fade finish
           before the element becomes unclickable. Panel entry is staggered
           behind the backdrop by 60ms for a refined layered reveal. */
        .fb-quickview {
            position: fixed; inset: 0;
            z-index: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: clamp(0.5rem, 2vw, 1.5rem);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                        visibility 0s linear 0.32s;
        }
        .fb-quickview.is-open {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                        visibility 0s linear 0s;
        }

        .fb-quickview-backdrop {
            position: absolute; inset: 0;
            background: rgba(10, 10, 10, 0.72);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            opacity: 0;
            transition: opacity 0.36s cubic-bezier(0.16, 1, 0.3, 1),
                        backdrop-filter 0.36s ease;
        }
        .fb-quickview.is-open .fb-quickview-backdrop { opacity: 1; }

        .fb-quickview-panel {
            position: relative;
            background: #fff;
            width: 100%;
            max-width: 900px;
            max-height: calc(100vh - clamp(1rem, 4vw, 3rem));
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            box-shadow: 0 40px 100px -30px rgba(0,0,0,0.55);
            transform: translateY(24px) scale(0.965);
            opacity: 0;
            transition: transform 0.52s cubic-bezier(0.16, 1, 0.3, 1) 0.06s,
                        opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1) 0.06s;
            will-change: transform, opacity;
        }
        .fb-quickview.is-open .fb-quickview-panel {
            transform: translateY(0) scale(1);
            opacity: 1;
        }

        @media (prefers-reduced-motion: reduce) {
            .fb-quickview,
            .fb-quickview-backdrop,
            .fb-quickview-panel { transition-duration: 0.12s; }
            .fb-quickview-panel { transform: none; }
        }

        .fb-quickview-close {
            position: absolute;
            top: 0.75rem; right: 0.75rem;
            width: 40px; height: 40px;
            display: inline-flex; align-items: center; justify-content: center;
            background: rgba(255,255,255,0.94);
            border: 1px solid rgba(0,0,0,0.08);
            border-radius: 999px;
            color: #000;
            cursor: pointer;
            z-index: 2;
            transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
        }
        .fb-quickview-close:hover { background: #000; color: #fff; transform: rotate(90deg); }
        .fb-quickview-close:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
        .fb-quickview-close svg { width: 18px; height: 18px; }

        /* ── Quick View grid system ──
           Desktop: two-column with stretch alignment so the media column
           fills the body column's height (no awkward dead space beside a
           tall body). Slightly narrower media column (45/55 split) gives
           the content room to breathe while still feeling balanced.
           Mobile: single column, media gets a strong portrait hero zone. */
        .fb-quickview-grid {
            display: grid;
            grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
            align-items: stretch;
            min-height: 520px;
        }
        @media (max-width: 720px) {
            .fb-quickview-grid {
                grid-template-columns: 1fr;
                min-height: 0;
            }
        }

        /* ── Media canvas ──
           A controlled flex stage that centers the bottle in a generous
           neutral frame. On desktop the media stretches to match the body
           via grid stretch + min-height floor. On mobile it becomes a
           dedicated 4:5 hero zone with proper presence (no max-height
           collapse). The image itself uses bounded auto dimensions so its
           natural aspect ratio is preserved without distortion. */
        .fb-quickview-media {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(180deg, #fafafa 0%, #f1f1f1 100%);
            overflow: hidden;
            padding: clamp(2rem, 4vw, 3.25rem);
            min-height: 100%;
        }
        @media (max-width: 720px) {
            .fb-quickview-media {
                aspect-ratio: 4 / 5;
                min-height: 0;
                padding: clamp(1.75rem, 7vw, 2.75rem);
                /* Hard cap so the hero never eats more than ~half the
                   viewport height on tall phones — leaves room for the
                   content section below without scrolling. */
                max-height: min(65vh, 540px);
            }
        }

        /* The bottle. Bounded by container, never distorts, scales up
           gracefully to fill premium presence without overflowing. */
        .fb-quickview-media img {
            display: block;
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            opacity: 0;
            transition: opacity 0.35s ease;
            filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.08));
        }
        .fb-quickview-media img.is-loaded { opacity: 1; }

        .fb-quickview-media-empty {
            color: rgba(0,0,0,0.18);
            font-size: 0.625rem;
            letter-spacing: 0.3em;
            text-transform: uppercase;
        }

        .fb-quickview-body {
            padding: clamp(1.5rem, 3vw, 2.5rem);
            display: flex; flex-direction: column;
            gap: 0.875rem;
        }
        .fb-quickview-brand {
            font-size: 0.625rem;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: rgba(0,0,0,0.55);
            font-weight: 500;
        }
        .fb-quickview-name {
            font-size: clamp(1.5rem, 3vw, 1.875rem);
            font-weight: 200;
            letter-spacing: 0.01em;
            line-height: 1.2;
            margin: 0;
        }
        .fb-quickview-meta {
            font-size: 0.625rem;
            font-weight: 500;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            color: rgba(0,0,0,0.55);
        }
        .fb-quickview-sub {
            font-size: 0.9375rem;
            line-height: 1.6;
            color: rgba(0,0,0,0.72);
            font-weight: 300;
        }
        .fb-quickview-desc {
            font-size: 0.875rem;
            line-height: 1.7;
            color: rgba(0,0,0,0.62);
            font-weight: 300;
            max-height: 9.5rem;
            overflow: hidden;
            position: relative;
        }

        .fb-quickview-exclusive {
            position: relative;
            padding: 1rem 1.125rem;
            background: linear-gradient(135deg, #14120d 0%, #1e1a11 100%);
            color: #e9d8a6;
            border: 1px solid rgba(216, 195, 138, 0.35);
            margin-top: 0.25rem;
        }
        .fb-qv-excl-eyebrow {
            display: block;
            font-size: 0.5625rem;
            font-weight: 500;
            letter-spacing: 0.34em;
            text-transform: uppercase;
            color: #d8c38a;
            margin-bottom: 0.375rem;
        }
        .fb-qv-excl-body {
            font-size: 0.8125rem;
            line-height: 1.5;
            color: #efe4c5;
            font-weight: 300;
        }
        .fb-qv-excl-body strong {
            color: #f6e8bb;
            font-weight: 500;
            letter-spacing: 0.02em;
        }

        .fb-quickview-notes {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.875rem;
            padding: 0.875rem 0;
            border-top: 1px solid rgba(0,0,0,0.08);
        }
        @media (max-width: 480px) { .fb-quickview-notes { grid-template-columns: 1fr; gap: 0.5rem; } }
        .fb-qn-label {
            font-size: 0.5625rem;
            letter-spacing: 0.24em;
            text-transform: uppercase;
            color: rgba(0,0,0,0.45);
            margin-bottom: 0.25rem;
        }
        .fb-qn-val {
            font-size: 0.8125rem;
            line-height: 1.5;
            color: rgba(0,0,0,0.72);
            font-weight: 300;
        }

        /* CTA row inside the modal — built dynamically from JSON state */
        .fb-quickview-cta-row {
            display: flex; flex-wrap: wrap; align-items: center;
            gap: 0.75rem;
            margin-top: 0.375rem;
        }

        /* Reaction strip (like / dislike / favorite) inside the modal.
           Mirrors the compact pill-style buttons used elsewhere on the
           site — low visual weight, high utility. Buttons disable with
           a lock icon + tooltip when the user isn't purchase-qualified. */
        .fb-quickview-reactions {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.625rem;
            padding-top: 0.625rem;
            border-top: 1px solid rgba(0,0,0,0.08);
        }
        .fb-qv-react {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0 0.875rem;
            min-height: 36px;
            background: #fff;
            color: #000;
            border: 1px solid rgba(0,0,0,0.14);
            font-family: inherit;
            font-size: 0.75rem;
            font-weight: 500;
            letter-spacing: 0.05em;
            cursor: pointer;
            font-variant-numeric: tabular-nums;
            transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
        }
        .fb-qv-react svg { width: 14px; height: 14px; }
        .fb-qv-react:hover:not([disabled]):not(.is-active) { background: #000; color: #fff; border-color: #000; }
        .fb-qv-react[disabled] {
            cursor: not-allowed;
            color: rgba(0,0,0,0.4);
            background: rgba(0,0,0,0.03);
        }
        .fb-qv-react.is-active.fb-qv-react-like    { background: #1a6b2a; color: #fff; border-color: #1a6b2a; }
        .fb-qv-react.is-active.fb-qv-react-dislike { background: #7a1f1f; color: #fff; border-color: #7a1f1f; }
        .fb-qv-react.fb-qv-react-fav {
            margin-left: auto; /* push favorite to the right */
        }
        .fb-qv-react.fb-qv-react-fav.is-active {
            background: #fff;
            color: #c8334b;
            border-color: #c8334b;
        }
        .fb-qv-react.fb-qv-react-fav.is-active svg { fill: currentColor; }
        .fb-qv-react.is-loading { pointer-events: none; opacity: 0.6; }
        .fb-qv-lock {
            font-size: 0.6875rem;
            color: rgba(0,0,0,0.5);
            padding: 0 0.25rem;
        }
        @media (max-width: 480px) {
            .fb-qv-react.fb-qv-react-fav { margin-left: 0; }
        }
        .fb-qv-cta {
            display: inline-flex; align-items: center; gap: 0.5rem;
            padding: 0 1.5rem;
            min-height: 46px;
            background: #000; color: #fff;
            border: 1px solid #000;
            font-size: 0.6875rem; font-weight: 500;
            letter-spacing: 0.24em; text-transform: uppercase;
            text-decoration: none;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.22s ease, background-color 0.18s ease, color 0.18s ease;
        }
        .fb-qv-cta:hover:not([disabled]) { transform: translateY(-2px); box-shadow: 0 16px 32px -18px rgba(0,0,0,0.5); }
        .fb-qv-cta[data-state="picked"] { background: #1a6b2a; border-color: #1a6b2a; }
        .fb-qv-cta[data-state="picked"]:hover:not([disabled]) { background: #0f4a1d; border-color: #0f4a1d; }
        .fb-qv-cta[disabled] { opacity: 0.6; cursor: not-allowed; }
        .fb-qv-cta.is-loading { pointer-events: none; opacity: 0.7; }
        .fb-qv-ghost {
            background: transparent; color: #000;
            border: 1px solid rgba(0,0,0,0.18);
        }
        .fb-qv-ghost:hover:not([disabled]) { background: #000; color: #fff; border-color: #000; }
        .fb-qv-ghost.is-active { background: rgba(30,30,30,0.08); color: #000; }
        .fb-qv-counter {
            font-size: 0.5625rem;
            letter-spacing: 0.24em;
            text-transform: uppercase;
            color: rgba(0,0,0,0.5);
        }
        .fb-qv-counter strong { color: #000; font-weight: 500; }

        .fb-quickview-link {
            display: inline-flex; align-items: center; gap: 0.4rem;
            align-self: flex-start;
            margin-top: 0.5rem;
            font-size: 0.6875rem;
            font-weight: 500;
            letter-spacing: 0.24em;
            text-transform: uppercase;
            color: rgba(0,0,0,0.7);
            text-decoration: none;
            border-bottom: 1px solid rgba(0,0,0,0.25);
            padding-bottom: 2px;
            transition: color 0.18s ease, border-color 0.18s ease;
        }
        .fb-quickview-link:hover { color: #000; border-color: #000; }

        /* Loading + error states for modal body */
        .fb-quickview-panel.is-loading .fb-quickview-body > *:not(.fb-quickview-skel) { visibility: hidden; }
        .fb-quickview-skel {
            position: absolute; inset: 0;
            display: none;
            align-items: center; justify-content: center;
            color: rgba(0,0,0,0.4);
            font-size: 0.625rem; letter-spacing: 0.3em; text-transform: uppercase;
        }
        .fb-quickview-panel.is-loading .fb-quickview-skel,
        .fb-quickview-panel.is-error   .fb-quickview-skel { display: flex; }

        /* Body scroll lock when modal is open */
        body.fb-modal-open { overflow: hidden; }

        /* ── Toast host (bottom-centre, flash messages) ── */
        .fb-toast-host {
            position: fixed;
            bottom: clamp(1rem, 3vw, 2rem);
            left: 50%;
            transform: translateX(-50%);
            display: flex; flex-direction: column;
            gap: 0.5rem;
            z-index: 600;
            pointer-events: none;
        }
        .fb-toast {
            background: #0f0f0f;
            color: #fff;
            padding: 0.875rem 1.25rem;
            font-size: 0.75rem;
            letter-spacing: 0.04em;
            box-shadow: 0 18px 40px -16px rgba(0,0,0,0.5);
            transform: translateY(8px);
            opacity: 0;
            transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
            pointer-events: auto;
            max-width: 90vw;
        }
        .fb-toast.is-visible { opacity: 1; transform: translateY(0); }
        .fb-toast.is-error { background: #7a1f1f; }

        /* (mini-cart popup removed — cart dock drawer now handles the
           full cart view on add, showing all items vertically) */

/* ── Shared collection FAQ styles (landing parity, used on pre-order) ── */
        .collection-faq {
            max-width: 1120px; margin: 0 auto clamp(2.5rem, 5vw, 4rem);
            padding-top: clamp(2rem, 4vw, 3rem);
            border-top: 1px solid rgba(0,0,0,0.08);
        }
        .collection-faq-title {
            font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.3em;
            text-transform: uppercase; color: rgba(0,0,0,0.4);
            margin: 0 0 1.5rem; text-align: center;
        }
        .collection-faq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
        /* Desktop/tablet: static cards (details kept open via grid + content-visibility) */
        .collection-faq-item { border: 0; }
        .collection-faq-item > summary { list-style: none; display: flex; align-items: flex-start; gap: 0.75rem; outline: none; margin: 0 0 0.55rem; cursor: default; }
        .collection-faq-item > summary::-webkit-details-marker { display: none; }
        .collection-faq-item > summary::marker { content: ''; }
        .collection-faq-q { flex: 1 1 auto; min-width: 0; font-size: 0.9375rem; font-weight: 500; color: #000; margin: 0; letter-spacing: 0.01em; line-height: 1.35; }
        .collection-faq-ico { display: none; }
        /* Desktop: quick-answer chip on the right of the question (scan without opening) */
        .collection-faq-hint { display: inline-flex; align-items: center; flex: 0 0 auto; margin-top: 0.1rem; padding: 0.22rem 0.62rem; background: rgba(0,0,0,0.045); border: 1px solid rgba(0,0,0,0.06); border-radius: 999px; font-size: 0.625rem; font-weight: 500; letter-spacing: 0.04em; color: rgba(0,0,0,0.5); white-space: nowrap; }
        .collection-faq-body { display: grid; grid-template-rows: 1fr; overflow: hidden; }
        .collection-faq-body-inner { min-height: 0; }
        .collection-faq-item p { font-size: 0.875rem; font-weight: 300; line-height: 1.6; color: rgba(0,0,0,0.6); margin: 0; }
        @supports selector(::details-content) { .collection-faq-item::details-content { content-visibility: visible; } }

        /* ── Hero/FAQ responsive ── */
        @media (max-width: 900px) {
            .collection-hero {
                grid-template-columns: 1fr; grid-template-areas: "copy" "visual";
                text-align: center; row-gap: 1.75rem;
            }
            .collection-hero-copy { display: flex; flex-direction: column; align-items: center; }
            .collection-lede { max-width: 38rem; }
            .collection-hero-cta { justify-content: center; }
            .collection-stats { justify-content: center; }
            .collection-hero-visual { max-width: 340px; margin: 0 auto; }
            .collection-faq-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 560px) {
            /* Mobile: compact accordion (tap to expand), pure CSS via native <details> */
            .collection-faq-grid { grid-template-columns: 1fr; gap: 0; }
            .collection-faq-item { border-bottom: 1px solid rgba(0,0,0,0.08); }
            .collection-faq-item:first-of-type { border-top: 1px solid rgba(0,0,0,0.08); }
            .collection-faq-item > summary { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; padding: 1.05rem 0; margin: 0; -webkit-tap-highlight-color: transparent; }
            .collection-faq-q { flex: 1 1 auto; min-width: 0; display: block; font-weight: 400; margin: 0; }
            .collection-faq-hint { display: block; flex: 0 0 auto; font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.05em; color: rgba(0,0,0,0.34); white-space: nowrap; text-align: right; background: none; border: 0; padding: 0; border-radius: 0; margin-top: 0; }
            .collection-faq-ico { display: block; position: relative; flex: 0 0 auto; width: 13px; height: 13px; transition: transform 0.35s cubic-bezier(.16,1,.3,1); }
            .collection-faq-ico::before, .collection-faq-ico::after { content: ''; position: absolute; background: #000; transition: transform 0.35s cubic-bezier(.16,1,.3,1), opacity 0.35s ease; }
            .collection-faq-ico::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
            .collection-faq-ico::after { top: 0; left: 50%; width: 1px; height: 100%; transform: translateX(-50%); }
            .collection-faq-item[open] .collection-faq-ico::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
            .collection-faq-body { grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.42s cubic-bezier(.16,1,.3,1), opacity 0.3s ease; }
            .collection-faq-item[open] .collection-faq-body { grid-template-rows: 1fr; opacity: 1; }
            .collection-faq-body-inner { padding: 0 0 1.05rem; }
            .collection-faq-item p { line-height: 1.75; }
        }
        @media (prefers-reduced-motion: reduce) {
            .collection-faq-body, .collection-faq-ico, .collection-faq-ico::before, .collection-faq-ico::after { transition: none; }
        }