/* ============================================================
   THE JERSEY HUB — core stylesheet
   Brand: navy ground, cream type, one lime accent
   ============================================================ */

:root {
  /* Grounds. Navy rather than near-black, taken off the logo's own outline,
     so the crest sits on the page as if it were printed there rather than
     pasted onto it. Each step up is the same navy lightened, which keeps the
     whole surface one colour instead of drifting towards grey. */
  --bg-deep: #010c1f;   /* topbar, hero-adjacent bands, footer */
  --bg:      #011532;   /* page — the logo's own navy */
  --surface:   #04203f; /* cards, product tiles, drawer, filter rail */
  --surface-2: #0a2c4f; /* raised: inputs, chips, hover */
  --surface-3: #113a61; /* highest: toast, flags, progress track */
  --line:      #163f66;

  /* The studio sweep the supplier photographs were shot on. Frames holding a
     photograph take this instead of --surface so the shot does not read as a
     grey rectangle pasted onto a navy tile. */
  --photo-bg: #e3e1e2;

  /* Text — the logo's cream, not white. White on this navy is colder than the
     mark it sits under. */
  --text:   #faf6e9;
  --text-2: #c3c9d4;
  --muted:  #8fa0b5;
  --steel:  #93a4b8;   /* the working grey — labels, captions, footer */

  /* Lime — the one accent, sampled off the logo. Loud on navy, which is the
     point: it is spent on CTAs, active state and sale only. The ramp runs
     from a pale tint for text on dark, down to a shade dark enough to carry
     cream type on top of it. */
  --accent-300: #d4fb7d;
  --accent-400: #c6fa4a;
  --accent-500: #b6f823;   /* the logo's lime */
  --accent-600: #8fc80c;
  --accent-700: #6b9707;

  /* Cream type on lime is unreadable; navy on lime is the pairing the logo
     itself uses, so anything filled with the accent takes this on top. */
  --on-accent: #011532;

  --sans: "Helvetica Neue", Helvetica, "Segoe UI", Arial, system-ui, sans-serif;

  --shadow-sm: 0 1px 2px rgba(8, 11, 15, .06), 0 2px 8px rgba(8, 11, 15, .05);
  --shadow-md: 0 8px 30px rgba(8, 11, 15, .10);
  --shadow-lg: 0 24px 60px rgba(8, 11, 15, .16);

  /* Uses a big monitor without running the content into the bezels. Halfway
     between the original 1240 and the full-width 1660 that read as too spread.
     Text blocks set their own narrower max-widths, so this only governs how
     far the product grids and the header reach. */
  --wrap: 1450px;
  --nav-h: 88px;
}

/* ---------- reset ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input, select { font: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.02; letter-spacing: -.02em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ---------- brand type ---------- */
.tect {
  font-weight: 800;
  font-style: italic;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent-500);
}
.eyebrow.on-dark { color: var(--accent-300); }

/* ============================================================
   LOGO
   ============================================================ */
/* The supplied lockup is a single piece of artwork — mark and wordmark
   together — so it is placed as one image rather than rebuilt from parts. */
/* The mark is the wordmark alone, so it is wide and short — roughly 3.4:1
   where the old lockup was 1.2:1. Sizing it by height the way a square-ish
   badge is sized would run it most of the way across the header, so these are
   set to give the same optical weight at the new proportions. */
.logo { display: inline-flex; align-items: center; flex: none; }
/* The lockup is a crest beside a wordmark, roughly two and a half times wider
   than it is tall. Sized by height like the old wordmark it came out barely
   legible, so these are set to give the wordmark the same cap height it had
   before — which means a taller box, and a header tall enough to hold it. */
.logo__img { height: 42px; width: auto; }
.logo:focus-visible { outline: 2px solid var(--accent-400); outline-offset: 4px; border-radius: 2px; }
.foot .logo__img { height: 52px; }
.mmenu .logo__img { height: 34px; }
@media (max-width: 620px) { .logo__img { height: 34px; } }

/* ============================================================
   NAV
   ============================================================ */
.topbar {
  background: var(--bg-deep);
  color: #a8a9b0;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
}
.topbar .wrap {
  min-height: 34px;
  padding-block: 9px;
  /* Deliberately not flex: the accented label is an element, and flex would
     make it its own item, so the line would wrap in three columns instead of
     as one run of text. */
  display: block;
  text-align: center;
  line-height: 1.45;
}
.topbar b { color: var(--accent-300); }

.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(14,14,16,.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__in {
  height: var(--nav-h);
  display: flex; align-items: center; gap: 28px;
}
.nav__links { display: flex; align-items: stretch; align-self: stretch; gap: 26px; margin-left: 14px; }
/* Scoped to top-level links so the dropdown's own items don't inherit the
   underline sweep. */
.nav__toplink {
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  position: relative; padding: 6px 0; color: var(--text-2);
  display: inline-flex; align-items: center; gap: 6px; align-self: center;
}
.nav__toplink::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--accent-500); transition: right .28s cubic-bezier(.2,.8,.2,1);
}
.nav__toplink:hover::after, .nav__toplink[aria-current="page"]::after { right: 0; }
.nav__toplink[aria-current="page"] { color: var(--text); }
.nav__toplink svg { width: 9px; height: 9px; transition: transform .2s; }

/* The item stretches the full nav height so there is no dead gap between the
   link and the panel for the pointer to fall through. */
.nav__item { position: relative; display: flex; align-items: center; align-self: stretch; }
.nav__panel {
  position: absolute; top: 100%; left: -14px; z-index: 70; min-width: 200px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 4px;
  padding: 6px; box-shadow: 0 20px 44px rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.nav__item:hover .nav__panel,
.nav__item:focus-within .nav__panel { opacity: 1; visibility: visible; transform: none; }
.nav__item:hover .nav__toplink svg,
.nav__item:focus-within .nav__toplink svg { transform: rotate(180deg); }
.nav__panel a {
  display: block; padding: 10px 12px; border-radius: 3px; color: var(--text-2);
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  transition: background .16s, color .16s;
}
.nav__panel a:hover { background: var(--surface-2); color: var(--text); }
.nav__panel a:focus-visible { outline: 2px solid var(--accent-400); outline-offset: -2px; }

.nav__spacer { flex: 1; }
.nav__actions { display: flex; align-items: center; gap: 6px; }
.iconbtn {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  transition: background .18s;
  position: relative;
}
.iconbtn:hover { background: var(--surface-2); }
.iconbtn svg { width: 19px; height: 19px; stroke: var(--text); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cart-count {
  position: absolute; top: 3px; right: 2px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--accent-500); color: var(--on-accent);
  font-size: 10px; font-weight: 800; line-height: 17px; text-align: center;
  transform: scale(0); transition: transform .22s cubic-bezier(.2,1.5,.4,1);
}
.cart-count.on { transform: scale(1); }

.burger { display: none; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 50px; padding: 0 30px;
  font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  border-radius: 4px;
  transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .2s, background .2s, color .2s;
  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent-500); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-400); box-shadow: 0 10px 26px rgba(182,248,35,.38); }
.btn--drip { background: linear-gradient(135deg, var(--accent-400), var(--accent-600)); color: var(--on-accent); }
.btn--drip:hover { box-shadow: 0 12px 30px rgba(182,248,35,.45); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.32); }
.btn--ghost:hover { background: var(--text); color: var(--bg); box-shadow: none; }
.btn--outline { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px rgba(242,242,244,.34); }
.btn--outline:hover { background: var(--text); color: var(--bg); box-shadow: none; }
.btn--sm { height: 42px; padding: 0 20px; font-size: 11px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  background: var(--bg-deep);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero__video {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%; object-fit: cover;
  /* The clip carries a generator watermark in its bottom-right corner. Scaling
     from the top-left pushes that corner outside the hero, which clips it off
     rather than painting over it. */
  transform: scale(1.16); transform-origin: 0 0;
}

/* Where the phone refused to autoplay. Same frame, same crop, same watermark
   trimmed off — the hero simply stops moving instead of showing a play button
   over itself. */
.hero--still {
  background-image: url('../img/hero-poster.jpg');
  background-size: 116%;
  background-position: 0 0;
  background-repeat: no-repeat;
}
/* Darkest on the left, where the headline sits, easing off towards the panel
   so the footage still reads on the right. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(90deg, rgba(14,14,16,.80) 0%, rgba(14,14,16,.55) 40%,
                           rgba(14,14,16,.22) 72%, rgba(14,14,16,.15) 100%),
    linear-gradient(180deg, rgba(14,14,16,.45) 0%, rgba(14,14,16,0) 30%,
                            rgba(14,14,16,0) 70%, rgba(14,14,16,.60) 100%);
}
.hero__glow {
  position: absolute; inset: -30% -10% auto auto;
  width: 780px; height: 780px;
  background: radial-gradient(circle at 50% 50%, rgba(182,248,35,.42), rgba(182,248,35,0) 62%);
  filter: blur(30px); z-index: -1;
  animation: float 14s ease-in-out infinite;
}
@keyframes float { 0%,100% { transform: translate3d(0,0,0) } 50% { transform: translate3d(-40px,34px,0) } }

.hero__streaks { position: absolute; inset: 0; z-index: -1; opacity: .5; }

.hero__in {
  display: grid; align-items: center;
  min-height: 470px; padding-block: 64px;
}
.hero h1 {
  font-size: clamp(42px, 10.6vw, 104px);
  font-weight: 800; font-style: italic; text-transform: uppercase;
  letter-spacing: -.045em; line-height: .88;
}
.hero h1 em { font-style: italic; color: var(--accent-400); }
.hero__sub {
  margin-top: 22px; max-width: 460px;
  color: #a7b4c1; font-size: 16.5px; line-height: 1.6;
}
.hero__cta { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.hero__stats {
  display: flex; gap: 38px; margin-top: 52px; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.1); max-width: 520px;
}
.hero__stats div b {
  display: block; font-size: 26px; font-weight: 800; font-style: italic; letter-spacing: -.03em;
}
.hero__stats div span {
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.hero__art { position: relative; display: grid; place-items: center; min-width: 0; }
/* The hero gives this column around 640px at desktop widths; capping the panel
   at 530 left it floating in its own space with the product small inside it. */
.hero__art > .hot { width: 100%; max-width: min(660px, 100%); min-width: 0; }

/* marquee */
.marquee {
  background: linear-gradient(90deg, var(--accent-600), var(--accent-400), var(--accent-600));
  color: #fff; overflow: hidden; padding: 13px 0;
}
.marquee__track {
  display: flex; gap: 46px; width: max-content;
  animation: slide 34s linear infinite;
  font-size: 12px; font-weight: 800; letter-spacing: .26em; text-transform: uppercase;
}
.marquee__track span { display: flex; align-items: center; gap: 46px; }
@keyframes slide { to { transform: translateX(-50%) } }

/* ============================================================
   SECTIONS
   ============================================================ */
.sec { padding: 86px 0; }
.sec--tight { padding: 60px 0; }
.sec--dark { background: var(--bg-deep); color: var(--text); }
.sec--paper { background: var(--surface); }

.sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.sec__head h2 {
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: -.04em;
}
.sec__head p { color: var(--muted); margin-top: 10px; max-width: 480px; font-size: 15px; }
.sec--dark .sec__head p { color: var(--text-2); }
.link-arrow {
  font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px; color: var(--accent-500); flex: none;
}
.link-arrow svg { width: 15px; height: 15px; transition: transform .22s; }
.link-arrow:hover svg { transform: translateX(5px); }

/* ============================================================
   CATEGORY TILES
   ============================================================ */
.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cat {
  position: relative; overflow: hidden; border-radius: 6px;
  min-height: 320px; display: flex; align-items: flex-end;
  padding: 26px; color: #fff; isolation: isolate;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.cat:hover { transform: translateY(-6px); }
.cat__bg { position: absolute; inset: 0; z-index: -2; }
.cat::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,11,15,0) 34%, rgba(8,11,15,.86) 100%);
}
.cat__art { position: absolute; inset: 0; z-index: -1; display: grid; place-items: center; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.cat:hover .cat__art { transform: scale(1.07) rotate(-2deg); }
.cat__art svg { width: 62%; opacity: .95; }
/* A photograph fills the tile edge to edge. `contain` left it letterboxed with
   a band of panel showing top and bottom — the tile read as unfinished on a
   phone, where it is the full width of the screen. The photographs are square
   and the tile is nearly square, so this crops a few percent and distorts
   nothing. SVG artwork above is unaffected: it is drawn to sit inset. */
.cat__art img.prod { width: 100%; height: 100%; object-fit: cover; }
.cat h3 { font-size: 25px; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: -.03em; }
.cat p { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--accent-300); margin-top: 7px; }

/* ============================================================
   PRODUCT GRID
   ============================================================ */
/* Columns follow the width rather than being fixed at four. With a wide
   container a fixed four would just inflate every tile; letting the count grow
   keeps a product card about the size it was and puts the extra room into
   showing more of them. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
/* Shop pages give a column to the filter rail. The minimum is set so the space
   left over still divides into the same card size the home page uses — at 300
   it did not, and the shop dropped to three oversized columns. */
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.card { position: relative; display: flex; flex-direction: column; }
.card__media {
  position: relative; aspect-ratio: 1 / 1; border-radius: 5px; overflow: hidden;
  background: var(--surface);
  display: grid; place-items: center;
}
.card__media svg.prod { width: 74%; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.card:hover .card__media svg.prod { transform: scale(1.06) translateY(-4px); }
.card__flags { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.flag {
  font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 3px; background: var(--surface-3); color: var(--text);
}
.flag--drip { background: var(--text); color: var(--bg); }
.flag--sale { background: var(--accent-500); color: var(--on-accent); }
.flag--gone { background: #000; color: #fff; }
/* Coming Soon is an announcement, not a disappointment — brand red, the same
   as the sale badge, rather than the black a sold-out tile wears. */
.flag--soon { background: var(--accent-500); color: var(--on-accent); }

/* The one thing worth offering on something that cannot be bought yet: a way
   to be told when it can. Sits where the buy button's small print would. */
.pdp__soon { margin-top: 16px; }
.pdp__soon p { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.pdp__soon small { display: block; margin-top: 8px; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
/* Sold out: still browsable, just plainly not for sale right now. The photo
   is left exactly as it is — only the badge and the button say so. */
.card--gone .card__quick .btn { background: var(--surface-3); color: var(--muted); }
.card__quick {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .25s, transform .25s cubic-bezier(.2,.8,.2,1);
}
.card:hover .card__quick { opacity: 1; transform: none; }
.card__body { padding: 14px 2px 0; display: flex; flex-direction: column; gap: 4px; }
.card__cat { font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
/* Dry Fit is the range's own name rather than a plain section heading, so it
   carries the brand red the way the tag line below the name does. */
.card__cat--dry { color: var(--accent-500); }

/* "Only 2 left in XL" under the add-to-bag row. Deliberately quiet: it is
   there so nobody picks a quantity we cannot fill, not to press anyone. */
.pdp__left { margin-top: 10px; font-size: 12.5px; color: var(--accent-400); }

/* Sizing advice, sat right under the buttons it applies to. Muted, with only
   the word "Recommended" carrying weight — it has to be read before a size is
   picked, but it is guidance, not a warning. */
.sizes__rec { margin-top: 11px; font-size: 12.5px; color: var(--muted); }
.sizes__rec b { color: var(--text); font-weight: 700; }
/* Same treatment as the .eyebrow on the product page, so a line like
   "Player Edition" reads identically wherever the product appears. */
.card__tag { display: block; margin-top: 5px; font-size: 10px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent-500); }
.card__name { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.card__price { font-size: 15px; font-weight: 800; font-style: italic; margin-top: 2px; display: flex; gap: 9px; align-items: baseline; }
.card__price s { color: var(--muted); font-weight: 600; font-style: normal; font-size: 13px; }
.card__swatch { display: flex; gap: 5px; margin-top: 7px; }
.card__swatch i { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }

/* ============================================================
   SHOP LAYOUT
   ============================================================ */
.pagehead { background: var(--bg-deep); color: #fff; padding: 54px 0 46px; position: relative; overflow: hidden; }
.pagehead h1 { font-size: clamp(34px, 5.6vw, 62px); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: -.045em; }
.pagehead p { color: var(--text-2); margin-top: 12px; max-width: 540px; }
.crumbs { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin-bottom: 16px; }
.crumbs a:hover { color: var(--accent-300); }

.shop { display: grid; grid-template-columns: 232px 1fr; gap: 40px; align-items: start; padding: 44px 0 90px; }
.filters { position: sticky; top: calc(var(--nav-h) + 20px); }
.fgroup { border-bottom: 1px solid var(--line); padding: 18px 0; }
.fgroup:first-child { padding-top: 0; }
/* The header is a button so it can be operated by keyboard on mobile, but on
   desktop it is styled as the plain label it used to be and never collapses. */
.fgroup__head {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 0; margin-bottom: 13px; text-align: left; cursor: default;
  font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text);
}
.fgroup__n {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--accent-500); color: var(--on-accent);
  font-size: 10px; line-height: 18px; letter-spacing: 0; text-align: center;
}
.fgroup__chev { display: none; }
.fopt { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14px; color: var(--text-2); cursor: pointer; }
.fopt input { accent-color: var(--accent-500); width: 15px; height: 15px; cursor: pointer; }
.fopt span.n { margin-left: auto; color: var(--muted); font-size: 12px; }
.sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.size-chip {
  min-width: 42px; height: 34px; padding: 0 8px; border-radius: 3px;
  display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--line); transition: .16s;
}
.size-chip:hover { box-shadow: inset 0 0 0 1.5px var(--text); }
.size-chip.on { background: var(--accent-500); color: var(--on-accent); box-shadow: none; }
.size-chip.off { opacity: .35; text-decoration: line-through; pointer-events: none; }

/* Filters that cannot apply to this page are removed, not dimmed — a dead
   option still costs a line of phone screen. .fopt, .size-chip and the mobile
   toggle all set an explicit display, which beats the [hidden] UA rule, so it
   has to be restated here. */
.filters [hidden], .fgroup[hidden], .filters[hidden], .filters__toggle[hidden] { display: none !important; }
/* Top padding follows the first *visible* group, not the first in the markup. */
.fgroup--first { padding-top: 0; }

.shopbar { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.shopbar .count { font-size: 13px; color: var(--muted); }
.shopbar select {
  margin-left: auto; height: 40px; padding: 0 14px; border-radius: 3px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 600;
}
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 12px; border-radius: 999px; background: var(--surface-2); display: inline-flex; gap: 7px; align-items: center;
}
.chip button { font-size: 14px; line-height: 1; color: var(--muted); }
.empty { padding: 70px 0; text-align: center; color: var(--muted); }

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.pdp { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; padding: 40px 0 90px; align-items: start; }
.gallery { display: grid; gap: 12px; }
.gallery__main {
  aspect-ratio: 1/1; background: var(--surface); border-radius: 6px;
  display: grid; place-items: center; overflow: hidden; position: relative;
}
.gallery__main svg.prod { width: 76%; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.thumb {
  aspect-ratio: 1/1; background: var(--surface); border-radius: 4px; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px transparent; transition: .18s; overflow: hidden;
}
.thumb.on { box-shadow: inset 0 0 0 2px var(--accent-500); }
.thumb svg.prod { width: 72%; }

.pdp__info h1 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: -.04em; }
.pdp__price { font-size: 26px; font-weight: 800; font-style: italic; margin-top: 14px; display: flex; align-items: baseline; gap: 12px; }
.pdp__price s { font-size: 17px; color: var(--muted); font-weight: 600; font-style: normal; }
.pdp__desc { color: var(--text-2); margin-top: 18px; font-size: 15px; line-height: 1.7; }
.pdp__block { margin-top: 26px; }
.pdp__block h4 { font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 11px; display: flex; justify-content: space-between; }
.pdp__block h4 a { color: var(--accent-500); letter-spacing: .1em; }
.colorway { display: flex; gap: 10px; }
.colorway button {
  width: 38px; height: 38px; border-radius: 50%; position: relative;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.colorway button.on::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 2px var(--accent-500);
}
.pdp__buy { display: flex; gap: 10px; margin-top: 28px; }
.qty { display: flex; align-items: center; box-shadow: inset 0 0 0 1.5px var(--line); border-radius: 4px; height: 50px; }
.qty button { width: 42px; height: 100%; font-size: 18px; color: var(--text-2); }
.qty span { width: 34px; text-align: center; font-weight: 800; }
.usp { display: grid; gap: 12px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.usp li { display: flex; gap: 11px; font-size: 13.5px; color: var(--text-2); align-items: center; }
.usp svg { width: 17px; height: 17px; flex: none; stroke: var(--accent-500); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 17px 0; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.acc__btn i { font-style: normal; font-size: 18px; color: var(--muted); transition: transform .22s; }
.acc__item.on .acc__btn i { transform: rotate(45deg); }
.acc__panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.acc__panel p { padding: 0 0 17px; font-size: 14px; color: var(--text-2); line-height: 1.7; }

/* ============================================================
   CART DRAWER
   ============================================================ */
.scrim { position: fixed; inset: 0; background: rgba(8,11,15,.55); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 90; backdrop-filter: blur(2px); }
.scrim.on { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 92vw);
  background: var(--surface); z-index: 100; display: flex; flex-direction: column;
  /* Same reasoning as .mmenu: the transform is the animation, not the hiding. */
  transform: translateX(101%); visibility: hidden; pointer-events: none;
  transition: transform .36s cubic-bezier(.2,.85,.25,1);
  box-shadow: var(--shadow-lg);
}
.drawer.on { transform: none; visibility: visible; pointer-events: auto; }
.drawer__head { display: flex; align-items: center; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.drawer__head h3 { font-size: 15px; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: -.01em; }
.drawer__head button { margin-left: auto; font-size: 22px; color: var(--muted); line-height: 1; }
.drawer__body { flex: 1; overflow-y: auto; padding: 8px 22px; }
.drawer__foot { border-top: 1px solid var(--line); padding: 20px 22px; }
.drawer__row { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 8px; color: var(--text-2); }
.drawer__row.total { font-size: 19px; font-weight: 800; font-style: italic; color: var(--text); margin: 14px 0 16px; }

.citem { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--surface-3); }
.citem__img { aspect-ratio: 1/1; background: var(--surface-2); border-radius: 4px; display: grid; place-items: center; }
.citem__img svg.prod { width: 78%; }
.citem b { font-size: 13.5px; font-weight: 700; display: block; }
.citem small { font-size: 11.5px; color: var(--muted); display: block; margin-top: 3px; }
.citem__qty { display: inline-flex; align-items: center; gap: 3px; margin-top: 8px; box-shadow: inset 0 0 0 1px var(--line); border-radius: 3px; }
.citem__qty button { width: 26px; height: 26px; font-size: 14px; color: var(--text-2); }
.citem__qty span { width: 22px; text-align: center; font-size: 12.5px; font-weight: 700; }
.citem__right { text-align: right; font-weight: 800; font-size: 13.5px; font-style: italic; }
.citem__right button { display: block; margin-top: 10px; font-size: 11px; color: var(--muted); text-decoration: underline; margin-left: auto; }
.cart-empty { text-align: center; padding: 60px 10px; color: var(--muted); }
.cart-empty svg { width: 46px; height: 46px; margin: 0 auto 14px; stroke: var(--surface-3); fill: none; stroke-width: 1.5; }

/* toast */
.toast {
  position: fixed; bottom: 26px; left: 50%; z-index: 120;
  /* 130% of its own height was not enough to clear the bottom edge: when empty
     the toast is only 26px tall, so ~18px of it sat visible at the foot of
     every page. Offset by its full height plus the gap, and take it out of the
     rendering entirely, so nothing can peek. */
  transform: translate(-50%, calc(100% + 40px));
  opacity: 0; visibility: hidden; pointer-events: none;
  /* visibility is deliberately NOT transitioned: a transitioned discrete
     property keeps its start value whenever transitions do not run (a
     background tab, reduced motion), which would leave the toast stuck
     hidden. It flips instantly; only movement and fade are animated. */
  transition: transform .38s cubic-bezier(.2,.9,.25,1), opacity .25s;
  background: var(--surface-3); color: var(--text); padding: 13px 22px; border-radius: 4px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 10px;
}
.toast.on { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.toast svg { width: 17px; height: 17px; stroke: var(--accent-400); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   FEATURE STRIPS
   ============================================================ */
.usps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.usps > div, .usps > a { background: var(--surface); padding: 30px 24px; display: flex; gap: 14px; align-items: flex-start; }
.usps > a { transition: background .18s; }
.usps > a:hover { background: var(--surface-2); }
.usps > a:hover b { color: var(--accent-400); }
.usps > a:focus-visible { outline: 2px solid var(--accent-400); outline-offset: -2px; }
.usps svg { width: 24px; height: 24px; flex: none; stroke: var(--accent-500); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.usps b { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.usps p { font-size: 13px; color: var(--muted); margin-top: 5px; line-height: 1.5; }

/* split feature */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.split__art { background: var(--surface); display: grid; place-items: center; padding: 60px; position: relative; overflow: hidden; min-height: 460px; }
.split__art svg.prod { width: 78%; max-width: 420px; position: relative; }
.split__copy { padding: 70px; display: flex; flex-direction: column; justify-content: center; }
.split__copy h2 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: -.04em; }
.split__copy p { color: var(--muted); margin-top: 16px; font-size: 15.5px; line-height: 1.7; max-width: 460px; }
.split__copy .btn { margin-top: 28px; align-self: flex-start; }
.speclist { display: grid; gap: 10px; margin-top: 24px; }
.speclist li { display: flex; gap: 11px; font-size: 14px; align-items: center; color: var(--text-2); }
.speclist i { width: 6px; height: 6px; background: var(--accent-500); transform: rotate(45deg); flex: none; }

/* newsletter */
.news { background: var(--bg-deep); color: #fff; padding: 76px 0; position: relative; overflow: hidden; }
.news__in { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; position: relative; }
.news h2 { font-size: clamp(28px, 3.8vw, 44px); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: -.04em; }
.news p { color: var(--text-2); margin-top: 14px; max-width: 420px; }
.news form { display: flex; gap: 10px; }
.news input {
  flex: 1; height: 52px; padding: 0 18px; border-radius: 4px; border: 0;
  background: rgba(255,255,255,.07); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.news input::placeholder { color: var(--muted); }
.news input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent-400); }
.news small { display: block; margin-top: 12px; color: #6f7078; font-size: 12px; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { background: var(--bg-deep); color: var(--muted); padding: 62px 0 0; border-top: 1px solid rgba(255,255,255,.07); }
.foot__cols { display: grid; grid-template-columns: 1.9fr 1fr 1fr; gap: 40px; padding-bottom: 46px; }
.foot h5 { font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.foot li { padding: 6px 0; font-size: 13.5px; }
.foot a:hover { color: var(--accent-300); }
.foot__about p { font-size: 13.5px; margin-top: 16px; max-width: 320px; line-height: 1.65; }
.socials { display: flex; gap: 8px; margin-top: 20px; }
.socials a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.06); transition: .2s; }
.socials a:hover { background: var(--accent-500); }
.socials svg { width: 17px; height: 17px; fill: currentColor; }
.foot__bar { border-top: 1px solid rgba(255,255,255,.08); padding: 22px 0; display: flex; gap: 18px; align-items: center; font-size: 12px; flex-wrap: wrap; }
.foot__bar .pays { margin-left: auto; display: flex; gap: 8px; }
.pay { width: 42px; height: 27px; border-radius: 3px; background: rgba(255,255,255,.08); display: grid; place-items: center; font-size: 8px; font-weight: 800; letter-spacing: .05em; color: #b6b8bf; }

/* reveal */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.rv.in { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .split__copy { padding: 50px 40px; }
}
@media (max-width: 900px) {
  .nav__links { display: none; }
  .burger { display: grid; }
  /* Scoped to .hero on purpose: the phone-width `.wrap` rule below sets
     `padding` as a shorthand, which resets padding-block to 0 and left the
     hero flush against both edges. A more specific selector survives it. */
  .hero .hero__in { grid-template-columns: minmax(0, 1fr); min-height: 0;
    padding-block: 48px 56px; }
  .hero__art { width: 100%; max-width: 500px; justify-self: center; margin-top: 26px; }
  .cats { grid-template-columns: 1fr; }
  /* Stacked, the 44px lead-in and 40px column gap read as dead space between
     the heading, the filter button and the products. */
  /* The page heading already names the filter, so the run-in to the grid is
     pure spacing — trimmed hard on a phone where it costs a third of a screen. */
  .pagehead { padding: 36px 0 22px; }
  .shop { grid-template-columns: 1fr; padding: 10px 0 70px; gap: 8px; }
  .shopbar { margin-bottom: 6px; gap: 8px; }
  .shopbar select { height: 42px; font-size: 14px; }
  .chip { padding: 5px 10px; font-size: 10.5px; }
  /* Keeps the count and the sort control on one row — wrapped, they cost
     another 45px directly above the grid. */
  .shopbar .count { flex: none; }
  .shopbar select { margin-left: auto; max-width: 58%; }
  .filters { position: static; }
  .pdp { grid-template-columns: 1fr; gap: 34px; }
  .split { grid-template-columns: 1fr; }
  .split__art { min-height: 340px; padding: 40px; }
  .usps { grid-template-columns: repeat(2, 1fr); }
  .news__in { grid-template-columns: 1fr; gap: 26px; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .grid, .grid--3 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .sec { padding: 58px 0; }
  .wrap { padding: 0 16px; }
  .hero__stats { gap: 22px; }
  .hero__stats div b { font-size: 20px; }
  .usps { grid-template-columns: 1fr; }
  .foot__cols { grid-template-columns: 1fr; gap: 28px; }
  .sec__head { flex-direction: column; align-items: flex-start; }
  .gallery__thumbs { grid-template-columns: repeat(4, 1fr); }
  .news form { flex-direction: column; }
  .btn { padding: 0 22px; }

  /* ----------------------------------------------------------------
     PHONES: the rest of this block

     Most of the traffic is on a phone, and the design was drawn on a
     laptop, so the type and the targets came down here rather than up.
     Everything below is that corrected, measured on a 390px screen.
     ---------------------------------------------------------------- */

  /* Form fields are set to 16px on phones so iOS does not zoom the page when
     one is focused — the rule lives beside .fld further down, because these
     selectors are more specific than a bare `input` and would beat it. */

  /* Chrome at the top of the screen. 88px of sticky header plus a topbar
     wrapping onto two lines was 136px — a sixth of the screen — before any
     shop. The variable is used by every sticky sidebar's offset too, so it
     is the one place to change it. */
  :root { --nav-h: 66px; }
  .topbar .wrap { min-height: 0; padding-block: 7px; line-height: 1.35; }

  /* Type. Nothing below is decorative: these are the words that say what a
     thing is, what it costs and what the button does. */
  .btn { font-size: 14px; letter-spacing: .1em; }
  .btn--sm { font-size: 13px; height: 44px; }
  .eyebrow { font-size: 12px; letter-spacing: .2em; }
  .flag { font-size: 11px; padding: 5px 10px; letter-spacing: .1em; }
  .link-arrow { font-size: 13px; letter-spacing: .1em; padding: 6px 0; }
  .hero__stats div span { font-size: 11px; letter-spacing: .12em; }
  .card__cat { font-size: 11px; letter-spacing: .12em; }
  .card__name { font-size: 16px; }
  .card__price { font-size: 16px; }
  .foot li { font-size: 15px; }
  .foot h5 { font-size: 12px; }

  /* Section dividers.

     On a laptop these sections are told apart by their shape — a split runs
     picture beside words, a grid runs three across. Stacked into one column on
     a phone that shape is gone, and several of them share the page's own
     background, so Choose Your Team, The Retro Vault and the Nike panel ran
     together as one wall of navy with no edge between them.

     A rule at the top of each, inset to the same margin the text uses so it
     reads as drawn rather than as a browser default, and carrying the brand's
     lime for its first few millimetres so it belongs to this site rather than
     to any site. */
  .sec, .split, .news { position: relative; }
  .sec::before, .split::before, .news::before {
    content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 2px;
    background: linear-gradient(to right, var(--accent-500) 0 34px, var(--line) 34px);
    /* A pseudo-element is painted before the element's own children, and a
       split leads with .split__art — a positioned panel with a background of
       its own, starting at exactly the same line. It buried the rule. The
       Retro Vault, which follows Choose Your Team, had no divider at all
       because of it, and the first check missed it by hiding the very panel
       doing the burying. */
    z-index: 1;
  }
  /* The split panels carried 40px of side padding from the desktop layout, so
     their words started 24px further in than every other section's. Invisible
     until a rule was drawn above them, at which point the rule and the heading
     under it plainly did not line up. */
  .split__copy { padding: 46px 16px; }

  /* Targets. A finger is about 9mm across; anything under 44px is a coin
     toss. The size chips are the worst of it — choosing a size is the one
     tap on the page that has to be right, and they were 34px tall. */
  .size-chip { min-width: 48px; height: 44px; font-size: 14px; }
  .foot li { padding: 0; }
  .foot li a { display: block; padding: 11px 0; }
  .link-arrow { min-height: 44px; }
  .socials a { width: 44px; height: 44px; }
  .socials svg { width: 19px; height: 19px; }
}

/* mobile menu */
.mmenu {
  position: fixed; inset: 0; z-index: 95; background: var(--bg-deep); color: #fff;
  /* Being off-screen must not be the only thing hiding this. Parked on the
     transform alone, the panel bled into the top of the page on Android
     Chrome — its first link, HOME, sat over the content in 26px italic caps.
     visibility takes it out of rendering entirely, whatever the geometry
     resolves to; the 0s delay holds it on screen for the slide-out. */
  transform: translateY(-100%); visibility: hidden; pointer-events: none;
  transition: transform .4s cubic-bezier(.2,.85,.25,1);
  padding: 26px; display: flex; flex-direction: column;
}
.mmenu.on { transform: none; visibility: visible; pointer-events: auto; }
.mmenu__top { display: flex; align-items: center; margin-bottom: 34px; }
.mmenu__top button { margin-left: auto; font-size: 28px; color: #fff; line-height: 1; }
.mmenu nav a {
  display: block; padding: 15px 0; font-size: 26px; font-weight: 800; font-style: italic;
  text-transform: uppercase; letter-spacing: -.03em; border-bottom: 1px solid rgba(255,255,255,.08);
}
.mmenu nav a:hover { color: var(--accent-400); }
/* Same type as a top-level link, with a chevron that turns when it opens. */
.mmenu__toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0; text-align: left; color: #fff;
  font-size: 26px; font-weight: 800; font-style: italic;
  text-transform: uppercase; letter-spacing: -.03em;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mmenu__toggle i {
  width: 11px; height: 11px; border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor; transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .22s; flex: none;
}
.mmenu__toggle[aria-expanded="true"] i { transform: rotate(-135deg) translate(-3px, -3px); }
.mmenu__sub { padding: 10px 0 14px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.mmenu nav .mmenu__sub a {
  padding: 9px 0; font-size: 15px; font-style: normal; font-weight: 700;
  letter-spacing: .12em; color: var(--text-2); border-bottom: 0;
}
.mmenu nav .mmenu__sub a:hover { color: var(--accent-400); }

/* droplet idle motion */
@media (prefers-reduced-motion: reduce) {
  .hero__glow, .marquee__track { animation: none !important; }
  .rv { opacity: 1 !important; transform: none !important; }
}

/* ---------- photo slot ----------
   img.prod drops into exactly the same frames as the vector fallback,
   so swapping in photography needs no layout changes. */
img.prod { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.card__media img.prod { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.card:hover .card__media img.prod { transform: scale(1.06) translateY(-4px); }

/* Photographs go up exactly as the supplier shot them, on their own studio
   sweep, so the frame behind them is that same light grey rather than white —
   on white every shot would read as a grey square floating in a white one.
   Vector-art products keep the dark tile, hence :has() rather than a blanket
   rule. The value matches the sweep the jersey shots were lit on; each image
   is padded to square with its OWN border colour, so the frame only shows
   where a shot is a different grey, and then only as a hairline. */
.card__media:has(img.prod),
.gallery__main:has(img.prod),
.thumb:has(img.prod),
.citem__img:has(img.prod) { background: var(--photo-bg); }

/* Frames holding a photograph lose their inset padding. It existed to give a
   cut-out room to breathe; a full photograph already has its own margin, and
   the padding only exposes a ring of frame in a slightly different grey. */
.thumb:has(img.prod) { padding: 0; }

/* The two home-page slideshows sit on dark bands with no frame of their own,
   so a photograph there needs one — otherwise it is the same rectangle
   floating on a dark band, just in a different place. */
/* The hot panel is excluded: its shots are transparent cut-outs, so a plate
   behind them would put back the square this was meant to remove. */
.split__art .split__slide:has(img.prod) { background: var(--photo-bg); border-radius: 8px; overflow: hidden; }
.split__art img.prod { width: 78%; max-width: 420px; height: auto; }

/* Inline SVG letterboxes inside an explicit width AND height (preserveAspectRatio),
   so constraining both stops the art overflowing wide/short tiles when the grid
   collapses to a single column. */
.cat__art svg { width: 62%; height: 74%; }
.split__art svg.prod, .split__art img.prod { width: 78%; height: 74%; max-width: 420px; }

/* ---------- back control ---------- */
.backnav { display: flex; }
.backlink {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px 9px 12px; border-radius: 3px;
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-2); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: color .18s, background .18s, box-shadow .18s;
}
.backlink:hover { color: var(--text); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--surface-3); }
.backlink:focus-visible { outline: 2px solid var(--accent-400); outline-offset: 2px; }
.backlink svg {
  width: 15px; height: 15px; flex: none;
  stroke: currentColor; fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s;
}
.backlink:hover svg { transform: translateX(-3px); }
/* on the dark page head the surface fill would disappear into the band */
.pagehead .backlink { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.pagehead .backlink:hover { background: rgba(255,255,255,.11); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); }
.pagehead .backnav { margin-bottom: 18px; }

/* ============================================================
   CHAT
   Launcher sits below the cart scrim so it dims with the page;
   the panel sits above it.
   ============================================================ */
/* ------------------------------------------------------------------
   STICKY BUY BAR  (phones, product page)

   On a phone the Add to bag button sits about 1,300px down the product
   page — past the picture, the price, the colours, the sizes and the
   description. That is nearly a screen and a half of scrolling before the
   shop offers to sell you anything, with no price in sight while you read.

   So once the real button scrolls out of sight, this takes its place at
   the bottom of the screen. It does not reimplement buying: its button
   forwards the tap to the real one, so the size check, the stock cap and
   the bag all behave identically and there is only ever one of them.

   Hidden in every direction by default — desktop never sees it, and a
   phone only sees it once the real button has gone off screen.
   ------------------------------------------------------------------ */
.buybar { display: none; }

@media (max-width: 620px) {
  .buybar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 78;
    display: flex; align-items: center; gap: 14px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(4, 32, 63, .94);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-top: 1px solid var(--line);
    transform: translateY(110%);
    transition: transform .28s cubic-bezier(.2,.85,.25,1);
    pointer-events: none;
  }
  .buybar.on { transform: none; pointer-events: auto; }
  .buybar__what { min-width: 0; }
  .buybar__name {
    display: block; font-size: 13px; color: var(--text-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .buybar__price {
    display: block; font-size: 19px; font-weight: 800; font-style: italic;
    letter-spacing: -.02em; color: var(--text);
  }
  .buybar .btn { flex: 1; max-width: 200px; }

  /* The bar and the chat button live in the same corner. The bar wins while
     it is up; chat steps above it rather than being buried under it. */
  body.has-buybar .chat-launcher { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}

.chat-launcher {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  display: inline-flex; align-items: center; gap: 9px;
  height: 50px; padding: 0 20px; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-400), var(--accent-600));
  color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 14px 34px rgba(182,248,35,.38);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .2s;
}
.chat-launcher:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(182,248,35,.5); }
.chat-launcher:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.chat-launcher svg {
  width: 19px; height: 19px; flex: none;
  stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

.chat-panel {
  position: fixed; right: 22px; bottom: 84px; z-index: 108;
  width: min(370px, calc(100vw - 44px)); max-height: min(560px, calc(100vh - 130px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 26px 60px rgba(0,0,0,.62);
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.98);
  transition: opacity .22s, transform .22s cubic-bezier(.2,.8,.2,1), visibility .22s;
}
.chat-panel.on { opacity: 1; visibility: visible; transform: none; }

.chat__head {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px; border-bottom: 1px solid var(--line); background: var(--bg-deep);
}
.chat__head b { display: block; font-size: 14px; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: -.01em; }
.chat__head small { display: block; margin-top: 3px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.chat__head button { margin-left: auto; font-size: 22px; line-height: 1; color: var(--muted); }
.chat__head button:hover { color: var(--text); }

.chat__msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.chat__msg { max-width: 86%; }
.chat__msg p {
  padding: 10px 13px; border-radius: 10px; font-size: 13.5px; line-height: 1.55;
  background: var(--surface-2); color: var(--text-2);
}
.chat__msg--you { align-self: flex-end; }
.chat__msg--you p { background: var(--accent-600); color: var(--on-accent); border-bottom-right-radius: 3px; }
.chat__msg--bot p { border-bottom-left-radius: 3px; }
.chat__msg a { color: var(--accent-300); text-decoration: underline; }
/* A pointer to a page is a button, not a sentence telling you to go and look. */
.chat__link {
  display: inline-flex; align-items: center; margin-top: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--accent-500); color: var(--on-accent) !important;
  font-size: 12px; font-weight: 800; letter-spacing: .06em;
  text-decoration: none !important; transition: .16s;
}
.chat__link:hover { background: var(--accent-400); }
.chat__link:focus-visible { outline: 2px solid var(--accent-300); outline-offset: 2px; }
.chat__who {
  display: block; margin-bottom: 5px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}

/* A reply from a person has to be unmistakably not the bot — a live label
   and a lit left edge, so nobody mistakes one for the other. */
.chat__who--live { color: var(--accent-300); }
.chat__who--live::before {
  content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px;
  border-radius: 50%; background: var(--accent-400); vertical-align: middle;
}
.chat__msg--agent p {
  border-bottom-left-radius: 3px;
  background: var(--surface-3); color: var(--text);
  box-shadow: inset 2px 0 0 var(--accent-500);
}

/* Unread reply marker on the launcher. */
.chat-dot {
  position: absolute; top: 6px; right: 8px; width: 10px; height: 10px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--accent-600);
}

/* WhatsApp capture, offered once when a question needs a person. */
.chat__wa { padding: 0 16px 12px; }
.chat__wa p { font-size: 12.5px; color: var(--text-2); margin-bottom: 8px; }
.chat__wa-row { display: flex; gap: 8px; }
.chat__wa-row input {
  flex: 1; min-width: 0; height: 38px; padding: 0 12px; border: 0; border-radius: 4px;
  background: var(--surface-2); color: var(--text); font-size: 13.5px;
}
.chat__wa-row input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--accent-500); }
.chat__wa-no {
  margin-top: 8px; font-size: 11.5px; color: var(--muted); text-decoration: underline;
}
.chat__wa-no:hover { color: var(--text-2); }

.chat__topics { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.chat__topics button {
  padding: 7px 12px; border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--line); transition: .16s;
}
.chat__topics button:hover { color: var(--text); background: var(--surface-2); }
.chat__topics button:focus-visible { outline: 2px solid var(--accent-400); outline-offset: 1px; }

.chat__form { display: flex; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.chat__form input {
  flex: 1; height: 42px; padding: 0 13px; border: 0; border-radius: 4px;
  background: var(--surface-2); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line);
}
.chat__form input::placeholder { color: var(--muted); }
.chat__form input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent-400); }

@media (max-width: 620px) {
  .chat-launcher { right: 14px; bottom: 14px; height: 46px; padding: 0 16px; }
  .chat-launcher span { display: none; }
  .chat-panel { right: 10px; left: 10px; bottom: 72px; width: auto; max-height: calc(100vh - 110px); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-panel, .chat-launcher { transition: none; }
}

/* Measured, and the old note here was wrong: four labels wrap onto three
   lines on a phone at 10px as readily as at 11px — the strip is long, not the
   type. So the type goes up, because 10px was legible on a laptop pretending
   to be a phone and squinty on an actual one, and the tracking comes off to
   pay for it. Three lines at 11px is 44px against 41px at 10px. */
@media (max-width: 620px) {
  .topbar { font-size: 11px; letter-spacing: .04em; }
}


/* ============================================================
   HOTTEST SELLERS
   No card: it sits straight on the hero. The only container is a
   soft ember glow behind the product, which doubles as the light
   that lifts a dark product off a near-black ground.
   ============================================================ */
.hot { position: relative; isolation: isolate; padding: 4px 0 8px; }
.hot__glow {
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(46% 34% at 50% 47%,
    rgba(255,150,20,.36), rgba(182,248,35,.16) 45%, transparent 72%);
  filter: blur(24px);
  animation: ember 3.6s ease-in-out infinite;
}
@keyframes ember {
  0%, 100% { opacity: .74; transform: translateY(0) scale(1); }
  50%      { opacity: 1;   transform: translateY(-6px) scale(1.05); }
}

.hot__head { display: flex; align-items: center; justify-content: center; gap: 14px; }
.hot__flame { font-size: clamp(28px, 3.0vw, 40px); line-height: 1; }
.hot__head h3 {
  font-size: clamp(34px, 3.7vw, 50px);
  font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: -.035em;
  background: linear-gradient(94deg, #ffd79a, #ff9314 44%, var(--accent-400));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Fixed stage height stops the hero jolting as slides swap. */
.hot__stage { margin-top: 20px; min-height: 458px; display: grid; }
.hot__slide {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
}
.hot__slide--in { animation: hotIn .45s cubic-bezier(.2,.8,.2,1); }
@keyframes hotIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* No plate behind the product — it floats on the ember light. */
/* Larger than it was, now that there is no plate to sit inside — the cut-out
   carries its own transparent margin, so the garment reads bigger again. */
.hot__media { width: 100%; max-width: 436px; aspect-ratio: 1/1; display: grid; place-items: center; }
.hot__media svg.prod { width: 100%; filter: drop-shadow(0 16px 30px rgba(0,0,0,.55)); }
.hot__media img.prod { width: 100%; height: 100%; object-fit: contain; }
.hot__cat { margin-top: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #c8a88f; }
.hot__name { font-size: 30px; font-weight: 700; color: var(--text); }
.hot__name:hover { color: #ffd79a; }
.hot__price { font-size: 36px; font-weight: 800; font-style: italic; display: flex; gap: 10px; align-items: baseline; }
.hot__price s { font-size: 14px; font-weight: 600; font-style: normal; color: var(--muted); }
.hot__cta { margin-top: 18px; }

.hot__dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.hot__dots button {
  width: 8px; height: 8px; padding: 0; border-radius: 50%;
  background: rgba(255,255,255,.24); transition: background .2s, width .2s;
}
.hot__dots button:hover { background: rgba(255,147,20,.75); }
.hot__dots button.on { width: 24px; border-radius: 999px; background: linear-gradient(90deg, #ff9314, var(--accent-500)); }
.hot__dots button:focus-visible { outline: 2px solid #ff9314; outline-offset: 3px; }

@media (max-width: 620px) {
  .hot__stage { min-height: 430px; }
  .hot__media { max-width: 300px; }
  .hot__name { font-size: 24px; }
  .hot__price { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .hot__glow { animation: none; }
  .hot__slide--in { animation: none; }
}

/* Anchored sections must clear the sticky header when scrolled to. */
section[id] { scroll-margin-top: 108px; }

/* html carries scroll-behavior: smooth, which would otherwise animate anchor
   jumps even for visitors who have asked for reduced motion. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Secondary note under a split section's body copy. Needs to outrank
   `.split__copy p`, hence the two-class selector. */
.split__copy .split__note {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--steel);
}

/* ---------- jersey slideshow in the split panel ---------- */
.split__art .split__slides {
  /* flexes inside the arrow row rather than claiming the full panel width */
  flex: 1 1 auto; min-width: 0; max-width: 340px; aspect-ratio: 1 / 1;
  display: grid; place-items: center;
}
.split__art .split__slide { display: grid; place-items: center; width: 100%; height: 100%; }
.split__art .split__slide svg.prod,
.split__art .split__slide img.prod { width: 100%; height: 100%; object-fit: contain; }
.split__slide--in { animation: jerseyIn .5s cubic-bezier(.2,.8,.2,1); }
@keyframes jerseyIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .split__slide--in { animation: none; } }

/* ============================================================
   HELP PAGES
   ============================================================ */
.help { display: grid; grid-template-columns: 232px 1fr; gap: 44px; align-items: start; padding: 44px 0 90px; }
/* Grid items default to min-width:auto and refuse to shrink below their
   content, which stops .prose__scroll from ever scrolling and pushes the
   whole page sideways on a phone. */
.help > * { min-width: 0; }
.help__nav { position: sticky; top: calc(var(--nav-h) + 20px); display: grid; gap: 3px; }
.help__nav a {
  display: block; padding: 11px 13px; border-radius: 4px;
  font-size: 13px; font-weight: 700; color: var(--text-2); transition: background .16s, color .16s;
}
.help__nav a:hover { background: var(--surface); color: var(--text); }
.help__nav a[aria-current="page"] {
  background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line);
}
.help__nav a:focus-visible { outline: 2px solid var(--accent-400); outline-offset: 2px; }

.prose { max-width: 68ch; }
.prose h2 {
  font-size: 20px; font-weight: 800; font-style: italic; text-transform: uppercase;
  letter-spacing: -.02em; margin-top: 38px;
}
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--text-2); font-size: 15px; line-height: 1.75; margin-top: 12px; }
.prose b { color: var(--text); }
.prose ul { margin-top: 14px; display: grid; gap: 10px; }
.prose li { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.65; color: var(--text-2); }
.prose li::before {
  content: ""; width: 6px; height: 6px; margin-top: 8px; flex: none;
  background: var(--accent-500); transform: rotate(45deg);
}
.prose a { color: var(--accent-300); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--text); }
.prose a.btn { color: #fff; text-decoration: none; margin-top: 18px; }
/* wide tables scroll inside their own box rather than the page */
.prose__scroll { overflow-x: auto; margin-top: 16px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 420px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.prose th {
  color: var(--text); font-size: 10.5px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
.prose td { color: var(--text-2); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .help { grid-template-columns: 1fr; gap: 26px; padding-top: 30px; }
  .help__nav { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
}

/* payments: two named methods rather than a row of card badges */
.pay { width: auto; padding: 0 12px; font-size: 10px; letter-spacing: .08em; }

/* ---------- jersey slideshow controls ---------- */
.split__carousel { display: grid; gap: 20px; justify-items: center; width: 100%; }
.split__stage { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; }
.split__arrow {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  display: grid; place-items: center; color: var(--text-2);
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line);
  transition: color .18s, background .18s, box-shadow .18s, transform .18s;
}
.split__arrow:hover {
  color: var(--text); background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--surface-3); transform: scale(1.06);
}
.split__arrow:focus-visible { outline: 2px solid var(--accent-400); outline-offset: 2px; }
.split__arrow svg {
  width: 18px; height: 18px; stroke: currentColor; fill: none;
  stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
}
.split__arrow--next svg { transform: rotate(180deg); }

.split__dots { display: flex; gap: 8px; }
.split__dots button {
  width: 8px; height: 8px; padding: 0; border-radius: 50%;
  background: rgba(255,255,255,.24); transition: background .2s, width .2s;
}
.split__dots button:hover { background: var(--accent-400); }
.split__dots button.on {
  width: 24px; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-400), var(--accent-600));
}
.split__dots button:focus-visible { outline: 2px solid var(--accent-400); outline-offset: 3px; }

@media (max-width: 620px) {
  .split__stage { gap: 8px; }
  .split__arrow { width: 38px; height: 38px; }
}

/* ============================================================
   INSTALL PROMPT
   Sits above the chat launcher, clear of it, and respects the
   home-screen safe area on notched phones.
   ============================================================ */
/* The offer itself: a centred card over a dimmed page, shown shortly after
   arriving. A bar along the bottom got ignored, which is the only thing worse
   than being slightly in the way.

   Dismissed, it stays away for a week — the same box on every visit is how a
   shop teaches people to close it without reading it. */
.appmodal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 20px;
  background: rgba(6,6,8,.72); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .22s ease;
}
.appmodal.on { opacity: 1; }
.appmodal__box {
  position: relative; width: 100%; max-width: 380px;
  padding: 30px 26px 22px; border-radius: 18px; text-align: center;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), 0 30px 80px rgba(0,0,0,.7);
  transform: translateY(14px) scale(.97); transition: transform .26s cubic-bezier(.2,.8,.2,1);
}
.appmodal.on .appmodal__box { transform: none; }
/* The app tile, shown the size a home screen shows it. It is brand-dark on a
   brand-dark card, so it needs the hairline or it dissolves into the box. */
.appmodal__icon {
  width: 78px; height: 78px; border-radius: 18px; margin: 0 auto 16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 12px 30px rgba(0,0,0,.55);
}
.appmodal__box h2 {
  font-size: 25px; font-weight: 800; font-style: italic;
  text-transform: uppercase; letter-spacing: -.03em; line-height: 1.05;
}
.appmodal__sub { margin: 12px 0 0; font-size: 13.5px; color: var(--text-2); line-height: 1.6; }

.appmodal__perks { list-style: none; margin: 18px 0 0; padding: 0; text-align: left; }
.appmodal__perks li {
  position: relative; padding: 5px 0 5px 26px;
  font-size: 13.5px; color: var(--text-2);
}
.appmodal__perks li::before {
  content: ''; position: absolute; left: 6px; top: 12px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent-500);
}

/* Numbered, because on iPhone and on any browser that will not install for us
   these are the actual instructions and not decoration. */
.appmodal__steps {
  margin: 18px 0 0; padding: 14px 14px 14px 34px; text-align: left;
  background: var(--bg); border-radius: 10px;
  font-size: 13px; color: var(--text-2); line-height: 1.6;
}
.appmodal__steps li { margin: 3px 0; }

.appmodal .btn { margin-top: 20px; }
.appmodal__later {
  display: block; width: 100%; margin-top: 12px; padding: 8px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--muted);
}
.appmodal__later:hover { color: var(--text-2); }
.appmodal__x {
  position: absolute; top: 8px; right: 10px; width: 34px; height: 34px;
  background: none; border: 0; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--muted);
}
.appmodal__x:hover { color: var(--text); }

/* Nothing behind a modal should scroll under it. */
body.modal-open { overflow: hidden; }

/* ---------- notched phones ----------
   viewport-fit=cover lets the page paint edge to edge; these insets keep the
   actual content out from under the notch and the home indicator. */
@supports (padding: env(safe-area-inset-left)) {
  .wrap { padding-left: max(24px, env(safe-area-inset-left));
          padding-right: max(24px, env(safe-area-inset-right)); }
  @media (max-width: 620px) {
    .wrap { padding-left: max(16px, env(safe-area-inset-left));
            padding-right: max(16px, env(safe-area-inset-right)); }
  }
  .foot { padding-bottom: env(safe-area-inset-bottom); }
  .chat-launcher { bottom: calc(14px + env(safe-area-inset-bottom)); }
  .chat-panel { bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   TOUCH TARGETS
   Small controls that are fine with a mouse are not fine with a
   thumb. On touch devices the dots and icon buttons grow, and the
   dots gain an invisible hit area — kept narrower than the spacing
   between them so neighbouring dots never overlap.
   ============================================================ */
@media (pointer: coarse) {
  .hot__dots, .split__dots { gap: 13px; }
  .hot__dots button, .split__dots button { width: 11px; height: 11px; position: relative; }
  .hot__dots button.on, .split__dots button.on { width: 28px; }
  .hot__dots button::after, .split__dots button::after {
    content: ""; position: absolute; inset: -12px -5px;
  }

  .appmodal__x, .chat__head button, .drawer__head button,
  .mmenu__top button { width: 44px; height: 44px; }
  /* Adjusting the quantity in the bag is done with a thumb, on the move, and
     these were the smallest controls on the busiest screen. */
  .citem__qty button { width: 40px; height: 40px; }
  .citem__qty span { width: 30px; font-size: 14px; }
  /* Remove was an 11px underline 19px tall. Kept visually quiet — it throws
     something away — but made big enough to actually hit. */
  .citem__right button { font-size: 12.5px; padding: 11px 2px; margin-top: 4px; }
  .qty button { width: 48px; }
  .split__arrow { width: 44px; height: 44px; }
  .chat__topics button { padding: 11px 15px; font-size: 13px; }
}

/* ---------- product page on narrow phones ----------
   Grid items default to min-width:auto and refuse to shrink below their
   content, so the Add-to-bag row was forcing the page wider than a 360px
   screen. Let the column shrink, and drop the button onto its own line. */
.pdp > * { min-width: 0; }
@media (max-width: 620px) {
  .pdp__buy { flex-wrap: wrap; }
  .pdp__buy .btn { flex: 1 1 100%; }
  .gallery__thumbs { gap: 8px; }
}


/* ============================================================
   COLLAPSIBLE FILTERS (phones and small tablets)
   The rail is hidden behind a Filters button, and each group inside
   is collapsed until tapped, so the product grid starts near the top
   of the screen instead of below a full page of controls.
   ============================================================ */
.filters__toggle { display: none; }

@media (max-width: 900px) {
  .filters__toggle {
    display: inline-flex; align-items: center; gap: 10px; align-self: start;
    height: 46px; padding: 0 18px; border-radius: 4px;
    font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text); background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    transition: background .18s, box-shadow .18s;
  }
  .filters__toggle:hover { background: var(--surface-2); }
  .filters__toggle:focus-visible { outline: 2px solid var(--accent-400); outline-offset: 2px; }
  .filters__toggle svg {
    width: 18px; height: 18px; stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round;
  }
  .filters__toggle[aria-expanded="true"] { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--surface-3); }
  .filters__n {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
    background: var(--accent-500); color: var(--on-accent);
    font-size: 11px; font-weight: 800; line-height: 20px; letter-spacing: 0; text-align: center;
  }

  /* the rail itself */
  .filters { display: none; }
  .filters.on { display: block; margin-top: 6px; }

  /* each group collapses */
  .fgroup { padding: 0; border-bottom: 1px solid var(--line); }
  .fgroup__head {
    min-height: 52px; margin-bottom: 0; padding: 6px 2px; cursor: pointer;
    font-size: 12px;
  }
  .fgroup__head > span:first-child { flex: 1; }
  .fgroup__chev {
    display: block; width: 8px; height: 8px; flex: none; margin-right: 4px;
    border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
    transform: rotate(45deg); transition: transform .2s;
  }
  .fgroup.on .fgroup__chev { transform: rotate(-135deg); }
  .fgroup.has-filter .fgroup__head { color: var(--text); }

  .fgroup__body { display: none; padding: 2px 2px 18px; }
  .fgroup.on .fgroup__body { display: block; }
}

/* ============================================================
   CHECKOUT + MY ORDERS
   Manual payment: the order is recorded here and settled by
   PayPal or bank transfer afterwards, so the job of these two
   pages is to be clear about where a thing has got to.
   ============================================================ */

.co { display: grid; grid-template-columns: 1fr 360px; gap: 34px; align-items: start; padding: 34px 0 70px; }
.co > * { min-width: 0; }
.co__form h2, .co__sum h2 {
  font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text); margin: 26px 0 14px;
}
.co__form h2:first-child { margin-top: 0; }

.fld { display: block; margin-bottom: 14px; }
.fld > span { display: block; font-size: 12.5px; color: var(--text-2); margin-bottom: 6px; }
.fld > span i { font-style: normal; color: var(--muted); }
.fld input, .fld textarea {
  width: 100%; padding: 12px 13px; border: 0; border-radius: 4px;
  background: var(--surface-2); color: var(--text); font-size: 14.5px;
  font-family: inherit; resize: vertical;
}
.fld input:focus-visible, .fld textarea:focus-visible { outline: 2px solid var(--accent-400); outline-offset: 1px; }

/* iOS Safari zooms the whole page in whenever it focuses a field set under
   16px, and every checkout field was 14.5px. Tapping "Name" lurched the page
   sideways and left the customer pinching back out in the middle of paying.
   16px is the threshold, not a preference, so 16px it is.

   Here rather than up in the phone block on purpose: `.fld input` is more
   specific than a bare `input` and comes later in this file, so the rule has
   to sit beside what it is overriding or it silently loses. It did. */
@media (max-width: 620px) {
  .fld input, .fld textarea, .fld select,
  input, select, textarea { font-size: 16px; }
}
.fld small { display: block; margin-top: 5px; font-size: 11.5px; color: var(--muted); }

.co__note { font-size: 12.5px; color: var(--muted); margin: 4px 0 10px; line-height: 1.6; }
.co__err { color: var(--accent-400); font-size: 13px; min-height: 20px; margin: 6px 0; }
.co__test {
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #f0a12b; margin-bottom: 10px;
}

/* PayPal's buttons live in an iframe and cannot be disabled from here, so
   an incomplete form hides them behind a click shield rather than letting
   someone pay before we know where to send it. */
.paypal { position: relative; min-height: 52px; }
.paypal--blocked #paypalButtons { opacity: .35; pointer-events: none; filter: grayscale(1); }
.paypal--busy #paypalButtons { opacity: .5; pointer-events: none; }

/* Says why the buttons are dead, in the colour of something that needs doing
   rather than a grey aside nobody reads. */
.paypal__why {
  font-size: 13px; line-height: 1.5; color: var(--accent-400);
  margin: 0 0 10px; font-weight: 600;
}
/* Invisible, sits over the dead buttons, and exists purely to catch the tap
   so we can say what is wrong. Covers the button area only. */
.paypal__shield {
  position: absolute; left: 0; right: 0; bottom: 0; top: 0;
  background: transparent; border: 0; cursor: pointer;
}
.paypal__shield[hidden] { display: none; }

/* The field that needs fixing, marked while they look at it. */
.fld--bad input, .fld--bad textarea,
input.fld--bad, textarea.fld--bad {
  box-shadow: inset 0 0 0 1.5px var(--accent-500);
}

.co__sum {
  background: var(--surface); border-radius: 6px; padding: 20px;
  box-shadow: inset 0 0 0 1px var(--line); position: sticky; top: calc(var(--nav-h) + 20px);
}
/* Sits at the foot of the details form, divided off so it reads as an aside
   rather than another step of the order. */
.co__tg { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); max-width: 320px; }
.co__tg small { display: block; margin-top: 9px; font-size: 12px; color: var(--muted); text-align: center; }

/* Payment now lives in the summary panel, under the total. */
.co__payhead { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }

.co__item { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 13.5px; color: var(--text-2); }
.co__item small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.co__item b { color: var(--text); white-space: nowrap; }
.co__row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 13.5px; color: var(--text-2); border-top: 1px solid var(--line); }
.co__row b { color: var(--text); }
.co__row--total { font-size: 16px; padding-top: 12px; }
.co__row--total b { font-size: 19px; }

/* ---- my orders ---- */
.ord__placed {
  background: linear-gradient(135deg, rgba(182,248,35,.16), transparent 60%), var(--surface);
  box-shadow: inset 0 0 0 1px var(--accent-600);
  border-radius: 6px; padding: 22px 24px; margin: 30px 0 26px;
}
.ord__placed h2 { font-size: 20px; margin-bottom: 8px; }
.ord__placed p { font-size: 13.5px; color: var(--text-2); line-height: 1.65; }

.ord { background: var(--surface); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); padding: 22px 24px; margin: 30px 0; }
.ord__top { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.ord__top h3 { font-size: 21px; margin-top: 8px; }
.ord__date { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.ord__total { text-align: right; }
.ord__total span { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ord__total b { font-size: 22px; font-style: italic; }

/* Progress trail. The line is drawn behind the markers, so a step is either
   lit or it is not — no half states to misread. */
.trail { list-style: none; display: flex; margin: 24px 0 4px; }
.trail li { flex: 1; position: relative; text-align: center; padding-top: 26px; }
.trail li::before {
  content: ''; position: absolute; top: 8px; left: 0; right: 0; height: 2px; background: var(--line);
}
.trail li:first-child::before { left: 50%; }
.trail li:last-child::before  { right: 50%; }
.trail li.done::before, .trail li.now::before { background: var(--accent-500); }
.trail li.now ~ li::before { background: var(--line); }
.trail li i {
  position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%; background: var(--surface-3);
  box-shadow: inset 0 0 0 2px var(--line);
}
.trail li.done i { background: var(--accent-500); box-shadow: none; }
.trail li.now i  { background: var(--accent-500); box-shadow: 0 0 0 4px rgba(182,248,35,.25); }
.trail li span { font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.trail li.done span, .trail li.now span { color: var(--text); }
.trail--off { padding: 14px 0; }
.trail--off b { display: block; font-size: 15px; color: var(--accent-400); }
.trail--off span { font-size: 12.5px; color: var(--muted); }

.ord__track { margin-top: 16px; font-size: 13.5px; color: var(--text-2); word-break: break-all; }
.ord__items { margin-top: 20px; border-top: 1px solid var(--line); }
.ord__item { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 13.5px; color: var(--text-2); }
.ord__item small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.ord__item b { color: var(--text); white-space: nowrap; }
.ord__foot { border-top: 1px solid var(--line); padding-top: 12px; }
.ord__foot div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; color: var(--muted); }
.ord__foot b { color: var(--text-2); }
.ord__foot-total { font-size: 15px !important; margin-top: 4px; }
.ord__foot-total b { color: var(--text) !important; font-size: 17px; }
.ord__to, .ord__help { margin-top: 14px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.ord__help a { color: var(--accent-300); text-decoration: underline; }

.ord__empty, .ord__loading { text-align: center; padding: 50px 20px; color: var(--muted); font-size: 13.5px; }
.ord__empty b { color: var(--text); font-size: 15px; }
.ord__empty p + p { margin-top: 8px; }

.ord__find { background: var(--surface); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); padding: 24px; margin-top: 34px; }
.ord__find h2 { font-size: 15px; margin-bottom: 8px; }
.ord__find > p { font-size: 13px; color: var(--muted); line-height: 1.65; margin-bottom: 16px; }
.ord__find-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ord__find-row > * { min-width: 0; }

@media (max-width: 900px) {
  .co { grid-template-columns: 1fr; gap: 26px; padding-top: 26px; }
  /* The bag panel used to be pulled above the form so a phone showed what was
     being bought first. Now that payment lives in that panel, doing so would
     put the pay buttons before the details they depend on — so the form leads
     and the bag, total and payment follow it, matching the desktop order. */
  .co__sum { position: static; }
  .ord__find-row { grid-template-columns: 1fr; }
  .ord, .ord__find, .ord__placed { padding: 18px 16px; }
  .ord__top h3 { font-size: 18px; }
  /* Five labels will not fit across a phone, so the trail turns vertical. */
  .trail { flex-direction: column; gap: 2px; margin: 20px 0 6px; }
  .trail li { text-align: left; padding: 7px 0 7px 26px; }
  .trail li::before { top: 0; bottom: 0; left: 6px; right: auto; width: 2px; height: auto; }
  .trail li:first-child::before { top: 50%; left: 6px; }
  .trail li:last-child::before { bottom: 50%; top: 0; right: auto; }
  .trail li i { top: 50%; left: 0; transform: translateY(-50%); }
  .trail li span { font-size: 12.5px; }
}

/* ---------- one-photograph split panel ----------
   The photograph runs the full height of the panel, and the panel takes the
   backdrop colour of that photograph — sampled from the image itself in
   index.html, because no fixed value can be right: suppliers shoot on
   different greys, and the jersey sets are far lighter than the Nike ones.
   Get it wrong and the shot reads as a square pasted onto the wrong shade.

   Contain rather than cover. Cover fills the panel with no surround at all,
   which is tidier, but a wide panel cropping a square product shot cuts about
   a ninth off each end — measured against the tee, that takes the collar and
   the hem. A product photograph that clips the product is not worth the
   tidiness.

   This sits at the end of the file, and doubles up the modifier class, because
   the carousel rules further up are more specific than a single class and
   would otherwise win. */
.split__art--fill { padding: 0; background: var(--photo-bg); }
.split__art--fill.split__art .split__slide:has(img.prod) {
  background: none; border-radius: 0;
}
.split__art--fill.split__art .split__slide svg.prod,
.split__art--fill.split__art .split__slide img.prod {
  width: 100%; height: 100%; max-width: none; object-fit: contain;
}

/* Filled panel: the carousel takes the whole tile and the controls sit over
   the shot, so there is no ring of panel colour around a small square. */
.split__art--fill .split__carousel { width: 100%; height: 100%; gap: 0; }
.split__art--fill .split__stage { width: 100%; height: 100%; position: relative; }
.split__art--fill .split__slides {
  max-width: none; width: 100%; height: 100%; aspect-ratio: auto;
}
.split__art--fill .split__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  background: rgba(12,12,14,.42); color: #fff; box-shadow: none;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.split__art--fill .split__arrow:hover { background: rgba(12,12,14,.68); transform: translateY(-50%); }
.split__art--fill .split__arrow[data-jgo="-1"] { left: 14px; }
.split__art--fill .split__arrow[data-jgo="1"]  { right: 14px; }

/* The hero holds copy only now — the product moved out to its own section, so
   the headline is no longer competing with a carousel for the same space. */
.hero__copy { max-width: 720px; }


/* Brand tiles are ~1000px tall on a phone. Below 900px they move under the
   first product grid so something buyable is reachable sooner. */
@media (max-width: 900px) {
  .homeflow { display: flex; flex-direction: column; }
  .homeflow > #latestDrops { order: 1; }
  .homeflow > .sec:not(#latestDrops) { order: 2; }
}

/* The way out of a payment method the customer has changed their mind about.
   Quiet, but always in the same place under the buttons. */
.paypal__out { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.paypal__out button {
  color: var(--text); text-decoration: underline; font-size: 13px;
  font-family: inherit; padding: 6px 2px; min-height: 34px;
}
.paypal__out button:hover { color: var(--accent-400); }
.paypal__out[hidden] { display: none; }

/* Sent from a gmail address with no sending history, a first receipt often
   lands in spam. Saying so beats a customer deciding the order failed. */
.ord__spam { font-size: 13px; color: var(--muted); margin-top: 10px; line-height: 1.6; }
.ord__spam b { color: var(--text); }

/* ============================================================
   REVIEWS
   The form a buyer lands on from the review email, and the real
   reviews shown on a product page.
   ============================================================ */
.rv__form { max-width: 640px; margin-top: 34px; }
.rv__intro { color: var(--text-2); margin-bottom: 20px; }
.rv__intro b { color: var(--text); }

/* One button per line of the order. Bigger than a radio because this is the
   first thing a thumb hits on a phone. */
.rv__picks { display: grid; gap: 10px; margin-bottom: 24px; }
.rv__pick {
  text-align: left; padding: 13px 16px; border-radius: 10px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  font: inherit; transition: border-color .15s, background .15s;
}
.rv__pick b { display: block; font-size: 14px; }
.rv__pick small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.rv__pick.on { border-color: var(--accent-500); background: rgba(182,248,35,.08); }

.rv__stars { display: flex; gap: 6px; margin-bottom: 6px; }
.rvstar {
  background: none; border: 0; cursor: pointer; padding: 2px;
  font-size: 34px; line-height: 1; color: #3a3a41; transition: color .12s, transform .12s;
}
.rvstar.on { color: #f0a12b; }
.rvstar:hover { transform: scale(1.12); }

.rv__note { font-size: 12.5px; color: var(--muted); margin: 4px 0 20px; line-height: 1.6; }
.rv__note b { color: var(--text-2); }
.rv__done { max-width: 560px; margin-top: 40px; }
.rv__done h2 { font-size: 26px; font-weight: 800; font-style: italic; text-transform: uppercase; }
.rv__done p { color: var(--text-2); margin: 14px 0 22px; }

/* ---- reviews on a product page ---- */
.revs { margin-top: 34px; }
.revs__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.revs__score { font-size: 30px; font-weight: 800; font-style: italic; }
.revs__of { color: var(--muted); font-size: 13px; }
.rev {
  padding: 16px 0; border-top: 1px solid var(--line);
}
.rev__top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rev__stars { color: #f0a12b; letter-spacing: 1px; font-size: 13px; }
.rev__who { font-size: 12.5px; color: var(--text-2); font-weight: 700; }
.rev__badge {
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-300); border: 1px solid rgba(182,248,35,.4); border-radius: 3px; padding: 2px 6px;
}
.rev__when { font-size: 12px; color: var(--muted); margin-left: auto; }
.rev__title { font-weight: 700; margin: 8px 0 4px; }
.rev__body { color: var(--text-2); font-size: 14px; line-height: 1.65; white-space: pre-line; }
.rev__reply {
  margin-top: 10px; padding: 10px 14px; border-left: 2px solid var(--accent-500);
  background: var(--surface); border-radius: 0 8px 8px 0; font-size: 13.5px; color: var(--text-2);
}
.rev__reply b { color: var(--text); }
.revs__none { color: var(--muted); font-size: 13.5px; }


/* The review button on a shipped order, in "My orders". */
.ord__review { margin-top: 16px; }

/* ============================================================
   REVIEWS PAGE
   ============================================================ */
.revsum {
  display: grid; gap: 26px; align-items: center; margin: 34px 0 26px;
  padding: 24px; border-radius: 14px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
@media (min-width: 700px) { .revsum { grid-template-columns: 200px 1fr; } }
.revsum__score { text-align: center; }
.revsum__n {
  display: block; font-size: 54px; font-weight: 800; font-style: italic;
  letter-spacing: -.04em; line-height: 1;
}
.revsum__score .rev__stars { font-size: 16px; }
.revsum__of { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); }

/* The split across the five stars. An average alone hides whether it is
   everyone saying "fine" or half saying "brilliant" and half "awful". */
.revbar { display: grid; grid-template-columns: 30px 1fr 26px; align-items: center; gap: 10px; margin: 5px 0; }
.revbar span { font-size: 12px; color: var(--muted); }
.revbar i { display: block; height: 7px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.revbar i b { display: block; height: 100%; background: #f0a12b; border-radius: 4px; }
.revbar em { font-style: normal; font-size: 12px; color: var(--muted); text-align: right; }

.revchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.revchip {
  padding: 7px 13px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12.5px;
  background: var(--surface-2); border: 1px solid transparent; color: var(--text-2);
}
.revchip em { font-style: normal; color: var(--muted); margin-left: 5px; }
.revchip.on { background: var(--accent-500); border-color: var(--accent-500); color: var(--on-accent); }
.revchip.on em { color: rgba(1,21,50,.6); }

.revspage { display: grid; gap: 14px; }
.rev--card {
  padding: 20px; border-top: 0; border-radius: 12px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}

/* The product the review is about, so a good word about something can be
   acted on without going to look for it. */
.rev__prod {
  display: flex; align-items: center; gap: 12px; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--line); text-decoration: none;
}
.rev__prod .prod, .rev__prod svg { width: 52px; height: 52px; border-radius: 8px; flex: none; object-fit: cover; }
.rev__prod b { display: block; font-size: 13.5px; color: var(--text); }
.rev__prod small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.rev__prod:hover b { color: var(--accent-300); }