/* ===========================================================================
   THE SLOW DRAW — GLOBAL SHOP & ARCHIVE STYLES
   Revision 2026-06-09
   =========================================================================== */

/* ---------------------------------------------------------------------------
   CSS CUSTOM PROPERTIES
   Declared on :root so archive, brand, shop, and category pages inherit them.
   On the homepage, front-page.php redeclares the same values under .sd-home
   (higher specificity) — no visual difference, just redundancy for safety.
   --------------------------------------------------------------------------- */
:root {
    --sdh-bg:             #ffffff;
    --sdh-bg-cream-50:    #F8F8F8;
    --sdh-bg-cream-100:   #F0F0F0;
    --sdh-bg-cream-150:   #E8E8E8;
    --sdh-bg-white:       #FFFFFF;

    --sdh-ink-900:        #111827;
    --sdh-ink-800:        #111827;
    --sdh-ink-700:        #374151;
    --sdh-ink-500:        #4B5563;
    --sdh-ink-400:        #6B7280;
    --sdh-ink-300:        #9CA3AF;

    --sdh-brass:          #c9a45a;
    --sdh-brass-deep:     #7a4f1c;
    --sdh-brass-bg-10:    rgba(201, 164, 90, 0.10);
    --sdh-brass-bg-18:    rgba(201, 164, 90, 0.18);
    --sdh-brass-border-28:rgba(201, 164, 90, 0.28);

    --sdh-border-100:     #E8EAED;
    --sdh-border-150:     #D8DDE3;

    --sdh-radius-pill:    999px;
    --sdh-radius-card:    clamp(20px, 2vw, 26px);
    --sdh-radius-shell:   clamp(1.7rem, 2.6vw, 2.7rem);

    --sdh-shadow-rest:    0 4px 20px rgba(17, 24, 39, 0.04);
    --sdh-shadow-hover:   0 20px 45px rgba(17, 24, 39, 0.08);

    --sdh-ease:           cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------------------------------------------------------------------------
   FILTERS
   --------------------------------------------------------------------------- */
.filter-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.filter-content.open { max-height: 500px; transition: max-height 0.5s ease-in; }
.filter-btn::after { content: '+'; float: right; transition: transform 0.3s; }
.filter-btn.active::after { content: '-'; transform: rotate(180deg); }
#sidebar-filter.active { transform: translateX(0); }
#filter-overlay.active { display: block; opacity: 1; }

@media (max-width: 1024px) {
    #sidebar-filter {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: min(85%, 380px);
        background: white;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        /* Trimmed from 2rem — that plus the inner card's own p-6 (24px) ate
           112px of the 380px drawer before any text started, which is why
           brand names were cropping. Reclaiming space here instead of just
           relying on wrap. */
        padding: 1.25rem;
        /* Top padding is bigger than the other 3 sides on purpose — "FILTERS"
           was rendering clipped against the physical top edge on a real Android
           device. env(safe-area-inset-top) only covers hardware notches (iPhone
           Dynamic Island) and is 0 on Android, so it didn't help there — some
           mobile browsers' address bar can still overlap a fixed top:0 panel
           right when it opens, before any scroll has happened. There's no CSS
           way to detect that overlap, so this is a fixed, generous buffer
           instead of a precise one. Bottom keeps the same notch/home-indicator
           handling as before. */
        padding-top: calc(2.5rem + env(safe-area-inset-top));
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Neutralize "sticky top-24" (Tailwind's position:sticky; top:6rem/96px) —
       those are plain, non-responsive utility classes on the inner card, meant
       for the DESKTOP persistent sidebar (clearing the fixed site header while
       the long page scrolls). They're active at every width, so inside this
       self-contained mobile/tablet drawer they were pinning the whole card
       ~96px down from the drawer's own top — pushing "FILTERS" and everything
       below it mostly or fully out of view on shorter screens. There's no
       fixed header to clear in here, so it's just static positioning instead. */
    #sidebar-filter .sticky.top-24 {
        position: static;
        top: 0;
    }
    /* Inner filter card (".bg-white...p-6") — same space-reclaiming trim as
       the aside padding above. Targeted via the stable, unbracketed parent
       chain instead of the arbitrary-value classes on the card itself. */
    #sidebar-filter .sticky.top-24 > div {
        padding: 1rem;
    }
    /* Extra cushion specifically above "FILTERS" — on top of the drawer's own
       top padding and the sticky-neutralization fix above, this heading row
       still kept showing partially clipped against the very top edge in
       testing. Rather than keep enlarging the outer padding (which pushes
       every side, not just the top), this targets just the heading row with
       its own margin so there's a guaranteed gap before any content starts. */
    .sd-filters-heading-row {
        margin-top: 1.25rem;
    }
    #filter-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        z-index: 45;
    }
    /* Belt-and-suspenders alongside the JS position:fixed body lock in
       toggleMobileFilter() — see archive-product.php / taxonomy-product_cat.php /
       taxonomy-product_brand.php. iOS Safari lets background content scroll behind
       a fixed-position drawer unless the body itself is pinned. */
    body.drawer-open {
        overflow: hidden;
    }
    /* "Close filters" X button — was 32x32px (Tailwind w-8 h-8), under Apple's
       44x44px minimum tap target. w-11/h-11 don't exist in the precompiled
       Tailwind build, so sized here instead (same load-order override pattern
       as the sidebar width above). */
    button[aria-label="Close filters"] {
        width: 44px;
        height: 44px;
    }
    /* Brand names were truncating to "Davidoff Co…" / "VegaFina C…" in the
       narrower off-canvas drawer — wrap to 2 lines instead of ellipsis-cropping
       (same pattern already used for ACF dimension strings, see MOBILE · meta
       fields below). Desktop sidebar is wide enough (30% split) that names
       fit on one line there, so this is scoped to mobile/tablet only.
       Selector is "#sidebar-filter .sd-shop-brand-name" (not the bare class)
       so its specificity (1,1,0) beats the unconditional base rule at line
       ~290 regardless of source order — !important added on top of that as
       a second guarantee, since this exact property kept visually failing to
       take effect across multiple test rounds despite verified-correct CSS. */
    #sidebar-filter .sd-shop-brand-name {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.25;
    }
}

/* ---------------------------------------------------------------------------
   TABLET-WIDTH DRAWER — iPad-class devices get a much wider drawer than phones
   Tablets (768–1024px) were falling into the same 380px-max phone drawer as a
   360px iPhone — proportionally that's a narrow sliver on a 768–1024px-wide
   screen. This tier overrides just the width for that range — min(65%, 520px)
   instead of min(85%, 380px) — so the drawer reads as a deliberate, modern
   panel rather than a leftover phone width, while still leaving some dimmed
   backdrop visible at the edge (tap-to-close affordance).
   --------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
    #sidebar-filter {
        width: min(65%, 520px);
    }
}

/* ---------------------------------------------------------------------------
   DESKTOP SIDEBAR — independent scroll region
   The filter card is "position: sticky" so it stays pinned while the page
   scrolls, but with a long "Shop by Brands" list it can grow taller than the
   viewport. Capping its height and giving it its own scrollbar means hovering
   the mouse over the sidebar and scrolling moves the filter list, not the
   whole page. Scoped to desktop only — mobile already gets its own full-height
   overflow-y:auto on #sidebar-filter itself (off-canvas panel, see above).
   --------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    /* Sidebar / content split — 29% / 71% — deliberately plain CSS, not a
       Tailwind utility class. This theme's Tailwind file
       (assets/css/style-tailwind.css) is a precompiled/purged static build,
       not a live JIT compiler — arbitrary-value classes like lg:w-[29%] only
       work if they already existed in that file when it was last built,
       otherwise they're silently dead weight. Setting the width here instead
       guarantees it always applies, since this stylesheet is a real file we
       control and it loads after the Tailwind file in wp_head (see
       functions.php enqueue order), so it reliably wins regardless of the
       compiled build's state.
       flex: 0 0 29% locks the sidebar to exactly 29% (no grow, no shrink);
       <main class="flex-1 ..."> (flex: 1 1 0%) then absorbs the remaining
       71% automatically — the two always add up to 100% since there's no
       gap/margin between them in the container. */
    #sidebar-filter {
        width: 29%;
        max-width: 29%;
        flex: 0 0 29%;
    }
    #sidebar-filter .sticky.top-24 {
        max-height: calc(100vh - 8rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--sdh-border-150) transparent;
    }
    #sidebar-filter .sticky.top-24::-webkit-scrollbar {
        width: 6px;
    }
    #sidebar-filter .sticky.top-24::-webkit-scrollbar-track {
        background: transparent;
    }
    #sidebar-filter .sticky.top-24::-webkit-scrollbar-thumb {
        background: var(--sdh-border-150);
        border-radius: 999px;
    }
    #sidebar-filter .sticky.top-24::-webkit-scrollbar-thumb:hover {
        background: var(--sdh-ink-300);
    }
}

/* ---------------------------------------------------------------------------
   SHOP BY BRANDS — modernized brand filter list (logo thumbnail + name + count)
   Used on archive-product.php, taxonomy-product_cat.php, taxonomy-product_brand.php
   Taller than a plain text list, so #brand-opt.open needs a higher max-height
   than the shared .filter-content.open default (500px) to avoid clipping.
   --------------------------------------------------------------------------- */
#brand-opt.open { max-height: 3000px; }

.sd-shop-brand-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: 0.5rem;
}

.sd-shop-brand-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.6rem;
    border-radius: 12px;
    text-decoration: none;
    color: var(--sdh-ink-700);
    background: transparent;
    border: 1px solid transparent;
    transition: background 0.2s var(--sdh-ease), border-color 0.2s var(--sdh-ease), transform 0.2s var(--sdh-ease);
}

.sd-shop-brand-item:hover {
    background: var(--sdh-brass-bg-10);
    border-color: var(--sdh-brass-border-28);
    transform: translateX(2px);
}

.sd-shop-brand-item.is-active {
    background: var(--sdh-brass-bg-18);
    border-color: var(--sdh-brass-border-28);
}

.sd-shop-brand-item.is-active .sd-shop-brand-name {
    color: var(--sdh-brass-deep);
    font-weight: 600;
}

.sd-shop-brand-logo {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--sdh-bg-cream-50);
    border: 1px solid var(--sdh-border-100);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sd-shop-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.sd-shop-brand-logo__fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--sdh-brass-deep);
    background: var(--sdh-brass-bg-10);
    text-transform: uppercase;
}

.sd-shop-brand-name {
    flex: 1 1 auto;
    font-size: 0.92rem;
    line-height: 1.3;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-shop-brand-count {
    flex: 0 0 auto;
    font-size: 0.78rem;
    color: var(--sdh-ink-400);
    background: var(--sdh-bg-cream-100);
    border-radius: var(--sdh-radius-pill);
    padding: 0.1rem 0.5rem;
    min-width: 1.6em;
    text-align: center;
}

/* ---------------------------------------------------------------------------
   SHOP BY BRANDS — grouped sections (World Cigar Collection / Habanos Collection)
   A group is a clickable heading (links to the parent brand's own archive)
   followed by an indented list of its child-brand rows (.sd-shop-brand-item).
   --------------------------------------------------------------------------- */
.sd-shop-brand-group {
    margin-bottom: 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px dashed var(--sdh-border-100);
}

.sd-shop-brand-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.sd-shop-brand-group__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100% !important;
    box-sizing: border-box;
    padding: 0.65rem 1rem;
    border-radius: var(--sdh-radius-pill) !important;
    text-decoration: none;
    color: var(--sdh-ink-700) !important;
    background: var(--sdh-bg-cream-50) !important;
    border: 1px solid var(--sdh-border-100) !important;
    box-shadow: none !important;
    transition: border-color 0.2s var(--sdh-ease), transform 0.2s var(--sdh-ease), box-shadow 0.2s var(--sdh-ease);
    /* Reset native <button> chrome — the World Cigars / Habanos headings
       render as real <button> elements (for the collapsible ones) so
       toggleFilter() can manage focus/aria state, but without this reset
       they inherit the browser's default button font, centered text, and
       native focus ring — which on macOS/Windows renders in the system's
       accent color (can be pink/magenta depending on the user's OS theme,
       not anything we set). Swapped for a deliberate brass focus style below
       instead of just deleting focus indication outright. !important added
       on every color/shape property here and on every state below since
       this exact component kept showing a native pink regardless of the
       unprefixed version — this removes any remaining doubt about a
       higher-specificity or later rule winning instead. */
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    outline: none !important;
    /* Kills the mobile "tap flash" overlay some browsers show on touch —
       another spot a system accent color (incl. pink) could otherwise leak
       through, on top of the focus-ring/active-state fixes below. */
    -webkit-tap-highlight-color: transparent;
}

/* Every interaction state gets an explicit, on-brand value below — hover,
   active (pressed) and focus-visible — so there's no state left for the
   browser to fall back to its own native default for, which is what was
   showing the system accent color (pink, on this machine) instead of our
   palette. */
.sd-shop-brand-group__heading:hover {
    background: var(--sdh-bg-cream-50) !important;
    border-color: var(--sdh-border-150) !important;
    transform: translateY(-1px);
}

.sd-shop-brand-group__heading:active {
    background: var(--sdh-brass-bg-18) !important;
    border-color: var(--sdh-brass-border-28) !important;
    transform: translateY(0);
}

.sd-shop-brand-group__heading:focus-visible {
    background: var(--sdh-bg-cream-50) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px var(--sdh-bg-white), 0 0 0 4px var(--sdh-brass) !important;
}

.sd-shop-brand-group__heading.is-active {
    background: var(--sdh-brass-bg-18);
    border-color: var(--sdh-brass-border-28);
}

.sd-shop-brand-group__heading.is-active .sd-shop-brand-group__title {
    color: var(--sdh-brass-deep);
}

.sd-shop-brand-group__title {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--sdh-ink-700);
}

.sd-shop-brand-group__count {
    flex: 0 0 auto;
    font-size: 0.78rem;
    color: var(--sdh-ink-400);
    background: white;
    border-radius: var(--sdh-radius-pill);
    padding: 0.1rem 0.5rem;
    min-width: 1.6em;
    text-align: center;
}

/* World Cigars / Habanos Cigars headings — collapsible +/- toggle (button
   version only; the plain-link fallback with no children never gets this
   wrapper). Count badge + icon are grouped in their own flex span so
   the heading's own space-between doesn't push them apart from each other. */
.sd-shop-brand-group__end {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.sd-shop-brand-group__toggle-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--sdh-ink-400);
    transition: transform 0.25s var(--sdh-ease), color 0.2s var(--sdh-ease);
}

.sd-shop-brand-group__toggle-icon svg {
    width: 12px;
    height: 12px;
    display: block;
}

/* Chevron points down at rest, rotates to point up when expanded — same
   stroke-based arrow already used for "Cigar Accessories" etc, just rotated,
   so the whole sidebar shares one consistent icon language. */
.sd-shop-brand-group__heading.active .sd-shop-brand-group__toggle-icon {
    transform: rotate(180deg);
    color: var(--sdh-brass-deep);
}

.sd-shop-brand-group__children {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.4rem 0 0.2rem 0.9rem;
    border-left: 2px solid var(--sdh-border-100);
    margin-left: 0.6rem;
}

/* Reusing the shared .filter-content collapse mechanism (max-height:0 by
   default, toggled to .open via toggleFilter()) — but its default 500px
   .open cap is too small for a full brand list, same reasoning as
   #brand-opt.open below. */
.sd-shop-brand-group__children.open {
    max-height: 3000px;
}

.sd-shop-brand-group__children .sd-shop-brand-item {
    padding: 0.4rem 0.5rem;
}

/* ---------------------------------------------------------------------------
   SHOP HEADER CARD
   --------------------------------------------------------------------------- */
.shop-header-card {
    position: relative;
    padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem);
    background: #fff;
    border-radius: clamp(16px, 2vw, 24px);
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
    overflow: hidden;
    border: 1px solid #f0f0f0;
}

.shop-header-card h1 {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    font-weight: 900;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
    line-height: 1.1;
}

.shop-header-card p {
    color: #666;
    max-width: 600px;
    position: relative;
    z-index: 2;
    font-size: clamp(13px, 1.2vw, 14px);
    line-height: 1.6;
    margin-top: clamp(0.5rem, 1vw, 0.75rem);
}

/* Background watermark — brand name as soft overlay behind header text */
.bg-watermark {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Poppins', sans-serif;
    font-size: clamp(6rem, 15vw, 15rem);
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    color: #9b6b28;
    opacity: 0.05;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

@media (max-width: 768px) { .bg-watermark { display: none; } }

/* ---------------------------------------------------------------------------
   PRODUCT GRID & CARD SHELL
   --------------------------------------------------------------------------- */
.archive-products-grid { align-items: stretch; }
.archive-products-grid > * { min-width: 0; }

.archive-product-card {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(180deg, #ffffff 0%, #fcfcfc 100%);
    border: 1px solid #e8eaed;
    border-radius: clamp(20px, 2vw, 26px);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(17, 24, 39, 0.04);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
    backface-visibility: hidden;
}

.archive-product-card:hover {
    transform: translateY(-7px);
    border-color: #d8dde3;
    box-shadow: 0 20px 45px rgba(17, 24, 39, 0.08);
}

/* ---------------------------------------------------------------------------
   BADGES
   --------------------------------------------------------------------------- */
.archive-card-top-left {
    position: absolute;
    top: clamp(8px, 1vw, 12px);
    left: clamp(8px, 1vw, 12px);
    z-index: 12;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.archive-mini-badge,
.archive-top-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: clamp(8px, 0.72vw, 9px);
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.12);
}

.archive-mini-badge--muted {
    background: rgba(243, 244, 246, 0.96);
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

.archive-mini-badge--sale {
    background: #dc2626;
    color: #fff;
    border: 1px solid #dc2626;
}

.archive-top-badge {
    position: absolute;
    top: clamp(8px, 1vw, 12px);
    right: clamp(8px, 1vw, 12px);
    z-index: 12;
    border: 1px solid transparent;
}

.archive-top-badge--premium   { background: #9b6b28; color: #fff; }
.archive-top-badge--bestseller { background: #111827; color: #fff; }
.archive-top-badge--toprated   { background: #14532d; color: #fff; }

.archive-collection-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: min(100%, 220px);
    min-height: 28px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: clamp(8px, 0.72vw, 9px);
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(176, 141, 87, 0.1);
    border: 1px solid rgba(176, 141, 87, 0.28);
    color: #6f4e37;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* ---------------------------------------------------------------------------
   CARD MEDIA & IMAGE
   --------------------------------------------------------------------------- */
.archive-card-media {
    position: relative;
    min-height: clamp(220px, 24vw, 290px);
    padding: clamp(1.1rem, 2vw, 1.35rem);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-bottom: 1px solid #f1f2f4;
    text-decoration: none;
    overflow: hidden;
    cursor: crosshair;
}

.archive-card-image-wrap {
    width: 100%;
    height: clamp(180px, 20vw, 235px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #ffffff;
    overflow: hidden;
}

.archive-product-image {
    max-height: 100%;
    max-width: 100%;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.05));
    transition: transform 0.18s ease-out;
    will-change: transform;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center center;
}

/* ---------------------------------------------------------------------------
   CARD BODY
   --------------------------------------------------------------------------- */
.archive-card-body {
    padding: clamp(0.95rem, 1.8vw, 1.15rem);
    display: flex;
    flex-direction: column;
    gap: clamp(0.65rem, 1.2vw, 0.85rem);
    flex: 1 1 auto;
}

.archive-card-badge-stack { display: flex; justify-content: center; align-items: center; min-height: 32px; }

.archive-product-title {
    margin: 0;
    min-height: calc(1.34em * 2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.34;
    font-size: clamp(11px, 0.95vw, 13px);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #121826;
    text-align: center;
}

.archive-product-title a { color: inherit; text-decoration: none; transition: color 0.25s ease; }
.archive-product-card:hover .archive-product-title a { color: #6f4e37; }

.archive-rating-row { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: -2px; }
.archive-rating-value { font-size: 13px; font-weight: 800; color: #111827; line-height: 1; }
.archive-rating-count { font-size: 12px; font-weight: 600; color: #9ca3af; line-height: 1; }

.archive-product-price {
    text-align: center;
    font-size: clamp(1.02rem, 1.35vw, 1.28rem);
    font-weight: 800;
    line-height: 1.2;
    color: #111827;
    letter-spacing: -0.02em;
    margin-top: 2px;
}

.archive-product-price del { opacity: 0.45; margin-right: 6px; font-weight: 700; }
.archive-product-price ins  { text-decoration: none; color: #111827; }

/* Sale price breakdown */
.archive-product-price__row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 0.8vw, 10px);
    line-height: 1;
}

.archive-product-price__current { font-size: inherit; font-weight: 800; color: #111827; letter-spacing: -0.02em; }

.archive-product-price__off {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: clamp(3px, 0.4vw, 5px) clamp(7px, 0.9vw, 10px);
    border-radius: 999px;
    background: linear-gradient(135deg, #c9a45a 0%, #9b6b28 100%);
    color: #ffffff;
    font-size: clamp(9px, 0.72vw, 10.5px);
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 4px rgba(155, 107, 40, 0.22);
    white-space: nowrap;
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.archive-product-card:hover .archive-product-price__off { transform: translateY(-1px); }

.archive-product-price__mrp {
    margin-top: clamp(3px, 0.4vw, 5px);
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    font-size: clamp(10px, 0.85vw, 11.5px);
    font-weight: 600;
    color: #9ca3af;
    line-height: 1.1;
    letter-spacing: 0.02em;
}

.archive-product-price__mrp-label { font-size: clamp(8px, 0.7vw, 9px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #b0b6bf; }
.archive-product-price__mrp-value { text-decoration: line-through; text-decoration-color: rgba(156, 163, 175, 0.6); text-decoration-thickness: 1px; }
.archive-product-price__mrp-value .woocommerce-Price-amount { color: inherit; font-weight: 600; }

/* ---------------------------------------------------------------------------
   CIGAR AFICIONADO RATING SEAL
   --------------------------------------------------------------------------- */
.archive-card-rating-seal {
    position: absolute;
    bottom: clamp(8px, 1.2vw, 14px);
    right:  clamp(8px, 1.2vw, 14px);
    width:  clamp(44px, 4.8vw, 60px);
    height: clamp(44px, 4.8vw, 60px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 14;
    pointer-events: none;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(135deg, #d4af6f 0%, #c9a45a 35%, #9b6b28 70%, #6f4e37 100%);
    filter: drop-shadow(0 2px 4px rgba(155, 107, 40, 0.35)) drop-shadow(0 4px 12px rgba(17, 24, 39, 0.18));
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
    text-align: center;
    line-height: 1;
    animation: sd-seal-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.archive-card-rating-seal::before {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.20) 100%);
    pointer-events: none;
}

.archive-card-rating-seal__value {
    position: relative;
    z-index: 2;
    font-size: clamp(15px, 1.55vw, 20px);
    font-weight: 900;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 235, 200, 0.18);
}

.archive-card-rating-seal__label {
    position: relative;
    z-index: 2;
    font-size: clamp(5.5px, 0.55vw, 7px);
    font-weight: 700;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    opacity: 0.92;
    margin-top: clamp(1px, 0.2vw, 3px);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}

@keyframes sd-seal-in {
    0%   { opacity: 0; transform: scale(0.6) rotate(-12deg); }
    60%  { opacity: 1; transform: scale(1.08) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

.archive-product-card:hover .archive-card-rating-seal {
    filter: drop-shadow(0 3px 6px rgba(155, 107, 40, 0.42)) drop-shadow(0 6px 16px rgba(17, 24, 39, 0.22));
}

@media (prefers-reduced-motion: reduce) { .archive-card-rating-seal { animation: none; } }

@media (max-width: 480px) {
    .archive-card-rating-seal { bottom: 8px; right: 8px; width: 40px; height: 40px; }
    .archive-card-rating-seal__value { font-size: 13px; }
    .archive-card-rating-seal__label { font-size: 5px; letter-spacing: 0.16em; margin-top: 1px; }
}

/* ---------------------------------------------------------------------------
   CARD ACTION BUTTONS
   --------------------------------------------------------------------------- */
.archive-card-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1vw, 10px);
    padding-top: 6px;
}

.archive-card-btn,
.archive-card-actions a.archive-card-btn,
.archive-card-actions button.archive-card-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: clamp(40px, 3.5vw, 44px);
    padding: clamp(8px, 1vw, 12px) clamp(14px, 1.5vw, 18px);
    margin: 0;
    border-radius: 999px;
    text-decoration: none !important;
    font-size: clamp(9px, 0.72vw, 10px);
    font-weight: 900;
    font-family: "Poppins", sans-serif;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    transition: all 0.25s ease;
    cursor: pointer;
    box-sizing: border-box;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: none !important;
    box-shadow: none;
    overflow: hidden;
    isolation: isolate;
}

.archive-card-actions button.archive-card-btn:focus,
.archive-card-actions a.archive-card-btn:focus { outline: none; box-shadow: none; }

.archive-card-btn--cart,
.archive-card-actions button.archive-card-btn--cart,
.archive-card-actions a.archive-card-btn--cart {
    background: rgba(255, 255, 255, 0.98) !important;
    color: #111827 !important;
    border: 1.5px solid #d1d5db !important;
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.06) !important;
}

.archive-card-btn--cart:hover,
.archive-card-actions button.archive-card-btn--cart:hover,
.archive-card-actions a.archive-card-btn--cart:hover {
    border-color: #111827 !important;
    background: #ffffff !important;
    color: #111827 !important;
}

.archive-card-btn--buy,
.archive-card-actions button.archive-card-btn--buy,
.archive-card-actions a.archive-card-btn--buy {
    background: #111111 !important;
    color: #ffffff !important;
    border: 1.5px solid #111111 !important;
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.12) !important;
}

.archive-card-btn--buy:hover,
.archive-card-actions button.archive-card-btn--buy:hover,
.archive-card-actions a.archive-card-btn--buy:hover {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: #111111 !important;
}

.archive-card-btn--disabled,
.archive-card-actions button.archive-card-btn--disabled,
.archive-card-actions a.archive-card-btn--disabled {
    background: #f3f4f6 !important;
    color: #9ca3af !important;
    border: 1.5px solid #e5e7eb !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

/* Loading spinner state */
.archive-card-btn--cart.loading,
.archive-card-actions button.archive-card-btn--cart.loading,
.archive-card-actions a.archive-card-btn--cart.loading,
.ajax_add_to_cart.loading,
.js-sd-drawer-add-to-cart.loading {
    color: transparent !important;
    text-shadow: none !important;
    border-color: #111827 !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.08) !important;
    pointer-events: none;
}

.archive-card-btn--cart.loading::before,
.archive-card-actions button.archive-card-btn--cart.loading::before,
.archive-card-actions a.archive-card-btn--cart.loading::before,
.ajax_add_to_cart.loading::before,
.js-sd-drawer-add-to-cart.loading::before {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 34px; height: 34px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: radial-gradient(circle, rgba(17, 24, 39, 0.07) 0%, rgba(17, 24, 39, 0.03) 58%, rgba(17, 24, 39, 0) 72%);
    animation: archiveLoaderPulse 1.4s ease-in-out infinite;
    z-index: 1;
}

.archive-card-btn--cart.loading::after,
.archive-card-actions button.archive-card-btn--cart.loading::after,
.archive-card-actions a.archive-card-btn--cart.loading::after,
.ajax_add_to_cart.loading::after,
.js-sd-drawer-add-to-cart.loading::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 18px; height: 18px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    border: 2px solid rgba(17, 24, 39, 0.14);
    border-top-color: #111827;
    border-right-color: #111827;
    animation: archiveCartSpin 0.72s linear infinite;
    z-index: 2;
}

@keyframes archiveCartSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes archiveLoaderPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.75; }
    50%       { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

/* ---------------------------------------------------------------------------
   EMPTY STATE
   --------------------------------------------------------------------------- */
.shop-empty-state {
    margin: clamp(2rem, 4vw, 4rem) 0;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
    background: linear-gradient(180deg, #ffffff 0%, #fcfcfc 100%);
    border: 1px solid #eef0f3;
    border-radius: clamp(20px, 2vw, 28px);
    box-shadow: 0 6px 24px rgba(17, 24, 39, 0.04);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.65rem, 1.2vw, 1rem);
    animation: shopEmptyFadeIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.shop-empty-state__visual { width: clamp(88px, 11vw, 124px); height: clamp(88px, 11vw, 124px); margin-bottom: clamp(0.4rem, 0.8vw, 0.75rem); display: flex; align-items: center; justify-content: center; }
.shop-empty-state__icon { width: 100%; height: 100%; filter: drop-shadow(0 4px 14px rgba(155, 107, 40, 0.10)); }

.shop-empty-state__eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(155, 107, 40, 0.08);
    border: 1px solid rgba(155, 107, 40, 0.22);
    color: #9b6b28;
    font-size: clamp(9px, 0.75vw, 10.5px);
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1;
}

.shop-empty-state__title { margin: 0; font-size: clamp(1.25rem, 2.5vw, 1.85rem); font-weight: 800; color: #111827; letter-spacing: -0.015em; line-height: 1.2; max-width: 32ch; }
.shop-empty-state__description { margin: 0; max-width: 480px; font-size: clamp(0.875rem, 1.1vw, 1rem); line-height: 1.65; color: #6b7280; }

.shop-empty-state__actions { margin-top: clamp(0.9rem, 1.4vw, 1.4rem); display: flex; flex-wrap: wrap; gap: clamp(0.5rem, 1vw, 0.85rem); justify-content: center; }

.shop-empty-state__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: clamp(0.65rem, 1vw, 0.875rem) clamp(1.35rem, 2vw, 1.85rem);
    font-size: clamp(0.7rem, 0.85vw, 0.8rem);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 999px;
    border: 1.5px solid transparent;
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), background 0.24s ease, color 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
    cursor: pointer;
}

.shop-empty-state__btn--primary { background: #111111; color: #ffffff; box-shadow: 0 8px 20px rgba(17, 24, 39, 0.14); }
.shop-empty-state__btn--primary:hover { background: #9b6b28; color: #ffffff; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(155, 107, 40, 0.24); }
.shop-empty-state__btn--secondary { background: #ffffff; color: #111111; border-color: #d1d5db; }
.shop-empty-state__btn--secondary:hover { border-color: #111111; transform: translateY(-2px); }

@keyframes shopEmptyFadeIn { 0% { opacity: 0; transform: translateY(10px) scale(0.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
    .shop-empty-state { animation: none; }
    .shop-empty-state__btn:hover { transform: none; }
}

@media (max-width: 480px) {
    .shop-empty-state__title { font-size: 1.25rem; }
    .shop-empty-state__description { font-size: 0.875rem; }
    .shop-empty-state__actions { flex-direction: column; width: 100%; max-width: 280px; }
    .shop-empty-state__btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
   PAGINATION
   --------------------------------------------------------------------------- */
.modern-pagination { margin-top: clamp(2rem, 4vw, 4rem); }

.modern-pagination ul { display: flex; justify-content: center; align-items: center; gap: clamp(6px, 0.8vw, 10px); list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }

.modern-pagination li a,
.modern-pagination li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(36px, 3vw, 42px);
    height: clamp(36px, 3vw, 42px);
    border-radius: 9999px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #000;
    font-weight: 700;
    transition: all 0.3s ease;
}

.modern-pagination li a:hover,
.modern-pagination li span.current { background: #000; color: #fff; border-color: #000; }

/* ---------------------------------------------------------------------------
   CATEGORY HERO
   --------------------------------------------------------------------------- */
.sd-category-hero {
    position: relative;
    background: radial-gradient(circle at top right, rgba(155, 107, 40, 0.05), transparent 30%), #fff;
    overflow: hidden;
}

.sd-category-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    gap: clamp(24px, 4vw, 60px);
    align-items: center;
}

.sd-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid rgba(155, 107, 40, 0.30); color: #9b6b28; border-radius: 999px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 1rem; }
.sd-hero-title { font-size: clamp(2rem, 5vw, 4rem); font-weight: 900; line-height: 0.95; text-transform: uppercase; margin-bottom: 1rem; }
.sd-hero-title span { color: #9b6b28; }
.sd-hero-copy { font-size: clamp(13px, 1.1vw, 15px); line-height: 1.8; color: #575757; max-width: 600px; }
.sd-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.5rem; }
.sd-hero-meta span { background: #fcfbf9; border: 1px solid #ece7df; border-radius: 999px; padding: 8px 14px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }

.sd-hero-visual { position: relative; background: #fff; border: 1px solid rgba(0,0,0,0.05); border-radius: 24px; padding: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.03); min-height: 300px; display: flex; align-items: center; justify-content: center; z-index: 2; }
.sd-hero-visual img { max-width: 100%; height: auto; object-fit: contain; }

.sd-watermark { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); width: 100%; font-size: clamp(3rem, 12vw, 12rem); font-weight: 900; line-height: 0.7; opacity: 0.03; pointer-events: none; user-select: none; white-space: nowrap; text-align: center; z-index: 0; letter-spacing: -0.05em; text-transform: uppercase; }

@media (max-width: 1024px) {
    .sd-category-grid { grid-template-columns: 1fr; text-align: center; }
    .sd-hero-copy, .sd-hero-meta { margin-left: auto; margin-right: auto; justify-content: center; }
    .sd-watermark { font-size: clamp(3rem, 20vw, 8rem); top: 50%; }
}

/* Tablet only — desktop grid keeps the visual column narrow on its own;
   mobile's full-width column is narrow enough that no cap is needed. */
@media (max-width: 1024px) and (min-width: 768px) {
    .sd-hero-visual { max-width: 280px; margin: 0 auto; }
}

/* ---------------------------------------------------------------------------
   ARCHIVE META GRID — watch-dial style
   --------------------------------------------------------------------------- */
.sd-arch-meta {
    display: grid;
    gap: 0;
    margin-top: auto;
    padding-block: clamp(9px, 1.3vw, 13px);
    border-top:    1px solid rgba(176, 141, 87, 0.28);
    border-bottom: 1px solid rgba(176, 141, 87, 0.28);
    width: 100%;
    align-self: stretch;
}

.sd-arch-meta--2col { grid-template-columns: repeat(2, 1fr); }
.sd-arch-meta--solo { grid-template-columns: 1fr; }

.sd-arch-meta__item {
    padding: clamp(3px, 0.5vw, 5px) clamp(6px, 1vw, 10px);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(3px, 0.4vw, 4px);
    min-height: 0;
}

.sd-arch-meta__item + .sd-arch-meta__item { border-left: 1px solid rgba(176, 141, 87, 0.28); }
.sd-arch-meta__item strong { font-size: clamp(11px, 0.9vw, 13px); color: #111827; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.sd-arch-meta__item span  { font-size: clamp(7.5px, 0.62vw, 9px); color: #9b6b28; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.1; }

@media (max-width: 767px) {
    .sd-arch-meta { padding-block: clamp(7px, 1.8vw, 9px); }
    .sd-arch-meta__item { padding: 1px clamp(3px, 1vw, 5px); }
    .sd-arch-meta__item strong { font-size: 9px; white-space: normal; }
    .sd-arch-meta__item span  { font-size: 7.5px; }
}

/* Legacy meta grid (cigar vertical / accessory / solo) */
.archive-meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.3rem, 0.5vw, 0.5rem); border-top: 1px solid #f2f4f7; padding-top: clamp(0.85rem, 1vw, 1rem); margin-top: 0.1rem; }
.archive-meta-grid--accessory { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; gap: clamp(0.4rem, 0.7vw, 0.6rem); }
.archive-meta-grid--solo { grid-template-columns: minmax(0, 1fr); }

.archive-meta-card { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(2px, 0.3vw, 4px); text-align: center; min-height: clamp(72px, 7.5vw, 82px); padding: clamp(8px, 1vw, 11px) clamp(3px, 0.4vw, 5px); border-radius: clamp(12px, 1.2vw, 14px); border: 1px solid #eef0f3; background: #fafafa; overflow: hidden; }
.archive-meta-icon { font-size: clamp(11px, 1vw, 13px); line-height: 1; color: #6f4e37; }
.archive-meta-label { text-align: center; margin: 0; padding: 0; box-sizing: border-box; max-width: 100%; font-size: clamp(7px, 0.6vw, 8.5px); line-height: 1.15; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #9ca3af; white-space: normal; }
.archive-meta-value { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; min-height: 2.35em; width: 100%; font-size: clamp(9px, 0.78vw, 10.5px); line-height: 1.2; font-weight: 700; color: #374151; letter-spacing: -0.005em; text-align: center; word-break: keep-all; overflow-wrap: break-word; hyphens: none; white-space: normal; }

/* Horizontal pill variant (accessory + solo) */
.archive-meta-grid--accessory .archive-meta-card,
.archive-meta-card--solo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: clamp(8px, 1vw, 12px);
    row-gap: 2px;
    align-items: center;
    justify-items: start;
    text-align: left;
    min-height: clamp(56px, 5.5vw, 64px);
    padding: clamp(10px, 1.2vw, 14px) clamp(12px, 1.4vw, 16px);
    gap: 0;
}

.archive-meta-grid--accessory .archive-meta-card .archive-meta-icon,
.archive-meta-card--solo .archive-meta-icon { grid-column: 1; grid-row: 1 / -1; font-size: clamp(15px, 1.4vw, 18px); align-self: center; }
.archive-meta-grid--accessory .archive-meta-card .archive-meta-label,
.archive-meta-card--solo .archive-meta-label { grid-column: 2; grid-row: 1; text-align: left; font-size: clamp(7px, 0.65vw, 9px); letter-spacing: 0.10em; }
.archive-meta-grid--accessory .archive-meta-card .archive-meta-value,
.archive-meta-card--solo .archive-meta-value { grid-column: 2; grid-row: 2; display: flex; justify-content: flex-start; align-items: flex-start; min-height: 0; width: 100%; font-size: clamp(10px, 0.9vw, 11.5px); line-height: 1.25; font-weight: 800; color: #111827; text-align: left; white-space: normal; word-break: keep-all; overflow-wrap: break-word; hyphens: none; }

/* Solo (Zippo) card refined */
.archive-meta-card--solo { padding: clamp(14px, 1.7vw, 18px) clamp(18px, 2.1vw, 22px); min-height: clamp(68px, 7vw, 78px); column-gap: clamp(14px, 1.6vw, 18px); row-gap: clamp(3px, 0.5vw, 5px); background: linear-gradient(180deg, #fbfaf8 0%, #f7f5f1 100%); border: 1px solid #ede7dc; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); transition: border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.archive-product-card:hover .archive-meta-card--solo { border-color: #d9c9a3; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 4px rgba(155, 107, 40, 0.08); }
.archive-meta-card--solo .archive-meta-icon { font-size: clamp(22px, 2vw, 26px); line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.archive-meta-card--solo .archive-meta-label { font-size: clamp(8px, 0.75vw, 10px); letter-spacing: 0.12em; color: #9a7842; font-weight: 700; margin-bottom: 1px; }
.archive-meta-card--solo .archive-meta-value { font-size: clamp(12px, 1.05vw, 13.5px); line-height: 1.25; font-weight: 800; color: #1f2937; letter-spacing: -0.005em; }

/* ---------------------------------------------------------------------------
   INTENSITY DOTS
   --------------------------------------------------------------------------- */
.archive-intensity-dots { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-height: 0; max-width: 100%; flex-wrap: nowrap; padding: 1px 0; box-sizing: border-box; }
.archive-intensity-dots span { width: 6px; height: 6px; border-radius: 999px; background: #e5e7eb; display: inline-block; flex-shrink: 0; transition: background 0.28s cubic-bezier(0.22, 1, 0.36, 1), transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.archive-meta-grid--accessory .archive-intensity-dots,
.archive-meta-card--solo .archive-intensity-dots { justify-content: flex-start; }
.archive-intensity-dots span.is-on { background: linear-gradient(135deg, #8b6437 0%, #6f4e37 100%); }
.archive-product-card:hover .archive-intensity-dots span.is-on { background: linear-gradient(135deg, #c9a45a 0%, #9b6b28 100%); transform: translateY(-0.5px); }

@media (prefers-reduced-motion: reduce) {
    .archive-intensity-dots span { transition: none; }
    .archive-product-card:hover .archive-intensity-dots span.is-on { transform: none; }
}

/* ---------------------------------------------------------------------------
   BUY HOVER OVERLAY
   --------------------------------------------------------------------------- */
.archive-card-buy-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; z-index: 5; background: transparent; }

@media (hover: hover) and (pointer: fine) {
    .archive-product-card:hover .archive-card-buy-overlay { opacity: 1; }
}

.archive-card-buy-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: clamp(10px, 1.1vw, 13px) clamp(20px, 1.8vw, 26px);
    background: #ffffff;
    color: #111827;
    border: 1.5px solid #111827;
    border-radius: 999px;
    font-family: inherit;
    font-size: clamp(10px, 0.8vw, 11.5px);
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
    min-width: 44px;
    box-shadow: 0 8px 22px rgba(17, 24, 39, 0.20);
    transition: background 0.25s ease, color 0.25s ease, transform 0.18s ease;
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .archive-product-card:hover .archive-card-buy-pill { pointer-events: auto; }
    .archive-card-buy-pill:hover { background: #111827; color: #ffffff; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(17, 24, 39, 0.28); }
}

/* ---------------------------------------------------------------------------
   RESPONSIVE — TABLET + MOBILE
   --------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .archive-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.4rem, 1vw, 0.55rem); padding-top: clamp(0.8rem, 1.2vw, 1rem); }
    .archive-meta-grid > .archive-meta-card:nth-child(3) { grid-column: 1 / -1; }
    .archive-meta-card { min-height: clamp(64px, 8vw, 76px); padding: clamp(9px, 1.4vw, 12px) clamp(8px, 1.4vw, 12px); gap: clamp(3px, 0.5vw, 4px); border-radius: clamp(11px, 1.4vw, 13px); }
    .archive-meta-icon { font-size: clamp(12px, 1.5vw, 14px); }
    .archive-meta-label { font-size: clamp(7.5px, 1vw, 9px); letter-spacing: 0.08em; line-height: 1.15; }
    .archive-meta-value { font-size: clamp(10.5px, 1.3vw, 12.5px); line-height: 1.25; }
    .archive-intensity-dots { gap: clamp(3.5px, 0.5vw, 4.5px); min-height: 2.35em; }
    .archive-intensity-dots span { width: clamp(6.5px, 0.85vw, 7.5px); height: clamp(6.5px, 0.85vw, 7.5px); }
    .archive-meta-grid--accessory { grid-template-columns: minmax(0, 1fr); gap: clamp(0.4rem, 0.8vw, 0.55rem); }
    .archive-meta-grid--accessory > .archive-meta-card:nth-child(3) { grid-column: auto; }
    .archive-meta-grid--accessory .archive-meta-card { min-height: clamp(52px, 6vw, 58px); padding: clamp(9px, 1.4vw, 11px) clamp(11px, 1.7vw, 14px); column-gap: clamp(9px, 1.3vw, 11px); }
    .archive-meta-grid--solo { grid-template-columns: minmax(0, 1fr); }
    .archive-meta-card--solo { min-height: clamp(62px, 7.5vw, 70px); padding: clamp(13px, 1.8vw, 15px) clamp(16px, 2vw, 18px); column-gap: clamp(12px, 1.6vw, 15px); row-gap: clamp(3px, 0.5vw, 4px); }
    .archive-meta-card--solo .archive-meta-icon { font-size: clamp(20px, 2.2vw, 24px); }
    .archive-meta-card--solo .archive-meta-label { font-size: clamp(8px, 0.95vw, 9.5px); letter-spacing: 0.11em; }
    .archive-meta-card--solo .archive-meta-value { font-size: clamp(11.5px, 1.25vw, 12.5px); }
}

@media (max-width: 480px) {
    .archive-meta-grid { gap: 0.35rem; padding-top: 0.75rem; }
    .archive-meta-card { min-height: 60px; padding: 8px 9px; gap: 2.5px; border-radius: 10px; }
    .archive-meta-icon { font-size: 12px; }
    .archive-meta-label { font-size: 7.5px; letter-spacing: 0.06em; line-height: 1.1; }
    .archive-meta-value { font-size: 10px; line-height: 1.22; min-height: 2.2em; }
    .archive-intensity-dots { gap: 3px; }
    .archive-intensity-dots span { width: 6px; height: 6px; }
    .archive-meta-grid--accessory .archive-meta-card { min-height: 50px; padding: 7px 11px; column-gap: 9px; }
    .archive-meta-grid--accessory .archive-meta-card .archive-meta-icon { font-size: 13px; }
    .archive-meta-grid--accessory .archive-meta-card .archive-meta-value { font-size: 10px; line-height: 1.2; }
    .archive-meta-card--solo { min-height: 60px; padding: 12px 15px; column-gap: 12px; row-gap: 3px; }
    .archive-meta-card--solo .archive-meta-icon { font-size: 20px; }
    .archive-meta-card--solo .archive-meta-label { font-size: 8px; letter-spacing: 0.1em; margin-bottom: 0; }
    .archive-meta-card--solo .archive-meta-value { font-size: 11.5px; line-height: 1.22; font-weight: 800; }
    .archive-meta-grid--solo { max-width: 88%; margin-left: auto; margin-right: auto; }
}

/* ---------------------------------------------------------------------------
   SKELETON LOADER
   --------------------------------------------------------------------------- */
@keyframes archiveSkeletonSweep {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.archive-product-card .archive-skel {
    position: absolute;
    inset: 0;
    z-index: 20;
    border-radius: clamp(20px, 2vw, 26px);
    background: #f9fafb;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.archive-product-card .archive-skel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(176, 141, 87, 0.14) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: archiveSkeletonSweep 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    pointer-events: none;
    z-index: 1;
}

.archive-product-card .archive-skel.is-out { opacity: 0; }
.archive-skel__img { flex: 0 0 clamp(220px, 24vw, 290px); background: #eceef1; width: 100%; border-bottom: 1px solid #f1f2f4; }
.archive-skel__body { flex: 1; padding: clamp(0.95rem, 1.8vw, 1.15rem); display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1vw, 12px); }
.archive-skel__line { background: #e5e7eb; border-radius: 6px; height: clamp(9px, 0.8vw, 11px); }
.archive-skel__line--badge  { width: 72px;  height: 24px; border-radius: 999px; background: #eceef1; }
.archive-skel__line--title1 { width: 85%; }
.archive-skel__line--title2 { width: 58%; }
.archive-skel__line--rating { width: 55px; height: 12px; }
.archive-skel__line--price  { width: 80px; height: clamp(14px, 1.3vw, 17px); }
.archive-skel__meta { width: 100%; margin-top: 2px; }
.archive-skel__meta--cigar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid rgba(176, 141, 87, 0.20); border-bottom: 1px solid rgba(176, 141, 87, 0.20); padding-block: 9px; }
.archive-skel__meta-cell { background: #eceef1; border-radius: clamp(6px, 0.8vw, 9px); margin: clamp(3px, 0.5vw, 5px); height: clamp(28px, 3.5vw, 38px); }
.archive-skel__meta-cell + .archive-skel__meta-cell { border-left: 1px solid rgba(176, 141, 87, 0.14); border-radius: 0 clamp(6px, 0.8vw, 9px) clamp(6px, 0.8vw, 9px) 0; margin-left: 0; }
.archive-skel__meta--accessory { display: flex; flex-direction: column; gap: clamp(5px, 0.6vw, 8px); }
.archive-skel__meta-pill { background: #eceef1; border-radius: clamp(10px, 1.2vw, 13px); border: 1px solid #e5e7eb; height: clamp(52px, 5.5vw, 60px); width: 100%; }
.archive-skel__meta-pill--solo { background: #f1ede6; border: 1px solid #e3d9c8; border-radius: clamp(10px, 1.2vw, 13px); height: clamp(62px, 6.5vw, 72px); width: 100%; }
.archive-skel__actions { width: 100%; display: flex; flex-direction: column; gap: clamp(6px, 0.8vw, 9px); margin-top: 2px; }
.archive-skel__btn { height: clamp(38px, 3.5vw, 43px); border-radius: 999px; width: 100%; }
.archive-skel__btn--cart { background: #eceef1; }
.archive-skel__btn--buy  { background: #e0e2e5; }

@media (prefers-reduced-motion: reduce) { .archive-product-card .archive-skel::after { animation: none; } }

@media (max-width: 991px) {
    .archive-skel__img { flex-basis: clamp(200px, 40vw, 260px); }
    .archive-skel__meta-cell { height: clamp(24px, 3vw, 32px); }
    .archive-skel__meta-pill { height: clamp(48px, 6vw, 56px); }
    .archive-skel__meta-pill--solo { height: clamp(56px, 7vw, 66px); }
}

@media (max-width: 480px) {
    .archive-skel__img { flex-basis: clamp(170px, 46vw, 220px); }
    .archive-skel__meta-cell { height: 22px; }
    .archive-skel__meta-pill { height: 46px; }
    .archive-skel__meta-pill--solo { height: 56px; }
    .archive-skel__btn { height: 36px; }
}

/* ── UNIFIED CARD · .sdh-card (homepage + archive) ── */
/* ============================================================
 * HOMEPAGE INLINE CARD · .sdh-card · premium modern UI
 *
 * Completely isolated from .archive-product-card (shop archive).
 * IMAGE (priority 60%) · INFO (auto-grow, never crops) · viewport-aware.
 * Brass accents, navy ink, cream backgrounds.
 * ============================================================ */
.sdh-card {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	/* Card height scales with viewport so image fills ~65% across all breakpoints */
	min-height: clamp(400px, 34vw, 480px);
	border-radius: clamp(16px, 1.4vw, 22px);
	border: 1px solid var(--sdh-border-100);
	background: #ffffff;                                /* white · was cream gradient, now matches product photo bg */
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.7) inset,
		0 2px 6px rgba(17, 24, 39, 0.04),
		0 8px 20px rgba(17, 24, 39, 0.05);
	/* Allow content to determine size — no clipping if info exceeds 35% */
	overflow: hidden;
	cursor: pointer;
	text-decoration: none !important;
	color: inherit;
	font-family: inherit;
	isolation: isolate;
	position: relative;
	/* Touch: eliminates 300ms tap delay on Android Chrome / Samsung / Firefox Android.
	 * Also removes the ghost blue highlight flash on Android. */
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
	            border-color 0.3s var(--sdh-ease),
	            box-shadow 0.3s var(--sdh-ease);
}
.sdh-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--sdh-brass) 0%, var(--sdh-brass-deep) 50%, var(--sdh-brass) 100%);
	opacity: 0;
	transition: opacity 0.35s var(--sdh-ease);
	z-index: 4;
}
/* ── Real pointer (mouse/trackpad): card lifts + border + shadow on hover ── */
@media (hover: hover) and (pointer: fine) {
	.sdh-card:hover {
		transform: translateY(-6px);
		border-color: var(--sdh-brass);
		box-shadow:
			0 1px 0 rgba(255, 255, 255, 0.85) inset,
			0 4px 14px rgba(201, 164, 90, 0.10),
			0 24px 48px rgba(201, 164, 90, 0.18);
	}
	.sdh-card:hover::before { opacity: 1; }
	.sdh-card:active {
		transform: translateY(-3px) scale(0.998);
	}
}

/* ── Touch / iOS: card must NOT move when Buy Now overlay is revealed ──────────
 * iOS simulates :hover on tap, so without this guard translateY(-6px) fires
 * the instant the user touches the image — the card jumps up, the Buy Now
 * pill shifts with it, and the user's tap lands on empty space.
 * Fix: no Y movement on touch. Visual feedback via .is-img-tapped instead. ── */
@media (hover: none) and (pointer: coarse) {
	.sdh-card:hover {
		transform: none; /* block iOS :hover simulation entirely */
	}
	.sdh-card:active {
		transform: scale(0.98); /* scale-only press feedback — no Y displacement */
	}
	/* Border + shadow + brass bar appear when image is tapped (replaces :hover cues) */
	.sdh-card.is-img-tapped {
		border-color: var(--sdh-brass);
		box-shadow:
			0 1px 0 rgba(255, 255, 255, 0.85) inset,
			0 4px 14px rgba(201, 164, 90, 0.10),
			0 24px 48px rgba(201, 164, 90, 0.18);
	}
	.sdh-card.is-img-tapped::before { opacity: 1; }
}
.sdh-card:focus-visible {
	outline: 2px solid var(--sdh-brass);
	outline-offset: 3px;
}

/* ============================================================
 * MEDIA · 65% target · flex-grows to fill remaining card height
 * after the info block takes its natural size. min-height prevents
 * collapse when card content is taller than expected.
 * White background matches product photo whites exactly — no visible seam.
 * ============================================================ */
.sdh-card__media {
	flex: 1 1 0%;                                         /* grow to fill ~65% of card height */
	min-height: clamp(220px, 21vw, 290px);               /* never collapse below this */
	height: auto;                                         /* driven by flex-grow, not fixed */
	position: relative;
	overflow: hidden;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(10px, 1.6vw, 20px);
}

/* ============================================================
 * PRODUCT IMAGE · fills the fixed container with object-fit: contain
 *
 * width: 100%; height: 100% makes the img element fill the fixed-height
 * container. object-fit: contain scales the actual photo to fit within
 * that space proportionally — no cropping, always centred.
 *
 * Variant sizing is controlled via container padding so the apparent
 * product size feels balanced across cigars, accessories, and lighters.
 * ============================================================ */
.sdh-card__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
	display: block;
	transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	image-rendering: auto;
	image-rendering: high-quality;
}

/* Cigars — tight padding so the photo fills naturally */
.sdh-card--cigar .sdh-card__media {
	padding: clamp(8px, 1.2vw, 14px);
}

/* Accessories — moderate inset so mid-sized objects don't overwhelm */
.sdh-card--accessory:not(.sdh-card--zippo) .sdh-card__media {
	padding: clamp(14px, 2vw, 22px);
}

/* Zippo image stage — fixed height + consistent padding so every lighter
 * renders at exactly the same size regardless of aspect ratio (portrait /
 * landscape / thin). object-fit: contain handles the rest. */
.sdh-card--zippo .sdh-card__media {
	flex: 0 0 clamp(240px, 22vw, 295px);
	height: clamp(240px, 22vw, 295px);
	padding: clamp(20px, 2.5vw, 36px);
	background: #ffffff;
}
.sdh-card--zippo .sdh-card__img {
	max-width: 88%;
	max-height: 88%;
}

/* Zippo meta: always 1 cell (ORIGIN) — explicit 1-col so no empty-column artefacts */
.sdh-card--zippo .sdh-card__meta {
	grid-template-columns: 1fr;
}

/* Hover · image zoom — real pointer only (no zoom on touch/iOS) */
@media (hover: hover) and (pointer: fine) {
	.sdh-card:hover .sdh-card__img {
		transform: scale(1.04);
	}
}

/* ─── Responsive · device-specific media tuning ─── */

/* Tablet */
@media (max-width: 1024px) and (min-width: 768px) {
	.sdh-card__media {
		min-height: clamp(220px, 27vw, 295px);
		height: auto;
	}
	.sdh-card--zippo .sdh-card__media {
		flex: 0 0 clamp(200px, 25vw, 260px);
		height: clamp(200px, 25vw, 260px);
		padding: clamp(18px, 2.5vw, 30px);
	}
}

/* Mobile — image takes more visual prominence */
@media (max-width: 767px) {
	.sdh-card__media {
		min-height: clamp(180px, 48vw, 260px);   /* grows to fill ~65% of taller card */
		height: auto;
		padding: clamp(6px, 2.5vw, 12px);
	}
	.sdh-card--zippo .sdh-card__media {
		padding: clamp(24px, 7vw, 44px);
	}
	.sdh-card--accessory:not(.sdh-card--zippo) .sdh-card__media {
		padding: clamp(10px, 3vw, 18px);
	}
	/* Info block — tighter padding so image/info ratio favours the image */
	.sdh-card__info {
		padding: clamp(8px, 2vw, 12px) clamp(8px, 2vw, 12px) clamp(10px, 2.5vw, 14px);
		gap: clamp(3px, 0.8vw, 5px);
	}
}

/* Narrow card (Vault 2-column grid on mobile) */
@container sdh-card (max-width: 220px) {
	.sdh-card__media {
		min-height: clamp(160px, 44vw, 220px);   /* compact but still ≥65% of narrow card */
		padding: clamp(4px, 1.5vw, 8px);
	}
	.sdh-card--zippo .sdh-card__media {
		padding: clamp(16px, 4.5vw, 30px);
	}
}

/* Brand badge · centered inline pill above the product title
 * (was top-left overlay — moved here to match original card layout) */
.sdh-card__brand {
	display: inline-flex;
	align-self: center;                                   /* centered horizontally in the info block */
	max-width: 100%;
	padding: clamp(5px, 0.7vw, 7px) clamp(10px, 1.2vw, 14px);
	background: linear-gradient(135deg, var(--sdh-brass-bg-18) 0%, var(--sdh-brass-bg-10) 100%);
	border: 1px solid var(--sdh-brass-border-28);
	color: var(--sdh-brass-deep);
	border-radius: var(--sdh-radius-pill);
	font-size: clamp(8.5px, 0.7vw, 10px);
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.1;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: clamp(2px, 0.4vw, 5px);
}

/* Coming Soon badge · top-right */
.sdh-card__soldout {
	position: absolute;
	top: clamp(8px, 1vw, 14px);
	right: clamp(8px, 1vw, 14px);
	padding: clamp(4px, 0.5vw, 6px) clamp(8px, 1vw, 12px);
	background: var(--sdh-ink-900);
	color: #ffffff;
	border-radius: var(--sdh-radius-pill);
	font-size: clamp(8px, 0.65vw, 9.5px);
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	z-index: 3;
	box-shadow: 0 4px 10px rgba(17, 24, 39, 0.20);
}

/* Cigar rating seal · straight hex seal, top-right corner
 * ACF field: card_rating_score (Number, Product post type).
 * Cigars only — value 1-100; blank/0 = no seal.
 * Same hex-clip + gradient language as .archive-card-rating-seal (the
 * bottom-right seal on search/homepage cards), but sized/positioned/labelled
 * independently since it's a different field on a different card template. */
.sdh-card__rating-seal {
	position: absolute;
	top: clamp(4px, 0.8vw, 10px);
	right: clamp(8px, 1.2vw, 16px);
	width: clamp(42px, 4.6vw, 58px);
	height: clamp(42px, 4.6vw, 58px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 4;
	pointer-events: none;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	background: linear-gradient(135deg, #d4af6f 0%, #c9a45a 35%, #9b6b28 70%, #6f4e37 100%);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.20);
	font-family: 'Poppins', sans-serif;
	color: #ffffff;
	text-align: center;
	line-height: 1;
}
.sdh-card__rating-seal__value {
	font-size: clamp(11px, 1.15vw, 15px);
	font-weight: 900;
	letter-spacing: -0.02em;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}
.sdh-card__rating-seal__label {
	font-size: clamp(4.5px, 0.46vw, 5.5px);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.94;
	margin-top: 1px;
	line-height: 1.1;
}
/* "RATED" line above the number — reuses .sdh-card__rating-seal__label's
 * type styling, just flips the margin so it sits above instead of below. */
.sdh-card__rating-seal__label--top {
	margin-top: 0;
	margin-bottom: 1px;
}
@media (max-width: 480px) {
	.sdh-card__rating-seal { width: 38px; height: 38px; }
	.sdh-card__rating-seal__value { font-size: 10px; }
	.sdh-card__rating-seal__label { font-size: 4px; letter-spacing: 0.05em; }
}

/* When a card is both "Coming Soon" and has a rating seal, move Coming
 * Soon to the top-left so the seal never covers it. Scoped with :has()
 * so it only affects cards that actually carry a seal. */
.sdh-card__media:has(.sdh-card__rating-seal) .sdh-card__soldout {
	left: clamp(8px, 1vw, 14px);
	right: auto;
}

/* Very narrow cards (smallest phones, ~320-340px viewport → ~138-150px card
 * on the 2-column mobile grid) — Coming Soon + seal floor sizes collide.
 * Shrink both using a container query tied to the card's own width (same
 * pattern as the existing narrow-card rule for the homepage Vault grid),
 * rather than a viewport media query, so it works regardless of which
 * grid/column layout produced the narrow card. */
@container sdh-card (max-width: 150px) {
	.sdh-card__media:has(.sdh-card__rating-seal) .sdh-card__soldout {
		font-size: 7px;
		padding: 3px 5px;
		letter-spacing: 0.08em;
	}
	.sdh-card__rating-seal {
		width: 32px;
		height: 32px;
	}
	.sdh-card__rating-seal__value { font-size: 8px; }
	.sdh-card__rating-seal__label { font-size: 3px; letter-spacing: 0.03em; }
}

/* Hover Buy Now overlay · centered on image
 * IMPORTANT: overlay itself is `pointer-events: none` ALWAYS — clicks pass through
 * to the underlying card link (PDP) by default. Only the pill itself catches clicks
 * (see .sdh-card__buy-pill rules below). This prevents the "click near the pill
 * accidentally goes to PDP" bug on desktop. */
.sdh-card__buy-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;                           /* no dark tint — pill's white bg + shadow does the work */
	opacity: 0;
	pointer-events: none;                              /* never catches clicks */
	transition: opacity 0.25s var(--sdh-ease);
	z-index: 5;
}
/* Desktop (real pointer) only — guarded so iOS :hover simulation can't interfere */
@media (hover: hover) and (pointer: fine) {
	.sdh-card:hover .sdh-card__buy-overlay,
	.sdh-card:focus-within .sdh-card__buy-overlay {
		opacity: 1;
		/* pointer-events stays none — only the pill catches clicks */
	}
}
.sdh-card__buy-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: clamp(10px, 1.1vw, 13px) clamp(20px, 1.8vw, 26px);
	background: #ffffff;
	color: var(--sdh-ink-900);
	border: 1.5px solid var(--sdh-ink-900);
	border-radius: var(--sdh-radius-pill);
	font-family: inherit;
	font-size: clamp(10px, 0.8vw, 11.5px);
	font-weight: 900;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 8px 22px rgba(17, 24, 39, 0.20);
	transition: background 0.25s var(--sdh-ease), color 0.25s var(--sdh-ease), transform 0.18s var(--sdh-ease);
	min-height: 44px;
	min-width: 44px;
	user-select: none;
	white-space: nowrap;
	touch-action: manipulation;                          /* fires tap instantly on mobile (no 300ms delay) */
	-webkit-tap-highlight-color: transparent;
	pointer-events: none;                                /* default: not clickable (overlay is hidden) */
	position: relative;                                  /* establishes stacking */
	z-index: 1;
}
/* Pill becomes clickable ONLY when card is hovered/focused — desktop only */
@media (hover: hover) and (pointer: fine) {
	.sdh-card:hover .sdh-card__buy-pill,
	.sdh-card:focus-within .sdh-card__buy-pill {
		pointer-events: auto;
	}
}
.sdh-card__buy-pill:hover {
	background: var(--sdh-ink-900);
	color: #ffffff;
	box-shadow: 0 14px 28px rgba(17, 24, 39, 0.28);
}
/* translateY on pill hover — real pointer only, not touch */
@media (hover: hover) and (pointer: fine) {
	.sdh-card__buy-pill:hover {
		transform: translateY(-2px);
	}
}
.sdh-card__buy-pill:focus-visible {
	outline: 2px solid var(--sdh-brass);
	outline-offset: 3px;
}
/* iOS press feedback on buy pill */
.sdh-card__buy-pill:active,
.sdh-card__buy-pill.is-pressing {
	background: var(--sdh-ink-900);
	color: #ffffff;
	transform: scale(0.95);
	box-shadow: 0 6px 16px rgba(17, 24, 39, 0.20);
	transition-duration: 80ms;
}

/* ============================================================
 * MOBILE BUY NOW · original centred pill design (restored)
 *
 * Tap image → overlay fades in → centred "BUY NOW" pill appears.
 * Tap pill → handleBuyClick fires → checkout redirect.
 * ============================================================ */
@media (hover: none) and (pointer: coarse) {

	/* Overlay: centred pill, transparent background */
	.sdh-card__buy-overlay {
		align-items: center;
		justify-content: center;
		padding: 0;
		transition: opacity 0.2s var(--sdh-ease);
	}

	/* Revealed state */
	.sdh-card.is-img-tapped .sdh-card__buy-overlay {
		opacity: 1;
		pointer-events: none;                               /* overlay never catches taps */
	}

	/* Pill: centred, original white pill with dark border */
	.sdh-card__buy-pill {
		min-height: 36px !important;
		padding: 0 14px !important;
		font-size: 9px !important;
		letter-spacing: 0.1em !important;
		font-weight: 900 !important;
		border-radius: var(--sdh-radius-pill) !important;
		border: 1.5px solid var(--sdh-ink-900) !important;
		background: #ffffff !important;
		color: var(--sdh-ink-900) !important;
		box-shadow: 0 4px 14px rgba(17, 24, 39, 0.22) !important;
		min-width: 0 !important;
		width: auto;
		white-space: nowrap;
	}

	.sdh-card.is-img-tapped .sdh-card__buy-pill {
		pointer-events: auto;
	}

	/* Press feedback */
	.sdh-card__buy-pill:active,
	.sdh-card__buy-pill.is-pressing {
		background: var(--sdh-ink-900) !important;
		color: #ffffff !important;
		transform: scale(0.96) !important;
		transition-duration: 80ms !important;
	}
}

/* MOBILE · meta fields — smaller text, tighter cells.
 * Values WRAP up to 2 lines instead of truncating with ellipsis —
 * ACF dimension strings like "120 mm × 20.64 mm" must never be cropped. */
@media (max-width: 767px) {
	.sdh-card__meta {
		padding-block: clamp(7px, 1.8vw, 9px);
	}
	.sdh-card__meta-item {
		padding: 1px clamp(3px, 1vw, 5px);
	}
	.sdh-card__meta-item strong {
		font-size: 9px;
		white-space: normal;          /* allow wrapping */
		word-break: break-word;       /* break long strings if truly needed */
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;        /* cap at 2 lines — never grows taller */
		-webkit-box-orient: vertical;
		line-height: 1.25;
		max-width: 100%;
	}
	.sdh-card__meta-item span {
		font-size: 7px;
		letter-spacing: 0.10em;
	}
}

/* INFO · auto-grow · never crops content */
.sdh-card__info {
	flex: 0 0 auto;
	padding: clamp(12px, 1.4vw, 16px) clamp(12px, 1.4vw, 16px) clamp(14px, 1.6vw, 18px);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: clamp(4px, 0.5vw, 7px);
	border-top: 1px solid var(--sdh-brass-border-28);
	background: #ffffff;
}
.sdh-card__title {
	margin: 0;
	font-size: clamp(13px, 1.05vw, 14.5px);
	font-weight: 800;
	color: var(--sdh-ink-900);
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-align: center;
	text-transform: uppercase;
	/* Always reserve exactly 2 lines so price + meta align
	 * consistently across all cards regardless of title length. */
	min-height: calc(1.25em * 2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sdh-card__price {
	font-size: clamp(14px, 1.15vw, 16px);
	font-weight: 800;
	color: var(--sdh-ink-900);
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}
.sdh-card__price del,
.sdh-card__price .sd-price-mrp {
	color: var(--sdh-ink-300);
	font-weight: 500;
	font-size: 85%;
	margin-right: 5px;
}
.sdh-card__price ins {
	text-decoration: none;
	color: var(--sdh-ink-900);
}

/* Container-query setup — lets the meta + buy-pill adapt when the card is narrow
 * (e.g., 2-up Vault grid on mobile gets a more compact meta layout). The card
 * itself is the container; descendants query its inline-size. */
.sdh-card {
	container-type: inline-size;
	container-name: sdh-card;
}

/* ============================================================
 * META GRID · modern luxury watch-dial style
 *
 * Replaces the old "datasheet boxes" look (one background + border per cell)
 * with a borderless layout: vertical hairline dividers BETWEEN cells, plus a
 * brass hairline above + below the whole meta block. Matches the spec-card
 * aesthetic used by Davidoff product pages and luxury watch brands —
 * refined, scannable, premium.
 *
 *   ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─   ← brass hairline (separates from price)
 *    10-15M  │  ●●●○○  │ 178×22
 *     TIME   │   INT   │  SIZE
 *   ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─   ← brass hairline (separates from Add to Cart)
 *
 * 3 cells for cigars · 2 cells for accessories.
 * gap is 0 so dividers (border-left on cell 2+) sit cleanly on cell edges.
 * ============================================================ */
.sdh-card__meta {
	display: grid;
	grid-template-columns: repeat(2, 1fr);                /* 2 cells: TIME + INTENSITY (SIZE removed) */
	gap: 0;                                               /* dividers via border-left · no gap */
	margin-top: auto;
	padding-block: clamp(10px, 1.4vw, 14px);
	border-block: 1px solid var(--sdh-brass-border-28);   /* brass hairlines top + bottom */
	width: 100%;
	align-self: stretch;
}
/* Accessories: also 2 cells (TYPE + BLADE/CAPACITY) — same as default, no override needed */

/* Single ACF field (e.g. Humidor with TYPE only, no BLADE/CAPACITY) —
 * span all columns so the lone cell is properly centered. */
.sdh-card__meta-item:only-child {
	grid-column: 1 / -1;
	border-left: 0;
	justify-self: center;
	width: 100%;
}

.sdh-card__meta-item {
	padding: clamp(2px, 0.4vw, 4px) clamp(6px, 1vw, 10px);
	text-align: center;
	background: transparent;                              /* borderless · removed box look */
	border: 0;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(3px, 0.5vw, 5px);
	min-height: 0;                                        /* let content size naturally */
}
/* Vertical hairline dividers BETWEEN cells (no left border on first cell) */
.sdh-card__meta-item + .sdh-card__meta-item {
	border-left: 1px solid var(--sdh-brass-border-28);
}
/* Value · primary spec data (e.g., "10-15 Mins", dots widget, "178 × 22 mm") */
.sdh-card__meta-item strong {
	font-size: clamp(11px, 0.9vw, 12.5px);
	color: var(--sdh-ink-900);
	font-weight: 700;                                     /* refined · was 800, too heavy without box */
	letter-spacing: -0.01em;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;                   /* tabular figures · cleaner numbers */
}
/* Label · brass eyebrow underneath value (e.g., "TIME" / "INTENSITY" / "SIZE") */
.sdh-card__meta-item span {
	font-size: clamp(7.5px, 0.62vw, 9px);
	color: var(--sdh-brass-deep);                         /* brass · was muted grey, now brand-aligned */
	font-weight: 700;
	letter-spacing: 0.16em;                               /* more spaced · luxury eyebrow feel */
	text-transform: uppercase;
}

/* Intensity dot row — global (used by sdh_render_product_card on homepage AND brand/archive pages) */
.sdh-intensity {
	display: inline-flex;
	align-items: center;
	gap: clamp(2.5px, 0.6vw, 3.5px);
	line-height: 1;
}
.sdh-idot {
	display: block;
	width: clamp(6px, 1.5vw, 8px);
	height: clamp(6px, 1.5vw, 8px);
	border-radius: 50%;
	background: currentColor;
	opacity: 0.25;
	flex-shrink: 0;
}
.sdh-idot.is-on { opacity: 1; }

/* ============================================================
 * NARROW CARD LAYOUT · container query (< 220px)
 * SIZE cell removed — meta is now always 2 columns (TIME + INTENSITY).
 * No extra rows needed on narrow cards. Container query kept as hook
 * in case future cells need narrow-card handling.
 * ============================================================ */
@container sdh-card (max-width: 220px) {
	/* Meta already repeat(2, 1fr) — no reflow rule needed.
	 * Keeping the @container block as an extension point. */
}

/* ============================================================
 * ACTIONS ROW · qty selector + Add button — always a single row.
 * Desktop: flex:1 qty / flex:1 add — equal natural widths.
 * Mobile (≤767px): qty=60% / add=40% for easy tap targets.
 * ============================================================ */
.sdh-card__actions {
	width: 100%;
	margin-top: clamp(8px, 1vw, 12px);
	padding-top: 0;
	/* border-top removed — sdh-card__meta's border-block-end already provides the separator */
	display: flex;
	flex-direction: row;
	align-items: stretch;    /* both pills grow to the same height */
	gap: clamp(6px, 0.7vw, 8px);
}
/* Single-line row on all screen sizes — qty + add-to-cart always side-by-side */

/* Qty +/- selector — pill matches ADD TO CART height via stretch */
.sdh-card__qty {
	display: inline-flex;
	align-items: center;         /* center -/value/+ vertically inside the pill */
	flex-shrink: 0;              /* never compress the qty pill */
	background: #fff;
	border: 1px solid var(--sdh-brass-border-28);
	border-radius: var(--sdh-radius-pill);
	overflow: hidden;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.7) inset,
		0 1px 3px rgba(17, 24, 39, 0.04);
}
.sdh-card__qty-btn {
	appearance: none;
	background: transparent;
	border: 0;
	width: clamp(32px, 3vw, 36px);  /* slightly wider tap area */
	height: 100%;                    /* fills the stretched pill height */
	min-height: clamp(28px, 2.8vw, 32px);
	font-size: clamp(15px, 1.1vw, 17px);
	font-weight: 700;
	color: var(--sdh-ink-700);
	cursor: pointer;
	line-height: 1;
	padding: 0;
	transition: background 0.18s var(--sdh-ease), color 0.18s var(--sdh-ease);
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	user-select: none;
	font-family: inherit;
}
.sdh-card__qty-btn:hover,
.sdh-card__qty-btn:focus {
	background: var(--sdh-brass-bg-10);
	color: var(--sdh-brass-deep);
}
.sdh-card__qty-btn:active {
	background: var(--sdh-brass-bg-18);
}
.sdh-card__qty-btn:focus-visible {
	outline: 2px solid var(--sdh-brass);
	outline-offset: 2px;
}
.sdh-card__qty-val {
	min-width: clamp(26px, 2.6vw, 32px);
	text-align: center;
	font-size: clamp(11px, 0.9vw, 13px);
	font-weight: 700;
	color: var(--sdh-ink-900);
	font-variant-numeric: tabular-nums;
	user-select: none;
	line-height: 1;
}

/* Add to Cart button — fills remaining row space on desktop, full-width on mobile */
.sdh-card__add {
	appearance: none;
	flex: 1;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: clamp(5px, 0.6vw, 7px);
	padding: clamp(9px, 1.05vw, 12px) clamp(12px, 1.4vw, 16px);
	background: var(--sdh-ink-900);
	color: #fff;
	border: 0;
	border-radius: var(--sdh-radius-pill);
	font-family: inherit;
	font-size: clamp(10px, 0.78vw, 11.5px);
	font-weight: 900;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	min-height: 40px;
	line-height: 1;
	box-shadow: 0 6px 16px rgba(17, 24, 39, 0.16);
	transition:
		background 0.25s var(--sdh-ease),
		transform 0.18s var(--sdh-ease),
		box-shadow 0.25s var(--sdh-ease),
		color 0.25s var(--sdh-ease);
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	position: relative;
}
.sdh-card__add:hover {
	background: var(--sdh-brass-deep);
	transform: translateY(-1px);
	box-shadow: 0 12px 24px rgba(111, 78, 55, 0.30);
}
.sdh-card__add:active,
.sdh-card__add.is-pressing {
	transform: scale(0.96);
	background: var(--sdh-brass-deep);
	transition-duration: 80ms;
}
.sdh-card__add:focus-visible {
	outline: 2px solid var(--sdh-brass);
	outline-offset: 2px;
}
.sdh-card__add[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}
.sdh-card__add-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(14px, 1.05vw, 16px);
	height: clamp(14px, 1.05vw, 16px);
}
.sdh-card__add-icon svg {
	width: 100%;
	height: 100%;
}

/* Add smooth fade on content elements so loading state is silky */
.sdh-card__add-icon,
.sdh-card__add-label {
	transition: opacity 0.18s var(--sdh-ease);
	flex-shrink: 0;
}

/* ─── 3-dot pulse loader — centered, absolutely positioned ─────────────────
 * Hidden by default. Fades in when .is-loading is set by JS.
 * Dots pulse in sequence — modern iOS/Android app loading feel.
 * ─────────────────────────────────────────────────────────────────────────── */
.sdh-card__add-loader {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s var(--sdh-ease);
}
.sdh-card__add-loader span {
	display: block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #ffffff;
	flex-shrink: 0;
	animation: sdhDotPulse 1.1s ease-in-out infinite both;
}
.sdh-card__add-loader span:nth-child(1) { animation-delay: 0s; }
.sdh-card__add-loader span:nth-child(2) { animation-delay: 0.18s; }
.sdh-card__add-loader span:nth-child(3) { animation-delay: 0.36s; }

@keyframes sdhDotPulse {
	0%, 55%, 100% { transform: scale(0.55); opacity: 0.35; }
	27.5%         { transform: scale(1);    opacity: 1;    }
}

/* Loading state — fade out content, fade in dots.
 * .is-loading = set by the homepage custom handler (legacy, now unused).
 * .loading    = set by the cart plugin (js-sd-drawer-add-to-cart handler).
 * Both classes produce the same visual state. */
.sdh-card__add.is-loading,
.sdh-card__add.loading {
	pointer-events: none;
	background: var(--sdh-ink-700);
}
.sdh-card__add.is-loading .sdh-card__add-icon,
.sdh-card__add.is-loading .sdh-card__add-label,
.sdh-card__add.loading .sdh-card__add-icon,
.sdh-card__add.loading .sdh-card__add-label {
	opacity: 0;
}
.sdh-card__add.is-loading .sdh-card__add-loader,
.sdh-card__add.loading .sdh-card__add-loader {
	opacity: 1;
}

/* Success / error flash states */
.sdh-card__add.is-success {
	background: #1e9d4e;
	box-shadow: 0 10px 22px rgba(30, 157, 78, 0.30);
}
.sdh-card__add.is-error {
	background: #c43d3d;
	box-shadow: 0 10px 22px rgba(196, 61, 61, 0.30);
	animation: sdhCardShake 0.4s var(--sdh-ease);
}
@keyframes sdhCardShake {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-3px); }
	75%      { transform: translateX(3px); }
}

/* Qty + button max-reached state — brief pulse to signal the cap */
.sdh-card__qty-btn.is-maxed {
	animation: sdhQtyMaxPulse 0.35s var(--sdh-ease) forwards;
}
@keyframes sdhQtyMaxPulse {
	0%   { transform: scale(1);    background: rgba(201, 164, 90,0.08); }
	40%  { transform: scale(0.88); background: rgba(201, 164, 90,0.22); }
	100% { transform: scale(1);    background: transparent; }
}

/* ── STOCK MODAL ─────────────────────────────────────────────────────────────
   All colours use hardcoded brand values alongside CSS-variable fallbacks.
   This is intentional: the modal is position:fixed so it floats outside the
   .sd-home ancestor that scopes the --sdh-* variables. Hardcoded values
   guarantee correct rendering even if variable inheritance breaks.
   Brand palette: brass #c9a45a · brass-deep #7a4f1c · ink-900 #111827
                  ink-700 #374151 · ink-500 #4B5563
   ──────────────────────────────────────────────────────────────────────── */
body.sd-stock-modal-open { overflow: hidden; }

.sd-stock-modal {
	position: fixed;
	inset: 0;
	z-index: 10200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(18, 14, 10, 0);
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	transition: background 0.28s ease, backdrop-filter 0.28s ease;
	pointer-events: none;
}
.sd-stock-modal.is-active {
	background: rgba(18, 14, 10, 0.52);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	pointer-events: auto;
}
.sd-stock-modal__card {
	position: relative;
	background: #ffffff;
	border-radius: 24px;
	overflow: hidden; /* clips the ::before accent line to the rounded corners */
	padding: clamp(2rem, 5vw, 2.75rem) clamp(1.75rem, 4vw, 2.5rem);
	width: min(420px, 100%);
	box-shadow:
		0 0 0 1px rgba(201, 164, 90, 0.28),
		0 24px 60px rgba(18, 14, 10, 0.20);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(0.85rem, 1.4vw, 1.1rem);
	transform: translateY(18px) scale(0.96);
	opacity: 0;
	transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.24s ease;
}
/* Top brass accent line — matches the site's card language */
.sd-stock-modal__card::before {
	content: '';
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: linear-gradient(90deg, #c9a45a 0%, #7a4f1c 50%, #c9a45a 100%);
	border-radius: 24px 24px 0 0;
}
.sd-stock-modal.is-active .sd-stock-modal__card {
	transform: translateY(0) scale(1);
	opacity: 1;
}

/* Close × button — theme-safe reset */
.sd-stock-modal__close {
	position: absolute !important;
	top: 14px !important;
	right: 16px !important;
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: transparent !important;
	background-color: transparent !important;
	color: #9b6b28 !important;
	font-size: 20px !important;
	line-height: 1 !important;
	font-family: inherit !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: none !important;
	transition: background 0.18s ease, color 0.18s ease !important;
}
.sd-stock-modal__close:hover {
	background: rgba(201, 164, 90, 0.10) !important;
	background-color: rgba(201, 164, 90, 0.10) !important;
	color: #111827 !important;
}

/* Icon circle */
.sd-stock-modal__icon {
	width: clamp(52px, 7vw, 62px);
	height: clamp(52px, 7vw, 62px);
	border-radius: 50%;
	background: rgba(201, 164, 90, 0.09);
	border: 1.5px solid rgba(201, 164, 90, 0.28);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.sd-stock-modal__icon svg {
	width: clamp(22px, 3vw, 28px);
	height: clamp(22px, 3vw, 28px);
	color: #7a4f1c;
	stroke: #7a4f1c;
}

/* Text */
.sd-stock-modal__title {
	font-family: inherit;
	font-size: clamp(1.05rem, 1.8vw, 1.2rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #111827;
	margin: 0;
	line-height: 1.25;
}
.sd-stock-modal__body {
	font-size: clamp(0.875rem, 1.3vw, 0.95rem);
	color: #374151;
	line-height: 1.6;
	margin: 0;
}
.sd-stock-modal__body strong {
	color: #111827;
	font-weight: 700;
}

/* Action buttons */
.sd-stock-modal__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	margin-top: clamp(0.2rem, 0.5vw, 0.4rem);
}

/* Primary CTA — brass gold pill — consistent with minimum-order modal brand language */
.sd-stock-modal__add-btn {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: block !important;
	width: 100% !important;
	padding: clamp(11px, 2.5vw, 14px) clamp(20px, 4vw, 28px) !important;
	border-radius: 999px !important;
	border: none !important;
	background: #c9a45a !important;
	background-color: #c9a45a !important;
	color: #ffffff !important;
	font-family: inherit !important;
	font-size: clamp(10px, 1.1vw, 11px) !important;
	font-weight: 800 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	text-align: center !important;
	box-shadow: 0 4px 14px rgba(201, 164, 90, 0.38) !important;
	transition: background 0.22s ease, transform 0.15s ease, box-shadow 0.22s ease !important;
}
.sd-stock-modal__add-btn:hover {
	background: #b8934a !important;
	background-color: #b8934a !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 22px rgba(201, 164, 90, 0.50) !important;
}
.sd-stock-modal__add-btn:active {
	transform: translateY(0) !important;
}

/* Secondary — subtle ink outline, NO theme colour */
.sd-stock-modal__cancel {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: block !important;
	width: 100% !important;
	padding: 12px 20px !important;
	border-radius: 12px !important;
	border: 1.5px solid rgba(201, 164, 90, 0.35) !important;
	background: #ffffff !important;
	background-color: #ffffff !important;
	color: #374151 !important;
	font-family: inherit !important;
	font-size: clamp(0.8rem, 1.2vw, 0.875rem) !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	cursor: pointer !important;
	text-align: center !important;
	box-shadow: none !important;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease !important;
}
.sd-stock-modal__cancel:hover {
	background: rgba(201, 164, 90, 0.06) !important;
	background-color: rgba(201, 164, 90, 0.06) !important;
	color: #111827 !important;
	border-color: rgba(201, 164, 90, 0.55) !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.sd-stock-modal,
	.sd-stock-modal__card { transition: none !important; }
	.sdh-card__qty-btn.is-maxed { animation: none; }
}

/* Reduced motion · respect user preference */
@media (prefers-reduced-motion: reduce) {
	.sdh-card,
	.sdh-card__img,
	.sdh-card__buy-overlay,
	.sdh-card__buy-pill,
	.sdh-card__add,
	.sdh-card__qty-btn,
	.sdh-card__add-icon,
	.sdh-card__add-label,
	.sdh-card__add-loader {
		transition: none !important;
	}
	.sdh-card:hover,
	.sdh-card:active { transform: none; }
	.sdh-card:hover .sdh-card__img { transform: none; }
	.sdh-card__add:hover { transform: none; }
	/* Replace pulse animation with a static single-dot indicator */
	.sdh-card__add-loader span { animation: none; opacity: 1; }
	.sdh-card__add-loader span:nth-child(1),
	.sdh-card__add-loader span:nth-child(3) { opacity: 0.35; }
	.sdh-card__add.is-error { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sd-home .sd-rail__item .archive-product-card {
		transition: none;
	}
	.sd-home .sd-rail__item .archive-product-card:hover { transform: none; }
}

/* Mobile: qty = 65%, Add = 35% — wider qty for easy tap, breathing gap between pills */
@media (max-width: 767px) {
	.sdh-card__actions {
		gap: 4px;
	}
	.sdh-card__qty {
		padding: 3px 4px;
		gap: 1px;
	}
	.sdh-card__qty-btn {
		width: 28px;
		min-width: 28px;
		min-height: 28px;
		font-size: 14px;
	}
	.sdh-card__qty-val {
		flex: 0 0 auto;
		min-width: 18px;
		font-size: 14px;
	}
	.sdh-card__add {
		padding: 0 10px;
		font-size: 12px;
		letter-spacing: 0.14em;
		min-height: 44px;
		gap: 0;
	}
	.sdh-card__add-icon { display: none; }
	.sdh-card__add-loader {
		gap: 4px;
	}
	.sdh-card__add-loader span {
		width: 4px;
		height: 4px;
	}
}
/* Restore cart icon on phones wide enough to show both icon + label */
@media (min-width: 360px) and (max-width: 767px) {
	.sdh-card__add {
		gap: 5px;
	}
	.sdh-card__add-icon {
		display: inline-flex;
		width: 14px;
		height: 14px;
	}
}

/* ============================================================
 * BUY NOW · premium checkout overlay + toast notifications
 * Ported from front-page.php so archive/brand/category pages get
 * the same "Securing your order" transition before checkout redirect.
 * Markup is printed via functions.php (wp_footer), JS lives in the
 * page template that owns the Buy Now click handler.
 * ============================================================ */
body.sd-modal-open { overflow: hidden; }

.sd-checkout-overlay {
	position: fixed !important;
	inset: 0;
	z-index: 2147483647;
	background:
		radial-gradient(circle at 50% 50%, rgba(201, 164, 90, 0.08) 0%, rgba(255, 255, 255, 0.97) 70%),
		rgba(17, 24, 39, 0.08);
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease-out;
	padding: clamp(16px, 3vw, 28px);
	overscroll-behavior: contain;
}
.sd-checkout-overlay.is-active {
	opacity: 1 !important;
	pointer-events: auto !important;
	visibility: visible !important;
	display: flex !important;
}

.sd-checkout-overlay__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(16px, 2vw, 26px);
	padding: clamp(2rem, 4.5vw, 3.4rem) clamp(1.8rem, 4vw, 3.5rem);
	background: #ffffff;
	border: 1px solid var(--sdh-brass-border-28);
	border-radius: clamp(20px, 2.6vw, 32px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.7) inset,
		0 28px 70px rgba(17, 24, 39, 0.22),
		0 6px 18px rgba(201, 164, 90, 0.14);
	width: min(calc(100% - 32px), 420px);
	max-width: 420px;
	text-align: center;
	transform: scale(0.96) translateY(8px);
	transition: transform 0.25s ease-out;
	position: relative;
	overflow: hidden;
}
.sd-checkout-overlay.is-active .sd-checkout-overlay__inner {
	transform: scale(1) translateY(0);
}
.sd-checkout-overlay__inner::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--sdh-brass) 0%, var(--sdh-brass-deep) 50%, var(--sdh-brass) 100%);
}
.sd-checkout-overlay__inner::after {
	content: '';
	position: absolute;
	inset: -40% -40% auto auto;
	width: 70%;
	height: 70%;
	background: radial-gradient(circle, rgba(201, 164, 90, 0.12) 0%, transparent 65%);
	filter: blur(28px);
	pointer-events: none;
	z-index: 0;
}
.sd-checkout-overlay__inner > * {
	position: relative;
	z-index: 1;
}

.sd-checkout-overlay__brand {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: clamp(6px, 0.8vw, 10px);
}
.sd-checkout-overlay__logo {
	max-width: clamp(120px, 38%, 160px);
	height: auto;
	display: block;
	object-fit: contain;
	filter: brightness(1);
}
.sd-checkout-overlay__divider {
	width: 40px;
	height: 1px;
	background: var(--sdh-brass-border-28);
	margin: 0 auto clamp(6px, 0.8vw, 10px);
}

.sd-checkout-overlay__spinner {
	width: clamp(54px, 5.5vw, 64px);
	height: clamp(54px, 5.5vw, 64px);
	position: relative;
	margin: clamp(4px, 0.6vw, 8px) 0;
}
.sd-checkout-overlay__spinner::before {
	content: '';
	position: absolute;
	inset: 0;
	border: 3px solid var(--sdh-brass-bg-18);
	border-top-color: var(--sdh-brass);
	border-radius: 50%;
	animation: sdcSpin 0.9s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.sd-checkout-overlay__spinner::after {
	content: '';
	position: absolute;
	inset: 8px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(201, 164, 90, 0.18) 0%, rgba(201, 164, 90, 0.04) 60%, transparent 100%);
	animation: sdcPulseInner 1.5s ease-in-out infinite;
}
@keyframes sdcSpin { to { transform: rotate(360deg); } }
@keyframes sdcPulseInner {
	0%, 100% { transform: scale(1);    opacity: 0.6; }
	50%      { transform: scale(0.85); opacity: 1;   }
}

.sd-checkout-overlay__msg {
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-size: clamp(12px, 0.95vw, 13.5px);
	color: var(--sdh-ink-900);
	line-height: 1.3;
	animation: sdcMsgPulse 1.8s ease-in-out infinite;
}
.sd-checkout-overlay__sub {
	font-size: clamp(11px, 0.85vw, 12.5px);
	color: var(--sdh-ink-500);
	font-weight: 500;
	letter-spacing: 0.02em;
	margin: -8px 0 0;
	max-width: 30ch;
	line-height: 1.5;
}
@keyframes sdcMsgPulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.5; }
}

.sd-checkout-overlay__trust {
	display: flex;
	gap: clamp(8px, 1.2vw, 14px);
	margin-top: clamp(4px, 0.6vw, 8px);
	padding-top: clamp(12px, 1.5vw, 16px);
	border-top: 1px solid var(--sdh-brass-border-28);
	flex-wrap: wrap;
	justify-content: center;
}
.sd-checkout-overlay__trust span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: clamp(9px, 0.75vw, 10.5px);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sdh-brass-deep);
}
.sd-checkout-overlay__trust span::before {
	content: '✓';
	color: var(--sdh-brass);
	font-weight: 900;
}

.sd-checkout-overlay__cloudflare {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: clamp(8px, 1vw, 12px);
	font-size: clamp(8.5px, 0.7vw, 10px);
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #6b7280;
	opacity: 0.75;
}
.sd-checkout-overlay__cloudflare svg {
	flex-shrink: 0;
	width: clamp(12px, 1.1vw, 14px);
	height: clamp(12px, 1.1vw, 14px);
}

@media (max-width: 575px) {
	.sd-checkout-overlay {
		padding: 16px;
	}
	.sd-checkout-overlay__inner {
		width: 100%;
		padding: clamp(1.8rem, 7vw, 2.4rem) clamp(1.4rem, 6vw, 2rem);
		border-radius: 22px;
		gap: 14px;
	}
	.sd-checkout-overlay__msg {
		font-size: 12px;
	}
	.sd-checkout-overlay__trust {
		gap: 8px;
	}
	.sd-checkout-overlay__trust span {
		font-size: 9px;
	}
	.sd-checkout-overlay__logo {
		max-width: 110px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sd-checkout-overlay,
	.sd-checkout-overlay__inner { transition: none; }
	.sd-checkout-overlay__spinner::before,
	.sd-checkout-overlay__spinner::after,
	.sd-checkout-overlay__msg { animation: none; }
}

.sd-toast {
	position: fixed;
	bottom: clamp(16px, 2vw, 28px);
	right: clamp(16px, 2vw, 28px);
	z-index: 1000000;
	min-width: 280px;
	max-width: 420px;
	transform: translateY(140%);
	opacity: 0;
	pointer-events: none;
	transition:
		transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
		opacity 0.3s var(--sdh-ease);
	font-family: inherit;
}
.sd-toast[hidden] { display: none; }
.sd-toast.is-visible {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}
.sd-toast__inner {
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.2vw, 14px);
	padding: clamp(12px, 1.3vw, 16px) clamp(14px, 1.5vw, 18px);
	background:
		radial-gradient(circle at top right, rgba(201, 164, 90, 0.22) 0%, transparent 65%),
		linear-gradient(135deg, rgba(17, 24, 39, 0.96) 0%, rgba(28, 33, 46, 0.95) 100%);
	border: 1px solid var(--sdh-brass-border-28);
	border-radius: clamp(12px, 1.3vw, 16px);
	box-shadow:
		0 1px 0 rgba(245, 223, 174, 0.08) inset,
		0 20px 50px rgba(17, 24, 39, 0.35);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}
.sd-toast__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(28px, 2.4vw, 34px);
	height: clamp(28px, 2.4vw, 34px);
	border-radius: 50%;
	background: var(--sdh-brass-bg-18);
	border: 1px solid var(--sdh-brass-border-28);
	color: #F5DFAE;
	flex-shrink: 0;
}
.sd-toast__msg {
	flex: 1 1 auto;
	color: #ffffff;
	font-size: clamp(13px, 0.95vw, 14px);
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0.01em;
}
.sd-toast__close {
	flex: 0 0 auto;
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, 0.55);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: color 0.2s var(--sdh-ease), background 0.2s var(--sdh-ease);
	font-family: inherit;
}
.sd-toast__close:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}
.sd-toast__close:focus-visible {
	outline: 2px solid var(--sdh-brass);
	outline-offset: 2px;
}

@media (max-width: 575px) {
	.sd-toast {
		left: 16px;
		right: 16px;
		bottom: 16px;
		max-width: none;
		min-width: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sd-toast { transition: opacity 0.2s ease; transform: none; }
	.sd-toast.is-visible { transform: none; }
}