/* ============================================================================
   TREX⁺ — bento.css   (BENTO REDESIGN — loaded AFTER style.css)
   ----------------------------------------------------------------------------
   A modern "bento grid" theme inspired by premium tech-shop UI:
   - airy lavender canvas, royal-blue accent (driven by --color-primary)
   - pill navigation + a prominent rounded search bar + profile chip
   - asymmetric bento hero with circular action buttons & rating pills
   Everything is additive: it overrides style.css component styles but reuses
   its design tokens, so dark mode and the rest of the site keep working.
   Part of the TREX⁺ e-commerce platform.
   ========================================================================== */

/* ---- Token overrides (light canvas only; dark theme keeps style.css) ---- */
:root{
    --bg: #E8ECF6;                 /* soft lavender canvas               */
    --surface: #FFFFFF;
    --chip: #F1F4FB;              /* inner card / input fill            */
    --chip-2: #EAEEF8;
    --ink: #1B2440;              /* deep navy headings                  */
    --bento-radius: 26px;
    --bento-radius-sm: 18px;
    --bento-gap: 16px;
    --ring: 1px solid rgba(28,42,94,.05);

    /* Royal-blue accent system — kills the old blue→purple gradient (#8B5CF6)
       so every CTA / badge / soft tint matches the theme. Also realigns the
       primary RGB + darker shade (style.css still had the old indigo values). */
    --color-primary-rgb: 20, 110, 180; /* fallback only — header.php injects this from settings.primary_color */
    --color-primary-d: #3D63E6;
    --color-primary-l: #E8F0FF;
    --accent-grad: linear-gradient(135deg, var(--color-primary), #3D63E6);
    --accent-grad-soft: linear-gradient(135deg, rgba(var(--color-primary-rgb),.14), rgba(var(--color-primary-rgb),.10));
}
body{ background: var(--bg); }

/* ============================================================================
   1. NAVBAR  →  logo + big search + icon pills + profile chip
   ========================================================================== */
.navbar{
    position: sticky;          /* stays pinned to the top while scrolling */
    top: 0;
    z-index: 950;
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0;
    padding: 0;                /* no extra padding → everything sits on the centred nav-inner line */
}
/* Make sure every header item is vertically centred on one line. */
.navbar .nav-inner{ align-items: center; }
.navbar .nav-inner > *{ align-self: center; margin-top: 0; margin-bottom: 0; }
.navbar .search-bar{ margin: 0; }
#site-navbar.scrolled,
.navbar.scrolled{
    background: rgba(232,236,246,.85);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
}
.nav-inner{ gap: 16px; align-items: center; }

/* Hide the old text menu on desktop — categories live in the pill row below. */
@media (min-width: 921px){
    .navbar .nav-menu.desktop-only{ display: none !important; }
}

.nav-logo{ font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.nav-logo img{ height: 44px; width: auto; display: block; }

/* Center the search bar: give the logo and action zones EQUAL flex so the
   search bar lands in the TRUE centre of the navbar — stays centred even when
   the right side widens (logged-in profile chip). Desktop only. */
@media (min-width: 921px){
    .navbar .nav-logo{ flex: 1 1 0; min-width: 0; margin: 0; }
    /* margin-left:auto (from style.css) would eat the free space and break the
       symmetric centring — zero it so the equal flex zones balance instead. */
    .navbar .nav-actions{ flex: 1 1 0; justify-content: flex-end; margin: 0; }
}

/* --- Prominent rounded search bar --- */
.navbar .search-bar{
    flex: 0 1 680px;       /* generous centred width — fills the bar with ~50px breathing gaps */
    max-width: 680px;
    background: var(--surface);
    border: var(--ring);
    border-radius: var(--radius-pill, 999px);
    padding: 6px 6px 6px 20px;
    height: 56px;
    display: flex;
    align-items: center;
}
.navbar .search-bar input[type="search"]{
    background: transparent;
    border: 0;
    font-size: .98rem;
    color: var(--ink);
}
.navbar .search-bar input[type="search"]::placeholder{ color: #9aa3bd; }
.navbar .search-bar button{
    width: 44px; height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    transition: transform .2s var(--ease, ease), filter .2s ease;
}
.navbar .search-bar button:hover{ transform: scale(1.06); filter: brightness(1.05); }

/* --- Action icons as white circles --- */
.nav-actions{ gap: 10px; }
.nav-actions .nav-action{
    width: 50px; height: 50px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink);
    border: var(--ring);
    transition: transform .2s ease, color .2s ease;
}
.nav-actions .nav-action:hover{
    color: var(--color-primary);
}
.nav-actions .nav-action .cart-count{
    background: var(--color-primary);
    color:#fff; border:2px solid var(--surface);
}

/* --- Profile chip (avatar + name) --- */
.profile-chip{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    padding: 5px 14px 5px 6px;
    background: var(--surface);
    border: var(--ring);
    border-radius: var(--radius-pill, 999px);
    color: var(--ink);
    font-weight: 600;
    font-size: .92rem;
    white-space: nowrap;
    transition: transform .2s ease;
}
.profile-chip:hover{ color: var(--ink); }
.profile-chip .avatar{
    width: 40px; height: 40px; flex: 0 0 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), #3D63E6);
    color:#fff; font-weight:800; font-size:.95rem;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
}
.profile-chip .avatar img{ width:100%; height:100%; object-fit:cover; }
.profile-chip .pc-name{ max-width: 120px; overflow:hidden; text-overflow:ellipsis; }
@media (max-width: 720px){ .profile-chip .pc-name{ display:none; } .profile-chip{ padding:5px; } }

/* ============================================================================
   2. CATEGORY PILL ROW — removed (markup deleted from header.php).
   ========================================================================== */

/* ============================================================================
   3. BENTO HERO GRID
   ========================================================================== */
.bento{
    display: grid;
    grid-template-columns: 1.05fr 1fr;   /* tall promo slider (left) + stacked cards (right) */
    gap: var(--bento-gap);
    align-items: stretch;
}
.bento > *{ min-width: 0; }

.bento-card{
    background: var(--surface);
    border: var(--ring);
    border-radius: var(--bento-radius);
    padding: 22px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.b-feat{ grid-row: span 2; }   /* tall left card spans both rows */

/* card header: small label chip + circular ↗ */
.bento-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: 14px; }
.bento-label{
    display:inline-flex; align-items:center;
    padding: 8px 16px;
    border-radius: var(--radius-pill, 999px);
    background: var(--chip);
    color: var(--ink);
    font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.bento-arrow{
    width: 42px; height: 42px; flex:0 0 42px;
    border-radius: 50%;
    background: var(--chip);
    color: var(--ink);
    display:inline-flex; align-items:center; justify-content:center;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.bento-arrow:hover{ background: var(--color-primary); color:#fff; transform: rotate(0deg) scale(1.05); }

.bento-title{
    font-family: var(--font-head);
    font-weight: 500;
    color: var(--ink);
    line-height: 1.02;
    letter-spacing: -.02em;
    margin: 0 0 4px;
}
.b-feat .bento-title{ font-size: clamp(2rem, 3.2vw, 2.9rem); }
.bento-sub{ color: var(--muted); font-size: .92rem; margin: 0; }
.bento-sub strong{ color: var(--ink); }

/* --- product media inside a bento card --- */
.feat-media{
    position: relative;
    display:block;
    margin-top: 10px;
    border-radius: var(--bento-radius-sm);
    background: linear-gradient(160deg, #eef1fa, #e3e8f6);
    flex: 1 1 auto;
    min-height: 200px;
    display: grid; place-items: center;
    overflow: hidden;
}
.feat-media img{
    width: 86%; max-height: 78%;
    object-fit: contain;
    filter: none;
    transition: transform .4s var(--ease, ease);
}
.feat-media:hover img{ transform: scale(1.05) rotate(-1deg); }

/* mini featured carousel: simple display-toggle between product slides */
.feat-stage{ position:relative; flex:1 1 auto; display:flex; flex-direction:column; }
.feat-slide{ display:none; flex:1 1 auto; flex-direction:column; }
.feat-slide.is-active{ display:flex; animation: bfade .45s ease; }
@keyframes bfade{ from{ opacity:.25; transform:translateY(8px);} to{ opacity:1; transform:none;} }

.rating-pill{
    position:absolute; top:14px; right:14px;
    display:inline-flex; align-items:center; gap:6px;
    padding: 8px 14px;
    background: var(--surface);
    border-radius: var(--radius-pill, 999px);
    font-weight: 700; font-size: .82rem; color: var(--ink);
    z-index: 2;
}
.rating-pill svg{ width:15px; height:15px; color:#F6A609; }

/* feature footer: price + name + circular actions */
.feat-foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-top: 16px; }
.feat-price{ font-family:var(--font-head); font-weight:800; font-size: 1.9rem; color: var(--ink); line-height:1; }
.feat-name{ color: var(--muted); font-size: .9rem; margin-top: 4px; }
.feat-price .price-old{ font-size:1rem; color:var(--muted); text-decoration:line-through; margin-left:8px; font-weight:600; }

.feat-actions{ display:flex; gap:10px; }
.icon-circle{
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--color-primary);
    color:#fff;
    display:inline-flex; align-items:center; justify-content:center;
    transition: transform .2s ease, filter .2s ease;
    border: 0; cursor: pointer;
}
.icon-circle.ghost{ background: var(--chip); color: var(--ink); }
.icon-circle:hover{ transform: scale(1.04); filter:brightness(1.05); }
.icon-circle.is-active{ background:#ef4444; }

/* slide-left-right control */
.slide-hint{
    display:flex; align-items:center; justify-content:space-between;
    margin-top: 18px; padding-top: 16px;
    border-top: 1px solid var(--border);
}
.slide-hint span{ color: var(--muted); font-size:.86rem; font-weight:600; }
.slide-btn{
    width: 44px; height:44px; border-radius:50%;
    background: var(--surface); border: var(--ring); 
    color: var(--ink); display:inline-flex; align-items:center; justify-content:center;
    transition: transform .2s ease, color .2s ease; cursor:pointer;
}
.slide-btn:hover{ color: var(--color-primary); }

/* --- "Hot Deals" center card --- */
.b-deal .feat-media{ min-height: 150px; }
.b-deal .bento-title{ font-size: clamp(1.6rem, 2.4vw, 2.1rem); }

/* --- "Exclusive bundle" promo card (image + text) --- */
.b-promo{ background: linear-gradient(150deg,#11162a,#272f4d); color:#fff; }
.b-promo .bento-label{ background: rgba(255,255,255,.12); color:#fff; }
.b-promo .bento-arrow{ background: rgba(255,255,255,.14); color:#fff; }
.b-promo .bento-arrow:hover{ background:#fff; color:var(--ink); }
.b-promo .bento-title{ color:#fff; }
.b-promo .bento-sub{ color: rgba(255,255,255,.72); }
.b-promo .promo-img{ position:absolute; right:-10px; bottom:-10px; width:48%; max-width:230px; }

/* --- Split bundle: two compact promo cards sharing one bento cell --- */
.bento-split{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bento-gap);
    min-width: 0;
}
.bento-split > .bento-card{ min-width: 0; }
/* Full-bleed image card: no border, and NO dark gradient behind the image —
   the dark .b-promo/.b-promo-alt background was bleeding through the rounded
   corners as a dark fringe. Higher specificity (.bento-card.b-promo-sm) beats
   both .b-promo and .b-promo-alt. */
.bento-card.b-promo-sm{ padding: 0; min-height: 140px; border: 0; background: transparent; }
.b-promo-sm .promo-img{
    position: absolute; inset: 0;
    width: 100%; height: 100%; max-width: none;
    object-fit: cover;                            /* the speaker / SMPS image fills the whole card */
    border-radius: inherit;                       /* match the card radius → no corner fringe */
}
.promo-content{
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column;
    justify-content: center; align-items: flex-start;   /* left-aligned, vertically centred */
    gap: 7px; padding: 16px;
    text-align: left;
    color: #fff;
}
.b-promo-sm .bento-title{ font-size: 1.3rem; line-height: 1.05; margin: 0; }   /* no extra margin → subtitle sits close */
.b-promo-sm .bento-sub{ font-size: .82rem; }
.b-promo-sm .promo-buy{ margin-top: 4px; align-self: flex-start; }   /* left-aligned button */
/* white "Buy Now" pill on the split promo cards (black text), pinned to bottom-left */
.promo-buy{
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 7px 16px;
    border-radius: var(--radius-pill, 999px);
    background: #fff;
    color: #0f172a;
    font-weight: 600; font-size: .8rem;
    position: relative; z-index: 2;
    transition: filter .2s ease, transform .2s ease;
}
.promo-buy:hover{ filter: brightness(.95); color: #0f172a; transform: translateY(-1px); }
/* second card gets a distinct accent so the two read as separate */
.b-promo-alt{ background: linear-gradient(150deg, #161d3a, #3a2348); }
@media (max-width: 480px){
    .bento-split{ grid-template-columns: 1fr; }   /* stack on phones */
}

/* --- Brands / avatars card --- */
.brand-avatars{ display:flex; align-items:center; margin-top: 6px; }
.brand-avatars .ba{
    width:48px; height:48px; border-radius:50%;
    background: var(--chip); border:3px solid var(--surface);
    margin-left:-12px; display:grid; place-items:center; overflow:hidden;
    font-weight:800; color:var(--ink); font-size:.8rem;
}
.brand-avatars .ba:first-child{ margin-left:0; }
.brand-avatars .ba img{ width:78%; height:78%; object-fit:contain; }
.brand-avatars .ba.more{ background: var(--color-primary); color:#fff; font-size:.85rem; }

/* --- Newsletter "Get a bonus" card --- */
.bento-news .news-form{ margin-top: auto; display:flex; flex-direction:column; gap:10px; }
.bento-news .news-input{
    width:100%; height:52px; padding:0 18px;
    border-radius: var(--radius-pill, 999px);
    background: var(--chip); border:1px solid transparent;
    font-size:.95rem; color:var(--ink);
}
.bento-news .news-input:focus{ outline:none; border-color: var(--color-primary); background:#fff; }
.bento-news .news-btn{
    height:52px; border:0; border-radius: var(--radius-pill, 999px);
    background: var(--color-primary); color:#fff; font-weight:700; font-size:.98rem; cursor:pointer;
    transition: transform .2s ease, filter .2s ease;
}
.bento-news .news-btn:hover{ filter:brightness(1.05); }

.bento-card .grow{ flex: 1 1 auto; }

/* ============================================================================
   4. Product cards across the site — softer, rounder to match the theme
   ========================================================================== */
.product-card{ border-radius: var(--bento-radius-sm); border: var(--ring); }
.product-card .product-media{ background: #fff; border-radius: 14px; }
.section-head h2, .section h2{ color: var(--ink); }

/* ============================================================================
   5. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px){
    .bento{ grid-template-columns: 1fr 1fr; }
    .b-feat{ grid-row: auto; grid-column: span 2; }
    .b-feat .feat-media{ min-height: 240px; }
}
@media (max-width: 620px){
    .bento{ grid-template-columns: 1fr; }
    .b-feat, .b-feat.b-feat{ grid-column: auto; }
    .navbar .search-bar{ max-width: none; }
    .bento-card{ padding: 18px; }
}

/* keep the old hero slider hidden if a page still renders it (we replaced it) */
.home-legacy-hero{ display:none; }

/* ============================================================================
   6. DESKTOP / LAPTOP RIGHT-SIZING
   On laptops the desktop tier rendered oversized. Tighten the global scale,
   section rhythm, headings and the (slightly large) redesign components so
   every page sits comfortably on 1280–1536px screens. Applies site-wide on
   ≥992px; mobile/tablet keep their existing responsive sizes.
   ========================================================================== */
@media (min-width: 992px){

    /* Global scale: trim the rem base + body copy a notch (affects all pages). */
    html { font-size: 15px; }
    body { font-size: 14.5px; }

    /* Section rhythm — the biggest source of "everything feels huge". */
    .section    { padding-block: clamp(20px, 2.2vw, 32px); }
    .section-sm { padding-block: clamp(13px, 1.5vw, 21px); }

    /* Headings */
    h1 { font-size: clamp(1.7rem, 2.6vw, 2.25rem); }
    h2 { font-size: clamp(1.35rem, 2vw, 1.7rem); }
    h3 { font-size: clamp(1.1rem, 1.6vw, 1.3rem); }

    /* Navbar + search + profile chip — shorter, fully centred sticky bar */
    :root { --nav-h: 60px; }
    .navbar .search-bar { height: 46px; max-width: 480px; padding: 4px 4px 4px 18px; }
    .navbar .search-bar button { width: 38px; height: 38px; flex-basis: 38px; }
    .nav-actions .nav-action { width: 44px; height: 44px; }
    .profile-chip { height: 44px; font-size: .86rem; }
    .profile-chip .avatar { width: 34px; height: 34px; flex-basis: 34px; }


    /* Bento hero */
    .bento { gap: 14px; }
    .bento-card { padding: 18px; border-radius: 20px; }
    .bento-head { margin-bottom: 12px; }
    .bento-label { padding: 6px 13px; font-size: .62rem; }
    .bento-arrow { width: 36px; height: 36px; flex-basis: 36px; }
    .b-feat .bento-title { font-size: clamp(1.7rem, 2.3vw, 2.2rem); }
    .b-deal  .bento-title { font-size: clamp(1.4rem, 1.9vw, 1.7rem); }
    .feat-media { min-height: 165px; border-radius: 14px; }
    .feat-price { font-size: 1.55rem; }
    .icon-circle { width: 42px; height: 42px; }
    .bento-news .news-input,
    .bento-news .news-btn { height: 46px; }
    .slide-btn { width: 40px; height: 40px; }

    /* Buttons & product cards a touch tighter */
    .btn-lg { padding: 12px 22px; font-size: .95rem; }
    .product-card .product-body { padding: 14px; }
}

/* Roomy on large monitors so it never feels cramped there. */
@media (min-width: 1600px){
    html { font-size: 15.5px; }
    .section { padding-block: clamp(26px, 2.2vw, 40px); }
    /* Keep the footer's top gap equal to the section gap here too. */
    .footer { margin-top: clamp(26px, 2.2vw, 40px); }
}

/* ============================================================================
   7. COUNT BADGES + PRODUCT-CARD QUICK ACTIONS
   - cart & wishlist bubbles are independent (the wishlist badge no longer
     carries the .cart-count class) and the number is perfectly centred.
   - quick-action buttons (wishlist heart + quick-view eye) are clean solid
     white circles, identical on every product card across the whole site.
   ========================================================================== */
.nav-action .cart-count,
.nav-action .wishlist-count{
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 19px;      /* circle for 1 digit; widens to a short pill for the full number */
    height: 19px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--color-primary);
    border: 2px solid var(--surface);
    border-radius: 999px;
    box-sizing: border-box;
}
.nav-action .cart-count.hidden,
.nav-action .wishlist-count.hidden{ display: none; }

.product-actions{ gap: 8px; }
.product-actions .btn-icon{
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;                       /* always a perfect circle */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid rgba(15, 23, 42, .10);  /* crisp hairline, no shadow */
    color: #586079;                            /* refined muted icon */
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.product-actions .btn-icon svg{ width: 18px; height: 18px; stroke-width: 1.85; }
.product-actions .btn-icon:hover,
.product-actions .btn-icon:focus-visible{
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
    outline: none;
}
/* Saved (wishlisted): the HEART itself turns red — the chrome stays the
   plain white circle (hover included) so the red heart reads clearly.
   Keep in sync with the .qv-wish saved state in style.css. */
.product-actions .btn-icon.active,
.product-actions .btn-icon.is-saved,
.product-actions .btn-icon.active:hover,
.product-actions .btn-icon.is-saved:hover{
    background: #ffffff;
    color: #586079;
    border-color: rgba(15, 23, 42, .10);
}
.product-actions .btn-icon.active svg,
.product-actions .btn-icon.is-saved svg{
    fill: var(--danger);
    stroke: var(--danger);
}

/* ============================================================================
   8. FIX — "Add to cart" button must never overflow the card
   The slide-up cart pill is position:absolute with left:12px / right:12px
   insets, but the .btn-block class also forced width:100%. On an absolutely
   positioned element width:100% makes `right` be ignored, so the button
   becomes a full card-width wide starting 12px in → it spills out of the card.
   Force width:auto so the left/right insets define the width (card − 24px),
   centred and fully contained.
   ========================================================================== */
.product-card{ overflow: hidden; }
.product-card .product-cart-btn{
    /* Sit in normal flow at the very bottom of the card (after the body, via
       order) so it NEVER overlaps the price. Always visible — no hover slide. */
    position: static;
    order: 2;
    opacity: 1;
    transform: none;
    width: auto;
    margin: 0 16px 16px;        /* small, even gap above the button (matches the text gaps) */
    box-sizing: border-box;
}
/* trim the card body's bottom padding so the Add-to-cart button sits a small,
   even gap below the price instead of a big gap */
.product-card .product-body{ padding-bottom: 6px; }
/* Phones: slimmer Add-to-cart pill to match the compact two-up cards */
@media (max-width: 640px){
    .product-card .product-cart-btn{
        min-height: 36px;       /* between the old 44px and the too-slim 30px */
        margin: 0 12px 12px;
        padding: 8px 14px;
        font-size: .8rem;
        gap: 6px;
    }
    .product-card .product-cart-btn svg{ width: 16px; height: 16px; }
}

/* ============================================================================
   9. AUTH PAGES — password reveal "eye" (100% Figma / UI-UX)
   The toggle was a grey attached box (background:surface-2) that looked
   detached from the field. Make it transparent so the eye lives INSIDE the
   unified input pill, muted by default and royal-blue on hover/focus.
   ========================================================================== */
.input-group .input-addon{
    background: transparent;
    border: 0;
    color: #8a93a8;                 /* soft muted eye */
    padding: 0 14px;
    cursor: pointer;
    transition: color .18s ease;
}
.input-group .input-addon:hover,
.input-group .input-addon:focus-visible{
    background: transparent;
    color: var(--color-primary);    /* highlight on interaction */
    outline: none;
}
.input-group .input-addon svg{ width: 18px; height: 18px; stroke-width: 1.9; display: block; }
/* keep the input comfortable next to the eye */
.input-group .input{ padding-right: 6px; }

/* ============================================================================
   10. MOBILE RESPONSIVENESS  (loaded LAST → wins on small screens)
   Right-sizes the bento header, hero, typography and every page's components
   for phones/tablets so nothing feels oversized and nothing overflows.
   ========================================================================== */

/* ---- Tablet & large phones ---- */
@media (max-width: 768px){
    /* Hard safety: never allow a horizontal scrollbar on small screens.
       `clip` (not `hidden`!) — hidden turns <body> into a scroll container,
       which BREAKS the sticky navbar and makes the browser jump to the top
       of the page whenever the search input is focused. */
    html, body { overflow-x: hidden; overflow-x: clip; }
    img, svg, video, iframe { max-width: 100%; height: auto; }

    /* Header — compact pill nav */
    .navbar { padding: 0; }
    .nav-inner { gap: 10px; }
    .nav-logo { font-size: 1.05rem; }
    .nav-logo img { height: 38px; }
    .nav-actions { gap: 6px; }
    .nav-actions .nav-action { width: 42px; height: 42px; }
    .nav-actions .nav-action svg { width: 20px; height: 20px; }
    .nav-toggle { width: 40px; height: 40px; }
    .profile-chip { height: 42px; padding: 4px; }
    .profile-chip .avatar { width: 34px; height: 34px; flex: 0 0 34px; }


    /* Typography + section rhythm */
    h1 { font-size: clamp(1.5rem, 6vw, 1.9rem); }
    h2 { font-size: clamp(1.25rem, 5vw, 1.5rem); }
    h3 { font-size: clamp(1.05rem, 4.5vw, 1.2rem); }
    .section    { padding-block: clamp(20px, 4.5vw, 30px); }
    .section-sm { padding-block: clamp(14px, 3vw, 22px); }
    .section-head { flex-wrap: wrap; gap: 8px; }
    .container { padding-inline: 16px; }

    /* Bento hero on mobile */
    .bento-card { padding: 16px; border-radius: 18px; }
    .bento-head { margin-bottom: 10px; }
    .b-feat .bento-title { font-size: clamp(1.6rem, 7vw, 2rem); }
    .b-deal  .bento-title { font-size: clamp(1.4rem, 6vw, 1.7rem); }
    .feat-media { min-height: 180px; }
    .feat-price { font-size: 1.5rem; }
    .icon-circle { width: 44px; height: 44px; }
    .rating-pill { padding: 6px 11px; font-size: .76rem; }
    .slide-btn { width: 40px; height: 40px; }
    .bento-label { font-size: .6rem; padding: 6px 12px; }
    .bento-arrow { width: 38px; height: 38px; }
    .bento-news .news-input, .bento-news .news-btn { height: 48px; }

    /* Buttons + wide tables */
    .btn-lg { padding: 12px 20px; font-size: .95rem; }
    /* Any data table scrolls instead of pushing the page wide (the cart is
       a card list now, not a table) */
    table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* style.css's `.product-desc table { overflow: hidden }` (0,1,1) beats
       the bare selector above — restate the scroll at equal specificity
       (bento loads later) so wide description tables stay reachable. */
    .product-desc table { overflow-x: auto; }

    /* Inline two-column blocks (e.g. About) may shrink freely */
    [style*="min-width:280px"] { min-width: 0 !important; }
}

/* ---- Phones ---- */
@media (max-width: 480px){
    .nav-actions { gap: 4px; }
    .nav-actions .nav-action { width: 40px; height: 40px; }

    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.3rem; }
    .section { padding-block: 22px; }

    /* Bento feature card calmer on tiny screens */
    .b-feat .bento-title { font-size: 1.8rem; }
    .bento-title br { display: none; }   /* avoid awkward forced line breaks */
    .feat-media { min-height: 160px; }
    .feat-price { font-size: 1.35rem; }

    /* Product grid stays 2-up but tighter; smaller quick-action circles */
    .cols-2, .cols-3, .cols-4, .cols-5 { gap: 10px; }
    .product-actions .btn-icon { width: 34px; height: 34px; }
    .product-actions .btn-icon svg { width: 16px; height: 16px; }

    /* Comfortable, zoom-safe form controls (16px stops iOS auto-zoom) */
    .input, .select, .textarea, input, select, textarea { font-size: 16px; }
    .btn { min-height: 44px; }            /* easy tap target */
    .news-input, .bento-news .news-input { font-size: 16px; }
}

/* ---- Small phones ---- */
@media (max-width: 360px){
    .nav-logo span { font-size: .95rem; }
    .nav-logo img { height: 34px; }
    .nav-actions .nav-action { width: 38px; height: 38px; }
    .bento-card { padding: 14px; }
}

/* ============================================================================
   11. MOBILE / TABLET HEADER — clean two-row layout (100% Figma / UI-UX)
   Row 1 (top bar):  [hamburger]  [logo]  ……  [wishlist] [cart] [account]
   Row 2:            full-width rounded search bar (its own line — never cramped)
   Applies below the desktop pill-nav threshold; the search is pulled out of
   the row so the logo/icons never fight it for space.
   ========================================================================== */
@media (max-width: 920px){
    .navbar { padding: 8px 0; }
    .nav-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 10px;
        row-gap: 10px;
        height: auto;          /* grow to fit BOTH rows — fixes search overlapping the pills */
        min-height: 0;
    }

    /* Row 1 — hamburger + logo (left), action icons (right). The toggle is
       slimmed and pulled toward the edge — its icon centring plus the
       container padding read as a too-wide gap on both sides otherwise. */
    .nav-toggle { display: grid; order: 1; width: 34px; height: 42px; flex: 0 0 auto; margin-left: -8px; }
    .nav-logo   { order: 2; margin-right: auto; }
    .navbar .nav-menu.desktop-only { display: none !important; }   /* no crammed text links */
    .nav-actions { order: 3; flex: 0 0 auto; }

    /* Row 2 — full-width search pill on its own line */
    .navbar .search-bar {
        display: flex !important;       /* override the desktop-only hide */
        order: 10;
        flex: 1 1 100%;
        max-width: none;
        height: 50px;
        margin: 0;
        padding: 5px 5px 5px 18px;
    }
    .navbar .search-bar input[type="search"] { font-size: 16px; }  /* no iOS zoom */

    /* The whole header (top bar + search) stays pinned; pills scroll away. */
}

/* On phones, tighten the two-row header a touch more. */
@media (max-width: 480px){
    .navbar { padding: 6px 0; }
    .nav-inner { column-gap: 8px; row-gap: 8px; }
    .navbar .search-bar { height: 46px; padding-left: 16px; }
    .navbar .search-bar button { width: 38px; height: 38px; flex: 0 0 38px; }
}

/* ============================================================================
   12. AUTH PAGES — ONE contained card: looping video (LEFT) + form (RIGHT)
   The whole split is a single centred, rounded card. The video lives INSIDE
   the card (clipped to the corners), the two halves sit tight together, and
   the form uses ONE consistent width on EVERY auth page (login = register =
   forgot = reset), overriding their differing inline max-widths.
   ========================================================================== */
.auth-split{
    display: grid;
    grid-template-columns: 1.35fr 1fr;       /* video wider, balanced form column */
    width: min(calc(var(--container) - 2 * var(--gutter)), calc(100% - 2 * var(--gutter)));  /* SAME width as the newsletter / page container below */
    margin: 44px auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    overflow: hidden;                         /* clips the video to the rounded card */
    min-height: 520px;
    isolation: isolate;
}
.auth-media{
    position: relative;
    overflow: hidden;
    background: #0b1020;
}
.auth-video{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.auth-media::after{                            /* gentle brand wash for depth */
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(155deg, rgba(var(--color-primary-rgb),.22), rgba(11,16,32,.16) 55%, rgba(11,16,32,.42));
    pointer-events: none;
}
.auth-form-col{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 36px;                        /* small, even gap to the video */
    background: var(--surface);
}
/* Inner form card blends into the split card (no card-in-card) and uses ONE
   consistent width across all four auth pages. */
.auth-form-col .auth-card{
    background: transparent !important;
    border: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    width: 100%;
    max-width: 360px;                          /* SAME on login/register/forgot/reset */
    padding: 0 !important;
    margin: 0;
}

/* Tablet/phone: stack inside the same card — video becomes a top banner */
@media (max-width: 760px){
    .auth-split{
        grid-template-columns: 1fr;          /* stack, but keep the container width */
        min-height: 0;
        margin: 28px auto;
    }
    .auth-media{ height: 200px; }
    .auth-form-col{ padding: 32px 26px; }
    .auth-form-col .auth-card{ max-width: 460px; }   /* centred form on the wide stacked card */
}
@media (max-width: 480px){
    .auth-split{ border-radius: 20px; margin: 18px auto; }
    .auth-media{ height: 140px; }
    .auth-form-col{ padding: 26px 20px; }
    .auth-form-col .auth-card{ max-width: none; }
}

/* Login ↔ Sign up segmented toggle (top of the auth form) */
.auth-toggle{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    margin: 0 0 22px;
    background: var(--chip, #eef1fb);
    border-radius: 999px;
}
.auth-toggle a{
    text-align: center;
    padding: 11px 12px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .92rem;
    color: var(--muted);
    transition: background .18s ease, color .18s ease;
}
.auth-toggle a.active{
    background: var(--color-primary);
    color: #fff;
}
.auth-toggle a:not(.active):hover{ color: var(--ink, var(--text)); }

/* ---- Auth head — refined badge icon + title + subtitle (all auth pages) ---- */
.auth-card .auth-head{ text-align: center; margin-bottom: 26px; }

/* Inline alerts (invalid code / lockout / form errors) need air before the
   form below — the base .alert carries no bottom margin of its own. */
.auth-card .alert{ margin-bottom: 18px; }

.auth-card .auth-badge{
    width: 64px;
    height: 64px;
    border-radius: 20px;                 /* soft squircle */
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    color: #fff;
    background:
        radial-gradient(120% 120% at 28% 22%, rgba(255,255,255,.30), transparent 55%),
        linear-gradient(145deg, #7a9bff 0%, var(--color-primary) 52%, #3a5fe0 100%);
    /* coloured glow ring (no black shadow) */
}
.auth-card .auth-badge svg{ width: 27px; height: 27px; stroke-width: 2.1; }

.auth-card .auth-title{
    font-family: var(--font-head);
    font-size: clamp(1.35rem, 2vw, 1.6rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.12;
    color: var(--ink, #0f172a);
    margin: 0 0 8px;
}
.auth-card .auth-sub{
    margin: 0 auto;
    max-width: 320px;
    font-size: .96rem;
    line-height: 1.55;
    color: var(--muted);
}
.auth-card .auth-sub strong{ color: var(--ink, #0f172a); font-weight: 700; }

/* ============================================================================
   13. NEWSLETTER BAND — high-contrast + premium
   FIX: the section-4 ".section h2 { color: var(--ink) }" rule was turning the
   heading dark on the blue band (unreadable). Force white text + polish.
   ========================================================================== */
/* Shorter band — trim BOTH the outer section padding and the band's padding */
.section:has(.newsletter){ padding-block: clamp(16px, 2.6vw, 32px); }
.newsletter{
    border-radius: 24px;
    padding: clamp(22px, 3.2vw, 38px);
}
.newsletter .eyebrow{
    /* the eyebrow is GRADIENT TEXT (transparent fill) → it vanished on the blue
       band. Force a SOLID WHITE fill so it is readable on every single page. */
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    font-size: .72rem;
    letter-spacing: .2em;
    opacity: .95;
    margin-bottom: 6px;
}
.newsletter h2{
    color: #ffffff !important;
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin: 2px 0 8px;
}
.newsletter p{
    color: rgba(255,255,255,.92) !important;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 560px;
}
.newsletter-form{ margin-top: 16px; gap: 12px; max-width: 540px; }
.newsletter-form .input{
    flex: 1;
    min-width: 200px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.45);
    color: #fff;
    border-radius: 999px;
    padding: 0 18px;
    min-height: 40px;    /* compact (was a chunky 54px) */
}
.newsletter-form .input::placeholder{ color: rgba(255,255,255,.78); }
.newsletter-form .input:focus{
    background: rgba(255,255,255,.24);
    border-color: #fff;
    outline: none;
}
.newsletter-form .btn{
    background: #ffffff;
    color: var(--color-primary);
    border: 0;
    border-radius: 999px;
    padding: 0 24px;
    min-height: 40px;    /* compact (was a chunky 54px) */
    font-size: .88rem;
    font-weight: 700;
}
.newsletter-form .btn:hover{ background: #eef2ff; color: var(--color-primary-d, #3d63e6); }

@media (max-width: 480px){
    .newsletter-form{ flex-direction: column; }
    .newsletter-form .input, .newsletter-form .btn{ width: 100%; }
}

/* ============================================================================
   14. PROMO IMAGE SLIDER — full-bleed 3-slide hero in the tall left bento card
   Replaces the old product mini-carousel. Each slide is a full-card background
   image (object-fit:cover) with an overlaid headline, sub-line and "Shop Now"
   CTA, plus a dark bottom scrim for legibility. Reuses the #bentoFeat slide
   toggle JS (data-feat-slide / .is-active) and adds dot + arrow controls.
   ========================================================================== */
.b-promo-slider{
    padding: 0;                    /* image goes edge-to-edge of the card */
    min-height: 480px;             /* floor; usually stretched by the 2-row span */
}
.promo-slider{ position: absolute; inset: 0; overflow: hidden; }

/* horizontal sliding track — all slides sit in one row; the JS translates it */
.promo-track{
    display: flex;
    width: 100%; height: 100%;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}
.promo-slide{
    position: relative;
    flex: 0 0 100%;
    width: 100%; height: 100%;
    overflow: hidden;
}
@media (prefers-reduced-motion: reduce){
    .promo-track{ transition: none; }   /* honour reduced-motion: jump, don't slide */
}

.promo-slide-img{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;             /* fills the whole card on every aspect ratio */
    display: block;
}
/* readability scrim — darkest at the bottom where the text sits */
.promo-slide::after{
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to top,
        rgba(11,16,32,.86) 0%, rgba(11,16,32,.45) 40%, rgba(11,16,32,0) 72%);
    pointer-events: none;
}

.promo-slide-content{
    position: absolute; left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: clamp(22px, 3vw, 36px);
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    color: #fff;
}
.promo-title{
    font-family: var(--font-head);
    font-weight: 500;
    color: #fff;
    font-size: clamp(1.35rem, 2.2vw, 1.9rem);
    line-height: 1.08;
    letter-spacing: -.02em;
    margin: 0;
}
.promo-sub{
    color: rgba(255,255,255,.92);
    font-size: clamp(.9rem, 1.2vw, 1.05rem);
    line-height: 1.5;
    margin: 0;
    max-width: 36ch;
}
.promo-cta{
    margin-top: 6px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px;
    border-radius: var(--radius-pill, 999px);
    background: var(--cta-bg, var(--color-primary));   /* per-slide colour via inline --cta-bg */
    color: #fff;
    font-weight: 700; font-size: .85rem;
    transition: transform .2s ease, filter .2s ease;
}
.promo-cta:hover{ transform: translateY(-2px); filter: brightness(1.08); color: #fff; }
.promo-cta svg{ width: 16px; height: 16px; }

/* prev / next — glass circles, top-right */
.promo-arrows{
    position: absolute; top: 14px; right: 14px;
    z-index: 3;
    display: flex; gap: 8px;
}
.promo-arrow{
    width: 40px; height: 40px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.20);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.38);
    color: #fff; cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.promo-arrow:hover{ background: rgba(255,255,255,.40); transform: scale(1.06); }

/* slide dots — bottom-right, active one widens to a pill */
.promo-dots{
    position: absolute; right: 18px; bottom: 20px;
    z-index: 3;
    display: flex; gap: 7px;
}
.promo-dot{
    width: 8px; height: 8px;
    padding: 0; border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.50);
    cursor: pointer;
    transition: width .25s ease, background .25s ease;
}
.promo-dot.is-active{ width: 22px; background: #fff; }

@media (min-width: 1025px){
    /* desktop: comfortable hero height (scoped above the 1024px layout switch
       so it never collides with the tablet banner height below) */
    .b-promo-slider{ min-height: 380px; }
}
@media (max-width: 1024px){
    /* b-feat becomes a wide full-row banner here — shorter landscape slider */
    .b-promo-slider{ min-height: 285px; }
}
@media (max-width: 620px){
    /* single column: portrait promo card — taller than the landscape banner */
    .b-promo-slider{ min-height: 325px; }
}
@media (max-width: 480px){
    .promo-slide-content{ padding: 20px; gap: 8px; }
    .promo-arrow{ width: 36px; height: 36px; }
    .promo-cta{ padding: 8px 16px; }
}

/* ============================================================================
   15. GAMING HEADPHONES DEAL CARD — full-bleed image + countdown
   Replaces the old "Hot Deals" product card. One headphone image fills the
   whole card; an upper-left stack (title → white countdown boxes → primary
   "Buy Now") sits over a left-side scrim. Countdown JS in home.php: resets
   daily at local midnight by default, or counts to a fixed data-cd-end date.
   ========================================================================== */
.b-deal-promo{
    padding: 0;                 /* image goes edge-to-edge of the card */
    min-height: 255px;
}
.b-deal-promo .deal-img{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;          /* one image fills the full card */
    display: block;
}
/* left-side scrim so the white title/text stays legible over a light image */
.b-deal-promo::after{
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to right,
        rgba(11,16,32,.66) 0%, rgba(11,16,32,.38) 38%, rgba(11,16,32,.06) 66%, rgba(11,16,32,0) 100%);
    pointer-events: none;
}
.deal-content{
    position: absolute; inset: 0;
    z-index: 2;
    display: flex; flex-direction: column;
    justify-content: center; align-items: flex-start;
    gap: clamp(14px, 2vw, 20px);
    padding: clamp(20px, 3vw, 34px);
    color: #fff;
}
.deal-title{
    font-family: var(--font-head);
    font-weight: 500; color: #fff;
    font-size: clamp(1.35rem, 2.2vw, 1.9rem);
    line-height: 1.08; letter-spacing: -.01em; margin: 0;
}
.deal-countdown{ display: flex; flex-wrap: wrap; gap: 8px; }
.cd-box{
    display: flex; flex-direction: column; align-items: center;
    min-width: 46px; padding: 6px 9px 5px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .14);              /* frosted glass, not solid */
    border: 1px solid rgba(255, 255, 255, .22);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.cd-box b{
    font-family: var(--font-head);
    font-weight: 500; font-size: 1.05rem; line-height: 1;   /* normal weight, smaller */
    color: #fff;
    font-variant-numeric: tabular-nums;     /* digits don't jitter as they tick */
}
.cd-box small{
    margin-top: 3px;
    font-size: .54rem; font-weight: 400;
    letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}
.deal-buy{
    display: inline-flex; align-items: center; justify-content: center;
    padding: 9px 22px;
    border-radius: var(--radius-pill, 999px);
    background: var(--color-primary);       /* primary-colour button, white text */
    color: #fff;
    font-weight: 700; font-size: .9rem;
    transition: transform .2s ease, filter .2s ease;
}
.deal-buy:hover{ transform: translateY(-2px); filter: brightness(1.06); color: #fff; }

/* Mobile: a much SHORTER deal card (placed after the base rule above so the
   min-height override actually wins the cascade). */
@media (max-width: 768px){
    .b-deal-promo{ min-height: 170px; }
    .deal-content{ gap: 10px; padding: 16px 18px; justify-content: center; }
    .deal-title{ font-size: 1.25rem; }
    .cd-box{ min-width: 40px; padding: 5px 7px 4px; border-radius: 10px; }
    .cd-box b{ font-size: .92rem; }
    .deal-buy{ padding: 7px 18px; font-size: .84rem; }
}

/* ============================================================================
   16. TRUST BADGES — refined "why shop with us" strip (flat, no shadows)
   Soft-tinted icon squircle that fills with the brand colour on hover; the
   whole card lifts a touch and its hairline border highlights. 4-up desktop →
   2-up tablet → 2-up (compact) phone.
   ========================================================================== */
.trust-badges{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.trust-badge{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    transition: border-color var(--speed, .25s) var(--ease, ease);
}
.trust-badge:hover{
    border-color: rgba(var(--color-primary-rgb), .35);
}
.trust-badge .trust-ico{
    flex: 0 0 48px;
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: 14px;
    background: var(--accent-grad-soft);
    color: var(--color-primary);
    transition: background var(--speed, .25s) var(--ease, ease),
                color var(--speed, .25s) var(--ease, ease);
}
.trust-badge:hover .trust-ico{
    background: var(--color-primary);
    color: #fff;
}
.trust-badge .trust-text{ min-width: 0; }
.trust-badge .trust-title{
    font-family: var(--font-head);
    font-weight: 500;   /* Lexend Deca 500 — matches the site's heading weight */
    font-size: .95rem;
    line-height: 1.2;
    color: var(--ink, var(--text));
}
.trust-badge .trust-sub{
    margin-top: 3px;
    font-size: .82rem;
    line-height: 1.35;
    color: var(--muted);
}
@media (max-width: 900px){
    .trust-badges{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px){
    /* Phones: keep TWO badges per row — everything compacted to fit */
    .trust-badges{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .trust-badge{ padding: 12px; gap: 10px; border-radius: 14px; }
    .trust-badge .trust-ico{ flex-basis: 36px; width: 36px; height: 36px; border-radius: 10px; }
    .trust-badge .trust-ico svg{ width: 18px; height: 18px; }
    .trust-badge .trust-title{ font-size: .82rem; }
    .trust-badge .trust-sub{ font-size: .7rem; margin-top: 2px; }
}

/* ============================================================================
   17. HOME PRODUCT CAROUSELS — 5 cards per view, hover-reveal scroll arrows
   Flash Deals / Best Sellers / New Arrivals scroll horizontally. Bare chevron
   arrows (like the category carousel) appear on SECTION HOVER on desktop and
   scroll one page (~5 cards) at a time; mobile hides them and uses swipe.
   ========================================================================== */
.prod-carousel{ position: relative; }
.prod-carousel .prod-track{ padding-bottom: 4px; }
.prod-carousel .prod-slide{
    flex: 0 0 calc((100% - 4 * var(--gutter, 24px)) / 5);   /* exactly 5 per view */
    max-width: 82vw;
    scroll-snap-align: start;
}
.prod-nav{
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    z-index: 4;
    width: 34px; height: 60px;
    display: grid; place-items: center;
    background: none; border: 0; padding: 0;
    color: var(--ink, var(--text));
    cursor: pointer;
    opacity: 0;                       /* hidden until the section is hovered */
    pointer-events: none;
    transition: opacity .2s ease, color .2s ease, transform .2s ease;
}
.prod-carousel:hover .prod-nav{ opacity: 1; pointer-events: auto; }
/* JS sets [hidden] while every card already fits (no overflow) — the
   display:grid above must never resurrect the button. */
.prod-nav[hidden]{ display: none; }
.prod-nav:hover{ color: var(--color-primary); transform: translateY(-50%) scale(1.14); }
.prod-prev{ left: -10px; }
.prod-next{ right: -10px; }
/* The mega-sale strip holds SHORT horizontal tiles (.mega-card) — the default
   42% suits the tall product cards; here the arrow centres on the tile row. */
.mega-carousel .prod-nav{ top: 50%; }
@media (max-width: 992px){
    .prod-carousel .prod-slide{ flex-basis: calc((100% - 2 * var(--gutter, 24px)) / 3); }  /* 3 per view */
}
@media (max-width: 768px){
    .prod-nav{ display: none; }                              /* mobile: swipe, no arrows */
    /* exactly TWO products per view (swipe reveals the rest) */
    .prod-carousel .prod-slide{
        flex-basis: calc((100% - var(--gutter, 16px)) / 2);
        max-width: none;
    }
}