/* ==========================================================================
   UrbanCart — design system
   Navy header/footer, cyan gradient hero, white cards, red discount ribbons.
   ========================================================================== */
:root{
  /* palette — a lighter, more vibrant primary blue than the original
     near-black navy (#101d42), picked to keep >8:1 contrast against white
     (so every existing text/heading/badge use of --navy stays readable)
     while every large fill (topbar, navbar, hero, footer) reads as an
     actual color instead of near-black. */
  --navy:#233E8B;
  --navy-2:#2B4A9E;
  --navy-3:#3557B3;
  --ink:#1c2333;
  --ink-2:#3a4256;
  --muted:#6b7280;
  --muted-2:#8a92a3;
  --blue:#1a56b0;
  --blue-2:#0e6fb0;
  --cyan:#17b9e8;
  --cyan-2:#0a6fb5;
  --red:#e2231a;
  --green:#1f9254;
  --gold:#f5a623;
  --line:#e6e8ec;
  --line-2:#eef0f4;
  --page:#f4f6f9;
  --white:#ffffff;
  --shadow-card:0 2px 10px rgba(16,29,66,.06);
  --shadow-float:0 12px 32px rgba(16,29,66,.16);
  --radius:10px;
  --radius-sm:6px;

  /* type */
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;

  /* metrics */
  --container:1280px;
  --gutter:20px;
  --header-h:132px;
}

/* ==========================================================================
   Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--page);color:var(--ink-2);
  font-family:var(--sans);font-size:14px;font-weight:400;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{font-family:var(--sans);color:var(--navy);font-weight:700;letter-spacing:-.01em}
s{text-decoration-thickness:1px}

.container{width:100%;max-width:calc(var(--container) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* left:-9999px used to hide this off-screen, but an absolutely-positioned
   element at an extreme offset still counts toward its containing block's
   scrollable area — it was silently making the ENTIRE page horizontally
   scrollable by ~9999px on every load. Parking it just above the viewport
   (top, not left) hides it just as completely without that side effect,
   since a small negative top on an absolute element doesn't blow out
   horizontal scrollWidth the way an extreme left offset does. */
.skip-link{position:absolute;left:8px;top:-48px;z-index:200;background:var(--navy-chrome);color:#fff;padding:10px 18px;transition:top .2s ease}
.skip-link:focus{top:8px}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon--fill{fill:currentColor;stroke:none}
#sprite{position:absolute;width:0;height:0;overflow:hidden}

/* shared display pieces ---------------------------------------------------- */
.section{padding:36px 0}
.section--tight{padding:20px 0}
.section--tint{background:var(--white)}
.section-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.section-head h2{font-size:22px;line-height:1.25}
.section-head__sub{margin-top:4px;color:var(--muted);font-size:13px}
.link-more{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--blue);white-space:nowrap}
.link-more .icon{width:14px;height:14px}

/* buttons ------------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:44px;padding:0 22px;border-radius:var(--radius-sm);
  font-size:13px;font-weight:700;letter-spacing:.01em;
  transition:background-color .2s,color .2s,border-color .2s,transform .15s;
}
.btn .icon{width:16px;height:16px}
.btn--dark{background:var(--navy);color:#fff}
.btn--dark:hover{background:var(--navy-3)}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:#c41d15}
.btn--light{background:#fff;color:var(--navy)}
.btn--light:hover{background:var(--line-2)}
.btn--outline{background:transparent;color:var(--navy);border:1px solid var(--line)}
.btn--outline:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.btn--ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn--block{width:100%}
.btn--lg{height:50px;padding:0 28px;font-size:13.5px}
.btn--sm{height:36px;padding:0 16px;font-size:11.5px}
.btn[disabled],.btn.is-disabled{opacity:.5;pointer-events:none}

/* ==========================================================================
   Header
   ========================================================================== */
/* Topbar: an offer message (arbitrary admin-configured length, so it can't
   assume it fits) plus a fixed "Shop now" CTA on the left, a support nav on
   the right. Below 700px there's rarely room for both an honest message and
   the nav on one line without wrapping onto the nav's row (the exact bug
   this replaced), so the message becomes a looping marquee instead of
   wrapping, and the nav — all of it reachable elsewhere (main nav, account,
   footer) — steps aside to give the marquee the row. */
.topbar{background:var(--navy-chrome);color:var(--navy-chrome-muted);font-size:12px}
.topbar__inner{display:flex;align-items:center;gap:16px;min-height:34px}
.topbar__offer{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto;margin:0}
.topbar__marquee{overflow:hidden;min-width:0;flex:1 1 auto;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 10px),transparent);mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 10px),transparent)}
.topbar__marquee-track{display:inline-flex;width:max-content;white-space:nowrap;animation:uc-marquee 16s linear infinite}
.topbar__marquee-item{padding-inline-end:56px}
.topbar__marquee:hover .topbar__marquee-track,.topbar__marquee:focus-within .topbar__marquee-track{animation-play-state:paused}
.topbar__offer-cta{flex:0 0 auto;color:var(--navy-chrome-muted);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.topbar__links{display:none;align-items:center;gap:18px;margin-inline-start:auto;white-space:nowrap}
.topbar__links a{color:var(--navy-chrome-muted);transition:color .2s}
.topbar__links a:hover{color:#fff}
@keyframes uc-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* The marquee itself stays animated at every width, desktop included — only
   the support links (Shop/phone/Track order) are mobile-only, since below
   700px there's no room for both. */
@media (min-width:700px){ .topbar__links{display:flex} }
@media (prefers-reduced-motion: reduce){
  .topbar__marquee-track{animation:none;display:block;width:auto}
  .topbar__marquee-item[aria-hidden]{display:none}
}

/* Sticky, not fixed: stays in normal flow (no compensating top-padding
   needed on <main>) but pins to the viewport top once scrolled to. The
   topbar above it is NOT part of this element, so it scrolls away first —
   matches main.js's stickyHeader(), which was already toggling a shadow on
   [data-header] for a "stuck" state this element never actually had. */
.header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100}
.header__main{display:flex;align-items:center;gap:12px;padding:12px 0}
@media (min-width: 700px){ .header__main{gap:28px;padding:14px 0} }

/* .logo is allowed to shrink (no flex-shrink:0) and its text truncates with an
   ellipsis rather than forcing the whole header wider — a long store name
   must never be able to push the cart/account icons off screen. min-width:0
   is required on every link in this chain for the ellipsis to take effect
   inside a flex row, which otherwise sizes children to their content. */
.logo{display:flex;align-items:center;gap:10px;min-width:0;flex:0 1 auto}
.logo__mark{display:inline-flex;width:42px;height:42px;color:var(--navy);flex-shrink:0}
.logo__mark svg rect{fill:var(--navy)}
.logo__mark svg text{fill:#fff}
.logo__text{min-width:0}
.logo__name,.logo__sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo__text{display:flex;flex-direction:column;line-height:1.15}
.logo__name{font-size:19px;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.logo__sub{font-size:10px;color:var(--muted);letter-spacing:.03em}
.logo__img{max-height:46px;width:auto}
/* Below 700px the mark alone speaks for the brand — the name+tagline text
   next to a hamburger button, search icon and three cart/account/wishlist
   icons had no real room to live in and was truncating to "Ecommerce Pv…"
   rather than reading as a wordmark. */
@media (max-width: 699px){ .logo__text{display:none} }

.search-wrap{flex:1;position:relative;min-width:0}
.searchbar{display:flex;align-items:stretch;height:44px;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:#fff}
/* The dropdown panel lives in .search-wrap, NOT inside .searchbar — the
   form has overflow:hidden (it clips the rounded pill shape's internal
   button borders), which was silently clipping this panel into
   invisibility despite every computed style (display, visibility,
   position, real width/height) reporting completely correctly. Absolute
   positioning inside a clipped ancestor is still clipped by it regardless
   of z-index; only escaping that ancestor fixes it. */
.searchbar__cat{display:none;align-items:center;gap:6px;height:100%;padding:0 14px;background:var(--line-2);color:var(--ink-2);font-size:12.5px;font-weight:600;border-right:1px solid var(--line);white-space:nowrap}
.searchbar__cat .icon{width:13px;height:13px;transition:transform .15s}
.searchbar__cat[aria-expanded="true"] .icon{transform:rotate(180deg)}
.searchbar__catmenu{position:absolute;top:calc(100% + 6px);left:0;min-width:200px;max-height:60vh;overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-float);z-index:120;padding:6px 0}
.searchbar__catmenu a{display:block;padding:9px 16px;font-size:13px;color:var(--ink-2)}
.searchbar__catmenu a:hover{background:var(--line-2);color:var(--navy)}
.searchbar__catmenu a:first-child{font-weight:700;color:var(--navy);border-bottom:1px solid var(--line-2);margin-bottom:4px;padding-bottom:10px}
.searchbar input{flex:1;min-width:0;border:0;padding:0 14px;font-size:13.5px;color:var(--ink)}
.searchbar input::placeholder{color:var(--muted-2)}
.searchbar input::-webkit-search-cancel-button{display:none}
.searchbar__clear{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:32px;color:var(--muted)}
.searchbar__clear .icon{width:13px;height:13px}
.searchbar__clear:hover{color:var(--ink)}
.searchbar button{display:inline-flex;align-items:center;gap:6px;padding:0 22px;background:var(--navy);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.04em}
.searchbar button:hover{background:var(--navy-3)}
.searchbar button .icon{width:16px;height:16px}

/* ---- Live search dropdown ---- */
.search-suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-float);z-index:120;max-height:min(70vh,560px);overflow-y:auto;opacity:0;transform:translateY(-6px);transition:opacity .15s ease,transform .15s ease}
.search-suggest.is-visible{opacity:1;transform:translateY(0)}
.ss-section{padding:14px 16px 4px}
.ss-section+.ss-section{border-top:1px solid var(--line-2);margin-top:4px}
.ss-heading{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ss-product{display:flex;align-items:center;gap:10px;padding:8px 16px;color:var(--ink)}
.ss-product:hover,.ss-product.is-active{background:var(--line-2)}
.ss-product__img{width:44px;height:44px;border-radius:7px;object-fit:cover;flex-shrink:0;background:var(--line-2)}
.ss-product__body{min-width:0;flex:1}
.ss-product__name{font-size:12.5px;font-weight:600;color:var(--ink);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.ss-product__name mark{background:#fef3c7;color:inherit;border-radius:2px}
.ss-product__meta{font-size:11px;color:var(--muted);margin-top:1px}
.ss-product__price{flex-shrink:0;text-align:right;font-size:12.5px}
.ss-product__price .price{font-weight:700;color:var(--navy)}
.ss-product__price .was{display:block;font-size:10.5px;color:var(--muted-2);text-decoration:line-through}
.ss-product__price .off{display:block;font-size:10px;color:var(--red);font-weight:700}
.ss-cat{display:flex;align-items:center;gap:8px;padding:8px 16px;font-size:12.5px;color:var(--ink-2)}
.ss-cat:hover,.ss-cat.is-active{background:var(--line-2);color:var(--navy)}
.ss-cat .icon{width:13px;height:13px;color:var(--muted-2)}
.ss-viewall{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 16px;font-size:12.5px;font-weight:700;color:var(--blue);border-top:1px solid var(--line-2);position:sticky;bottom:0;background:#fff}
.ss-viewall:hover,.ss-viewall.is-active{background:var(--line-2)}
.ss-viewall .icon{width:13px;height:13px}
.ss-empty{padding:24px 16px;text-align:center;color:var(--muted);font-size:13px}
.ss-empty p{margin-bottom:10px}
.ss-error{padding:14px 16px;text-align:center;color:var(--muted);font-size:12.5px}
.ss-skeleton{padding:8px 16px}
.ss-skeleton__row{display:flex;align-items:center;gap:10px;padding:8px 0}
.ss-skeleton__img{width:44px;height:44px;border-radius:7px;background:var(--line-2);flex-shrink:0}
.ss-skeleton__lines{flex:1}
.ss-skeleton__line{height:9px;border-radius:4px;background:var(--line-2);margin-bottom:6px;width:70%}
.ss-skeleton__line:last-child{width:40%;margin-bottom:0}
.ss-skeleton__img,.ss-skeleton__line{animation:ss-shimmer 1.1s ease-in-out infinite}
@keyframes ss-shimmer{0%,100%{opacity:1}50%{opacity:.5}}
@media (prefers-reduced-motion: reduce){
  .search-suggest{transition:none}
  .ss-skeleton__img,.ss-skeleton__line{animation:none}
}
@media (min-width: 900px){ .searchbar__cat{display:flex} }

.hactions{display:flex;align-items:center;gap:14px;flex-shrink:0}
@media (min-width: 700px){ .hactions{gap:22px} }

/* Icon-only buttons (burger, mobile search toggle) — a fixed comfortable
   touch target regardless of the icon's own intrinsic size. */
.action{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;color:var(--navy);border-radius:8px;margin-inline:-8px}
.action:hover{background:var(--line-2)}
.action .icon{width:22px;height:22px}
.haction{position:relative;display:flex;align-items:center;gap:9px;min-height:40px;color:var(--ink);white-space:nowrap}
.haction .icon{width:22px;height:22px;color:var(--navy);flex-shrink:0}
.haction__text{display:none;flex-direction:column;line-height:1.2}
.haction__label{font-size:10.5px;color:var(--muted)}
.haction__value{font-size:12.5px;font-weight:700;color:var(--ink)}
@media (min-width: 1100px){ .haction__text{display:flex} }
.haction__badge{position:absolute;top:-7px;right:-9px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--red);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1}

/* .navbar__list (the only thing this bar ever holds) only shows at
   1000px+ — below that it was still rendering as an empty, purposeless
   navy strip under the header. Categories stay fully reachable on mobile
   through the hamburger drawer, so the bar itself hides with its content
   rather than sitting there empty. */
.navbar{display:none;background:var(--navy-chrome)}
.navbar__inner{display:flex;align-items:center;min-height:46px;gap:2px}
.navbar__burger{display:inline-flex;align-items:center;gap:8px;color:#fff;padding:0 14px 0 0;font-size:13px;font-weight:700}
.navbar__list{display:none;align-items:stretch;flex-wrap:wrap}
@media (min-width: 1000px){
  .navbar{display:block}
  .navbar__list{display:flex}
}
.navitem{position:relative}
.navitem>a{display:flex;align-items:center;gap:5px;height:46px;padding:0 15px;color:#fff;font-size:13px;font-weight:600;white-space:nowrap;transition:background-color .15s,color .15s}
.navitem>a .icon{width:13px;height:13px}
.navitem:hover>a,.navitem.is-open>a{background:var(--navy-chrome-3);color:#fff}
.navitem--seller{margin-inline-start:auto;padding:6px 14px}

/* flat quick-links row under the mega-menu bar — same treatment as .navbar
   (hidden below the drawer breakpoint, where these links already live in
   the mega-menu/drawer instead) */
.subnav{display:none;background:var(--navy-chrome);border-top:1px solid rgba(255,255,255,.1)}
.subnav__inner{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none}
.subnav__inner::-webkit-scrollbar{display:none}
.subnav__link{flex:none;padding:10px 14px;font-size:12.5px;font-weight:600;color:var(--navy-chrome-muted);white-space:nowrap;transition:color .15s}
.subnav__link:hover{color:#fff}
@media (min-width: 1000px){.subnav{display:block}}

.mega{position:absolute;top:100%;left:0;min-width:230px;background:#fff;border:1px solid var(--line);border-radius:0 0 var(--radius-sm) var(--radius-sm);box-shadow:var(--shadow-float);padding:8px 0;z-index:60;display:none}
.navitem:hover .mega,.navitem.is-open .mega{display:block}
.mega a{display:block;padding:9px 18px;font-size:13px;color:var(--ink-2)}
.mega a:hover{background:var(--line-2);color:var(--navy)}

/* mobile drawer nav */
.navdrawer{position:fixed;inset:0 auto 0 0;width:min(320px,86vw);background:#fff;z-index:210;transform:translateX(-100%);transition:transform .25s ease;overflow-y:auto}
.navdrawer[data-open="true"]{transform:translateX(0)}
.navdrawer__head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.navdrawer__head strong{font-size:15px;color:var(--navy)}
.navdrawer ul{padding:8px 0}
.navdrawer li>a{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;font-size:14px;color:var(--ink);border-bottom:1px solid var(--line-2)}
.navdrawer .sub{padding-left:14px;display:none}
.navdrawer li.is-open .sub{display:block}
.navdrawer .sub a{display:block;color:var(--ink-2);font-size:13px;padding:10px 18px;border-bottom:1px solid var(--line-2)}
.navdrawer .sub a:last-child{border-bottom:0}
.backdrop{position:fixed;inset:0;background:rgba(16,29,66,.45);z-index:200;opacity:0;pointer-events:none;transition:opacity .2s}
.backdrop.is-visible{opacity:1;pointer-events:auto}
@media (min-width: 1000px){ .navbar__burger{display:none} }

/* mobile search toggle */
.hactions__search-toggle{display:inline-flex}
@media (min-width: 700px){ .hactions__search-toggle{display:none} }
.header__searchrow{display:none;padding:0 0 12px}
.header__searchrow.is-open{display:block}
@media (max-width: 699px){ .searchbar{display:none} .header__searchrow .searchbar{display:flex} }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero-wrap{padding:20px 0}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width: 900px){ .hero-grid{grid-template-columns:2fr 1fr} }
/* A store with no home_mid banners never renders .hero-side at all (see
   home.php), leaving .hero as the grid's only child — but the 2fr/1fr
   track split still reserved that second column's width as empty space
   next to it instead of letting the hero use the row. :only-child needs no
   PHP-side "did we render a second column" flag to stay in sync with. */
.hero-grid > .hero:only-child{grid-column:1/-1}

.hero{position:relative;border-radius:14px;overflow:hidden;min-height:300px;background:linear-gradient(135deg,var(--cyan) 0%,var(--cyan-2) 100%);display:flex;align-items:center}
.hero__slides{position:absolute;inset:0}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}
.hero__slide.is-active{opacity:1;position:relative}
.hero__slide img{width:100%;height:100%;object-fit:cover;min-height:300px}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--navy-chrome) 55%,transparent) 0%,color-mix(in srgb,var(--navy-chrome) 8%,transparent) 60%,transparent 100%)}
.hero__content{position:relative;z-index:2;padding:34px 32px;max-width:480px;color:#fff}
.hero .eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-chrome-muted);margin-bottom:8px}
.hero__title{font-size:clamp(26px,4vw,40px);line-height:1.12;color:#fff;font-weight:800}
.hero__text{margin-top:10px;font-size:14px;color:var(--navy-chrome-muted);max-width:38ch}
.hero__price{display:inline-flex;align-items:center;gap:10px;margin-top:16px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);border-radius:8px;padding:7px 14px;font-size:13px;color:#fff}
.hero__price b{font-size:18px}
.hero__cta{margin-top:18px;display:flex;gap:12px}
.hero__arrow{position:absolute;top:50%;translate:0 -50%;z-index:3;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--navy);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-card)}
.hero__arrow--prev{left:14px}
.hero__arrow--next{right:14px}
.hero__arrow .icon{width:16px;height:16px}
.hero__arrow--prev .icon{transform:rotate(180deg)}
.hero__dots{position:absolute;bottom:16px;left:50%;translate:-50% 0;z-index:3;display:flex;gap:7px}
.hero__dots button{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55)}
.hero__dots button[aria-selected="true"]{background:#fff;width:20px;border-radius:4px}

.hero-side{display:flex;flex-direction:column;gap:16px}
.hside{position:relative;border-radius:14px;overflow:hidden;flex:1;min-height:142px;background:linear-gradient(135deg,var(--navy-2),var(--navy));display:flex;align-items:flex-end}
.hside img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hside__scrim{position:absolute;inset:0;background:linear-gradient(0deg,color-mix(in srgb,var(--navy-chrome) 72%,transparent) 0%,color-mix(in srgb,var(--navy-chrome) 10%,transparent) 65%)}
.hside__body{position:relative;z-index:2;padding:16px;color:#fff}
.hside__eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--navy-chrome-muted);font-weight:700}
.hside__title{font-size:17px;font-weight:800;line-height:1.2;margin-top:3px}
.hside__price{margin-top:6px;font-size:12.5px;color:var(--navy-chrome-muted)}
.hside__price b{font-size:15px;color:#fff}
.hside .btn{margin-top:10px}

/* ==========================================================================
   Feature strip (trust icons)
   ========================================================================== */
.features-band{background:#fff;border-block:1px solid var(--line)}
.features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:18px 0}
@media (min-width: 700px){ .features{grid-template-columns:repeat(4,minmax(0,1fr))} }
.feature{display:flex;align-items:center;gap:12px}
.feature .icon{width:28px;height:28px;color:var(--blue-2);flex-shrink:0}
.feature__title{font-size:13px;font-weight:700;color:var(--navy)}
.feature__text{font-size:12px;color:var(--muted);margin-top:1px}

/* ==========================================================================
   Category grid
   ========================================================================== */
/* Below 640px this is a horizontal scroll-snap row (3 cards per view, swipe
   for more) rather than a 2-column grid — the same .cat card markup/styling
   either way, only the container layout changes per breakpoint. */
.cat-grid{display:flex;gap:14px;overflow-x:auto;overflow-anchor:none;overscroll-behavior-x:contain;touch-action:pan-x;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
.cat-grid::-webkit-scrollbar{display:none}
/* A hidden scrollbar reads fine on mobile (swiping is the expected
   interaction there) but leaves desktop mouse users with no hint that more
   categories exist past the visible row — a subtle, always-present
   scrollbar restores that affordance without needing JS-driven arrows. */
@media (min-width: 900px){
  .cat-grid{scrollbar-width:thin;padding-bottom:10px}
  .cat-grid::-webkit-scrollbar{display:block;height:6px}
  .cat-grid::-webkit-scrollbar-track{background:var(--line-2);border-radius:99px}
  .cat-grid::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
  .cat-grid::-webkit-scrollbar-thumb:hover{background:var(--muted-2)}
}
/* 2.85, not 3, so the card gets a little more room to breathe and a sliver
   of the next card still peeks in as a scroll hint — reads as "3 per row"
   while giving the image inside more space than an exact 1/3 split would. */
.cat-grid .cat{flex:0 0 calc((100% - 14px * 2) / 2.85);scroll-snap-align:start}
/* Desktop stays a single scrollable row too, not a wrapping grid — with 6+
   categories a grid would wrap to a second row (an oddly short, off-center
   one when the count doesn't divide evenly); a fixed number per view plus
   horizontal scroll for the rest reads as one deliberate row regardless of
   how many categories the store has. */
@media (min-width: 640px){ .cat-grid .cat{flex-basis:calc((100% - 14px * 2) / 3)} }
@media (min-width: 900px){ .cat-grid .cat{flex-basis:calc((100% - 14px * 4) / 5)} }
.cat{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px;text-align:center;transition:box-shadow .2s,transform .2s;touch-action:pan-x}
.cat:hover{box-shadow:var(--shadow-card);transform:translateY(-2px)}
.cat__media{position:relative;display:block;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:var(--line-2);margin-bottom:8px}
.cat__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cat__title{font-size:11.5px;font-weight:700;color:var(--navy);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ==========================================================================
   Budget tabs
   ========================================================================== */
.budget{background:#fff}
.budget__tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.budget__tab{padding:9px 20px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.budget__tab.is-active{background:var(--navy);border-color:var(--navy);color:#fff}

/* ==========================================================================
   Product grid / card
   ========================================================================== */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (min-width: 640px){ .grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width: 960px){ .grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width: 1240px){ .grid--5{grid-template-columns:repeat(5,minmax(0,1fr))} }

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:var(--shadow-card);transform:translateY(-2px)}
.card__media{position:relative;aspect-ratio:1/1;background:var(--line-2);overflow:hidden}
/* position:absolute (not height:100% in normal flow) is load-bearing: a
   percentage height on a static-flow <img> doesn't reliably resolve
   against a parent sized purely by aspect-ratio, so very tall/narrow
   source photos fell through to the image's own intrinsic aspect ratio
   instead — stretching the card to match that one photo instead of
   staying the fixed square every other card uses. inset:0 sizes the img
   from the containing block's box directly, which doesn't have that gap. */
.card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card__flags{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:5px}
.badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:5px;font-size:11px;font-weight:800;color:#fff}
.badge--sale{background:var(--red)}
.badge--new{background:var(--blue)}
.badge--best{background:var(--gold);color:#3a2a00}
.badge--out{background:var(--muted)}
.card__wish{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:#fff;box-shadow:var(--shadow-card);display:flex;align-items:center;justify-content:center;color:var(--muted)}
.card__wish .icon{width:16px;height:16px}
.card__wish.is-on{color:var(--red)}
.card__wish.is-on .icon{fill:var(--red);stroke:var(--red)}
.card__quick{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;background:rgba(16,29,66,.88);color:#fff;font-size:11.5px;font-weight:700;opacity:0;transform:translateY(6px);transition:opacity .18s,transform .18s}
.card:hover .card__quick{opacity:1;transform:translateY(0)}
.card__quick .icon{width:14px;height:14px}
.card__body{padding:12px 12px 14px;display:flex;flex-direction:column;gap:5px;flex:1}
.card__cat{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.card__title{font-size:13px;font-weight:600;color:var(--ink);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.card__title a{color:inherit}
.stars{display:inline-flex;gap:1px}
.stars .icon{width:12px;height:12px;fill:none;stroke:var(--gold)}
.stars .icon.is-on,.stars .icon.is-half{fill:var(--gold)}
.rating{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--muted)}
.card__price{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-top:2px}
.price{font-size:15px;font-weight:800;color:var(--ink)}
.price__was{font-size:12px;color:var(--muted-2)}
.price__off{font-size:11px;font-weight:700;color:var(--green)}
.card__add{margin-top:auto;height:36px;font-size:11.5px;gap:6px}
.card__add .icon{width:14px;height:14px}

/* ==========================================================================
   Promo grid + centered CTA banner (home)
   ========================================================================== */
.promo-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width: 900px){ .promo-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))} }
.promo-tile{background:linear-gradient(160deg,var(--navy-tint),color-mix(in srgb,var(--navy-tint) 70%,var(--navy-3)));border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:10px;min-height:150px}
.promo-tile__title{font-size:14px;font-weight:800;color:var(--navy);line-height:1.25}
.promo-tile__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.promo-tile__chips a{background:#fff;border:1px solid var(--line);border-radius:7px;padding:6px 10px;font-size:11px;font-weight:700;color:var(--ink-2)}
.promo-centre{background:linear-gradient(155deg,var(--navy-tint),color-mix(in srgb,var(--navy-tint) 70%,var(--navy-3)));border-radius:14px;padding:28px 22px;display:flex;flex-direction:column;justify-content:center;gap:14px;grid-row:1/3}
@media (min-width: 900px){ .promo-centre{grid-column:2/4} }
.promo-centre h2{font-size:24px;line-height:1.2}
.promo-centre .stats{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--ink-2)}
.promo-centre .stats span{font-weight:700;color:var(--navy)}

/* ==========================================================================
   Deals band (banner + product row)
   ========================================================================== */
.deals{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width: 900px){ .deals{grid-template-columns:220px 1fr} }
.deals__banner{position:relative;border-radius:12px;overflow:hidden;background:linear-gradient(160deg,var(--navy-2),var(--navy));color:#fff;padding:22px;display:flex;flex-direction:column;justify-content:center;min-height:220px}
.deals__banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}
.deals__banner *{position:relative;z-index:1}
.deals__banner .eyebrow{color:var(--navy-chrome-muted)}
.deals__banner h3{color:#fff;font-size:22px;line-height:1.15}
.deals__banner .price-tag{margin-top:10px;background:#fff;color:var(--navy);display:inline-block;border-radius:7px;padding:6px 12px;font-weight:800;font-size:15px}

/* ==========================================================================
   Combo card
   ========================================================================== */
.combo-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-align:center;display:flex;flex-direction:column}
.combo-card__media{padding:18px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;background:var(--line-2)}
.combo-card__media img{border-radius:6px;aspect-ratio:1/1;object-fit:cover}
.combo-card__media--single{grid-template-columns:1fr}
.combo-card__body{padding:14px 16px 18px}
.combo-card__title{font-size:13.5px;font-weight:700;color:var(--ink);min-height:2.6em}
.combo-card__price{font-size:17px;font-weight:800;color:var(--navy);margin-top:6px}
.combo-card .btn{margin-top:12px}

/* ==========================================================================
   Testimonials
   ========================================================================== */
/* Below 760px: horizontal scroll-snap row, same .tcard markup/styling —
   one card at a time plus a peek of the next (testimonials carry real
   paragraphs of text, so unlike the category shelf this shows 1 per view
   rather than 3, or the quotes would be unreadably narrow). */
.tgrid{display:flex;gap:16px;overflow-x:auto;overflow-anchor:none;overscroll-behavior-x:contain;touch-action:pan-x;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
.tgrid::-webkit-scrollbar{display:none}
.tgrid .tcard{flex:0 0 86%;scroll-snap-align:start}
@media (min-width: 480px){ .tgrid .tcard{flex-basis:70%} }
@media (min-width: 760px){
  .tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow-x:visible}
  .tgrid .tcard{flex:initial}
}
/* touch-action set again here, not just on .tgrid: confirmed live that
   only this shelf (near-full-width 86% cards, unlike the ~35% category
   cards) still dragged the page, even with .tgrid already carrying the
   same touch-action:pan-x every other shelf has. Setting it on the actual
   card being dragged too, not only its scroll-container ancestor, removes
   any ambiguity about which element's touch-action the browser honors for
   the gesture. */
/* user-select:none is the actual fix, not touch-action: a testimonial
   quote is a real paragraph of prose — long enough that a drag starting on
   it is read by the browser as a text-selection drag, not a pan gesture.
   Text-selection auto-scroll (the browser scrolling the nearest scrollable
   ancestor to keep extending the selection as the pointer nears the
   viewport edge) is a completely separate subsystem from touch/wheel
   panning, so touch-action and overscroll-behavior never had any power
   over it — that's exactly why this shelf kept moving the page after both
   were already set correctly. Category cards never showed this because
   "Shirts" is too short to ever get selected mid-drag. */
.tcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;touch-action:pan-x;user-select:none;-webkit-user-select:none}
.tcard__text{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin:10px 0 14px}
.tcard__who{display:flex;align-items:center;gap:10px}
.tcard__who img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.tcard__name{font-size:13px;font-weight:700;color:var(--navy)}
.tcard__city{font-size:11.5px;color:var(--muted)}

/* ==========================================================================
   Dark info band ("What is X / Delivery / Installation")
   ========================================================================== */
.infoband{background:var(--navy-chrome);color:#fff}
.infoband__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:rgba(255,255,255,.1)}
@media (min-width: 800px){ .infoband__grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.infoband__item{background:var(--navy-chrome);padding:26px 24px}
.infoband__eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--navy-chrome-muted);font-weight:700}
.infoband__title{font-size:20px;font-weight:800;color:#fff;margin-top:4px}
.infoband__text{margin-top:10px;font-size:13px;color:var(--navy-chrome-muted);line-height:1.6}

.cta-dark{background:linear-gradient(160deg,color-mix(in srgb,var(--navy-chrome) 85%,black),var(--navy-chrome));color:#fff;text-align:center;padding:54px 20px}
.cta-dark .eyebrow{color:var(--navy-chrome-muted)}
.cta-dark h2{color:#fff;font-size:clamp(22px,3.4vw,32px);line-height:1.25;margin-top:8px}
.cta-dark .btn{margin-top:20px}

.values{background:#fff;border-block:1px solid var(--line)}
.values__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:20px 0}
@media (min-width: 760px){ .values__grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
.value{display:flex;align-items:center;gap:12px}
.value .icon{width:26px;height:26px;color:var(--blue-2);flex-shrink:0}
.value__title{font-size:13px;font-weight:700;color:var(--navy)}
.value__text{font-size:11.5px;color:var(--muted)}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{background:var(--navy-chrome);color:var(--navy-chrome-muted);padding-top:36px}
.footer__brand .logo__name,.footer__brand .logo__sub{color:#fff}
.footer__brand .logo__sub{color:var(--navy-chrome-muted)}
.footer__tagline{margin-top:12px;font-size:12.5px;color:var(--navy-chrome-muted);line-height:1.6;max-width:34ch}
.footer__main{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;padding-bottom:30px}
@media (min-width: 700px){ .footer__main{grid-template-columns:1.4fr repeat(3,minmax(0,1fr))} }
.footer__heading{font-size:13px;font-weight:700;color:#fff;margin-bottom:14px;letter-spacing:.01em}
.footer__links li{margin-bottom:9px}
.footer__links a{font-size:12.5px;color:var(--navy-chrome-muted);transition:color .2s}
.footer__links a:hover{color:#fff}
.footer__contact{display:flex;flex-direction:column;gap:10px}
.footer__contact li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--navy-chrome-muted)}
.footer__contact .icon{width:16px;height:16px;color:var(--navy-chrome-muted);flex-shrink:0}
.footer .socials{display:flex;gap:10px;margin-top:16px}
.footer .socials a{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#fff}
.footer .socials a:hover{background:var(--cyan-2)}
.footer .socials .icon{width:15px;height:15px}
.footer__apps{display:flex;gap:10px;margin-top:16px}
.footer__apps a{display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.2);border-radius:7px;padding:7px 12px;font-size:11px;color:#fff}
.footer__bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:6px}
.footer__bottom-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-block:16px}
.footer__bottom p{font-size:12px;color:var(--navy-chrome-muted)}
.pay{display:flex;align-items:center;gap:10px}
.pay span{font-size:11px;font-weight:800;color:#fff;background:rgba(255,255,255,.1);padding:5px 9px;border-radius:5px}

/* ==========================================================================
   Breadcrumbs / page heads
   ========================================================================== */
.crumbs{background:#fff;border-bottom:1px solid var(--line);font-size:12px}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;padding:11px 0}
.crumbs li{display:flex;align-items:center;gap:7px;color:var(--muted)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--blue)}
.crumbs__sep{color:var(--muted-2)}
.crumbs [aria-current]{color:var(--ink);font-weight:600}

.pagehead{background:#fff;border-bottom:1px solid var(--line);padding:22px 0}
.pagehead__title{font-size:24px}
.pagehead__sub{margin-top:5px;color:var(--muted);font-size:13px}

.phero{position:relative;background:linear-gradient(135deg,var(--navy-2),var(--navy));color:#fff;overflow:hidden}
.phero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4}
.phero__inner{position:relative;z-index:1;padding-top:34px;padding-bottom:34px}
.phero__title{color:#fff;font-size:clamp(20px,3vw,28px)}
.phero__sub{margin-top:6px;color:var(--navy-chrome-muted);font-size:13px}
.phero--plain{background:linear-gradient(135deg,var(--navy-2),var(--navy))}

/* ==========================================================================
   Listing (PLP): filters rail + toolbar
   ========================================================================== */
.shop-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media (min-width: 960px){ .shop-layout{grid-template-columns:250px 1fr} }

.filters{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;align-self:start}
/* Below 960px this is a left-edge slide-in drawer (same transform-based
   pattern as .navdrawer) instead of an inline block that used to push the
   whole product grid down the page every time it opened. Declared here,
   not just toggled from main.js, so it's correct on the very first paint
   rather than only once the script catches up. */
@media (max-width: 959px){
  .filters{
    position:fixed;inset:0 auto 0 0;width:min(340px,88vw);z-index:210;
    border:0;border-radius:0;padding:0;overflow-y:auto;
    transform:translateX(-100%);transition:transform .25s ease;
    box-shadow:var(--shadow-float);
  }
  .filters[data-open="true"]{transform:translateX(0)}
  .filters__form{padding:16px}
  .filters__head{position:sticky;top:0;background:#fff;padding:14px 16px;margin:-16px -16px 6px;border-bottom:1px solid var(--line);z-index:1}
  .filters__close{display:flex;align-items:center;justify-content:center;width:28px;height:28px;color:var(--ink-2)}
  .filters__close .icon{width:16px;height:16px}
  .filters__actions{position:sticky;bottom:0;background:#fff;padding:14px 16px;margin:14px -16px -16px;border-top:1px solid var(--line)}
}
.filters__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.filters__head h2{font-size:14px}
.filters__clear{font-size:11.5px;color:var(--blue);font-weight:600;margin-inline-start:auto;margin-inline-end:10px}
.filters__close{display:none}
.fgroup{border-top:1px solid var(--line-2);padding:12px 0}
.fgroup:first-of-type{border-top:0}
.fgroup summary{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;list-style:none}
.fgroup summary::-webkit-details-marker{display:none}
.fgroup summary .icon{width:14px;height:14px;transition:transform .2s}
.fgroup[open] summary .icon{transform:rotate(180deg)}
.fgroup__body{padding-top:10px}
.fgroup__list li{margin-bottom:9px}
.fgroup__list label{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2)}
.price-range{padding-top:4px}
.price-range input[type=range]{width:100%;accent-color:var(--navy-2)}
.price-range__vals{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-top:4px}
.filters__actions{margin-top:14px}

.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:16px}
.toolbar__filter{display:none}
@media (max-width: 959px){
  /* Below 960px the row wraps onto two lines (Filters/count, then
     sort/view-toggle) — .toolbar__right's margin-inline-start:auto is only
     meant to push it to the far end of a shared line with the count, and
     left alone it instead strands the wrapped second line flush against
     the right edge with nothing under Filters/count on the left. Giving it
     the full width and its own space-between puts sort back under Filters
     and keeps the view toggle at the right edge on purpose. */
  .toolbar__filter{display:inline-flex}
  .toolbar__right{flex-basis:100%;margin-inline-start:0;justify-content:space-between}
}
.toolbar__count{font-size:12.5px;color:var(--muted)}
.toolbar__right{display:flex;align-items:center;gap:14px;margin-inline-start:auto}
.sort{display:flex;align-items:center;gap:6px;position:relative}
.sort label{font-size:12px;color:var(--muted)}
.sort select{appearance:none;border:1px solid var(--line);border-radius:6px;padding:7px 26px 7px 10px;font-size:12.5px;color:var(--ink)}
.sort .icon{position:absolute;right:8px;width:12px;height:12px;pointer-events:none}
.viewswitch{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
/* Grid/list switching isn't a useful choice on a phone-width column anyway
   (there's only room for one product per row either way) — the toggle just
   crowds the toolbar there, so it only shows once the width can actually
   fit a real grid. */
@media (max-width: 699px){ .viewswitch{display:none} }
.viewswitch button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.viewswitch button.is-active{background:var(--navy);color:#fff}
.viewswitch .icon{width:15px;height:15px}

.empty{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:48px 20px;text-align:center}
.empty__icon{display:inline-flex;width:52px;height:52px;border-radius:50%;background:var(--line-2);align-items:center;justify-content:center;color:var(--muted);margin-bottom:14px}
.empty__icon .icon{width:24px;height:24px}
.empty h2{font-size:16px}
.empty p{margin-top:6px;color:var(--muted);font-size:13px}
.empty__actions{margin-top:16px}

.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:26px}
.pager__num,.pager__arrow{min-width:34px;height:34px;padding:0 6px;display:flex;align-items:center;justify-content:center;border-radius:6px;border:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.pager__num.is-current{background:var(--navy);border-color:var(--navy);color:#fff}
.pager__arrow .icon{width:14px;height:14px}
.pager__arrow--prev .icon{transform:rotate(180deg)}
.pager__arrow.is-disabled{opacity:.4}
.pager__gap{padding:0 4px;color:var(--muted)}

.subcats{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px}
.subcat{flex:0 0 auto;width:88px;text-align:center;font-size:11.5px;color:var(--ink-2);font-weight:600}
.subcat img{width:72px;height:72px;border-radius:50%;object-fit:cover;margin:0 auto 8px;border:1px solid var(--line)}

/* ==========================================================================
   Product detail (PDP)
   ========================================================================== */
.pdp{padding:24px 0 40px}
.pdp-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
@media (min-width: 960px){ .pdp-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.pdp-gallery{display:flex;gap:12px;min-width:0}
.pdp-thumbs{display:flex;flex-direction:column;gap:8px;width:64px;flex-shrink:0}
.pdp-thumb{position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden;aspect-ratio:1/1}
.pdp-thumb.is-active{border-color:var(--navy);border-width:2px}
.pdp-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
.pdp-main-image{position:relative;flex:1;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.pdp-main-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pdp-info{display:flex;flex-direction:column;min-width:0}
.pdp-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.pdp-meta-row{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--muted);margin-bottom:8px}
.pdp-title{font-size:clamp(19px,2.4vw,25px);line-height:1.28}
.pdp-rating-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;font-size:12.5px;color:var(--muted)}
.pdp-price-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:16px}
.pdp-price-current{font-size:28px;font-weight:800;color:var(--ink)}
.pdp-price-mrp{font-size:15px;color:var(--muted-2)}
.pdp-price-discount{font-size:12.5px;font-weight:700;color:var(--green)}
.pdp-tax-note{font-size:11.5px;color:var(--muted);margin-top:4px}
.pdp-stock--in,.pdp-stock--out{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;margin-top:8px}
.pdp-stock--in{color:var(--green);background:rgba(31,146,84,.1)}
.pdp-stock--out{color:var(--red);background:rgba(226,35,26,.1)}
.pdp-stock--in::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green)}
.pdp-stock--out::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--red)}
.pdp-short-desc{margin-top:12px;font-size:13.5px;color:var(--ink-2);line-height:1.6}
.pdp-qty-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:18px}
.pdp-variant{border-color:var(--line);color:var(--ink-2)}
.pdp-variant.is-active{background:var(--navy);color:#fff;border-color:var(--navy)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.qty button{width:34px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--ink-2)}
.qty input{width:42px;height:36px;border:0;border-inline:1px solid var(--line);text-align:center}
.pdp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.pdp-actions .btn{flex:1;min-width:150px}
.pdp-services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}
@media (min-width: 480px){ .pdp-services{grid-template-columns:repeat(3,minmax(0,1fr))} }
.pdp-service{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-size:11.5px;color:var(--ink-2)}
.pdp-service .icon{width:17px;height:17px;color:var(--blue-2);flex-shrink:0}
.pdp-delivery{margin-top:18px;border:1px solid var(--line);border-radius:8px;padding:14px}
.pdp-delivery__title{font-size:12.5px;font-weight:700;color:var(--ink)}
.pdp-delivery__form{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pdp-delivery__form input{flex:1;min-width:0;border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-size:12.5px}
.pdp-delivery__form button{border:1px solid var(--navy);border-radius:6px;padding:0 16px;font-size:12px;font-weight:700;color:var(--navy)}
.pdp-delivery__result{flex-basis:100%;margin-top:8px;font-size:12px;color:var(--muted)}
.pdp-delivery__result.is-error{color:var(--red)}
.pdp-sold-by{margin-top:16px;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.pdp-sold-by b{color:var(--ink)}

.pdp-tabs{margin-top:34px}
.pdp-tabs__nav{display:flex;gap:8px;border-bottom:1px solid var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pdp-tabs__nav::-webkit-scrollbar{display:none}
.pdp-tabs__btn{flex-shrink:0;padding:12px 18px;font-size:13px;font-weight:700;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.pdp-tabs__btn.is-active{color:var(--navy);border-color:var(--navy)}
.pdp-tabs__panel{display:none;padding:22px 0;font-size:13.5px;color:var(--ink-2);line-height:1.7}
.pdp-tabs__panel.is-active{display:block}
.spec-table{width:100%;border-collapse:collapse}
.spec-table td{padding:9px 12px;border-bottom:1px solid var(--line-2);font-size:13px}
.spec-table td:first-child{color:var(--muted);width:38%}

.review-summary{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.review-summary__avg{font-size:30px;font-weight:800;color:var(--navy)}
.review-item{border-top:1px solid var(--line-2);padding:16px 0}
.review-item__head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.review-item__name{font-weight:700;font-size:13px}
.review-item__date{font-size:11.5px;color:var(--muted)}

/* ==========================================================================
   Cart
   ========================================================================== */
.cart-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media (min-width: 900px){ .cart-layout{grid-template-columns:1fr 340px} }
/* padding-inline here, not on each row class (.co-item/.sline), so every
   plain "standalone card" usage (order-confirmation, account dashboard,
   order-detail, orders list) gets inset content for free. .cart-box__head
   cancels it back out with a matching negative margin so its border-bottom
   still reaches the card's full edge-to-edge width exactly as before —
   only its own padding (unchanged) insets the heading text. checkout.php's
   embedded summary card (border:0, nested inside an already-padded
   .summary) explicitly zeroes both back out inline so it isn't inset
   twice. */
.cart-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:16px;padding-inline:18px}
.cart-box:last-child{margin-bottom:0}
.cart-box__head{display:flex;align-items:center;justify-content:space-between;margin-inline:-18px;padding:16px 18px;border-bottom:1px solid var(--line)}
.cart-box__head h2{font-size:15px}
.cart-box__head span{font-size:12px;color:var(--muted)}
.citem{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line-2)}
.citem:last-child{border-bottom:0}
.citem__media{width:76px;height:76px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.citem__media img{width:100%;height:100%;object-fit:cover}
.citem__name{font-size:13.5px;font-weight:700;color:var(--ink)}
.citem__attrs{display:flex;flex-wrap:wrap;gap:10px;font-size:11.5px;color:var(--muted);margin-top:5px}
.citem__foot{display:flex;align-items:center;gap:16px;margin-top:12px;flex-wrap:wrap}
.linkbtn{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);font-weight:600}
.linkbtn:hover{color:var(--navy)}
.linkbtn .icon{width:14px;height:14px}
.linkbtn.is-on{color:var(--red)}
.citem__right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.citem__save{font-size:11px;color:var(--green)}

.summary{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;align-self:start}
.summary h2{font-size:15px;margin-bottom:12px}
.sline{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-2);padding:7px 0}
/* A coupon code + its full description need more room than a price-summary
   row's two short values — space-between just stranded the description far
   from its own code on a narrow card. Stacked reads as one coherent line
   instead of two ends of a big gap. */
.sline--offer{flex-direction:column;align-items:flex-start;gap:2px;padding:10px 0;border-bottom:1px solid var(--line-2)}
.sline--offer:last-child{border-bottom:0}
.sline--offer span:last-child{color:var(--muted);font-size:12px}
.sline--free span:last-child{color:var(--green);font-weight:700}
.sline--total{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;font-size:15px;font-weight:800;color:var(--ink)}
.sline--save{color:var(--green);font-size:12px}
.coupon{display:flex;gap:8px;margin:14px 0}
.coupon input{flex:1;min-width:0;border:1px solid var(--line);border-radius:7px;padding:0 12px;height:40px;font-size:12.5px}
.summary__cta{margin-top:6px}
.summary__note{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:11.5px;color:var(--muted)}
.summary__note .icon{width:14px;height:14px}
.trustrow{display:flex;justify-content:space-between;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line-2)}
.trustrow div{flex:1;text-align:center;font-size:10.5px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:5px}
.trustrow .icon{width:20px;height:20px;color:var(--blue-2)}

/* ==========================================================================
   Checkout
   ========================================================================== */
.checkout-steps{display:flex;align-items:center;justify-content:center;gap:0;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px;max-width:560px;margin:0 auto 26px;font-size:11.5px;font-weight:700}
.checkout-steps__step{flex:1;text-align:center;padding:9px 6px;border-radius:999px;color:var(--muted)}
.checkout-steps__step.is-active{background:var(--navy);color:#fff}
.checkout-steps__step.is-done{color:var(--navy)}

.co-preview{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;margin-bottom:20px}
.co-preview__item{flex:0 0 auto;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 12px;max-width:220px}
.co-preview__item img{width:36px;height:36px;border-radius:6px;object-fit:cover;flex-shrink:0}
.co-preview__item div{min-width:0}
.co-preview__sku{font-size:10px;color:var(--muted);font-weight:700}
.co-preview__name{font-size:11.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.co-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media (min-width: 960px){ .co-layout{grid-template-columns:1fr 360px} }
.co-block{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:16px}
.co-block__head{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--navy);margin-bottom:14px}
.co-block__head .icon{width:17px;height:17px;color:var(--blue-2)}

.payopt{display:block;border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-bottom:10px;cursor:pointer}
.payopt:has(input:checked){border-color:var(--navy);background:var(--navy-tint)}
.payopt__top{display:flex;align-items:center;gap:10px}
.payopt__name{font-size:13px;font-weight:700;color:var(--ink)}
.payopt__tag{margin-inline-start:auto;font-size:10.5px;background:var(--line-2);padding:3px 8px;border-radius:5px;color:var(--ink-2)}
.payopt__body{display:none;margin-top:12px;font-size:12.5px;color:var(--muted)}
.payopt:has(input:checked) .payopt__body{display:block}
.addr__lines{color:var(--ink-2)}
.paylogos{display:flex;gap:6px;margin-inline-start:auto}
.paylogos span{font-size:9px;font-weight:800;background:var(--line-2);padding:3px 6px;border-radius:4px}

.field-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.field-row--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.field{display:block;margin-bottom:12px}
.field__label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:5px}
.field input,.field textarea{width:100%;border:1px solid var(--line);border-radius:7px;padding:10px 12px;font-size:13px}
.field__hint{font-size:11px;color:var(--red)}
.form-note{font-size:12px;color:var(--muted)}

.co-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-2)}
.co-item img{width:46px;height:46px;border-radius:6px;object-fit:cover;border:1px solid var(--line)}
.co-item__name{font-size:12.5px;font-weight:600}
.co-item__qty{font-size:11px;color:var(--muted)}
.co-item__price{margin-inline-start:auto;font-size:12.5px;font-weight:700}

/* ==========================================================================
   Order confirmation
   ========================================================================== */
.confirm{text-align:center;padding:50px 0}
/* Order confirmation cards: a single narrow column on mobile/tablet reads
   fine, but the same 760px column left a wide, empty, unbalanced margin on
   real desktop widths. Order Summary and Delivery/Payment/Help split into
   two columns once there's room, using the freed-up width on purpose
   instead of just centering a narrow strip in it. */
.confirm-layout{max-width:calc(760px + var(--gutter)*2);display:flex;flex-direction:column;gap:16px}
.confirm-layout__col{display:grid;gap:16px;align-content:start}
@media (min-width:860px){
  .confirm-layout{max-width:calc(960px + var(--gutter)*2);flex-direction:row;align-items:start}
  .confirm-layout__col{flex:1;min-width:0}
}
.confirm__icon{display:inline-flex;width:72px;height:72px;border-radius:50%;background:#e7f7ee;color:var(--green);align-items:center;justify-content:center;margin-bottom:18px}
.confirm__icon .icon{width:34px;height:34px}
.confirm h1{font-size:24px}
.confirm p{margin-top:8px;color:var(--muted)}
.confirm__num{display:inline-block;margin-top:14px;background:var(--line-2);padding:8px 16px;border-radius:8px;font-weight:700;color:var(--navy)}
.confirm__actions{display:flex;justify-content:center;gap:12px;margin-top:24px}

/* ==========================================================================
   Account
   ========================================================================== */
.acct-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media (min-width: 860px){ .acct-layout{grid-template-columns:220px 1fr} }
/* Below 860px this was a tall stacked list (6 full-width rows) pushing all
   real content down the page — below that width it becomes a compact
   horizontal scroll-chip row instead, the same shelf pattern used
   elsewhere in this theme. At 860px+ it's back to the standard vertical
   sidebar, where a narrow side column is exactly what it's for. */
.acct-nav{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:8px;align-self:start;display:flex;gap:8px;overflow-x:auto;overflow-anchor:none;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.acct-nav::-webkit-scrollbar{display:none}
.acct-nav a{display:flex;align-items:center;gap:6px;flex:0 0 auto;padding:9px 14px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--page);white-space:nowrap}
.acct-nav a.is-active{background:var(--navy);color:#fff}
.acct-nav a .icon{width:15px;height:15px;flex-shrink:0}
@media (min-width: 860px){
  .acct-nav{display:block;padding:10px;overflow-x:visible}
  .acct-nav a{display:flex;width:100%;border-radius:7px;font-size:13px;font-weight:400;padding:11px 12px;background:none;margin-bottom:2px}
  .acct-nav a.is-active{background:var(--navy)}
  .acct-nav a .icon{width:17px;height:17px}
}
.acct-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.authbox{max-width:420px;margin:40px auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.authbox h1{font-size:20px;text-align:center}
.authbox p.sub{text-align:center;color:var(--muted);font-size:13px;margin-top:6px}
.authbox form{margin-top:20px}
.authbox .field{margin-bottom:14px}
.authbox__foot{text-align:center;margin-top:16px;font-size:12.5px;color:var(--muted)}
.authbox__foot a{color:var(--blue);font-weight:600}

.order-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin-bottom:12px}
.order-row__id{font-weight:700;font-size:13px}
.order-row__date{font-size:11.5px;color:var(--muted)}
.order-status{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--line-2);color:var(--ink-2)}
.order-status--paid,.order-status--delivered{background:#e7f7ee;color:var(--green)}
.order-status--pending{background:#fff4e0;color:#a86a00}
.order-status--cancelled{background:#fdeceb;color:var(--red)}

.stat-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:18px}
@media (min-width: 640px){ .stat-tiles{grid-template-columns:repeat(4,minmax(0,1fr))} }
.stat-tile{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;text-align:center}
.stat-tile__icon{display:inline-flex;width:34px;height:34px;border-radius:50%;background:var(--line-2);align-items:center;justify-content:center;color:var(--blue-2);margin-bottom:8px}
.stat-tile strong{display:block;font-size:19px;color:var(--navy)}
.stat-tile__label{font-size:11px;color:var(--muted)}
.orderhead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;background:var(--line-2)}
.orderhead__id a{font-weight:700;font-size:13px;color:var(--navy)}
.orderhead__date{font-size:11.5px;color:var(--muted);margin-top:2px}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--line-2);color:var(--ink-2)}
.pill--done{background:#e7f7ee;color:var(--green)}
.pill--transit{background:#fff4e0;color:#a86a00}
.pill--cancelled{background:#fdeceb;color:var(--red)}
.check{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);margin-bottom:10px}
.cart-actions{margin-top:6px}
.auth__row{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;font-size:12.5px}
.auth__row a{color:var(--blue);font-weight:600}
.addrgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-bottom:20px}
@media (min-width: 640px){ .addrgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.addrcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.addrcard__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.addrcard__label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--navy)}
.addrcard__label .icon{width:14px;height:14px;color:var(--blue-2)}
.addrcard__badge{font-size:10px;font-weight:700;background:#e7f7ee;color:var(--green);padding:3px 8px;border-radius:999px}
.addr__name{font-weight:700;font-size:13px;margin-bottom:4px}
.addr__lines{font-size:12.5px;color:var(--ink-2);line-height:1.6}
.addrcard__foot{display:flex;gap:16px;margin-top:12px}
.addrcard__foot a,.addrcard__foot button{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--blue);font-weight:600}
.addrcard--new{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);border-style:dashed;text-align:center;font-size:12.5px}
.addrcard__plus{display:inline-flex;width:34px;height:34px;border-radius:50%;background:var(--line-2);align-items:center;justify-content:center;color:var(--blue-2)}

.orderfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-top:1px solid var(--line-2)}
.orderfoot span strong{color:var(--navy)}
.orderfoot__actions{display:flex;gap:10px}

.steps{display:flex;align-items:center;padding:18px}
.step{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11.5px}
.step__n{width:26px;height:26px;border-radius:50%;background:var(--line-2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.step.is-done{color:var(--navy)}
.step.is-done .step__n{background:var(--green);color:#fff}
.step__n .icon{width:13px;height:13px}
.step__line{width:32px;height:2px;background:var(--line);margin:0 6px}
.step.is-done+.step__line{background:var(--green)}
@media (max-width: 560px){ .step__label{display:none} .step__line{width:16px} }

/* ==========================================================================
   Blog / CMS / FAQ / Policy
   ========================================================================== */
.blog-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
@media (min-width: 700px){ .blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.blog-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.blog-card__media{aspect-ratio:16/10;background:var(--line-2)}
.blog-card__media img{width:100%;height:100%;object-fit:cover}
.blog-card__body{padding:14px 16px}
.blog-card__date{font-size:11px;color:var(--muted)}
.blog-card__title{font-size:14.5px;font-weight:700;margin-top:6px;line-height:1.35}
.blog-post{max-width:760px;margin:0 auto}
.blog-post__media{border-radius:var(--radius);overflow:hidden;margin-bottom:20px}
.blog-post h1{font-size:26px}
.blog-post__meta{color:var(--muted);font-size:12.5px;margin-top:6px}
.rte{font-size:14px;line-height:1.75;color:var(--ink-2)}
.rte h2,.rte h3{margin-top:22px;margin-bottom:8px}
.rte p{margin-bottom:12px}
.rte ul,.rte ol{padding-left:22px;margin-bottom:12px;list-style:revert}

.faq-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media (min-width: 860px){ .faq-layout{grid-template-columns:1fr 260px} }
.infobox{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;align-self:start}
.infobox h3{font-size:14px;margin-bottom:12px}
.infobox li{margin-bottom:10px}
.infobox a{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2)}
.infobox a:hover{color:var(--blue)}
.infobox .icon{width:15px;height:15px;color:var(--blue-2);flex-shrink:0}
/* ==========================================================================
   Trending Now — homepage video section
   Card size/aspect/radius/visible-count are all admin-configurable via CSS
   custom properties set inline on [data-tv-track] (see components/
   trending-videos.php); this file only defines how those properties are
   consumed at each breakpoint.
   ========================================================================== */
/* Asymmetric on purpose: the section directly above already contributes
   its own 36px bottom padding (.section), so a full 36px here on top of
   that was reading as a much bigger gap than every other section-to-
   section transition on the page. */
.tv-section{padding-top:12px;padding-bottom:36px}
/* overflow-anchor:none opts this row out of the browser's scroll-anchoring
   heuristic. Anchoring watches for size changes in content near the top of
   the viewport and silently adjusts scroll position to compensate — the
   lazy-load observer setting a <video src> as a card nears the viewport is
   exactly the kind of DOM change that can trigger it, producing an
   unrelated jump in page scroll position that has nothing to do with the
   video's own (correctly aspect-ratio-locked) size. */
/* overscroll-behavior-x:contain is the actual fix for "swiping the video
   row also drags the page": once a horizontal swipe reaches the end of
   this row's own scroll range, the browser's default behavior is to keep
   honoring the rest of the gesture by handing it to the next scrollable
   ancestor up the tree (scroll chaining) — which for a page with no other
   horizontal scroller is the page itself, reading as the whole layout
   shifting sideways. contain stops the handoff right here. Same property
   added to .cat-grid and .tgrid, the other two horizontal shelves.

   touch-action:pan-x alone was the actual root cause, not a fix, and this
   was found only after two rounds of reported-still-broken: touch-action
   on a scrollable ancestor sets the "used" value for every touch starting
   anywhere inside it, and a value that excludes pan-y is NOT something a
   descendant can widen back — it isn't a per-element opt-in each layer
   re-grants, it's a ceiling the whole subtree inherits. .tv-viewport
   itself declaring pan-x-only therefore blocked vertical panning for
   every touch in this row, full stop, regardless of what .tv-card,
   .tv-card__frame or the <video> declared — exactly matching "stuck
   specifically over this row, fine above and below it". .cat-grid/.tgrid
   carry the same bare pan-x and were assumed to be a working counter-
   example, which is why this wasn't caught the first two times; pan-x
   pan-y (letting the browser's native axis-lock pick horizontal vs.
   vertical from the gesture itself, same as touch-action:auto minus
   pinch/double-tap-zoom) is the standard pattern for a horizontal
   carousel nested in a vertically scrolling page and is what actually
   fixes it. */
.tv-viewport{max-width:calc(var(--container) + var(--gutter)*2);margin-inline:auto;overflow-x:auto;overflow-anchor:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-block:4px}
.tv-viewport::-webkit-scrollbar{display:none}
.tv-track{display:flex;gap:16px;margin-inline:auto;padding-inline:var(--gutter);max-width:var(--tv-max-m,100%);scroll-snap-type:x proximity}
@media (min-width:700px){ .tv-track{max-width:var(--tv-max-t,100%)} }
@media (min-width:1000px){ .tv-track{max-width:var(--tv-max-d,100%)} }
.tv-card{flex:0 0 var(--tv-card-w,280px);scroll-snap-align:start;touch-action:pan-x pan-y}
.tv-card__frame{position:relative;width:100%;aspect-ratio:var(--tv-ratio,4/5);border-radius:var(--tv-radius,16px);overflow:hidden;background:var(--navy-2);touch-action:pan-x pan-y}
/* pointer-events:none, not just touch-action:pan-x: <video> elements get
   their own native gesture handling on several mobile browsers that isn't
   fully released by touch-action alone — confirmed live, scroll still
   stuck specifically over this element even with pan-x set on it and
   every ancestor. Play/mute are already separate buttons layered on top
   (.tv-card__play/.tv-card__mute), not the video itself, so making the
   video click-through has no effect on them — every touch on this area
   now lands on .tv-card__frame, a plain div with no special media
   handling, exactly like the working .cat-grid/.tgrid cards. */
.tv-card__video{width:100%;height:100%;object-fit:cover;display:block;background:#000;pointer-events:none}
.tv-card__gradient{position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(to top,rgba(8,14,32,.72),transparent);pointer-events:none}
.tv-card__play{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--navy);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-float);transition:opacity .2s ease,transform .2s ease}
.tv-card__play .icon{width:22px;height:22px}
.tv-card__play[hidden]{display:none}
.tv-card__frame:hover .tv-card__play{transform:scale(1.06)}
.tv-card__mute{position:absolute;right:10px;bottom:10px;width:32px;height:32px;border-radius:50%;background:rgba(16,29,66,.55);color:#fff;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.tv-card__mute .icon{width:16px;height:16px}
.tv-card__info{padding-top:10px}
.tv-card__title{font-size:13px;font-weight:600;color:var(--navy);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tv-card__price{margin-top:3px;font-size:13px}
.tv-card__price .price{font-weight:700;color:var(--navy)}
.tv-card__price .price__was{color:var(--muted-2);margin-left:6px;font-weight:400}
.tv-card__cta{margin-top:8px;width:100%;justify-content:center;padding-block:8px;font-size:12.5px}

.faqgroup{margin-bottom:20px}
.faqgroup__title{font-size:15px;color:var(--navy);margin-bottom:10px}
.faq-list{max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line);padding:16px 0}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item[open] summary .icon{transform:rotate(180deg)}
.faq-item__body{padding-top:10px;color:var(--ink-2);font-size:13.5px;line-height:1.65}

/* ==========================================================================
   Misc
   ========================================================================== */
.toast{position:fixed;left:50%;bottom:24px;translate:-50% 0;background:var(--navy-chrome);color:#fff;padding:12px 20px;border-radius:8px;font-size:13px;box-shadow:var(--shadow-float);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;transform:translate(-50%,8px);z-index:400}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}
.eyebrow{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-2)}
.container--narrow{max-width:760px}
.chiprow{display:flex;flex-wrap:wrap;gap:10px}
.chiprow a{border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:12.5px;color:var(--ink-2)}
.chiprow a:hover{border-color:var(--navy);color:var(--navy)}