/* ===== STRYK shared design system ===== */
:root{
  --bg:#0D0D0F;
  --surface:#111111;
  --surface-raised:#17171A;
  --line:#26262a;
  --orange:#F84B00;
  --gray:#C0C0C0;
  --white:#FFFFFF;
  --display:'Barlow Condensed', sans-serif;
  --label:'Barlow', sans-serif;
  --body:'Inter', sans-serif;

  /* Spacing scale — every padding/margin on the site should pull from this
     list rather than a one-off pixel value. Keeps vertical rhythm and card
     padding consistent across index/product/sport/collections/cart/checkout,
     which previously each invented their own numbers (16/18/20/22/24/26px
     for near-identical "card body" padding, 90/120/40px for "space under
     the fixed header", etc). */
  --space-3xs:4px;
  --space-2xs:8px;
  --space-xs:12px;
  --space-sm:16px;
  --space-md:20px;
  --space-lg:24px;
  --space-xl:32px;
  --space-2xl:48px;
  --space-3xl:64px;
  --space-4xl:96px;

  /* Standard distance from the bottom of the fixed header to where page
     content starts. Every top-level page wrapper (.breadcrumb, .hero,
     .tab-panel, .collections-panel, .cart-layout, .checkout-layout,
     .product-layout) should use this instead of a hand-picked value.
     cart.html/checkout.html were previously using 40px here — page content
     started almost flush against the header. */
  --header-clearance:160px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--white);
  font-family:var(--body);
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}

.carbon{
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 8px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 8px);
}

.eyebrow{
  font-family:var(--label);font-weight:700;text-transform:uppercase;
  letter-spacing:0.22em;font-size:0.72rem;color:var(--orange);
  margin-bottom:var(--space-md);
}
.eyebrow.muted{color:var(--gray);}

h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:0.01em;line-height:0.95;text-transform:uppercase;}

.wrap{max-width:1280px;margin:0 auto;padding:0 24px;}

/* ===== SHARED CARD BODY PADDING =====
   .product-info / .poster-copy / .collection-copy / .related-info were all
   the same visual pattern (image box + padded text block below it) but each
   page had picked a different padding (16 / 20 / 22-24-26 / 24px). One value
   now, used by all four. */
.product-info,
.poster-copy,
.collection-copy,
.related-info{padding:var(--space-lg);}

/* ===== SHARED FILTER PILL =====
   sport.html and collections.html each redefined an identical-looking pill
   with slightly different padding (12px 20px vs 14px 20px). One definition. */
.filter-pill{
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);
  border-radius:999px;padding:var(--space-xs) var(--space-lg);
  font-family:var(--label);font-size:0.85rem;color:var(--gray);
  cursor:pointer;transition:all .25s ease;
}
.filter-pill.active{background:rgba(248,75,0,0.14);border-color:rgba(248,75,0,0.32);color:#fff;}

/* ===== NAV ===== */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(13,13,15,0.72);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,0.06);
  transition:border-color .3s;
}
.nav{
  max-width:1280px;margin:0 auto;padding:18px 24px;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{display:flex;align-items:center;gap:12px;}
.logo-mark{width:56px;height:56px;transition:width .25s, height .25s;}
.logo-word{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:0.03em;color:var(--orange);}
.nav-links{display:flex;gap:26px;align-items:center;}
.nav-links a{
  font-family:var(--label);font-weight:600;font-size:0.78rem;
  text-transform:uppercase;letter-spacing:0.08em;color:var(--gray);
  position:relative;padding-bottom:4px;transition:color .25s;
  white-space:nowrap;
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--orange);transition:width .25s;
}
.nav-links a:hover{color:var(--white);}
.nav-links a:hover::after{width:100%;}
.nav-links a.active{color:var(--white);}
.nav-links a.active::after{width:100%;}
.nav-cta{display:flex;align-items:center;gap:22px;}
.cart-icon{position:relative;opacity:0.85;transition:opacity .2s;}
.cart-icon:hover{opacity:1;}
.cart-dot{
  position:absolute;top:-6px;right:-7px;background:var(--orange);
  color:#fff;font-size:0.6rem;font-weight:800;width:15px;height:15px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--label);
}
.account-icon{display:flex;align-items:center;justify-content:center;}
.account-initial{
  width:26px;height:26px;border-radius:50%;background:rgba(248,75,0,0.16);
  border:1px solid rgba(248,75,0,0.4);color:var(--orange);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:0.85rem;
}

/* ===== BACK BAR =====
   Sits directly under the main nav row, inside the same fixed header, on
   every page except Home. Uses real browser history (history.back()) so it
   matches whatever the user actually did to get here, with a fallback to
   Home when there's no history to go back to (e.g. a direct link opened in
   a new tab, where history.back() would silently no-op). */
.back-btn{
  display:inline-flex;align-items:center;gap:6px;
  margin:var(--header-clearance) 0 0 32px;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  cursor:pointer;
  font-family:var(--label);font-weight:600;font-size:0.78rem;
  text-transform:uppercase;letter-spacing:0.08em;color:var(--gray);
  padding:8px 16px;transition:color .2s, border-color .2s;
}
.back-btn:hover{color:var(--orange);border-color:rgba(248,75,0,0.4);}
.back-btn svg{flex-shrink:0;}
/* Every page's top wrapper (.breadcrumb, .tab-panel, .collections-panel,
   .bundles-hero, .auth-panel, .cart-layout, .checkout-layout, .story-hero)
   adds its own --header-clearance padding-top to clear the fixed header.
   Now that .back-btn sits between the header and that wrapper, its own
   margin already provides clearance — so whichever wrapper directly
   follows .back-btn gets that padding reduced to a small breathing-room
   gap instead of stacking a second full header-clearance on top. */
.back-btn + *{
  padding-top:var(--space-xl) !important;
}

/* ===== HAMBURGER ===== */
.hamburger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:38px;height:38px;background:transparent;border:none;cursor:pointer;
  padding:0;z-index:210;
}
.hamburger span{
  display:block;width:22px;height:2px;background:var(--white);
  transition:transform .3s ease, opacity .3s ease;margin:0 auto;
}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ===== MOBILE DRAWER ===== */
.mobile-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(320px, 82vw);
  background:var(--surface-raised);border-left:1px solid var(--line);
  z-index:200;transform:translateX(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;padding:100px 32px 40px;gap:8px;
  pointer-events:none;
  /* 8 nav links + account/cart/CTA can exceed viewport height on shorter
     phones (iPhone SE, landscape orientation) — scroll instead of clipping. */
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.mobile-drawer.open{transform:translateX(0);pointer-events:auto;}
.mobile-drawer a{
  font-family:var(--display);font-weight:700;font-size:1.5rem;
  text-transform:uppercase;color:var(--white);
  padding:16px 0;border-bottom:1px solid var(--line);transition:color .2s;
}
.mobile-drawer a:hover{color:var(--orange);}
.mobile-drawer .btn-order{margin-top:24px;width:100%;}
.drawer-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,0.55);backdrop-filter:blur(2px);
  z-index:190;opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.drawer-backdrop.open{opacity:1;pointer-events:auto;}
body.drawer-locked{overflow:hidden;}

/* ===== BUTTONS ===== */
.btn-order{
  font-family:var(--label);font-weight:800;font-size:0.85rem;
  text-transform:uppercase;letter-spacing:0.06em;color:#fff;
  background:var(--orange);border:none;border-radius:999px;padding:15px 34px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 6px 18px -6px rgba(248,75,0,0.55);
  cursor:pointer;transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-order:hover{transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(248,75,0,0.7); filter:brightness(1.08);}
.btn-order:active{transform:translateY(0px) scale(0.98);}
.btn-order.small{padding:11px 24px;font-size:0.75rem;}
.btn-order:disabled{opacity:0.6;cursor:default;transform:none;}
/* Anchor equivalent of :disabled — <a> has no native disabled state, so this
   class fakes it visually (dimmed, no hover lift) and pointer-events:none blocks
   mouse clicks. Keyboard activation is still blocked by the JS click guard on
   the element itself, since pointer-events:none doesn't stop Enter/Space. */
.disabled-link{
  opacity:0.6;cursor:default;pointer-events:none;
  transform:none !important;box-shadow:none !important;filter:none !important;
}
/* Circular icon-only add-to-cart button — used on card grids (homepage
   bestsellers, poster tiles, etc.) in place of a "View" text pill, so the
   primary action on a card is adding to cart rather than navigating away. */
.btn-add-icon{
  width:44px;height:44px;flex:0 0 auto;padding:0;border:none;border-radius:50%;
  background:var(--orange);color:#fff;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px -6px rgba(248,75,0,0.55);cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
}
.btn-add-icon svg{width:18px;height:18px;display:block;}
.btn-add-icon:hover{transform:translateY(-2px) scale(1.05); box-shadow:0 12px 28px -8px rgba(248,75,0,0.7); filter:brightness(1.08);}
.btn-add-icon:active{transform:translateY(0) scale(0.95);}
.btn-add-icon.is-added{background:#1c8f4d;}
.btn-add-icon:disabled{opacity:0.5;cursor:default;transform:none;box-shadow:none;}

/* Buy Now — sits between .btn-order (primary orange, adds to cart) and
   .btn-ghost (transparent, navigational). Solid white fill makes it read as
   a second real action, not a muted afterthought, since skipping straight
   to checkout is just as commit-worthy an action as adding to cart. */
.btn-buy-now{
  font-family:var(--label);font-weight:800;font-size:0.85rem;
  text-transform:uppercase;letter-spacing:0.06em;color:var(--bg);
  background:#fff;border:none;border-radius:999px;padding:15px 34px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 6px 18px -6px rgba(255,255,255,0.25);
  cursor:pointer;transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-buy-now:hover{transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(255,255,255,0.35); filter:brightness(0.95);}
.btn-buy-now:active{transform:translateY(0px) scale(0.98);}
.btn-buy-now:disabled{opacity:0.5;cursor:default;transform:none;box-shadow:none;}

.btn-ghost{
  font-family:var(--label);font-weight:700;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.08em;
  color:var(--white);background:transparent;border:1px solid rgba(255,255,255,0.25);
  border-radius:999px;padding:14px 28px;transition:border-color .2s, background .2s;
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
}
.btn-ghost:hover{border-color:var(--orange);background:rgba(248,75,0,0.08);}

/* ===== STRYKE DIVIDER ===== */
.stryke-divider{position:relative;height:64px;width:100%;background:var(--surface);}
.stryke-divider svg{position:absolute;top:-1px;left:0;width:100%;height:65px;display:block;}

/* ===== SECTION HEADERS ===== */
.section{padding:120px 0;position:relative;}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:56px;flex-wrap:wrap;gap:20px;
}
.section-head h2{font-size:clamp(2.2rem,4vw,3.4rem);}
.section-head p{font-family:var(--body);color:var(--gray);max-width:380px;font-size:0.95rem;line-height:1.6;}

/* ===== BREADCRUMB (product/cart pages) ===== */
.breadcrumb{
  padding:var(--header-clearance) 0 0;font-family:var(--label);font-size:0.78rem;
  text-transform:uppercase;letter-spacing:0.08em;color:var(--gray);
}
.breadcrumb a{transition:color .2s;}
.breadcrumb a:hover{color:var(--orange);}
.breadcrumb .sep{margin:0 8px;color:#555;}
.breadcrumb .current{color:var(--white);}

/* ===== WHY STRYK (shared block, used on multiple pages) ===== */
.why{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);}
.why-card{background:var(--bg);padding:56px 40px;}
.why-icon{
  width:52px;height:52px;border:1px solid rgba(248,75,0,0.4);border-radius:12px;
  display:flex;align-items:center;justify-content:center;margin-bottom:26px;color:var(--orange);
}
.why-card h3{font-size:1.5rem;margin-bottom:14px;text-transform:none;letter-spacing:0;font-weight:700;}
.why-card p{font-family:var(--body);color:var(--gray);font-size:0.92rem;line-height:1.65;}

/* ===== FOOTER ===== */
footer{background:var(--surface);border-top:1px solid var(--line);padding:70px 0 30px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:60px;}
.footer-brand .logo{margin-bottom:18px;}
.footer-brand p{font-family:var(--body);color:var(--gray);font-size:0.88rem;line-height:1.6;max-width:280px;}
.footer-col h4{font-family:var(--label);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--white);margin-bottom:20px;}
.footer-col a{display:block;font-family:var(--body);color:var(--gray);font-size:0.9rem;margin-bottom:12px;transition:color .2s;}
.footer-col a:hover{color:var(--orange);}
.footer-bottom{
  border-top:1px solid var(--line);padding-top:26px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
}
.footer-bottom p{font-family:var(--label);font-size:0.75rem;color:#7a7a7d;letter-spacing:0.03em;}
.socials{display:flex;gap:16px;}
.socials a{
  width:36px;height:36px;border:1px solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--gray);
  transition:all .25s;font-size:0.8rem;
}
.socials a:hover{border-color:var(--orange);color:var(--orange);}

/* ===== REVEAL ===== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
}

/* ===== SHARED RESPONSIVE ===== */
@media (max-width:1180px){
  .wrap{padding:0 24px;}
  .nav{padding:16px 24px;}
  .nav-links{display:none;}
  .hamburger{display:flex;}
  .nav-cta{gap:16px;}
  .nav-cta .btn-order{display:none;}
  .why-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .breadcrumb{padding-top:140px;}
  .back-btn{margin-top:140px;margin-left:24px;}
}
/* Short viewports (landscape phones, small laptops with the window resized
   short) — the 11-item mobile drawer needs tighter spacing to minimize how
   much it has to scroll. */
@media (max-height:700px){
  .mobile-drawer{padding-top:80px;gap:2px;}
  .mobile-drawer a{padding:10px 0;font-size:1.25rem;}
  .mobile-drawer .btn-order{margin-top:14px;}
}
@media (max-width:480px){
  .nav{padding:14px 16px;}
  .logo{gap:8px;}
  .logo-mark{width:36px;height:36px;}
  .logo-word{font-size:1.2rem;}
  .nav-cta{gap:10px;}
  .hamburger{width:32px;height:32px;}
  .back-btn{margin-left:16px;}
}
@media (max-width:600px){
  .footer-grid{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .mini-cart,.filter-drawer{width:100vw;}
  .mega-grid{grid-template-columns:repeat(2,1fr);}
}

/* =====================================================================
   QUIET LUXURY — NEGATIVE SPACE PASS
   Increases layout container padding blocks ~30-40% site-wide so gear has
   room to breathe. Section padding was 120px/80px — pushed up accordingly.
   Card interior padding gets a dedicated larger token rather than bumping
   --space-lg globally (that value is also used for tight contexts like
   .filter-pill).
========================================================================= */
:root{
  --space-card:34px;      /* was --space-lg (24px) for card bodies — +42% */
  --section-pad-y:168px;  /* was 120px — +40% */
  --section-pad-y-sm:112px; /* was 80px — +40% */
}
.section{padding:var(--section-pad-y) 0;}
@media (max-width:600px){
  .section{padding:var(--section-pad-y-sm) 0;}
}
.product-info,
.poster-copy,
.collection-copy,
.related-info{padding:var(--space-card);}
.wrap{padding:0 32px;}
@media (max-width:1180px){
  .wrap{padding:0 28px;}
}

/* ===== LAYERED TYPOGRAPHY (Apple-style) =====
   Utility for pairing oversized display headlines with a floating product
   image/poster that overlaps the headline edge. Apply `.layered-type` to a
   wrapper containing a heading + `.layered-float` image. */
.layered-type{position:relative;isolation:isolate;}
.layered-type h1,
.layered-type h2{position:relative;z-index:1;}
.layered-float{
  position:absolute;z-index:0;pointer-events:none;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,0.55));
  opacity:0.94;
}
.layered-float img{width:100%;height:auto;display:block;}
@media (max-width:900px){
  .layered-float{display:none;}
}

/* ===== TRUST ICONS — micro-animated ===== */
.why-icon{transition:transform .4s cubic-bezier(.34,1.56,.64,1);}
.why-card:hover .why-icon{transform:scale(1.08) rotate(-4deg);}
.why-icon svg{animation:trustIconIdle 5s ease-in-out infinite;}
.why-card:nth-child(2) .why-icon svg{animation-delay:.4s;}
.why-card:nth-child(3) .why-icon svg{animation-delay:.8s;}
@keyframes trustIconIdle{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-2px);}
}
.why-icon.icon-truck path:last-child,
.why-icon.icon-truck circle{transition:transform .3s ease;}
.why-card:hover .why-icon.icon-truck{animation:truckDrive .6s ease;}
@keyframes truckDrive{
  0%{transform:translateX(0);}
  30%{transform:translateX(-3px);}
  60%{transform:translateX(2px);}
  100%{transform:translateX(0);}
}
.why-card:hover .why-icon.icon-star svg{animation:starSpin .6s ease;}
@keyframes starSpin{
  0%{transform:rotate(0deg) scale(1);}
  50%{transform:rotate(15deg) scale(1.12);}
  100%{transform:rotate(0deg) scale(1);}
}

/* =====================================================================
   MEGA MENU
========================================================================= */
.mega-menu-backdrop{
  position:fixed;inset:0;top:160px;z-index:95;
  background:rgba(6,6,7,0.6);
  backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.mega-menu-backdrop.open{opacity:1;pointer-events:auto;}
body.mega-dimmed > *:not(header):not(.mega-menu):not(.mega-menu-backdrop){
  filter:blur(2px) brightness(0.85) saturate(0.9);
  transition:filter .35s ease;
}
body:not(.mega-dimmed) > *{
  transition:filter .35s ease;
}
.mega-menu{
  position:fixed;top:160px;left:0;right:0;z-index:96;
  display:flex;justify-content:center;
  opacity:0;transform:translateY(-8px);
  pointer-events:none;
  transition:opacity .28s cubic-bezier(.22,1,.36,1), transform .28s cubic-bezier(.22,1,.36,1);
}
.mega-menu.open{opacity:1;transform:translateY(0);pointer-events:auto;}
.mega-menu-inner{
  width:min(900px, 92vw);
  background:rgba(17,17,17,0.98);
  border:1px solid var(--line);
  border-top:1px solid rgba(248,75,0,0.35);
  border-radius:0 0 20px 20px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,0.75);
  padding:36px 40px;
}
.mega-head{margin-bottom:24px;}
.mega-head p{font-family:var(--body);color:var(--gray);font-size:0.9rem;margin-top:6px;}
.mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:24px;}
.mega-item{display:flex;flex-direction:column;gap:12px;}
.mega-thumb{
  aspect-ratio:1/1;border-radius:14px;overflow:hidden;
  background:radial-gradient(circle at top, rgba(255,255,255,0.08), transparent 42%), #0b0b0d;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);
  transition:border-color .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1);
}
.mega-thumb img{width:100%;height:100%;object-fit:contain;transition:transform .45s cubic-bezier(.22,1,.36,1);}
.mega-item:hover .mega-thumb{
  border-color:rgba(248,75,0,0.55);
  transform:translateY(-4px);
  box-shadow:0 20px 34px -16px rgba(248,75,0,0.35);
}
.mega-item:hover .mega-thumb img{transform:scale(1.08);}
.mega-item-name{
  font-family:var(--label);font-size:0.82rem;font-weight:600;color:var(--gray);
  transition:color .25s ease;
}
.mega-item:hover .mega-item-name{color:#fff;}
.mega-cta{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--label);font-weight:700;text-transform:uppercase;letter-spacing:0.1em;
  font-size:0.78rem;color:var(--orange);
}
.mega-empty{text-align:center;padding:20px 0;}
.mega-empty h4{font-family:var(--display);font-size:1.8rem;margin:10px 0 8px;text-transform:uppercase;}
.mega-empty p{font-family:var(--body);color:var(--gray);font-size:0.9rem;margin-bottom:18px;}
@media (max-width:1024px){
  .mega-menu, .mega-menu-backdrop{display:none;} /* mobile uses the drawer instead */
}

/* =====================================================================
   MINI CART DRAWER
========================================================================= */
.mini-cart-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,0.55);backdrop-filter:blur(2px);
  z-index:290;opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.mini-cart-backdrop.open{opacity:1;pointer-events:auto;}
.mini-cart{
  position:fixed;top:0;right:0;bottom:0;width:min(420px, 92vw);
  background:var(--surface-raised);border-left:1px solid var(--line);
  z-index:300;transform:translateX(100%);
  transition:transform .4s cubic-bezier(.19,1,.22,1);
  display:flex;flex-direction:column;
  pointer-events:none;
}
.mini-cart.open{transform:translateX(0);pointer-events:auto;}
.mini-cart-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:28px 28px 20px;border-bottom:1px solid var(--line);
}
.mini-cart-head h3{font-family:var(--display);font-size:1.5rem;text-transform:uppercase;}
.mini-cart-head h3 span{color:var(--orange);font-size:1rem;}
.mini-cart-close{
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.06);
  border:1px solid var(--line);color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color .2s, background .2s;
}
.mini-cart-close:hover{border-color:rgba(248,75,0,0.5);background:rgba(248,75,0,0.1);}

.mini-cart-items{flex:1;overflow-y:auto;padding:12px 28px;display:flex;flex-direction:column;gap:18px;}
.mini-cart-item{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:start;}
.mini-cart-item-media{
  width:64px;height:64px;border-radius:10px;overflow:hidden;
  background:#0b0b0d;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.mini-cart-item-media img{width:100%;height:100%;object-fit:contain;}
.mini-cart-item-info{display:flex;flex-direction:column;gap:6px;min-width:0;}
.mini-cart-item-name{
  font-family:var(--label);font-weight:600;font-size:0.9rem;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mini-cart-item-name:hover{color:var(--orange);}
.mini-cart-item-price{font-family:var(--display);font-weight:700;color:var(--orange);font-size:0.9rem;}
.mini-cart-qty{
  display:flex;align-items:center;gap:2px;border:1px solid var(--line);
  border-radius:999px;width:fit-content;padding:2px;
}
/* 44x44 hit target (WCAG/HIG minimum) via button box; the visible pill glyph
   stays the original 24px footprint by centering it inside the larger
   clickable area, so the mini-cart drawer's density doesn't change on
   desktop — only the actual tappable region grows on touch. */
.mini-cart-qty button{
  width:44px;height:44px;border-radius:50%;background:transparent;border:none;
  color:#fff;cursor:pointer;font-size:0.9rem;transition:background .2s;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.mini-cart-qty button:hover{background:rgba(248,75,0,0.15);}
.mini-cart-qty span{font-family:var(--label);font-weight:700;font-size:0.8rem;min-width:14px;text-align:center;}
.mini-cart-item-remove{
  background:transparent;border:none;color:#7a7a7d;cursor:pointer;padding:6px;
  transition:color .2s;
}
.mini-cart-item-remove:hover{color:#e15050;}
.mini-cart-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:60px 0;text-align:center;color:var(--gray);font-family:var(--body);
}

.mini-cart-footer{
  padding:22px 28px 28px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:12px;
}
.mini-cart-total-row{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--display);font-weight:700;font-size:1.1rem;margin-bottom:6px;
}
.mini-cart-total-row span:last-child{color:var(--orange);}
.mini-cart-footer .btn-order,
.mini-cart-footer .btn-ghost{width:100%;justify-content:center;}

/* =====================================================================
   FILTER DRAWER + VISUAL CHOICE CHIPS
========================================================================= */
.filter-trigger{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.12);
  border-radius:999px;padding:14px 24px;color:#fff;font-family:var(--label);
  font-weight:700;font-size:0.82rem;text-transform:uppercase;letter-spacing:0.08em;
  cursor:pointer;transition:border-color .25s, background .25s;
}
.filter-trigger:hover{border-color:rgba(248,75,0,0.5);background:rgba(248,75,0,0.08);}
.filter-drawer-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,0.55);backdrop-filter:blur(2px);
  z-index:290;opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.filter-drawer-backdrop.open{opacity:1;pointer-events:auto;}
.filter-drawer{
  position:fixed;top:0;left:0;bottom:0;width:min(400px, 90vw);
  background:var(--surface-raised);border-right:1px solid var(--line);
  z-index:310;transform:translateX(-100%);
  transition:transform .4s cubic-bezier(.19,1,.22,1);
  display:flex;flex-direction:column;
  pointer-events:none;
}
.filter-drawer.open{transform:translateX(0);pointer-events:auto;}
.filter-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:28px 28px 20px;border-bottom:1px solid var(--line);
}
.filter-drawer-head h3{font-family:var(--display);font-size:1.5rem;text-transform:uppercase;}
.filter-drawer-body{flex:1;overflow-y:auto;padding:24px 28px;}
.filter-group{margin-bottom:32px;}
.filter-group h4{
  font-family:var(--label);font-size:0.72rem;text-transform:uppercase;
  letter-spacing:0.14em;color:var(--gray);margin-bottom:16px;
}
.chip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.chip-grid-price{grid-template-columns:1fr;}
.chip{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1);
  border-radius:14px;padding:14px 16px;cursor:pointer;
  transition:border-color .25s ease, background .25s ease, transform .2s ease;
  text-align:left;
}
.chip:hover{transform:translateY(-2px);border-color:rgba(248,75,0,0.35);}
.chip.active{border-color:var(--orange);background:rgba(248,75,0,0.12);}
.chip-icon{
  width:26px;height:26px;flex-shrink:0;color:var(--orange);
  display:flex;align-items:center;justify-content:center;
}
.chip-icon svg{width:100%;height:100%;}
.chip-label{font-family:var(--label);font-weight:600;font-size:0.82rem;color:#fff;}
.filter-drawer-foot{
  padding:22px 28px 28px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:12px;
}
.filter-drawer-foot .btn-order,
.filter-drawer-foot .btn-ghost{width:100%;justify-content:center;}

/* ===== EMPTY STATE (no results / coming soon) =====
   Used by sport.html (Badminton "coming soon" + safety-net error state) and
   collections.html ("no products match those filters"). Previously only
   defined inside sport.html's local <style>, so collections.html's zero-
   results state rendered completely unstyled (no card, no padding, no
   centering) — moved here so every page using the class gets it. */
.sport-empty{
  background:var(--surface);border:1px solid var(--line);border-radius:22px;
  padding:60px;display:flex;flex-direction:column;align-items:center;gap:20px;
  text-align:center;
}
.sport-empty h2{font-size:2.7rem;}
.sport-empty p{color:var(--gray);max-width:500px;font-family:var(--body);line-height:1.8;}
.sport-empty .btn-group{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
@media (max-width:480px){
  .sport-empty{padding:40px 24px;}
  .sport-empty h2{font-size:2.1rem;}
}

/* ===== IMAGE FIT HELPERS ===== */
/* Make product/grid/related images consistently fill their containers */
.product-media img,
.related-media img,
.arsenal-media img,
.gallery-main img,
.gallery-thumb img { width:100%; height:100%; object-fit:contain; }

/* Thumbnails should preserve aspect while filling small box */
.gallery-thumb img { object-fit:contain; }

/* Hero visuals should contain within viewport */
.hero-visual img{ max-height:74vh; width:auto; object-fit:contain; transform:scale(1.25); }

/* Poster images: preserve full poster without cropping */
.collection-media img.poster,
.product-media img.poster {
  object-fit: contain;
  background: #0b0b0d;
}

/* Shared price display — current price + struck-through original, used on sport.html tiles
   and anywhere else that doesn't define its own .product-price rule inline */
.product-price {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--orange);
}
.product-price .old {
  font-family: var(--label);
  font-size: 0.85rem;
  color: #7a7a7d;
  text-decoration: line-through;
  font-weight: 600;
  margin-left: 8px;
}

/* Category label — orange, uppercase, branded. Only index.html defined this
   locally before; now shared so sport.html tiles match. */
.product-cat {
  font-family: var(--label);
  font-size: 0.68rem;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 8px;
  display: block;
}

.product-info h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 10px;
}
.product-info h3 a { color: inherit; text-decoration: none; transition: color .2s; }
.product-info h3 a:hover { color: var(--orange); }

/* sport.html tile cards — .tile-media has no dedicated box elsewhere,
   so define it here to match .product-media / .collection-media behavior */
.tile-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #0b0b0d;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tile-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}