@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;600;700;800&display=swap');

/* ============================================================
   HOREKA QUICK OS — PREMIUM DESKTOP REDESIGN (Reference Match)
   Active for viewport >= 1024px
   ============================================================ */

.hqd-shell { display: none; }
/* Alerts desktop shell: hidden on mobile — .hqm-al-shell takes over below 1024px */
.hqd-alerts-shell { display: none; }
/* Reorder page is desktop-only; hidden on mobile */
.hqd-rd-shell { display: none; }
/* Shop page (custom WC archive) is desktop-only; hidden on mobile so the default WC archive renders */
.hqd-sp-shell { display: none; }

/* When the Quick-OS shop shell is active on desktop, suppress the entire
   default WooCommerce / theme archive output so it doesn't render below
   our shell. body class + :has() fallback (mirrors the brand-page pattern). */
@media (min-width: 1024px) {
    body.hq-shop-active header.site-header,
    body.hq-shop-active .elementor-location-header,
    body.hq-shop-active .et-main-header,
    body.hq-shop-active #header-main,
    body.hq-shop-active #top-bar,
    body.hq-shop-active .sticky-on,
    body.hq-shop-active .template-container,
    body.hq-shop-active #main-content,
    body.hq-shop-active main#main,
    body.hq-shop-active main.site-main,
    body.hq-shop-active .site-main,
    body.hq-shop-active .main-page-wrapper,
    body.hq-shop-active .woocommerce-breadcrumb,
    body.hq-shop-active .woocommerce-products-header,
    body.hq-shop-active .woocommerce-notices-wrapper,
    body.hq-shop-active .woocommerce-result-count,
    body.hq-shop-active .woocommerce-ordering,
    body.hq-shop-active .woocommerce-pagination,
    body.hq-shop-active ul.products,
    body.hq-shop-active .et_pb_section,
    body.hq-shop-active .et-l,
    body.hq-shop-active footer.site-footer,
    body.hq-shop-active p.demo_store,
    body.hq-shop-active .woocommerce-store-notice,
    body.hq-shop-active .et_pb_wc_breadcrumb,
    /* :has() fallback if the body class somehow doesn't get added */
    body:has(.hqd-sp-shell) header.site-header,
    body:has(.hqd-sp-shell) .template-container,
    body:has(.hqd-sp-shell) main.site-main,
    body:has(.hqd-sp-shell) .woocommerce-breadcrumb,
    body:has(.hqd-sp-shell) .woocommerce-products-header,
    body:has(.hqd-sp-shell) .woocommerce-ordering,
    body:has(.hqd-sp-shell) .woocommerce-result-count,
    body:has(.hqd-sp-shell) ul.products,
    body:has(.hqd-sp-shell) .woocommerce-pagination { display: none !important; }
    html.hq-shop-active,
    body.hq-shop-active { margin-top: 0 !important; padding-top: 0 !important; }
}
/* Discover-page desktop hero bar: hidden on mobile, shown only at ≥1024px */
.hqd-disc-hdr-wrap { display: none; }

:root {
    --hqd-primary: #1a237e;
    --hqd-accent: #ffdb15;
    --hqd-navy: #0A2240;
    --hqd-bg: #f8fafc;
    --hqd-surface: #ffffff;
    --hqd-text: #1e293b;
    --hqd-text-light: #64748b;
    --hqd-border: #e2e8f0;
    --hqd-radius: 12px;
    --hqd-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    --hqd-header-h: 80px; /* Reverted to original */
    --hqd-max-w: 1600px;
}

@media (min-width: 1024px) {
    /* Hide Default Theme Elements — only on quick-os pages, not on regular WC/theme pages */
    body:has(.hqd-shell, .hqd-tp-shell, .hqd-alerts-shell, .hqd-pdp-shell, .hqd-brand-shell, .hqd-ac-shell, .hqd-sp-shell) header.site-header,
    body:has(.hqd-shell, .hqd-tp-shell, .hqd-alerts-shell, .hqd-pdp-shell, .hqd-brand-shell, .hqd-ac-shell, .hqd-sp-shell) .elementor-location-header,
    body:has(.hqd-shell, .hqd-tp-shell, .hqd-alerts-shell, .hqd-pdp-shell, .hqd-brand-shell, .hqd-ac-shell, .hqd-sp-shell) .et-main-header,
    body:has(.hqd-shell, .hqd-tp-shell, .hqd-alerts-shell, .hqd-pdp-shell, .hqd-brand-shell, .hqd-ac-shell, .hqd-sp-shell) #header-main,
    body:has(.hqd-shell, .hqd-tp-shell, .hqd-alerts-shell, .hqd-pdp-shell, .hqd-brand-shell, .hqd-ac-shell, .hqd-sp-shell) .hq-app-container .hq-app-header {
        display: none !important;
    }

    /* Prevent XStore preloader from covering quick-os shells. */
    body:has(.hqd-shell, .hqd-tp-shell, .hqd-alerts-shell, .hqd-pdp-shell, .hqd-brand-shell, .hqd-ac-shell, .hqd-sp-shell) .template-container {
        filter: none !important;
    }
    body:has(.hqd-shell, .hqd-tp-shell, .hqd-alerts-shell, .hqd-pdp-shell, .hqd-brand-shell, .hqd-ac-shell, .hqd-sp-shell) > .et-loader {
        display: none !important;
        opacity: 0 !important;
        z-index: -1 !important;
        visibility: hidden !important;
    }

    /* Hide WooCommerce store notice and reset body margin on all quick-os pages */
    body:has(.hqd-shell, .hqd-tp-shell, .hqd-alerts-shell, .hqd-pdp-shell, .hqd-brand-shell, .hqd-ac-shell, .hqd-sp-shell) p.demo_store,
    body:has(.hqd-shell, .hqd-tp-shell, .hqd-alerts-shell, .hqd-pdp-shell, .hqd-brand-shell, .hqd-ac-shell, .hqd-sp-shell) .woocommerce-store-notice,
    body:has(.hqd-shell, .hqd-tp-shell, .hqd-alerts-shell, .hqd-pdp-shell, .hqd-brand-shell, .hqd-ac-shell, .hqd-sp-shell) .demo_store {
        display: none !important;
    }
    html:has(.hqd-shell, .hqd-tp-shell, .hqd-alerts-shell, .hqd-pdp-shell, .hqd-brand-shell),
    body:has(.hqd-shell, .hqd-tp-shell, .hqd-alerts-shell, .hqd-pdp-shell, .hqd-brand-shell, .hqd-ac-shell, .hqd-sp-shell) {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* ── Cross-browser fallback (no :has() needed) ───────────────────────────
       Mirrors the :has() rules above using the server-added `hq-quickos-active`
       body class, so browsers without :has() support (legacy Edge, older
       Firefox/Safari) still hide the theme header / preloader / store notice
       behind the Quick-OS shell — otherwise the old layout shows through and
       its sticky header / full-screen preloader blocks scrolling. */
    body.hq-quickos-active header.site-header,
    body.hq-quickos-active .elementor-location-header,
    body.hq-quickos-active .et-main-header,
    body.hq-quickos-active #header-main,
    body.hq-quickos-active .hq-app-container .hq-app-header,
    body.hq-quickos-active p.demo_store,
    body.hq-quickos-active .woocommerce-store-notice,
    body.hq-quickos-active .demo_store {
        display: none !important;
    }
    body.hq-quickos-active .template-container { filter: none !important; }
    body.hq-quickos-active > .et-loader {
        display: none !important;
        opacity: 0 !important;
        z-index: -1 !important;
        visibility: hidden !important;
    }
    body.hq-quickos-active {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .hqd-shell {
        display: block !important;
        min-height: 100vh !important;
        background: #fff !important;
        position: relative !important;
        z-index: 9999 !important;
        visibility: visible !important;
        opacity: 1 !important;
        scroll-behavior: smooth;
    }

    .hqd-alerts-shell { display: block !important; }

    html { scroll-behavior: smooth; }
    .hq-app-container { display: none !important; }

    /* ── New Header Design ─────────────────────────────────
       Quick-OS desktop pages each wrap in one of these shell classes.
       The Discover desktop hero uses .hqd-disc-hdr-wrap (separate class)
       so it keeps its own navy styling. */
    .hqd-shell .hqd-header,
    .hqd-pdp-shell .hqd-header,
    .hqd-alerts-shell .hqd-header,
    .hqd-tp-shell .hqd-header,
    .hqd-brand-shell .hqd-header,
    .hqd-ac-shell .hqd-header,
    .hqd-cart-shell .hqd-header,
    .hqoc-shell .hqd-header {
        background: #2c8515 !important;
        height: auto !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Row 1 */
    .hqd-shell .hqd-header-row1 {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 24px !important;
        gap: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .hqd-shell .hqd-brand { display: flex !important; align-items: center !important; text-decoration: none !important; }
    .hqd-shell .hqd-brand-logo {
        height: 80px !important;
        width: auto !important;
        max-width: 600px !important;
        object-fit: contain !important;
        filter: none !important;
        mix-blend-mode: normal !important;
        display: block !important;
        opacity: 1 !important;
        background: transparent !important;
    }
    .hqd-shell .hqd-header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        flex-shrink: 0 !important;
    }
    .hqd-shell .hqd-action-icon-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ffffff !important;
        background: transparent !important;
        border: none !important;
        position: relative !important;
        cursor: pointer !important;
        text-decoration: none !important;
        width: 36px !important;
        height: 36px !important;
    }
    .hqd-shell .hqd-action-icon-btn:hover { opacity: 0.8 !important; }
    .hqd-shell .hqd-action-icon-btn .hqd-count-badge {
        position: absolute !important;
        top: -4px !important;
        right: -4px !important;
        background: #ef4444 !important;
        color: #fff !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        width: 16px !important;
        height: 16px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Row 2 — Search */
    .hqd-shell .hqd-header-row2 {
        padding: 6px 24px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .hqd-shell .hqd-header-row2 .hqd-search-bar-wrap {
        display: flex !important;
        align-items: center !important;
        background: #ffffff !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        height: 46px !important;
        padding-left: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        border: none !important;
    }
    .hqd-shell .hqd-search-icon-left {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        margin-right: 8px !important;
    }
    .hqd-shell .hqd-header-row2 .hqd-search-bar-wrap input {
        flex: 1 !important;
        border: none !important;
        outline: none !important;
        font-size: 14px !important;
        color: #333 !important;
        background: transparent !important;
        min-width: 0 !important;
        padding: 0 !important;
        height: 100% !important;
    }
    .hqd-shell .hqd-header-row2 .hqd-search-bar-wrap input::placeholder { color: #aaa !important; }
    .hqd-shell .hqd-header-row2 .hqd-search-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 52px !important;
        height: 46px !important;
        background: #ffbb54 !important;
        border: none !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        border-radius: 0 !important;
    }
    .hqd-shell .hqd-header-row2 .hqd-search-btn:hover { background: #f0a83a !important; }
    .hqd-shell .hqd-location-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 52px !important;
        height: 46px !important;
        background: #ef4444 !important;
        border: none !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        border-radius: 0 12px 12px 0 !important;
    }
    .hqd-shell .hqd-location-btn:hover { background: #dc2626 !important; }

    /* Row 3 — Location */
    .hqd-shell .hqd-header-row3 {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        background: #ffffff !important;
        padding: 8px 24px !important;
        font-size: 13px !important;
        color: #333 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .hqd-shell .hqd-row3-label { flex: 1 !important; font-weight: 500 !important; }
    .hqd-shell .hqd-row3-label strong { font-weight: 700 !important; }
    .hqd-shell .hqd-row3-change {
        background: none !important;
        border: none !important;
        color: #2563eb !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        padding: 0 !important;
        white-space: nowrap !important;
    }
    .hqd-shell .hqd-row3-change:hover { text-decoration: underline !important; }

    /* ══════════════════════════════════════════════════════════════
       NEW HERO HEADER BAR  (.hqd-hero-bar)
       Works under both .hqd-shell (quick-home) and
       .hqd-disc-hdr-wrap (standalone discover-page injection).
       ══════════════════════════════════════════════════════════════ */

    /* Standalone wrapper for discover page desktop hero bar */
    .hqd-disc-hdr-wrap {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: transparent !important;
        position: static !important;
        z-index: 200 !important;
    }
    /* Hide the Elementor/xstore site header on desktop when the disc wrapper is present */
    body:has(.hqd-disc-hdr-wrap) header.site-header,
    body:has(.hqd-disc-hdr-wrap) .elementor-location-header,
    body:has(.hqd-disc-hdr-wrap) .et-main-header,
    body:has(.hqd-disc-hdr-wrap) #header-main,
    body:has(.hqd-disc-hdr-wrap) .sticky-on,
    body:has(.hqd-disc-hdr-wrap) #top-bar { display: none !important; }
    html:has(.hqd-disc-hdr-wrap),
    body:has(.hqd-disc-hdr-wrap) { margin-top: 0 !important; padding-top: 0 !important; }

    :is(.hqd-shell, .hqd-disc-hdr-wrap) .hqd-hero-bar {
        background: linear-gradient(108deg, #0c1b42 0%, #0e2364 55%, #0c1b42 100%) !important;
        border-radius: 0 !important;
        margin: 0 !important;
        height: 66px !important;
        display: flex !important;
        align-items: stretch !important;
        overflow: hidden !important;
        position: relative !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.2) !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        flex-direction: row !important;
    }

    :is(.hqd-shell, .hqd-disc-hdr-wrap) .hqd-nhh-inner {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        padding: 10px 28px !important;
        gap: 18px !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* ── Logo ── */
    :is(.hqd-shell, .hqd-disc-hdr-wrap) .hqd-nhh-brand {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        text-decoration: none !important;
        margin-right: 28px !important;
    }
    :is(.hqd-shell, .hqd-disc-hdr-wrap) .hqd-nhh-logo {
        height: 80px !important;
        width: auto !important;
        max-width: 600px !important;
        object-fit: contain !important;
        display: block !important;
        filter: none !important;
        mix-blend-mode: normal !important;
    }

    /* ── Centre: Discover button + serving text ── */
    :is(.hqd-shell, .hqd-disc-hdr-wrap) .hqd-nhh-centre {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 28px !important;
        min-width: 0 !important;
    }

    :is(.hqd-shell, .hqd-disc-hdr-wrap) .hqd-nhh-discover-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        background: #ffffff !important;
        border: none !important;
        border-radius: 50px !important;
        padding: 7px 26px 7px 7px !important;
        cursor: pointer !important;
        font-family: 'Inter', 'Outfit', sans-serif !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        line-height: 1 !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.18) !important;
        transition: box-shadow 0.18s ease !important;
    }
    :is(.hqd-shell, .hqd-disc-hdr-wrap) .hqd-nhh-discover-btn:hover {
        box-shadow: 0 4px 18px rgba(0,0,0,0.28) !important;
    }
    :is(.hqd-shell, .hqd-disc-hdr-wrap) .hqd-nhh-bolt-wrap {
        width: 42px !important;
        height: 42px !important;
        border-radius: 50% !important;
        background: #f5a623 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    :is(.hqd-shell, .hqd-disc-hdr-wrap) .hqd-nhh-discover-label {
        font-size: 22px !important;
        font-weight: 700 !important;
        color: #0c1b42 !important;
        letter-spacing: -0.3px !important;
        font-family: 'Outfit', 'Inter', sans-serif !important;
    }

    /* ── Mode toggle inside hero bar ── */
    .hqd-disc-hdr-wrap .hqd-nhh-toggle-wrap {
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    .hqd-disc-hdr-wrap .hqd-nhh-toggle-wrap .horeka-toggle-wrapper {
        width: auto !important;
        padding: 0 !important;
    }
    .hqd-disc-hdr-wrap .hqd-nhh-toggle-wrap .horeka-toggle {
        width: 130px !important;
        height: 38px !important;
    }
    .hqd-disc-hdr-wrap .hqd-nhh-toggle-wrap .toggle-pill {
        height: 30px !important;
    }
    .hqd-disc-hdr-wrap .hqd-nhh-toggle-wrap .toggle-label {
        font-size: 12px !important;
    }
    .hqd-disc-hdr-wrap .hqd-nhh-toggle-wrap .toggle-icon svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* ── Serving text + Change button ── */
    :is(.hqd-shell, .hqd-disc-hdr-wrap) .hqd-nhh-serving {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    :is(.hqd-shell, .hqd-disc-hdr-wrap) .hqd-nhh-serving-txt {
        font-size: 17px !important;
        font-weight: 600 !important;
        color: #ffffff !important;
        font-family: 'Inter', sans-serif !important;
    }
    :is(.hqd-shell, .hqd-disc-hdr-wrap) .hqd-nhh-serving-txt strong {
        color: #ffffff !important;
        font-weight: 700 !important;
    }
    :is(.hqd-shell, .hqd-disc-hdr-wrap) .hqd-nhh-change-btn {
        background: none !important;
        border: none !important;
        color: #60a5fa !important;
        font-size: 17px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        padding: 0 !important;
        font-family: 'Inter', sans-serif !important;
        transition: color 0.15s !important;
        text-decoration: none !important;
    }
    :is(.hqd-shell, .hqd-disc-hdr-wrap) .hqd-nhh-change-btn:hover { color: #93c5fd !important; }

    /* ── Right: map area ── */
    :is(.hqd-shell, .hqd-disc-hdr-wrap) .hqd-nhh-map-wrap {
        flex-shrink: 0 !important;
        width: 400px !important;
        height: 66px !important;
        position: relative !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        align-self: stretch !important;
    }
    :is(.hqd-shell, .hqd-disc-hdr-wrap) .hqd-nhh-map-svg {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }

    /* ── Store count badge ── */
    :is(.hqd-shell, .hqd-disc-hdr-wrap) .hqd-nhh-store-badge {
        position: absolute !important;
        bottom: 13px !important;
        right: 14px !important;
        background: rgba(6,12,30,0.82) !important;
        border: 1px solid rgba(255,255,255,0.13) !important;
        border-radius: 12px !important;
        padding: 6px 13px !important;
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        font-family: 'Inter', sans-serif !important;
        backdrop-filter: blur(6px) !important;
        z-index: 2 !important;
    }
    :is(.hqd-shell, .hqd-disc-hdr-wrap) .hqd-nhh-live-dot {
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        background: #22c55e !important;
        flex-shrink: 0 !important;
        box-shadow: 0 0 6px #22c55e !important;
    }

    .hqd-shell .hqd-hero-banner { 
        height: 360px !important; 
        padding: 0 60px !important; 
        display: flex !important; 
        align-items: center !important; 
        justify-content: space-between !important;
        box-sizing: border-box !important;
    }
    .hqd-shell .hqd-banner-content { 
        max-width: 400px !important; 
        flex-shrink: 0 !important; 
        padding: 0 !important;
    }
    .hqd-shell .hqd-banner-title { font-size: 36px !important; line-height: 1.1 !important; margin-bottom: 12px !important; }
    
    .hqd-shell .hqd-slide-visual { 
        width: 55% !important; 
        height: 100% !important; 
        display: flex !important; 
        align-items: center !important; 
        justify-content: flex-end !important;
        overflow: hidden !important;
    }
    .hqd-shell .hqd-slide-visual img { 
        width: 100% !important; 
        height: 100% !important; 
        object-fit: cover !important; 
        object-position: center right !important; 
    }

    .hqd-shell .hqd-pc-whatsapp-btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        height: auto !important;
        width: auto !important;
        max-width: 120px !important;
        display: inline-flex !important;
        justify-content: center !important;
    }

    /* Break out of xstore/theme containers */
    body.page .container,
    body.page div.container,
    body.page .et-container,
    body.page .entry-content,
    body.page .site-content,
    body.page #content,
    body.page .page-content,
    body.page .elementor-section,
    body.page .elementor-container,
    body.page .e-con,
    body.page .elementor-widget-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Remove top space from theme main/content wrappers on quick-home page */
    body:has(.hqd-shell),
    body:has(.hqd-shell) #page,
    body:has(.hqd-shell) #main,
    body:has(.hqd-shell) .site-main,
    body:has(.hqd-shell) main,
    body:has(.hqd-shell) .et-main-area,
    body:has(.hqd-shell) #et-main-area,
    body:has(.hqd-shell) .content-area,
    body:has(.hqd-shell) article,
    body:has(.hqd-shell) .entry-content,
    body:has(.hqd-shell) .entry-content > *:first-child {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .hqd-shell {
        position: relative;
        width: 100vw !important;
        max-width: 100vw !important;
        left: 50% !important;
        right: 50% !important;
        margin-top: 0 !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        box-sizing: border-box;
        font-family: 'Inter', -apple-system, sans-serif;
        background: var(--hqd-bg);
        min-height: 100vh;
        overflow-x: hidden;
    }
}

/* 1. HEADER */
.hqd-header {
    background: var(--hqd-navy);
    height: var(--hqd-header-h);
    position: sticky;
    top: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    color: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.hqd-header-inner {
    width: 100%;
    max-width: var(--hqd-max-w);
    margin: 0 auto;
    padding: 0 24px 0 0; /* Zero left padding */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.hqd-header-left {
    display: flex;
    align-items: center;
    gap: 60px; /* Increased gap to push toggle further right */
    flex-shrink: 0;
}

.hqd-brand {
    display: flex;
    align-items: center;
    gap: 0;
    text-decoration: none;
    height: 100%;
    padding: 0; /* Zero internal padding */
}

.hqd-brand-logo {
    height: 80px !important; /* Matches header height exactly */
    width: auto !important;
    max-width: 600px !important;
    object-fit: contain !important;
    display: block !important;
    background: transparent !important;
    padding: 0 !important;
}

.hqd-brand-tag {
    color: var(--hqd-accent);
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-top: 4px;
}

.hqd-header-sep {
    width: 1px;
    height: 30px;
    background: rgba(255,255,255,0.15);
}

.hqd-mode-toggle-wrap {
    /* No background/padding frame — the toggle pill carries its own styling.
       The translucent box here showed as a stray rounded rectangle around the
       Discover toggle in the header. */
    background: transparent;
    padding: 0;
    display: flex;
    align-items: center;
}

.hqd-mode-toggle {
    display: flex;
    gap: 2px;
}

.hqd-mode-btn {
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
    color: rgba(255,255,255,0.7);
}

.hqd-mode-btn.active {
    background: #fff;
    color: #000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.hqd-mode-btn:not(.active):hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.hqd-location-selector {
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    cursor: pointer;
    text-align: left;
    padding: 6px 12px;
    border-radius: 8px;
    transition: background 0.2s;
}

.hqd-location-selector:hover {
    background: rgba(255,255,255,0.1);
}

.hqd-loc-icon { font-size: 20px; }
.hqd-loc-info { display: flex; flex-direction: column; }
.hqd-loc-label { font-size: 10px; opacity: 0.8; font-weight: 500; }
.hqd-loc-val { font-size: 13px; font-weight: 700; white-space: nowrap; }

/* SEARCH BAR */
.hqd-header-center {
    flex: 1;
}

.hqd-search-bar-wrap {
    background: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 2px 2px 2px 16px;
    height: 48px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.hqd-search-bar-wrap input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    color: #333;
    background: transparent;
}

.hqd-search-btn {
    background: var(--hqd-accent);
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* RIGHT ACTIONS */
.hqd-header-right {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-shrink: 0;
}

.hqd-header-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #fff;
    gap: 4px;
    position: relative;
    transition: opacity 0.2s;
}

.hqd-header-action:hover { opacity: 0.8; }

.hqd-action-icon { font-size: 20px; }
.hqd-action-label { font-size: 11px; font-weight: 600; }

.hqd-count-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--hqd-accent);
    color: #000;
    font-size: 10px;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0 4px;
}

.hqd-user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.hqd-user-icon { font-size: 24px; }
.hqd-user-greeting { font-size: 13px; font-weight: 700; }

/* 2. PROMO STRIP */
.hqd-promo-strip {
    background: #FFF9E6;
    border-bottom: 1px solid #FFE699;
    padding: 8px 0;
}

.hqd-promo-inner {
    max-width: var(--hqd-max-w);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.hqd-promo-item {
    font-size: 12px;
    font-weight: 600;
    color: #856404;
}

.hqd-promo-sep { color: #856404; opacity: 0.5; }

.hqd-promo-link {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    color: #856404;
    text-decoration: none;
}

/* 3. HERO SECTION */
.hqd-hero-section {
    padding: 24px 0;
    max-width: var(--hqd-max-w);
    margin: 0 auto;
}

.hqd-hero-inner {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    padding: 0 24px;
}

.hqd-hero-banner-slider {
    background: #FDF4E3;
    border-radius: 20px;
    height: 360px;
    position: relative;
    overflow: hidden;
}

.hqd-banner-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
}

.hqd-hero-banner {
    min-width: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 60px;
    box-sizing: border-box;
    position: relative;
    height: 100%;
}

.hqd-banner-content { z-index: 2; max-width: 400px; flex-shrink: 0; }
.hqd-banner-eyebrow { font-size: 14px; font-weight: 600; color: #8B5E3C; margin-bottom: 8px; }
.hqd-banner-title { 
    font-family: 'Outfit', sans-serif;
    font-size: 38px; 
    font-weight: 800; 
    color: var(--hqd-navy); 
    line-height: 1.1; 
    margin-bottom: 12px; 
}
.hqd-banner-text { font-size: 16px; color: #5C4033; margin-bottom: 24px; line-height: 1.5; }
.hqd-banner-btn {
    background: var(--hqd-navy);
    color: #fff;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.2s;
}
.hqd-banner-btn:hover { transform: translateX(5px); }

.hqd-slide-visual {
    width: 55%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.hqd-slide-visual img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center right;
}

/* Update visual overlay for better positioning */
.hqd-banner-visual-overlay {
    position: absolute;
    right: 40px;
    top: 40px;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    pointer-events: none;
    z-index: 10;
}

.hqd-pc-whatsapp-btn {
    background: #25D366;
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2);
}
.hqd-pc-whatsapp-btn:hover {
    background: #128C7E;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.3);
    color: #fff;
}

.hqd-delivery-indicator {
    background: #fff;
    border: 2px solid var(--hqd-accent);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.hqd-di-label { font-size: 8px; font-weight: 700; color: #666; }
.hqd-di-time { font-size: 24px; font-weight: 900; color: var(--hqd-navy); line-height: 1; }
.hqd-di-mins { font-size: 9px; font-weight: 800; color: var(--hqd-navy); }

.hqd-slider-dots { display: flex; gap: 8px; pointer-events: auto; }
.hqd-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,0.15); cursor: pointer; transition: all 0.3s; }
.hqd-dot.active { width: 24px; border-radius: 4px; background: var(--hqd-navy); }

.hqd-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
    gap: 12px;
}

.hqd-action-card {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: var(--hqd-text);
    border: 1px solid var(--hqd-border);
    transition: all 0.2s;
}

.hqd-action-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    border-color: transparent;
}

/* ── Locked Reorder card — grayscale + lock badge + tooltip ───────────────── */
.hqd-action-card.is-locked {
    position: relative;
    cursor: not-allowed;
    filter: grayscale(1);
    opacity: 0.72;
    background: #f8fafc;
}
.hqd-action-card.is-locked:hover {
    transform: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    border-color: var(--hqd-border);
    opacity: 0.85;
    filter: grayscale(1) brightness(1.03);
}
.hqd-ac-lock-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0d1b40;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    filter: grayscale(0);    /* keep the lock badge full-colour over the muted card */
    box-shadow: 0 2px 6px rgba(15,23,42,0.25);
    pointer-events: none;
    z-index: 2;
}
.hqd-ac-lock-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #0d1b40;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 8px 22px rgba(15,23,42,0.22);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    pointer-events: none;
    z-index: 3;
    filter: grayscale(0);
}
.hqd-ac-lock-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border: 5px solid transparent;
    border-top-color: #0d1b40;
}
.hqd-action-card.is-locked:hover .hqd-ac-lock-tooltip,
.hqd-action-card.is-locked:focus-visible .hqd-ac-lock-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ── Lock-action modal (shown when the card is clicked) ──────────────────── */
.hqd-lock-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 2147483000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.hqd-lock-modal.is-open { display: flex; }
.hqd-lock-modal-card {
    background: #fff;
    width: 100%;
    max-width: 420px;
    border-radius: 16px;
    padding: 28px 26px 24px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(15,23,42,0.3);
    position: relative;
    animation: hqd-lock-pop .28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes hqd-lock-pop {
    from { transform: translateY(8px) scale(0.96); opacity: 0; }
    to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.hqd-lock-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f1f5f9;
    border: none;
    color: #475569;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.hqd-lock-modal-close:hover { background: #e2e8f0; color: #0d1b40; }
.hqd-lock-modal-ico {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #fef3c7;
    color: #d97706;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hqd-lock-modal-title {
    font-size: 18px;
    font-weight: 800;
    color: #0d1b40;
    margin: 0 0 6px;
    font-family: 'Outfit', 'Inter', sans-serif;
}
.hqd-lock-modal-desc {
    font-size: 13.5px;
    color: #475569;
    margin: 0 0 18px;
    line-height: 1.5;
}
.hqd-lock-modal-cta {
    display: inline-block;
    background: #0d1b40;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 11px 22px;
    border-radius: 10px;
    text-decoration: none;
    transition: background .15s;
}
.hqd-lock-modal-cta:hover { background: #1e3a8a; color: #fff; }

.hqd-ac-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hqd-ac-icon svg { display: block; }

.hqd-ac-icon.orange { background: #FFF5EB; color: #E67E22; }
.hqd-ac-icon.yellow { background: #FFF9E6; color: #d97706; }
.hqd-ac-icon.red    { background: #FEF2F2; color: #EF4444; }
.hqd-ac-icon.teal   { background: #F0FDFA; color: #0D9488; }

.hqd-ac-info { display: flex; flex-direction: column; gap: 2px; }
.hqd-ac-info strong { font-size: 14px; font-weight: 700; color: var(--hqd-navy); }
.hqd-ac-info span { font-size: 11px; color: var(--hqd-text-light); line-height: 1.3; }

/* 4. TRUST STRIP */
.hqd-trust-strip {
    border-top: 1px solid var(--hqd-border);
    border-bottom: 1px solid var(--hqd-border);
    background: #fff;
    margin-bottom: 40px;
}

.hqd-trust-inner {
    max-width: var(--hqd-max-w);
    margin: 0 auto;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hqd-trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hqd-ti-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #334155;
}
.hqd-ti-icon svg { display: block; }
.hqd-ti-icon.bolt { background: #fffbeb; color: #d97706; }
.hqd-ti-text { display: flex; flex-direction: column; }
.hqd-ti-text strong { font-size: 13px; font-weight: 700; }
.hqd-ti-text span { font-size: 11px; color: var(--hqd-text-light); }

.hqd-promo-badge {
    background: #FFF9E6;
    border: 1px dashed #F1C40F;
    border-radius: 12px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.hqd-pb-icon {
    background: var(--hqd-accent);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #1a237e;
}
.hqd-pb-icon svg { display: block; }

.hqd-pb-text { display: flex; flex-direction: column; }
.hqd-pb-text strong { font-size: 13px; font-weight: 700; }
.hqd-pb-text span { font-size: 11px; color: var(--hqd-text-light); }
.hqd-pb-code {
    background: var(--hqd-navy);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 6px;
    letter-spacing: 1px;
}

/* 5. MAIN CONTAINER */
.hqd-main-container {
    max-width: var(--hqd-max-w);
    margin: 0 auto;
    padding: 0 24px 60px;
}

.hqd-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 25px;
}

.hqd-section-title {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: var(--hqd-navy);
    margin: 0;
}

.hqd-section-subtitle {
    font-size: 14px;
    color: var(--hqd-text-light);
    margin: 5px 0 0 0;
}

.hqd-view-all {
    font-size: 14px;
    font-weight: 700;
    color: #1a237e;
    text-decoration: none;
}

/* 6. CATEGORY SECTION */
.hqd-category-wrapper {
    position: relative;
    margin-bottom: 50px;
}

.hqd-category-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 10px 4px 20px;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hqd-category-scroll::-webkit-scrollbar { display: none; }

.hqd-category-card {
    background: #fff;
    border-radius: 12px;
    padding: 12px 10px;
    flex: 0 0 130px !important;
    width: 130px !important;
    height: 150px !important;
    text-align: center;
    text-decoration: none;
    color: var(--hqd-text);
    transition: all 0.2s;
    border: 1px solid #f1f5f9;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hqd-category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
}

.hqd-cat-img-wrap {
    background: #fff;
    aspect-ratio: 4/3;
    border-radius: 8px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hqd-cat-img-wrap img { width: 90%; height: 90%; object-fit: contain; }
.hqd-cat-name { font-size: 12px; font-weight: 700; color: #1e293b; line-height: 1.3; }

.hqd-cat-grid-icon {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    width: 24px;
    margin: 0 auto;
}
.hqd-cat-grid-icon span { width: 8px; height: 8px; border: 1.5px solid #cbd5e1; border-radius: 2px; }

.hqd-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 10;
}
.hqd-scroll-btn.right { right: -20px; }

/* 7. PROMO CARDS */
.hqd-promo-cards {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 24px;
    margin-bottom: 60px;
}

.hqd-promo-card {
    border-radius: 20px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    min-height: 180px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s;
}
.hqd-promo-card:hover { transform: translateY(-4px); }

.hqd-promo-card.bulk { background: #F2F9F2; }
.hqd-promo-card.essentials { background: #F0F7FF; }
.hqd-promo-card.smart { background: #FFF7ED; }

.hqd-pc-content { flex: 1; z-index: 2; position: relative; }
.hqd-pc-content h3 { font-size: 22px; font-weight: 800; color: #1e293b; margin: 0 0 8px; }
.hqd-pc-content p { font-size: 13px; color: #64748b; line-height: 1.5; margin: 0 0 20px; max-width: 180px; }

.hqd-pc-whatsapp-btn {
    background: #25D366;
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px; font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}
.hqd-pc-whatsapp-btn:hover { background: #128C7E; color: #fff; }

.hqd-pc-link { font-size: 14px; font-weight: 700; color: #1a237e; text-decoration: none; }

.hqd-pc-visual { width: 140px; display: flex; align-items: flex-end; justify-content: flex-end; }
.hqd-pc-visual img { max-width: 100%; height: auto; object-fit: contain; }

.hqd-coupon-tag {
    background: #FFD21E;
    width: 80px;
    height: 80px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 8px 24px rgba(255, 210, 30, 0.3);
}
.hqd-ct-icon { font-size: 32px; font-weight: 900; color: #fff; }

/* 8. PRODUCT SECTION */
.hqd-products-section { margin-bottom: 60px; }

.hqd-sh-left { display: flex; flex-direction: column; gap: 4px; }

.hqd-product-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.hqd-p-card {
    background: #fff;
    border-radius: 16px;
    padding: 12px;
    border: 1px solid #f1f5f9;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}
.hqd-p-card:hover { box-shadow: 0 8px 22px rgba(13,27,64,0.08); transform: translateY(-2px); border-color: #e2e6ee; }

.hqd-p-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.08); border-color: transparent; }

.hqd-p-image {
    aspect-ratio: 1;
    margin-bottom: 12px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border-radius: 12px;
}
.hqd-p-image img { max-width: 85%; max-height: 85%; object-fit: contain; }

.hqd-p-badges {
    position: absolute;
    top: 8px; left: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hqd-p-rating {
    background: #22c55e;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px; font-weight: 800;
    display: flex; align-items: center; gap: 3px;
}
.hqd-star { font-size: 10px; }

.hqd-p-badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px; font-weight: 800;
}
.hqd-p-badge.bestseller {
    background: #FFD21E;
    color: #000;
}

.hqd-p-wishlist {
    position: absolute;
    top: 8px; right: 8px;
    background: #fff;
    border: 1px solid #f1f5f9;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: #cbd5e1;
    cursor: pointer;
    transition: all 0.2s;
}
.hqd-p-wishlist:hover { color: #ef4444; border-color: #ef4444; background: #fef2f2; }
.hqd-p-wishlist.hqd-wl-active,
.hqd-p-wishlist.hqd-wl-active:hover { color: #e53e3e; border-color: #fca5a5; background: #fff0f0; }
.hqd-p-wishlist { transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s; }
.hqd-p-wishlist.hqd-wl-bounce { transform: scale(1.35); }

.hqd-p-info { flex: 1; display: flex; flex-direction: column; }
.hqd-p-title { font-size: 13px; font-weight: 600; color: #1e293b; margin-bottom: 12px; line-height: 1.4; height: 36px; overflow: hidden; }

.hqd-p-bottom { display: flex; flex-direction: column; margin-top: auto; gap: 8px; }
.hqd-p-price { font-size: 15px; font-weight: 800; color: #1e293b; }
/* AI tag pill */
.hqd-ai-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f0f4ff;
    border: 1px solid #c7d2fe;
    color: #3730a3;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    margin-bottom: 6px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hqd-ai-tag svg { flex-shrink: 0; }
.hqd-ai-tag--sm { font-size: 10px; padding: 2px 7px; margin-bottom: 4px; }

/* Add to Cart button */
.hqd-p-add-btn {
    width: 100%;
    background: #fff;
    border: 1.5px solid #1a237e;
    color: #1a237e;
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 12px; font-weight: 700;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    white-space: nowrap;
    text-align: center;
}
.hqd-p-add-btn:hover { background: #1a237e; color: #fff; }
/* "Select Options" link for variable products — styled identical to the
   Add-to-Cart button but is an <a> that navigates to the PDP for variation
   selection (you can't add a variable parent straight to the cart). */
.hqd-p-add-btn.hqd-p-select-btn {
    display: block;
    text-decoration: none;
    box-sizing: border-box;
}
.hqd-p-add-btn.hqd-p-select-btn:hover { background: #1a237e; color: #fff; }

/* Qty stepper */
.hqd-qty-stepper {
    display: flex;
    width: 100%;
    align-items: center;
    border: 1.5px solid #1a237e;
    border-radius: 6px;
    overflow: hidden;
    height: 34px;
}
.hqd-qty-dec,
.hqd-qty-inc {
    flex: 0 0 36px;
    height: 100%;
    background: #fff;
    border: none;
    color: #1a237e;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    padding: 0;
}
.hqd-qty-dec:hover,
.hqd-qty-inc:hover { background: #e8edf8; }
.hqd-qty-num {
    flex: 1;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #1a237e;
    border-left: 1px solid #c7d2fe;
    border-right: 1px solid #c7d2fe;
    padding: 0 4px;
    line-height: 32px;
    user-select: none;
}

/* Trend card add button (full width) */
.hqd-trend-add {
    width: 100%;
    margin-top: 8px;
    padding: 6px 0;
    border-radius: 6px;
    text-align: center;
}
.hqd-trend-add + .hqd-qty-stepper,
.hqd-trend-info .hqd-qty-stepper {
    width: 100%;
    margin-top: 8px;
    justify-content: center;
}

/* 9. MODAL */
.hqd-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hqd-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
}

.hqd-modal-container {
    position: relative;
    background: #fff;
    width: 440px;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.25);
    animation: hqd-slide-up 0.3s ease-out;
}

@keyframes hqd-slide-up {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.hqd-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.hqd-modal-header h3 { font-size: 20px; font-weight: 800; margin: 0; }
.hqd-modal-close { background: none; border: none; font-size: 28px; cursor: pointer; color: #666; }

.hqd-btn-detect {
    width: 100%;
    padding: 14px;
    background: #f1f5f9;
    border: 1px solid var(--hqd-border);
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 10px;
}

.hqd-modal-divider { text-align: center; margin: 20px 0; position: relative; }
.hqd-modal-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #eee; }
.hqd-modal-divider span { background: #fff; padding: 0 15px; position: relative; font-size: 12px; color: #999; }

.hqd-input-group { display: flex; gap: 10px; }
.hqd-input-group input { flex: 1; padding: 12px 16px; border: 1px solid var(--hqd-border); border-radius: 10px; outline: none; }
.hqd-btn-primary { background: var(--hqd-navy); color: #fff; border: none; padding: 12px 24px; border-radius: 10px; font-weight: 700; cursor: pointer; }

.hqd-error-text { color: #EF4444; font-size: 12px; margin-top: 10px; text-align: center; }

/* 10. RESPONSIVE SCALE */
@media (min-width: 1600px) {
    :root { --hqd-max-w: 1600px; }
}

@media (min-width: 1920px) {
    :root { --hqd-max-w: 1800px; }
}

/* ============================================================
   HOME PAGE NEW SECTIONS — Promise strip, Deals of the Day, Trending Now
   ============================================================ */

/* 1) Promise strip */
.hqd-shell .hqd-promise-strip {
    background: #eef0fb;
    border-radius: 16px;
    padding: 26px 28px;
    margin: 28px 0;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 28px;
    align-items: center;
}
.hqd-shell .hqd-promise-title { font-size: 18px; font-weight: 800; color: #0D1B40; margin: 0 0 6px; }
.hqd-shell .hqd-promise-sub   { font-size: 13px; color: #555; margin: 0 0 14px; line-height: 1.5; }
.hqd-shell .hqd-promise-cta {
    display: inline-flex; align-items: center; gap: 4px;
    background: #0D1B40; color: #fff;
    padding: 9px 16px; border-radius: 999px;
    font-size: 13px; font-weight: 700;
    text-decoration: none;
}
.hqd-shell .hqd-promise-cta:hover { background: #1a237e; }
.hqd-shell .hqd-promise-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.hqd-shell .hqd-promise-card {
    display: flex; flex-direction: column; gap: 4px;
    text-align: center;
    padding: 8px 4px;
}
.hqd-shell .hqd-promise-icon {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0 auto 8px;
    box-shadow: 0 2px 8px rgba(13,27,64,0.06);
}
.hqd-shell .hqd-promise-icon--purple { color: #6366f1; }
.hqd-shell .hqd-promise-icon--red    { color: #ef4444; }
.hqd-shell .hqd-promise-icon--blue   { color: #2563eb; }
.hqd-shell .hqd-promise-icon--amber  { color: #f59e0b; }
.hqd-shell .hqd-promise-card strong { font-size: 13.5px; color: #111; font-weight: 700; }
.hqd-shell .hqd-promise-card span   { font-size: 12px; color: #666; line-height: 1.4; }

/* 2) Deals of the Day */
.hqd-shell .hqd-deals-section { margin: 28px 0; content-visibility: auto; contain-intrinsic-size: 0 480px; }
.hqd-shell .hqd-deals-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; gap: 16px;
}
.hqd-shell .hqd-deals-title-wrap { display: flex; align-items: center; gap: 14px; }
.hqd-shell .hqd-deals-countdown {
    background: #fef2f2; color: #b91c1c;
    border: 1px solid #fecaca;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}
.hqd-shell .hqd-deals-countdown strong { font-variant-numeric: tabular-nums; font-weight: 800; margin-left: 4px; }
.hqd-shell .hqd-deals-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(4, 1fr);
    gap: 16px;
}
.hqd-shell .hqd-deal-banner {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    padding: 24px 26px;
    display: flex;
    align-items: stretch;
    text-decoration: none;
    min-height: 260px;
    transition: box-shadow 0.18s, transform 0.18s;
}
.hqd-shell .hqd-deal-banner:hover { box-shadow: 0 8px 22px rgba(13,27,64,0.08); transform: translateY(-2px); }
.hqd-shell .hqd-deal-banner-text { display: flex; flex-direction: column; gap: 4px; align-self: center; flex: 0 0 60%; z-index: 1; }
.hqd-shell .hqd-deal-banner-eyebrow { font-size: 13px; color: #166534; font-weight: 700; }
.hqd-shell .hqd-deal-banner-headline { font-size: 38px; font-weight: 900; color: #166534; line-height: 1; }
.hqd-shell .hqd-deal-banner-sub { font-size: 14px; color: #0D1B40; font-weight: 700; margin-top: 6px; }
.hqd-shell .hqd-deal-banner-cta {
    align-self: flex-start;
    background: #166534; color: #fff;
    padding: 8px 16px; border-radius: 999px;
    font-size: 12.5px; font-weight: 700;
    margin-top: 14px;
}
.hqd-shell .hqd-deal-banner-img {
    position: absolute; right: 0; top: 0; bottom: 0; width: 45%;
    background-size: cover; background-position: right center; background-repeat: no-repeat;
    opacity: 0.9;
}

.hqd-shell .hqd-deal-card {
    position: relative;
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    display: flex; flex-direction: column;
    transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.hqd-shell .hqd-deal-card:hover {
    box-shadow: 0 8px 22px rgba(13,27,64,0.08);
    transform: translateY(-2px);
    border-color: #d6dbe6;
}
.hqd-shell .hqd-deal-off {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    background: #FFCC00; color: #0D1B40;
    font-size: 10.5px; font-weight: 800;
    padding: 3px 8px; border-radius: 4px;
}
.hqd-shell .hqd-deal-img {
    width: 100%; aspect-ratio: 1 / 1;
    background-color: #fafafa;
    background-size: contain; background-position: center; background-repeat: no-repeat;
}
.hqd-shell .hqd-deal-info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.hqd-shell .hqd-deal-name {
    font-size: 12.5px; font-weight: 600; color: #222;
    line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 34px;
}
.hqd-shell .hqd-deal-price-row { display: flex; align-items: baseline; gap: 6px; }
.hqd-shell .hqd-deal-price { font-size: 14.5px; font-weight: 800; color: #0D1B40; }
.hqd-shell .hqd-deal-orig { font-size: 11.5px; text-decoration: line-through; color: #aaa; }
.hqd-shell .hqd-deal-progress {
    height: 4px; background: #f0f0f0; border-radius: 99px; overflow: hidden;
}
.hqd-shell .hqd-deal-progress span {
    display: block; height: 100%;
    background: linear-gradient(90deg, #FFCC00, #f59e0b);
}
.hqd-shell .hqd-deal-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.hqd-shell .hqd-deal-sold { font-size: 11px; color: #888; }
.hqd-shell .hqd-deal-add {
    background: #fff; color: #0D1B40;
    border: 1.5px solid #0D1B40;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 10.5px; font-weight: 800;
    letter-spacing: 0.03em;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.hqd-shell .hqd-deal-add:hover:not(:disabled) { background: #0D1B40; color: #fff; }
.hqd-shell .hqd-deal-add.hqd-deal-grabbed,
.hqd-shell .hqd-deal-add.hq-added-state,
.hqd-shell .hqd-deal-add.hqd-deal-grabbed:disabled,
.hqd-shell .hqd-deal-add.hq-added-state:disabled,
.hqd-shell .hqd-deal-add.hqd-deal-grabbed[disabled],
.hqd-shell .hqd-deal-add.hq-added-state[disabled] {
    background: #16a34a !important;
    border-color: #15803d !important;
    color: #ffffff !important;
    cursor: default;
    /* the button is disabled when grabbed — kill the browser/theme "faded"
       (frosty) rendering so the green + white text stay solid. */
    opacity: 1 !important;
    filter: none !important;
}

/* 3) Trending Now */
.hqd-shell .hqd-trending-section { margin: 28px 0 48px; content-visibility: auto; contain-intrinsic-size: 0 520px; }
.hqd-shell .hqd-trending-section .hqd-section-title { margin-bottom: 16px; }
.hqd-shell .hqd-trending-products-header { display: flex; justify-content: flex-end; margin: 10px 0 4px; }
.hqd-shell .hqd-trending-pills {
    display: flex; gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.hqd-shell .hqd-trending-pills::-webkit-scrollbar { display: none; }
.hqd-shell .hqd-trending-pill {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid #e8ecf0;
    border-radius: 999px;
    padding: 10px 18px 10px 12px;
    text-decoration: none; color: #1a1a1a;
    font-size: 13px; font-weight: 600;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.hqd-shell .hqd-trending-pill:hover { border-color: #c7d2fe; box-shadow: 0 4px 12px rgba(13,27,64,0.05); }
.hqd-shell .hqd-trending-pill img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.hqd-shell .hqd-trending-emoji { font-size: 18px; }

/* ── Trending Now — active pill green + horizontal product row ── */
.hqd-shell .hqd-trending-pill {
    background: #fff;
    border: 1px solid #e8ecf0;
    cursor: pointer;
    color: #1a1a1a;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.hqd-shell .hqd-trending-pill.is-active {
    background: #16a34a;
    border-color: #15803d;
    color: #fff;
    box-shadow: 0 6px 14px rgba(22, 163, 74, 0.25);
    transform: translateY(-1px);
}
.hqd-shell .hqd-trending-pill.is-active .hqd-trending-emoji,
.hqd-shell .hqd-trending-pill.is-active .hqd-trending-name { color: #fff; }

/* Product row container */
.hqd-shell .hqd-trending-products { margin-top: 18px; min-height: 200px; }
.hqd-shell .hqd-trending-loading,
.hqd-shell .hqd-trending-empty {
    padding: 40px 20px;
    text-align: center;
    color: #888;
    font-size: 13px;
    background: #fafafa;
    border: 1px dashed #e2e8f0;
    border-radius: 12px;
}

/* Horizontal scrollable row */
.hqd-shell .hqd-trend-row {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding: 2px 2px 14px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.hqd-shell .hqd-trend-row::-webkit-scrollbar { display: none; }

.hqd-shell .hqd-trend-card {
    flex: 0 0 200px;
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.hqd-shell .hqd-trend-card:hover {
    box-shadow: 0 8px 22px rgba(13,27,64,0.08);
    transform: translateY(-2px);
    border-color: #d6dbe6;
}
.hqd-shell .hqd-trend-img {
    position: relative;
    aspect-ratio: 1 / 1;
    background-color: #fafafa;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.hqd-shell .hqd-trend-off {
    position: absolute; top: 8px; left: 8px;
    background: #FFCC00; color: #0D1B40;
    font-size: 10px; font-weight: 800;
    padding: 2px 7px; border-radius: 4px;
}
.hqd-shell .hqd-trend-info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.hqd-shell .hqd-trend-info .hqd-p-add-btn { margin-top: auto; }
.hqd-shell .hqd-trend-info .hqd-qty-stepper { margin-top: auto; }
.hqd-shell .hqd-trend-name {
    font-size: 12.5px; color: #222; font-weight: 600;
    line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 34px;
}
.hqd-shell .hqd-trend-price-row { display: flex; align-items: baseline; gap: 6px; }
.hqd-shell .hqd-trend-price { font-size: 14.5px; font-weight: 800; color: #0D1B40; }
.hqd-shell .hqd-trend-orig { font-size: 11.5px; text-decoration: line-through; color: #aaa; }

/* ============================================================
   CATEGORY PAGE (hqd-cat-page-shell)
   ============================================================ */
@media (min-width: 1024px) {
    .hqd-cat-page-shell { display: block !important; }

    /* Content wrapper */
    .hqd-cat-wrap {
        max-width: var(--hqd-max-w);
        margin: 0 auto;
        padding: 20px 32px 60px;
    }

    /* ── Top bar (breadcrumb + inline sort) ───────────────── */
    .hqd-cat-topbar {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
    }
    .hqd-cat-breadcrumb {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: #64748b;
    }
    .hqd-cat-breadcrumb a { color: #64748b; text-decoration: none; }
    .hqd-cat-breadcrumb a:hover { color: var(--hqd-primary); }

    /* ── Category title row ───────────────────────────────── */
    .hqd-cat-title-row {
        margin-bottom: 24px;
    }
    .hqd-cat-title {
        font-family: 'Outfit', sans-serif;
        font-size: 28px;
        font-weight: 800;
        color: var(--hqd-navy);
        margin: 0 0 4px;
    }
    .hqd-cat-subtitle { font-size: 13.5px; color: #64748b; margin: 0; }

    /* Shared sort/count widgets */
    .hqd-cat-sort-inline,
    .hqd-cat-sort-right {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
    }
    .hqd-cat-topbar .hqd-cat-sort-inline { display: none; } /* shown only on scroll in future */
    .hqd-cat-count-label { font-size: 13px; color: #64748b; }
    .hqd-cat-sort-label  { font-size: 13px; color: #64748b; }
    .hqd-cat-sort-select {
        font-size: 13px;
        padding: 5px 10px;
        border: 1px solid #dde1e9;
        border-radius: 6px;
        background: #fff;
        color: var(--hqd-navy);
        cursor: pointer;
    }

    /* ── Hero Banner ──────────────────────────────────────── */
    .hqd-cat-hero {
        display: flex;
        border-radius: 16px;
        overflow: hidden;
        min-height: 240px;
        margin-bottom: 28px;
        background: #f0f4ff;
    }
    .hqd-cat-hero-left {
        flex: 1;
        padding: 36px 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 12px;
    }
    .hqd-cat-hero-heading {
        font-family: 'Outfit', sans-serif;
        font-size: 26px;
        font-weight: 800;
        color: var(--hqd-navy);
        line-height: 1.25;
        margin: 0;
    }
    .hqd-cat-hero-sub { font-size: 14px; color: #475569; margin: 0; }
    .hqd-cat-hero-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 8px;
    }
    .hqd-cat-badge {
        display: flex;
        align-items: center;
        gap: 7px;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 8px 14px;
        font-size: 12.5px;
        color: #1e293b;
        font-weight: 500;
    }
    .hqd-cat-badge-icon { font-size: 16px; }
    .hqd-cat-hero-right {
        width: 45%;
        flex-shrink: 0;
        background: #dbe4f0 center/cover no-repeat;
        min-height: 220px;
    }

    /* ── Sub-categories ───────────────────────────────────── */
    .hqd-cat-subcats-wrap {
        margin-bottom: 28px;
        overflow: hidden;
    }
    .hqd-cat-subcats {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .hqd-cat-subcats::-webkit-scrollbar { display: none; }
    .hqd-cat-subcat-card {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        text-decoration: none;
        color: inherit;
        width: 100px;
        text-align: center;
    }
    .hqd-cat-subcat-img,
    .hqd-cat-subcat-placeholder {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #e8ecf0;
        background: #f0f4ff;
    }
    .hqd-cat-subcat-name {
        font-size: 12px;
        font-weight: 600;
        color: #1e293b;
        line-height: 1.3;
    }
    .hqd-cat-subcat-count { font-size: 11px; color: #94a3b8; }
    .hqd-cat-subcat-card:hover .hqd-cat-subcat-img { border-color: var(--hqd-primary); }

    /* ── Promo Banners ────────────────────────────────────── */
    .hqd-cat-promos {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin-bottom: 32px;
    }
    .hqd-cat-promo-card {
        border-radius: 14px;
        padding: 22px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        overflow: hidden;
        min-height: 130px;
    }
    .hqd-cat-promo-content { flex: 1; }
    .hqd-cat-promo-title {
        font-size: 13px;
        font-weight: 700;
        color: #334155;
        margin-bottom: 4px;
    }
    .hqd-cat-promo-subtitle {
        font-size: 18px;
        font-weight: 800;
        color: var(--hqd-navy);
        line-height: 1.2;
        margin-bottom: 10px;
    }
    .hqd-cat-promo-cta {
        font-size: 13px;
        font-weight: 700;
        color: var(--hqd-primary);
        text-decoration: none;
    }
    .hqd-cat-promo-cta:hover { text-decoration: underline; }
    .hqd-cat-promo-img {
        height: 90px;
        width: auto;
        object-fit: contain;
        flex-shrink: 0;
    }

    /* ── Products section header ──────────────────────────── */
    .hqd-cat-products-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 18px;
    }
    .hqd-cat-products-title {
        font-family: 'Outfit', sans-serif;
        font-size: 20px;
        font-weight: 800;
        color: var(--hqd-navy);
        margin: 0;
    }

    /* ── Product cards (category variant) ────────────────── */
    .hqd-cat-product-grid { grid-template-columns: repeat(6, 1fr); }
    .hqd-cp-badge {
        position: absolute;
        top: 8px;
        left: 8px;
        background: #FFCC00;
        color: #0D1B40;
        font-size: 10px;
        font-weight: 800;
        padding: 2px 7px;
        border-radius: 4px;
    }
    .hqd-cp-rating-row {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        margin-bottom: 2px;
    }
    .hqd-cp-stars { color: #f59e0b; font-weight: 700; }
    .hqd-cp-rc { color: #94a3b8; }
    .hqd-cp-price-wrap { display: flex; align-items: baseline; gap: 5px; }
    .hqd-cp-price { font-size: 15px; font-weight: 800; color: var(--hqd-navy); }
    .hqd-cp-orig { font-size: 12px; text-decoration: line-through; color: #aaa; }
    .hqd-cp-delivery { font-size: 11.5px; color: #16a34a; font-weight: 600; margin-top: 4px; }
    .hqd-cat-no-products { padding: 40px; text-align: center; color: #94a3b8; grid-column: 1/-1; }

    /* ── Pagination ───────────────────────────────────────── */
    .hqd-cat-pagination {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-top: 36px;
    }
    .hqd-cat-pagination .page-numbers {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        height: 36px;
        padding: 0 10px;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        background: #fff;
        font-size: 13px;
        color: var(--hqd-navy);
        text-decoration: none;
        font-weight: 600;
    }
    .hqd-cat-pagination .page-numbers.current { background: var(--hqd-primary); color: #fff; border-color: var(--hqd-primary); }
    .hqd-cat-pagination .page-numbers:hover:not(.current) { background: #f0f4ff; }
}

/* ============================================================
   DESKTOP CART PAGE (hqd-cart-shell)
   ============================================================ */
@media (min-width: 1024px) {
    .hqd-cart-shell { display: block !important; }

    .hqd-cart-wrap {
        max-width: 1200px;
        margin: 0 auto;
        padding: 32px 32px 60px;
    }

    /* Two-column layout */
    .hqd-cart-layout {
        display: grid;
        grid-template-columns: 1fr 360px;
        gap: 28px;
        align-items: start;
    }

    /* ── Page title ──────────────────────────────────────── */
    .hqd-cart-page-title {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 20px;
    }
    .hqd-cart-back-btn {
        width: 38px; height: 38px;
        border-radius: 50%;
        border: 1px solid #e2e8f0;
        background: #fff;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        color: var(--hqd-navy);
        flex-shrink: 0;
    }
    .hqd-cart-back-btn:hover { background: #f0f4ff; }
    .hqd-cart-title { font-family: 'Outfit', sans-serif; font-size: 26px; font-weight: 800; color: var(--hqd-navy); margin: 0 0 2px; }
    .hqd-cart-subtitle { font-size: 13px; color: #64748b; margin: 0; }

    /* ── Coupon box ──────────────────────────────────────── */
    .hqd-cart-coupon-box {
        border: 2px dashed #f59e0b;
        border-radius: 12px;
        padding: 14px 18px;
        background: #fffbeb;
        margin-bottom: 16px;
    }
    .hqd-coupon-row { display: flex; align-items: center; gap: 10px; }
    .hqd-coupon-label { flex: 1; font-size: 14px; font-weight: 600; color: #1e293b; }
    .hqd-coupon-apply-btn {
        padding: 6px 18px;
        border: 1.5px solid #1a237e;
        background: #fff;
        color: #1a237e;
        border-radius: 6px;
        font-size: 13px; font-weight: 700;
        cursor: pointer;
    }
    .hqd-coupon-apply-btn:hover { background: #1a237e; color: #fff; }
    .hqd-coupon-applied {
        display: flex; align-items: center; gap: 10px;
        font-size: 13.5px; font-weight: 600; color: #15803d;
    }
    .hqd-coupon-remove {
        margin-left: auto;
        background: none; border: none;
        color: #ef4444; cursor: pointer;
        font-size: 13px; font-weight: 600;
    }

    /* ── Cart items ──────────────────────────────────────── */
    .hqd-cart-items { display: flex; flex-direction: column; gap: 0; }
    .hqd-cart-item {
        display: grid;
        grid-template-columns: 100px 1fr auto;
        gap: 16px;
        align-items: center;
        padding: 18px 0;
        border-bottom: 1px solid #f1f5f9;
    }
    .hqd-ci-img-wrap { display: block; }
    .hqd-ci-img {
        width: 100px; height: 100px;
        object-fit: contain;
        border-radius: 10px;
        border: 1px solid #f1f5f9;
        background: #fafafa;
    }
    .hqd-ci-name {
        font-size: 14.5px; font-weight: 600; color: var(--hqd-navy);
        text-decoration: none; line-height: 1.4;
        display: block; margin-bottom: 6px;
    }
    .hqd-ci-name:hover { color: var(--hqd-primary); }
    .hqd-ci-stock {
        display: inline-block;
        background: #dcfce7; color: #15803d;
        font-size: 11px; font-weight: 700;
        padding: 2px 8px; border-radius: 99px;
        margin-bottom: 8px;
    }
    .hqd-ci-price { font-size: 16px; font-weight: 800; color: var(--hqd-navy); }
    .hqd-ci-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
    .hqd-ci-qty {
        display: flex; align-items: center;
        border: 1.5px solid #1a237e; border-radius: 8px; overflow: hidden;
        height: 36px;
    }
    .hqd-ci-dec, .hqd-ci-inc {
        width: 36px; height: 100%;
        background: #fff; border: none;
        color: #1a237e; font-size: 18px; font-weight: 700;
        cursor: pointer; display: flex; align-items: center; justify-content: center;
    }
    .hqd-ci-dec:hover, .hqd-ci-inc:hover { background: #e8edf8; }
    .hqd-ci-qty-num {
        min-width: 32px; text-align: center;
        font-size: 14px; font-weight: 700; color: var(--hqd-navy);
        border-left: 1px solid #c7d2fe; border-right: 1px solid #c7d2fe;
        line-height: 34px; user-select: none;
    }
    .hqd-ci-remove {
        display: flex; align-items: center; gap: 5px;
        background: none; border: none;
        color: #94a3b8; font-size: 12px; font-weight: 600;
        cursor: pointer;
    }
    .hqd-ci-remove:hover { color: #ef4444; }

    /* ── Delivery progress ───────────────────────────────── */
    .hqd-cart-delivery-box {
        background: #fffbeb;
        border-radius: 12px;
        padding: 16px 20px;
        margin-top: 20px;
    }
    .hqd-delivery-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
    .hqd-delivery-truck { font-size: 22px; }
    .hqd-delivery-msg { font-size: 13.5px; color: #1e293b; }
    .hqd-delivery-msg strong { color: #15803d; }
    .hqd-delivery-bar-wrap {
        background: #e5e7eb; border-radius: 99px; height: 8px; overflow: hidden; margin-bottom: 8px;
    }
    .hqd-delivery-bar {
        height: 100%; background: #f59e0b; border-radius: 99px;
        transition: width 0.4s ease;
    }
    .hqd-delivery-vals { display: flex; justify-content: space-between; font-size: 12px; color: #64748b; }

    /* ── Recommendations ─────────────────────────────────── */
    .hqd-cart-recs { margin-top: 28px; }
    .hqd-cart-recs-title {
        font-family: 'Outfit', sans-serif;
        font-size: 18px; font-weight: 800; color: var(--hqd-navy); margin-bottom: 14px;
    }
    .hqd-cart-recs-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
    }
    .hqd-cart-rec-card {
        background: #fff;
        border: 1px solid #f1f5f9;
        border-radius: 12px;
        padding: 12px;
        display: flex; flex-direction: column;
        transition: box-shadow 0.18s, transform 0.18s;
        cursor: pointer;
    }
    .hqd-cart-rec-card:hover { box-shadow: 0 8px 22px rgba(13,27,64,0.08); transform: translateY(-2px); }
    .hqd-cart-rec-img-wrap {
        aspect-ratio: 1;
        background: #fafafa; border-radius: 8px;
        display: flex; align-items: center; justify-content: center;
        overflow: hidden; margin-bottom: 10px;
    }
    .hqd-cart-rec-img { max-width: 85%; max-height: 85%; object-fit: contain; }
    .hqd-cart-rec-name { font-size: 12.5px; font-weight: 600; color: #1e293b; line-height: 1.35; margin-bottom: 4px; height: 34px; overflow: hidden; }
    .hqd-cart-rec-price { font-size: 14px; font-weight: 800; color: var(--hqd-navy); margin-bottom: 8px; }
    .hqd-cart-rec-atc {
        width: 100%; margin-top: auto;
        padding: 7px 0; border-radius: 6px;
        border: 1.5px solid #1a237e; background: #fff;
        color: #1a237e; font-size: 12.5px; font-weight: 700;
        cursor: pointer;
    }
    .hqd-cart-rec-atc:hover { background: #1a237e; color: #fff; }
    .hqd-cart-recs-loading { color: #94a3b8; font-size: 13px; }

    /* ── Summary sidebar ─────────────────────────────────── */
    .hqd-cart-sidebar { position: sticky; top: 20px; }
    .hqd-cart-summary-card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        padding: 22px 24px;
        margin-bottom: 16px;
    }
    .hqd-summary-title { font-family: 'Outfit', sans-serif; font-size: 18px; font-weight: 800; color: var(--hqd-navy); margin: 0 0 16px; }
    .hqd-summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #334155; margin-bottom: 10px; }
    .hqd-summary-divider { border: none; border-top: 1px solid #e2e8f0; margin: 12px 0; }
    .hqd-summary-total { font-size: 17px; font-weight: 800; color: var(--hqd-navy); margin-bottom: 18px; }
    .hqd-checkout-btn {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        width: 100%; padding: 14px 0;
        background: #1a237e; color: #fff;
        border-radius: 10px; font-size: 15px; font-weight: 800;
        text-decoration: none;
        transition: background 0.18s;
    }
    .hqd-checkout-btn:hover { background: #0d1b5e; color: #fff; }
    .hqd-secure-note {
        display: flex; align-items: center; justify-content: center; gap: 6px;
        font-size: 12px; color: #94a3b8; margin-top: 10px;
    }

    /* ── Trust badges ────────────────────────────────────── */
    .hqd-cart-trust {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        padding: 18px 20px;
        display: flex; flex-direction: column; gap: 14px;
    }
    .hqd-trust-item { display: flex; align-items: center; gap: 12px; }
    .hqd-trust-icon {
        width: 40px; height: 40px; border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }
    .hqd-trust-delivery  { background: #fef9c3; color: #ca8a04; }
    .hqd-trust-secure    { background: #dcfce7; color: #15803d; }
    .hqd-trust-warranty  { background: #fce7f3; color: #be185d; }
    .hqd-trust-support   { background: #e0f2fe; color: #0369a1; }
    .hqd-trust-label { font-size: 13px; font-weight: 700; color: var(--hqd-navy); }
    .hqd-trust-sub   { font-size: 12px; color: #64748b; }

    /* ── Empty cart ──────────────────────────────────────── */
    .hqd-cart-empty {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        padding: 80px 20px; text-align: center;
    }
    .hqd-cart-empty h2 { font-family: 'Outfit', sans-serif; font-size: 24px; font-weight: 800; color: var(--hqd-navy); margin: 16px 0 8px; }
    .hqd-cart-empty p  { color: #94a3b8; margin-bottom: 24px; }
    .hqd-cart-empty-cta {
        padding: 12px 32px; background: #1a237e; color: #fff;
        border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 14px;
    }

    /* Coupon modal sizing */
    .hqd-coupon-modal-box { max-width: 480px; width: 90%; }
    .hqd-coupon-input-row { display: flex; gap: 8px; }
    .hqd-coupon-input-row input {
        flex: 1; padding: 10px 14px;
        border: 1.5px solid #e2e8f0; border-radius: 8px;
        font-size: 14px;
    }
}

/* ============================================================
   TOP PICKS FOR YOU PAGE (hqd-tp-shell)
   Desktop only (≥ 1024px)
   ============================================================ */

.hqd-tp-shell { display: none; }

@media (min-width: 1024px) {
    .hqd-tp-shell {
        display: block !important;
        min-height: 100vh !important;
        background: #f8fafc !important;
        position: relative !important;
        z-index: 9999 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        box-sizing: border-box;
        font-family: 'Inter', -apple-system, sans-serif;
        overflow-x: hidden;
    }

    /* Header overrides scoped to tp-shell — brand green */
    .hqd-tp-shell .hqd-header {
        background: #2c8515 !important;
        height: auto !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 9999 !important;
    }
    .hqd-tp-shell .hqd-header-row1 {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 24px !important;
        gap: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .hqd-tp-shell .hqd-brand-logo {
        height: 80px !important;
        width: auto !important;
        max-width: 600px !important;
        object-fit: contain !important;
    }

    /* ── Content wrapper ─────────────────────────────────── */
    .hqd-tp-wrap {
        max-width: 1600px;
        margin: 0 auto;
        padding: 20px 28px 60px;
    }

    /* ── Breadcrumb ──────────────────────────────────────── */
    .hqd-tp-breadcrumb {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: #64748b;
        margin-bottom: 16px;
    }
    .hqd-tp-breadcrumb a { color: #64748b; text-decoration: none; }
    .hqd-tp-breadcrumb a:hover { color: var(--hqd-primary); text-decoration: underline; }
    .hqd-tp-bc-sep { color: #94a3b8; }

    /* ── Title row ───────────────────────────────────────── */
    .hqd-tp-title-row {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 20px;
        gap: 16px;
    }
    .hqd-tp-title {
        font-family: 'Outfit', sans-serif;
        font-size: 26px;
        font-weight: 800;
        color: var(--hqd-navy);
        margin: 0 0 4px;
    }
    .hqd-tp-subtitle {
        font-size: 13.5px;
        color: #64748b;
        margin: 0;
    }
    .hqd-tp-sort-right {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
    }
    .hqd-tp-sort-label { font-size: 13px; color: #64748b; white-space: nowrap; }
    .hqd-tp-sort-select {
        font-size: 13px;
        padding: 7px 12px;
        border: 1px solid #dde1e9;
        border-radius: 8px;
        background: #fff;
        color: var(--hqd-navy);
        cursor: pointer;
        font-weight: 500;
        outline: none;
    }
    .hqd-tp-sort-select:focus { border-color: #6366f1; }
    .hqd-tp-view-btns { display: flex; gap: 4px; }
    .hqd-tp-view-btn {
        width: 34px;
        height: 34px;
        border: 1px solid #e2e8f0;
        background: #fff;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #94a3b8;
        transition: all 0.15s;
    }
    .hqd-tp-view-btn.is-active,
    .hqd-tp-view-btn:hover { border-color: var(--hqd-primary); color: var(--hqd-primary); background: #f0f4ff; }

    /* ── Category tabs ───────────────────────────────────── */
    .hqd-tp-cat-tabs-wrap {
        margin-bottom: 14px;
        position: relative;
    }
    .hqd-tp-cat-tabs {
        display: flex;
        align-items: center;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 2px;
    }
    .hqd-tp-cat-tabs::-webkit-scrollbar { display: none; }
    .hqd-tp-cat-tab {
        flex-shrink: 0;
        padding: 8px 18px;
        border-radius: 999px;
        border: 1px solid #e2e8f0;
        background: #fff;
        font-size: 13px;
        font-weight: 600;
        color: #1e293b;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.15s;
        white-space: nowrap;
    }
    .hqd-tp-cat-tab:hover { border-color: #6366f1; color: #4338ca; }
    .hqd-tp-cat-tab.is-active { background: #1a237e; color: #fff; border-color: #1a237e; }

    /* More button */
    .hqd-tp-more-trigger { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

    /* ── Favorites banner ────────────────────────────────── */
    .hqd-tp-fav-banner {
        display: flex;
        align-items: center;
        gap: 8px;
        background: #f0f7ff;
        border: 1px solid #bfdbfe;
        border-radius: 8px;
        padding: 11px 16px;
        font-size: 13px;
        color: #1e40af;
        font-weight: 500;
        margin-bottom: 22px;
    }

    /* ── Two-column layout ───────────────────────────────── */
    .hqd-tp-layout {
        display: grid;
        grid-template-columns: 240px 1fr;
        gap: 28px;
        align-items: start;
    }

    /* ── Sidebar ─────────────────────────────────────────── */
    .hqd-tp-sidebar {
        position: sticky;
        top: 90px;
        background: #fff;
        border: 1px solid #e8ecf0;
        border-radius: 14px;
        padding: 0 0 8px;
        overflow: hidden;
    }
    .hqd-tp-sidebar-hdr {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 18px 14px;
        border-bottom: 1px solid #f1f5f9;
    }
    .hqd-tp-filter-title { font-size: 15px; font-weight: 800; color: var(--hqd-navy); }
    .hqd-tp-clear-all {
        font-size: 12px;
        font-weight: 700;
        color: #6366f1;
        text-decoration: none;
    }
    .hqd-tp-clear-all:hover { text-decoration: underline; }

    .hqd-tp-filter-group {
        padding: 14px 18px 12px;
        border-bottom: 1px solid #f1f5f9;
    }
    .hqd-tp-filter-group:last-child { border-bottom: none; }
    .hqd-tp-filter-heading {
        font-size: 13px;
        font-weight: 700;
        color: #1e293b;
        margin: 0 0 10px;
    }

    .hqd-tp-radio-label,
    .hqd-tp-check-label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: #334155;
        margin-bottom: 8px;
        cursor: pointer;
        line-height: 1.4;
    }
    .hqd-tp-radio-label input,
    .hqd-tp-check-label input { flex-shrink: 0; accent-color: #1a237e; }
    .hqd-tp-radio-label span:nth-child(2),
    .hqd-tp-check-label span:nth-child(2) { flex: 1; }
    .hqd-tp-count { color: #94a3b8; font-size: 12px; margin-left: auto; white-space: nowrap; }
    .hqd-tp-star-ico { color: #f59e0b; font-size: 12px; margin-right: 2px; }

    /* Price range filter */
    .hqd-tp-price-wrap { display: flex; flex-direction: column; gap: 8px; }
    .hqd-tp-price-range-row {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .hqd-tp-price-inp {
        flex: 1;
        min-width: 0;
        padding: 5px 7px;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        font-size: 12.5px;
        color: #1e293b;
        background: #fff;
        outline: none;
        transition: border-color 0.15s;
        -moz-appearance: textfield;
    }
    .hqd-tp-price-inp::-webkit-inner-spin-button,
    .hqd-tp-price-inp::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
    .hqd-tp-price-inp:focus { border-color: #1a237e; }
    .hqd-tp-price-dash { font-size: 12px; color: #94a3b8; flex-shrink: 0; }
    .hqd-tp-price-apply-btn {
        width: 100%;
        padding: 6px 0;
        background: #1a237e;
        color: #fff;
        border: none;
        border-radius: 6px;
        font-size: 12.5px;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.15s;
    }
    .hqd-tp-price-apply-btn:hover { background: #283593; }
    .hqd-tp-price-clear-lnk {
        display: block;
        text-align: center;
        font-size: 11.5px;
        color: #64748b;
        text-decoration: none;
        margin-top: -2px;
    }
    .hqd-tp-price-clear-lnk:hover { color: #e11d48; }

    /* Sidebar category links */
    .hqd-tp-cat-row { margin-bottom: 6px; }
    .hqd-tp-cat-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;
        color: #334155;
        text-decoration: none;
        padding: 3px 0;
        transition: color 0.12s;
    }
    .hqd-tp-cat-link:hover { color: #1a237e; }
    .hqd-tp-cat-link.is-active { color: #1a237e; font-weight: 700; }
    .hqd-tp-extra-cats { display: none; }
    .hqd-tp-extra-cats.is-visible { display: block; }
    .hqd-tp-view-more-btn {
        background: none;
        border: none;
        font-size: 12.5px;
        font-weight: 700;
        color: #6366f1;
        cursor: pointer;
        padding: 4px 0;
        margin-top: 4px;
    }
    .hqd-tp-view-more-btn:hover { text-decoration: underline; }

    /* ── Products main ───────────────────────────────────── */
    .hqd-tp-main { min-width: 0; }

    .hqd-tp-product-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 16px;
        margin-bottom: 28px;
    }
    /* List mode */
    .hqd-tp-product-grid.hqd-tp-list-mode {
        grid-template-columns: 1fr;
    }
    .hqd-tp-product-grid.hqd-tp-list-mode .hqd-p-card {
        flex-direction: row;
        gap: 16px;
        padding: 16px;
    }
    .hqd-tp-product-grid.hqd-tp-list-mode .hqd-p-image {
        width: 120px;
        min-width: 120px;
        flex-shrink: 0;
        margin-bottom: 0;
    }
    .hqd-tp-product-grid.hqd-tp-list-mode .hqd-tp-p-title {
        height: auto;
        font-size: 14px;
    }

    /* Card extras */
    .hqd-tp-p-title { height: auto; overflow: visible; }
    .hqd-tp-p-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
    .hqd-tp-rating-row {
        display: flex;
        align-items: center;
        gap: 5px;
        margin-bottom: 5px;
    }
    .hqd-tp-stars-val {
        color: #f59e0b;
        font-size: 12px;
        font-weight: 700;
    }
    .hqd-tp-rc { font-size: 11.5px; color: #94a3b8; }
    .hqd-tp-price-row {
        display: flex;
        align-items: baseline;
        gap: 5px;
        flex-wrap: wrap;
        margin-bottom: 0;
    }
    .hqd-tp-off-badge {
        font-size: 10.5px;
        font-weight: 800;
        color: #16a34a;
        background: #dcfce7;
        padding: 1px 5px;
        border-radius: 4px;
    }

    /* Badge variants */
    .hqd-p-badge.hqd-badge-hot { background: #fee2e2; color: #dc2626; }
    .hqd-p-badge.hqd-badge-trend { background: #fef9c3; color: #ca8a04; }

    /* ── Pagination ──────────────────────────────────────── */
    .hqd-tp-pagination {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 18px 0 0;
        border-top: 1px solid #e8ecf0;
        flex-wrap: wrap;
    }
    .hqd-tp-page-info { font-size: 13px; color: #64748b; }
    .hqd-tp-page-nav {
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .hqd-tp-pg-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        height: 36px;
        padding: 0 8px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: #fff;
        font-size: 13px;
        color: var(--hqd-navy);
        text-decoration: none;
        font-weight: 600;
        transition: all 0.15s;
    }
    .hqd-tp-pg-btn:hover:not(.is-current) { background: #f0f4ff; border-color: #c7d2fe; }
    .hqd-tp-pg-btn.is-current { background: var(--hqd-primary); color: #fff; border-color: var(--hqd-primary); }
    .hqd-tp-pg-dots { color: #94a3b8; padding: 0 4px; font-size: 14px; line-height: 36px; }
    .hqd-tp-per-page {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: #64748b;
    }
    .hqd-tp-per-page-sel {
        font-size: 13px;
        padding: 6px 10px;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        background: #fff;
        color: var(--hqd-navy);
        cursor: pointer;
    }

    /* ── Empty state ─────────────────────────────────────── */
    .hqd-tp-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 80px 20px;
        text-align: center;
    }
    .hqd-tp-empty-icon { font-size: 48px; margin-bottom: 16px; }
    .hqd-tp-empty h3 { font-size: 20px; font-weight: 800; color: var(--hqd-navy); margin: 0 0 8px; }
    .hqd-tp-empty p { color: #64748b; margin: 0 0 24px; }
    .hqd-tp-empty-cta {
        padding: 12px 28px;
        background: #1a237e;
        color: #fff;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 700;
        font-size: 14px;
    }
    .hqd-tp-empty-cta:hover { background: #0d1b5e; color: #fff; }

    /* ── Break out of theme containers ──────────────────── */
    .hqd-tp-shell {
        position: relative;
    }
    body.page .hqd-tp-shell ~ .container,
    body.page .hqd-tp-shell ~ div { /* suppress theme wrappers below our shell */ }
}

/* ============================================================
   BRANDS MOVING FAST NEAR YOU — Animated Marquee Strip
   ============================================================ */

/* Keyframes — declared outside media query so they are global */
@keyframes hqd-brand-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes hqd-live-pulse {
    0%, 100% { opacity: 1;   transform: scale(1);   }
    50%       { opacity: 0.4; transform: scale(0.75); }
}

@media (min-width: 1024px) {

    /* ── Section wrapper ── */
    .hqd-shell .hqd-brands-section {
        background: #ffffff;
        border-top:    1px solid #eef0f5;
        border-bottom: 1px solid #eef0f5;
        padding-top: 18px;
        overflow: hidden;
    }

    /* ── Header row ── */
    .hqd-shell .hqd-brands-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 32px 14px;
    }
    .hqd-shell .hqd-brands-title {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1.3px;
        color: #1e293b;
        text-transform: uppercase;
    }
    .hqd-shell .hqd-brands-live {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: #eefdf3;
        color: #16a34a;
        font-size: 10px;
        font-weight: 600;
        padding: 3px 10px;
        border-radius: 20px;
        border: 1px solid #bbf7d0;
    }
    .hqd-shell .hqd-brands-live-dot {
        width: 6px;
        height: 6px;
        background: #16a34a;
        border-radius: 50%;
        animation: hqd-live-pulse 1.8s ease-in-out infinite;
        flex-shrink: 0;
    }
    .hqd-shell .hqd-brands-updated {
        font-size: 10px;
        color: #94a3b8;
    }

    /* ── Scrolling marquee ── */
    .hqd-shell .hqd-brands-marquee-wrap {
        overflow: hidden;
        width: 100%;
        /* Fade edges */
        mask-image: linear-gradient(
            to right,
            transparent 0%,
            #000 5%,
            #000 95%,
            transparent 100%
        );
        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0%,
            #000 5%,
            #000 95%,
            transparent 100%
        );
    }
    .hqd-shell .hqd-brands-track {
        display: flex;
        align-items: center;
        width: max-content;
        /* speed is set inline via style="animation-duration:Xs" */
        animation: hqd-brand-scroll linear infinite;
    }
    .hqd-shell .hqd-brands-track:hover {
        animation-play-state: paused;
    }

    /* ── Individual logo card ── */
    .hqd-shell .hqd-brand-logo-item {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 40px;
        border-right: 1px solid #f0f2f5;
        height: 60px;
    }
    .hqd-shell .hqd-brand-logo-item img {
        max-height: 34px;
        max-width: 110px;
        width: auto;
        object-fit: contain;
        filter: grayscale(20%);
        opacity: 0.82;
        transition: filter 0.25s ease, opacity 0.25s ease;
        display: block;
    }
    .hqd-shell .hqd-brands-track:hover .hqd-brand-logo-item img {
        filter: grayscale(0%);
        opacity: 1;
    }
    .hqd-shell .hqd-brand-name-text {
        font-size: 15px;
        font-weight: 800;
        color: #334155;
        white-space: nowrap;
        letter-spacing: -0.3px;
    }

    /* ── Trust signals bar ── */
    .hqd-shell .hqd-brands-trust-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f8fafc;
        border-top: 1px solid #eef0f5;
        margin-top: 14px;
        flex-wrap: wrap;
    }
    .hqd-shell .hqd-brands-trust-item {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 11px 32px;
        border-right: 1px solid #e2e8f0;
        font-size: 12px;
        font-weight: 500;
        color: #475569;
        white-space: nowrap;
    }
    .hqd-shell .hqd-brands-trust-item:last-child {
        border-right: none;
    }
    .hqd-shell .hqd-brands-trust-icon {
        font-size: 15px;
        flex-shrink: 0;
        line-height: 1;
    }
    .hqd-shell .hqd-brands-trust-text {
        font-weight: 600;
        color: #334155;
    }

    /* ── Trust signal SVG icon colours ─────────────────────── */
    .hqd-brands-trust-icon { display: flex; align-items: center; }
    .hqd-bti--check   .hqd-brands-trust-icon { color: #16a34a; }
    .hqd-bti--shield  .hqd-brands-trust-icon { color: #2563eb; }
    .hqd-bti--package .hqd-brands-trust-icon { color: #d97706; }
    .hqd-bti--star    .hqd-brands-trust-icon { color: #eab308; }
    .hqd-bti--truck   .hqd-brands-trust-icon { color: #0891b2; }
    .hqd-bti--bolt    .hqd-brands-trust-icon { color: #f59e0b; }
    .hqd-bti--refresh .hqd-brands-trust-icon { color: #7c3aed; }
    .hqd-bti--lock    .hqd-brands-trust-icon { color: #475569; }
    .hqd-bti--tag     .hqd-brands-trust-icon { color: #db2777; }
    /* emoji fallback */
    .hqd-ts-emoji { font-size: 17px; line-height: 1; }

    /* ── Clickable brand logo items ─────────────────────────── */
    .hqd-shell .hqd-brand-logo-item--link {
        cursor: pointer;
        text-decoration: none;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        border-radius: 6px;
    }
    .hqd-shell .hqd-brand-logo-item--link:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,.10);
    }
    .hqd-shell .hqd-brand-logo-item--link img {
        filter: grayscale(10%);
        opacity: 0.9;
    }
    .hqd-shell .hqd-brand-logo-item--link:hover img {
        filter: grayscale(0%);
        opacity: 1;
    }
    .hqd-shell .hqd-brand-logo-item--link .hqd-brand-name-text {
        color: #0d1b40;
        text-decoration: none;
    }
    .hqd-shell .hqd-brand-logo-item--link:hover .hqd-brand-name-text {
        color: #2563eb;
    }
}


/* ============================================================
   BRAND ARCHIVE PAGE  (.hqd-brand-shell)
   Injected on /shop/brand/* — desktop only
   ============================================================ */

.hqd-brand-shell { display: none; }

@media (min-width: 1024px) {

    .hqd-brand-shell {
        display: block !important;
        min-height: 100vh !important;
        background: #f4f6fb !important;
        position: relative !important;
        z-index: 9999 !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    /* Hide old WC/theme content on brand pages */
    body:has(.hqd-brand-shell) .template-container,
    body:has(.hqd-brand-shell) .site-footer,
    body:has(.hqd-brand-shell) footer.site-footer,
    body:has(.hqd-brand-shell) footer,
    body:has(.hqd-brand-shell) #footer,
    body:has(.hqd-brand-shell) .et-pb-footer-bottom-inside,
    body:has(.hqd-brand-shell) .woocommerce-breadcrumb,
    body:has(.hqd-brand-shell) .woocommerce-notices-wrapper {
        display: none !important;
    }

    /* ── Trust Strip ─────────────────────────────────────────── */
    .hqd-bs-trust-strip {
        background: #fff;
        border-bottom: 1px solid #e8edf4;
        padding: 10px 0;
    }
    .hqd-bs-trust-strip-inner {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 32px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }
    .hqd-bs-trust-items {
        display: flex;
        align-items: center;
        gap: 6px;
        flex: 1;
        flex-wrap: wrap;
    }
    .hqd-bs-trust-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12.5px;
        color: #374151;
        font-weight: 500;
        white-space: nowrap;
    }
    .hqd-bs-trust-item svg { color: #4b5563; flex-shrink: 0; }
    .hqd-bs-trust-sep { color: #d1d5db; font-size: 11px; padding: 0 4px; }
    .hqd-bs-trust-see-all {
        font-size: 12px;
        color: #2563eb;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .hqd-bs-trust-see-all:hover { text-decoration: underline; }

    /* ── Breadcrumb ──────────────────────────────────────────── */
    .hqd-bs-breadcrumb {
        background: #fff;
        border-bottom: 1px solid #f0f4fb;
        padding: 10px 0;
    }
    .hqd-bs-breadcrumb-inner {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 32px;
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12.5px;
        color: #6b7280;
    }
    .hqd-bs-breadcrumb a { color: #6b7280; text-decoration: none; }
    .hqd-bs-breadcrumb a:hover { color: #2563eb; }
    .hqd-bs-breadcrumb .sep { color: #d1d5db; }
    .hqd-bs-breadcrumb .current { color: #374151; font-weight: 600; }

    /* ── Hero (two-column) ───────────────────────────────────── */
    .hqd-bs-hero {
        max-width: 1400px;
        margin: 20px auto 0;
        padding: 0 32px;
        display: grid;
        grid-template-columns: 360px 1fr;
        gap: 18px;
        align-items: stretch;
    }

    /* Hero Left – Brand Info Card */
    .hqd-bs-hero-left {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 18px 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;   /* centre content in the shorter card */
        gap: 12px;
        height: 240px;             /* match the compact banner height */
        overflow: hidden;
    }
    .hqd-bs-brand-identity {
        display: flex;
        align-items: flex-start;
        gap: 14px;
    }
    .hqd-bs-brand-logo-box {
        width: 96px;
        height: 76px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        overflow: hidden;
        padding: 8px;
    }
    .hqd-bs-brand-logo-box img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    .hqd-bs-brand-name-wrap { flex: 1; }
    .hqd-bs-brand-name {
        font-size: 24px;
        font-weight: 800;
        color: #0f172a;
        line-height: 1.1;
        margin: 0 0 10px;
    }
    .hqd-bs-trusted-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        color: #1d4ed8;
        font-size: 11.5px;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 20px;
    }
    .hqd-bs-brand-tagline {
        font-size: 13px;
        color: #4b5563;
        line-height: 1.65;
        margin: 0;
        flex: 1;
    }
    .hqd-bs-brand-stats {
        display: flex;
        gap: 8px;
        padding-top: 16px;
        border-top: 1px solid #f0f4fb;
    }
    .hqd-bs-stat {
        flex: 1;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }
    .hqd-bs-stat-icon {
        width: 34px;
        height: 34px;
        border: 1.5px solid #e2e8f0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #374151;
    }
    .hqd-bs-stat-value {
        font-size: 16px;
        font-weight: 800;
        color: #0f172a;
        line-height: 1;
    }
    .hqd-bs-stat-label {
        font-size: 10px;
        color: #6b7280;
        font-weight: 500;
        line-height: 1.3;
        text-align: center;
    }

    /* Hero Right – Banner */
    .hqd-bs-hero-right {
        border-radius: 12px;
        overflow: hidden;
        position: relative;
        min-height: 220px;
        /* Fallback gradient shown only when no banner image is set. */
        background: linear-gradient(130deg, #c8d9f8 0%, #dce9ff 50%, #e8f0fe 100%);
    }
    /* Banner image fills the FULL width of the slot; the height follows the
       image's own aspect ratio (so the whole banner shows — never cropped,
       never letterboxed). The hero row then grows to the banner's height. */
    .hqd-bs-hero-right.has-banner-img { background: none; height: 240px; }
    /* Banner fills the full width and a fixed, compact height (~half the old
       auto height). object-fit:cover crops the image to the strip — design
       banners around a wide ~4:1 strip, or content near the centre, to avoid
       losing the top/bottom. */
    .hqd-bs-hero-banner-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }
    .hqd-bs-hero-banner-overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        padding: 40px 44px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: linear-gradient(to right, rgba(255,255,255,.15) 0%, transparent 70%);
        pointer-events: none;
    }
    .hqd-bs-hero-banner-overlay > * { pointer-events: auto; }
    .hqd-bs-banner-headline {
        font-size: 30px;
        font-weight: 800;
        color: #0f172a;
        line-height: 1.2;
        max-width: 360px;
        margin: 0 0 22px;
    }
    .hqd-bs-banner-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #0d1b40;
        color: #fff;
        font-size: 13.5px;
        font-weight: 600;
        padding: 12px 22px;
        border-radius: 8px;
        text-decoration: none;
        width: fit-content;
        transition: background .2s;
    }
    .hqd-bs-banner-cta:hover { background: #1a237e; color: #fff; text-decoration: none; }

    /* ── Trust Badges Row ────────────────────────────────────── */
    .hqd-bs-badges {
        background: #fff;
        border-top: 1px solid #f0f4fb;
        border-bottom: 1px solid #f0f4fb;
        margin-top: 0;
    }
    .hqd-bs-badges-inner {
        max-width: 1400px;
        margin: 0 auto;
        padding: 16px 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 48px;
        flex-wrap: wrap;
    }
    .hqd-bs-badge-item {
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 13px;
        font-weight: 500;
        color: #374151;
    }
    .hqd-bs-badge-icon {
        width: 34px;
        height: 34px;
        border: 1.5px solid #e2e8f0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .hqd-bs-badge-icon.hqd-bti--check   { color: #16a34a; border-color: #bbf7d0; }
    .hqd-bs-badge-icon.hqd-bti--shield  { color: #2563eb; border-color: #bfdbfe; }
    .hqd-bs-badge-icon.hqd-bti--package { color: #d97706; border-color: #fde68a; }
    .hqd-bs-badge-icon.hqd-bti--star    { color: #ca8a04; border-color: #fef08a; }
    .hqd-bs-badge-icon.hqd-bti--truck   { color: #0284c7; border-color: #bae6fd; }
    .hqd-bs-badge-icon.hqd-bti--bolt    { color: #d97706; border-color: #fde68a; }
    .hqd-bs-badge-icon.hqd-bti--refresh { color: #16a34a; border-color: #bbf7d0; }
    .hqd-bs-badge-icon.hqd-bti--lock    { color: #7c3aed; border-color: #ddd6fe; }
    .hqd-bs-badge-icon.hqd-bti--tag     { color: #dc2626; border-color: #fecaca; }

    /* ── Category Pills ──────────────────────────────────────── */
    .hqd-bs-cat-pills {
        background: #f4f6fb;
        border-bottom: 1px solid #e2e8f0;
    }
    .hqd-bs-cat-pills-inner {
        max-width: 1400px;
        margin: 0 auto;
        padding: 12px 32px;
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .hqd-bs-cat-pills-inner::-webkit-scrollbar { display: none; }
    .hqd-bs-cat-pill {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 7px 16px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 500;
        color: #374151;
        background: #fff;
        border: 1px solid #e2e8f0;
        text-decoration: none;
        white-space: nowrap;
        transition: border-color .15s, color .15s, background .15s;
        cursor: pointer;
    }
    .hqd-bs-cat-pill:hover  { border-color: #0d1b40; color: #0d1b40; }
    .hqd-bs-cat-pill.active { background: #0d1b40; color: #fff; border-color: #0d1b40; }
    .hqd-bs-cat-pill .count { font-size: 11px; opacity: .7; }

    /* ── Body (sidebar + main) ───────────────────────────────── */
    .hqd-bs-body {
        max-width: 1400px;
        margin: 24px auto 40px;
        padding: 0 32px;
        display: grid;
        grid-template-columns: 236px 1fr;
        gap: 22px;
        align-items: start;
    }

    /* ── Sidebar ─────────────────────────────────────────────── */
    .hqd-bs-sidebar {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        overflow: hidden;
        position: sticky;
        top: 20px;
    }
    .hqd-bs-sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 18px;
        border-bottom: 1px solid #f0f4fb;
    }
    .hqd-bs-sidebar-header h3 { font-size: 14px; font-weight: 700; color: #0f172a; margin: 0; }
    .hqd-bs-clear-all { font-size: 12px; color: #2563eb; text-decoration: none; font-weight: 500; }
    .hqd-bs-clear-all:hover { text-decoration: underline; }
    .hqd-bs-sidebar-section { padding: 15px 18px; border-bottom: 1px solid #f0f4fb; }
    .hqd-bs-sidebar-section:last-child { border-bottom: none; }
    .hqd-bs-filter-heading { font-size: 13px; font-weight: 700; color: #0f172a; margin: 0 0 11px; }
    .hqd-bs-filter-checkbox-list { display: flex; flex-direction: column; gap: 9px; }
    .hqd-bs-filter-checkbox {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12.5px;
        color: #4b5563;
        cursor: pointer;
        line-height: 1.3;
    }
    .hqd-bs-filter-checkbox input[type="checkbox"] {
        accent-color: #0d1b40;
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        cursor: pointer;
    }
    .hqd-bs-filter-checkbox .fc-count { color: #9ca3af; font-size: 11.5px; margin-left: auto; }
    .hqd-bs-show-more { font-size: 12px; color: #2563eb; font-weight: 500; margin-top: 8px; display: block; cursor: pointer; }
    .hqd-bs-apply-btn {
        width: 100%;
        padding: 8px;
        background: #0d1b40;
        color: #fff;
        border: none;
        border-radius: 6px;
        font-size: 12.5px;
        font-weight: 600;
        cursor: pointer;
        font-family: inherit;
        transition: background .15s;
    }
    .hqd-bs-apply-btn:hover { background: #1a237e; }

    /* Dual range slider */
    .hqd-price-slider-wrap { position: relative; height: 24px; margin: 6px 0; }
    .hqd-price-track {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: 4px;
        background: #e2e8f0;
        border-radius: 2px;
    }
    .hqd-price-range {
        position: absolute;
        top: 0;
        height: 100%;
        background: #0d1b40;
        border-radius: 2px;
    }
    .hqd-range-input {
        -webkit-appearance: none;
        appearance: none;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: 0;
        background: transparent;
        pointer-events: none;
        margin: 0;
    }
    .hqd-range-input::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        height: 16px;
        width: 16px;
        border-radius: 50%;
        border: 2px solid #0d1b40;
        background: #fff;
        pointer-events: all;
        cursor: pointer;
        box-shadow: 0 1px 4px rgba(0,0,0,.18);
    }
    .hqd-range-input::-moz-range-thumb {
        height: 14px;
        width: 14px;
        border-radius: 50%;
        border: 2px solid #0d1b40;
        background: #fff;
        pointer-events: all;
        cursor: pointer;
        box-shadow: 0 1px 4px rgba(0,0,0,.18);
    }
    .hqd-price-labels {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        font-weight: 600;
        color: #374151;
        margin-top: 6px;
    }

    /* ── Main Content ────────────────────────────────────────── */
    .hqd-bs-main { display: flex; flex-direction: column; gap: 18px; }
    .hqd-bs-topbar {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 12px 18px;
        display: flex;
        align-items: center;
        gap: 16px;
    }
    .hqd-bs-result-count { font-size: 13px; color: #4b5563; font-weight: 400; flex: 1; margin: 0; }
    .hqd-bs-result-count strong { color: #0f172a; font-weight: 700; }
    .hqd-bs-fast-delivery-filter {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12.5px;
        color: #374151;
        cursor: pointer;
        border: 1px solid #e2e8f0;
        padding: 6px 12px;
        border-radius: 6px;
        white-space: nowrap;
    }
    .hqd-bs-fast-delivery-filter input { accent-color: #0d1b40; width: 14px; height: 14px; cursor: pointer; }
    .hqd-bs-fast-delivery-label { display: flex; align-items: center; gap: 4px; font-weight: 500; }
    .hqd-bs-sort-select {
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        padding: 7px 10px;
        font-size: 12.5px;
        color: #374151;
        background: #f8fafc;
        cursor: pointer;
        font-family: inherit;
        min-width: 160px;
    }

    /* ── Product Grid (5 columns) ────────────────────────────── */
    .hqd-bs-product-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 14px;
    }
    .hqd-bs-p-card {
        background: #fff;
        border: 1px solid #eaeff6;
        border-radius: 10px;
        overflow: hidden;
        cursor: pointer;
        transition: box-shadow .2s, transform .15s;
        position: relative;
        display: flex;
        flex-direction: column;
    }
    .hqd-bs-p-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.09); transform: translateY(-2px); }
    .hqd-bs-p-img {
        position: relative;
        aspect-ratio: 1 / 1;
        background: #f9fafb;
        overflow: hidden;
        flex-shrink: 0;
    }
    .hqd-bs-p-img img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 10px;
        transition: transform .25s;
    }
    .hqd-bs-p-card:hover .hqd-bs-p-img img { transform: scale(1.04); }
    .hqd-bs-p-badge {
        position: absolute;
        top: 8px;
        left: 8px;
        background: #fef9c3;
        color: #854d0e;
        font-size: 10px;
        font-weight: 700;
        padding: 2px 7px;
        border-radius: 4px;
        letter-spacing: .3px;
        z-index: 3; /* keep above the image, which scales on hover and would otherwise cover it */
    }
    .hqd-bs-p-wish {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 28px;
        height: 28px;
        background: #fff;
        border: 1px solid #e8edf4;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #9ca3af;
        cursor: pointer;
        transition: color .15s;
        z-index: 2;
    }
    .hqd-bs-p-wish:hover { color: #ef4444; border-color: #fca5a5; }
    .hqd-bs-p-info { padding: 10px 12px 12px; flex: 1; display: flex; flex-direction: column; gap: 0; }
    .hqd-bs-p-ai-tag {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: #f0f9ff;
        color: #0369a1;
        font-size: 10px;
        font-weight: 600;
        padding: 2px 7px;
        border-radius: 10px;
        margin-bottom: 5px;
        width: fit-content;
    }
    .hqd-bs-p-name {
        font-size: 12.5px;
        font-weight: 600;
        color: #1e293b;
        line-height: 1.4;
        margin: 0 0 5px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        flex: 1;
    }
    .hqd-bs-p-delivery { font-size: 11.5px; color: #d97706; font-weight: 500; margin-bottom: 7px; }
    .hqd-bs-p-price-row {
        display: flex;
        align-items: baseline;
        gap: 5px;
        margin-bottom: 9px;
        flex-wrap: wrap;
    }
    .hqd-bs-p-price { font-size: 15px; font-weight: 800; color: #0f172a; }
    .hqd-bs-p-orig { font-size: 12px; color: #9ca3af; text-decoration: line-through; }
    .hqd-bs-p-rating { margin-left: auto; font-size: 11.5px; color: #16a34a; font-weight: 700; }
    .hqd-bs-p-atc {
        width: 100%;
        padding: 8px;
        background: #fff;
        border: 1.5px solid #1a237e;
        border-radius: 6px;
        font-size: 12.5px;
        font-weight: 600;
        color: #1a237e;
        cursor: pointer;
        transition: background .15s, color .15s;
        font-family: inherit;
        margin-top: auto;
    }
    .hqd-bs-p-atc:hover { background: #1a237e; color: #fff; }

    /* ── Pagination ──────────────────────────────────────────── */
    .hqd-bs-pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        padding: 8px 0 16px;
    }
    .hqd-bs-pagination .page-numbers {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
        color: #374151;
        text-decoration: none;
        border: 1px solid #e2e8f0;
        background: #fff;
        transition: all .15s;
    }
    .hqd-bs-pagination .page-numbers:hover { border-color: #0d1b40; color: #0d1b40; }
    .hqd-bs-pagination .page-numbers.current { background: #0d1b40; color: #fff; border-color: #0d1b40; font-weight: 700; }
    .hqd-bs-pagination .page-numbers.prev,
    .hqd-bs-pagination .page-numbers.next { width: auto; padding: 0 14px; }
    .hqd-bs-pagination .page-numbers.dots { border: none; background: none; cursor: default; }

    /* ── HOME HEADER: MATCH PDP EXACTLY ────────────────────────────────────
     * The home shell (.hqd-shell) and PDP shell (.hqd-pdp-shell) share all
     * header classes, but generic .hqd-shell rules above have higher
     * specificity and override the shared PDP styles. The rules below
     * restore the PDP appearance on the home header with equal-or-higher
     * specificity placed later in the cascade.
     * ---------------------------------------------------------------------- */

    /* Header element — sticky, shadow, single-row (not column stack) */
    .hqd-shell .hqd-pdp-header.hqd-header {
        flex-direction: row !important;
        align-items: stretch !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 9998 !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.2) !important;
        padding: 0 !important;
    }

    /* Header row — match PDP dimensions exactly */
    .hqd-shell .hqd-pdp-hdr-row {
        padding: 10px 28px !important;
        height: 66px !important;
        gap: 18px !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* Logo — match PDP: 80px height, generous max-width */
    .hqd-shell .hqd-pdp-header .hqd-brand-logo {
        height: 80px !important;
        width: auto !important;
        max-width: 600px !important;
    }

    /* Action icons cluster — tight 4px gap matching PDP */
    .hqd-shell .hqd-pdp-hdr-actions {
        gap: 4px !important;
    }

} /* end @media (min-width:1024px) */

/* ============================================================
   DESKTOP SHORTLIST / WISHLIST PAGE (hqd-wl-shell)
   ============================================================ */
@media (min-width: 1024px) {
    .hqd-wl-shell { display: block !important; }

    /* Active state for Shortlist icon in nav */
    .hqd-wl-active svg { fill: #e53e3e !important; stroke: #e53e3e !important; }
    .hqd-wl-active span { color: #e53e3e !important; }

    /* ── Outer wrap ──────────────────────────────────────── */
    .hqd-wl-wrap {
        max-width: 1240px;
        margin: 0 auto;
        padding: 32px 32px 60px;
    }

    /* ── Two-column layout ───────────────────────────────── */
    .hqd-wl-layout {
        display: grid;
        grid-template-columns: 1fr 290px;
        gap: 28px;
        align-items: start;
    }

    /* ── Title row ───────────────────────────────────────── */
    .hqd-wl-title-row {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 20px;
    }
    .hqd-wl-title {
        font-family: 'Outfit', sans-serif;
        font-size: 26px; font-weight: 800;
        color: var(--hqd-navy); margin: 0 0 2px;
    }
    .hqd-wl-subtitle { font-size: 13px; color: #64748b; margin: 0; }

    /* ── Product list (vertical rows) ───────────────────── */
    .hqd-wl-list {
        display: flex;
        flex-direction: column;
        gap: 0;
        border: 1px solid #e8edf5;
        border-radius: 14px;
        overflow: hidden;
        background: #fff;
    }

    /* ── Individual list row ─────────────────────────────── */
    .hqd-wl-row {
        display: grid;
        grid-template-columns: 90px 1fr 1fr auto;
        gap: 0;
        align-items: stretch;
        border-bottom: 1px solid #f1f5f9;
        transition: background 0.15s;
        min-height: 112px;
    }
    .hqd-wl-row:last-child { border-bottom: none; }
    .hqd-wl-row:hover { background: #fafbfe; }

    /* Product image column */
    .hqd-wl-row-img-wrap {
        display: flex; align-items: center; justify-content: center;
        padding: 12px 8px 12px 16px;
        flex-shrink: 0;
    }
    .hqd-wl-row-img {
        width: 78px; height: 78px;
        object-fit: contain;
        border-radius: 8px;
        background: #f8fafc;
    }

    /* Info column (name, category, price, stock) */
    .hqd-wl-row-info {
        display: flex; flex-direction: column;
        justify-content: center;
        gap: 4px;
        padding: 14px 16px 14px 14px;
        min-width: 0;
    }
    .hqd-wl-row-name {
        font-size: 14px; font-weight: 700;
        color: var(--hqd-navy); text-decoration: none;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .hqd-wl-row-name:hover { color: var(--hqd-primary); }
    .hqd-wl-row-cat {
        font-size: 11px; color: #94a3b8; font-weight: 500;
        text-transform: uppercase; letter-spacing: 0.03em;
        margin-bottom: 2px;
    }
    .hqd-wl-row-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
    .hqd-wl-stock {
        display: inline-flex; align-items: center; gap: 4px;
        font-size: 11px; font-weight: 700;
        padding: 2px 8px; border-radius: 99px;
    }
    .hqd-wl-instock   { background: #dcfce7; color: #15803d; }
    .hqd-wl-outofstock { background: #fee2e2; color: #b91c1c; }
    .hqd-wl-row-price { font-size: 15px; font-weight: 800; color: var(--hqd-navy); }
    .hqd-wl-row-price ins { text-decoration: none; }
    .hqd-wl-row-price del { font-size: 12px; font-weight: 400; color: #94a3b8; margin-left: 4px; }

    /* ── AI Insight column ───────────────────────────────── */
    .hqd-wl-insight {
        display: flex; flex-direction: column;
        justify-content: center;
        padding: 14px 16px;
        border-left: 1px solid #f1f5f9;
        background: #f8fbff;
        min-width: 0;
    }
    .hqd-wl-insight-hdr {
        display: flex; align-items: center; gap: 5px;
        font-size: 10px; font-weight: 700;
        color: #3b82f6;
        text-transform: uppercase; letter-spacing: 0.06em;
        margin-bottom: 6px;
    }
    .hqd-wl-ai-icon { flex-shrink: 0; color: #3b82f6; }
    .hqd-wl-insight-body { min-height: 36px; }
    .hqd-wl-insight-text {
        font-size: 12.5px; color: #334155; line-height: 1.55;
        margin: 0;
    }

    /* Skeleton loader */
    .hqd-wl-insight-skeleton { display: flex; flex-direction: column; gap: 6px; }
    .hqd-wl-skel-line {
        height: 11px; border-radius: 6px;
        background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
        background-size: 200% 100%;
        animation: hqd-skel-shimmer 1.4s infinite;
        width: 100%;
    }
    .hqd-wl-skel-short { width: 65%; }
    @keyframes hqd-skel-shimmer {
        0%   { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    /* ── Actions column ──────────────────────────────────── */
    .hqd-wl-row-actions {
        display: flex; flex-direction: column;
        align-items: stretch; justify-content: center;
        gap: 8px;
        padding: 14px 16px;
        border-left: 1px solid #f1f5f9;
        min-width: 130px;
    }
    .hqd-wl-row-atc {
        display: flex; align-items: center; justify-content: center; gap: 6px;
        padding: 9px 14px;
        background: var(--hqd-navy);
        color: #fff;
        border-radius: 9px;
        font-size: 12.5px; font-weight: 700;
        text-decoration: none;
        transition: background 0.15s;
        white-space: nowrap;
        cursor: pointer;
    }
    .hqd-wl-row-atc:hover { background: #283593; color: #fff; }
    .hqd-wl-row-atc-oos {
        background: #e2e8f0 !important;
        color: #94a3b8 !important;
        cursor: default;
        pointer-events: none;
        font-size: 11.5px;
    }
    .hqd-wl-remove-btn {
        display: flex; align-items: center; justify-content: center; gap: 5px;
        padding: 7px 12px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: transparent;
        color: #94a3b8;
        font-size: 11.5px; font-weight: 600;
        cursor: pointer;
        transition: background 0.14s, color 0.14s, border-color 0.14s;
    }
    .hqd-wl-remove-btn:hover {
        background: #fff0f0; color: #e53e3e; border-color: #fca5a5;
    }

    /* ── Right sidebar ───────────────────────────────────── */
    .hqd-wl-sidebar { display: flex; flex-direction: column; gap: 18px; }

    .hqd-wl-summary-card {
        background: #fff;
        border: 1px solid #e8edf5;
        border-radius: 14px;
        padding: 22px;
    }
    .hqd-wl-summary-hdr {
        display: flex; align-items: center; gap: 8px;
        font-size: 16px; font-weight: 800; color: var(--hqd-navy);
        margin-bottom: 12px;
    }
    .hqd-wl-summary-count { font-size: 14px; color: #475569; margin: 0 0 8px; }
    .hqd-wl-summary-count strong { color: var(--hqd-navy); font-size: 22px; }
    .hqd-wl-summary-hint {
        font-size: 12.5px; color: #94a3b8;
        line-height: 1.55; margin: 0 0 16px;
    }

    /* Move All → Checkout button */
    .hqd-wl-checkout-all-btn {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        width: 100%;
        padding: 12px 14px;
        background: var(--hqd-navy);
        color: #fff;
        border: none;
        border-radius: 10px;
        font-size: 13.5px; font-weight: 700;
        cursor: pointer;
        transition: background 0.15s, opacity 0.15s;
        margin-bottom: 8px;
    }
    .hqd-wl-checkout-all-btn:hover:not(:disabled) { background: #283593; }
    .hqd-wl-checkout-all-btn:disabled { opacity: 0.7; cursor: wait; }
    .hqd-wl-checkout-note {
        display: flex; align-items: flex-start; gap: 5px;
        font-size: 11px; color: #94a3b8; line-height: 1.4;
        margin: 0 0 14px;
    }
    .hqd-wl-checkout-note svg { flex-shrink: 0; margin-top: 1px; }

    /* Spinner animation */
    @keyframes hqd-spin { to { transform: rotate(360deg); } }
    .hqd-wl-spinner { animation: hqd-spin 0.8s linear infinite; }

    .hqd-wl-discover-btn {
        display: flex; align-items: center; justify-content: center; gap: 7px;
        width: 100%;
        padding: 11px;
        border: 2px solid var(--hqd-navy);
        border-radius: 10px;
        color: var(--hqd-navy);
        font-size: 13.5px; font-weight: 700;
        text-decoration: none;
        transition: background 0.15s, color 0.15s;
    }
    .hqd-wl-discover-btn:hover { background: var(--hqd-navy); color: #fff; }

    /* Trust badges — SVG icons */
    .hqd-wl-trust {
        background: #fff;
        border: 1px solid #e8edf5;
        border-radius: 14px;
        padding: 16px 20px;
        display: flex; flex-direction: column; gap: 14px;
    }
    .hqd-wl-trust-item { display: flex; align-items: flex-start; gap: 12px; }
    .hqd-wl-trust-icon {
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
        color: var(--hqd-navy);
        opacity: 0.7;
    }
    .hqd-wl-trust-item > div { display: flex; flex-direction: column; gap: 1px; }
    .hqd-wl-trust-item strong { font-size: 13px; font-weight: 700; color: #1e293b; }
    .hqd-wl-trust-item span   { font-size: 11.5px; color: #94a3b8; }

    /* ── Empty state ─────────────────────────────────────── */
    .hqd-wl-empty {
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        text-align: center;
        padding: 80px 40px;
        min-height: 460px;
    }
    .hqd-wl-empty-icon {
        width: 120px; height: 120px;
        background: #f8fafc;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        margin-bottom: 24px;
    }
    .hqd-wl-empty-title {
        font-family: 'Outfit', sans-serif;
        font-size: 24px; font-weight: 800; color: var(--hqd-navy);
        margin: 0 0 10px;
    }
    .hqd-wl-empty-sub {
        font-size: 14px; color: #64748b;
        max-width: 400px; line-height: 1.6; margin: 0 0 28px;
    }
    .hqd-wl-empty-cta {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 12px 28px;
        background: var(--hqd-navy);
        color: #fff;
        border-radius: 10px;
        font-size: 14px; font-weight: 700;
        text-decoration: none;
        transition: background 0.15s;
    }
    .hqd-wl-empty-cta:hover { background: #283593; color: #fff; }
}

/* ── Shortlist header badge pop animation ── */
@keyframes hqd-badge-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.45); }
    70%  { transform: scale(0.88); }
    100% { transform: scale(1); }
}
.hqd-badge-pop { animation: hqd-badge-pop 0.22s cubic-bezier(.36,.07,.19,.97) both; }

/* ═══════════════════════════════════════════════════════════════════════════
   Discovery Section — Split Layout (illustration left | heading right)
   Matches reference: right-aligned heading, illustration pinned bottom-left,
   feature row with vertical separators, CTAs right-aligned & stacked.
   ═══════════════════════════════════════════════════════════════════════════ */
.hqd-shell .hqd-discovery-section {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
    background: #fefcf8;
    border-radius: 0;
    border: none;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    /* Reserved for worst-case content: 3-line heading + 2-line subheading
       + tagline + 4 feature blocks + 2 stacked CTAs + section padding.    */
    min-height: 640px;
}

/* ── Left column: illustration pinned to bottom ──────────────────────────── */
.hqd-shell .hqd-disc-illus-col {
    flex: 0 0 40%;
    position: relative;
    overflow: hidden;
}
.hqd-shell .hqd-disc-illus-img {
    position: absolute;
    bottom: -20px;
    left: 32px;
    width: 75%;
    height: auto;
    display: block;
    user-select: none;
    pointer-events: none;
    opacity: 0.38;
}

/* ── Right column: content ───────────────────────────────────────────────── */
.hqd-shell .hqd-disc-content-col {
    flex: 0 0 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 52px 64px 52px 32px;
    position: relative;
    z-index: 1;
}

/* ── Scroll-reveal animations ────────────────────────────────────────────── */
@keyframes hqd-disc-slide-up {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes hqd-disc-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.hqd-shell .hqd-disc-anim { opacity: 0; will-change: opacity; }
.hqd-shell .hqd-disc-anim.hqd-disc-visible[data-anim="slide-up"] {
    animation: hqd-disc-slide-up 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hqd-shell .hqd-disc-anim.hqd-disc-visible[data-anim="fade"] {
    animation: hqd-disc-fade 0.55s ease both;
}

/* ── Heading rotation: JS drives opacity inline; no CSS class rules needed ── */

/* ── Text ────────────────────────────────────────────────────────────────── */
/* Reserved-space strategy:
   Previously, min-height was applied to each individual line (heading +
   subheading). On short rotations that left a visible gap *between* the
   heading text and the subheading text. The fix is to reserve the worst-case
   space on the WRAPPER instead — short content stays flush together and the
   leftover space collapses below the tagline. Flexbox + flex-end pins the
   text block to the bottom of the reserved area so it always sits at the
   same baseline regardless of rotation length (no vertical jitter on the
   stuff below). */
.hqd-shell .hqd-disc-hdr-wrap {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Worst case is the 3-line headline ("We'd rather show you 20 useful
       products than 2 lakh irrelevant ones.") + 2-line subheading + 1-line
       tagline + their margins. Scaled with the viewport so it matches the
       heading's clamp(40px, 4.2vw, 62px). */
    min-height: clamp(230px, 22vw, 320px);
}

/* Right-aligned heading — natural height, no individual reservation. */
.hqd-shell .hqd-disc-heading {
    font-size: clamp(40px, 4.2vw, 62px);
    font-weight: 900;
    color: #0d1b40;
    line-height: 1.08;
    margin: 0 0 10px;
    letter-spacing: -1.5px;
    font-family: 'Outfit', 'Inter', sans-serif;
    text-align: right;
}

/* Sub-heading — natural height; sits flush below heading. */
.hqd-shell .hqd-disc-subheading {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #475569;
    margin: 0 0 10px;
    line-height: 1.55;
    text-align: right;
}

/* Tagline — right-aligned, gray */
.hqd-shell .hqd-disc-tagline {
    display: block;
    font-size: 18px;
    font-weight: 400;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
    text-align: right;
    text-decoration: none;
}
.hqd-shell .hqd-disc-tagline svg { display: none; }

/* ── Feature row with vertical separators ────────────────────────────────── */
.hqd-shell .hqd-disc-features {
    display: flex;
    gap: 0;
    flex-wrap: nowrap;
    margin: 32px 0;
    border-top: 1px solid #e2d9cc;
    border-bottom: 1px solid #e2d9cc;
    padding: 20px 0;
}
.hqd-shell .hqd-disc-feat {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    padding: 0 20px 0 4px;
    border-right: 1px solid #ddd5c8;
}
.hqd-shell .hqd-disc-feat:first-child { padding-left: 0; }
.hqd-shell .hqd-disc-feat:last-child  { border-right: none; padding-right: 0; }
.hqd-shell .hqd-disc-feat-ico {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hqd-shell .hqd-disc-feat-body { display: flex; flex-direction: column; }
.hqd-shell .hqd-disc-feat-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.35;
}
.hqd-shell .hqd-disc-feat-desc { display: none; }

/* ── CTA buttons — stacked, right-aligned ────────────────────────────────── */
.hqd-shell .hqd-disc-ctas {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
}
.hqd-shell .hqd-disc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 28px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.12s;
    white-space: nowrap;
    width: 260px;
}
.hqd-shell .hqd-disc-btn:hover { opacity: 0.88; transform: translateY(-2px); }
.hqd-shell .hqd-disc-btn-primary {
    background: #0d1b40;
    color: #fff;
    border: 2px solid #0d1b40;
}
.hqd-shell .hqd-disc-btn-outline {
    background: transparent;
    color: #0d1b40;
    border: 2px solid #0d1b40;
}


/* ════════════════════════════════════════════════════════════════════════
   REORDER IN 1 CLICK — desktop page (.hqd-rd-shell)
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
    .hqd-rd-shell {
        display: block !important;
        min-height: 100vh !important;
        background: #f5f6fa !important;
        font-family: 'Inter', -apple-system, sans-serif;
    }
    .hqd-rd-wrap {
        max-width: 1400px;
        margin: 0 auto;
        padding: 22px 28px 64px;
    }
    /* Breadcrumb */
    .hqd-rd-breadcrumb {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: #64748b;
        margin-bottom: 16px;
    }
    .hqd-rd-breadcrumb a { color: #64748b; text-decoration: none; }
    .hqd-rd-breadcrumb a:hover { color: #1a237e; text-decoration: underline; }
    .hqd-rd-breadcrumb .sep { opacity: 0.5; }
    .hqd-rd-breadcrumb .current { color: #0d1b40; font-weight: 600; }

    /* Hero card */
    .hqd-rd-hero {
        background: linear-gradient(135deg, #fff7ed 0%, #fee9d4 100%);
        border-radius: 18px;
        padding: 28px 32px;
        display: grid;
        grid-template-columns: 1.6fr 1fr;
        gap: 24px;
        margin-bottom: 22px;
        border: 1px solid #fed7aa;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        align-items: center;
    }
    .hqd-rd-hero-left { min-width: 0; }
    .hqd-rd-hero-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #fff;
        color: #c2410c;
        font-size: 12px;
        font-weight: 700;
        padding: 5px 12px;
        border-radius: 999px;
        border: 1px solid #fed7aa;
        margin-bottom: 12px;
    }
    .hqd-rd-bolt { font-size: 13px; }
    .hqd-rd-hero-title {
        font-size: 34px;
        font-weight: 900;
        color: #0d1b40;
        margin: 0 0 8px;
        font-family: 'Outfit', 'Inter', sans-serif;
        letter-spacing: -0.5px;
        line-height: 1.1;
    }
    .hqd-rd-hero-desc {
        font-size: 14px;
        color: #475569;
        margin: 0;
        line-height: 1.55;
        max-width: 640px;
    }
    .hqd-rd-hero-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .hqd-rd-stat {
        background: #fff;
        border-radius: 12px;
        padding: 14px 12px;
        text-align: center;
        border: 1px solid #ffedd5;
    }
    .hqd-rd-stat-num {
        font-size: 24px;
        font-weight: 800;
        color: #0d1b40;
        font-family: 'Outfit', 'Inter', sans-serif;
        line-height: 1;
        margin-bottom: 4px;
    }
    .hqd-rd-stat-lbl {
        font-size: 11px;
        font-weight: 600;
        color: #64748b;
        line-height: 1.3;
    }

    /* Error banner */
    .hqd-rd-error {
        background: #fef2f2;
        color: #991b1b;
        border: 1px solid #fecaca;
        padding: 12px 18px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 18px;
    }

    /* Empty state */
    .hqd-rd-empty {
        background: #fff;
        border-radius: 16px;
        padding: 48px 28px;
        text-align: center;
        border: 1px solid #e2e8f0;
        max-width: 520px;
        margin: 40px auto;
    }
    .hqd-rd-empty-ico { font-size: 48px; margin-bottom: 12px; }
    .hqd-rd-empty h2 { font-size: 22px; color: #0d1b40; margin: 0 0 10px; font-family: 'Outfit', sans-serif; }
    .hqd-rd-empty p { font-size: 14px; color: #64748b; margin: 0 0 22px; line-height: 1.55; }
    .hqd-rd-empty-cta {
        display: inline-block;
        background: #0d1b40;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        padding: 12px 28px;
        border-radius: 10px;
        text-decoration: none;
        transition: background .15s;
    }
    .hqd-rd-empty-cta:hover { background: #1a237e; color: #fff; }

    /* Section heading above the grid */
    .hqd-rd-section-hd {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        padding: 0 4px;
        margin: 6px 0 14px;
    }
    .hqd-rd-section-title {
        font-size: 20px;
        font-weight: 800;
        color: #0d1b40;
        font-family: 'Outfit', 'Inter', sans-serif;
        margin: 0;
    }
    .hqd-rd-section-meta {
        font-size: 12.5px;
        color: #64748b;
        font-weight: 500;
    }

    /* Product grid — 4 cards per row on wide screens, 3 on smaller desktops */
    .hqd-rd-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
    @media (max-width: 1280px) { .hqd-rd-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 1100px) { .hqd-rd-grid { grid-template-columns: repeat(2, 1fr); } }

    .hqd-rd-card {
        background: #fff;
        border: 1px solid #e8ecf3;
        border-radius: 14px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: box-shadow .18s, transform .18s, border-color .18s;
    }
    .hqd-rd-card:hover {
        border-color: #cbd5e1;
        box-shadow: 0 10px 26px rgba(15,23,42,0.10);
        transform: translateY(-2px);
    }
    .hqd-rd-card.is-unavailable { opacity: 0.6; filter: grayscale(0.4); }

    .hqd-rd-card-img {
        position: relative;
        display: block;
        aspect-ratio: 1 / 1;
        background: #f8fafc;
        overflow: hidden;
        text-decoration: none;
    }
    .hqd-rd-card-img img {
        width: 100%; height: 100%;
        object-fit: contain;
        padding: 12px;
        transition: transform .25s;
    }
    .hqd-rd-card:hover .hqd-rd-card-img img { transform: scale(1.04); }

    .hqd-rd-card-off {
        position: absolute;
        top: 10px; left: 10px;
        background: #16a34a;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        padding: 4px 8px;
        border-radius: 6px;
        z-index: 2;
    }
    .hqd-rd-card-repeat {
        position: absolute;
        bottom: 10px; left: 10px; right: 10px;
        background: rgba(13, 27, 64, 0.85);
        color: #fff;
        font-size: 10.5px;
        font-weight: 700;
        padding: 4px 8px;
        border-radius: 999px;
        text-align: center;
        backdrop-filter: blur(2px);
    }

    .hqd-rd-card-body {
        padding: 14px 14px 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 1;
    }
    .hqd-rd-card-name {
        font-size: 13.5px;
        font-weight: 600;
        color: #0d1b40;
        line-height: 1.35;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 36px;
    }
    .hqd-rd-card-name a { color: inherit; text-decoration: none; }
    .hqd-rd-card-name a:hover { color: #1a237e; }
    .hqd-rd-card-last {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 11px;
        color: #64748b;
        line-height: 1.2;
    }
    .hqd-rd-card-last svg { stroke: #64748b; }

    .hqd-rd-card-price-row {
        display: flex;
        align-items: baseline;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 2px;
    }
    .hqd-rd-card-price { font-size: 17px; font-weight: 800; color: #0d1b40; }
    .hqd-rd-card-orig  { font-size: 12px; color: #94a3b8; text-decoration: line-through; }
    .hqd-rd-card-qty   {
        margin-left: auto;
        font-size: 11px; font-weight: 700;
        color: #c2410c;
        background: #ffedd5;
        padding: 3px 8px;
        border-radius: 999px;
    }

    /* The headline CTA per card */
    .hqd-rd-card-cta {
        margin-top: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        background: #0d1b40;
        color: #fff !important;
        font-size: 13px;
        font-weight: 800;
        padding: 11px 14px;
        border-radius: 10px;
        text-decoration: none;
        border: none;
        cursor: pointer;
        transition: background .15s, transform .12s, box-shadow .15s;
        font-family: 'Outfit', 'Inter', sans-serif;
        letter-spacing: 0.3px;
        position: relative;
        overflow: hidden;
    }
    .hqd-rd-card-cta:hover {
        background: linear-gradient(135deg, #1a237e 0%, #312e81 100%);
        box-shadow: 0 6px 18px rgba(13,27,64,0.32);
        color: #fff;
    }
    .hqd-rd-card-cta:active { transform: translateY(1px); }
    .hqd-rd-card-cta.is-disabled,
    .hqd-rd-card-cta[disabled] {
        background: #e2e8f0;
        color: #94a3b8 !important;
        cursor: not-allowed;
        pointer-events: none;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   FULL-WIDTH SHOP PAGE — desktop (.hqd-sp-shell)
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
    .hqd-sp-shell {
        display: block !important;
        min-height: 100vh !important;
        background: #f5f6fa !important;
        font-family: 'Inter', -apple-system, sans-serif;
    }
    .hqd-sp-wrap {
        max-width: 1400px;
        margin: 0 auto;
        padding: 24px 28px 64px;
    }

    /* Announcement marquee */
    .hqd-sp-marquee {
        background: #0d1b40;
        color: #fff;
        overflow: hidden;
        padding: 9px 0;
        white-space: nowrap;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    }
    .hqd-sp-marquee-track {
        display: inline-flex;
        gap: 48px;
        animation: hqd-sp-marquee 30s linear infinite;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.3px;
    }
    .hqd-sp-marquee-track:hover { animation-play-state: paused; }
    .hqd-sp-marquee-item {
        display: inline-block;
        padding-right: 48px;
        border-right: 1px solid rgba(255,255,255,0.18);
    }
    @keyframes hqd-sp-marquee {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
    }

    /* Hero banner — more streamlined, matches the proportions used on
       the cart / top-picks / brand desktop pages. */
    .hqd-sp-hero {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        gap: 0;
        background: linear-gradient(135deg, #fff7ed 0%, #ffe4cc 100%);
        border-radius: 16px;
        overflow: hidden;
        margin-bottom: 24px;
        min-height: 260px;
        box-shadow: 0 2px 8px rgba(15,23,42,0.05);
        border: 1px solid #fed7aa;
    }
    .hqd-sp-hero-left {
        padding: 36px 38px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
    }
    .hqd-sp-hero-eyebrow {
        display: inline-flex;
        align-items: center;
        background: #fff;
        color: #c2410c;
        font-size: 11.5px;
        font-weight: 800;
        padding: 6px 14px;
        border-radius: 999px;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        width: max-content;
        border: 1px solid #fed7aa;
    }
    .hqd-sp-hero-headline {
        font-size: clamp(28px, 2.6vw, 38px);
        font-weight: 900;
        color: #0d1b40;
        line-height: 1.1;
        margin: 0;
        letter-spacing: -0.8px;
        font-family: 'Outfit', 'Inter', sans-serif;
    }
    .hqd-sp-hero-sub {
        font-size: 14px;
        color: #475569;
        margin: 0;
        line-height: 1.5;
        max-width: 420px;
    }
    .hqd-sp-hero-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #0d1b40;
        color: #fff;
        font-size: 13.5px;
        font-weight: 700;
        padding: 11px 22px;
        border-radius: 10px;
        text-decoration: none;
        width: max-content;
        margin-top: 4px;
        box-shadow: 0 4px 12px rgba(13,27,64,0.18);
        transition: background .15s, transform .12s, box-shadow .15s;
        font-family: 'Outfit', 'Inter', sans-serif;
    }
    .hqd-sp-hero-cta:hover { background: #1a237e; color: #fff; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(13,27,64,0.28); }
    .hqd-sp-hero-right {
        background-size: cover;
        background-position: center;
        background-color: #f1f5f9;
    }
    .hqd-sp-hero-right--empty {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 72px;
        color: #cbd5e1;
    }

    /* Section header (shared by all blocks) — matches the rhythm used on
       cart / top-picks / brand pages: 28px gap above, 18px font, 12px below */
    .hqd-sp-section { margin-top: 28px; }
    .hqd-sp-section-hd {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 12px;
    }
    .hqd-sp-section-title {
        font-size: 18px;
        font-weight: 800;
        color: #0d1b40;
        margin: 0;
        font-family: 'Outfit', 'Inter', sans-serif;
        letter-spacing: -0.3px;
    }
    .hqd-sp-section-sub {
        font-size: 13px;
        color: #64748b;
        margin: 4px 0 0;
    }
    .hqd-sp-section-meta {
        font-size: 13px;
        color: #64748b;
        font-weight: 500;
    }

    /* Brands strip — small square tiles in a horizontal scroller. */
    .hqd-sp-brands-row {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-behavior: smooth;
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 transparent;
        padding: 4px 0 10px;
        -webkit-overflow-scrolling: touch;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    }
    .hqd-sp-brands-row::-webkit-scrollbar { height: 6px; }
    .hqd-sp-brands-row::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
    .hqd-sp-brand-tile {
        flex: 0 0 auto;
        background: #fff;
        border: 1px solid #eef0f5;
        border-radius: 14px;
        width: 110px;
        height: 110px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 14px;
        text-decoration: none;
        color: #0d1b40;
        font-weight: 700;
        font-size: 13px;
        text-align: center;
        line-height: 1.25;
        transition: border-color .15s, transform .15s, box-shadow .15s;
    }
    .hqd-sp-brand-tile:hover {
        border-color: #cbd5e1;
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(15,23,42,0.08);
    }
    .hqd-sp-brand-tile img { max-height: 60px; max-width: 90%; object-fit: contain; }

    /* Category pills */
    .hqd-sp-cat-pills {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }
    .hqd-sp-cat-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 999px;
        padding: 8px 16px 8px 8px;
        text-decoration: none;
        color: #0d1b40;
        font-size: 13.5px;
        font-weight: 600;
        transition: all .15s;
    }
    .hqd-sp-cat-pill:hover { border-color: #1a237e; color: #1a237e; }
    .hqd-sp-cat-pill.is-active { background: #0d1b40; color: #fff; border-color: #0d1b40; }
    .hqd-sp-cat-thumb {
        width: 28px; height: 28px;
        border-radius: 50%;
        background: #f1f5f9;
        overflow: hidden;
        display: inline-flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }
    .hqd-sp-cat-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .hqd-sp-cat-pill.is-active .hqd-sp-cat-thumb { background: rgba(255,255,255,0.18); }
    .hqd-sp-cat-pill:not(:has(.hqd-sp-cat-thumb)) { padding-left: 16px; }
    .hqd-sp-cat-count {
        font-size: 11px;
        font-weight: 700;
        background: #f1f5f9;
        color: #64748b;
        padding: 2px 8px;
        border-radius: 999px;
    }
    .hqd-sp-cat-pill.is-active .hqd-sp-cat-count { background: rgba(255,255,255,0.18); color: #fff; }

    /* Featured products — single horizontally-scrollable strip of small cards */
    .hqd-sp-featured-row {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scroll-behavior: smooth;
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 transparent;
        padding: 4px 0 10px;
        -webkit-overflow-scrolling: touch;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    }
    .hqd-sp-featured-row::-webkit-scrollbar { height: 6px; }
    .hqd-sp-featured-row::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
    .hqd-sp-featured-card {
        flex: 0 0 auto;
        width: 168px;
        background: #fff;
        border: 1px solid #eef0f5;
        border-radius: 12px;
        overflow: hidden;
        text-decoration: none;
        color: #0d1b40;
        transition: transform .15s, box-shadow .15s, border-color .15s;
        display: flex;
        flex-direction: column;
    }
    .hqd-sp-featured-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(15,23,42,0.08);
        border-color: #cbd5e1;
    }
    .hqd-sp-featured-img {
        position: relative;
        aspect-ratio: 1 / 1;
        background: #f8fafc;
        overflow: hidden;
    }
    .hqd-sp-featured-img img {
        width: 100%; height: 100%;
        object-fit: contain;
        padding: 10px;
        transition: transform .25s;
    }
    .hqd-sp-featured-card:hover .hqd-sp-featured-img img { transform: scale(1.04); }
    .hqd-sp-featured-off {
        position: absolute;
        top: 8px; left: 8px;
        background: #16a34a;
        color: #fff;
        font-size: 10px;
        font-weight: 800;
        padding: 3px 7px;
        border-radius: 5px;
        z-index: 2;
    }
    .hqd-sp-featured-body { padding: 10px 12px 12px; }
    .hqd-sp-featured-name {
        font-size: 12.5px;
        font-weight: 600;
        margin: 0 0 6px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.3;
        min-height: 32px;
    }
    .hqd-sp-featured-price-row { display: flex; align-items: baseline; gap: 6px; }
    .hqd-sp-featured-price { font-size: 14px; font-weight: 800; color: #0d1b40; }
    .hqd-sp-featured-orig  { font-size: 11.5px; color: #94a3b8; text-decoration: line-through; }

    /* Mid banners (3 cards) */
    .hqd-sp-banners {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        margin-top: 36px;
    }
    .hqd-sp-banner-card {
        position: relative;
        aspect-ratio: 5 / 3;
        background: linear-gradient(135deg, #1a237e 0%, #312e81 100%);
        background-size: cover;
        background-position: center;
        border-radius: 16px;
        overflow: hidden;
        text-decoration: none;
        transition: transform .18s, box-shadow .18s;
        display: block;
    }
    .hqd-sp-banner-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(15,23,42,0.18); }
    .hqd-sp-banner-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
        color: #fff;
        padding: 22px 24px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: 4px;
    }
    .hqd-sp-banner-overlay strong {
        font-size: 18px;
        font-weight: 800;
        font-family: 'Outfit', 'Inter', sans-serif;
        line-height: 1.2;
        text-shadow: 0 2px 6px rgba(0,0,0,0.4);
    }
    .hqd-sp-banner-overlay span {
        font-size: 12.5px;
        font-weight: 600;
        opacity: 0.92;
        text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    }

    /* Main product grid */
    .hqd-sp-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 14px;
    }
    @media (max-width: 1280px) { .hqd-sp-grid { grid-template-columns: repeat(4, 1fr); } }
    @media (max-width: 1100px) { .hqd-sp-grid { grid-template-columns: repeat(3, 1fr); } }
    .hqd-sp-card {
        background: #fff;
        border: 1px solid #eef0f5;
        border-radius: 14px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        cursor: pointer;
        transition: transform .15s, box-shadow .15s, border-color .15s;
    }
    .hqd-sp-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(15,23,42,0.08);
        border-color: #cbd5e1;
    }
    .hqd-sp-card-img {
        position: relative;
        aspect-ratio: 1 / 1;
        background: #f8fafc;
        overflow: hidden;
    }
    .hqd-sp-card-img img {
        width: 100%; height: 100%;
        object-fit: contain;
        padding: 14px;
        transition: transform .25s;
    }
    .hqd-sp-card:hover .hqd-sp-card-img img { transform: scale(1.05); }
    .hqd-sp-card-off {
        position: absolute;
        top: 10px; left: 10px;
        background: #16a34a;
        color: #fff;
        font-size: 11px;
        font-weight: 800;
        padding: 4px 9px;
        border-radius: 6px;
        z-index: 2;
    }
    .hqd-sp-card-body {
        padding: 12px 14px 14px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        flex: 1;
    }
    .hqd-sp-card-name {
        font-size: 13px;
        font-weight: 600;
        color: #0d1b40;
        margin: 0;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 36px;
    }
    .hqd-sp-card-price-row {
        display: flex;
        align-items: baseline;
        gap: 6px;
        flex-wrap: wrap;
    }
    .hqd-sp-card-price { font-size: 15px; font-weight: 800; color: #0d1b40; }
    .hqd-sp-card-orig  { font-size: 12px; color: #94a3b8; text-decoration: line-through; }
    .hqd-sp-card-rating {
        margin-left: auto;
        font-size: 11px;
        font-weight: 700;
        color: #f59e0b;
    }
    .hqd-sp-card-cta {
        margin-top: auto;
        text-align: center;
        background: transparent;
        color: #0d1b40;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        padding: 8px 10px;
        font-size: 12.5px;
        font-weight: 700;
        text-decoration: none;
        transition: background .15s, border-color .15s, color .15s;
    }
    .hqd-sp-card:hover .hqd-sp-card-cta { background: #0d1b40; color: #fff; border-color: #0d1b40; }

    /* Load More — replaces classic pagination on the shop grid */
    .hqd-sp-load-more-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-top: 28px;
    }
    .hqd-sp-load-more-status {
        font-size: 13px;
        color: #64748b;
        margin: 0;
        font-weight: 500;
    }
    .hqd-sp-load-more-status strong { color: #0d1b40; font-weight: 700; }
    .hqd-sp-load-more-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #0d1b40;
        color: #fff;
        font-size: 13.5px;
        font-weight: 700;
        padding: 12px 26px;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        font-family: 'Outfit', 'Inter', sans-serif;
        box-shadow: 0 4px 14px rgba(13,27,64,0.18);
        transition: background .15s, transform .12s, box-shadow .15s, opacity .15s;
        position: relative;
    }
    .hqd-sp-load-more-btn:hover {
        background: #1a237e;
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(13,27,64,0.26);
    }
    .hqd-sp-load-more-btn:active { transform: translateY(0); }
    .hqd-sp-load-more-btn:disabled { opacity: 0.7; cursor: wait; transform: none; }
    .hqd-sp-load-more-spinner {
        display: none;
        width: 14px; height: 14px;
        border-radius: 50%;
        border: 2px solid rgba(255,255,255,0.4);
        border-top-color: #fff;
        animation: hqd-sp-spin 0.7s linear infinite;
    }
    .hqd-sp-load-more-btn.is-loading .hqd-sp-load-more-spinner { display: inline-block; }
    .hqd-sp-load-more-btn.is-loading svg:not(.hqd-sp-load-more-spinner) { display: none; }
    @keyframes hqd-sp-spin { to { transform: rotate(360deg); } }

    /* Empty state */
    .hqd-sp-empty {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        padding: 60px 28px;
        text-align: center;
        max-width: 520px;
        margin: 0 auto;
    }
    .hqd-sp-empty-ico { font-size: 48px; margin-bottom: 14px; }
    .hqd-sp-empty h3 { font-size: 20px; color: #0d1b40; margin: 0 0 8px; font-family: 'Outfit', sans-serif; }
    .hqd-sp-empty p  { font-size: 13.5px; color: #64748b; margin: 0 0 18px; line-height: 1.5; }
    .hqd-sp-empty-cta {
        display: inline-block;
        background: #0d1b40;
        color: #fff;
        padding: 10px 22px;
        border-radius: 8px;
        font-weight: 700;
        font-size: 13.5px;
        text-decoration: none;
    }

    /* Trust signals strip at the bottom */
    .hqd-sp-trust {
        margin-top: 40px;
        background: #fff;
        border: 1px solid #eef0f5;
        border-radius: 14px;
        padding: 18px 22px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
    .hqd-sp-trust-item {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        font-weight: 600;
        color: #0d1b40;
    }
    .hqd-sp-trust-ico {
        width: 36px; height: 36px;
        border-radius: 50%;
        background: #f0fdf4;
        color: #16a34a;
        display: inline-flex;
        align-items: center; justify-content: center;
        flex-shrink: 0;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
 * Out-of-Stock visual treatment (desktop)
 * Same .hq-oos contract as mobile — single class drives image grayscale,
 * disabled action buttons, and the centered "Out of Stock" badge.
 * ────────────────────────────────────────────────────────────────────── */
.hq-oos { position: relative; }

.hq-oos .hqd-p-image img,
.hq-oos .hqd-bs-p-img img,
.hq-oos .hqd-sp-card-img img,
.hq-oos .hq-card-image img,
.hq-oos img.hq-product-img {
    filter: grayscale(1) brightness(0.93);
    -webkit-filter: grayscale(1) brightness(0.93);
    opacity: 0.88;
    transition: filter 0.2s ease;
}

.hq-oos .hqd-cp-badge,
.hq-oos .hqd-bs-p-badge,
.hq-oos .hqd-sp-card-off {
    opacity: 0.45;
    filter: grayscale(1);
}

.hq-oos-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(20, 20, 20, 0.82);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    padding: 7px 14px;
    border-radius: 4px;
    text-transform: uppercase;
    z-index: 5;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

.hq-oos .hq-wishlist-btn,
.hq-oos .hqd-bs-p-wish,
.hq-oos .hqd-p-wishlist {
    pointer-events: none;
    opacity: 0.35;
    cursor: not-allowed;
}

.hq-oos .hq-add-cart-btn,
.hq-oos .hqd-bs-p-atc,
.hq-oos .hqd-p-add-btn,
.hq-oos .hq-small-add-btn {
    background: #e5e7eb !important;
    color: #6b7280 !important;
    border: 1px solid #d1d5db !important;
    cursor: not-allowed !important;
    pointer-events: none;
    box-shadow: none !important;
    transform: none !important;
}
.hq-oos .hq-add-cart-btn:hover,
.hq-oos .hqd-bs-p-atc:hover,
.hq-oos .hqd-p-add-btn:hover,
.hq-oos .hq-small-add-btn:hover {
    background: #e5e7eb !important;
    color: #6b7280 !important;
    transform: none !important;
}

.hq-oos .hq-quantity-selector { display: none !important; }

/* Suppress the hover-rise effect on shop cards when OOS */
.hqd-sp-card.hq-oos:hover .hqd-sp-card-img img,
.hqd-p-card.hq-oos:hover .hqd-p-image img {
    transform: none !important;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Desktop non-serviceable pincode state (mirrors mobile + serviceable pincodes)
 * ────────────────────────────────────────────────────────────────────── */
.hqd-noservice {
    width: 100%;
    background: #fff;
    min-height: 60vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 64px 20px 96px;
    box-sizing: border-box;
}
.hqd-noservice-inner {
    max-width: 560px;
    width: 100%;
    text-align: center;
}
.hqd-noservice-emoji { font-size: 64px; line-height: 1; display: block; }
.hqd-noservice-title {
    margin: 22px 0 10px;
    font-size: 26px;
    font-weight: 800;
    color: #0A2240;
    line-height: 1.25;
    letter-spacing: 0.2px;
}
.hqd-noservice-sub { font-size: 15px; color: #64748b; margin: 0 0 24px; }
.hqd-noservice-sub strong { color: #0A2240; }
.hqd-noservice-btn {
    background: #0A2240;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 13px 30px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.hqd-noservice-btn:hover { background: #13315c; }
/* Serviceable-pincodes box on desktop (self-contained so it doesn't depend on quick.css) */
.hqd-noservice .hq-noservice-pins {
    margin: 30px auto 0;
    max-width: 460px;
    background: #f8fafc;
    border: 1px solid #e8edf4;
    border-radius: 14px;
    padding: 16px 18px;
    text-align: center;
}
.hqd-noservice .hq-noservice-pins-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 11px;
}
.hqd-noservice .hq-noservice-pins-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7px 9px;
    line-height: 1.6;
}
.hqd-noservice .hq-noservice-pin { font-size: 14px; font-weight: 700; color: #0A2240; white-space: nowrap; }
.hqd-noservice .hq-noservice-pins-sep { color: #cbd5e1; font-weight: 400; user-select: none; }