/* == Layout CSS (extracted from Block 1) == */

ading);
}


        /* ════════════════════════════════════════════════════════
           GLOBAL TYPOGRAPHY — 100% driven by theme tokens.
           Colors: ONLY primary/secondary/tertiary + white/grey/black.
           Fonts : ONLY --theme-font-heading / --theme-font-body.
           ════════════════════════════════════════════════════════ */
        html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
        html, body {
            font-family: var(--theme-font-body);
            font-size: var(--theme-base-font-size, 14px);
            font-weight: 500;
            line-height: 1.5;
            -webkit-font-smoothing:antialiased;
            -moz-osx-font-smoothing:grayscale;
            font-feature-settings:'kern','liga','calt';
            text-rendering:optimizeLegibility;
            color: var(--theme-neutral-black);
            background: var(--theme-surface-bg);
        }

        /* Display headings — heading font from theme */
        h1, h2, h3, h4, h5, h6,
        .font-serif, .font-display {
            font-family: var(--theme-font-heading);
            font-weight: var(--theme-heading-weight, 700);
            color: var(--theme-primary-color);
            letter-spacing:-0.02em;
            line-height:1.15;
            margin:0;
        }
        h1 { font-size:clamp(28px,3.6vw,48px); font-weight:900; letter-spacing:-0.022em; }
        h2 { font-size:clamp(22px,2.6vw,34px); font-weight:900; letter-spacing:-0.018em; }
        h3 { font-size:clamp(18px,1.8vw,22px); font-weight:800; }
        h4 { font-size:clamp(15px,1.3vw,17px); font-weight:800; }

        /* All form controls inherit body font from theme */
        input, textarea, select, button {
            font-family: var(--theme-font-body);
            font-size: var(--theme-base-font-size, 14px);
            font-weight: 500;
            line-height: 1.3;
        }
        input::placeholder, textarea::placeholder { font-weight:400; color: var(--theme-surface-muted); }

        /* Eyebrow / label — uses secondary accent */
        .ddf-eyebrow, .lbl {
            font-family: var(--theme-font-body);
            font-size:11px;
            font-weight:800;
            letter-spacing:2px;
            text-transform:uppercase;
            color: var(--theme-secondary-color);
        }

        /* Numeric tabular alignment for prices */
        .ddf-price, .mc-item-price, .pc-price, .pc-mrp, .cu-rail-cnt, .bh-cnt,
        .ddf-card-ddf-price {
            font-variant-numeric:tabular-nums;
        }

        /* Paragraph defaults */
        p { color: var(--theme-surface-muted); line-height:1.6; margin:0; font-weight:500; }
        a { color: inherit; text-decoration: none; }

        /* ════════════════════════════════════════════════════════
           HEADER LAYOUT — 3 columns: Logo | Center (Terminal+Allowance+Search) | Actions
           Height bumped +30% then again +20% (78 → 102 → 122px).
           ════════════════════════════════════════════════════════ */
        .ddf-header-grid {
            display:grid;
            grid-template-columns: 1fr auto 1fr;
            align-items:center;
            gap:18px;
            height:120px;
            padding:14px 0;
            box-sizing:border-box;
        }
        .ddf-header-left   { display:flex; align-items:center; justify-content:flex-start; min-width:0; }
        .ddf-header-pills  { display:flex; align-items:center; gap:8px; min-width:0; }
        .ddf-header-center {
            display:flex; align-items:center; justify-content:center;
            gap:10px; min-width:0;
        }
        .ddf-header-right  { display:flex; align-items:center; justify-content:flex-end; gap:4px; min-width:0; }
        /* Search form sits inside the centered cluster — give it a sensible, bounded width */
        .ddf-header-center .ddf-search-form { width:clamp(260px, 34vw, 420px); }

        /* Logo block */
        .ddf-logo-wrap {
            display:flex; align-items:center; gap:14px;
            text-decoration:none;
            padding:8px 0;
        }
        .ddf-logo-wrap img { height:76px; object-fit:contain; transition:opacity .2s, transform .2s; }
        .ddf-logo-wrap:hover img { opacity:.88; }

        /* Search (centered) — refined: 46px tall, gold focus halo, navy submit */
        .ddf-search-form { width:100%; position:relative; }
        .ddf-search-input {
            width:100%; height:46px;
            padding:0 132px 0 46px;     /* room for voice + snap + submit on right */
            border:1.5px solid var(--theme-surface-edge);
            border-radius:12px;
            font-size:13.5px;
            font-weight:500;
            background: var(--theme-surface-bg);
            color: var(--theme-neutral-black);
            outline:none;
            transition:border-color .18s, background .18s, box-shadow .18s;
            box-sizing:border-box;
            letter-spacing:-0.003em;
        }
        .ddf-search-input::placeholder { color: var(--theme-surface-muted); font-weight:400; }
        .ddf-search-input:focus {
            border-color: var(--theme-tertiary-color);
            background: var(--theme-neutral-white);
            box-shadow:0 0 0 3px color-mix(in srgb, var(--theme-tertiary-color) 28%, transparent);
        }
        .ddf-search-icon {
            position:absolute; left:16px; top:50%; transform:translateY(-50%);
            font-size:19px; line-height:1; color: var(--theme-surface-muted); pointer-events:none;
            display:inline-flex;align-items:center;justify-content:center;
            -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
            text-rendering:geometricPrecision;
        }
        .ddf-search-btn {
            position:absolute; right:5px; top:5px;
            width:38px; height:38px;
            background: var(--theme-primary-color);
            color: var(--theme-neutral-white);
            border:none; border-radius:8px;
            display:flex; align-items:center; justify-content:center;
            cursor:pointer; transition:all .2s;
            -webkit-font-smoothing:antialiased;
            text-rendering:geometricPrecision;
        }
        .ddf-search-btn:hover {
            background: color-mix(in srgb, var(--theme-primary-color) 85%, #000);
            color: var(--theme-neutral-white);
            transform:scale(1.04);
        }

        /* Right side action buttons — minimal */
        .ddf-pill {
            display:inline-flex; align-items:center; gap:7px;
            height:40px; padding:0 14px;
            border-radius:12px;
            font-size:11.5px; font-weight:700;
            letter-spacing:.2px;
            cursor:pointer; white-space:nowrap;
            transition:all .18s;
            border:1.5px solid var(--theme-surface-edge);
            background: var(--theme-neutral-white);
            color: var(--theme-neutral-black);
        }
        .ddf-pill-limits:hover { border-color: var(--theme-primary-color); }
        .ddf-pill-terminal {
            background: var(--theme-primary-color);
            color: var(--theme-neutral-white);
            border-color: var(--theme-primary-color);
        }
        .ddf-pill-terminal:hover { background: color-mix(in srgb, var(--theme-primary-color) 88%, black); }

        /* ══ WELCOME / TERMINAL POPUP — logo card, icon badges, flight input ══ */
        .ddf-welcome-logo-box {
            display:inline-flex; align-items:center; justify-content:center;
            width:56px; height:56px; border-radius:12px;
            background:#ffffff;
            box-shadow: 0 6px 16px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.18);
            padding:6px; margin:0 auto;
        }
        .ddf-welcome-logo-box img { max-width:100%; max-height:100%; object-fit:contain; display:block; }

        /* Terminal icon badges — visible dot with the plane glyph centred */
        .ddf-term-btn .ddf-term-ico {
            display:inline-flex; align-items:center; justify-content:center;
            width:34px; height:34px; border-radius:50%;
            border:1.5px solid var(--theme-surface-edge);
            transition: all .2s ease;
            margin:0 auto;
        }
        .ddf-term-btn .ddf-term-ico svg { width:18px; height:18px; }
        .ddf-term-btn:hover .ddf-term-ico { transform: translateY(-1px); }

        /* Flight-number input (left-icon + uppercase text) */
        .ddf-flight-input-wrap {
            position:relative; display:flex; align-items:center;
            background:#f5f6f8;
            border:1px solid var(--theme-surface-edge);
            border-radius:10px;
            transition: box-shadow .15s, border-color .15s, background .15s;
        }
        .ddf-flight-input-wrap:focus-within {
            border-color: var(--theme-secondary-color);
            background:#fff;
            box-shadow: 0 0 0 3px rgba(156,35,80,.14);
        }
        .ddf-flight-input-wrap i {
            position:absolute; left:10px; top:50%; transform: translateY(-50%);
            font-size:16px; color: var(--theme-secondary-color);
            pointer-events:none;
        }
        .ddf-flight-input {
            width:100%; height:36px;
            padding:0 10px 0 32px;
            background: transparent;
            border:none; outline:none;
            font-size:13px; font-weight:700; letter-spacing:.12em;
            text-transform:uppercase; color: var(--theme-primary-color);
        }
        .ddf-flight-input::placeholder {
            color:#8a92a1; font-weight:600; letter-spacing:.08em;
        }

        /* ══ TRIP CHIP + ALLOWANCE RING — minimal, editorial, clickable ══ */

        /* --- Trip chip — unified: ivory bg, gold icon, navy text (matches allowance + search) --- */
        .ddf-trip {
            display:inline-flex; align-items:center; gap:10px;
            height:46px; padding:0 12px 0 14px;
            border:1.5px solid var(--theme-surface-edge); border-radius:12px; cursor:pointer;
            background: var(--theme-surface-bg);
            color: var(--theme-neutral-black);
            font-family: var(--theme-font-body);
            transition: transform .18s, border-color .18s, box-shadow .18s;
            text-align:left;
        }
        .ddf-trip:hover {
            transform: translateY(-1px);
            border-color: color-mix(in srgb, var(--theme-primary-color) 38%, var(--theme-surface-edge));
            box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--theme-primary-color) 30%, transparent);
        }
        .ddf-trip:focus-visible {
            outline: 2px solid var(--theme-tertiary-color);
            outline-offset: 2px;
        }
        .ddf-trip-body { display:flex; flex-direction:column; line-height:1.05; }
        .ddf-trip-main {
            display:inline-flex;align-items:center;gap:7px;
            font-size:13px; font-weight:700; letter-spacing:-.005em;
            color: var(--theme-primary-color);
        }
        /* Inline state-icon (plane-land for Arrival, plane-take-off for Departure) */
        .ddf-trip-state-ic{
            font-size:18px;line-height:1;
            color: var(--theme-tertiary-color);
            display:inline-flex;align-items:center;justify-content:center;
            -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
            text-rendering:geometricPrecision;
            transition:transform .25s ease;
        }
        .ddf-trip:hover .ddf-trip-state-ic{ transform:translateY(-1px) scale(1.06); }
        .ddf-trip-sub {
            font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
            color: var(--theme-surface-muted);
            margin-top:3px;
        }
        .ddf-trip-caret {
            display:inline-flex; align-items:center; justify-content:center;
            width:18px; height:18px;
            color: var(--theme-surface-muted);
            font-size:14px;
            transition: color .15s, transform .18s;
        }
        .ddf-trip:hover .ddf-trip-caret {
            color: var(--theme-primary-color);
            transform: translateY(1px);
        }

        /* --- Allowance chip — unified: ivory bg, slim horizontal progress bar (no more SVG ring) --- */
        .ddf-allow {
            display:inline-flex; align-items:center; gap:10px;
            height:46px; padding:0 14px;
            border:1.5px solid var(--theme-surface-edge); border-radius:12px;
            background: var(--theme-surface-bg);
            color: var(--theme-neutral-black);
            cursor:pointer;
            font-family: var(--theme-font-body);
            transition: transform .18s, border-color .18s, box-shadow .18s;
            text-align:left;
        }
        .ddf-allow:hover {
            transform: translateY(-1px);
            border-color: color-mix(in srgb, var(--theme-primary-color) 38%, var(--theme-surface-edge));
            box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--theme-primary-color) 30%, transparent);
        }
        .ddf-allow:focus-visible {
            outline: 2px solid var(--theme-primary-color);
            outline-offset: 2px;
        }
        /* Slim icon (no ring) */
        .ddf-allow-ring {
            display:inline-flex; align-items:center; justify-content:center;
            font-size:22px; line-height:1;
            color: var(--theme-secondary-color);
            flex:0 0 auto;
            -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
            text-rendering:geometricPrecision;
        }
        .ddf-allow-ring svg { display:none; }   /* legacy SVG ring hidden */
        .ddf-allow.is-mid  .ddf-allow-ring { color: color-mix(in srgb, var(--theme-secondary-color) 70%, #000); }
        .ddf-allow.is-warn .ddf-allow-ring { color: var(--theme-secondary-color); }

        .ddf-allow-body { display:flex; flex-direction:column; line-height:1.05; min-width:0; }
        .ddf-allow-main {
            display:inline-flex; align-items:center; gap:6px;
            font-size:13px; font-weight:700; letter-spacing:-.005em;
            color: var(--theme-primary-color);
        }
        .ddf-allow-sep { color: var(--theme-surface-muted); font-weight:500; }
        .ddf-allow-sub {
            font-size:9.5px; font-weight:700; letter-spacing:.12em;
            text-transform:uppercase; color: var(--theme-surface-muted);
            margin-top:3px;
        }
        /* Horizontal progress bar — sits below the main numbers */
        .ddf-allow-bar{
            margin-top:4px;
            width:100%;height:3px;border-radius:50px;
            background:var(--theme-surface-edge);
            overflow:hidden;
        }
        .ddf-allow-bar-fill{
            display:block;height:100%;
            background:var(--theme-tertiary-color);
            border-radius:50px;
            transition:width .4s ease, background .3s;
        }
        .ddf-allow.is-mid  .ddf-allow-bar-fill{
            background:color-mix(in srgb, var(--theme-secondary-color) 70%, #000);
        }
        .ddf-allow.is-warn .ddf-allow-bar-fill{
            background:var(--theme-secondary-color);
        }

        .ddf-icon-btn {
            position:relative;
            display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
            width:60px; height:64px;
            background:transparent; border:none; cursor:pointer;
            color: var(--theme-neutral-black);
            border-radius:12px;
            transition:background .15s, color .15s;
            text-decoration:none;
        }
        .ddf-icon-btn i {
            font-size:26px; line-height:1;
            display:inline-flex; align-items:center; justify-content:center;
            -webkit-font-smoothing:antialiased;
            -moz-osx-font-smoothing:grayscale;
            text-rendering:geometricPrecision;
        }
        .ddf-icon-btn span { font-size:10px; font-weight:600; letter-spacing:.04em; color: var(--theme-surface-muted); }
        .ddf-icon-btn:hover { background: var(--theme-surface-bg); color: var(--theme-primary-color); }
        .ddf-icon-btn:hover span { color: var(--theme-primary-color); }
        .ddf-header-right { gap:2px !important; }
        .ddf-cart-badge {
            position:absolute; top:4px; right:8px;
            min-width:18px; height:18px;
            background: var(--theme-secondary-color);
            color: var(--theme-neutral-white);
            font-size:10px; font-weight:800;
            border-radius:9px;
            display:flex; align-items:center; justify-content:center;
            padding:0 4px; line-height:1;
            border:2px solid var(--theme-neutral-white);
            font-family: var(--theme-font-body);
        }

        /* Sticky header soft shadow */
        header.ddf-main-header {
            background: var(--theme-neutral-white);
            border-bottom:1px solid var(--theme-surface-edge);
            transition:box-shadow .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease;
            position:relative;
        }
        header.ddf-main-header::after{
            content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
            background:linear-gradient(90deg,
                transparent 0%,
                color-mix(in srgb, var(--theme-secondary-color) 35%, transparent) 50%,
                transparent 100%);
            opacity:0;transition:opacity .35s ease;
        }
        header.ddf-main-header.is-scrolled {
            box-shadow:
                0 8px 28px -8px color-mix(in srgb, var(--theme-primary-color) 18%, transparent),
                0 2px 8px -2px color-mix(in srgb, var(--theme-secondary-color) 8%, transparent);
            border-bottom-color: color-mix(in srgb, var(--theme-primary-color) 14%, transparent);
        }
        header.ddf-main-header.is-scrolled::after{opacity:1;}

        /* Header shrink on scroll: 100→72, logo 76→52 */
        header.ddf-main-header.is-scrolled .ddf-header-grid{
            height:72px;
        }
        header.ddf-main-header.is-scrolled .ddf-logo-wrap{
            padding:4px 0;
        }
        header.ddf-main-header.is-scrolled .ddf-logo-wrap img{
            height:52px;
        }

        /* ════════════════════════════════════════════════════════
           P1.1 — TOP UTILITY BAR
           ════════════════════════════════════════════════════════ */
        .ddf-utility-bar{
            background:linear-gradient(90deg,
                var(--theme-primary-color) 0%,
                color-mix(in srgb, var(--theme-primary-color) 88%, #000) 100%);
            color:#fff;
            font-size:12px;
            border-bottom:1px solid color-mix(in srgb, var(--theme-tertiary-color) 18%, transparent);
            position:relative;
            z-index:50;
        }
        .ddf-util-row{
            display:flex;align-items:center;justify-content:space-between;
            height:36px;gap:14px;
        }
        .ddf-util-left, .ddf-util-right{
            display:flex;align-items:center;gap:10px;
        }
        .ddf-util-pill{
            display:inline-flex;align-items:center;gap:6px;
            font-size:11.5px;font-weight:500;letter-spacing:.01em;
            color:rgba(255,255,255,.78);
        }
        .ddf-util-pill i{font-size:14px;color:var(--theme-tertiary-color);}
        .ddf-util-pill strong{color:#fff;font-weight:700;}
        .ddf-util-link{
            display:inline-flex;align-items:center;gap:5px;
            color:rgba(255,255,255,.85);text-decoration:none;
            padding:5px 10px;border-radius:6px;
            font-size:11.5px;font-weight:600;letter-spacing:.02em;
            transition:all .15s ease;
        }
        .ddf-util-link i{font-size:14px;}
        .ddf-util-link:hover{background:rgba(255,255,255,.10);color:#fff;}
        .ddf-util-link.ddf-util-phone i{color:var(--theme-tertiary-color);}
        .ddf-util-link.ddf-util-phone:hover i{color:#fff;}
        .ddf-util-sep{
            width:1px;height:18px;background:rgba(255,255,255,.18);
        }
        /* Lang/Currency switcher */
        .ddf-util-switch{position:relative;}
        .ddf-util-switch-btn{
            display:inline-flex;align-items:center;gap:5px;
            background:transparent;border:0;cursor:pointer;
            color:rgba(255,255,255,.85);
            padding:5px 10px;border-radius:6px;
            font-size:11.5px;font-weight:600;letter-spacing:.02em;
            transition:background .15s ease;
        }
        .ddf-util-switch-btn:hover{background:rgba(255,255,255,.10);color:#fff;}
        .ddf-util-switch-btn i{font-size:13px;}
        .ddf-util-cur{font-weight:700;color:var(--theme-tertiary-color);}
        .ddf-util-switch-pop{
            position:absolute;top:100%;right:0;margin-top:4px;
            background:#fff;border-radius:8px;
            box-shadow:0 12px 32px -8px rgba(0,0,0,.22);
            min-width:180px;padding:6px;z-index:60;
        }
        .ddf-util-switch-pop a{
            display:block;padding:7px 12px;border-radius:5px;
            font-size:12.5px;color:#1a1a1a;text-decoration:none;
            transition:all .12s;
        }
        .ddf-util-switch-pop a:hover{
            background:color-mix(in srgb, var(--theme-tertiary-color) 18%, transparent);
            color:var(--theme-primary-color);
        }
        @media (max-width:1100px){
            .ddf-util-hide-md{display:none;}
        }
        @media (max-width:760px){
            .ddf-util-hide-sm{display:none;}
            .ddf-util-row{height:auto;padding:6px 0;flex-wrap:wrap;gap:6px;}
        }

        /* ════════════════════════════════════════════════════════
           P1.2 — SEARCH AUTOCOMPLETE PANEL
           ════════════════════════════════════════════════════════ */
        .ddf-search-wrap{
            position:relative;
            width:clamp(260px, 34vw, 420px);
        }
        .ddf-header-center .ddf-search-wrap .ddf-search-form{width:100%;}
        .ddf-search-pop{
            position:absolute;top:calc(100% + 8px);left:0;right:0;
            background:#fff;border-radius:14px;
            box-shadow:0 24px 48px -12px rgba(15,30,55,.22),
                       0 8px 16px -4px rgba(15,30,55,.10);
            border:1px solid color-mix(in srgb, var(--theme-tertiary-color) 12%, transparent);
            padding:18px 18px 14px;
            z-index:60;
            max-height:60vh;overflow:auto;
        }
        .ddf-search-sec{margin-bottom:14px;}
        .ddf-search-sec-h{
            display:flex;align-items:center;gap:6px;
            font-family:var(--theme-font-heading);
            font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
            color:#777;
            margin-bottom:9px;
        }
        .ddf-search-sec-h i{color:var(--theme-tertiary-color);font-size:13px;}
        .ddf-search-chips{display:flex;flex-wrap:wrap;gap:6px;}
        .ddf-search-chip{
            display:inline-flex;align-items:center;
            padding:6px 12px;border-radius:50px;
            background:#f3f3f3;color:#1a1a1a;text-decoration:none;
            font-size:12px;font-weight:600;letter-spacing:.005em;
            transition:all .15s ease;
        }
        .ddf-search-chip:hover{
            background:var(--theme-primary-color);color:#fff;
        }
        .ddf-search-cats{
            display:grid;grid-template-columns:repeat(5,1fr);gap:6px;
        }
        .ddf-search-cat{
            display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
            padding:10px 6px;border-radius:8px;
            background:#fafafa;border:1px solid #ececec;
            color:#1a1a1a;text-decoration:none;
            transition:all .15s ease;
        }
        .ddf-search-cat i{font-size:18px;color:var(--theme-primary-color);}
        .ddf-search-cat span{font-size:10.5px;font-weight:600;letter-spacing:.02em;}
        .ddf-search-cat:hover{
            border-color:var(--theme-tertiary-color);
            background:color-mix(in srgb, var(--theme-tertiary-color) 9%, #fff);
            transform:translateY(-2px);
        }
        .ddf-search-cat:hover i{color:var(--theme-secondary-color);}
        .ddf-search-foot{
            display:flex;align-items:center;justify-content:space-between;
            margin-top:10px;padding-top:10px;
            border-top:1px solid #f0f0f0;
            font-size:11px;color:#888;
        }
        .ddf-search-foot kbd{
            display:inline-block;padding:1px 6px;border-radius:4px;
            background:#f3f3f3;border:1px solid #ddd;
            font-family:monospace;font-size:10px;
        }
        .ddf-search-foot a{
            color:var(--theme-secondary-color);text-decoration:none;font-weight:700;
        }
        .ddf-search-foot a:hover{color:var(--theme-primary-color);}

        /* ════════════════════════════════════════════════════════
           P1.3 — CART AMOUNT — inline label like Sign In / Wishlist
           (label shows the rupee amount when cart is non-empty,
           "Cart" when empty)
           ════════════════════════════════════════════════════════ */
        .ddf-icon-btn-cart .ddf-cart-amt{
            font-size:10px;font-weight:700;letter-spacing:.2px;
            color:var(--theme-surface-muted);
        }
        .ddf-icon-btn-cart:hover .ddf-cart-amt{color:var(--theme-secondary-color);}

        /* ════════════════════════════════════════════════════════
           P1.4 — ACCOUNT HOVER DROPDOWN
           ════════════════════════════════════════════════════════ */
        .ddf-acct-wrap{position:relative;}
        .ddf-acct-pop{
            position:absolute;top:100%;right:0;margin-top:4px;
            background:#fff;border-radius:12px;
            box-shadow:0 24px 48px -12px rgba(15,30,55,.22),
                       0 6px 14px -4px rgba(15,30,55,.10);
            border:1px solid color-mix(in srgb, var(--theme-tertiary-color) 12%, transparent);
            min-width:260px;padding:6px;z-index:60;
        }
        .ddf-acct-pop-head{
            padding:14px 14px 10px;
            border-bottom:1px solid #f0f0f0;
            margin-bottom:6px;
            display:flex;flex-direction:column;gap:3px;
        }
        .ddf-acct-greet{
            font-family:var(--theme-font-heading);
            font-size:14px;font-weight:700;color:var(--theme-primary-color);
        }
        .ddf-acct-tier{
            display:inline-flex;align-items:center;gap:5px;
            font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
            color:var(--theme-tertiary-color);
        }
        .ddf-acct-tier i{font-size:13px;}
        .ddf-acct-sub{
            font-size:11.5px;color:#666;line-height:1.45;
        }
        .ddf-acct-link{
            display:flex;align-items:center;gap:9px;
            padding:9px 14px;border-radius:8px;
            background:transparent;border:0;cursor:pointer;width:100%;text-align:left;
            font-size:13px;color:#1a1a1a;text-decoration:none;
            transition:all .12s ease;
        }
        .ddf-acct-link i{font-size:16px;color:var(--theme-primary-color);}
        .ddf-acct-link:hover{
            background:color-mix(in srgb, var(--theme-tertiary-color) 12%, #fff);
            color:var(--theme-secondary-color);
        }
        .ddf-acct-link:hover i{color:var(--theme-secondary-color);}
        .ddf-acct-link-danger:hover{
            color:#b00020;
        }
        .ddf-acct-link-danger:hover i{color:#b00020;}
        .ddf-acct-sep{height:1px;background:#f0f0f0;margin:6px 0;}
        .ddf-acct-cta{
            display:block;width:calc(100% - 12px);margin:6px;
            padding:10px 14px;border-radius:8px;
            background:var(--theme-secondary-color);color:#fff;
            border:0;cursor:pointer;
            font-family:var(--theme-font-heading);
            font-size:13px;font-weight:700;letter-spacing:.04em;
            transition:background .15s;
        }
        .ddf-acct-cta:hover{
            background:color-mix(in srgb, var(--theme-secondary-color) 80%, #000);
        }
        .ddf-acct-or{
            text-align:center;font-size:11.5px;color:#666;padding:0 14px 8px;
        }
        .ddf-acct-or a{
            color:var(--theme-secondary-color);text-decoration:none;font-weight:700;
        }
        .ddf-acct-or a:hover{color:var(--theme-primary-color);}

        /* ════════════════════════════════════════════════════════
           P3.2 — GOLD HAIRLINE ACCENT below the nav bar (between header
           stack and main content). Subtle brand cue.
           ════════════════════════════════════════════════════════ */
        .ddf-nav-bar::after{
            content:"";display:block;
            height:2px;
            background:linear-gradient(90deg,
                transparent 0%,
                color-mix(in srgb, var(--theme-secondary-color) 55%, transparent) 50%,
                transparent 100%);
        }

        /* ════════════════════════════════════════════════════════
           TRUST STRIP — under the nav, on every page.
           Brand discipline: maroon icons on white, navy ink, gold dot dividers.
           ════════════════════════════════════════════════════════ */
        .ddf-trust-strip{
            background:var(--c-surface-1);
            border-bottom:1px solid var(--c-line);
        }
        .ddf-trust-row{
            display:flex;align-items:center;justify-content:space-between;
            gap:var(--sp-3);
            padding:var(--sp-3) 0;
        }
        .ddf-trust-cell{
            display:inline-flex;align-items:center;gap:var(--sp-3);
            flex:1;min-width:0;
        }
        .ddf-trust-ic{
            width:36px;height:36px;border-radius:var(--rd-pill);
            display:inline-flex;align-items:center;justify-content:center;
            background:color-mix(in srgb, var(--theme-secondary-color) 9%, #fff);
            color:var(--theme-secondary-color);
            font-size:18px;line-height:1;
            flex-shrink:0;
            -webkit-font-smoothing:antialiased;
            text-rendering:geometricPrecision;
        }
        .ddf-trust-tx{display:flex;flex-direction:column;line-height:1.15;min-width:0;}
        .ddf-trust-tx strong{
            font-family:var(--theme-font-heading);
            font-size:13px;font-weight:700;letter-spacing:-.005em;
            color:var(--c-ink);
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
        }
        .ddf-trust-tx small{
            font-size:11px;color:var(--c-ink-3);
            margin-top:2px;letter-spacing:.005em;
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
        }
        .ddf-trust-sep{
            width:6px;height:6px;border-radius:50%;
            background:var(--theme-secondary-color);
            opacity:.4;
            flex-shrink:0;
        }
        @media (max-width:1100px){
            .ddf-trust-cell:nth-child(n+5){display:none;}
            .ddf-trust-sep:nth-of-type(n+3){display:none;}
        }
        @media (max-width:760px){
            .ddf-trust-strip{display:none;}
        }

        /* ════════════════════════════════════════════════════════
           #3 VOICE + SNAP search buttons — absolutely positioned
           inside .ddf-search-form to sit on the right of the input.
           ════════════════════════════════════════════════════════ */
        .ddf-search-tool{
            position:absolute;top:50%;transform:translateY(-50%);
            display:inline-flex;align-items:center;justify-content:center;
            width:34px;height:34px;
            background:transparent;border:0;cursor:pointer;
            color:var(--theme-surface-muted);
            border-radius:50%;
            transition:all .15s ease;
            z-index:2;
        }
        .ddf-search-voice{ right:88px; }
        .ddf-search-snap { right:52px; }
        .ddf-search-tool:hover{
            background:color-mix(in srgb, var(--theme-tertiary-color) 16%, transparent);
            color:var(--theme-primary-color);
        }
        .ddf-search-tool i{
            font-size:19px;line-height:1;
            display:inline-flex;align-items:center;justify-content:center;
            -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
            text-rendering:geometricPrecision;
        }
        /* Subtle vertical hairline divider between snap and submit button */
        .ddf-search-snap::after{
            content:"";position:absolute;right:-6px;top:7px;bottom:7px;
            width:1px;background:var(--theme-surface-edge);
        }
        .ddf-search-voice.is-on{
            color:#fff;background:#e74c3c;
            animation:searchVoicePulse 1.2s ease-in-out infinite;
        }
        @keyframes searchVoicePulse{
            0%,100% { box-shadow:0 0 0 0 rgba(231,76,60,.5); }
            50%     { box-shadow:0 0 0 8px rgba(231,76,60,0); }
        }
        .ddf-search-snap-input{
            position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;
        }

        /* ════════════════════════════════════════════════════════
           #4 SAVINGS counter — tiny gold pill anchored top-right of cart icon
           ════════════════════════════════════════════════════════ */
        .ddf-icon-btn-cart{position:relative;}
        .ddf-cart-saved{
            position:absolute;top:-4px;right:-8px;
            display:inline-flex;align-items:center;gap:3px;
            padding:2px 7px;border-radius:50px;
            background:var(--theme-tertiary-color);
            color:var(--theme-primary-color);
            font-size:9px;font-weight:800;letter-spacing:.02em;
            line-height:1.2;white-space:nowrap;
            box-shadow:0 2px 6px -2px rgba(0,0,0,.18);
            z-index:2;
        }
        .ddf-cart-saved i{font-size:10px;}

        @media (max-width:1280px){
            .ddf-header-grid { grid-template-columns:1fr auto 1fr; gap:14px; }
            .ddf-header-center .ddf-search-form { width:clamp(220px, 28vw, 360px); }
        }
        @media (max-width:1100px){
            .ddf-header-grid { grid-template-columns:auto 1fr auto; gap:12px; height:113px; }
            .ddf-header-center { justify-content:flex-start; }
            .ddf-header-center .ddf-trip, .ddf-header-center .ddf-allow { display:none !important; }
            .ddf-header-center .ddf-search-form { width:100%; max-width:none; }
        }

        /* ── Palette discipline: tertiary (gold/yellow) globally re-aliased to maroon
              per brand rule "navy + maroon only — no yellow". Every legacy gold accent
              now flows through the secondary token, so the entire shop surface stays
              on the two-color brand spine without rewriting 30+ rules individually. ── */
        :root {
            --theme-tertiary-color: var(--theme-secondary-color);
        }

        /* ── Defensive contrast lock: any element whose background resolves to a
              maroon-saturated surface forces white foreground text + iconography.
              Catches inline styles, future additions, and inherited child text. ── */
        [style*="background:var(--theme-secondary-color)"],
        [style*="background-color:var(--theme-secondary-color)"],
        [style*="background: var(--theme-secondary-color)"],
        [style*="background-color: var(--theme-secondary-color)"],
        [style*="background:#9c2350"],
        [style*="background-color:#9c2350"],
        [style*="background: #9c2350"],
        [style*="background-color: #9c2350"] {
            color: #ffffff !important;
        }
        [style*="background:var(--theme-secondary-color)"] *,
        [style*="background-color:var(--theme-secondary-color)"] *,
        [style*="background: var(--theme-secondary-color)"] *,
        [style*="background-color: var(--theme-secondary-color)"] *,
        [style*="background:#9c2350"] *,
        [style*="background-color:#9c2350"] *,
        [style*="background: #9c2350"] *,
        [style*="background-color: #9c2350"] * {
            color: #ffffff !important;
        }

        /* ── Alias bridge: map legacy utility vars to new theme tokens ── */
        :root {
            --c-navy:        var(--theme-primary-color);
            --c-maroon:      var(--theme-secondary-color);
            --c-gold:        var(--theme-secondary-color);
            --c-gold-dark:   color-mix(in srgb, var(--theme-secondary-color) 80%, black);
            --c-bg:          var(--theme-surface-bg);
            --c-surface:     var(--theme-surface-card);
            --c-border:      var(--theme-surface-edge);
            --c-border-light:var(--theme-surface-edge);
            --c-text:        #0d1117;
            --c-text-muted:  var(--c-ink-3);
            --c-text-light:  var(--c-ink-3);
            --c-danger:      var(--theme-secondary-color);
            --c-success:     var(--theme-primary-color);
            --font-sans:  var(--theme-font-body);
            --font-serif: var(--theme-font-heading);

            /* ── Static-page palette bridge ──
               Blade files under shop/pages/* reference these legacy tokens.
               Mapping them here lets every static page render in the live
               theme palette (navy / maroon / gold) without rewriting markup. */
            --color-navy:       var(--theme-primary-color);
            --color-ink:        #0d1117;
            --color-ink-muted:  var(--c-ink-3);
            --color-edge:       var(--theme-surface-edge);
            --color-surface:    var(--theme-surface-bg);
            --color-gold:       var(--theme-tertiary-color);
            --color-gold-light: color-mix(in srgb, var(--theme-tertiary-color) 25%, #fff);
            --color-gold-dark:  color-mix(in srgb, var(--theme-tertiary-color) 78%, #6b3f13);
            --color-gold-bg:    color-mix(in srgb, var(--theme-tertiary-color) 14%, #fff);
            --color-ddf-red:    var(--theme-secondary-color);
            --color-success:    #1f9d55;

            /* ─────────────────────────────────────────────────────────────────
               DESIGN TOKEN SCALE — backend can override any of these via
               ThemeSetting tokens.  Every spacing / radius / shadow / motion
               value in the storefront should reference one of these, so the
               whole site stays pixel-consistent with one config change.
               ───────────────────────────────────────────────────────────── */

            /* SPACING — 4 px base, 8 step.  Use these everywhere. */
            --sp-1:   4px;
            --sp-2:   8px;
            --sp-3:  12px;
            --sp-4:  16px;
            --sp-5:  20px;
            --sp-6:  24px;
            --sp-8:  32px;
            --sp-10: 40px;
            --sp-12: 48px;
            --sp-16: 64px;
            --sp-20: 80px;

            /* RADIUS */
            --rd-sm:   6px;
            --rd-md:  10px;
            --rd-lg:  14px;
            --rd-xl:  20px;
            --rd-pill:50px;
            --rd-full:9999px;

            /* SHADOWS — premium retail tones */
            --sh-1: 0 1px 2px rgba(15,30,55,.06);
            --sh-2: 0 4px 12px -2px rgba(15,30,55,.08);
            --sh-3: 0 8px 20px -4px rgba(15,30,55,.12);
            --sh-4: 0 16px 40px -10px rgba(15,30,55,.20);
            --sh-gold: 0 8px 24px -8px color-mix(in srgb, var(--theme-tertiary-color) 50%, transparent);

            /* TEXT — disciplined neutral ramp (no random greys) */
            --c-ink:        #0d1117;
            --c-ink-2:      #2a3142;
            --c-ink-3:      #5a6274;
            --c-ink-4:      #8a92a3;
            --c-line:       #e6e8ec;
            --c-surface-1:  #ffffff;
            --c-surface-2:  #fafbfc;
            --c-surface-3:  #f3f5f8;

            /* MOTION */
            --mo-fast: 150ms;
            --mo-base: 220ms;
            --mo-slow: 380ms;
            --mo-ease: cubic-bezier(.2,.8,.2,1);
        }

        /* ── Static-page normalisation ────────────────────────────────────
           The global `h1-h6` rule above sets navy color + clamped font sizes
           that fight every page-specific hero. The selectors below catch the
           hero sections introduced by all redesigned static pages and force
           white text + correct sizes + consistent left/right padding. */

        /* Every static-page hero section ends in "-hero" — they all sit on a
           navy or maroon gradient and need white text. Catch-all attribute
           selector keeps any future "*-hero" class on a dark background
           styled correctly without manual additions. */
        [class*="-hero"]:where(.ab-hero, .cr-hero, .pol-hero, .al-hero,
                .pr-hero, .fq-hero, .cu-hero, .sc-hero, .cd-hero, .cart-hero){
            color: #fff;
        }

        .ab-hero h1, .cr-hero h1, .pol-hero h1, .al-hero h1, .pr-hero h1,
        .fq-hero h1, .cu-hero h1, .sc-hero h1, .cd-hero h1, .cart-hero h1,
        .ab-hero h2, .cr-hero h2, .pol-hero h2, .al-hero h2, .pr-hero h2,
        .fq-hero h2, .cu-hero h2, .sc-hero h2, .cd-hero h2, .cart-hero h2,
        .ab-hero h3, .cr-hero h3, .pol-hero h3, .al-hero h3, .pr-hero h3,
        .fq-hero h3, .cu-hero h3, .sc-hero h3, .cd-hero h3, .cart-hero h3,
        .ab-hero h4, .cr-hero h4, .pol-hero h4, .al-hero h4, .pr-hero h4,
        .fq-hero h4, .cu-hero h4, .sc-hero h4, .cd-hero h4, .cart-hero h4 {
            color: #fff !important;
            font-size: inherit;
            letter-spacing: -0.012em;
            line-height: 1.15;
        }
        /* Page-specific hero h1 sizes — re-applied with higher specificity to
           defeat the layout's clamp() global. */
        .ab-hero h1 { font-size: clamp(28px, 4vw, 46px); font-weight: 800; }
        .cr-hero h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; }
        .pol-hero h1 { font-size: clamp(28px, 3.8vw, 42px); font-weight: 800; }
        .al-hero h1 { font-size: clamp(28px, 3.8vw, 42px); font-weight: 800; }
        .pr-hero h1 { font-size: clamp(28px, 3.8vw, 42px); font-weight: 800; }
        .fq-hero h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; }
        .sc-hero h1 { font-size: clamp(28px, 3.8vw, 42px); font-weight: 800; }
        .cd-hero h1 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; }
        .cu-hero h1 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; }
        .cart-hero h1 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; }

        /* Body / muted text inside hero stays white-ish, never gets dark.
           Same applies to crumbs, links and small labels in the hero strip. */
        .ab-hero p, .cr-hero p, .pol-hero p, .al-hero p, .pr-hero p,
        .fq-hero p, .cu-hero p, .sc-hero p, .cd-hero p, .cart-hero p,
        .cart-hero .cart-subtitle, .cart-hero .cart-crumb,
        .cart-hero .cart-crumb a, .cart-hero .cart-crumb span {
            color: rgba(255,255,255,0.82) !important;
        }
        .cart-hero .cart-title em { color: var(--theme-tertiary-color) !important; }

        /* ── Universal contrast safety net ──
           Any text/heading inside an element whose background or class hints
           at a dark surface (navy/maroon/black) flips to white. Catches
           future hero / banner / cta sections without explicit listing. */
        [class$="-hero"], [class*="-hero "],
        [class*="bg-navy"], [class*="bg-maroon"], [class*="bg-dark"],
        [data-theme="dark"]{
            --on-dark-color: #fff;
        }
        [class$="-hero"] :is(h1,h2,h3,h4,h5,h6,p,span,label,a,small,em,strong),
        [data-theme="dark"] :is(h1,h2,h3,h4,h5,h6,p,span,label,a,small,em,strong){
            color: inherit;
        }

        /* Maroon CTA / banner cards used across pages — always-white text */
        .ab-cta, .ab-cta h3, .ab-cta p,
        .al-cta, .al-cta h3, .al-cta p,
        .pr-sub, .pr-sub h4, .pr-sub p,
        .pol-cta-card, .pol-cta-card h4, .pol-cta-card p,
        .fq-contact-card, .fq-contact-card h4, .fq-contact-card p,
        .cr-cta-card, .cr-cta-card h5, .cr-cta-card p,
        .cd-apply-head, .cd-apply-head h3, .cd-apply-head p {
            color: #fff;
        }
        .ab-cta h3, .al-cta h3, .cd-apply-head h3 { color: #fff !important; }

        /* Direction / boarding-pass card heads (allowance, careers feat, press feat) */
        .al-direction-card .head h3, .cr-feat-card h3, .pr-feat-img.tone strong,
        .ab-story-visual h4, .ab-pillar-head h4, .fq-cat-head h2 { color: #fff !important; }

        /* The dark "story" visuals on About page */
        .ab-story-visual, .ab-story-visual h4, .ab-story-visual p { color: #fff; }

        /* Field labels that sit on dark gradient apply panels stay light */
        .cd-apply .cd-fg label,
        .cr-fg label, .cu-fg label { color: var(--color-ink-muted); }

        /* ── In-hero stat / metric boxes — white card on dark hero ──
           Hero sections sit on navy / maroon gradients. Any "box" sitting
           on top of them flips to a clean white card with near-black numbers
           and a maroon caption / icon to keep the brand voice consistent. */
        .cr-stat, .fq-stat, .ab-hero .ab-stat,
        .pol-hero .stat-box, .al-hero .stat-box, .pr-hero .stat-box {
            background: #ffffff !important;
            border: 1px solid color-mix(in srgb, var(--theme-secondary-color) 18%, transparent) !important;
            box-shadow: 0 12px 28px rgba(0,0,0,0.18) !important;
            backdrop-filter: none !important;
        }
        .cr-stat strong, .fq-stat strong { color: #0d1117 !important; }
        .cr-stat span,   .fq-stat span   {
            color: var(--theme-secondary-color) !important;
            font-weight: 800;
        }
        /* Any icon inside an in-hero white box renders maroon */
        .cr-stat i, .fq-stat i,
        .cr-hero .stat-box i, .fq-hero .stat-box i,
        .al-hero .stat-box i, .pr-hero .stat-box i,
        .pol-hero .stat-box i, .ab-hero .stat-box i {
            color: var(--theme-secondary-color) !important;
        }

        /* ── Static-page alignment with the header ──
           The site header / footer use `max-w-[1340px] mx-auto px-5` — so
           every static-page wrapper is normalised to the same 1340px max-width
           with 20px side padding. That keeps the left edge of hero copy,
           stat-card rows and content sections in sync with the SHOP ALL /
           navigation column up top. Outer hero sections stay full-bleed so
           the navy / maroon gradient still reaches viewport edges.           */

        /* Hero INNER wrappers — sync to header */
        .ab-hero-inner, .cr-hero-inner, .pol-hero-inner,
        .al-hero-inner, .pr-hero-inner, .fq-hero-inner,
        .sc-hero-inner, .cd-hero-inner, .cu-hero-inner {
            max-width: 1340px !important;
            margin-left: auto !important;
            margin-right: auto !important;
            padding-left: 20px !important;
            padding-right: 20px !important;
            width: 100%;
            box-sizing: border-box;
        }

        /* Headline + intro paragraph inside hero stay centred with their own
           narrower text-block so long sentences don't run wall-to-wall. */
        .ab-hero-inner h1, .cr-hero-inner h1, .pol-hero-inner h1,
        .al-hero-inner h1, .pr-hero-inner h1, .fq-hero-inner h1,
        .sc-hero-inner h1, .cd-hero-inner h1, .cu-hero-inner h1,
        .ab-hero-inner > p, .cr-hero-inner > p, .pol-hero-inner > p,
        .al-hero-inner > p, .pr-hero-inner > p, .fq-hero-inner > p,
        .sc-hero-inner > p, .cu-hero-inner > p {
            max-width: 880px;
            margin-left: auto;
            margin-right: auto;
        }

        /* Generic `.container` wrapper used across static pages (cart,
           checkout, about, etc.). Catches both `<section class="container">`
           and `<div class="container">` so any page-level layout uses the
           same 1340px gutter as the header / footer. */
        body section.container[class~="container"],
        body div.container[class~="container"] {
            max-width: 1340px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 20px;
            padding-right: 20px;
            width: 100%;
            box-sizing: border-box;
        }

        /* Content shells of pages that wrap with `.container` inside a
           `<section class="<prefix>-shell">`. Same alignment.            */
        .pol-shell .container, .al-shell .container, .cr-shell .container,
        .pr-shell .container, .fq-shell .container, .cd-shell .container,
        .sc-section > .container, .ab-section > .container {
            max-width: 1340px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 20px;
            padding-right: 20px;
            width: 100%;
            box-sizing: border-box;
        }

        /* About-page top-level grids that aren't inside `.container` */
        .ab-section { padding-left: 0; padding-right: 0; }

        @media (max-width: 600px) {
            .ab-hero-inner, .cr-hero-inner, .pol-hero-inner,
            .al-hero-inner, .pr-hero-inner, .fq-hero-inner,
            .sc-hero-inner, .cd-hero-inner, .cu-hero-inner,
            body section.container[class~="container"],
            .pol-shell .container, .al-shell .container, .cr-shell .container,
            .pr-shell .container, .fq-shell .container, .cd-shell .container {
                padding-left: 16px !important;
                padding-right: 16px !important;
            }
        }

        /* ── Body / muted text inside white cards always inherits the page's
           ink-muted token, never the layout's near-black default ── */
        .ab-section p, .pol-section p, .al-section p,
        .pr-shell p, .fq-shell p, .cr-shell p {
            font-family: var(--theme-font-body);
        }

        /* ── Global default text color — near-black for readability on light bgs ── */
        body, .shop-body { color: #0d1117; }
        /* ── Contrast safety-net ──
           Any heading/paragraph/label that sits on a navy or wine background
           automatically flips to white. Catches Tailwind `text-white` classes
           that fail to compile and inline `bg-gradient-to-*` headers.
           Scoped to text elements only so it never colours icons or buttons. */
        [class*="bg-navy"] h1, [class*="bg-navy"] h2, [class*="bg-navy"] h3,
        [class*="bg-navy"] h4, [class*="bg-navy"] h5, [class*="bg-navy"] p,
        [class*="bg-navy"] span, [class*="bg-navy"] label,
        [class*="from-navy"] h1, [class*="from-navy"] h2, [class*="from-navy"] h3,
        [class*="from-navy"] h4, [class*="from-navy"] h5, [class*="from-navy"] p,
        [class*="from-navy"] span, [class*="from-navy"] label,
        .on-dark, .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark h5,
        .on-dark p, .on-dark span, .on-dark label, .on-dark a { color: #ffffff; }
        [class*="from-navy"] .text-white\/50,
        [class*="bg-navy"] .text-white\/50 { color: rgba(255,255,255,.85) !important; }

        /* ── Legacy Tailwind arbitrary-value utilities remapped to theme tokens ──
           Blade files still reference hex-based class names; these rules make
           those classes resolve to the active theme's palette, not the hardcoded
           hex values the class name suggests. Planned for cleanup once blade
           files are migrated to explicit theme classes. */
        /* Footer background → neutral black */
        .bg-\[var(--theme-primary-color)\]                              { background-color: var(--theme-neutral-black); }
        /* Legacy "maroon" → secondary */
        .bg-\[var(--theme-secondary-color)\],.bg-\[var(--theme-secondary-color)\]             { background-color: var(--theme-secondary-color); }
        .bg-\[color-mix(in srgb, var(--theme-secondary-color) 85%, black)\]                              { background-color: color-mix(in srgb, var(--theme-secondary-color) 85%, black); }
        .hover\:bg-\[var(--theme-secondary-color)\]:hover                 { background-color: var(--theme-secondary-color); }
        .hover\:bg-\[color-mix(in srgb, var(--theme-secondary-color) 85%, black)\]:hover                 { background-color: color-mix(in srgb, var(--theme-secondary-color) 85%, black); }
        .text-\[var(--theme-secondary-color)\],.text-\[var(--theme-secondary-color)\]         { color: var(--theme-secondary-color); }
        .hover\:text-\[var(--theme-secondary-color)\]:hover               { color: var(--theme-secondary-color); }
        .group:hover .group-hover\:text-\[var(--theme-secondary-color)\]  { color: var(--theme-secondary-color); }
        .border-\[var(--theme-secondary-color)\]                          { border-color: var(--theme-secondary-color); }
        .focus\:border-\[var(--theme-secondary-color)\]:focus             { border-color: var(--theme-secondary-color); }
        .hover\:border-\[var(--theme-secondary-color)\]\/30:hover         { border-color: color-mix(in srgb, var(--theme-secondary-color) 30%, transparent); }
        /* Legacy "navy" → primary */
        .bg-\[var(--theme-primary-color)\]                              { background-color: var(--theme-primary-color); }
        .bg-\[var(--theme-primary-color)\]\/60,.bg-\[var(--theme-primary-color)\]\/70     { background-color: color-mix(in srgb, var(--theme-primary-color) 65%, transparent); }
        .hover\:bg-\[color-mix(in srgb, var(--theme-primary-color) 85%, white)\]:hover                 { background-color: color-mix(in srgb, var(--theme-primary-color) 88%, black); }
        .hover\:bg-\[var(--theme-primary-color)\]:hover                 { background-color: var(--theme-primary-color); }
        .text-\[var(--theme-primary-color)\]                            { color: var(--theme-primary-color); }
        .hover\:text-\[var(--theme-primary-color)\]:hover               { color: var(--theme-primary-color); }
        /* Light bg & borders → neutrals */
        .bg-\[var(--theme-surface-bg)\]                              { background-color: var(--theme-surface-bg); }
        .bg-\[var(--theme-surface-edge)\]                              { background-color: var(--theme-surface-bg); }
        .bg-\[color-mix(in srgb, var(--theme-secondary-color) 8%, var(--theme-neutral-white))\]                              { background-color: color-mix(in srgb, var(--theme-secondary-color) 8%, var(--theme-neutral-white)); }
        .hover\:bg-red-50:hover                      { background-color: color-mix(in srgb, var(--theme-secondary-color) 8%, var(--theme-neutral-white)); }
        .hover\:bg-\[color-mix(in srgb, var(--theme-secondary-color) 8%, var(--theme-neutral-white))\]:hover                 { background-color: color-mix(in srgb, var(--theme-secondary-color) 8%, var(--theme-neutral-white)); }
        .border-\[var(--theme-surface-edge)\]                          { border-color: var(--theme-surface-edge); }
        .border-\[var(--theme-surface-edge)\]                          { border-color: var(--theme-surface-edge); }
        .bg-\[var(--theme-surface-edge)\]                              { background-color: var(--theme-surface-edge); }
        /* Muted text → grey */
        .text-\[var(--theme-surface-muted)\]                            { color: var(--theme-surface-muted); }
        .text-\[var(--theme-neutral-grey)\]                            { color: var(--theme-neutral-grey); }
        .text-\[color-mix(in srgb, var(--theme-tertiary-color) 80%, black)\]                            { color: color-mix(in srgb, var(--theme-tertiary-color) 80%, black); }
        .text-\[var(--theme-tertiary-color)\]                            { color: var(--theme-tertiary-color); }
        /* Focus ring */
        .focus\:ring-\[var(--theme-secondary-color)\]\/10:focus           { box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-secondary-color) 10%, transparent); }
        .focus\:ring-2:focus                         { --tw-ring-shadow: 0 0 0 2px var(--tw-ring-color, color-mix(in srgb, var(--theme-neutral-black) 8%, transparent)); box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000); }
        /* WhatsApp green — external brand, kept literal */
        .hover\:bg-\[#25D366\]:hover                 { background-color: #25D366; }
        .hover\:border-\[#25D366\]:hover             { border-color: #25D366; }
        /* Footer link override — lives on the theme-blue middle section */
        footer .footer-link                          { color:#ffffff; font-size:13px; font-weight:500; transition:color .2s,padding-left .2s; display:block; position:relative; text-decoration:none; }
        footer .footer-link:hover                    { color: var(--theme-secondary-color); padding-left:5px; }
        .hover\:text-white:hover                     { color: var(--theme-neutral-white); }
        /* ═══ OPACITY MODIFIER VARIANTS — all absent from pre-compiled shop.css ═══ */
        /* White opacity text */
        .text-white\/80,.text-white\/70          { color:rgba(255,255,255,.80); }
        .text-white\/60,.text-white\/65          { color:rgba(255,255,255,.60); }
        .text-white\/50                          { color:rgba(255,255,255,.50); }
        .text-white\/40,.text-white\/45          { color:rgba(255,255,255,.40); }
        .text-white\/30,.text-white\/35          { color:rgba(255,255,255,.30); }
        .text-white\/25,.text-white\/20          { color:rgba(255,255,255,.22); }
        /* Navy opacity bg */
        .bg-navy\/95                             { background-color:rgba(10,22,40,.95); }
        .bg-navy\/70                             { background-color:rgba(10,22,40,.70); }
        .bg-navy\/50                             { background-color:rgba(10,22,40,.50); }
        .bg-navy\/40                             { background-color:rgba(10,22,40,.40); }
        .bg-navy\/20                             { background-color:rgba(10,22,40,.20); }
        /* Gold opacity */
        .bg-gold\/\[\.12\],.bg-gold\/10          { background-color:rgba(201,169,110,.10); }
        .bg-gold\/\[\.18\],.bg-gold\/15          { background-color:rgba(201,169,110,.15); }
        .bg-gold\/\[\.03\],.bg-gold\/5           { background-color:rgba(201,169,110,.05); }
        .border-gold\/10                         { border-color:rgba(201,169,110,.10); }
        .border-gold\/20                         { border-color:rgba(201,169,110,.20); }
        .hover\:bg-gold\/10:hover                { background-color:rgba(201,169,110,.10); }
        .ring-gold\/20                           { --tw-ring-color:rgba(201,169,110,.20); }
        /* White opacity bg */
        .bg-white\/10,.bg-white\/\[\.10\]        { background-color:rgba(255,255,255,.10); }
        .bg-white\/\[\.08\],.bg-white\/8         { background-color:rgba(255,255,255,.08); }
        .hover\:bg-white\/\[\.12\]:hover         { background-color:rgba(255,255,255,.12); }
        .hover\:bg-white\/20:hover               { background-color:rgba(255,255,255,.20); }
        /* Backdrop blur */
        .backdrop-blur-md                        { -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); }
        .backdrop-blur-sm                        { -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); }
        /* Focus ring with gold */
        .focus\:ring-gold\/15:focus              { box-shadow:0 0 0 3px rgba(201,169,110,.15) !important; }
        .focus\:ring-\[3px\]:focus               { box-shadow:0 0 0 3px var(--tw-ring-color,rgba(0,0,0,.08)); }
        /* Gold/danger bg opacity misc */
        .bg-danger\/5                            { background-color:rgba(194,24,41,.05); }
        .bg-danger\/10                           { background-color:rgba(194,24,41,.10); }
        .border-danger\/20                       { border-color:rgba(194,24,41,.20); }
        .bg-success\/5                           { background-color:rgba(5,150,105,.05); }
        .border-success\/20                      { border-color:rgba(5,150,105,.20); }
        .bg-gold\/\[\.15\]                       { background-color:rgba(201,169,110,.15); }

        /* ═══ HEADER ═══ */
        header { border-bottom:none; transition:box-shadow .3s; }
        header.shadow-lg { box-shadow:0 6px 28px rgba(10,22,40,.10),0 1px 4px rgba(10,22,40,.06) !important; }

        /* Header action buttons */
        .h-action-btn {
            display:flex;flex-direction:column;align-items:center;justify-content:center;
            padding:8px 12px;border-radius:12px;border:none;background:transparent;
            cursor:pointer;transition:all .2s;text-decoration:none;color:var(--theme-neutral-grey);position:relative;
        }
        .h-action-btn:hover { background:rgba(201,169,110,.08) !important; }
        .h-action-btn:hover i { color:var(--theme-secondary-color) !important; }
        .h-action-btn:hover span { color:var(--theme-secondary-color) !important; }

        /* ═══ NAV BAR ═══ — white, flush with header, soft pro shadow */
        .ddf-nav-bar {
            background:#ffffff !important;
            border-top:1px solid #ececec;
            border-bottom:1px solid #ececec;
            box-shadow:
                0 1px 0 rgba(15,30,55,.04),                 /* hairline under border */
                0 4px 12px -4px rgba(15,30,55,.10),         /* soft lift */
                0 8px 24px -12px rgba(15,30,55,.08);        /* deeper diffusion */
        }

        /* Nav category links — +20% font size, +20% horizontal padding (gaps between items) */
        .nav-cat-link {
            display:flex;align-items:center;gap:6px;padding:0 25px;height:44px;
            font-family:"Nunito Sans","Nunito",var(--theme-font-body),sans-serif;
            font-size:13px;font-weight:700;color:#1a1a1a;letter-spacing:.06em;text-transform:uppercase;
            text-decoration:none;transition:color .2s;position:relative;white-space:nowrap;border:none;background:none;cursor:pointer;
        }
        .nav-cat-link:hover { color:var(--theme-secondary-color); }
        .nav-cat-link.active { color:var(--theme-secondary-color); font-weight:700; }
        .nav-cat-link::after {
            content:;position:absolute;bottom:0;left:25px;right:25px;height:2px;
            background:var(--theme-secondary-color);transform:scaleX(0);transition:transform .25s;border-radius:2px;
        }
        .nav-cat-link:hover::after, .nav-cat-link.active::after { transform:scaleX(1); }

        /* Right-side utility pills (Contact us, Blog) — gold outline, fills navy on hover */
        .ddf-util-pill{
            display:inline-flex;align-items:center;gap:6px;
            padding:0 14px;height:32px;
            border-radius:50px;
            border:1.5px solid color-mix(in srgb, var(--theme-tertiary-color) 50%, transparent);
            background:transparent;
            color:var(--theme-primary-color);
            font-size:11.5px;font-weight:700;letter-spacing:.04em;
            text-decoration:none;
            transition:all .2s ease;
            white-space:nowrap;
        }
        .ddf-util-pill i{font-size:14px;color:var(--theme-tertiary-color);transition:color .2s;}
        .ddf-util-pill:hover{
            background:var(--theme-primary-color);
            border-color:var(--theme-primary-color);
            color:#fff;
        }
        .ddf-util-pill:hover i{color:var(--theme-tertiary-color);}

        /* ═══ NAV CATEGORY LABEL — inline refined pill ═══
           A small premium chip that sits beside the menu word. Solid colour
           token, tight uppercase letters, soft inner highlight, drop-shadow.
           Two emphasis levels:
              .nav-cat-badge          — neutral default (maroon)
              .nav-cat-badge--exclusive — emphasis (gold ring)
         */
        .nav-cat-badge{
            display:inline-flex;align-items:center;
            margin-left:6px;
            padding:2px 7px 3px;
            border-radius:999px;
            font-size:8.5px;font-weight:800;letter-spacing:1.2px;
            text-transform:uppercase;
            color:#fff;
            line-height:1;
            white-space:nowrap;
            pointer-events:none;
            position:relative;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.28),     /* premium top highlight */
                0 1px 2px rgba(0,0,0,.22);                /* subtle drop */
            transition:transform .2s ease;
            transform-origin:left center;
        }
        .nav-cat-link:hover .nav-cat-badge{
            transform:scale(1.06);
        }
        /* Pulsing dot indicator for "HOT" / urgency labels */
        .nav-cat-badge.nav-cat-badge--hot::before{
            content:'';
            display:inline-block;
            width:5px;height:5px;border-radius:50%;
            background:var(--theme-tertiary-color);
            margin-right:5px;
            box-shadow:0 0 0 0 color-mix(in srgb, var(--theme-tertiary-color) 80%, transparent);
            animation:navBadgePulse 1.6s ease-in-out infinite;
        }
        @keyframes navBadgePulse{
            0%,100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--theme-tertiary-color) 70%, transparent); }
            50%     { box-shadow:0 0 0 4px color-mix(in srgb, var(--theme-tertiary-color) 0%, transparent); }
        }
        /* "EXCLUSIVE" gets a gold hairline ring instead of plain colour */
        .nav-cat-badge.nav-cat-badge--exclusive{
            background:linear-gradient(180deg, var(--theme-primary-color) 0%, color-mix(in srgb, var(--theme-primary-color) 80%, #000) 100%);
            border:1px solid color-mix(in srgb, var(--theme-tertiary-color) 70%, #6b3f13);
            color:var(--theme-tertiary-color);
            padding:1px 7px 2px;
        }

        /* Shop All trigger — tight, full-height maroon gradient block flush with nav bar */
        .shop-all-trigger {
            display:inline-flex;align-items:center;justify-content:center;gap:7px;
            height:44px;                  /* matches the nav row height — fills top→bottom */
            margin:0 10px 0 0;padding:0 14px;
            font-family:var(--theme-font-heading);
            font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
            color:#ffffff;
            background:linear-gradient(135deg,
                var(--theme-secondary-color) 0%,
                color-mix(in srgb, var(--theme-secondary-color) 78%, #000) 100%);
            border:0;
            border-radius:0;cursor:pointer;
            transition:all .2s ease;white-space:nowrap;
        }
        .shop-all-trigger > .bx{
            font-size:15px;color:#ffffff;transition:transform .2s;
        }
        .shop-all-trigger:hover,
        .shop-all-trigger.is-open {
            background:linear-gradient(135deg,
                color-mix(in srgb, var(--theme-secondary-color) 88%, #000) 0%,
                color-mix(in srgb, var(--theme-secondary-color) 65%, #000) 100%);
            color:#fff;
        }
        .shop-all-trigger:hover > .bx:first-child{transform:scale(1.08);}

        /* Sale link in nav */
        .nav-sale-link {
            display:flex;align-items:center;gap:5px;padding:0 16px;height:44px;
            font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
            color:var(--theme-secondary-color);text-decoration:none;transition:all .2s;white-space:nowrap;
        }
        .nav-sale-link:hover { color:#fff;text-shadow:0 0 12px rgba(255,107,107,.5); }

        /* ═══ MEGA MENU (hover dropdown) ═══ */
        .mega-dropdown {
            position:absolute;top:100%;left:0;right:0;z-index:50;
            opacity:0;visibility:hidden;transform:translateY(4px);
            transition:all .25s cubic-bezier(.4,0,.2,1);
            pointer-events:none;
        }
        .mega-dropdown.is-visible {
            opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
        }
        .mega-cat-sidebar-item {
            display:flex;align-items:center;gap:10px;padding:12px 20px;
            font-size:13.5px;font-weight:500;color:var(--theme-neutral-grey);cursor:pointer;
            transition:all .15s;border-left:3px solid transparent;border:none;width:100%;
            text-align:left;background:none;
        }
        .mega-cat-sidebar-item:hover, .mega-cat-sidebar-item.is-active {
            background:#fff;color:var(--theme-primary-color);border-left:3px solid var(--theme-secondary-color);font-weight:600;
        }
        .mega-cat-sidebar-item .cat-icon {
            width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;
            font-size:16px;flex-shrink:0;transition:all .15s;
        }
        .mega-cat-sidebar-item:hover .cat-icon, .mega-cat-sidebar-item.is-active .cat-icon {
            background:linear-gradient(135deg,var(--theme-secondary-color),color-mix(in srgb, var(--theme-secondary-color) 85%, black));color:#fff;
        }
        .mega-sub-link {
            display:flex;align-items:center;gap:10px;padding:10px 14px;
            text-decoration:none;transition:all .15s;border:1px solid transparent;
        }
        .mega-sub-link:hover {
            background:color-mix(in srgb, var(--theme-secondary-color) 5%, transparent);
            border-color:color-mix(in srgb, var(--theme-secondary-color) 18%, transparent);
        }
        .mega-sub-link .sub-icon {
            width:36px;height:36px;background:color-mix(in srgb, var(--theme-secondary-color) 10%, transparent);
            display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--theme-secondary-color);
            flex-shrink:0;transition:all .15s;
            border:1px solid color-mix(in srgb, var(--theme-secondary-color) 20%, transparent);
        }
        .mega-sub-link:hover .sub-icon {
            background:var(--theme-secondary-color);color:#fff;border-color:var(--theme-secondary-color);
        }

        /* ════════════════════════════════════════════════════════
           MEGA MENU v2 — MINIMALIST MONOCHROME
           Strict palette: white / black / dark grey / light grey
           with RED as the sole accent (active state, CTA, hover fill).
           Zero gradients, zero shimmer, zero radial glows.
           ════════════════════════════════════════════════════════ */
        .mega-dropdown.mega-v2{margin-top:0;}
        /* Dropdown shell — soft drop-shadow only, no top hairline so the
           dropdown's top edge blends seamlessly into the navy nav above. */
        .mega-v2-shell{
            background:#fff;
            box-shadow:
                0 12px 32px rgba(0,0,0,.12),
                1px 0 0 #e5e5e5,
                -1px 0 0 #e5e5e5,
                0 1px 0 #e5e5e5;
            border:none;overflow:hidden;
            position:relative;
            border-radius:0;
        }
        /* (Removed maroon hairline that previously sat between the main nav and
           the dropdown frame — visually too heavy.) */

        /* Top bar — flat white, black text */
        .mega-v2-topbar{
            display:flex;align-items:center;justify-content:space-between;
            padding:10px 20px;
            background:#fff;
            color:#111;
            font-size:12px;font-weight:600;
            position:relative;
            border-bottom:1px solid #e5e5e5;
        }
        .mega-v2-topbar-left{
            display:flex;align-items:center;gap:8px;
            color:#111;
            font-family:var(--theme-font-heading);
            font-size:11.5px;font-weight:700;letter-spacing:.3px;
            text-transform:uppercase;
        }
        .mega-v2-topbar-left i{
            color:#111;font-size:15px;
        }
        .mega-v2-topbar-right{display:flex;align-items:center;gap:4px;}
        .mega-v2-topbar-right a{
            display:inline-flex;align-items:center;gap:6px;
            padding:6px 12px;
            font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
            color:#111;text-decoration:none;transition:color .15s, background .15s, border-color .15s;
            border:1px solid transparent;
        }
        .mega-v2-topbar-right a i{font-size:12px;color:#5a5a5a;}
        .mega-v2-topbar-right a:hover{
            color:var(--theme-secondary-color);
        }
        .mega-v2-topbar-right a:hover i{color:var(--theme-secondary-color);}
        /* The single red accent CTA — "Offers & Deals" */
        .mega-v2-topbar-right a.mv-hot{
            color:#fff;
            background:var(--theme-secondary-color);
            border-color:var(--theme-secondary-color);
        }
        .mega-v2-topbar-right a.mv-hot i{color:#fff;}
        .mega-v2-topbar-right a.mv-hot:hover{
            background:#111;
            border-color:#111;
            color:#fff;
        }
        .mega-v2-topbar-right a.mv-hot:hover i{color:#fff;}

        /* Body — 3 columns: rail | stage (scroll) | brands. Condensed height. */
        .mega-v2-body{
            display:grid;
            grid-template-columns:220px 1fr 250px;
            height:500px;
        }
        .mega-v2-rail,
        .mega-v2-stage,
        .mega-v2-brands{
            min-height:0;
        }

        /* Column 1 — Rail — uses theme-primary navy so it visually
           continues the nav bar (where the SHOP ALL trigger lives).
           Subtle top-to-bottom darkening for depth without gradient bloom. */
        .mega-v2-rail{
            background:linear-gradient(180deg,
                var(--theme-primary-color) 0%,
                color-mix(in srgb, var(--theme-primary-color) 88%, black) 100%);
            padding:0;        /* first L1 button (LIQUOR) sits flush with the top */
            display:flex;flex-direction:column;gap:0;
            overflow-y:auto;
            position:relative;
        }
        /* Barely-visible vertical divider line between rail and stage */
        .mega-v2-rail::after{
            content:'';position:absolute;top:0;right:0;bottom:0;width:1px;
            background:rgba(0,0,0,.25);z-index:2;
        }
        /* L1 rail — text-only, ishopchangi-style. No icon column. */
        .mv-rail-btn{
            all:unset;cursor:pointer;
            display:flex;align-items:center;justify-content:space-between;gap:10px;
            padding:13px 18px 13px 18px;
            color:rgba(255,255,255,.85);
            transition:background .15s, color .15s;
            position:relative;
            border-left:3px solid transparent;
        }
        /* Hover + active share the white-cutout treatment — the row
           visually merges with the stage (subcategories) to the right,
           as if the tab has opened a window into the white content. */
        .mv-rail-btn:hover,
        .mv-rail-btn.is-active{
            background:#fff;
            color:var(--theme-secondary-color);
            border-left-color:var(--theme-secondary-color);
        }
        .mv-rail-btn.is-active::before{display:none;}
        .mv-rail-nm{
            font-family:var(--theme-font-heading);
            font-size:13px;font-weight:700;color:inherit;
            line-height:1.15;letter-spacing:.6px;
            text-transform:uppercase;
            flex:1;min-width:0;
        }
        .mv-rail-arrow{font-size:14px;color:rgba(255,255,255,.4);opacity:0;transition:opacity .15s, color .15s, transform .15s;flex-shrink:0;}
        .mv-rail-btn:hover .mv-rail-arrow,
        .mv-rail-btn.is-active .mv-rail-arrow{
            opacity:1;color:var(--theme-secondary-color);transform:translateX(2px);
        }

        /* Rail scrollbar — thin white */
        .mega-v2-rail::-webkit-scrollbar{width:3px;}
        .mega-v2-rail::-webkit-scrollbar-track{background:transparent;}
        .mega-v2-rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);}
        .mega-v2-rail::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3);}
        .mega-v2-rail{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent;}

        /* Column 2 — Stage (flat white, condensed) */
        .mega-v2-stage{
            padding:0 22px 14px;        /* zero top padding — heading carries its own */
            background:#fff;
            overflow-y:auto;
            position:relative;
        }
        .mv-stage-panel{display:flex;flex-direction:column;gap:14px;}
        /* Heading is the click target — replaces the old separate "View All"
           button. Top padding (13px) matches the L1 rail button's vertical
           padding so the "Liquor" heading text and the "LIQUOR" sidebar text
           sit on the same baseline. */
        .mv-stage-head{
            display:block;
            padding:13px 0 10px;border-bottom:1px solid #e5e5e5;
            text-decoration:none;
            transition:color .15s;
        }
        .mv-stage-nm{
            font-family:var(--theme-font-heading);
            font-size:15px;font-weight:800;color:#111;
            margin:0;line-height:1.15;letter-spacing:.6px;text-transform:uppercase;
            display:inline-flex;align-items:center;gap:8px;
            transition:color .15s, gap .15s;
        }
        .mv-stage-nm i{font-size:18px;color:var(--c-ink-4);transition:color .15s, transform .15s;}
        .mv-stage-head:hover .mv-stage-nm{color:var(--theme-secondary-color);gap:12px;}
        .mv-stage-head:hover .mv-stage-nm i{color:var(--theme-secondary-color);transform:translateX(2px);}

        /* Quick-link chips — slim, refined, ishopchangi-style.
           Soft neutral pill with a subtle hairline; lifts on hover with a
           maroon underline. Single CTA variant (mv-quick-red) is filled. */
        .mv-quick-row{
            display:flex;flex-wrap:wrap;gap:8px;
            padding:0;margin:0 0 6px;
            background:transparent;border:0;box-shadow:none;
        }
        .mv-quick-chip{
            display:inline-flex;align-items:center;gap:6px;
            padding:7px 14px;border-radius:999px;
            font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
            text-decoration:none;white-space:nowrap;
            background:var(--c-surface-2);
            color:var(--c-ink-2);
            border:1px solid transparent;
            transition:color .18s, background .18s, border-color .18s, box-shadow .18s, transform .18s;
            position:relative;
        }
        .mv-quick-chip i{
            font-size:13px;
            color:var(--theme-secondary-color);
            transition:color .18s;
        }
        .mv-quick-chip:hover{
            background:#fff;
            color:var(--theme-secondary-color);
            border-color:color-mix(in srgb, var(--theme-secondary-color) 32%, transparent);
            box-shadow:0 4px 12px -4px rgba(156,35,80,.18);
            transform:translateY(-1px);
        }
        .mv-quick-chip:hover i{color:var(--theme-secondary-color);}

        /* GOLD variant — same refined neutral chip */
        .mv-quick-chip.mv-quick-gold{background:var(--c-surface-2);color:var(--c-ink-2);border-color:transparent;}
        .mv-quick-chip.mv-quick-gold:hover{
            background:#fff;color:var(--theme-secondary-color);
            border-color:color-mix(in srgb, var(--theme-secondary-color) 32%, transparent);
        }

        /* NAVY variant — same refined neutral chip */
        .mv-quick-chip.mv-quick-navy{background:var(--c-surface-2);color:var(--c-ink-2);border-color:transparent;}
        .mv-quick-chip.mv-quick-navy:hover{
            background:#fff;color:var(--theme-secondary-color);
            border-color:color-mix(in srgb, var(--theme-secondary-color) 32%, transparent);
        }

        /* RED — SOLE accent variant (filled maroon) */
        .mv-quick-chip.mv-quick-red{
            background:var(--theme-secondary-color);
            color:#fff;
            border-color:var(--theme-secondary-color);
        }
        .mv-quick-chip.mv-quick-red i{color:#fff;}
        .mv-quick-chip.mv-quick-red:hover{
            background:color-mix(in srgb, var(--theme-secondary-color) 80%, black);
            color:#fff;
            border-color:color-mix(in srgb, var(--theme-secondary-color) 80%, black);
            box-shadow:0 6px 16px -4px rgba(156,35,80,.36);
        }
        .mv-quick-chip.mv-quick-red:hover i{color:#fff;}

        /* L2 subcategory rows — clean, ishopchangi-style.
           Heading is the only click target for "view all"; no separate count. */
        .mv-l2-list{display:flex;flex-direction:column;gap:0;}
        .mv-l2-row{
            display:flex;flex-direction:column;gap:8px;
            padding:12px 0 14px;
            border-bottom:1px solid #efefef;
        }
        .mv-l2-row:last-child{border-bottom:0;}
        .mv-l2-head{
            display:inline-flex;align-items:center;gap:6px;
            text-decoration:none;color:inherit;
            padding:0;
            transition:color .15s, gap .15s;
            align-self:flex-start;
        }
        .mv-l2-nm{
            font-family:var(--theme-font-heading);
            font-size:13px;font-weight:800;color:#111;
            line-height:1.15;letter-spacing:.5px;text-transform:uppercase;
            transition:color .15s;
        }
        .mv-l2-arrow{
            font-size:16px;color:var(--c-ink-4);
            transition:transform .15s, color .15s;
        }
        .mv-l2-head:hover{gap:10px;}
        .mv-l2-head:hover .mv-l2-nm,
        .mv-l2-head:hover .mv-l2-arrow{color:var(--theme-secondary-color);}
        .mv-l2-head:hover .mv-l2-arrow{transform:translateX(2px);}

        /* L3 tiles — text-only chip, clean two-line max wrap, no circular icon */
        .mv-l3-list{
            display:grid;
            grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
            gap:4px 14px;
            padding:0;
        }
        .mv-l3-chip{
            display:flex;align-items:center;
            padding:6px 0;
            background:transparent;border:0;
            text-decoration:none;
            transition:color .15s;
        }
        .mv-l3-nm{
            font-size:12.5px;font-weight:500;color:#5a5a5a;
            line-height:1.3;letter-spacing:.1px;
            transition:color .15s;
        }
        .mv-l3-chip:hover .mv-l3-nm{color:var(--theme-secondary-color);}

        /* Scrollbar */
        .mega-v2-stage::-webkit-scrollbar{width:6px;}
        .mega-v2-stage::-webkit-scrollbar-track{background:transparent;}
        .mega-v2-stage::-webkit-scrollbar-thumb{background:var(--c-line);border-radius:0;}
        .mega-v2-stage::-webkit-scrollbar-thumb:hover{background:#5a5a5a;}
        .mega-v2-stage{scrollbar-width:thin;scrollbar-color:var(--c-line) transparent;}
        .mv-more-subs{
            display:inline-flex;align-items:center;gap:4px;
            color:#111;font-size:12px;font-weight:600;text-decoration:none;
            padding:6px 0;
        }
        .mv-more-subs:hover{color:var(--theme-secondary-color);}

        .mv-empty{text-align:center;padding:30px 0;}
        .mv-empty i{font-size:40px;color:var(--c-line);opacity:1;}
        .mv-empty p{font-size:13px;color:var(--c-ink-4);margin:10px 0 14px;}
        .mv-empty-cta{
            display:inline-flex;align-items:center;gap:6px;
            padding:10px 20px;
            background:var(--theme-secondary-color);color:#fff;
            font-size:12px;font-weight:700;text-decoration:none;letter-spacing:.4px;text-transform:uppercase;
            transition:background .15s, border-color .15s;
            border:1px solid var(--theme-secondary-color);
        }
        .mv-empty-cta:hover{background:#111;border-color:#111;color:#fff;}

        /* mv-promo block — flat dark grey, no gradients */
        .mv-promo{
            display:flex;align-items:center;justify-content:space-between;
            padding:11px 14px;margin-top:auto;
            background:#f6f6f6;
            gap:12px;
            border:1px solid #e5e5e5;
            position:relative;overflow:hidden;
        }
        .mv-promo-lft{display:flex;align-items:center;gap:10px;}
        .mv-promo-lft i{font-size:18px;color:#5a5a5a;}
        .mv-promo-lft span{font-size:12px;color:#111;}
        .mv-promo-lft strong{color:#111;font-weight:800;}
        .mv-promo a{
            font-size:12px;font-weight:700;color:var(--theme-secondary-color);text-decoration:none;
            white-space:nowrap;transition:color .15s;
        }
        .mv-promo a:hover{color:#111;}

        /* Column 3 — Featured Brands — clean white panel, single thin divider
           from the stage. Logos sit on the white surface with light borders. */
        .mega-v2-brands{
            background:#fff;
            border-left:1px solid #e5e5e5;
            padding:18px 18px 16px;
            display:flex;flex-direction:column;
            overflow-y:auto;
            position:relative;
        }
        .mv-brands-panel{display:flex;flex-direction:column;gap:14px;height:100%;}
        .mv-brands-head{
            display:flex;align-items:center;gap:8px;
            font-family:var(--theme-font-heading);
            font-size:10.5px;font-weight:800;color:var(--theme-primary-color);
            text-transform:uppercase;letter-spacing:1.8px;
            padding:0 0 12px;
            border-bottom:1px solid #e5e5e5;
            position:relative;
        }
        .mv-brands-head::after{
            content:'';position:absolute;left:0;bottom:-1px;width:32px;height:2px;
            background:var(--theme-secondary-color);
        }
        .mv-brands-head i{
            font-size:13px;
            color:var(--theme-secondary-color);
        }
        /* 3-up grid sized so the right column never clips the rounded card.
           min-content guards against Clearbit logo widths overflowing. */
        .mv-brands-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0, 1fr));
            gap:8px 6px;
            width:100%;
            box-sizing:border-box;
        }
        /* No outer card chrome — the round logo IS the chip. */
        .mv-brand-card{
            display:flex;flex-direction:column;align-items:center;gap:5px;
            padding:6px 3px;
            background:transparent;
            border:0;
            border-radius:0;
            text-decoration:none;
            transition:transform .2s ease;
            position:relative;
            min-width:0;
            overflow:hidden;
        }
        .mv-brand-card:hover{transform:translateY(-1px);}
        .mv-brand-logo{
            width:38px;height:38px;        /* 30% smaller than 54px */
            display:flex;align-items:center;justify-content:center;
            background:#fff;
            border:1px solid #e5e5e5;
            border-radius:50%;
            overflow:hidden;
            flex-shrink:0;
            transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
        }
        .mv-brand-card:hover .mv-brand-logo{
            border-color:color-mix(in srgb, var(--theme-secondary-color) 36%, #e5e5e5);
            box-shadow:0 4px 10px -4px rgba(156,35,80,.22);
            transform:scale(1.05);
        }
        .mv-brand-logo img{
            max-width:80%;max-height:80%;object-fit:contain;
            mix-blend-mode:multiply;
            filter:none;
            transition:transform .2s;
        }
        .mv-brand-card:hover .mv-brand-logo{transform:scale(1.05);}
        .mv-brand-card:hover .mv-brand-logo img{transform:scale(1.04);}
        .mv-brand-initials{
            font-family:var(--theme-font-heading);
            font-size:11px;font-weight:800;
            color:var(--theme-primary-color);
            letter-spacing:.4px;
            display:flex;align-items:center;justify-content:center;
            width:100%;height:100%;
            background:linear-gradient(135deg, color-mix(in srgb, var(--theme-tertiary-color) 16%, #fff), #fff);
            border-radius:50%;
        }
        .mv-brand-name{
            font-size:9.5px;font-weight:700;color:#3a3a3a;
            text-align:center;line-height:1.15;
            letter-spacing:.15px;
            max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
            transition:color .15s;
        }
        .mv-brand-card:hover .mv-brand-name{color:var(--theme-secondary-color);}
        .mv-brands-all{
            display:inline-flex;align-items:center;justify-content:center;gap:6px;
            margin-top:auto;padding:11px 14px;
            background:transparent;
            color:var(--theme-primary-color);
            font-family:var(--theme-font-heading);
            font-size:11px;font-weight:800;
            text-decoration:none;letter-spacing:1.2px;text-transform:uppercase;
            border:1px solid var(--theme-primary-color);
            border-radius:6px;
            transition:background .18s, color .18s, border-color .18s;
        }
        .mv-brands-all:hover{
            background:var(--theme-primary-color);
            color:#fff;
            border-color:var(--theme-primary-color);
        }
        .mv-brands-empty{
            text-align:center;
            padding:36px 14px;
            color:#7a6f55;
            background:rgba(255,255,255,0.5);
            border:1px dashed color-mix(in srgb, var(--theme-tertiary-color) 36%, transparent);
            border-radius:10px;
        }
        .mv-brands-empty i{
            font-size:32px;
            color:color-mix(in srgb, var(--theme-tertiary-color) 60%, #6b5f3d);
            opacity:.7;
        }
        .mv-brands-empty p{font-size:12px;margin:10px 0 12px;color:#7a6f55;}
        .mv-brands-empty a{font-size:12px;font-weight:800;color:var(--theme-secondary-color);text-decoration:none;letter-spacing:.5px;}

        /* (Foot trust bar CSS removed along with its markup — kept the
            dropdown focused on category navigation only.) */

        /* Responsive fallback (below lg nav is hidden, but safety) */
        @media (max-width:1380px){
            .mega-v2{width:1120px !important;}
            .mega-v2-body{grid-template-columns:205px 1fr 230px;}
            .mv-brands-grid{grid-template-columns:repeat(3, 1fr);gap:8px 6px;}
            .mv-brand-logo{width:44px;height:44px;}
        }
        @media (max-width:1240px){
            .mega-v2{width:960px !important;}
            .mega-v2-body{grid-template-columns:190px 1fr 210px;}
        }

        /* ═══ PRODUCT CARD — white background + image blend ═══ */
        .ddf-card-visual                         { background:#fff !important; }
        .ddf-card-img                            { mix-blend-mode:multiply !important; filter:none !important; }
        .ddf-card-img-wrap                       { background:#fff; }

        /* ═══ PROMO OFFER STRIP on product card ═══ */
        /* Promo strip — refined "ribbon" footer at the bottom of product cards.
           Vertical gradient + inner-highlight/sealed-edge shadows so the strip
           reads as a printed ribbon rather than a flat colour block.       */
        .ddf-promo-strip{
            display:flex;align-items:center;justify-content:center;gap:8px;
            padding:9px 12px;
            font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
            position:relative;overflow:hidden;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.18),
                inset 0 -1px 0 rgba(0,0,0,.18);
        }
        .ddf-promo-strip::before{
            content:'';position:absolute;inset:0;
            background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.10) 50%, transparent 62%);
            pointer-events:none;
        }
        .ddf-promo-strip > *{position:relative;z-index:1;}
        .ddf-promo-strip i{font-size:13px;line-height:1;opacity:.92;}
        /* Maroon-and-gold tokens both alias to the brand maroon in this theme;
           keep them visually identical so design stays disciplined. */
        .ddf-promo-maroon { background:linear-gradient(180deg,var(--theme-secondary-color) 0%,color-mix(in srgb, var(--theme-secondary-color) 78%, black) 100%);color:#fff !important; }
        .ddf-promo-gold   { background:linear-gradient(180deg,var(--theme-secondary-color) 0%,color-mix(in srgb, var(--theme-secondary-color) 78%, black) 100%);color:#fff !important; }
        .ddf-promo-navy   { background:linear-gradient(180deg,var(--theme-primary-color) 0%,color-mix(in srgb, var(--theme-primary-color) 82%, black) 100%);color:#fff !important; }
        .ddf-promo-teal   { background:linear-gradient(180deg,var(--theme-primary-color) 0%,color-mix(in srgb, var(--theme-primary-color) 82%, black) 100%);color:#fff !important; }
        .ddf-promo-strip, .ddf-promo-strip i { color:#fff !important; }

        /* ═══ RESPONSIVE UTILITY FIXES ═══
           Tailwind responsive prefixes (sm:, md:, lg:, xl:) are compiled WITHOUT
           @media queries in shop.css. We must re-declare them here with proper
           media queries so they override the base utility classes. */
        @media(min-width:640px){
            .hidden.sm\:block  { display:block !important; }
            .hidden.sm\:flex   { display:flex !important; }
            .hidden.sm\:grid   { display:grid !important; }
            .hidden.sm\:inline { display:inline !important; }
            .hidden.sm\:inline-flex { display:inline-flex !important; }
            .sm\:hidden { display:none !important; }
        }
        @media(min-width:768px){
            .hidden.md\:block  { display:block !important; }
            .hidden.md\:flex   { display:flex !important; }
            .hidden.md\:grid   { display:grid !important; }
            .hidden.md\:inline { display:inline !important; }
            .hidden.md\:inline-flex { display:inline-flex !important; }
            .md\:hidden { display:none !important; }
        }
        @media(min-width:1024px){
            .hidden.lg\:block  { display:block !important; }
            .hidden.lg\:flex   { display:flex !important; }
            .hidden.lg\:grid   { display:grid !important; }
            .hidden.lg\:inline { display:inline !important; }
            .hidden.lg\:inline-flex { display:inline-flex !important; }
            .lg\:hidden, .h-action-btn.lg\:hidden,
            button.lg\:hidden.h-action-btn { display:none !important; }
        }
        @media(min-width:1280px){
            .hidden.xl\:block  { display:block !important; }
            .hidden.xl\:flex   { display:flex !important; }
            .hidden.xl\:grid   { display:grid !important; }
            .xl\:hidden { display:none !important; }
        }

        /* ═══ PDP GRID LAYOUT — arbitrary Tailwind values not in shop.css ═══ */
        @media(min-width:768px){
            .md\:grid-cols-\[1fr_1fr\] { grid-template-columns:1fr 1fr !important; }
            .md\:grid-cols-2 { grid-template-columns:repeat(2,1fr) !important; }
            .md\:col-span-2 { grid-column:span 2 / span 2 !important; }
        }
        @media(min-width:1280px){
            .xl\:grid-cols-\[1fr_1\.2fr_340px\] { grid-template-columns:1fr 1.2fr 340px !important; }
            .xl\:grid-cols-3 { grid-template-columns:repeat(3,1fr) !important; }
            .xl\:gap-10 { gap:2.5rem !important; }
            .xl\:col-span-1 { grid-column:span 1 / span 1 !important; }
        }

        /* ═══ HOME PAGE PRODUCT CARD image polish ═══ */
        .pc-img { background:#fff !important; }
        .pc-img img { mix-blend-mode:multiply; filter:drop-shadow(0 2px 8px rgba(0,0,0,.06)); }
        .pc:hover { border-color:var(--theme-secondary-color) !important; }
        .pc .pc-wish { opacity:0; transition:all .2s; }
        .pc:hover .pc-wish { opacity:1; }

        /* ═══ FOOTER TRUST BAR responsive ═══ */
        @media(max-width:768px){
            .footer-trust-grid { grid-template-columns:repeat(2,1fr) !important; }
        }
        @media(max-width:480px){
            .footer-trust-grid { grid-template-columns:1fr !important; }
        }
        /* ═══ FOOTER TOP (brand + offices) responsive ═══ */
        @media(max-width:1024px){
            .footer-top-grid    { grid-template-columns:1fr !important; gap:30px !important; }
            .footer-offices-grid{ grid-template-columns:repeat(3,1fr) !important; }
        }
        @media(max-width:720px){
            .footer-offices-grid{ grid-template-columns:1fr 1fr !important; }
        }
        @media(max-width:480px){
            .footer-offices-grid{ grid-template-columns:1fr !important; }
        }
        /* ═══ FOOTER BODY (4-col) responsive ═══ */
        @media(max-width:1024px){
            .footer-main-grid { grid-template-columns:1fr 1fr !important; gap:30px !important; }
        }
        @media(max-width:480px){
            .footer-main-grid { grid-template-columns:1fr !important; gap:20px !important; }
        }
        /* ═══ FOOTER — tight horizontal padding on small screens ═══ */
        @media(max-width:768px){
            footer > div > div.mx-auto { padding-left:20px !important; padding-right:20px !important; }
        }

        /* ═══ CATEGORY TILES — improved look ═══ */
        .cat-tile .cat-em {
            filter:drop-shadow(0 4px 12px rgba(0,0,0,.15));
            transition:transform .4s;
        }
        .cat-tile:hover .cat-em { transform:scale(1.1); }

        /* ═══ HOW IT WORKS — hover effects ═══ */
        .hiw-item { transition:background .2s; }
        .hiw-item:hover { background:rgba(194,24,41,.02); }
        .hiw-item:hover .hiw-n { transform:scale(1.1); box-shadow:0 4px 12px rgba(194,24,41,.25); }
        .hiw-n { transition:transform .2s,box-shadow .2s; }

        /* ═══ BRAND TILES — consistent styling ═══ */
        .brand-tile-item { transition:all .25s !important; }
        .brand-tile-item:hover { border-color:var(--theme-secondary-color) !important; box-shadow:0 4px 16px rgba(194,24,41,.1) !important; transform:translateY(-2px); }

        /* ═══ ALLOWANCE STRIP — card hover ═══ */
        .aw-item { transition:background .2s; }
        .aw-item:hover { background:rgba(255,255,255,.06); }
        .aw-item:hover .aw-ic { transform:scale(1.08); box-shadow:0 0 20px rgba(184,151,58,.15); }
        .aw-ic { transition:transform .2s,box-shadow .2s; }

        /* ═══ SCROLL PROGRESS BAR ═══ Hairline of maroon at the very top, fills as user scrolls. Subtle prestige cue. */
        .scroll-progress {
            position:fixed;top:0;left:0;height:2px;width:0;z-index:200;pointer-events:none;
            background:linear-gradient(90deg,
                color-mix(in srgb, var(--theme-secondary-color) 70%, transparent) 0%,
                var(--theme-secondary-color) 50%,
                color-mix(in srgb, var(--theme-secondary-color) 80%, white) 100%);
            box-shadow:0 0 12px color-mix(in srgb, var(--theme-secondary-color) 55%, transparent);
            transition:width .12s linear;
        }

        /* ═══ SCROLL-TO-TOP BUTTON ═══ */
        .scroll-top-btn {
            position:fixed;bottom:24px;right:24px;z-index:99;
            width:46px;height:46px;border-radius:50%;
            background:var(--theme-primary-color);color:#fff;border:1.5px solid color-mix(in srgb, var(--theme-secondary-color) 35%, transparent);
            display:flex;align-items:center;justify-content:center;
            cursor:pointer;box-shadow:0 8px 24px -6px color-mix(in srgb, var(--theme-primary-color) 45%, transparent);
            transition:all .35s cubic-bezier(.2,.8,.2,1);opacity:0;transform:translateY(12px);pointer-events:none;
        }
        .scroll-top-btn.visible { opacity:1;transform:translateY(0);pointer-events:auto; }
        .scroll-top-btn:hover { background:var(--theme-secondary-color);color:#fff;border-color:var(--theme-secondary-color);transform:translateY(-3px) scale(1.04); box-shadow:0 14px 30px -8px color-mix(in srgb, var(--theme-secondary-color) 55%, transparent); }

        [x-cloak]{display:none !important;}

/* == Block 2 == */

/* ════════════════════════════════════════════════
   DDF HOME v4 — White / Deep-Navy / Maroon
   Fonts: Inter (body) + Mulish (display)
   Colors match delhidutyfree.co.in
   ════════════════════════════════════════════════ */

/* ── Logo-native palette ────────────────────────
   GMR Aero brand colors drive everything: primary navy #003e7e,
   secondary red #9c2350, tertiary yellow #9c2350. No cream, no antique
   gold — only the actual mark. Dark surfaces are navy, page tint is a
   very faint cool-white blue wash, yellow is the premium accent. */
:root{
  --n: var(--theme-primary-color);             /* GMR navy #003e7e — main dark surface */
  --n-1: color-mix(in srgb, var(--theme-primary-color) 88%, black);  /* deepened navy */
  --n-2: color-mix(in srgb, var(--theme-primary-color) 70%, black);  /* navy gradient base */
  --n-hi: color-mix(in srgb, var(--theme-primary-color) 92%, white); /* lifted navy */
  --ink: #0d1117;                               /* near-black for readable headings & body text */
  --ink-2: #1c2230;                             /* very dark grey for secondary text */
  --n2: color-mix(in srgb, var(--theme-primary-color) 85%, white);
  --m: var(--theme-secondary-color);            /* red #9c2350 — sale + HOT badges + primary CTAs */
  --m-ink: color-mix(in srgb, var(--theme-secondary-color) 88%, black);
  --wine: color-mix(in srgb, var(--theme-secondary-color) 80%, black);
  /* Palette discipline: home-page accent token aliased to maroon — no yellow/gold leaks anywhere on this surface. */
  --y: var(--theme-secondary-color);
  --y-ink: color-mix(in srgb, var(--theme-secondary-color) 75%, black);
  --y-2: color-mix(in srgb, var(--theme-secondary-color) 25%, white);
  --gold: var(--theme-secondary-color);
  --gold-2: color-mix(in srgb, var(--theme-secondary-color) 80%, white);
  --gold-ink: color-mix(in srgb, var(--theme-secondary-color) 65%, black);
  --cream: #f4f6fb;                             /* faint cool-white with navy tint — tinted sections */
  --cream-2: #ebeff7;                           /* deeper blue-tinted grey for contrast chips */
  --g: var(--theme-secondary-color);
  --wh: var(--theme-neutral-white);
  --bg: var(--cream);
  --card: var(--theme-neutral-white);
  --txt: #0d1117;                               /* near-black body text */
  --mut: #4a5262;                               /* dark grey, readable on cream */
  --brd: color-mix(in srgb, var(--theme-primary-color) 14%, transparent);  /* navy-tinted hairlines */
  --brd-2: color-mix(in srgb, var(--theme-primary-color) 22%, transparent);
  --sh: 0 1px 2px rgba(0,62,126,.05), 0 6px 16px -6px rgba(0,62,126,.14);
  --sh2: 0 2px 4px rgba(0,62,126,.07), 0 18px 36px -12px rgba(0,62,126,.22);
  --sh-navy: 0 12px 32px -12px color-mix(in srgb, var(--theme-primary-color) 45%, transparent);
  --sh-red:  0 10px 28px -10px color-mix(in srgb, var(--theme-secondary-color) 45%, transparent);
  --sh-gold: 0 10px 28px -10px color-mix(in srgb, var(--theme-secondary-color) 55%, transparent);
  --r: 12px;
  --r2: 8px;
  --ff: var(--theme-font-body);
  --ffd: 'Playfair Display', Georgia, serif;   /* editorial display serif */
  --ffs: 'Cormorant Garamond', Georgia, serif; /* inline italic serif */

  /* ── UNIFIED SECTION RHYTHM ──
     Every full-width section uses these exact numbers, so tops and bottoms
     line up across Hero → Trust → Categories → New → Promo → Best → Brands. */
  --sec-py: 96px;                               /* desktop vertical padding */
  --sec-py-lg: 72px;                            /* tablet */
  --sec-py-md: 56px;                            /* mobile */
  --sec-gap: 56px;                              /* header → content gap */
  --sec-head-gap: 6px;                          /* eyebrow → h2 → dek stack (tight) */
  --tab-head-gap: 24px;                         /* tab-section title block → tab rail */
}
[x-cloak]{ display:none!important; }
*,::before,::after{ box-sizing:border-box; }
body{ font-family:var(--ff); color:var(--txt); }

/* ── PALETTE DISCIPLINE — accent on navy is GOLD, not maroon ──
   Inside any navy-bg section, re-alias the accent tokens to true gold so
   icons, eyebrows, underlines, and unit chips read warmly against the dark
   surface. Maroon stays the accent on white/cream surfaces. */
.hero, .promo, .aw-strip, .sec-navy, .ftr {
  --y: #ffc72c;
  --y-ink: #b8860b;
  --y-2: color-mix(in srgb, #ffc72c 25%, white);
  --gold: #ffc72c;
  --gold-2: color-mix(in srgb, #ffc72c 80%, white);
  --gold-ink: color-mix(in srgb, #ffc72c 65%, black);
  --g: #ffc72c;
  --sh-gold: 0 10px 28px -10px rgba(255,199,44,.55);
}

/* ── MODALS — backdrop ────────────────────────── */
.modal-back{
  position:fixed;inset:0;z-index:900;
  background:rgba(13,27,46,.72);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:16px;
}

/* ── AGE GATE ─────────────────────────────────── */
.age-card{
  width:min(440px,94vw);background:var(--wh);
  border-radius:20px;overflow:hidden;
  box-shadow:0 24px 64px rgba(13,27,46,.24);
}
.age-top{
  padding:36px 32px 28px;text-align:center;
  background:var(--n);
}
.age-top img{ height:48px;margin:0 auto 20px; }
.age-top .mono{font-family:var(--ffd);font-size:26px;font-weight:800;color:#fff;letter-spacing:-0.5px;}
.age-top p{font-size:13px;color:rgba(255,255,255,.52);margin:6px 0 0;}
.age-body{padding:24px 32px 28px;}
.age-dob{display:flex;gap:8px;margin-bottom:18px;}
.age-dob select{
  flex:1;padding:11px 10px;border-radius:var(--r2);
  border:1.5px solid var(--brd);font-size:13px;color:var(--txt);
  font-family:var(--ff);appearance:none;background:#fff;cursor:pointer;
  transition:border-color .15s;
}
.age-dob select:focus{outline:none;border-color:var(--n);}
.age-note{font-size:12px;color:var(--mut);line-height:1.55;margin-bottom:20px;}
.btn-age{
  display:block;width:100%;padding:14px;border-radius:var(--r2);
  border:none;cursor:pointer;font-family:var(--ff);font-size:15px;font-weight:700;
  transition:opacity .15s,transform .15s;
}
.btn-age-yes{background:var(--m);color:#fff;margin-bottom:8px;}
.btn-age-yes:hover:not(:disabled){opacity:.9;transform:translateY(-1px);}
.btn-age-yes:disabled{opacity:.4;cursor:not-allowed;}
.btn-age-no{background:transparent;color:var(--mut);border:1.5px solid var(--brd);font-size:13px;}
.btn-age-no:hover{border-color:var(--n);color:var(--n);}

/* ── JOURNEY MODAL ────────────────────────────── */
.jm-card{
  width:min(560px,96vw);max-height:92vh;overflow-y:auto;
  background:var(--wh);border-radius:20px;
  box-shadow:0 24px 64px rgba(13,27,46,.24);
}
.jm-header{
  padding:26px 28px 20px;background:var(--n);position:sticky;top:0;z-index:2;
}
.jm-header h2{font-family:var(--ffd);font-size:20px;font-weight:700;color:#fff;margin:0 0 2px;}
.jm-header p{font-size:12px;color:rgba(255,255,255,.5);margin:0;}
.jm-close{
  position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);border:none;color:#fff;font-size:18px;cursor:pointer;
}
.jm-close:hover{background:rgba(255,255,255,.2);}
.jm-body{padding:24px 28px 28px;}

/* Step dots */
.jm-dots{display:flex;align-items:center;gap:6px;margin-bottom:24px;}
.jm-dot{
  height:4px;border-radius:99px;transition:all .25s;background:var(--brd);
}
.jm-dot.act{background:var(--m);flex:2;}
.jm-dot.done{background:var(--n);flex:1.2;}
.jm-dot.idle{flex:1;}

/* Journey type cards */
.jtype-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;}
.jtype{
  padding:18px 14px;border:2px solid var(--brd);border-radius:var(--r);
  cursor:pointer;text-align:center;transition:all .15s;
}
.jtype:hover{border-color:var(--n);}
.jtype.sel{border-color:var(--n);background:var(--n);}
.jtype i{font-size:32px;display:block;margin-bottom:8px;color:var(--n);transition:color .15s;}
.jtype.sel i{color:var(--g);}
.jtype h3{font-weight:700;font-size:14px;margin:0 0 2px;color:var(--txt);transition:color .15s;}
.jtype.sel h3{color:#fff;}
.jtype p{font-size:11px;color:var(--mut);margin:0;transition:color .15s;}
.jtype.sel p{color:rgba(255,255,255,.55);}
.jtype .tick{
  position:absolute;top:8px;right:8px;width:18px;height:18px;
  border-radius:50%;background:var(--g);
  display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--n);
}
.jtype{position:relative;}

/* Form inputs */
.jm-label{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--mut);display:block;margin-bottom:5px;}
.jm-input{
  width:100%;padding:11px 13px;border-radius:var(--r2);
  border:1.5px solid var(--brd);font-size:14px;font-family:var(--ff);color:var(--txt);
  transition:border-color .15s;outline:none;
}
.jm-input:focus{border-color:var(--n);}
.jm-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
.jm-field{margin-bottom:16px;}

/* Airline found hint */
.airline-hint{
  margin-top:5px;padding:7px 11px;border-radius:8px;
  background:color-mix(in srgb, var(--theme-primary-color) 6%, var(--theme-neutral-white));border:1px solid color-mix(in srgb, var(--theme-primary-color) 25%, var(--theme-neutral-white));
  font-size:12px;color:color-mix(in srgb, var(--theme-primary-color) 80%, black);font-weight:600;
  display:flex;align-items:center;gap:5px;
}

/* Stepper */
.j-step-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--brd);}
.j-step-row:last-of-type{border-bottom:none;}
.j-step-info h4{font-size:14px;font-weight:600;color:var(--txt);margin:0 0 2px;}
.j-step-info p{font-size:12px;color:var(--mut);margin:0;}
.j-ctr{display:flex;align-items:center;border:1.5px solid var(--brd);border-radius:var(--r2);overflow:hidden;}
.j-ctr-btn{width:36px;height:36px;background:var(--bg);border:none;cursor:pointer;font-size:16px;font-weight:700;color:var(--n);display:flex;align-items:center;justify-content:center;transition:background .15s;}
.j-ctr-btn:hover{background:var(--brd);}
.j-ctr-val{width:44px;text-align:center;font-size:16px;font-weight:800;color:var(--n);}

/* Allowance preview */
.allow-box{
  margin-top:16px;padding:14px 16px;border-radius:var(--r);
  background:color-mix(in srgb, var(--theme-secondary-color) 8%, var(--theme-neutral-white));border:1px solid color-mix(in srgb, var(--theme-secondary-color) 40%, var(--theme-neutral-white));
}
.allow-box h5{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:color-mix(in srgb, var(--theme-secondary-color) 80%, black);margin:0 0 8px;}
.allow-pills{display:flex;gap:6px;flex-wrap:wrap;}
.allow-pill{
  padding:4px 10px;border-radius:99px;
  background:rgba(194,24,41,.08);border:1px solid rgba(194,24,41,.2);
  font-size:11px;font-weight:700;color:var(--m);
}

/* Modal actions */
.jm-actions{display:flex;gap:8px;margin-top:20px;}
.btn-jm-back{flex:0 0 auto;padding:12px 18px;border-radius:var(--r2);border:1.5px solid var(--brd);background:#fff;font-size:13px;font-weight:600;color:var(--mut);cursor:pointer;font-family:var(--ff);}
.btn-jm-back:hover{border-color:var(--n);color:var(--n);}
.btn-jm-next{flex:1;padding:13px;border-radius:var(--r2);border:none;cursor:pointer;background:var(--m);color:#fff;font-size:14px;font-weight:700;font-family:var(--ff);transition:opacity .15s;}
.btn-jm-next:hover:not(:disabled){opacity:.88;}
.btn-jm-next:disabled{opacity:.4;cursor:not-allowed;}
.jm-skip{text-align:center;margin-top:12px;font-size:12px;color:var(--mut);}
.jm-skip a{color:var(--n);text-decoration:underline;cursor:pointer;}

/* ── JOURNEY BAR ──────────────────────────────── */
.jbar{
  background:var(--n);border-bottom:1px solid rgba(255,255,255,.06);
  padding:8px 0;
}
.jbar-in{
  max-width:1380px;margin:0 auto;padding:0 20px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
/* Journey bar lives on navy, so the tag is a gold chip with navy ink (no maroon over navy). */
.jbar-tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:5px;
  background:#ffc72c;color:var(--n);font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
}
.jbar-sep{width:1px;height:14px;background:rgba(255,255,255,.15);}
.jbar-item{display:flex;align-items:center;gap:5px;font-size:12px;color:rgba(255,255,255,.7);}
.jbar-item i{color:rgba(255,255,255,.35);font-size:13px;}
.jbar-allow{
  display:flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:99px;
  background:rgba(255,255,255,.07);
  font-size:11px;color:rgba(255,255,255,.6);
}
.jbar-allow i{color:var(--g);font-size:12px;}
.jbar-right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.btn-jbar-change{
  padding:5px 12px;border-radius:6px;border:1px solid rgba(255,255,255,.15);
  background:transparent;color:rgba(255,255,255,.6);font-size:11px;font-weight:600;cursor:pointer;font-family:var(--ff);
  transition:all .15s;
}
.btn-jbar-change:hover{border-color:rgba(255,255,255,.35);color:#fff;}

/* ── HERO ─────────────────────────────────────── */
.hero{
  background:var(--n);
  height:clamp(520px,72vh,780px);
  overflow:hidden;position:relative;
}
.hero::before{
  content:'';position:absolute;inset:0;z-index:1;
  /* Two soft maroon halos breathe diagonally across the navy stage —
     palette-locked to the GMR navy + maroon brand pair. */
  background:
    radial-gradient(ellipse 120% 80% at 80% 60%, color-mix(in srgb, var(--theme-secondary-color) 16%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 80% 60% at 20% 80%, color-mix(in srgb, var(--theme-secondary-color) 8%, transparent) 0%, transparent 60%);
  pointer-events:none;
}
.hero::after{
  content:'';position:absolute;bottom:-2px;left:0;right:0;height:80px;z-index:3;
  background:linear-gradient(0deg,var(--wh) 0%,transparent 100%);pointer-events:none;
}

/* ── DDF BANNER HERO ── pure image slides, no overlays/effects ── */
.hero-banner{
  background:#fff;
  height:auto;
  aspect-ratio:1920/580;
  max-height:70vh;
}
.hero-banner::before,
.hero-banner::after{display:none;}
.hero-banner-slide{
  display:block;width:100%;height:100%;
  background:#fff;
  text-decoration:none;
}
.hero-banner-slide img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
.hero .swiper,.hero .swiper-wrapper,.hero .swiper-slide{height:100%;}
.hero-sl{
  height:100%;display:flex;align-items:center;position:relative;
  background:linear-gradient(135deg, var(--theme-primary-color) 0%, color-mix(in srgb, var(--theme-primary-color) 80%, black) 100%);
  overflow:hidden;
}
.hero-product-img{
  position:absolute;right:-4%;top:50%;transform:translateY(-50%);
  max-height:86%;max-width:48%;width:auto;object-fit:contain;z-index:1;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.45));
  transition:transform 8s linear;
}
.swiper-slide-active .hero-product-img{transform:translateY(-50%) scale(1.03);}
.hero-brand{
  display:block;font-family:var(--theme-font-body);
  font-size:clamp(12px,1vw,14px);letter-spacing:3.4px;text-transform:uppercase;
  color:color-mix(in srgb, var(--theme-secondary-color) 35%, white);
  font-weight:700;margin-bottom:10px;
}
.hero-prices{
  display:inline-flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin:-6px 0 30px;
}
.hero-save{
  display:inline-flex;align-items:center;
  padding:6px 14px;border-radius:6px;
  background:var(--theme-secondary-color);color:#fff;
  font-family:var(--theme-font-body);
  font-size:13px;font-weight:800;letter-spacing:.5px;
  box-shadow:0 6px 20px -6px color-mix(in srgb, var(--theme-secondary-color) 65%, transparent);
}
.hero-price-now{
  font-family:var(--theme-font-heading);
  font-size:clamp(24px,2.6vw,34px);font-weight:800;color:#fff;
  letter-spacing:-.01em;
}
.hero-price-was{
  font-family:var(--theme-font-body);
  font-size:clamp(14px,1.1vw,17px);font-weight:500;
  color:rgba(255,255,255,.55);text-decoration:line-through;
}
@media(max-width:900px){
  .hero-product-img{display:none;}
  .hero-body{max-width:100%;}
}
.hero-sl-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.28;transition:transform 8s linear;
}
.swiper-slide-active .hero-sl-bg{transform:scale(1.05);}
.hero-grad{
  position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(13,27,46,.96) 0%,rgba(13,27,46,.7) 45%,rgba(13,27,46,.15) 100%);
}
.hero-body{position:relative;z-index:2;max-width:1340px;margin:0 auto;padding:0 48px;width:100%;}
/* Hero eyebrow lives on navy — gold pill on the dark stage, no maroon over navy. */
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:22px;
  padding:8px 18px;border-radius:99px;
  background:linear-gradient(135deg,rgba(255,199,44,.18),rgba(255,199,44,.06));
  border:1px solid rgba(255,199,44,.42);
  color:#ffc72c;font-family:var(--theme-font-body);
  font-size:12px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;
  backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 4px 16px rgba(0,0,0,.2);
}
.hero-eyebrow i { color:#ffc72c; font-size:13px; }
.hero-h{
  font-family:var(--theme-font-heading);
  font-size:clamp(38px,5.4vw,78px);font-weight:800;
  color:#fff;line-height:1.02;margin:0 0 22px;max-width:820px;
  letter-spacing:-0.028em;
  text-shadow:0 2px 40px rgba(0,0,0,.3);
}
.hero-h em{
  font-style:italic;font-weight:400;
  background:linear-gradient(135deg, color-mix(in srgb, var(--theme-secondary-color) 70%, white) 0%,var(--theme-secondary-color) 50%,color-mix(in srgb, var(--theme-secondary-color) 80%, black) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;
}
.hero-sub{
  font-family:var(--theme-font-body);
  font-size:clamp(15px,1.3vw,18px);
  font-weight:400;
  color:rgba(255,255,255,.72);
  line-height:1.65;max-width:540px;margin:0 0 36px;
  letter-spacing:-0.002em;
}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.btn-h-primary{
  display:inline-flex;align-items:center;gap:8px;
  padding:16px 32px;border-radius:10px;
  background:linear-gradient(135deg,var(--m) 0%,color-mix(in srgb, var(--theme-secondary-color) 85%, black) 100%);color:#fff;font-weight:700;font-size:15px;text-decoration:none;
  transition:all .2s;box-shadow:0 6px 24px rgba(194,24,41,.4),inset 0 1px 0 rgba(255,255,255,.15);
  letter-spacing:.3px;
}
.btn-h-primary:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(194,24,41,.5);filter:brightness(1.1);}
.btn-h-ghost{
  display:inline-flex;align-items:center;gap:8px;
  padding:15px 28px;border-radius:10px;
  border:1.5px solid rgba(255,255,255,.25);color:rgba(255,255,255,.85);
  font-weight:600;font-size:15px;text-decoration:none;
  transition:all .2s;backdrop-filter:blur(4px);background:rgba(255,255,255,.04);
}
.btn-h-ghost:hover{border-color:var(--y);color:#fff;background:color-mix(in srgb, var(--y) 14%, transparent);}
.hero-trust{display:flex;gap:20px;flex-wrap:wrap;margin-top:32px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);}
.hero-t{display:flex;align-items:center;gap:7px;font-size:12px;color:rgba(255,255,255,.5);font-weight:500;}
.hero-t i{color:var(--g);font-size:14px;}
.hero-prev,.hero-next{
  position:absolute;top:50%;transform:translateY(-50%);z-index:10;
  width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.08);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.7);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:20px;transition:all .2s;
}
.hero-prev{left:24px;}
.hero-next{right:24px;}
.hero-prev:hover,.hero-next:hover{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.3);}
.hero-pag{bottom:30px !important;}
.hero-pag .swiper-pagination-bullet{width:8px;height:8px;background:rgba(255,255,255,.35);opacity:1;border-radius:99px;transition:all .35s cubic-bezier(.2,.8,.2,1);}
/* Hero is on navy: active bullet is GOLD (no maroon over navy). */
.hero-pag .swiper-pagination-bullet-active{width:32px;background:#ffc72c;box-shadow:0 0 16px rgba(255,199,44,.55);}

/* Hero scroll-hint — sits at bottom-right of hero, fades in after first frame */
.hero-scroll-hint{
  position:absolute;right:32px;bottom:24px;z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  pointer-events:none;
  font-family:var(--theme-font-body);
  font-size:10px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(255,255,255,.85);
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.hero-scroll-line{
  width:1.5px;height:42px;
  background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.7) 50%,transparent 100%);
  position:relative;overflow:hidden;
}
.hero-scroll-line::after{
  content:'';position:absolute;left:0;top:-50%;width:100%;height:50%;
  background:linear-gradient(180deg,transparent,#fff);
  animation:heroScrollGlide 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes heroScrollGlide{
  0%   {top:-50%;opacity:0;}
  20%  {opacity:1;}
  80%  {opacity:1;}
  100% {top:100%;opacity:0;}
}
.hero-scroll-lbl{writing-mode:vertical-rl;transform:rotate(180deg);}
@media(max-width:768px){.hero-scroll-hint{display:none;}}

/* ── TRUST BAR ──────────────────────────────────
   Quiet, editorial strip directly under the hero. Pure white with hairline
   dividers. Icons tinted navy (brand), red reserved for the seed-dot in the
   ti-ic corner so it reads as a single restrained accent across four tiles. */
.tbar{
  position:relative;z-index:4;
  background:linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--theme-primary-color) 2.5%, white) 100%);
  border-top:1px solid var(--brd);
  border-bottom:1px solid var(--brd);
}
.tbar::before{
  content:'';position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--theme-secondary-color) 40%, transparent) 50%,
    transparent 100%);
}
.tbar-in{
  max-width:1380px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);
}
@media(max-width:640px){.tbar-in{grid-template-columns:repeat(2,1fr);}}
.ti{
  display:flex;align-items:center;gap:14px;
  padding:24px 26px;
  border-right:1px solid var(--brd);
  transition:background .35s cubic-bezier(.2,.8,.2,1);
  position:relative;
}
.ti::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;
  width:0;background:var(--theme-secondary-color);
  transition:width .45s cubic-bezier(.2,.8,.2,1);
}
.ti:last-child{border-right:none;}
.ti:hover{background:color-mix(in srgb, var(--theme-primary-color) 4%, transparent);}
.ti:hover::after{width:100%;}
.ti-ic{
  position:relative;
  width:46px;height:46px;border-radius:13px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:21px;
  background:color-mix(in srgb, var(--theme-primary-color) 7%, transparent);
  color:var(--theme-primary-color);
  border:1px solid color-mix(in srgb, var(--theme-primary-color) 14%, transparent);
  transition:all .35s cubic-bezier(.2,.8,.3,1);
}
.ti-ic::after{
  content:'';position:absolute;top:-2px;right:-2px;
  width:8px;height:8px;border-radius:50%;
  background:var(--theme-secondary-color);
  box-shadow:0 0 0 2px #fff;
  opacity:0;transform:scale(.6);transition:all .25s;
}
.ti:hover .ti-ic{
  background:var(--theme-primary-color);color:#fff;
  border-color:var(--theme-primary-color);transform:translateY(-1px);
  box-shadow:0 8px 18px -8px color-mix(in srgb, var(--theme-primary-color) 60%, transparent);
}
.ti:hover .ti-ic::after{opacity:1;transform:scale(1);}
.ti h4{font-family:var(--theme-font-body);font-size:13px;font-weight:700;color:var(--ink);margin:0 0 3px;letter-spacing:-0.005em;}
.ti p{font-family:var(--theme-font-body);font-size:12px;color:var(--mut);margin:0;line-height:1.5;font-weight:400;}

/* ── PAGE LAYOUT ──────────────────────────────────
   Every section uses the same --sec-py token so top and bottom gaps are
   identical (pixel-symmetrical) across Hero → Trust → Categories → New →
   Promo → Best → Brands. One canvas rule, one rhythm, one break. */
.wrap{max-width:1340px;margin:0 auto;padding:0 32px;}
.sec{padding:var(--sec-py) 0;font-family:var(--theme-font-body);}
@media(max-width:1024px){.sec{padding:var(--sec-py-lg) 0;} .wrap{padding:0 24px;}}
@media(max-width:640px){.sec{padding:var(--sec-py-md) 0;} .wrap{padding:0 20px;}}
.sec-sm{padding:calc(var(--sec-py) / 2) 0;}
/* Tinted section — faint cool-white with a navy tint. Matches the brand
   stack (navy primary) and feels premium without being beige. */
.sec-bg{position:relative;background:var(--cream);}
.sec-bg::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--theme-primary-color) 18%, transparent) 50%,
    transparent 100%);
  pointer-events:none;
}
.sec-navy{background:var(--n);}

/* Editorial section divider — drop in between segments for a luxe page rhythm.
   Renders as a hairline with a tiny maroon diamond in the centre. */
.sec-divider{
  position:relative;height:1px;margin:0;
  background:linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--theme-primary-color) 14%, transparent) 18%,
    color-mix(in srgb, var(--theme-primary-color) 22%, transparent) 50%,
    color-mix(in srgb, var(--theme-primary-color) 14%, transparent) 82%,
    transparent 100%);
}
.sec-divider::after{
  content:'';position:absolute;left:50%;top:50%;
  width:7px;height:7px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--theme-secondary-color);
  box-shadow:0 0 0 4px var(--wh), 0 0 0 5px color-mix(in srgb, var(--theme-secondary-color) 25%, transparent);
}
/* Editorial eyebrow — RED uppercase with a red horizontal rule on the left.
   Red on white / red on tint is the single brand-accent treatment across
   every section heading (universe, arrivals, sellers, brands, promo). */
.lbl{
  font-family:var(--theme-font-body);
  font-size:11px;font-weight:700;
  letter-spacing:.32em;text-transform:uppercase;
  color:var(--m);
  display:inline-flex;align-items:center;gap:12px;
  margin-bottom:14px;
}
.lbl::before{
  content:'';
  width:32px;height:2px;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--m) 40%, transparent) 0%,
    var(--m) 100%);
  flex-shrink:0;
}
/* Premium display serif — Playfair Display with red italic accent.
   Navy body, red emphasis — the two logo colors carrying the typography. */
.h2{
  font-family:var(--ffd);
  font-size:clamp(34px,3.8vw,52px);
  font-weight:600;
  color:var(--ink);
  line-height:1.04;letter-spacing:-0.015em;
  margin:0 0 10px;
}
.h2 em{
  font-family:var(--ffd);
  font-style:italic;font-weight:500;
  color:var(--m);
}
.subh{font-family:var(--theme-font-body);font-size:15px;color:var(--mut);line-height:1.65;margin:10px 0 0;max-width:560px;letter-spacing:.002em;}
.sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:32px;margin-bottom:var(--sec-gap);flex-wrap:wrap;
}
.see-all{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--theme-font-body);
  font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--n);text-decoration:none;padding:11px 20px;border-radius:99px;
  background:transparent;border:1.5px solid var(--brd-2);
  white-space:nowrap;transition:all .22s;
}
.see-all:hover{background:var(--n);color:#fff;border-color:var(--n);transform:translateY(-1px);box-shadow:var(--sh-navy);}
.see-all i{transition:transform .22s;}
.see-all:hover i{transform:translateX(3px);}

/* ── TABBED SLIDER SECTION — editorial rhythm ─────
   Same --sec-py rhythm as .sec. When two tab sections are adjacent, collapse
   the top padding so the visual gap between them equals one section beat. */
.tab-sec{padding:var(--sec-py) 0;font-family:var(--theme-font-body);}
@media(max-width:1024px){.tab-sec{padding:var(--sec-py-lg) 0;}}
@media(max-width:640px){.tab-sec{padding:var(--sec-py-md) 0;}}
/* Same-canvas neighbours → collapse top padding so the total gap = one beat */
.tab-sec + .tab-sec{padding-top:0;}

/* Header row: title block left, View-all CTA right.
   Tab sections have their own tab rail below, so the title→rail gap is tighter
   than a normal .sec (the rail itself already adds breathing room). */
.tab-sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:32px;margin-bottom:var(--tab-head-gap);flex-wrap:wrap;
}
.tab-sec-title{display:flex;flex-direction:column;gap:var(--sec-head-gap);min-width:0;}
.tab-sec-title .h2{
  font-family:var(--ffd);
  color:var(--ink);
  font-size:clamp(30px,3.4vw,44px);
  font-weight:600;letter-spacing:-.012em;line-height:1.04;
  margin:0;
}
.tab-sec-title .h2 em{
  font-family:var(--ffd);
  font-style:italic;font-weight:500;
  color:var(--m);
}
.tab-sec-title .sub{
  font-family:var(--theme-font-body);
  font-size:14.5px;line-height:1.65;
  color:var(--mut);
  margin:0;max-width:540px;
  letter-spacing:.002em;
}
/* Use the unified .lbl eyebrow; dot variant pinned with the theme red */
.tab-sec-title .lbl{margin:0;}
.tab-sec-title .lbl::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--m);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--m) 32%, transparent);
  animation:lblPulse 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes lblPulse{
  0%   {box-shadow:0 0 0 0 color-mix(in srgb, var(--m) 35%, transparent);}
  60%  {box-shadow:0 0 0 8px color-mix(in srgb, var(--m) 0%, transparent);}
  100% {box-shadow:0 0 0 0 color-mix(in srgb, var(--m) 0%, transparent);}
}
.tab-sec-all{
  position:relative;
  display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
  font-family:var(--theme-font-body);
  font-size:11.5px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--n);text-decoration:none;
  padding:8px 0 10px;
  border:0;border-radius:0;background:transparent;
  align-self:flex-end;margin-bottom:4px;
  transition:color .3s ease, gap .3s ease;
}
.tab-sec-all::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--n);
  transform-origin:right center;
  transition:transform .5s cubic-bezier(.4,0,.2,1), background .3s ease;
}
.tab-sec-all:hover{color:var(--m);gap:14px;}
.tab-sec-all:hover::after{
  background:var(--m);
  transform:scaleX(1);transform-origin:left center;
}
.tab-sec-all i{font-size:15px;transition:transform .3s ease;}
.tab-sec-all:hover i{transform:translateX(3px);}

/* Editorial tab rail — navy hairline with RED active-underline.
   The red underline is the GMR brand beat, carried across every tab system. */
.tab-sec-rail{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  margin-bottom:36px;
  border-bottom:1px solid var(--brd);
}
.tab-nav{
  display:flex;align-items:center;gap:0;
  overflow-x:auto;scrollbar-width:none;
  flex:1 1 auto;min-width:0;
}
.tab-nav::-webkit-scrollbar{display:none;}
.tab-nav-btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  height:52px;padding:0 22px;
  background:transparent;border:0;border-radius:0;
  font-family:var(--theme-font-body);
  font-size:12px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--mut);
  cursor:pointer;white-space:nowrap;flex:0 0 auto;
  transition:color .35s ease;
}
.tab-nav-btn:first-child{padding-left:0;}
.tab-nav-btn::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;
  height:2px;background:var(--m);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .4s cubic-bezier(.4,0,.2,1), opacity .3s ease;
  opacity:0;
}
.tab-nav-btn:first-child::after{left:0;}
.tab-nav-btn:hover{color:var(--ink);}
.tab-nav-btn:hover::after{transform:scaleX(.5);opacity:.5;}
.tab-nav-btn:focus-visible{outline:2px solid var(--m);outline-offset:4px;}
.tab-nav-btn.is-active{color:var(--ink);font-weight:700;}
.tab-nav-btn.is-active::after{transform:scaleX(1);opacity:1;}

.tab-sec-arrows{display:flex;gap:8px;flex-shrink:0;align-self:center;}
.tab-arrow{
  width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;
  border:1px solid var(--brd-2);
  color:var(--n);
  cursor:pointer;
  transition:color .3s ease, border-color .3s ease, background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.tab-arrow:hover{
  background:var(--n);
  border-color:var(--n);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:var(--sh-navy);
}
.tab-arrow:focus-visible{outline:2px solid var(--m);outline-offset:2px;}
.tab-arrow i{font-size:18px;transition:transform .3s ease;}
.tab-arrow:hover i{transform:scale(1.1);}

/* Slider panel — Swiper with auto-width slides */
.tab-slider-panel{margin:0;}
.tab-slider{overflow:visible;} /* let the next slide peek beyond edge */
.tab-slider .swiper-slide{
  width:260px;height:auto;
}
@media(max-width:780px){
  .tab-sec-head{margin-bottom:28px;flex-direction:column;align-items:flex-start;}
  .tab-sec-rail{margin-bottom:24px;}
  .tab-nav-btn{height:44px;padding:0 14px;font-size:12px;}
  .tab-slider .swiper-slide{width:220px;}
  .tab-sec-arrows{display:none;}
}
@media(max-width:460px){
  .tab-slider .swiper-slide{width:180px;}
}

/* Keep panels from flashing before Alpine boots */
[x-cloak]{display:none !important;}

/* ── CATEGORY GRID ────────────────────────────── */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:210px;
  gap:16px;
}
.cat-grid .cat-0{grid-row:span 2;}
@media(max-width:880px){.cat-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.cat-grid{grid-template-columns:1fr;grid-auto-rows:170px;} .cat-grid .cat-0{grid-row:span 1;}}
.cat-tile{
  position:relative;border-radius:16px;overflow:hidden;
  display:block;text-decoration:none;
  transition:all .35s cubic-bezier(.2,.8,.3,1);
}
.cat-tile:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(13,27,46,.2);}
.cat-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.cat-tile:hover img{transform:scale(1.06);}
.cat-em{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:56px;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.2));transition:transform .4s,filter .4s;}
.cat-0 .cat-em{font-size:80px;}
.cat-tile:hover .cat-em{transform:scale(1.15) translateY(-4px);filter:drop-shadow(0 12px 30px rgba(0,0,0,.3));}
.cat-ov{position:absolute;inset:0;background:linear-gradient(0deg,rgba(13,27,46,.92) 0%,rgba(13,27,46,.3) 45%,rgba(13,27,46,.05) 100%);transition:opacity .3s;}
.cat-tile:hover .cat-ov{opacity:.85;}
.cat-bd{position:absolute;bottom:0;left:0;right:0;padding:20px 22px;transition:transform .3s;}
.cat-tile:hover .cat-bd{transform:translateY(-4px);}
.cat-name{font-family:var(--ffd);font-size:20px;font-weight:700;color:#fff;line-height:1.15;margin:0;text-shadow:0 2px 8px rgba(0,0,0,.3);}
.cat-0 .cat-name{font-size:28px;}
.cat-cnt{font-size:12px;color:rgba(255,255,255,.55);margin:4px 0 0;}
.cat-bd::after{content:'Explore →';display:block;font-size:12px;font-weight:600;color:var(--g);margin-top:8px;letter-spacing:.5px;
  opacity:0;transform:translateX(-6px);transition:all .3s;}
.cat-tile:hover .cat-bd::after{opacity:1;transform:translateX(0);}
/* Category accent colours — richer gradients */
.ct-liquor{background:linear-gradient(140deg, var(--theme-neutral-black) 0%, var(--theme-primary-color) 50%, color-mix(in srgb, var(--theme-primary-color) 70%, black) 100%);}
.ct-perfume{background:linear-gradient(140deg, var(--theme-neutral-black) 0%, var(--theme-primary-color) 50%, color-mix(in srgb, var(--theme-primary-color) 70%, black) 100%);}
.ct-beauty{background:linear-gradient(140deg, var(--theme-neutral-black) 0%, var(--theme-secondary-color) 50%, color-mix(in srgb, var(--theme-secondary-color) 70%, black) 100%);}
.ct-tobacco{background:linear-gradient(140deg, var(--theme-neutral-black) 0%, var(--theme-secondary-color) 50%, color-mix(in srgb, var(--theme-secondary-color) 70%, black) 100%);}
.ct-food{background:linear-gradient(140deg, var(--theme-neutral-black) 0%, var(--theme-primary-color) 50%, color-mix(in srgb, var(--theme-primary-color) 70%, black) 100%);}
.ct-souvenirs{background:linear-gradient(140deg, var(--theme-neutral-black) 0%, var(--theme-secondary-color) 50%, color-mix(in srgb, var(--theme-secondary-color) 70%, black) 100%);}
.ct-others{background:linear-gradient(140deg, var(--theme-neutral-black) 0%, var(--theme-primary-color) 50%, color-mix(in srgb, var(--theme-primary-color) 70%, black) 100%);}

/* ── SHOP BY CATEGORY — IMAGE MOSAIC (Pinterest-style) ── */
.cat-universe-sec{position:relative;}
.cat-mosaic{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:220px;
  gap:16px;
  margin-top:0; /* .tab-sec-head already has 40px margin-bottom */
}
/* When we have fewer than 3 main categories, flatten the row heights so the
   grid doesn't reserve hero-tile space and leave a big dead zone below. */
.cat-mosaic--compact{
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  grid-auto-rows:220px;
}
.cm-tile{
  position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:24px;
  border-radius:18px;
  text-decoration:none;color:#fff;
  overflow:hidden;
  background-color:var(--n);
  background-size:104% auto;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:0 6px 20px rgba(0,62,126,.10);
  transition:transform .6s cubic-bezier(.4,0,.2,1),
             box-shadow .6s cubic-bezier(.4,0,.2,1),
             background-size 1.2s cubic-bezier(.2,.8,.2,1);
  isolation:isolate;
}
/* Editorial photo-overlay — transparent at top, deep navy/black at bottom for AA legibility on every photo crop. */
.cm-tile::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(13,17,23,0) 0%,
    rgba(13,17,23,.18) 38%,
    rgba(13,17,23,.62) 72%,
    rgba(13,17,23,.92) 100%);
  transition:background .6s ease;
}
/* Maroon hairline reveal on hover — palette-locked brand accent */
.cm-tile::after{
  content:'';position:absolute;inset:0;border-radius:18px;pointer-events:none;
  border:1.5px solid color-mix(in srgb, var(--theme-secondary-color) 80%, transparent);
  opacity:0;transition:opacity .5s ease;
}
.cm-tile:hover{
  transform:translateY(-6px);
  background-size:114% auto;
  box-shadow:0 24px 52px -12px color-mix(in srgb, var(--n) 55%, transparent),
             0 8px 22px -6px color-mix(in srgb, var(--theme-secondary-color) 45%, transparent);
}
.cm-tile:hover::before{background:linear-gradient(180deg,
    rgba(13,17,23,0) 0%,
    rgba(13,17,23,.28) 38%,
    rgba(13,17,23,.72) 72%,
    rgba(13,17,23,.96) 100%);}
.cm-tile:hover::after{opacity:1;}

/* Hero — first tile spans 2 columns × 2 rows */
.cm-tile-hero{
  grid-column:1 / span 1;
  grid-row:1 / span 2;
  padding:32px;
}
@media(min-width:961px){
  .cat-mosaic{grid-template-columns:2fr 1fr 1fr;}
  .cm-tile-hero{grid-column:1 / span 1;grid-row:1 / span 2;}
}

.cm-tile-body{
  display:flex;flex-direction:column;gap:10px;
  position:relative;
  transform:translateY(0);
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.cm-tile:hover .cm-tile-body{transform:translateY(-4px);}
.cm-tile-nm{
  font-family:var(--ffd);
  font-size:30px;font-weight:600;letter-spacing:-.012em;
  line-height:1.02;margin:0;
  color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.45);
}
.cm-tile-hero .cm-tile-nm{font-size:54px;letter-spacing:-.018em;}
/* Editorial under-rule that animates on hover — replaces the old "Shop Now" button as the affordance signal */
.cm-tile-nm::after{
  content:'';display:block;margin-top:14px;
  width:36px;height:2px;
  background:#fff;
  transition:width .6s cubic-bezier(.2,.8,.2,1), background .35s ease;
}
.cm-tile-hero .cm-tile-nm::after{margin-top:18px;height:2.5px;}
.cm-tile:hover .cm-tile-nm::after{
  width:78px;
  background:color-mix(in srgb, var(--theme-secondary-color) 80%, white);
}
/* Pulsing urgency badge — used on the Offers tile */
.cm-tile-pulse{
  position:absolute;top:18px;right:18px;
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px;border-radius:999px;
  background:rgba(13,17,23,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);
  font-family:var(--theme-font-heading);
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fff;
  z-index:1;
}
.cm-tile-pulse-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--theme-secondary-color);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--theme-secondary-color) 60%, transparent);
  animation:cmPulse 1.8s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes cmPulse{
  0%   {box-shadow:0 0 0 0 color-mix(in srgb, var(--theme-secondary-color) 70%, transparent);}
  70%  {box-shadow:0 0 0 10px color-mix(in srgb, var(--theme-secondary-color) 0%, transparent);}
  100% {box-shadow:0 0 0 0 color-mix(in srgb, var(--theme-secondary-color) 0%, transparent);}
}

/* Themed gradient fallbacks — unified to the navy / red / graphite palette
   so tiles read as a single editorial family rather than six different moods. */
.cm-tile.cx-liquor   {background-image:linear-gradient(140deg,#0f1a2b 0%,var(--theme-primary-color) 55%,color-mix(in srgb, var(--theme-primary-color) 55%, black) 100%);}
.cm-tile.cx-perfume  {background-image:linear-gradient(140deg,#1a1a1a 0%,color-mix(in srgb, var(--theme-secondary-color) 70%, black) 60%,color-mix(in srgb, var(--theme-secondary-color) 50%, black) 100%);}
.cm-tile.cx-beauty   {background-image:linear-gradient(140deg,#0f1a2b 0%,color-mix(in srgb, var(--theme-secondary-color) 80%, black) 60%,var(--theme-secondary-color) 100%);}
.cm-tile.cx-tobacco  {background-image:linear-gradient(140deg,#0a0a0a 0%,#1d1d1d 55%,#2a2a2a 100%);}
.cm-tile.cx-food     {background-image:linear-gradient(140deg,#1a1a1a 0%,var(--theme-primary-color) 55%,color-mix(in srgb, var(--theme-primary-color) 65%, black) 100%);}
.cm-tile.cx-souvenirs{background-image:linear-gradient(140deg,var(--theme-primary-color) 0%,color-mix(in srgb, var(--theme-primary-color) 70%, black) 55%,color-mix(in srgb, var(--theme-secondary-color) 60%, black) 100%);}
.cm-tile.cx-default  {background-image:linear-gradient(140deg,var(--theme-primary-color) 0%,color-mix(in srgb, var(--theme-primary-color) 75%, black) 55%,color-mix(in srgb, var(--theme-primary-color) 55%, black) 100%);}
.cm-tile.cx-offers   {background-image:linear-gradient(140deg,var(--theme-secondary-color) 0%,color-mix(in srgb, var(--theme-secondary-color) 70%, black) 55%,#0d1117 100%);}
.cm-tile.cx-offers .cm-tile-kicker{background:var(--theme-secondary-color);color:#fff;}

@media(max-width:960px){
  .cat-mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:180px;}
  .cm-tile-hero{grid-column:1 / span 2;grid-row:auto;}
  .cm-tile-hero .cm-tile-nm{font-size:36px;}
}
@media(max-width:520px){
  .cat-mosaic{grid-template-columns:1fr;grid-auto-rows:170px;gap:12px;}
  .cm-tile-hero{grid-column:auto;}
  .cm-tile-nm{font-size:24px;}
  .cm-tile-hero .cm-tile-nm{font-size:30px;}
}

/* ── BRANDS HUB (FEATURED BRANDS BY CATEGORY) ── */
/* ════════════════════════════════════════════════════════════
   THE HOUSE OF BRANDS — EDITORIAL / DEPARTMENT-STORE LAYOUT
   Pale cool-blue canvas (hints at navy brand) · type-led tabs ·
   hairline medallions on white · single red accent. Reads as a
   curated magazine spread on a soft tinted page.
   ════════════════════════════════════════════════════════════ */
.brands-hub{
  position:relative;
  padding:var(--sec-py) 0;
  overflow:hidden;
  /* Faint cool-blue tinted canvas — same as .sec-bg for continuity. */
  background:var(--cream);
  font-family:var(--theme-font-body);
}
.brands-hub > *{position:relative;z-index:1;}
@media(max-width:1024px){.brands-hub{padding:var(--sec-py-lg) 0;}}
@media(max-width:640px){.brands-hub{padding:var(--sec-py-md) 0;}}
.brands-hub-bg{display:none;}
/* Centered editorial header — eyebrow rule, serif display, italic dek. */
.brands-hub-head{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:var(--sec-head-gap);margin:0 0 var(--sec-gap);
}
.brands-hub-head .h2{
  font-family:var(--ffd);
  color:var(--ink);
  font-weight:600;letter-spacing:-.015em;
  margin:0;line-height:1.04;
  font-size:clamp(34px,3.8vw,52px);
}
.brands-hub-head .h2 em{
  font-family:var(--ffd);
  font-style:italic;font-weight:500;
  color:var(--m);
}
.brands-hub-head p{
  font-family:var(--ffs);
  font-style:italic;
  color:color-mix(in srgb, var(--ink) 72%, transparent);
  font-size:17px;line-height:1.55;
  max-width:560px;margin:0;
}
/* Yellow ornamental divider under header */
.brands-hub-head::after{
  content:'';width:52px;height:2px;margin-top:6px;
  background:linear-gradient(90deg, transparent, var(--y) 50%, transparent);
}

.brands-hub-tabs{margin-top:44px;}

/* Same editorial underline system as .tab-nav-btn for visual unity across
   every tabbed section on the homepage. Differences vs .tab-nav-btn:
   centered layout (brands hub has a centered header), includes the icon
   glyph + count suffix because the brand cats carry those affordances. */
.bh-tabs{
  display:flex;flex-wrap:wrap;gap:0;justify-content:center;
  margin:0 auto 44px;
  padding:0;background:transparent;border:0;border-radius:0;
  width:fit-content;max-width:100%;
  border-bottom:1px solid var(--brd);
}
.bh-tab{
  all:unset;cursor:pointer;
  position:relative;
  display:inline-flex;align-items:center;gap:10px;
  height:52px;padding:0 22px;
  color:color-mix(in srgb, var(--n) 55%, transparent);
  font-family:var(--theme-font-heading);
  font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  transition:color .35s ease;
  white-space:nowrap;
  margin-bottom:-1px;
}
.bh-tab::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;
  height:2px;background:var(--m);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .4s cubic-bezier(.4,0,.2,1), opacity .3s ease;
  opacity:0;
}
.bh-tab:hover{color:var(--ink);}
.bh-tab:hover::after{transform:scaleX(.5);opacity:.5;}
.bh-tab.is-active{color:var(--ink);}
.bh-tab.is-active::after{transform:scaleX(1);opacity:1;}
.bh-tab-em{font-size:14px;color:inherit;opacity:.55;transition:opacity .3s ease, color .3s ease;}
.bh-tab:hover .bh-tab-em,
.bh-tab.is-active .bh-tab-em{opacity:1;color:var(--m);}
.bh-tab-n{
  font-family:var(--ffs);font-style:italic;
  font-size:12px;font-weight:500;
  color:inherit;opacity:.5;
  padding:0 0 0 2px;
  letter-spacing:.4px;text-transform:none;
}
.bh-tab.is-active .bh-tab-n{opacity:1;color:var(--m);}

.bh-panel{animation:none;}
.bh-slider-wrap{
  position:relative;
  padding:0 52px;
}
.bh-slider{overflow:hidden;}
.bh-slider .swiper-slide{width:100px;}      /* 30% smaller (was 140px) */

/* Nav arrows — white-on-navy-tint, navy fill on hover */
.bh-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  background:#fff;
  border:1px solid var(--brd);
  color:var(--n);font-size:20px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:3;
  transition:background .35s ease, border-color .35s ease, color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.bh-nav i{transition:transform .35s cubic-bezier(.4,0,.2,1);}
.bh-nav:hover{
  background:var(--n);
  border-color:var(--n);
  color:#fff;
  transform:translateY(-50%) translateY(-2px);
  box-shadow:var(--sh-navy);
}
.bh-nav:hover i{transform:scale(1.1);}
.bh-nav.swiper-button-disabled{opacity:.25;cursor:default;pointer-events:none;}
.bh-prev{left:0;}
.bh-next{right:0;}

/* Brand medallions — white circles on tinted canvas,
   navy border on hover with red halo ring, logo de-saturated until hover. */
.bh-card{
  position:relative;
  background:transparent;
  border:none;
  border-radius:0;
  padding:10px 3px 8px;                 /* was 14px 4px 12px */
  text-decoration:none;
  display:flex;flex-direction:column;align-items:center;gap:10px;   /* was 14px */
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  overflow:visible;
}
.bh-card:hover{transform:translateY(-3px);}
.bh-star{
  position:absolute;top:4px;right:14px;        /* shifted to match smaller circle */
  width:16px;height:16px;border-radius:50%;
  background:var(--m);
  color:#fff;font-size:9px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px color-mix(in srgb, var(--m) 40%, transparent);
  z-index:2;
}
.bh-logo{
  position:relative;
  width:60px;height:60px;border-radius:50%;    /* 30% smaller (was 84px) */
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  padding:9px;                                  /* was 13px */
  box-shadow:0 2px 10px rgba(0,62,126,.06);
  border:1px solid var(--brd);
  transition:border-color .4s cubic-bezier(.4,0,.2,1),
             box-shadow .4s cubic-bezier(.4,0,.2,1),
             transform .4s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
/* Red halo ring revealed on hover */
.bh-logo::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;   /* tighter ring */
  border:1px solid color-mix(in srgb, var(--m) 45%, transparent);
  opacity:0;transform:scale(.92);
  transition:opacity .4s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.bh-logo img{
  max-width:100%;max-height:100%;object-fit:contain;
  filter:grayscale(1) opacity(.72);
  transition:filter .4s ease, transform .4s cubic-bezier(.4,0,.2,1);
}
.bh-card:hover .bh-logo{
  border-color:var(--n);
  box-shadow:0 12px 24px -8px color-mix(in srgb, var(--n) 28%, transparent),
             0 4px 10px rgba(0,62,126,.10);
  transform:scale(1.05);
}
.bh-card:hover .bh-logo::after{opacity:1;transform:scale(1);}
.bh-card:hover .bh-logo img{
  filter:grayscale(0) opacity(1);
  transform:scale(1.04);
}
.bh-initials{
  width:100%;height:100%;border-radius:50%;
  align-items:center;justify-content:center;
  font-family:var(--ffd);
  font-size:14px;font-weight:700;             /* was 19px */
  color:var(--ink);letter-spacing:.4px;
  transition:color .4s ease;
}
.bh-card:hover .bh-initials{color:var(--m);}
.bh-name{
  font-family:var(--theme-font-heading);
  font-size:11px;font-weight:700;
  color:color-mix(in srgb, var(--ink) 72%, transparent);
  text-align:center;
  line-height:1.2;letter-spacing:.18em;
  text-transform:uppercase;
  max-width:120px;
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  transition:color .35s ease, letter-spacing .35s ease;
}
.bh-card:hover .bh-name{color:var(--ink);letter-spacing:.22em;}

/* Shop-all — editorial "see all" link with red fill underline sweep */
.bh-all-btn{
  position:relative;
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 0 6px;border-radius:0;
  background:transparent;border:0;
  color:var(--n);
  font-family:var(--theme-font-heading);
  font-size:11.5px;font-weight:700;text-decoration:none;
  letter-spacing:.28em;text-transform:uppercase;
  transition:color .35s ease, gap .35s ease;
}
.bh-all-btn::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--n);
  transform-origin:right center;
  transition:transform .5s cubic-bezier(.4,0,.2,1), background .3s ease;
}
.bh-all-btn i{font-size:15px;transition:transform .35s cubic-bezier(.4,0,.2,1);}
.bh-all-btn:hover{
  color:var(--m);
  gap:14px;
}
.bh-all-btn:hover::after{
  background:var(--m);
  transform:scaleX(1);transform-origin:left center;
}
.bh-all-btn:hover i{transform:translateX(3px);}

@media(max-width:520px){
  .bh-slider-wrap{padding:0 42px;}
  .bh-slider .swiper-slide{width:116px;}
  .bh-logo{width:68px;height:68px;padding:10px;}
  .bh-logo::after{inset:-4px;}
  .bh-initials{font-size:16px;}
  .bh-name{font-size:10.5px;max-width:104px;letter-spacing:.14em;}
  .bh-nav{width:38px;height:38px;font-size:17px;}
  .bh-tab{padding:0 14px;height:46px;font-size:11px;letter-spacing:.18em;gap:8px;}
  .bh-tab-em{font-size:12px;}
  .bh-tab-n{font-size:11px;}
}

/* ── PRODUCT CARD ─────────────────────────────── */
.pc{
  background:var(--card);border-radius:16px;overflow:hidden;
  transition:all .3s cubic-bezier(.2,.8,.3,1);
  display:flex;flex-direction:column;
  border:1px solid var(--brd);
  box-shadow:0 1px 4px rgba(13,27,46,.04);
}
.pc{transition:transform .5s cubic-bezier(.4,0,.2,1), box-shadow .5s cubic-bezier(.4,0,.2,1), border-color .35s ease;}
.pc:hover{
  transform:translateY(-6px);
  border-color:color-mix(in srgb, var(--n) 35%, transparent);
  box-shadow:0 18px 44px -8px color-mix(in srgb, var(--n) 30%, transparent),
             0 6px 18px -6px color-mix(in srgb, var(--m) 22%, transparent);
}
.pc-img{
  position:relative;aspect-ratio:1;overflow:hidden;
  background:linear-gradient(135deg,var(--theme-surface-bg),var(--theme-surface-edge));
}
.pc-img img{
  width:100%;height:100%;object-fit:contain;padding:18px;
  transition:transform .4s cubic-bezier(.2,.8,.3,1);mix-blend-mode:multiply;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.06));
}
.pc:hover .pc-img img{transform:scale(1.08);}
.pc-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:48px;
  opacity:.6;filter:grayscale(.3);}
.pc-badge{
  position:absolute;top:10px;left:10px;
  padding:4px 10px;border-radius:6px;font-size:12px;font-weight:800;letter-spacing:.4px;
  backdrop-filter:blur(4px);
}
.b-sale{background:linear-gradient(135deg,var(--m),color-mix(in srgb, var(--theme-secondary-color) 85%, black));color:#fff;box-shadow:0 2px 8px rgba(194,24,41,.25);}
.b-new{background:rgba(13,27,46,.85);color:rgba(255,255,255,.95);backdrop-filter:blur(8px);}
.pc-wish{
  position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.9);backdrop-filter:blur(4px);border:1px solid rgba(0,0,0,.06);font-size:15px;color:var(--theme-surface-muted);
  cursor:pointer;transition:all .2s;opacity:0;transform:translateY(-4px);
}
.pc:hover .pc-wish{opacity:1;transform:translateY(0);}
.pc-wish:hover{color:var(--m);border-color:var(--m);background:#fff;box-shadow:0 4px 12px rgba(194,24,41,.15);}
.pc-body{padding:14px 16px 16px;flex:1;display:flex;flex-direction:column;}
.pc-brand{font-family:var(--theme-font-body);font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--g);margin:0 0 6px;}
.pc-name{font-family:var(--theme-font-body);font-size:14px;font-weight:600;color:var(--ink);line-height:1.4;margin:0;flex:1;display:block;letter-spacing:-0.005em;}
.pc-name:hover{color:var(--m);}
.pc-foot{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.pc-price{font-family:var(--theme-font-heading);font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-0.015em;line-height:1;}
.pc-mrp{font-family:var(--theme-font-body);font-size:12px;color:var(--theme-surface-muted);text-decoration:line-through;font-weight:500;}
.pc-save{font-size:12px;font-weight:700;color:var(--theme-primary-color);}
.btn-add{
  padding:9px 14px;border-radius:10px;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--m),color-mix(in srgb, var(--theme-secondary-color) 85%, black));color:#fff;font-size:12px;font-weight:700;font-family:var(--ff);
  display:flex;align-items:center;gap:5px;
  transition:all .2s;white-space:nowrap;
  box-shadow:0 2px 8px rgba(194,24,41,.2);
}
.btn-add:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(194,24,41,.3);filter:brightness(1.1);}

/* ── SWIPER CAROUSELS ─────────────────────────── */
.cnav{display:flex;gap:6px;}
.cn{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--brd);background:var(--wh);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--n);transition:all .2s;
  box-shadow:0 1px 4px rgba(0,0,0,.04);}
.cn:hover{background:var(--n);color:#fff;border-color:var(--n);box-shadow:0 4px 12px rgba(13,27,46,.15);}
.cn.swiper-button-disabled{opacity:.3;cursor:not-allowed;}

/* ── PROMO STRIP ──────────────────────────────────
   Navy plateau with yellow frame — pure GMR brand stack. The button lives
   as a yellow-fill slide behind a yellow outline, so brand recognition
   comes from the color, not decoration. */
.promo{
  position:relative;overflow:hidden;
  padding:var(--sec-py) 0;
  font-family:var(--theme-font-body);
  background:
    /* Soft yellow wash top-left (brand halo) */
    radial-gradient(ellipse at 15% 0%, color-mix(in srgb, var(--y) 18%, transparent), transparent 55%),
    /* Red edge glow bottom-right (depth) */
    radial-gradient(ellipse at 85% 100%, color-mix(in srgb, var(--m) 22%, transparent), transparent 50%),
    /* Navy gradient base */
    linear-gradient(180deg, var(--n) 0%, var(--n-1) 100%);
  color:#fff;
}
/* Yellow hairlines top + bottom — the frame */
.promo::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg, transparent, var(--y) 25%, var(--y) 75%, transparent);
  opacity:.85;
}
.promo::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg, transparent, var(--y) 25%, var(--y) 75%, transparent);
  opacity:.85;
}
@media(max-width:1024px){.promo{padding:var(--sec-py-lg) 0;}}
@media(max-width:640px){.promo{padding:var(--sec-py-md) 0;}}
.promo-in{
  position:relative;z-index:2;
  max-width:1340px;margin:0 auto;padding:0 32px;
  display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;
}
@media(max-width:1024px){.promo-in{padding:0 24px;}}
@media(max-width:640px){.promo-in{padding:0 20px;}}
.promo-txt{position:relative;min-width:0;}
/* Override eyebrow for navy background — yellow on navy */
.promo-txt .lbl{
  color:var(--y);
  margin-bottom:14px;
}
.promo-txt .lbl::before{
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--y) 30%, transparent) 0%,
    var(--y) 100%);
}
.promo-txt h2{
  font-family:var(--ffd);
  font-size:clamp(28px,3.2vw,44px);font-weight:600;
  color:#fff;margin:0 0 10px;line-height:1.08;letter-spacing:-0.012em;
}
.promo-txt h2 em{
  font-style:italic;font-weight:500;
  color:var(--y);
}
.promo-txt p{
  font-family:var(--ffs);
  font-size:17px;font-style:italic;
  color:rgba(255,255,255,.72);
  margin:0;max-width:560px;line-height:1.5;letter-spacing:.005em;
}
.btn-promo{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:10px;
  padding:17px 36px;border-radius:0;
  background:transparent;color:var(--y);
  font-family:var(--theme-font-body);
  font-weight:700;font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;text-decoration:none;
  border:1.5px solid var(--y);
  transition:color .4s ease, border-color .4s ease, transform .3s ease;
  white-space:nowrap;isolation:isolate;
}
.btn-promo::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--y);
  transform:translateX(-101%);
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.btn-promo i{font-size:14px;}
.btn-promo:hover{color:var(--n);border-color:var(--y);}
.btn-promo:hover::before{transform:translateX(0);}

/* ── HOW IT WORKS ─────────────────────────────── */
.hiw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--wh);border:1px solid var(--brd);border-radius:20px;overflow:hidden;
  box-shadow:0 4px 24px rgba(13,27,46,.06);}
@media(max-width:800px){.hiw-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:440px){.hiw-grid{grid-template-columns:1fr;}}
.hiw-item{padding:36px 28px;border-right:1px solid var(--brd);position:relative;transition:all .2s;}
.hiw-item:last-child{border-right:none;}
.hiw-item:hover{background:linear-gradient(180deg,rgba(194,24,41,.02),rgba(194,24,41,.06));}
@media(max-width:800px){
  .hiw-item:nth-child(2){border-right:none;}
  .hiw-item:nth-child(1),.hiw-item:nth-child(2){border-bottom:1px solid var(--brd);}
}
.hiw-n{width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg,var(--m),color-mix(in srgb, var(--theme-secondary-color) 85%, black));color:#fff;font-size:18px;font-weight:800;
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  box-shadow:0 4px 12px rgba(194,24,41,.2);transition:all .2s;}
.hiw-item:hover .hiw-n{transform:scale(1.1);box-shadow:0 6px 20px rgba(194,24,41,.3);}
.hiw-item h3{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 8px;}
.hiw-item p{font-size:13px;color:var(--mut);line-height:1.6;margin:0;}

/* ── BRANDS ───────────────────────────────────── */
.brand-row{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;background:var(--brd);border-radius:var(--r);overflow:hidden;}
@media(max-width:860px){.brand-row{grid-template-columns:repeat(4,1fr);}}
@media(max-width:440px){.brand-row{grid-template-columns:repeat(3,1fr);}}
.brtile{
  background:var(--wh);padding:18px 12px;min-height:80px;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;cursor:pointer;transition:all .2s;
}
.brtile:hover{background:var(--bg);}
.brtile img{max-height:32px;max-width:76px;object-fit:contain;filter:grayscale(1) opacity(.55);transition:all .2s;}
.brtile:hover img{filter:grayscale(0) opacity(1);transform:scale(1.05);}
.brtile-nm{font-size:12px;font-weight:700;color:var(--theme-surface-muted);text-align:center;transition:color .15s;}
.brtile:hover .brtile-nm{color:var(--ink);}

/* ── ALLOWANCE STRIP (navy) ───────────────────── */
.aw-strip{
  background:linear-gradient(180deg,var(--n) 0%,var(--n-1) 100%);
  padding:var(--sec-py) 0;position:relative;overflow:hidden;
  font-family:var(--theme-font-body);
}
@media(max-width:1024px){.aw-strip{padding:var(--sec-py-lg) 0;}}
@media(max-width:640px){.aw-strip{padding:var(--sec-py-md) 0;}}
.aw-strip::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:200%;height:2px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb, var(--y) 70%, transparent),transparent);}
.aw-strip::after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--y) 10%, transparent) 0%, transparent 70%);pointer-events:none;}
.aw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.06);border-radius:20px;overflow:hidden;
  box-shadow:0 0 40px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.04);}
@media(max-width:640px){.aw-grid{grid-template-columns:1fr;}}
.aw-item{padding:36px 28px;text-align:center;background:rgba(255,255,255,.04);transition:background .2s;position:relative;}
.aw-item:hover{background:rgba(255,255,255,.08);}
.aw-ic{width:60px;height:60px;border-radius:16px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, color-mix(in srgb, var(--y) 22%, transparent), color-mix(in srgb, var(--y) 8%, transparent));
  border:1px solid color-mix(in srgb, var(--y) 28%, transparent);font-size:26px;color:var(--y);
  transition:all .2s;box-shadow:0 4px 16px rgba(0,0,0,.1);}
.aw-item:hover .aw-ic{transform:scale(1.1);box-shadow:0 0 24px color-mix(in srgb, var(--y) 22%, transparent);}
.aw-item h3{font-family:var(--ffd);font-size:30px;font-weight:800;color:#fff;margin:0 0 2px;text-shadow:0 2px 12px rgba(0,0,0,.2);}
.aw-unit{font-size:12px;color:var(--y);font-weight:700;margin:0 0 10px;letter-spacing:.5px;}
.aw-item p{font-size:12px;color:rgba(255,255,255,.38);line-height:1.6;margin:0;}

/* ── NEWSLETTER ───────────────────────────────── */
.nl-box{max-width:640px;margin:0 auto;text-align:center;padding:40px 32px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--n) 4%, transparent), color-mix(in srgb, var(--m) 3%, transparent));
  border:1px solid var(--brd);border-radius:24px;}
.nl-box h2{font-family:var(--ffd);font-size:clamp(22px,2.8vw,32px);font-weight:800;color:var(--n);margin:0 0 8px;}
.nl-box p{font-size:14px;color:var(--mut);margin:0 0 24px;line-height:1.6;}
.nl-form{display:flex;max-width:460px;margin:0 auto;box-shadow:0 4px 16px rgba(0,0,0,.06);border-radius:12px;overflow:hidden;}
.nl-in{flex:1;padding:14px 18px;border:1.5px solid var(--brd);border-right:none;border-radius:12px 0 0 12px;font-size:14px;font-family:var(--ff);outline:none;color:var(--n);background:#fff;}
.nl-in:focus{border-color:var(--m);}
.btn-nl{padding:14px 24px;border-radius:0 12px 12px 0;border:none;
  background:linear-gradient(135deg,var(--m),color-mix(in srgb, var(--theme-secondary-color) 85%, black));color:#fff;font-weight:700;font-size:14px;font-family:var(--ff);
  cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px;
  box-shadow:0 2px 8px rgba(194,24,41,.2);}
.btn-nl:hover{filter:brightness(1.1);}
.nl-done{font-size:14px;color:var(--theme-primary-color);font-weight:600;margin-top:14px;}

/* ── PERFORMANCE: below-fold lazy render ─────── */
@media(prefers-reduced-motion:no-preference){
  .lazy-sec{content-visibility:auto;contain-intrinsic-size:0 400px;}
}

/* ── SCROLL REVEAL ─────────────────────────────
   Fades + lifts every section head, tab row, and card grid on first view.
   Stagger is handled by descendant depth so children enter after parents. */
@media(prefers-reduced-motion:no-preference){
  .reveal{
    opacity:0;transform:translateY(22px);
    transition:opacity .9s cubic-bezier(.4,0,.2,1),
               transform .9s cubic-bezier(.4,0,.2,1);
    will-change:opacity, transform;
  }
  .reveal.is-in{opacity:1;transform:none;}
  /* Stagger children via transition-delay when parent is .reveal-stagger */
  .reveal-stagger > *{
    opacity:0;transform:translateY(18px);
    transition:opacity .7s cubic-bezier(.4,0,.2,1),
               transform .7s cubic-bezier(.4,0,.2,1);
  }
  .reveal-stagger.is-in > *{opacity:1;transform:none;}
  .reveal-stagger.is-in > *:nth-child(1){transition-delay:.04s;}
  .reveal-stagger.is-in > *:nth-child(2){transition-delay:.12s;}
  .reveal-stagger.is-in > *:nth-child(3){transition-delay:.20s;}
  .reveal-stagger.is-in > *:nth-child(4){transition-delay:.28s;}
  .reveal-stagger.is-in > *:nth-child(5){transition-delay:.36s;}
  .reveal-stagger.is-in > *:nth-child(6){transition-delay:.44s;}
  .reveal-stagger.is-in > *:nth-child(7){transition-delay:.52s;}
  .reveal-stagger.is-in > *:nth-child(8){transition-delay:.60s;}

  /* Auto-reveal: every .sec-head, .tab-nav, and shared section canvases
     pick up the reveal behaviour without needing markup tweaks. */
  .sec-head, .tab-nav, .bh-tabs, .promo-in, .brands-hub-head{
    opacity:0;transform:translateY(20px);
    transition:opacity .85s cubic-bezier(.4,0,.2,1),
               transform .85s cubic-bezier(.4,0,.2,1);
    will-change:opacity, transform;
  }
  .sec-head.is-in, .tab-nav.is-in, .bh-tabs.is-in,
  .promo-in.is-in, .brands-hub-head.is-in{
    opacity:1;transform:none;
  }
}

/* == Block 3 == */

/* Scope: .mmb-* — Mega-Menu Option B (refined) */
    .mmb-shell{
        background:#f7f7f7;
        border-radius:0;
        overflow:hidden;
        border-top:3px solid var(--theme-secondary-color);
        box-shadow:0 30px 80px -20px rgba(15,30,55,.28), 0 8px 24px -8px rgba(15,30,55,.12);
        font-family:var(--theme-font-body);
        position:relative;
    }

    /* MAIN GRID */
    .mmb-body{
        display:grid;
        grid-template-columns: 220px 1fr;
        min-height:440px;
        background:#f7f7f7;
    }

    /* LEFT RAIL — pill icons */
    .mmb-rail{
        padding:18px 14px;
        background:#f0f0f0;
        border-right:1px solid #e6e6e6;
    }
    .mmb-rail-title{
        font-family:var(--theme-font-heading);
        font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
        color:#888;
        padding:0 8px 12px;
    }
    .mmb-rail-btn{
        display:flex;align-items:center;gap:10px;
        width:100%;padding:11px 12px;
        background:transparent;border:0;cursor:pointer;text-align:left;
        border-radius:10px;margin-bottom:3px;
        transition:all .18s;
    }
    /* Hover (not active): light surface, maroon bold text */
    .mmb-rail-btn:hover{
        background:#ffffff;
    }
    .mmb-rail-btn:hover .mmb-rail-name{
        color:var(--theme-secondary-color);font-weight:800;
    }
    .mmb-rail-btn:hover .mmb-rail-icon{
        color:var(--theme-secondary-color);border-color:var(--theme-secondary-color);
    }
    .mmb-rail-btn:hover .mmb-rail-arrow{
        color:var(--theme-secondary-color);
    }
    /* Active (panel currently showing): navy pill + gold icon + white text */
    .mmb-rail-btn.is-active{
        background:linear-gradient(135deg,#1a2842 0%,#2c3e5e 100%);
    }
    .mmb-rail-btn.is-active .mmb-rail-icon{
        background:#d4af37;color:#0f1e37;border-color:#d4af37;
    }
    .mmb-rail-btn.is-active .mmb-rail-name{
        color:#ffffff;font-weight:800;
    }
    .mmb-rail-btn.is-active .mmb-rail-arrow{
        color:#d4af37;
    }

    .mmb-rail-icon{
        width:30px;height:30px;border-radius:8px;
        background:#fff;border:1px solid #e6e6e6;
        display:flex;align-items:center;justify-content:center;
        color:#1a1a1a;font-size:14px;
        transition:all .18s;flex-shrink:0;
    }
    .mmb-rail-name{
        font-family:var(--theme-font-heading);
        font-size:13px;font-weight:600;
        color:#1a1a1a;flex:1;
        transition:all .18s;
    }
    .mmb-rail-arrow{font-size:13px;color:#bbb;transition:all .18s;}
    .mmb-rail-badge{
        font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
        background:#d4af37;color:#0f1e37;
        padding:2px 5px;border-radius:3px;
    }

    /* STAGE */
    .mmb-stage{padding:0;position:relative;background:#f7f7f7;}
    .mmb-panel{display:flex;flex-direction:column;background:#f7f7f7;}

    /* HERO band */
    .mmb-hero{
        position:relative;
        padding:22px 28px;
        background:linear-gradient(135deg,#0f1e37 0%,#1a2842 60%,#2c3e5e 100%);
        color:#fff;
        overflow:hidden;
        text-decoration:none;
    }
    .mmb-hero::before{
        content:"";position:absolute;inset:0;
        background-image:var(--mmb-hero-bg);
        background-size:cover;background-position:right center;
        opacity:.3;mix-blend-mode:luminosity;
    }
    .mmb-hero::after{
        content:"";position:absolute;inset:0;
        background:linear-gradient(90deg,#0f1e37 0%,rgba(15,30,55,.85) 50%,transparent 100%);
    }
    .mmb-hero-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px;}
    .mmb-hero-text{flex:1;max-width:60%;}
    .mmb-hero-eyebrow{
        display:inline-flex;align-items:center;gap:6px;
        font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
        color:#d4af37;margin-bottom:6px;
    }
    .mmb-hero-eyebrow i{font-size:12px;}
    .mmb-hero-title{
        font-family:var(--theme-font-heading);
        font-size:24px;font-weight:700;
        margin:0 0 4px;letter-spacing:-.01em;line-height:1.15;
        color:#fff;
    }
    .mmb-hero-sub{
        font-size:12px;color:rgba(255,255,255,.8);
        margin:0;line-height:1.5;
    }
    .mmb-hero-cta{
        display:inline-flex;align-items:center;gap:7px;
        padding:10px 18px;border-radius:50px;
        background:#d4af37;color:#0f1e37;
        font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
        text-decoration:none;
        transition:all .18s;flex-shrink:0;
    }
    .mmb-hero-cta:hover{
        background:#e8c879;transform:translateX(3px);
    }

    /* CONTENT GRID below hero */
    .mmb-grid{
        display:grid;
        grid-template-columns: 1.4fr 1fr;
        gap:0;
        flex:1;
    }

    /* SECTION LABEL — light, no back colour */
    .mmb-section-title{
        font-family:var(--theme-font-heading);
        font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
        color:#1a1a1a;
        margin:0 0 14px;
    }

    /* L2 column */
    .mmb-l2col{
        padding:22px 26px;
        border-right:1px solid #e6e6e6;
        background:#f7f7f7;
    }
    .mmb-l2-grid{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:14px 24px;
    }
    .mmb-l2-grp{}
    .mmb-l2-head{
        display:flex;align-items:center;justify-content:space-between;
        text-decoration:none;
        padding-bottom:6px;margin-bottom:6px;
        border-bottom:1px solid #e6e6e6;
    }
    .mmb-l2-nm{
        font-family:var(--theme-font-heading);
        font-size:13px;font-weight:700;
        color:#1a1a1a;
        transition:all .15s;
    }
    .mmb-l2-head:hover .mmb-l2-nm{color:var(--theme-secondary-color);font-weight:800;}
    .mmb-l2-head i{font-size:13px;color:#bbb;transition:all .15s;}
    .mmb-l2-head:hover i{color:var(--theme-secondary-color);transform:translateX(3px);}
    .mmb-l3-list{display:flex;flex-direction:column;gap:3px;}
    .mmb-l3-link{
        font-size:12px;color:#1a1a1a;text-decoration:none;
        padding:2px 0;
        transition:all .15s;
    }
    .mmb-l3-link:hover{color:var(--theme-secondary-color);font-weight:700;padding-left:4px;}

    /* RIGHT BRANDS column */
    .mmb-brands-col{
        padding:22px 22px;
        background:#f7f7f7;
    }

    /* FEATURED BRANDS — 5 round logo circles */
    .mmb-brand-row{
        display:flex;align-items:flex-start;justify-content:space-between;
        gap:8px;
    }
    .mmb-brand-circle{
        flex:1;
        display:flex;flex-direction:column;align-items:center;gap:6px;
        text-decoration:none;
        min-width:0;
    }
    .mmb-brand-disc{
        width:54px;height:54px;border-radius:50%;
        background:#fff;border:1px solid #e6e6e6;
        display:flex;align-items:center;justify-content:center;
        overflow:hidden;
        transition:all .2s ease;
        flex-shrink:0;
    }
    .mmb-brand-circle:hover .mmb-brand-disc{
        border-color:#d4af37;
        transform:translateY(-3px);
        box-shadow:0 8px 18px -6px rgba(212,175,55,.45);
    }
    .mmb-brand-disc img{max-width:36px;max-height:36px;object-fit:contain;}
    .mmb-brand-initials{
        font-family:var(--theme-font-heading);
        font-size:14px;font-weight:700;color:#1a1a1a;
        letter-spacing:.04em;
        transition:all .15s;
    }
    .mmb-brand-circle:hover .mmb-brand-initials{color:var(--theme-secondary-color);}
    .mmb-brand-name{
        font-size:9px;font-weight:600;color:#1a1a1a;
        letter-spacing:.04em;text-transform:uppercase;
        text-align:center;line-height:1.2;
        max-width:80px;
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
        transition:all .15s;
    }
    .mmb-brand-circle:hover .mmb-brand-name{color:var(--theme-secondary-color);font-weight:800;}

    /* PROMO BANNER — replaces concierge card */
    .mmb-banner{
        margin-top:18px;
        position:relative;
        display:block;
        text-decoration:none;
        overflow:hidden;
        height:170px;
        background:linear-gradient(135deg,#0f1e37 0%,#1a2842 60%,#2c3e5e 100%);
        transition:transform .25s ease;
    }
    .mmb-banner:hover{transform:translateY(-2px);}
    .mmb-banner::before{
        content:"";position:absolute;inset:0;
        background-image:var(--mmb-banner-bg);
        background-size:cover;background-position:center;
        opacity:.55;
        transition:opacity .35s ease, transform .8s ease;
    }
    .mmb-banner:hover::before{opacity:.7;transform:scale(1.05);}
    .mmb-banner::after{
        content:"";position:absolute;inset:0;
        background:linear-gradient(135deg,rgba(15,30,55,.85) 0%,rgba(15,30,55,.55) 60%,rgba(15,30,55,.25) 100%);
    }
    .mmb-banner-inner{
        position:relative;z-index:2;
        height:100%;padding:20px;
        display:flex;flex-direction:column;justify-content:flex-end;
        color:#fff;
    }
    .mmb-banner-tag{
        display:inline-flex;align-items:center;gap:6px;
        align-self:flex-start;
        padding:4px 10px;border-radius:50px;
        background:#d4af37;color:#0f1e37;
        font-size:9px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
        margin-bottom:8px;
    }
    .mmb-banner-title{
        font-family:var(--theme-font-heading);
        font-size:18px;font-weight:700;line-height:1.15;
        margin:0 0 4px;color:#fff;letter-spacing:-.005em;
    }
    .mmb-banner-title strong{color:#d4af37;font-size:22px;}
    .mmb-banner-sub{
        font-size:11px;color:rgba(255,255,255,.85);
        margin:0;line-height:1.4;
    }
    .mmb-banner-cta{
        display:inline-flex;align-items:center;gap:5px;
        margin-top:10px;align-self:flex-start;
        font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
        color:#d4af37;
    }
    .mmb-banner-cta i{transition:transform .2s ease;}
    .mmb-banner:hover .mmb-banner-cta i{transform:translateX(4px);}

    .mmb-empty{
        padding:40px 20px;text-align:center;color:#888;
    }

/* == Block 4 == */

/* Mini-cart premium styles */
.mc-overlay { position:fixed; inset:0; z-index:60; }
.mc-backdrop { position:absolute; inset:0; background:rgba(7,17,31,.55); backdrop-filter:blur(8px); }
.mc-panel {
    position:absolute; top:0; right:0; bottom:0;
    width:100%; max-width:440px;
    background:linear-gradient(180deg,var(--theme-surface-bg) 0%,#fff 100%);
    box-shadow:-30px 0 80px -20px rgba(0,0,0,.4),-1px 0 0 rgba(13,27,46,.05);
    display:flex; flex-direction:column;
    min-height:0; overflow:hidden;
}
/* Inner wrapper (re-rendered via AJAX) must itself be a full-height flex
   column so its child .mc-items can flex:1 + overflow-y:auto correctly.
   Without this, the drawer grows past the viewport and the page scrolls
   instead of the items. */
.mc-panel-inner {
    flex:1 1 auto;
    display:flex; flex-direction:column;
    min-height:0; height:100%;
    overflow:hidden;
}
/* Header */
.mc-head {
    padding:22px 24px 20px;
    background:linear-gradient(135deg,var(--theme-primary-color) 0%,color-mix(in srgb, var(--theme-primary-color) 85%, white) 100%);
    color:#fff; position:relative; overflow:hidden;
}
.mc-head::before { content:""; position:absolute; top:-40%; right:-10%; width:260px; height:260px; background:radial-gradient(circle,rgba(156,35,80,.22) 0%,transparent 70%); pointer-events:none; }
.mc-head-row { display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }
.mc-head-title { display:flex; align-items:center; gap:10px; }
.mc-head-icon { width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg,var(--theme-secondary-color),color-mix(in srgb, var(--theme-secondary-color) 80%, black)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.mc-head-title h3 { font-family:var(--theme-font-heading); font-size:19px; font-weight:800; color:#fff; margin:0; line-height:1; }
.mc-head-title p { font-size:11px; color:rgba(255,255,255,.82); margin:3px 0 0; font-weight:600; letter-spacing:.4px; }
.mc-close { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; cursor:pointer; transition:all .15s; }
.mc-close:hover { background:var(--theme-secondary-color); border-color:var(--theme-secondary-color); transform:rotate(90deg); }

/* Allowance Limits */
.mc-limits { padding:14px 20px; background:rgba(156,35,80,.05); border-bottom:1px solid rgba(13,27,46,.06); }
.mc-limits-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mc-limit {}
.mc-limit-lbl { display:flex; align-items:center; gap:6px; font-size:10px; font-weight:700; color:var(--theme-surface-muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.mc-limit-lbl i { font-size:13px; color:var(--theme-secondary-color); }
.mc-limit-val { font-size:12px; font-weight:800; color:var(--theme-primary-color); margin-bottom:4px; }
.mc-limit-bar { height:4px; background:rgba(13,27,46,.08); border-radius:2px; overflow:hidden; }
.mc-limit-fill { height:100%; border-radius:2px; transition:width .3s; }
.mc-limit-fill.safe { background:linear-gradient(90deg,var(--theme-primary-color),var(--theme-primary-color)); }
.mc-limit-fill.warn { background:linear-gradient(90deg,color-mix(in srgb, var(--theme-secondary-color) 75%, white),var(--theme-secondary-color)); }
.mc-limit-fill.danger { background:linear-gradient(90deg,color-mix(in srgb, var(--theme-secondary-color) 85%, black),var(--theme-secondary-color)); }

/* Items list — scrolls vertically when items overflow the panel height.
   `min-height:0` lets the flex child actually shrink below its content height
   so overflow-y can kick in inside the flex column. */
.mc-items { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:8px 20px; }
.mc-items::-webkit-scrollbar { width:6px; }
.mc-items::-webkit-scrollbar-track { background:transparent; }
.mc-items::-webkit-scrollbar-thumb { background:rgba(13,27,46,.18); border-radius:3px; }
.mc-items::-webkit-scrollbar-thumb:hover { background:var(--theme-secondary-color); }
/* Header, limits and footer must never shrink so the items pane is the only
   region that flexes. */
.mc-head, .mc-limits, .mc-foot { flex:0 0 auto; }

.mc-item {
    display:flex; gap:14px;
    padding:16px 0;
    border-bottom:1px solid rgba(13,27,46,.05);
    position:relative;
}
.mc-item:last-child { border-bottom:none; }
.mc-item-img {
    width:72px; height:72px; border-radius:12px;
    background:linear-gradient(135deg,var(--theme-surface-bg),#fff);
    border:1px solid rgba(13,27,46,.06);
    overflow:hidden; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    position:relative;
}
.mc-item-img img { width:100%; height:100%; object-fit:contain; padding:5px; mix-blend-mode:multiply; }
.mc-item-img-ph { color:var(--theme-surface-muted); font-size:28px; }
.mc-qty-badge {
    position:absolute; top:-6px; right:-6px;
    min-width:22px; height:22px; padding:0 6px;
    border-radius:11px;
    background:linear-gradient(135deg,var(--theme-secondary-color),color-mix(in srgb, var(--theme-secondary-color) 80%, black)); color:#fff;
    font-size:11px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 6px rgba(156,35,80,.4);
}
.mc-item-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.mc-item-brand { font-size:10px; font-weight:800; color:var(--theme-secondary-color); letter-spacing:.8px; text-transform:uppercase; }
.mc-item-name { font-size:13px; font-weight:700; color:var(--theme-primary-color); line-height:1.35; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.mc-item-name a { color:inherit; text-decoration:none; }
.mc-item-name a:hover { color:var(--theme-secondary-color); }
.mc-item-meta { font-size:10px; color:var(--theme-surface-muted); margin-top:2px; }
.mc-item-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:6px; gap:8px; }
.mc-item-qty { display:inline-flex; align-items:center; border:1px solid var(--theme-surface-edge); border-radius:8px; overflow:hidden; height:28px; }
.mc-item-qty button { width:26px; height:100%; background:transparent; border:none; color:var(--theme-primary-color); font-weight:700; cursor:pointer; font-size:14px; transition:background .12s,color .12s; }
.mc-item-qty button:hover { background:rgba(156,35,80,.1); color:var(--theme-secondary-color); }
.mc-item-qty span { width:30px; text-align:center; font-size:12px; font-weight:800; color:var(--theme-primary-color); }
.mc-item-price { font-size:14px; font-weight:800; color:var(--theme-primary-color); font-family:var(--theme-font-heading); }
.mc-item-remove { position:absolute; top:14px; right:0; width:24px; height:24px; border-radius:50%; background:transparent; border:none; color:var(--theme-surface-muted); cursor:pointer; font-size:16px; transition:all .15s; display:flex; align-items:center; justify-content:center; }
.mc-item-remove:hover { background:color-mix(in srgb, var(--theme-secondary-color) 8%, var(--theme-neutral-white)); color:color-mix(in srgb, var(--theme-secondary-color) 85%, black); }

/* Empty state */
.mc-empty { text-align:center; padding:60px 24px; }
.mc-empty-icon {
    width:100px; height:100px; margin:0 auto 20px;
    border-radius:50%;
    background:linear-gradient(135deg,rgba(156,35,80,.12) 0%,rgba(156,35,80,.03) 100%);
    display:flex; align-items:center; justify-content:center;
    font-size:44px; color:var(--theme-secondary-color);
}
.mc-empty h4 { font-family:var(--theme-font-heading); font-size:22px; font-weight:800; color:var(--theme-primary-color); margin:0 0 8px; }
.mc-empty h4 em { color:var(--theme-secondary-color); font-style:italic; font-weight:600; }
.mc-empty p { font-size:13px; color:var(--theme-surface-muted); max-width:280px; margin:0 auto 20px; line-height:1.5; }
.mc-empty-cats { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:14px; }
.mc-empty-cat { font-size:10px; font-weight:700; padding:6px 12px; background:#fff; border:1px solid var(--theme-surface-edge); color:var(--theme-primary-color); border-radius:99px; text-decoration:none; letter-spacing:.3px; text-transform:uppercase; transition:all .15s; }
.mc-empty-cat:hover { background:var(--theme-secondary-color); color:#fff; border-color:var(--theme-secondary-color); }

/* Free-ship progress */
.mc-freeship { padding:12px 20px; background:linear-gradient(135deg,rgba(22,163,74,.06) 0%,transparent 100%); border-top:1px solid rgba(22,163,74,.1); }
.mc-freeship-lbl { display:flex; justify-content:space-between; align-items:center; font-size:11px; font-weight:700; color:var(--theme-primary-color); margin-bottom:6px; }
.mc-freeship-lbl i { color:var(--theme-primary-color); font-size:14px; }
.mc-freeship-lbl strong { color:var(--theme-primary-color); }
.mc-freeship-bar { height:5px; background:rgba(13,27,46,.08); border-radius:3px; overflow:hidden; }
.mc-freeship-fill { height:100%; background:linear-gradient(90deg,var(--theme-primary-color),var(--theme-primary-color)); border-radius:3px; transition:width .3s; }

/* Footer with totals + CTAs */
.mc-foot {
    border-top:1px solid rgba(13,27,46,.08);
    padding:18px 20px 20px;
    background:linear-gradient(180deg,#fff 0%,var(--theme-surface-bg) 100%);
    box-shadow:0 -4px 20px rgba(13,27,46,.06);
}
.mc-totals { display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
.mc-total-row { display:flex; justify-content:space-between; font-size:12px; color:var(--theme-surface-muted); }
.mc-total-row.discount { color:var(--theme-primary-color); font-weight:600; }
.mc-total-row.grand { font-size:17px; font-weight:800; color:var(--theme-primary-color); padding-top:10px; border-top:1px dashed rgba(13,27,46,.12); margin-top:6px; }
.mc-total-row.grand span:last-child { font-family:var(--theme-font-heading); font-size:22px; color:var(--theme-primary-color); }

.mc-btn-checkout {
    display:flex; width:100%; align-items:center; justify-content:center; gap:8px;
    padding:15px;
    background:linear-gradient(135deg,var(--theme-secondary-color) 0%,color-mix(in srgb, var(--theme-secondary-color) 85%, black) 100%);
    color:#fff; font-size:13px; font-weight:800;
    border-radius:12px; border:none; cursor:pointer;
    letter-spacing:.5px; text-transform:uppercase;
    text-decoration:none; transition:all .2s;
    box-shadow:0 6px 18px rgba(156,35,80,.32);
    position:relative; overflow:hidden;
}
.mc-btn-checkout::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%); transform:translateX(-100%); transition:transform .5s; }
.mc-btn-checkout:hover { transform:translateY(-1px); box-shadow:0 10px 26px rgba(156,35,80,.45); }
.mc-btn-checkout:hover::before { transform:translateX(100%); }

.mc-btn-viewcart {
    display:flex; width:100%; align-items:center; justify-content:center; gap:8px;
    padding:12px;
    background:#fff;
    color:var(--theme-primary-color); font-size:12px; font-weight:700;
    border-radius:10px; border:1.5px solid var(--theme-surface-edge);
    text-decoration:none; transition:all .15s;
    margin-top:10px; letter-spacing:.4px; text-transform:uppercase;
}
.mc-btn-viewcart:hover { border-color:var(--theme-primary-color); background:var(--theme-surface-bg); }

.mc-trust { display:flex; justify-content:center; gap:14px; margin-top:14px; padding-top:12px; border-top:1px dashed rgba(13,27,46,.08); font-size:10px; color:var(--theme-surface-muted); letter-spacing:.3px; }
.mc-trust span { display:inline-flex; align-items:center; gap:4px; font-weight:600; }
.mc-trust i { font-size:13px; color:var(--theme-primary-color); }

/* == Block 5 == */

/* ══ AUTH MODAL — strict palette: primary / secondary / tertiary + neutrals ══ */
  .ddf-auth-overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px;}
  .ddf-auth-backdrop{position:absolute;inset:0;background:color-mix(in srgb, var(--theme-neutral-black) 55%, transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
  .ddf-auth-modal{position:relative;background:var(--theme-surface-card, var(--theme-neutral-white));border-radius:20px;box-shadow:0 32px 80px -12px color-mix(in srgb, var(--theme-neutral-black) 45%, transparent), 0 0 0 1px var(--theme-surface-edge);width:100%;max-width:860px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;min-height:560px;}
  @media (max-width:740px){.ddf-auth-modal{grid-template-columns:1fr;max-width:440px;min-height:auto;}.ddf-auth-brand{display:none;}}

  /* ── Left brand panel: deep primary gradient ── */
  .ddf-auth-brand{position:relative;background:
      linear-gradient(155deg,
        var(--theme-primary-color) 0%,
        color-mix(in srgb, var(--theme-primary-color) 82%, var(--theme-neutral-black)) 55%,
        color-mix(in srgb, var(--theme-primary-color) 70%, var(--theme-neutral-black)) 100%);
      color:var(--theme-neutral-white);padding:44px 40px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;}
  .ddf-auth-brand::before{content:"";position:absolute;inset:-30% -20% auto auto;width:380px;height:380px;background:radial-gradient(circle,color-mix(in srgb, var(--theme-tertiary-color) 22%, transparent) 0%,transparent 60%);pointer-events:none;}
  .ddf-auth-brand::after{content:"";position:absolute;inset:auto auto -30% -20%;width:300px;height:300px;background:radial-gradient(circle,color-mix(in srgb, var(--theme-secondary-color) 18%, transparent) 0%,transparent 60%);pointer-events:none;}
  .ddf-auth-brand-top{position:relative;z-index:1;}
  .ddf-auth-brand img{height:42px;width:auto;filter:brightness(0) invert(1);opacity:.95;}
  .ddf-auth-brand h3{font-family:var(--theme-font-heading);font-size:30px;font-weight:700;color:var(--theme-neutral-white);letter-spacing:-.02em;line-height:1.1;margin:26px 0 12px;}
  .ddf-auth-brand p{font-size:13.5px;color:color-mix(in srgb, var(--theme-neutral-white) 82%, transparent);line-height:1.55;max-width:340px;font-weight:500;}
  .ddf-auth-perks{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;margin-top:30px;}
  .ddf-auth-perk{display:flex;align-items:flex-start;gap:12px;font-size:12.5px;color:color-mix(in srgb, var(--theme-neutral-white) 92%, transparent);}
  .ddf-auth-perk-icon{flex:0 0 32px;width:32px;height:32px;border-radius:10px;background:color-mix(in srgb, var(--theme-tertiary-color) 22%, transparent);color:var(--theme-tertiary-color);display:flex;align-items:center;justify-content:center;font-size:18px;border:1px solid color-mix(in srgb, var(--theme-tertiary-color) 35%, transparent);}
  .ddf-auth-perk strong{display:block;color:var(--theme-neutral-white);font-weight:700;font-size:13px;margin-bottom:2px;letter-spacing:-.01em;}
  .ddf-auth-brand-footer{position:relative;z-index:1;display:flex;align-items:center;gap:14px;padding-top:22px;border-top:1px solid color-mix(in srgb, var(--theme-neutral-white) 15%, transparent);font-size:10.5px;color:color-mix(in srgb, var(--theme-neutral-white) 65%, transparent);letter-spacing:.4px;text-transform:uppercase;font-weight:700;}
  .ddf-auth-brand-footer i{color:var(--theme-tertiary-color);font-size:14px;}

  /* ── Right form panel: soft surface (not stark white) ── */
  .ddf-auth-form-wrap{position:relative;padding:36px 40px 30px;display:flex;flex-direction:column;background:var(--theme-surface-bg);}
  @media (max-width:740px){.ddf-auth-form-wrap{padding:28px 24px;}}
  .ddf-auth-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;background:var(--theme-neutral-white);color:var(--theme-surface-muted);display:flex;align-items:center;justify-content:center;border:1px solid var(--theme-surface-edge);cursor:pointer;transition:all .15s;z-index:2;}
  .ddf-auth-close:hover{background:color-mix(in srgb, var(--theme-secondary-color) 10%, var(--theme-neutral-white));color:var(--theme-secondary-color);border-color:color-mix(in srgb, var(--theme-secondary-color) 30%, var(--theme-surface-edge));}
  .ddf-auth-tabs{display:flex;gap:0;background:var(--theme-surface-edge);border-radius:12px;padding:4px;margin-bottom:22px;}
  .ddf-auth-tab{flex:1;padding:11px 12px;background:transparent;border:none;cursor:pointer;font-size:13px;font-weight:700;color:var(--theme-surface-muted);border-radius:9px;transition:all .18s;letter-spacing:-.005em;}
  .ddf-auth-tab.is-active{background:var(--theme-neutral-white);color:var(--theme-primary-color);box-shadow:0 2px 6px color-mix(in srgb, var(--theme-primary-color) 10%, transparent), 0 0 0 1px color-mix(in srgb, var(--theme-primary-color) 6%, transparent);}
  .ddf-auth-title{font-family:var(--theme-font-heading);font-size:24px;font-weight:700;color:var(--theme-primary-color);letter-spacing:-.02em;margin:0 0 4px;line-height:1.2;}
  .ddf-auth-sub{font-size:13px;color:var(--theme-surface-muted);margin:0 0 22px;font-weight:500;}
  .ddf-auth-field{margin-bottom:14px;}
  .ddf-auth-field label{display:block;font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--theme-surface-muted);margin-bottom:6px;}
  .ddf-auth-field input{width:100%;height:46px;padding:0 14px;border:1.5px solid var(--theme-surface-edge);border-radius:11px;font-size:13.5px;font-weight:500;color:var(--theme-neutral-black);background:var(--theme-neutral-white);transition:all .15s;outline:none;box-sizing:border-box;}
  .ddf-auth-field input::placeholder{color:var(--theme-surface-muted);font-weight:400;}
  .ddf-auth-field input:focus{border-color:var(--theme-primary-color);background:var(--theme-neutral-white);box-shadow:0 0 0 4px color-mix(in srgb, var(--theme-primary-color) 12%, transparent);}
  .ddf-auth-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .ddf-auth-row-between{display:flex;align-items:center;justify-content:space-between;margin:10px 0 18px;font-size:12.5px;}
  .ddf-auth-row-between label{display:flex;align-items:center;gap:7px;color:var(--theme-surface-muted);font-weight:600;cursor:pointer;}
  .ddf-auth-row-between a{color:var(--theme-secondary-color);font-weight:700;text-decoration:none;}
  .ddf-auth-row-between a:hover{text-decoration:underline;}
  .ddf-auth-submit{width:100%;height:50px;background:linear-gradient(135deg,var(--theme-secondary-color),color-mix(in srgb, var(--theme-secondary-color) 80%, var(--theme-neutral-black)));color:var(--theme-neutral-white);border:none;border-radius:12px;font-size:13.5px;font-weight:800;letter-spacing:.4px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .18s;box-shadow:0 8px 20px -4px color-mix(in srgb, var(--theme-secondary-color) 40%, transparent);text-transform:uppercase;}
  .ddf-auth-submit:hover{transform:translateY(-1px);box-shadow:0 12px 24px -4px color-mix(in srgb, var(--theme-secondary-color) 50%, transparent);}
  .ddf-auth-submit.is-blue{background:linear-gradient(135deg,var(--theme-primary-color),color-mix(in srgb, var(--theme-primary-color) 75%, var(--theme-neutral-black)));box-shadow:0 8px 20px -4px color-mix(in srgb, var(--theme-primary-color) 40%, transparent);}
  .ddf-auth-submit.is-blue:hover{box-shadow:0 12px 24px -4px color-mix(in srgb, var(--theme-primary-color) 50%, transparent);}
  .ddf-auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:var(--theme-surface-muted);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;}
  .ddf-auth-divider::before,.ddf-auth-divider::after{content:"";flex:1;height:1px;background:var(--theme-surface-edge);}
  .ddf-auth-social{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .ddf-auth-social a{display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border:1.5px solid var(--theme-surface-edge);border-radius:11px;text-decoration:none;color:var(--theme-neutral-black);font-size:12.5px;font-weight:700;background:var(--theme-neutral-white);transition:all .15s;}
  .ddf-auth-social a:hover{border-color:var(--theme-primary-color);background:color-mix(in srgb, var(--theme-primary-color) 4%, var(--theme-neutral-white));}
  .ddf-auth-social i{font-size:17px;}
  .ddf-auth-terms{font-size:11.5px;color:var(--theme-surface-muted);line-height:1.55;margin:8px 0 14px;display:flex;align-items:flex-start;gap:8px;}
  .ddf-auth-terms input{margin-top:3px;accent-color:var(--theme-secondary-color);flex:0 0 14px;}
  .ddf-auth-terms a{color:var(--theme-secondary-color);font-weight:700;text-decoration:none;}
  .ddf-auth-terms a:hover{text-decoration:underline;}

/* == Block 6 == */

/* ═══ DDF Product Card v5 — World-class polish (Mulish) ═══ */
    .ddf-card {
        position: relative;
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid var(--theme-surface-edge, #e8e6e1);
        border-radius: 18px;
        overflow: hidden;
        font-family: var(--theme-font-body, Mulish, Muli, Helvetica Neue, Arial, sans-serif);
        transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .3s;
        isolation: isolate;
    }
    .ddf-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px -22px rgba(10,22,40,.22), 0 4px 10px -4px rgba(10,22,40,.08);
        border-color: color-mix(in srgb, var(--theme-primary-color, #0a1628) 20%, transparent);
    }

    /* Visual area — plain white canvas */
    .ddf-card-visual {
        position: relative;
        background: #ffffff;
        overflow: hidden;
    }
    .ddf-card-img-wrap {
        position: relative;
        aspect-ratio: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px;
        overflow: hidden;
    }
    .ddf-card-img {
        position: relative;
        z-index: 1;
        width: 80%;
        height: 80%;
        max-width: 80%;
        max-height: 80%;
        object-fit: contain;
        mix-blend-mode: multiply;
        transition: transform .6s cubic-bezier(.2,.7,.2,1);
    }
    .ddf-card:hover .ddf-card-img {
        transform: scale(1.05) translateY(-2px);
    }
    .ddf-card-img-hover {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        width: 80%;
        height: 80%;
        max-width: 80%;
        max-height: 80%;
        object-fit: contain;
        opacity: 0;
        mix-blend-mode: multiply;
        transition: opacity .5s ease;
    }
    .ddf-card:hover .ddf-card-img-hover { transform: translate(-50%, -50%); opacity: 1; }

    /* Minimal icon-only placeholder (no text) */
    .ddf-card-ph {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background:
            radial-gradient(circle at 30% 30%, rgba(255,255,255,.7) 0%, transparent 55%),
            linear-gradient(145deg, #f6f3ee 0%, #ebe6dc 100%);
    }
    .ddf-card-ph::before {
        content: "";
        position: absolute;
        inset: 22%;
        border-radius: 50%;
        background: radial-gradient(circle, color-mix(in srgb, var(--theme-tertiary-color, #d4a53f) 22%, transparent) 0%, transparent 70%);
        filter: blur(6px);
    }
    .ddf-card-ph i {
        position: relative;
        font-size: 68px;
        color: color-mix(in srgb, var(--theme-primary-color, #0a1628) 32%, transparent);
        transition: transform .5s, color .4s;
    }
    .ddf-card:hover .ddf-card-ph i {
        transform: scale(1.08) rotate(-4deg);
        color: color-mix(in srgb, var(--theme-primary-color, #0a1628) 48%, transparent);
    }

    /* Unified action strip — Add to Cart + Wishlist in one wine-toned gradient
       bar at the image bottom. Slides up on card hover. The gradient runs
       brand navy → deep wine with a soft glow layer, plus a soft white
       hairline at the top for a premium finish. Color: #9c2350 (GMR wine). */
    .ddf-card-strip {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        z-index: 15;
        display: flex;
        align-items: stretch;
        width: 100%;
        height: 38px;
        color: #fff;
        /* Monochrome wine gradient — dark wine → wine → light wine.
           No blue; tones range from near-black wine to a brightened wine lift. */
        background:
            linear-gradient(110deg,
                color-mix(in srgb, var(--theme-secondary-color, #9c2350) 78%, black) 0%,
                var(--theme-secondary-color, #9c2350) 45%,
                color-mix(in srgb, var(--theme-secondary-color, #9c2350) 92%, white) 100%);
        border: none;
        border-radius: 0;
        box-shadow:
            0 -6px 18px -10px color-mix(in srgb, var(--theme-secondary-color, #9c2350) 55%, transparent),
            0 -2px 8px -4px rgba(0,0,0,.28);
        transform: translateY(100%);
        opacity: 0;
        transition:
            transform .42s cubic-bezier(.2,.7,.2,1),
            opacity .3s ease;
        overflow: hidden;
    }
    /* Soft white hairline accent along the top — brand premium cue. */
    .ddf-card-strip::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 1px;
        background: linear-gradient(90deg,
            transparent 0%,
            rgba(255,255,255,.35) 35%,
            rgba(255,255,255,.65) 50%,
            rgba(255,255,255,.35) 65%,
            transparent 100%);
        opacity: .9;
        pointer-events: none;
    }
    /* Subtle wine-glow sheen sweeping from the lower-right on hover. */
    .ddf-card-strip::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(60% 120% at 85% 120%,
            color-mix(in srgb, var(--theme-secondary-color, #9c2350) 70%, white) 0%,
            transparent 60%);
        opacity: 0;
        transition: opacity .5s ease;
        pointer-events: none;
    }
    .ddf-card:hover .ddf-card-strip { transform: translateY(0); opacity: 1; }
    .ddf-card:hover .ddf-card-strip::after { opacity: .35; }

    /* Primary CTA — Add to Cart — takes the majority of the strip. */
    .ddf-strip-atc {
        flex: 1 1 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 0 12px;
        border: none;
        background: transparent;
        color: inherit;
        font-family: var(--theme-font-body, Mulish, sans-serif);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase;
        cursor: pointer;
        white-space: nowrap;
        position: relative;
        z-index: 1;
        transition: background .25s ease, color .25s ease;
    }
    .ddf-strip-atc i { font-size: 13px; line-height: 1; }
    .ddf-strip-atc:hover {
        background: color-mix(in srgb, #fff 14%, transparent);
        color: #ffffff;
    }
    .ddf-strip-atc:active { background: color-mix(in srgb, #fff 22%, transparent); }

    /* Wishlist icon — right-docked with a thin rgba(white) divider. */
    .ddf-strip-icon {
        flex: 0 0 auto;
        width: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        border-left: 1px solid rgba(255,255,255,.2);
        color: #fff;
        font-size: 15px;
        cursor: pointer;
        text-decoration: none;
        position: relative;
        z-index: 1;
        transition: background .25s ease, color .25s ease, transform .2s ease;
    }
    .ddf-strip-wish:hover {
        background: color-mix(in srgb, #fff 18%, transparent);
        color: #ffffff;
        transform: scale(1.08);
    }
    .ddf-strip-wish:active { transform: scale(.94); }
    .ddf-strip-icon i { line-height: 1; }

    /* Mobile / touch CTA — shown on hover-less devices */
    .ddf-card-mobile-cta { display: none; border-top: 1px solid var(--theme-surface-edge, #e8e6e1); }
    .ddf-card-mobile-btn {
        width: 100%;
        display: flex; align-items: center; justify-content: center; gap: 7px;
        padding: 10px;
        border: none;
        background: linear-gradient(110deg,
            color-mix(in srgb, var(--theme-secondary-color, #9c2350) 78%, black) 0%,
            var(--theme-secondary-color, #9c2350) 45%,
            color-mix(in srgb, var(--theme-secondary-color, #9c2350) 92%, white) 100%);
        color: #ffffff;
        font-family: var(--theme-font-body, Mulish, sans-serif);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase;
        cursor: pointer;
        transition: filter .2s;
    }
    .ddf-card-mobile-btn:hover { filter: brightness(1.06); }
    @media (hover: none) {
        /* Touch devices: no hover state exists — hide the hover-reveal strip
           and show a full-width mobile CTA docked at the card bottom instead. */
        .ddf-card-strip { display: none !important; }
        .ddf-card-mobile-cta { display: block; }
    }

    /* Content block — all-white card canvas */
    .ddf-card-content {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        padding: 14px 16px 16px;
        gap: 2px;
        background: #ffffff;
        font-family: var(--theme-font-body, Mulish, Muli, Helvetica Neue, Arial, sans-serif);
    }
    .ddf-card-brand {
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1.8px;
        text-transform: uppercase;
        color: var(--theme-secondary-color, #9c2350);
        text-decoration: none;
        transition: color .2s;
    }
    .ddf-card-brand:hover { color: color-mix(in srgb, var(--theme-secondary-color, #9c2350) 80%, black); }
    .ddf-card-name {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-top: 4px;
        min-height: 40px;
        font-family: var(--theme-font-body, Mulish, Muli, Helvetica Neue, Arial, sans-serif);
        font-size: 15px;
        font-weight: 700;
        line-height: 1.35;
        color: var(--theme-neutral-black, #0a1628);
        text-decoration: none;
        transition: color .2s;
    }
    .ddf-card-name:hover { color: var(--theme-secondary-color, #9c2350); }
    .ddf-card-meta-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 6px;
    }
    .ddf-card-meta {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 10.5px;
        font-weight: 500;
        color: var(--theme-surface-muted, #5b5e66);
    }
    .ddf-card-meta i { font-size: 12px; }
    .ddf-card-rating {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 6px;
    }
    .ddf-card-stars { color: var(--theme-tertiary-color, #d4a53f); font-size: 12px; display: inline-flex; gap: 1px; }
    .ddf-card-reviews { font-size: 10.5px; color: var(--theme-surface-muted, #5b5e66); font-weight: 500; }
    .ddf-card-price-block {
        margin-top: auto;
        padding-top: 12px;
    }
    .ddf-card-ddf-price {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    .ddf-card-ddf-price .ddf-price-now,
    .ddf-card-ddf-price .ddf-price-was { align-self: baseline; }
    .ddf-price-now {
        font-size: 18px;
        font-weight: 800;
        color: var(--theme-primary-color, #0a1628);
        line-height: 1;
    }
    .ddf-price-was {
        font-size: 12px;
        font-weight: 500;
        color: var(--theme-surface-muted, #8a929d);
        text-decoration: line-through;
        line-height: 1;
    }
    .ddf-price-savings {
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .6px;
        text-transform: uppercase;
        color: var(--theme-secondary-color, #9c2350);
        background: color-mix(in srgb, var(--theme-secondary-color, #9c2350) 10%, transparent);
        padding: 3px 7px;
        border-radius: 5px;
    }
    .ddf-price-request {
        font-size: 13px;
        font-weight: 700;
        color: var(--theme-surface-muted, #8a929d);
    }

    /* ═══ PROMO STRIP — refined "ribbon" footer at bottom of product card ═══
       The strip is a thin maroon/navy band with a soft inner highlight at the
       top and a darkened underline at the bottom — like a real printed
       ribbon. Centered icon + label, generous letter-spacing, and a subtle
       diagonal sheen so it reads as a designed label rather than a flat fill.
    */
    .ddf-promo-strip {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 9px 12px;
        font-family: var(--theme-font-body, Mulish, sans-serif);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        position: relative;
        overflow: hidden;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.18),     /* premium top highlight */
            inset 0 -1px 0 rgba(0,0,0,.18);          /* sealed bottom edge */
        border-top: 0;
    }
    /* Subtle diagonal sheen — gives the ribbon depth without being loud. */
    .ddf-promo-strip::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.10) 50%, transparent 62%);
        pointer-events: none;
    }
    .ddf-promo-strip > * { position: relative; z-index: 1; }
    .ddf-promo-strip i {
        font-size: 13px;
        line-height: 1;
        opacity: .92;
    }
    /* Decorative end caps — tiny dot on each side for a "label" feel. */
    .ddf-promo-strip::after {
        content: '';
        position: absolute;
        right: 14px; top: 50%;
        width: 4px; height: 4px;
        border-radius: 50%;
        background: rgba(255,255,255,.5);
        transform: translateY(-50%);
        z-index: 1;
    }

    /* All promo strips render white text — both maroon and gold tokens
       resolve to the same brand maroon in this theme, so we never want
       dark text on them. Navy / teal also stay white for consistency. */
    .ddf-promo-maroon { background: linear-gradient(180deg, var(--theme-secondary-color, #9c2350) 0%, color-mix(in srgb, var(--theme-secondary-color, #9c2350) 78%, black) 100%); color: #fff !important; }
    .ddf-promo-gold   { background: linear-gradient(180deg, var(--theme-secondary-color, #9c2350) 0%, color-mix(in srgb, var(--theme-secondary-color, #9c2350) 78%, black) 100%); color: #fff !important; }
    .ddf-promo-navy   { background: linear-gradient(180deg, var(--theme-primary-color, #0a1628) 0%, color-mix(in srgb, var(--theme-primary-color, #0a1628) 82%, black) 100%); color: #fff !important; }
    .ddf-promo-teal   { background: linear-gradient(180deg, var(--theme-primary-color, #0a1628) 0%, color-mix(in srgb, var(--theme-primary-color, #0a1628) 82%, black) 100%); color: #fff !important; }
    .ddf-promo-strip i { color: #fff !important; }

    /* Smaller controls at narrower breakpoints */
    @media (max-width: 900px) {
        .ddf-card-strip { height: 42px; }
        .ddf-strip-atc { font-size: 10.5px; letter-spacing: .18em; gap: 8px; }
        .ddf-strip-atc i { font-size: 14px; }
        .ddf-strip-icon { width: 44px; font-size: 16px; }
    }

    /* ═══ SHOWCASE MARKERS — four distinct artifacts in four distinct spots ═══
       • New        → top-left tucked corner ribbon (compact)
       • Bestseller → top-right gold seal + maroon ribbon tail
       • Exclusive  → bottom-CENTER text-only italic with twin gold hairlines
       • On Offer   → bottom-LEFT small clipped maroon tag                       */
    .pc-mark { position: absolute; z-index: 6; pointer-events: none; }

    /* ── ① NEW ARRIVAL — small diagonal corner ribbon, tucked into the corner */
    .pc-ribbon-new {
        top: 0; left: 0;
        width: 74px; height: 74px;
        overflow: hidden;
    }
    .pc-ribbon-new::before {
        /* The ribbon band — 105px gold strip rotated -45°, hugging the corner */
        content: '';
        position: absolute;
        top: 16px; left: -32px;
        width: 108px; height: 18px;
        background: linear-gradient(135deg, #ffd54a 0%, #ffc72c 50%, #e0a300 100%);
        transform: rotate(-45deg);
        box-shadow:
            0 3px 7px rgba(0,0,0,.22),
            inset 0 1px 0 rgba(255,255,255,.45),
            inset 0 -1px 0 rgba(0,0,0,.12);
        animation: pcRibbonIn .5s cubic-bezier(.2,.8,.2,1) .05s backwards;
    }
    .pc-ribbon-new::after {
        /* Tiny darker fold tab making the ribbon feel tucked under the corner */
        content: '';
        position: absolute;
        top: 0; left: 0;
        width: 7px; height: 7px;
        background: linear-gradient(135deg, #b08300, #7a5800);
        clip-path: polygon(0 0, 100% 0, 0 100%);
    }
    .pc-ribbon-new span {
        position: absolute;
        top: 16px; left: -32px;
        width: 108px;
        line-height: 18px;
        text-align: center;
        color: #001f44;
        font-family: var(--theme-font-body, Mulish, sans-serif);
        font-size: 8.5px;
        font-weight: 900;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        transform: rotate(-45deg);
        text-shadow: 0 1px 0 rgba(255,255,255,.35);
        animation: pcRibbonIn .5s cubic-bezier(.2,.8,.2,1) .05s backwards;
    }

    /* ── ② BESTSELLER — self-contained polished gold coin (top-right) ───── */
    .pc-medal-best {
        top: 10px; right: 10px;
        width: 50px; height: 50px;
        border-radius: 50%;
        background: radial-gradient(circle at 30% 25%, #fff2b3 0%, #ffd54a 38%, #e0a300 100%);
        box-shadow:
            0 0 0 1.5px #001f44,
            0 0 0 3px rgba(255,199,44,.4),
            0 5px 11px rgba(0,0,0,.3),
            inset 0 1.5px 2px rgba(255,255,255,.6),
            inset 0 -2px 3px rgba(0,0,0,.18);
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        gap: 1px;
        text-align: center;
        animation: pcMedalIn .55s cubic-bezier(.34,1.56,.64,1) .2s backwards;
    }
    .pc-medal-best::before {
        /* Engraved inner ring inside the coin */
        content: '';
        position: absolute;
        inset: 4px;
        border-radius: 50%;
        border: 1px solid rgba(0,31,68,.28);
        pointer-events: none;
    }
    .pc-medal-best i {
        font-size: 14px;
        color: #001f44;
        line-height: 1;
        filter: drop-shadow(0 1px 1px rgba(255,255,255,.45));
        animation: pcCrownLift 2.4s ease-in-out infinite;
    }
    .pc-medal-best em {
        font-family: var(--theme-font-body, Mulish, sans-serif);
        font-style: normal;
        font-size: 6.5px;
        font-weight: 900;
        letter-spacing: .55px;
        line-height: 1.05;
        text-transform: uppercase;
        color: #001f44;
        text-shadow: 0 1px 0 rgba(255,255,255,.4);
    }

    /* ── ③ EXCLUSIVE — slim italic text at bottom-CENTER of image ──────── */
    .pc-text-excl {
        bottom: 12px; left: 50%;
        transform: translateX(-50%);
        display: inline-flex; align-items: center;
        gap: 5px;
        padding: 3px 10px;
        font-family: 'Playfair Display', Georgia, serif;
        font-style: italic;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .2px;
        color: #001f44;
        white-space: nowrap;
        animation: pcExclIn .55s cubic-bezier(.2,.8,.2,1) .15s backwards;
    }
    .pc-text-excl i {
        color: #ffc72c;
        font-size: 10px;
        font-style: normal;
        filter: drop-shadow(0 1px 2px rgba(0,0,0,.18));
    }
    .pc-text-excl span {
        font-style: italic;
        color: #001f44;
    }

    /* ── ④ ON OFFER — small clipped maroon tag at bottom-LEFT of image ──── */
    .pc-tag-offer {
        bottom: 11px; left: 10px;
        display: inline-flex; align-items: center;
        gap: 3px;
        padding: 3px 7px 3px 10px;
        background: linear-gradient(135deg, #b22d61 0%, #9c2350 55%, #7a1a3e 100%);
        color: #ffffff;
        font-family: var(--theme-font-body, Mulish, sans-serif);
        font-size: 8px;
        font-weight: 900;
        letter-spacing: .7px;
        text-transform: uppercase;
        clip-path: polygon(9% 0, 100% 0, 100% 100%, 9% 100%, 0 50%);
        box-shadow: 0 3px 6px rgba(156,35,80,.4);
        text-shadow: 0 1px 1px rgba(0,0,0,.3);
        animation: pcTagIn .5s cubic-bezier(.2,.8,.2,1) .25s backwards;
    }
    .pc-tag-offer i {
        font-size: 9px;
        color: #ffd54a;
        filter: drop-shadow(0 0 3px rgba(255,213,74,.6));
    }

    /* ── Animations ──────────────────────────────────────────────────────── */
    @keyframes pcRibbonIn {
        from { opacity: 0; transform: rotate(-45deg) translateY(-12px); }
        to   { opacity: 1; transform: rotate(-45deg) translateY(0); }
    }
    @keyframes pcMedalIn {
        from { opacity: 0; transform: scale(.4) rotate(-10deg); }
        to   { opacity: 1; transform: scale(1) rotate(0); }
    }
    @keyframes pcExclIn {
        from { opacity: 0; transform: translate(-50%, 8px); letter-spacing: -.5px; }
        to   { opacity: 1; transform: translate(-50%, 0); letter-spacing: .3px; }
    }
    @keyframes pcTagIn {
        from { opacity: 0; transform: translateX(-10px); }
        to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes pcCrownLift {
        0%, 100% { transform: translateY(0) scale(1); }
        50%      { transform: translateY(-1.5px) scale(1.1); }
    }

    /* On hover the bottom action strip slides up — fade the bottom labels out
       so they don't collide with the Add-to-Cart button visually. */
    .ddf-card:hover .pc-text-excl,
    .ddf-card:hover .pc-tag-offer {
        opacity: 0;
        transition: opacity .25s ease;
    }
    .pc-text-excl, .pc-tag-offer { transition: opacity .35s ease; }

    /* ── Compact mode at small breakpoints ───────────────────────────────── */
    @media (max-width: 640px) {
        .pc-ribbon-new { width: 64px; height: 64px; }
        .pc-ribbon-new::before, .pc-ribbon-new span { top: 14px; left: -28px; width: 96px; height: 16px; line-height: 16px; }
        .pc-ribbon-new span { font-size: 7.5px; letter-spacing: .9px; }
        .pc-medal-best { width: 42px; height: 42px; top: 8px; right: 8px; }
        .pc-medal-best i { font-size: 12px; }
        .pc-medal-best em { font-size: 5.5px; letter-spacing: .4px; }
        .pc-text-excl { font-size: 12px; bottom: 10px; gap: 5px; padding: 3px 8px; }
        .pc-text-excl .pc-excl-rule { width: 12px; }
        .pc-text-excl i { font-size: 8px; }
        .pc-tag-offer { font-size: 7.5px; bottom: 9px; left: 8px; padding: 2px 7px 2px 9px; }
        .pc-tag-offer i { font-size: 8px; }
    }

/* == Block 7 == */

/* ───── DUAL-PANEL FEATURE: Exclusives ⚭ On Sale ───── */
  /* slider mechanics */
  .df-head-row {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    margin-top: 4px;
  }
  .df-nav { display: inline-flex; align-items: center; gap: 8px; }
  .df-arrow {
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.06);
    color: #ffffff; font-size: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .18s; padding: 0;
  }
  .df-arrow:hover:not(:disabled) { transform: translateY(-1px); border-color: #ffc72c; color: #ffc72c; background: rgba(255,199,44,.12); }
  .df-arrow:disabled { opacity: .32; cursor: not-allowed; }
  .df-arrow-gold { /* default already matches dark pane */ }
  .df-arrow-white {
    border-color: rgba(255,255,255,.36); background: rgba(255,255,255,.10); color: #fff;
  }
  .df-arrow-white:hover:not(:disabled) { background: #fff; color: #9c2350; border-color: #fff; }
  .df-counter { font-size: 12px; font-weight: 800; letter-spacing: 1.2px; color: rgba(255,255,255,.78); min-width: 38px; text-align: center; font-family: 'Helvetica Neue','Helvetica','Arial',sans-serif; display: inline-flex; gap: 3px; align-items: baseline; }
  .df-counter-light { color: rgba(255,255,255,.92); }
  .df-slider { overflow: hidden; }
  .df-track {
    display: flex; flex-wrap: nowrap; transition: transform .42s cubic-bezier(.65,.05,.35,1);
    will-change: transform;
  }
  .df-slide {
    flex: 0 0 100%; min-width: 0; max-width: 100%;
    display: flex; flex-direction: column; gap: 18px;
  }

  .dual-feat { padding: 56px 0 64px; background: linear-gradient(180deg, #f6f7fa 0%, #ffffff 100%); }
  .dual-feat .wrap { max-width: 1340px; margin: 0 auto; padding: 0 20px; }
  .dual-feat-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch;
  }

  /* Pane shell */
  .df-pane {
    position: relative; overflow: hidden;
    border-radius: 22px; padding: 28px 26px 26px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 18px;
    min-height: 540px;
    isolation: isolate;
  }
  .df-pane-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

  .df-exclusives {
    color: #f5f1e3;
    background: #001f44;
  }
  .df-exclusives .df-pane-bg {
    background:
      radial-gradient(circle at 20% 0%, rgba(255,199,44,.10) 0%, transparent 50%),
      radial-gradient(circle at 100% 100%, rgba(255,199,44,.14) 0%, transparent 55%),
      linear-gradient(135deg, #002856 0%, #001f44 50%, #000d1f 100%);
  }
  .df-exclusives::after {
    content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><circle cx='1' cy='1' r='.4' fill='%23ffc72c' opacity='.05'/></svg>");
    background-size: 4px 4px;
  }

  .df-onsale {
    color: #ffffff;
    background: #9c2350;
  }
  .df-onsale .df-pane-bg {
    background:
      radial-gradient(circle at 0% 0%, rgba(156,35,80,.22) 0%, transparent 55%),
      radial-gradient(circle at 100% 100%, rgba(0,40,86,.32) 0%, transparent 55%),
      linear-gradient(135deg, #b22d61 0%, #9c2350 50%, #6f1a3c 100%);
  }

  /* Pane head */
  .df-pane-head { position: relative; }
  .df-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase;
    color: #ffc72c;
    margin-bottom: 10px;
  }
  .df-eyebrow i { font-size: 14px; }
  .df-eyebrow-light { color: #ffffff; }

  .df-h2 {
    font-family: 'Helvetica Neue','Helvetica','Arial',sans-serif;
    font-size: clamp(26px, 3.2vw, 36px); font-weight: 700;
    color: #ffffff; letter-spacing: -.02em; line-height: 1.05; margin: 0 0 8px;
  }
  .df-h2 em { font-style: italic; color: #ffc72c; font-weight: 400; }
  .df-h2-light em { color: #ffffff; opacity: .92; }

  .df-sub {
    font-size: 13.5px; color: rgba(255,255,255,.72); line-height: 1.55; max-width: 480px; margin: 0 0 14px;
    font-weight: 500;
  }
  .df-sub-light { color: rgba(255,255,255,.85); }

  .df-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; border-radius: 10px;
    font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    text-decoration: none; transition: all .18s;
  }
  .df-cta i { font-size: 16px; transition: transform .18s; }
  .df-cta:hover i { transform: translateX(3px); }
  .df-cta-gold {
    background: #ffc72c; color: #001f44;
  }
  .df-cta-gold:hover { background: #ffd54a; }
  .df-cta-white {
    background: #ffffff; color: #9c2350;
  }
  .df-cta-white:hover { background: #fff7eb; color: #7a1a3e; }

  /* Hero card */
  .df-hero {
    position: relative; display: grid; grid-template-columns: 160px 1fr; gap: 16px;
    padding: 16px; border-radius: 16px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    text-decoration: none; color: inherit;
    transition: transform .25s, background .25s, border-color .25s;
    overflow: hidden;
  }
  .df-hero:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,.10);
    border-color: rgba(255,199,44,.45);
  }
  .df-hero-light { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.20); }
  .df-hero-light:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); }

  .df-tag {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 99px;
    font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  }
  .df-tag i { font-size: 11px; }
  .df-tag-gold { background: #ffc72c; color: #001f44; }
  .df-tag-save { background: #ffffff; color: #9c2350; }

  .df-hero-img {
    width: 160px; height: 160px; border-radius: 12px;
    background: #ffffff; display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
  }
  .df-hero-img img { max-width: 88%; max-height: 88%; object-fit: contain; transition: transform .35s; }
  .df-hero:hover .df-hero-img img { transform: scale(1.05); }
  .df-hero-ph {
    font-size: 48px; font-weight: 800; color: #cdd3dc;
    font-family: 'Helvetica Neue','Helvetica','Arial',sans-serif;
  }

  .df-hero-meta { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
  .df-brand {
    font-size: 10.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
    color: rgba(255,255,255,.65); margin-bottom: 4px;
  }
  .df-onsale .df-brand { color: rgba(255,255,255,.85); }
  .df-name {
    font-family: 'Helvetica Neue','Helvetica','Arial',sans-serif;
    font-size: 17px; font-weight: 700; color: #ffffff; line-height: 1.2;
    margin: 0 0 10px; letter-spacing: -.005em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .df-price-row { display: flex; align-items: baseline; gap: 8px; }
  .df-price {
    font-family: 'Helvetica Neue','Helvetica','Arial',sans-serif;
    font-size: 22px; font-weight: 800; color: #ffc72c; letter-spacing: -.02em;
  }
  .df-price-sale { color: #ffffff; }
  .df-strike { font-size: 13px; color: rgba(255,255,255,.5); text-decoration: line-through; }

  /* Mini grid */
  .df-mini-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  }
  .df-mini {
    position: relative; display: flex; gap: 10px;
    padding: 10px; border-radius: 12px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    text-decoration: none; color: inherit;
    transition: all .18s;
    overflow: hidden;
  }
  .df-mini:hover {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,199,44,.4);
    transform: translateY(-2px);
  }
  .df-onsale .df-mini:hover {
    border-color: rgba(255,255,255,.55);
  }
  .df-mini-light { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); }
  .df-mini-light:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.36); }
  .df-mini-img {
    flex: 0 0 56px; width: 56px; height: 56px; border-radius: 9px;
    background: #fff; display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  .df-mini-img img { max-width: 86%; max-height: 86%; object-fit: contain; }
  .df-mini-ph { font-size: 18px; font-weight: 800; color: #cdd3dc; }
  .df-mini-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
  .df-mini-brand {
    font-size: 9px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
    color: rgba(255,255,255,.55); margin-bottom: 2px;
  }
  .df-onsale .df-mini-brand { color: rgba(255,255,255,.78); }
  .df-mini-name {
    font-size: 12px; font-weight: 700; color: #ffffff; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-bottom: 4px;
  }
  .df-mini-price-row { display: flex; align-items: baseline; gap: 6px; }
  .df-mini-price {
    font-size: 13px; font-weight: 800; color: #ffc72c; letter-spacing: -.01em;
  }
  .df-onsale .df-mini-price { color: #ffffff; }
  .df-mini-strike { font-size: 10.5px; color: rgba(255,255,255,.5); text-decoration: line-through; }
  .df-onsale .df-mini-strike { color: rgba(255,255,255,.7); }
  .df-mini-pct {
    position: absolute; top: 6px; right: 6px; z-index: 2;
    background: #ffc72c; color: #001f44;
    padding: 2px 6px; border-radius: 6px;
    font-size: 9.5px; font-weight: 800; letter-spacing: .3px;
  }
  .df-onsale .df-mini-pct { background: #ffffff; color: #9c2350; }

  /* Responsive */
  @media (max-width: 980px) {
    .dual-feat-grid { grid-template-columns: 1fr; gap: 18px; }
    .df-pane { min-height: 0; padding: 24px 20px; }
    .df-hero { grid-template-columns: 130px 1fr; gap: 14px; padding: 14px; }
    .df-hero-img { width: 130px; height: 130px; }
  }
  @media (max-width: 560px) {
    .df-hero { grid-template-columns: 1fr; }
    .df-hero-img { width: 100%; height: 200px; }
    .df-mini-grid { grid-template-columns: 1fr; }
  }

/* == Block 8 == */

/* ═══════════════════════════════════════════════════════════════
       FOOTER v3 — best-in-class, theme-driven
       ═══════════════════════════════════════════════════════════════ */
    .ddf-footer{
        font-family:var(--theme-font-body);
        margin-top:48px;
    }

    /* ── MAIN NAVY BODY (#7 subtle gold dot pattern) ────── */
    .ddf-foot-main{
        background:
            radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--theme-tertiary-color) 14%, transparent) 1px, transparent 1.5px) 0 0/40px 40px,
            radial-gradient(circle at 70% 75%, color-mix(in srgb, var(--theme-tertiary-color) 10%, transparent) 1px, transparent 1.5px) 0 0/55px 55px,
            linear-gradient(180deg,
                var(--theme-primary-color) 0%,
                color-mix(in srgb, var(--theme-primary-color) 88%, #000) 100%);
        color:rgba(255,255,255,.78);
        padding:36px 0 36px;
        position:relative;
    }

    /* ━━ #1 STATS STRIP ━━ */
    .ddf-foot-stats{
        display:flex;align-items:center;justify-content:space-between;gap:14px;
        margin-bottom:16px;
        padding:10px 0;
        border:none !important;box-shadow:none !important;outline:none;
        background:transparent !important;
    }
    .ddf-stat{
        display:flex;flex-direction:column;align-items:center;gap:2px;
        flex:1;text-align:center;
    }
    .ddf-stat-n{
        font-family:var(--theme-font-heading);
        font-size:30px;font-weight:900;letter-spacing:-.01em;
        color:#ffffff;
        line-height:1;
    }
    .ddf-stat-n small{font-size:18px;font-weight:800;color:#fff;}
    .ddf-stat-l{
        font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
        color:rgba(255,255,255,.78);
    }
    .ddf-stat-sep{
        width:1px;height:48px;
        background:linear-gradient(180deg,transparent,rgba(255,255,255,.2),transparent);
    }

    /* ── CONTACT + NEWSLETTER CARD (4-column) ───────────── */
    .ddf-foot-top-row{
        display:grid;
        grid-template-columns:1fr 1fr 1.2fr 1.6fr;
        align-items:center;
        gap:18px;
        background:#ececec;
        border-radius:14px;
        padding:18px 24px;
        margin-bottom:42px;
        box-shadow:0 8px 24px -10px rgba(0,0,0,.25);
    }
    .ddf-foot-contact{
        display:flex;align-items:center;gap:12px;
        text-decoration:none;
        color:#1a1a1a;
        transition:transform .2s ease;
        min-width:0;
    }
    .ddf-foot-contact:hover{transform:translateX(2px);}
    .ddf-foot-contact-ic{
        width:40px;height:40px;border-radius:50%;
        background:var(--theme-primary-color);
        display:flex;align-items:center;justify-content:center;
        font-size:18px;color:#fff;
        flex-shrink:0;
        transition:all .2s;
        position:relative;
    }
    .ddf-foot-contact:hover .ddf-foot-contact-ic{
        background:var(--theme-secondary-color);
    }
    /* WhatsApp variant */
    .ddf-foot-wa-ic{background:#25D366 !important;}
    .ddf-foot-wa:hover .ddf-foot-wa-ic{background:#128C7E !important;}
    /* #10 phone-icon ripple */
    .ddf-ripple::before, .ddf-ripple::after{
        content:"";position:absolute;inset:0;border-radius:50%;
        border:2px solid var(--theme-primary-color);
        opacity:0;
    }
    .ddf-foot-contact:hover .ddf-ripple::before{
        animation:ddfRipple 1.4s ease-out infinite;
    }
    .ddf-foot-contact:hover .ddf-ripple::after{
        animation:ddfRipple 1.4s ease-out infinite .5s;
    }
    @keyframes ddfRipple{
        0%   {transform:scale(1);  opacity:.7;}
        100% {transform:scale(2.2);opacity:0;}
    }
    .ddf-foot-contact-tx{
        display:flex;flex-direction:column;gap:1px;font-size:13px;min-width:0;
    }
    .ddf-foot-contact-lbl{color:#5a5a5a;font-weight:500;font-size:11px;}
    .ddf-foot-contact-tx strong{
        color:#1a1a1a;font-weight:700;letter-spacing:.005em;font-size:13px;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    .ddf-foot-hours{
        color:#7a7a7a;font-size:10.5px;font-weight:500;letter-spacing:.02em;
    }

    /* Newsletter (#3 incentive copy + #11 glow) */
    .ddf-foot-news{
        display:flex;flex-direction:column;gap:8px;
        padding:0 0 0 18px;
        border-left:1px solid #cfcfcf;
    }
    .ddf-foot-news-head{display:flex;flex-direction:column;gap:1px;}
    .ddf-foot-news-head strong{
        font-family:var(--theme-font-heading);
        font-size:13px;font-weight:700;color:#1a1a1a;
    }
    .ddf-foot-news-head small{
        font-size:10.5px;color:#5a5a5a;
    }
    .ddf-foot-news-control{
        display:flex;align-items:center;gap:0;
        background:#fff;
        border-radius:50px;
        padding:4px;
        box-shadow:0 2px 6px -2px rgba(15,30,55,.10);
        transition:box-shadow .2s ease;
    }
    .ddf-foot-news-control:focus-within{
        box-shadow:
            0 0 0 3px color-mix(in srgb, var(--theme-tertiary-color) 25%, transparent),
            0 4px 12px -4px rgba(15,30,55,.18);
    }
    .ddf-foot-news-control input{
        flex:1;background:transparent;border:0;outline:0;
        padding:9px 14px;
        font-size:12.5px;color:#1a1a1a;min-width:0;
    }
    .ddf-foot-news-control input::placeholder{color:#9a9a9a;}
    .ddf-foot-news-control button{
        background:var(--theme-secondary-color);
        color:#fff;border:0;cursor:pointer;
        padding:9px 18px;border-radius:50px;
        font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
        transition:all .15s ease;
        white-space:nowrap;
    }
    .ddf-foot-news-control button:hover{
        background:color-mix(in srgb, var(--theme-secondary-color) 80%, #000);
        transform:translateX(2px);
    }

    /* ── 5-COLUMN GRID ────────────────────────────────────── */
    .ddf-foot-grid{
        display:grid;
        grid-template-columns:2fr 1fr 1.3fr 1fr 1.3fr;
        gap:36px;
        align-items:stretch;
    }
    .ddf-foot-col{
        min-width:0;
        display:flex;flex-direction:column;
    }
    /* Push the GMR Aero partner block to the bottom of the side column
       so col-5 visually matches the height of the brand col. */
    .ddf-foot-side .ddf-foot-partner{
        margin-top:auto;
    }

    /* Column headings */
    .ddf-foot-h{
        font-family:var(--theme-font-heading);
        font-size:13px;font-weight:700;letter-spacing:.04em;
        color:#fff;
        margin:0 0 18px;
        position:relative;
        padding-bottom:10px;
    }
    .ddf-foot-h::after{
        content:"";position:absolute;left:0;bottom:0;
        width:32px;height:2px;background:var(--theme-tertiary-color);
    }
    .ddf-foot-h-mt{margin-top:26px;}

    /* Brand col (#13 serif heading + #8 map-pin icons) */
    .ddf-foot-brand-h{
        font-family:var(--theme-font-heading);
        font-size:16px;font-weight:800;letter-spacing:.10em;
        color:#fff;
        margin:0 0 18px;
        padding-bottom:12px;
        border-bottom:1px solid rgba(255,255,255,.12);
    }
    .ddf-foot-addr{margin-bottom:14px;}
    .ddf-foot-addr-h{
        display:flex;align-items:center;gap:6px;
        font-family:var(--theme-font-heading);
        font-size:12.5px;font-weight:700;
        color:#fff;
        margin:0 0 4px;
    }
    .ddf-foot-addr-h i{
        font-size:14px;color:var(--theme-tertiary-color);
    }
    .ddf-foot-addr-b{
        font-size:12px;line-height:1.6;
        color:rgba(255,255,255,.68);
        margin:0;padding-left:20px;
    }
    .ddf-foot-cin{
        margin-top:14px;
        padding-top:14px;
        border-top:1px dashed rgba(255,255,255,.15);
        font-size:11.5px;color:rgba(255,255,255,.7);letter-spacing:.02em;
    }
    .ddf-foot-cin strong{color:var(--theme-tertiary-color);font-weight:700;}

    /* Link list */
    .ddf-foot-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
    .ddf-foot-list a{
        font-size:13px;color:rgba(255,255,255,.78);
        text-decoration:none;
        display:inline-block;
        transition:all .15s ease;
        position:relative;
    }
    .ddf-foot-list a:hover{
        color:var(--theme-tertiary-color);
        padding-left:6px;
    }
    .ddf-foot-list a:hover::before{
        content:"›";
        position:absolute;left:-2px;top:0;
        color:var(--theme-tertiary-color);
        font-size:14px;font-weight:700;
    }

    /* Social row */
    .ddf-foot-social{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
    .ddf-foot-social a{
        width:36px;height:36px;border-radius:50%;
        display:flex;align-items:center;justify-content:center;
        background:rgba(255,255,255,.06);
        border:1px solid rgba(255,255,255,.14);
        color:rgba(255,255,255,.85);
        font-size:17px;text-decoration:none;
        transition:all .2s ease;
    }
    .ddf-foot-social a:hover{
        background:var(--theme-tertiary-color);
        color:var(--theme-primary-color);
        border-color:var(--theme-tertiary-color);
        transform:translateY(-3px);
        box-shadow:0 6px 16px -4px color-mix(in srgb, var(--theme-tertiary-color) 50%, transparent);
    }

    /* Payment cards */
    .ddf-foot-pay{display:flex;flex-wrap:wrap;gap:6px;}
    .ddf-pay-card{
        width:44px;height:28px;border-radius:4px;
        display:inline-flex;align-items:center;justify-content:center;
        font-family:Arial,Helvetica,sans-serif;
        font-size:9px;font-weight:800;letter-spacing:.04em;
        text-transform:uppercase;
        background:#fff;
        box-shadow:0 1px 3px rgba(0,0,0,.18);
        position:relative;
    }
    .ddf-pay-visa{color:#1a1f71;font-style:italic;font-size:11px;letter-spacing:.5px;}
    .ddf-pay-amex{background:#016fd0;color:#fff;font-size:8px;}
    .ddf-pay-mc{background:#fff;position:relative;overflow:hidden;}
    .ddf-pay-mc .d1, .ddf-pay-mc .d2{
        width:14px;height:14px;border-radius:50%;display:inline-block;
        position:absolute;top:50%;transform:translateY(-50%);
    }
    .ddf-pay-mc .d1{background:#eb001b;left:9px;}
    .ddf-pay-mc .d2{background:#f79e1b;right:9px;mix-blend-mode:multiply;}
    .ddf-pay-disc{background:#ff6000;color:#fff;font-size:7.5px;letter-spacing:.02em;}
    .ddf-pay-pp{background:#fff;color:#003087;font-size:8px;font-style:italic;}

    /* ━━ GET-THE-APP + GMR GROUP BRANDS BAND — split into two halves ━━ */
    .ddf-foot-getapp{
        margin-top:36px;
        padding:26px 18px;
        border-top:1px solid rgba(255,255,255,.10);
        border-bottom:1px solid rgba(255,255,255,.10);
        display:grid;
        grid-template-columns:1fr 1px 1fr;
        align-items:stretch;
        gap:32px;
        background:linear-gradient(135deg,
            color-mix(in srgb, var(--theme-tertiary-color) 4%, transparent) 0%,
            transparent 100%);
    }
    /* vertical hairline divider between the two halves */
    .ddf-foot-getapp::before{
        content:"";
        grid-column:2;grid-row:1;
        background:linear-gradient(180deg,
            transparent 0%,
            rgba(255,255,255,.18) 50%,
            transparent 100%);
        align-self:stretch;
    }
    .ddf-foot-getapp-left,
    .ddf-foot-getapp-right{
        display:flex;flex-direction:column;justify-content:center;gap:14px;
    }
    .ddf-foot-getapp-left{align-items:flex-start;}
    .ddf-foot-getapp-right{align-items:flex-end;text-align:right;}
    .ddf-foot-getapp-right .ddf-foot-getapp-head{text-align:right;}
    .ddf-foot-getapp-head{max-width:380px;}
    .ddf-foot-getapp-head h4{
        font-family:var(--theme-font-heading);
        font-size:18px;font-weight:800;letter-spacing:.005em;
        color:#fff;margin:0 0 4px;
    }
    .ddf-foot-getapp-head p{
        font-size:12px;color:rgba(255,255,255,.7);
        margin:0;line-height:1.5;
    }
    .ddf-foot-getapp-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
    .ddf-app-badge{
        display:inline-flex;align-items:center;gap:10px;
        padding:9px 18px;
        background:#000;
        border:1px solid rgba(255,255,255,.18);
        border-radius:10px;
        text-decoration:none;
        transition:all .2s ease;
        min-width:160px;
    }
    .ddf-app-badge:hover{
        border-color:var(--theme-tertiary-color);
        transform:translateY(-2px);
        box-shadow:0 10px 24px -8px color-mix(in srgb, var(--theme-tertiary-color) 35%, transparent);
    }
    .ddf-app-badge i{font-size:28px;color:#fff;}
    .ddf-app-badge span{display:flex;flex-direction:column;line-height:1;}
    .ddf-app-badge small{
        font-size:9.5px;color:rgba(255,255,255,.7);
        letter-spacing:.06em;text-transform:uppercase;
        margin-bottom:3px;
    }
    .ddf-app-badge strong{
        font-family:var(--theme-font-heading);
        font-size:15px;font-weight:700;color:#fff;letter-spacing:.005em;
    }

    /* GMR Group sister-brand tiles (right half) — clean white card style */
    .ddf-foot-group-row{
        display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
        width:100%;max-width:480px;
    }
    .ddf-group-tile{
        position:relative;
        display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
        padding:14px 8px;
        background:#ffffff;
        border:1px solid rgba(255,255,255,.18);
        border-radius:10px;
        text-decoration:none;
        transition:all .2s ease;
        text-align:center;
        min-height:78px;
        box-shadow:0 4px 12px -4px rgba(0,0,0,.18);
    }
    .ddf-group-tile:hover{
        background:#ffffff;
        border-color:var(--theme-tertiary-color);
        transform:translateY(-3px);
        box-shadow:0 12px 24px -8px color-mix(in srgb, var(--theme-tertiary-color) 50%, transparent),
                   0 4px 8px -2px rgba(0,0,0,.18);
    }
    .ddf-group-code{
        font-family:var(--theme-font-heading);
        font-size:15px;font-weight:800;letter-spacing:.08em;
        color:var(--theme-primary-color);
        line-height:1;
        transition:color .15s;
    }
    .ddf-group-tile:hover .ddf-group-code{ color:var(--theme-secondary-color); }
    .ddf-group-name{
        font-size:10px;font-weight:600;color:#5a5a5a;
        letter-spacing:.02em;line-height:1.25;
        white-space:nowrap;
        max-width:110px;overflow:hidden;text-overflow:ellipsis;
    }
    .ddf-group-tile.is-current{
        background:linear-gradient(180deg, #ffffff 0%, #fff8e6 100%);
        border-color:var(--theme-tertiary-color);
        box-shadow:0 0 0 2px color-mix(in srgb, var(--theme-tertiary-color) 35%, transparent),
                   0 6px 14px -4px color-mix(in srgb, var(--theme-tertiary-color) 35%, transparent);
        cursor:default;
    }
    .ddf-group-tile.is-current .ddf-group-code{ color:var(--theme-primary-color); }
    .ddf-group-tile.is-current:hover{
        transform:none;
        box-shadow:0 0 0 2px color-mix(in srgb, var(--theme-tertiary-color) 35%, transparent),
                   0 6px 14px -4px color-mix(in srgb, var(--theme-tertiary-color) 35%, transparent);
    }
    .ddf-group-pin{
        position:absolute;top:-8px;right:-6px;
        padding:2px 7px;border-radius:50px;
        background:var(--theme-tertiary-color);
        color:var(--theme-primary-color);
        font-size:8px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
        line-height:1.4;
        box-shadow:0 2px 6px -1px rgba(0,0,0,.25);
    }

    /* GMR Aero partner */
    .ddf-foot-partner{
        margin-top:24px;
        padding-top:18px;
        border-top:1px solid rgba(255,255,255,.10);
    }
    .ddf-foot-partner-lbl{
        display:block;
        font-family:var(--theme-font-heading);
        font-size:11px;font-weight:600;letter-spacing:.06em;
        color:rgba(255,255,255,.7);
        margin-bottom:8px;
    }
    .ddf-foot-partner-logo{
        display:inline-flex;align-items:center;
        text-decoration:none;
        transition:transform .2s ease;
    }
    .ddf-foot-partner-logo:hover{transform:translateY(-2px);}
    .ddf-foot-partner-text{
        font-family:var(--theme-font-heading);
        font-size:22px;font-weight:900;letter-spacing:.04em;
        color:#fff;
        line-height:1;
    }
    .ddf-foot-partner-text .g{color:#8B0000;}
    .ddf-foot-partner-text .m{color:#fff;}
    .ddf-foot-partner-text .r{color:#FF8C00;}

    /* ── BOTTOM LEGAL BAR — near black, white text, inline CIN ── */
    .ddf-foot-bot{
        background:#0a0a0a;
        padding:14px 0;
        border-top:1px solid rgba(255,255,255,.06);
    }
    .ddf-foot-bot-row{
        display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
    }
    .ddf-foot-copy{font-size:12px;color:#ffffff;}
    .ddf-foot-copy strong{color:var(--theme-tertiary-color);font-weight:700;}
    .ddf-foot-cin-inline{
        display:inline-block;
        margin-left:10px;padding-left:10px;
        border-left:1px solid rgba(255,255,255,.18);
        color:rgba(255,255,255,.85);
        letter-spacing:.02em;
    }
    .ddf-foot-cin-inline strong{color:var(--theme-tertiary-color);font-weight:700;}

    .ddf-foot-legal{
        display:flex;align-items:center;gap:8px;flex-wrap:wrap;
        font-size:12px;
    }
    .ddf-foot-legal a{
        color:rgba(255,255,255,.7);text-decoration:none;
        transition:color .15s;
    }
    .ddf-foot-legal a:hover{color:var(--theme-tertiary-color);}
    .ddf-foot-legal span{color:rgba(255,255,255,.25);}

    /* ── RESPONSIVE ──────────────────────────────────────── */
    @media (max-width: 1200px){
        .ddf-foot-stats{flex-wrap:wrap;justify-content:center;}
        .ddf-foot-top-row{
            grid-template-columns:1fr 1fr;gap:18px;
        }
        .ddf-foot-news{grid-column:1 / -1;border-left:0;padding-left:0;border-top:1px solid #cfcfcf;padding-top:18px;}
        .ddf-foot-grid{grid-template-columns:repeat(2,1fr);}
        .ddf-foot-brand{grid-column:1 / -1;}
        /* Get-the-app + group brands: stack with horizontal divider */
        .ddf-foot-getapp{grid-template-columns:1fr;gap:24px;}
        .ddf-foot-getapp::before{
            grid-column:1;grid-row:2;
            height:1px;width:100%;align-self:auto;
            background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
        }
        .ddf-foot-getapp-left  { grid-row:1; }
        .ddf-foot-getapp-right { grid-row:3; }
    }
    @media (max-width: 700px){
        .ddf-stat-sep{display:none;}
        .ddf-foot-stats{justify-content:space-around;gap:10px;}
        .ddf-foot-top-row{grid-template-columns:1fr;}
        .ddf-foot-grid{grid-template-columns:1fr;}
        .ddf-foot-bot-row{flex-direction:column;align-items:flex-start;gap:10px;}
        .ddf-foot-news-control{flex-direction:column;border-radius:14px;}
        .ddf-foot-news-control input{width:100%;text-align:left;}
        .ddf-foot-news-control button{width:100%;}
        .ddf-foot-press-row{justify-content:center;gap:14px;}
        .ddf-foot-press-item{font-size:12px;}
        .ddf-foot-group-row{grid-template-columns:repeat(2,1fr);max-width:none;}
    }