@charset "UTF-8";
/* ==========================================================================
   ONE STOP SHOP DESIGNZ — theme.css
   Structure for the whole site: tokens, layout, type, forms, WooCommerce.
   The look and the movement are in motion.css, loaded after this file.

   01. TOKENS          design decisions, defined once
   02. RESET + BASE    element defaults
   03. LAYOUT          container, section, grid
   04. TYPE            the scale, applied
   05. BUTTONS
   06. COMPONENTS      the card, plus stats, tiles, video, steps and bands
   07. HEADER
   08. FOOTER
   09. UTILITIES
   10. MOTION          the plain fallback; motion.css does the rest

   THE LOOK ("Blackout"): a blacked-out stage. Near-black ground, bone-white
   type, fire for the things that matter. Heavy condensed display type in
   capitals, small mono labels, hairlines and square corners.

   RULES BAKED IN HERE, on purpose:
   - Body text never sits on a busy image without a scrim under it.
   - Fire (the gradient) is for one word in a headline, the active thing, and
     what a button turns into under the pointer. Body text is never fire.
   - Every interactive target is >= 44px on touch.
   ========================================================================== */


/* ==========================================================================
   01. TOKENS
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Colour -------------------------------------------------------------
     Contrast, measured against --c-bg (#050505):
       --c-text        16.9:1   body + headings
       --c-text-muted   8.4:1   secondary copy, meta, captions
       --c-text-faint   4.9:1   smallest permitted; labels only
       ink on bone (primary button)       16.9:1
       white on the hover fill   3.9:1 – 7.4:1   large bold labels only */

  --c-bg:            #050505;   /* ink */
  --c-surface:       #0c0c0d;   /* coal: cards, panels */
  --c-surface-2:     #161618;   /* ash: raised, inputs, thumbnails */
  --c-line:          rgba(236, 231, 223, 0.13);
  --c-line-strong:   rgba(236, 231, 223, 0.34);

  --c-text:          #ece7df;   /* bone */
  --c-text-muted:    #aaa59c;   /* smoke */
  --c-text-faint:    #807b73;
  --c-text-invert:   #050505;

  --c-ember:         #ff4a1c;
  --c-blood:         #b10f1c;
  --c-heat:          #ffc56e;
  --c-accent:        #e8421a;   /* small live marks: cart count, current track */
  --c-accent-hover:  #ff5a26;
  --c-accent-quiet:  rgba(255, 74, 28, 0.14);

  /* Fire: top to bottom for type, left to right for bars and button fills. */
  --fire:      linear-gradient(180deg, #ffe2a6 0%, #ffa033 26%, #ff5a1f 52%, #e3261b 78%, #c21a1a 100%);
  --fire-run:  linear-gradient(90deg, var(--c-heat), var(--c-ember) 45%, var(--c-blood));
  --fire-fill: linear-gradient(90deg, #f0531c, #d4291a 55%, var(--c-blood));

  --c-success:       #3FB27F;
  --c-warning:       #E3B341;

  /* Hero overlay. Any image behind type goes under this. */
  --overlay-hero:    linear-gradient(180deg, rgba(5,5,5,0.72) 0%, rgba(5,5,5,0.82) 55%, rgba(5,5,5,0.98) 100%);
  --overlay-flat:    rgba(5,5,5,0.78);

  /* --- Type ---------------------------------------------------------------
     Three faces. Big Shoulders Display for anything that shouts, Manrope for
     anything read at length, IBM Plex Mono for the small labels. */

  --font-display: "Big Shoulders Display", "Arial Narrow", Impact, "Helvetica Neue", sans-serif;
  --font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --t-display:  clamp(3.5rem, 1rem + 11vw, 8.6rem);        /*  56 → 138 */
  --t-h1:       clamp(2.75rem, 1.2rem + 6.6vw, 6.25rem);   /*  44 → 100 */
  --t-h2:       clamp(2.25rem, 1.35rem + 3.9vw, 4.5rem);   /*  36 → 72  */
  --t-h3:       clamp(1.5rem, 1.25rem + 1vw, 2rem);        /*  24 → 32  */
  --t-body-lg:  1.125rem;                                   /*  18      */
  --t-body:     1rem;                                       /*  16      */
  --t-small:    0.875rem;                                   /*  14      */
  --t-micro:    0.6875rem;                                  /*  11      */

  --lh-display: 0.84;
  --lh-heading: 0.94;
  --lh-body:    1.6;

  --ls-display:  0.004em;
  --ls-heading:  0.01em;
  --ls-eyebrow:  0.22em;

  --fw-body:      400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-display:   900;

  /* --- Space -------------------------------------------------------------- */

  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  2.5rem;
  --s-8:  3rem;
  --s-9:  4rem;
  --s-10: 5rem;
  --s-11: 7rem;
  --s-12: 9rem;

  --section-y: clamp(3.75rem, 2rem + 7vw, 7.5rem);
  --gutter:    clamp(1.125rem, 0.5rem + 2.6vw, 2.5rem);

  /* --- Shape --------------------------------------------------------------
     Square. The only round things are dots and the play buttons. */

  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --r-pill: 999px;

  --border: 1px solid var(--c-line);

  /* --- Elevation ---------------------------------------------------------- */

  --shadow-card:  none;
  --shadow-lift:  0 30px 60px -30px rgba(0,0,0,1);
  --shadow-panel: 0 40px 70px -24px #000;

  /* --- Measure ------------------------------------------------------------ */

  --w-page:  1320px;
  --w-wide:  1560px;
  --w-text:  64ch;     /* paragraphs never run wider than this */
  --w-narrow: 46ch;

  /* --- Motion ------------------------------------------------------------- */

  --ease:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:  160ms;
  --dur:       300ms;
  --dur-slow:  600ms;

  /* --- Chrome ------------------------------------------------------------- */

  --header-h: 68px;
  --z-header: 100;
  --z-nav:    110;
  --z-skip:   200;
  --tap:      44px;   /* minimum interactive target */
}

@media (min-width: 900px) {
  :root { --header-h: 84px; }
}


/* ==========================================================================
   02. RESET + BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor-jump rows on /store/ must not land under the sticky header. */
  scroll-padding-top: calc(var(--header-h) + var(--s-5));
}

/* Where a sticky jump bar sits under the header too, anchors have to clear
   both. Browsers without :has() land a little high, never hidden. */
html:has(.jumpbar) {
  scroll-padding-top: calc(var(--header-h) + 4.5rem + var(--s-4));
}

body {
  margin: 0;
  background-color: var(--c-bg);   /* flat. never an image. */
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-nav-open { overflow: hidden; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

/* No heading or title ever runs out of its box. Product names like
   "Custom Stream Intros (Twitch/YouTube/Kick)" contain runs a browser will
   not wrap on its own — it does not break at slashes — and at display size
   on a phone that pushed the page sideways. A long run breaks only when it
   genuinely cannot fit on a line of its own. */
h1, h2, h3, h4, h5, h6,
.card__title,
.lane__item-title,
.study__nav-title,
.product_title {
  overflow-wrap: anywhere;
}

ul, ol { margin: 0; padding: 0; }
nav ul, nav ol, .u-bare { list-style: none; }

/* Media never causes layout shift: every image declares its box. */
img, picture, video, canvas, svg, iframe {
  display: block;
  max-width: 100%;
}
img, video { height: auto; }

/* Icons scale with the text they sit next to and never stretch to fill a
   flex parent. Contexts that need a fixed size (header buttons, social
   links, the nav caret) override below. */
.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; cursor: pointer; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--c-text);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--c-accent); color: #fff; }

hr {
  border: 0;
  border-top: var(--border);
  margin: var(--s-8) 0;
}


/* ==========================================================================
   03. LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide   { max-width: var(--w-wide); }
.container--narrow { max-width: 860px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.section + .section { padding-top: 0; }
.section--divided { border-top: var(--border); }

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-8);
  max-width: var(--w-text);
}

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.grid { display: grid; gap: var(--s-5); }
/* Column counts are the names. At a 1440 viewport --3 resolves to three
   across and --4 to five; the minimums are chosen so they land there and
   step down cleanly rather than stranding a single card on its own row. */
.grid--2 { grid-template-columns: repeat(auto-fit,  minmax(min(100%, 24rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }

/* Dense product grids go two-up on a phone rather than one. Twenty-nine
   products stacked single file is a scroll nobody finishes, and comparing
   two at a glance is the whole point of a catalogue band. The flagship
   product still gets a full-width moment in the spotlight row, so "bigger
   imagery" lands where it earns it instead of uniformly. */
@media (max-width: 620px) {
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
  }
  .grid--4 .card__body { padding: var(--s-4); gap: var(--s-1); }
  .grid--4 .card__title { font-size: var(--t-body); }
  /* The blurb is unreadable at this column width and the title, price and
     action carry the card. It is still on the product page. */
  .grid--4 .card__meta { display: none; }
  .grid--4 .card__media img { padding: var(--s-2); }
  .grid--4 .card__foot {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-2);
    padding-top: var(--s-3);
  }
  /* At this column width the default label wraps to two lines and the
     button becomes a 72px block. Smaller type and tighter padding keep it
     on one line at the 44px target height. */
  .grid--4 .card__foot .btn {
    width: 100%;
    padding-inline: var(--s-2);
    font-size: var(--t-micro);
    letter-spacing: 0.03em;
  }
  .grid--4 .price__now { font-size: var(--t-body-lg); }
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: var(--z-skip);
  transform: translateY(-200%);
  background: var(--c-text);
  color: var(--c-text-invert);
  font-weight: var(--fw-semibold);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateY(0); }


/* ==========================================================================
   04. TYPE
   ========================================================================== */

.t-display, .t-h1, .t-h2, .t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  color: var(--c-text);
  /* Headings must fit their container. Long product and release names
     break rather than clip. */
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
}

.t-display {
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.t-h1 {
  font-size: var(--t-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
}

.t-h2 {
  font-size: var(--t-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

.t-h3 {
  font-size: var(--t-h3);
  line-height: 1.25;
  letter-spacing: var(--ls-heading);
  font-weight: var(--fw-semibold);
}

.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-muted);   /* never red */
}

.t-lead {
  font-size: var(--t-body-lg);
  line-height: 1.6;
  color: var(--c-text-muted);
  max-width: var(--w-text);
}

.t-body  { font-size: var(--t-body); max-width: var(--w-text); }
.t-small { font-size: var(--t-small); line-height: 1.55; }
.t-micro {
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.t-muted { color: var(--c-text-muted); }

.prose { max-width: var(--w-text); }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { font: var(--fw-display) var(--t-h2)/var(--lh-heading) var(--font-display); letter-spacing: var(--ls-heading); margin-top: var(--s-8); }
.prose h3 { font: var(--fw-semibold) var(--t-h3)/1.25 var(--font-display); letter-spacing: var(--ls-heading); margin-top: var(--s-6); }
.prose a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--c-line-strong);
}
.prose a:hover { text-decoration-color: currentColor; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: var(--s-2); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }


/* ==========================================================================
   05. BUTTONS
   Exactly three: primary (red — a real action), secondary (outline),
   quiet (text). Nothing else gets to be red.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  /* A button label never wraps. "Add to cart" breaking across three lines
     inside a card turns the primary action into a tall red block. */
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--c-accent);
  color: #fff;
}
.btn--primary:hover { background: var(--c-accent-hover); color: #fff; }

.btn--secondary {
  border-color: var(--c-line-strong);
  color: var(--c-text);
}
.btn--secondary:hover {
  border-color: var(--c-text);
  background: var(--c-surface-2);
}

.btn--quiet {
  padding-inline: 0;
  color: var(--c-text-muted);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--t-body);
}
.btn--quiet:hover { color: var(--c-text); }

.btn--block { width: 100%; white-space: normal; }
.btn--lg { min-height: 52px; padding-inline: var(--s-7); font-size: var(--t-body); }

/* A nowrap label plus generous padding can outgrow a narrow screen. Large
   buttons tighten up, and a button that is given full width is allowed to
   wrap again because it has somewhere to wrap to. */
@media (max-width: 520px) {
  .btn--lg { padding-inline: var(--s-5); }
}

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}


/* ==========================================================================
   06. CARD — one component, used everywhere
   Store, NBA2K, Services, Portfolio, Releases. Same ratio, same padding,
   same hover, same button position. Background is always opaque.
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);       /* opaque. artwork never fights a backdrop */
  border: var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.card:hover {
  transform: translateY(-3px);
  border-color: var(--c-line-strong);
  box-shadow: var(--shadow-lift);
}

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;                /* fixed everywhere — zero layout shift */
  background: var(--c-surface-2);
  overflow: hidden;
}
.card__media--square { aspect-ratio: 1 / 1; }   /* album covers, jerseys */
.card__media--wide   { aspect-ratio: 16 / 9; }  /* video stills, reels */

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;                /* artwork is not cropped */
  padding: var(--s-4);
  transition: transform var(--dur-slow) var(--ease);
}
.card__media--cover img { object-fit: cover; padding: 0; }

.card:hover .card__media img { transform: scale(1.02); }

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  flex: 1 1 auto;
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--t-body-lg);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  letter-spacing: var(--ls-heading);
}

.card__meta { font-size: var(--t-small); color: var(--c-text-muted); }

.card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-4);
}
/* Tighter than a standalone button: in a narrow card the price and the
   action have to share one row. If they genuinely cannot, the button drops
   to its own full-width row rather than squeezing. */
.card__foot .btn {
  flex: 0 1 auto;
  padding-inline: var(--s-4);
}

/* Price. The sale original is quiet — no shouting badge on every card. */
.price { display: flex; align-items: baseline; gap: var(--s-2); }
.price__now { font-family: var(--font-display); font-size: var(--t-h3); font-weight: var(--fw-display); letter-spacing: var(--ls-heading); }
.price__was {
  font-size: var(--t-small);
  color: var(--c-text-faint);
  text-decoration: line-through;
}

/* No product image: keep the box, drop the grey circle. */
.card__noimage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-faint);
}

/* Sale marker. Quiet — a small label, not a red starburst on every card.
   Red is reserved for actions, so this is a hairline chip. */
.card__sale {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  padding: 3px var(--s-2);
  border: var(--border);
  border-radius: var(--r-sm);
  background: var(--overlay-flat);
  color: var(--c-text);
  backdrop-filter: blur(6px);
}

/* Rating. Rendered only when a real review exists — see oss_get_rating(). */
.rating {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-small);
}
.rating__stars { display: inline-flex; gap: 1px; }
.rating__star { color: var(--c-line-strong); line-height: 0; }
.rating__star.is-on { color: var(--c-warning); }
.rating__star .icon { width: 13px; height: 13px; }
.rating__value { font-weight: var(--fw-semibold); }
.rating__count { color: var(--c-text-faint); }

.price__range { padding-inline: 2px; color: var(--c-text-muted); }

/* Whole-card link without trapping the buttons inside it. */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.card { position: relative; }
.card__foot .btn { position: relative; z-index: 1; }


/* --- Feature: a card with no image. Same padding, same hover, no media. --- */

.feature {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.feature:hover { border-color: var(--c-line-strong); transform: translateY(-3px); }
.feature .btn--quiet { margin-top: auto; padding-top: var(--s-2); align-self: flex-start; }


/* --- Video --- */

.videoframe {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;          /* declared, so nothing shifts on load */
  background: var(--c-surface-2);
  border: var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.videoframe__video { width: 100%; height: 100%; object-fit: cover; }

.videoframe__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 11, 0.35);
  color: #fff;
  transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.videoframe__play .icon {
  width: 22px;
  height: 22px;
  /* The play affordance is red because pressing it is the action. */
  background: var(--c-accent);
  border-radius: var(--r-pill);
  padding: 17px 15px 17px 19px;
  box-sizing: content-box;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur) var(--ease);
}
.videoframe__play:hover { background: rgba(10, 10, 11, 0.2); }
.videoframe__play:hover .icon { background: var(--c-accent-hover); transform: scale(1.06); }
.videoframe__play[hidden] { display: none; }

.videoframe--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: dashed;
}

.stream {
  display: grid;
  gap: var(--s-7);
  align-items: center;
}
@media (min-width: 900px) {
  .stream { grid-template-columns: 1.35fr 1fr; gap: var(--s-8); }
}
.stream__copy .t-body { color: var(--c-text-muted); }


/* --- Stats. Three of them. There is no fourth. --- */

.stats {
  display: grid;
  gap: var(--s-5);
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  border-top: var(--border);
  padding-top: var(--s-7);
}
.stat { display: flex; flex-direction: column; gap: var(--s-1); }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  font-weight: var(--fw-display);
  line-height: 1;
  letter-spacing: var(--ls-display);
  /* Rendered, not counted up. A number ticking while someone reads it is
     movement for its own sake. */
}
.stat__label {
  margin: 0;
  font-size: var(--t-small);
  color: var(--c-text-muted);
}


/* --- Value tiles. Every tile has a real icon or the slot does not exist. --- */

.tile {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
}
.tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: var(--border);
  border-radius: var(--r-md);
  color: var(--c-text);
  margin-bottom: var(--s-1);
}
.tile__icon .icon { width: 20px; height: 20px; }


/* --- Proof band. Only ever built from reviews a customer actually left. --- */

.proof {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0;
  padding: var(--s-6);
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--r-lg);
}
.proof__text {
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.6;
}
.proof__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-top: var(--s-3);
  font-size: var(--t-small);
}
.proof__author { font-weight: var(--fw-semibold); }
.proof__meta a { color: var(--c-text-muted); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--c-line-strong); }
.proof__meta a:hover { color: var(--c-text); }


/* --- Services: the reel hero and the lanes --- */

.reel {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(480px, 74vh, 760px);
  padding-block: var(--s-9);
  overflow: hidden;
}
.reel__media { position: absolute; inset: 0; z-index: -2; background: var(--c-surface-2); }
.reel__media video,
.reel__media img { width: 100%; height: 100%; object-fit: cover; }

/* A scrim over the footage as well as the panel, so the edges of the frame
   never fight the header or the panel border. */
.reel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10,10,11,0.55) 0%, rgba(10,10,11,0.35) 45%, rgba(10,10,11,0.85) 100%);
}

.reel__inner { width: 100%; }

/* Copy never sits directly on moving footage. It sits here. */
.reel__panel {
  max-width: 44rem;
  background: rgba(19, 19, 22, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-panel);
}
.reel__panel .t-lead { max-width: 46ch; }

.lane__grid { display: grid; gap: var(--s-7); }
@media (min-width: 900px) {
  .lane__grid { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--s-9); align-items: start; }
  .lane__head { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}
.lane__head .t-body { max-width: 40ch; }

.lane__items {
  display: grid;
  gap: 0;
  border-top: var(--border);
}
.lane__items > li { border-bottom: var(--border); }

.lane__item {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 60px;
  padding: var(--s-3) var(--s-2);
  color: var(--c-text-muted);
  transition: color var(--dur-fast) var(--ease), padding-left var(--dur) var(--ease);
}
.lane__item:hover { color: var(--c-text); padding-left: var(--s-4); }

.lane__item-title {
  flex: 1 1 auto;
  font-family: var(--font-display);
  font-size: var(--t-body-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-heading);
  color: var(--c-text);
}
.lane__item-action { flex: none; color: var(--c-text-faint); }
.lane__item .icon { flex: none; color: var(--c-text-faint); transition: transform var(--dur) var(--ease); }
.lane__item:hover .icon { transform: translateX(3px); color: var(--c-text); }


/* --- Intake questionnaire (product page, inside the add-to-cart form) --- */

.intake {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin: 0 0 var(--s-6);
  padding: var(--s-5);
  min-width: 0;                       /* fieldsets refuse to shrink otherwise */
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--r-lg);
}
.intake__legend {
  float: left;                        /* lets the legend sit inside the padding */
  width: 100%;
  padding: 0;
  margin-bottom: var(--s-1);
}
.intake__legend + * { clear: both; }
.intake__intro { color: var(--c-text-muted); margin: 0; }

.intake__field { display: flex; flex-direction: column; gap: var(--s-2); }
.intake__label { font-size: var(--t-small); font-weight: var(--fw-semibold); color: var(--c-text); }
.intake__req { color: var(--c-text-muted); margin-left: 2px; }
.intake__help { color: var(--c-text-faint); }

.intake input[type="text"],
.intake input[type="url"],
.intake select,
.intake textarea {
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  color: var(--c-text);
  font-size: 16px;                    /* 16px stops iOS zooming on focus */
}
.intake textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.intake select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--c-text-muted) 50%), linear-gradient(135deg, var(--c-text-muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: var(--s-8); }
.intake input:focus,
.intake select:focus,
.intake textarea:focus { outline: 2px solid var(--c-text); outline-offset: 1px; border-color: transparent; }
.intake ::placeholder { color: var(--c-text-faint); }

.intake input[type="file"],
.contact-form input[type="file"] {
  width: 100%;
  padding: var(--s-3);
  background: var(--c-surface-2);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-md);
  color: var(--c-text-muted);
  font-size: var(--t-small);
}
.intake input[type="file"]::file-selector-button,
.contact-form input[type="file"]::file-selector-button {
  min-height: 36px;
  margin-right: var(--s-3);
  padding: 0 var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  color: var(--c-text);
  font: inherit;
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

.intake__field--consent label {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  min-height: var(--tap);
  font-size: var(--t-small);
  color: var(--c-text-muted);
  cursor: pointer;
}
.intake__field--consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--c-text);
}


.intake__alert {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--c-warning);
  background: rgba(227, 179, 65, 0.08);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--c-text);
  font-size: var(--t-small);
}

/* --- WooCommerce notices, on any page ------------------------------------
   Status colours, not the accent: red stays reserved for actions, so errors
   use the warning yellow and confirmations use green. */

.site-notices { padding-top: var(--s-5); }

.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--c-surface);
  border: var(--border);
  border-left: 3px solid var(--c-line-strong);
  border-radius: var(--r-md);
  color: var(--c-text);
  font-size: var(--t-small);
  line-height: 1.55;
}
.woocommerce-error { border-left-color: var(--c-warning); }
.woocommerce-message { border-left-color: var(--c-success); }
.woocommerce-error li + li { margin-top: var(--s-2); }
.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before { content: none; }  /* WooCommerce's icon font */
.woocommerce-message .button,
.woocommerce-info .button {
  float: right;
  margin-left: var(--s-4);
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}


/* --- WooCommerce baseline -------------------------------------------------
   WooCommerce's colour stylesheet is not loaded (see inc/woocommerce.php);
   its layout sheet still handles the columns. Everything below dresses its
   markup in the theme's tokens: product page, cart, checkout, order received.
   The fuller product-page design (sticky add-to-cart, delivery terms, rating
   in the hero) comes with the WooCommerce templates. */

.woo-page { padding-block: var(--s-6) var(--s-10); }
.woocommerce-breadcrumb { font-size: var(--t-small); color: var(--c-text-faint); margin-bottom: var(--s-6); }
.woocommerce-breadcrumb a { color: var(--c-text-muted); }
.woocommerce-breadcrumb a:hover { color: var(--c-text); }

/* Buttons: WooCommerce's .button is a secondary; its "alt" and the buy
   actions are primary. */
.woocommerce .button,
.woocommerce-page .button,
.woocommerce button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.woocommerce .button:hover { border-color: var(--c-text); background: var(--c-surface-2); }

.woocommerce .button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce #place_order {
  border-color: transparent;
  background: var(--c-accent);
  color: #fff;
}
.woocommerce .button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover { background: var(--c-accent-hover); border-color: transparent; }

.woocommerce .button:disabled,
.woocommerce .button.disabled,
.woocommerce .button[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Fields: the same dark field as the intake form. */
.woocommerce form .input-text,
.woocommerce form select,
.woocommerce form textarea,
.woocommerce .quantity .qty,
.woocommerce-page form .input-text {
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  color: var(--c-text);
  font-size: 16px;
  line-height: 1.4;
}
.woocommerce form textarea { min-height: 96px; }
.woocommerce form .input-text:focus,
.woocommerce form select:focus,
.woocommerce form textarea:focus,
.woocommerce .quantity .qty:focus { outline: 2px solid var(--c-text); outline-offset: 1px; border-color: transparent; }
.woocommerce form .form-row { margin: 0 0 var(--s-4); }
.woocommerce form .form-row label { display: block; margin-bottom: var(--s-2); font-size: var(--t-small); font-weight: var(--fw-semibold); }
.woocommerce form .form-row .required { color: var(--c-text-muted); text-decoration: none; border: 0; }  /* not red: red is for actions */
.woocommerce .quantity .qty { width: 5rem; text-align: center; padding-inline: var(--s-2); }

/* Country/state dropdowns use selectWoo (a Select2 fork), light by default. */
.select2-container .select2-selection--single {
  height: var(--tap);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
}
.select2-container .select2-selection--single .select2-selection__rendered { line-height: calc(var(--tap) - 2px); padding-left: var(--s-4); color: var(--c-text); }
.select2-container .select2-selection--single .select2-selection__arrow { height: calc(var(--tap) - 2px); }
.select2-dropdown { background: var(--c-surface); border-color: var(--c-line-strong); color: var(--c-text); }
.select2-search--dropdown .select2-search__field { background: var(--c-surface-2); border-color: var(--c-line-strong); color: var(--c-text); }
.select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--c-surface-2); color: var(--c-text); }
.select2-container--default .select2-results__option[aria-selected="true"] { background: var(--c-line); }

/* Prices: the sale original is quiet. */
.woocommerce .price,
.woocommerce .amount { color: var(--c-text); }
.woocommerce .price del { color: var(--c-text-faint); font-size: 0.75em; margin-right: var(--s-2); }
.woocommerce .price ins { text-decoration: none; }

/* Sale marker: the same hairline chip as the cards, not a starburst. */
.woocommerce span.onsale {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  z-index: 2;
  padding: 3px var(--s-2);
  border: var(--border);
  border-radius: var(--r-sm);
  background: var(--overlay-flat);
  color: var(--c-text);
  font-size: var(--t-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Product page */
.woocommerce div.product { position: relative; }
.woocommerce div.product .product_title {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: var(--fw-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  margin-bottom: var(--s-3);
}
.woocommerce div.product p.price { font-family: var(--font-display); font-size: var(--t-h3); font-weight: var(--fw-display); margin-bottom: var(--s-4); }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--c-text-muted); margin-bottom: var(--s-5); }
.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--s-3); margin-bottom: var(--s-6); }
.woocommerce div.product form.cart .intake,
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .single_variation_wrap { flex: 1 0 100%; }
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.woocommerce div.product form.cart .single_add_to_cart_button { flex: 1 1 auto; min-height: 52px; font-size: var(--t-body); }
.woocommerce div.product form.cart table.variations { width: 100%; margin-bottom: var(--s-4); }
.woocommerce div.product form.cart table.variations th { text-align: left; padding: 0 0 var(--s-2); font-size: var(--t-small); }
.woocommerce div.product form.cart table.variations td { padding: 0 0 var(--s-3); }
.woocommerce div.product form.cart .reset_variations {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: var(--s-2);
  margin-left: var(--s-2);
  font-size: var(--t-small);
  color: var(--c-text-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.woocommerce div.product .woocommerce-variation-price { margin-bottom: var(--s-3); font-family: var(--font-display); font-size: var(--t-h3); font-weight: var(--fw-display); }
.woocommerce div.product .product_meta { font-size: var(--t-small); color: var(--c-text-faint); }
.woocommerce div.product .product_meta a { color: var(--c-text-muted); }
.woocommerce div.product div.images { background: var(--c-surface); border: var(--border); border-radius: var(--r-lg); overflow: hidden; }
.woocommerce div.product div.images img { width: 100%; height: auto; }
.woocommerce div.product .woocommerce-product-gallery { position: relative; }
.woocommerce div.product .woocommerce-product-gallery__trigger {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: var(--border);
  border-radius: var(--r-pill);
  background: var(--overlay-flat);
  font-size: 16px;
  line-height: 1;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs { clear: both; padding-top: var(--s-9); }
.woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; gap: var(--s-5); margin: 0 0 var(--s-6); padding: 0; list-style: none; border-bottom: var(--border); }
.woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--c-text-muted); font-weight: var(--fw-semibold); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--c-text); border-bottom-color: var(--c-text); }
.woocommerce div.product .woocommerce-tabs .panel { max-width: var(--w-text); color: var(--c-text-muted); }
.woocommerce div.product .woocommerce-tabs .panel h2 { font-family: var(--font-display); font-size: var(--t-h3); color: var(--c-text); margin-bottom: var(--s-4); }
.woocommerce div.product .woocommerce-tabs .panel > * + * { margin-top: var(--s-4); }

/* Star ratings, drawn with glyphs rather than WooCommerce's icon font.
   WooCommerce sets the fill width inline on the inner span. */
.woocommerce .star-rating {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 5.4em;
  height: 1.1em;
  line-height: 1;
  font-size: 0.95em;
  letter-spacing: 0.1em;
}
.woocommerce .star-rating::before { content: "\2605\2605\2605\2605\2605"; color: var(--c-line-strong); position: absolute; inset: 0; }
.woocommerce .star-rating span { position: absolute; inset: 0 auto 0 0; overflow: hidden; padding-top: 1.5em; }
.woocommerce .star-rating span::before { content: "\2605\2605\2605\2605\2605"; color: var(--c-warning); position: absolute; top: 0; left: 0; }
.woocommerce p.stars a { color: var(--c-warning); }

/* Tables: cart, checkout review, order details */
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-surface);
  margin-bottom: var(--s-6);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: var(--s-4);
  border-top: var(--border);
  text-align: left;
  vertical-align: top;
  /* A table widens to fit its longest unbreakable word — here uploaded file
     names and the photos link in the brief, which pushed the order table
     58px past a phone screen. "anywhere" lets them wrap and shrinks the
     table's minimum width with them. */
  overflow-wrap: anywhere;
}
.woocommerce table.shop_table thead th { border-top: 0; font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-faint); }
.woocommerce table.shop_table tfoot th { color: var(--c-text-muted); font-weight: var(--fw-medium); }
.woocommerce table.shop_table .product-name a { font-family: var(--font-display); font-weight: var(--fw-semibold); }
.woocommerce table.shop_table td.product-thumbnail img { width: 72px; height: 72px; object-fit: contain; background: var(--c-surface-2); border-radius: var(--r-sm); }
.woocommerce a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--r-md);
  color: var(--c-text-muted) !important;   /* WooCommerce inlines a red colour */
  font-size: 1.4rem;
  line-height: 1;
}
.woocommerce a.remove:hover { background: var(--c-surface-2); color: var(--c-text) !important; }

/* The brief under each line item: label above answer, readable. */
.woocommerce .wc-item-meta,
.woocommerce dl.variation { list-style: none; margin: var(--s-2) 0 0; padding: 0; font-size: var(--t-small); color: var(--c-text-muted); }
.woocommerce .wc-item-meta li { margin-top: var(--s-2); }
.woocommerce .wc-item-meta .wc-item-meta-label,
.woocommerce dl.variation dt { color: var(--c-text); font-weight: var(--fw-semibold); }
.woocommerce .wc-item-meta p,
.woocommerce dl.variation dd,
.woocommerce dl.variation dd p { display: inline; margin: 0; }
.woocommerce dl.variation dt { float: left; clear: left; margin-right: var(--s-1); }
.woocommerce dl.variation dd { display: block; margin: 0 0 var(--s-1); }

.woocommerce-cart table.cart td.actions .coupon { display: flex; gap: var(--s-2); float: left; }
.woocommerce-cart table.cart td.actions .coupon .input-text { width: 12rem; }
.woocommerce-cart table.cart td.actions > .button { float: right; }
.woocommerce .cart-collaterals .cart_totals { max-width: 28rem; margin-left: auto; float: none; width: auto; }
.woocommerce .cart-collaterals .cart_totals h2 { font-family: var(--font-display); font-size: var(--t-h3); margin-bottom: var(--s-4); }
.woocommerce .wc-proceed-to-checkout .checkout-button { width: 100%; min-height: 52px; font-size: var(--t-body); }

/* Checkout */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading { font-family: var(--font-display); font-size: var(--t-h3); margin: var(--s-7) 0 var(--s-4); }
.woocommerce-form-coupon-toggle .woocommerce-info a { color: var(--c-text); text-decoration: underline; text-underline-offset: 0.2em; }
.woocommerce #payment {
  padding: var(--s-5);
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--r-lg);
}
.woocommerce #payment ul.payment_methods { list-style: none; margin: 0 0 var(--s-4); padding: 0; }
.woocommerce #payment ul.payment_methods li { padding: var(--s-2) 0; }
.woocommerce #payment .payment_box { margin-top: var(--s-2); padding: var(--s-3) var(--s-4); background: var(--c-surface-2); border-radius: var(--r-md); color: var(--c-text-muted); font-size: var(--t-small); }
.woocommerce #payment .place-order { padding: 0; margin: 0; }
.woocommerce #payment #place_order { width: 100%; min-height: 52px; font-size: var(--t-body); float: none; }
.woocommerce-terms-and-conditions-wrapper,
.woocommerce-privacy-policy-text { font-size: var(--t-small); color: var(--c-text-muted); margin-bottom: var(--s-4); }

/* Order received */
.woocommerce-order .woocommerce-thankyou-order-received { font-size: var(--t-body-lg); margin-bottom: var(--s-6); }
.woocommerce ul.order_details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-7);
  list-style: none;
  margin: 0 0 var(--s-8);
  padding: var(--s-5);
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--r-lg);
}
.woocommerce ul.order_details li { font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-faint); }
.woocommerce ul.order_details li strong { display: block; margin-top: var(--s-1); font-size: var(--t-body); letter-spacing: 0; text-transform: none; color: var(--c-text); }
.woocommerce .woocommerce-order-details__title,
.woocommerce .woocommerce-column__title { font-family: var(--font-display); font-size: var(--t-h3); margin-bottom: var(--s-4); }
.woocommerce .woocommerce-customer-details address { padding: var(--s-5); border: var(--border); border-radius: var(--r-lg); font-style: normal; color: var(--c-text-muted); }

@media (max-width: 768px) {
  .woocommerce-cart table.cart td.actions .coupon,
  .woocommerce-cart table.cart td.actions > .button { float: none; width: 100%; }
  .woocommerce-cart table.cart td.actions .coupon .input-text { width: auto; flex: 1; }
  .woocommerce-cart table.cart td.actions > .button { margin-top: var(--s-3); }
}


/* --- Case studies: card, single page, gallery --- */

.case-card .t-eyebrow { font-size: 10px; }
.case-card__cta { pointer-events: none; }            /* the whole card is the link */
.case-card:hover .case-card__cta { color: var(--c-text); }
.case-card:hover .case-card__cta .icon { transform: translateX(3px); }
.case-card__cta .icon { transition: transform var(--dur) var(--ease); }

.study .t-eyebrow a { color: var(--c-text-muted); }
.study .t-eyebrow a:hover { color: var(--c-text); }

.study__video { margin-bottom: 0; }
.study__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.study__hero {
  margin: 0;
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.study__hero img { width: 100%; height: auto; }

/* The work is shown uncropped, on an opaque ground, at its own ratio. */
.gallery {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.gallery__item {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--r-lg);
}
.gallery__item img { width: 100%; height: auto; object-fit: contain; }
.gallery__item:only-child { grid-column: 1 / -1; }

.study__blocks {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.study__block { display: flex; flex-direction: column; gap: var(--s-3); }
.study__block .t-micro { margin: 0; }
.study__block .t-body { color: var(--c-text-muted); }

.study__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  padding-block: var(--s-7) var(--s-9);
}
.study__nav-link {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-5);
  min-height: var(--tap);
  border: var(--border);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.study__nav-link:hover { border-color: var(--c-line-strong); background: var(--c-surface); }
.study__nav-link--next { text-align: right; grid-column: 2; }
.study__nav-title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-heading);
  line-height: 1.3;
}
@media (max-width: 600px) {
  .study__nav { grid-template-columns: 1fr; }
  .study__nav-link--next { grid-column: auto; }
}


/* --- BullyMusik.Ent Hub: releases, players, tracks ------------------------
   Same tokens as everything else, a different rhythm: artwork first and big,
   square covers, a wall of them. */

.release { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 900px) {
  .release { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-9); }
  .release__art { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}

.release__cover {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  background: var(--c-surface-2);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.release__cover img { width: 100%; height: 100%; object-fit: cover; }

/* The text panel sits on a solid ground — never over a photograph. */
.release__panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--r-lg);
}
.release__panel .t-h1 { margin-top: calc(var(--s-2) * -1); }

/* Player slot: a button until pressed, then a 16:9 YouTube frame. */
.player {
  position: relative;
  margin-top: var(--s-3);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-surface);
  border: var(--border);
}
.player.is-playing { aspect-ratio: 16 / 9; border-color: transparent; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player__start {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 56px;
  padding: var(--s-3) var(--s-4);
  color: var(--c-text);
  font-weight: var(--fw-semibold);
  font-size: var(--t-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
}
.player__start .icon {
  width: 16px;
  height: 16px;
  padding: 12px 11px 12px 13px;
  box-sizing: content-box;
  border-radius: var(--r-pill);
  background: var(--c-accent);   /* pressing play is the action */
  color: #fff;
}
.player__start:hover .icon { background: var(--c-accent-hover); }

.tracks { list-style: none; margin: var(--s-2) 0 0; padding: 0; border-top: var(--border); }
.track {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s-3);
  min-height: 60px;
  padding: var(--s-2) 0;
  border-bottom: var(--border);
}
.track__num { font-family: var(--font-display); font-size: var(--t-small); color: var(--c-text-faint); font-variant-numeric: tabular-nums; }
.track__name { font-family: var(--font-display); font-weight: var(--fw-semibold); letter-spacing: var(--ls-heading); overflow-wrap: anywhere; }
.track__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: var(--border);
  border-radius: var(--r-pill);
  color: var(--c-text);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.track__play .icon { width: 14px; height: 14px; margin-left: 2px; }
.track__play:hover { border-color: var(--c-line-strong); background: var(--c-surface-2); }
.track__play.is-current { background: var(--c-accent); border-color: transparent; color: #fff; }
/* A track with no player still lines up with the ones that have one. */
.track:not(:has(.track__play))::after { content: ""; width: var(--tap); }

.release__whole {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-2);
}

/* Platform icons are the action, so they are real 44px targets. */
.platforms { display: flex; gap: var(--s-1); }
.platforms__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--r-md);
  color: var(--c-text-muted);
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.platforms__link:hover { color: var(--c-text); background: var(--c-surface-2); }
.platforms__link .icon { width: 20px; height: 20px; }

.release-card .player { margin: 0; border-radius: 0; border-width: 1px 0 0; }
.release-card__foot { padding-top: var(--s-2); }
@media (max-width: 520px) {
  .track { grid-template-columns: 1.75rem minmax(0, 1fr) auto; }
  .track .platforms { grid-column: 2 / -1; grid-row: 2; margin-left: calc(var(--s-2) * -1); }
  .track:not(:has(.track__play))::after { display: none; }
}


/* --- Past & Present: packages --- */

.pp-included { margin-top: var(--s-7); }
.packages { align-items: stretch; }
.package {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--r-lg);
}
/* The middle package is marked by a stronger border, not by red. */
.package--featured { border-color: var(--c-text-muted); }
.package .checklist { grid-template-columns: 1fr; gap: var(--s-2); flex: 1; }
.package .checklist li { font-size: var(--t-small); }
.package .btn { margin-top: auto; }
.pp-limits { margin: var(--s-2) 0 0; padding-left: 1.2em; color: var(--c-text-muted); font-size: var(--t-small); line-height: 1.6; }
.pp-limits li + li { margin-top: var(--s-1); }


/* --- FAQ: a <details> accordion, no JavaScript --- */

.faq { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 960px) {
  .faq { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--s-10); }
  .faq__nav { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}
.faq__nav ul { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (min-width: 960px) { .faq__nav ul { flex-direction: column; gap: 0; } }
.faq__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  font-size: var(--t-small);
  color: var(--c-text-muted);
}
.faq__nav a:hover { color: var(--c-text); background: var(--c-surface); }

.faq__groups { display: flex; flex-direction: column; gap: var(--s-8); max-width: 52rem; }
.faq__group > .t-h3 { margin-bottom: var(--s-4); }

.faq__item { border-top: var(--border); }
.faq__item:last-child { border-bottom: var(--border); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 60px;
  padding: var(--s-4) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--t-body-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-heading);
  overflow-wrap: anywhere;
}
.faq__item summary::-webkit-details-marker { display: none; }
/* A plus that turns into a minus. Drawn in CSS, so no icon slot to go empty. */
.faq__item summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
  color: var(--c-text-muted);
  transition: transform var(--dur) var(--ease);
}
.faq__item[open] summary::after { background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat; }
.faq__item summary:hover { color: var(--c-text); }
.faq__item summary:hover::after { color: var(--c-text); }
.faq__answer { padding: 0 0 var(--s-5); color: var(--c-text-muted); }
.faq__answer .todo { margin-top: var(--s-3); }


/* --- Contact --- */

.contact { display: grid; gap: var(--s-8); align-items: start; }
@media (min-width: 960px) {
  .contact { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s-10); }
  .contact--solo { grid-template-columns: minmax(0, 46rem); }
  .contact__details { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}

.contact-form { display: flex; flex-direction: column; gap: var(--s-5); }
.field-row { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }

/* Labels above fields, 16px text (no iOS zoom), 44px minimum. */
.field { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.field > label { font-size: var(--t-small); font-weight: var(--fw-semibold); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  color: var(--c-text);
  font-size: 16px;
  line-height: 1.4;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--c-text-muted) 50%), linear-gradient(135deg, var(--c-text-muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: var(--s-8); }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: 2px solid var(--c-text); outline-offset: 1px; border-color: transparent; }
.field [aria-invalid="true"] { border-color: var(--c-warning); }
.field__help { font-size: var(--t-small); color: var(--c-text-faint); }
.field__error { font-size: var(--t-small); color: var(--c-warning); }

.contact-form__summary {
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--c-warning);
  background: rgba(227, 179, 65, 0.08);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--t-small);
}
.contact-form__submit { align-self: flex-start; }
@media (max-width: 600px) { .contact-form__submit { align-self: stretch; } }

/* The honeypot: off-screen rather than display:none, which some bots skip. */
.contact-form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.contact__sent a,
.contact__faq a { color: var(--c-text); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--c-line-strong); }

.contact__details {
  padding: var(--s-6);
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--r-lg);
}
.contact__details .t-h3 { margin-bottom: var(--s-5); }
.contact__list { margin: 0; display: flex; flex-direction: column; gap: var(--s-5); }
.contact__item { display: flex; gap: var(--s-4); align-items: flex-start; }
.contact__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: var(--border);
  border-radius: var(--r-md);
}
.contact__icon .icon { width: 18px; height: 18px; }
.contact__item dt { font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-faint); }
.contact__item dd { margin: var(--s-1) 0 0; font-size: var(--t-body); overflow-wrap: anywhere; }
.contact__item dd a { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--c-line-strong); }
.contact__faq { margin-top: var(--s-6); padding-top: var(--s-5); border-top: var(--border); }


/* --- About --- */

.about-hero__grid { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 900px) {
  .about-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-10); }
  .about-hero__grid--solo { grid-template-columns: minmax(0, 1fr); }
}
.about-hero__text > .t-h1 { max-width: 22ch; }

/* The photo slot is a fixed 4:5 box on an opaque ground — no shift while it
   loads, and it never floats over anything. */
.portrait {
  margin: 0;
  aspect-ratio: 4 / 5;
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait--empty { display: flex; align-items: center; padding: var(--s-6); border-style: dashed; }

.about-story { display: grid; gap: var(--s-6); }
@media (min-width: 900px) {
  .about-story { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--s-9); }
}
.about-story .prose { color: var(--c-text-muted); font-size: var(--t-body-lg); }

.about-elsewhere { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-7); }
.about-elsewhere__list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.about-elsewhere__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: var(--s-2) var(--s-4);
  border: var(--border);
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  color: var(--c-text-muted);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.about-elsewhere__link:hover { border-color: var(--c-line-strong); color: var(--c-text); }
.about-elsewhere__link .icon { width: 16px; height: 16px; }


/* --- Store: jump bar, bands, spotlight, checklist --- */

/* Sticks under the header so the lanes stay reachable through a long
   catalogue. Scrolls horizontally on a phone rather than wrapping into a
   block that eats the screen. */
.jumpbar {
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  background: rgba(10, 10, 11, 0.94);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-block: var(--border);
}
.jumpbar__list {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: var(--s-3);
  /* Bleed to the screen edge so the last chip does not look clipped. */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scroll-snap-type: x proximity;
}
.jumpbar__list::-webkit-scrollbar { display: none; }
.jumpbar__list > li { scroll-snap-align: start; }

.jumpbar__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: var(--s-2) var(--s-4);
  border: var(--border);
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  font-weight: var(--fw-medium);
  color: var(--c-text-muted);
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.jumpbar__chip:hover { border-color: var(--c-line-strong); color: var(--c-text); background: var(--c-surface); }
.jumpbar__count { font-size: var(--t-micro); color: var(--c-text-faint); }

.storeband + .storeband { padding-top: 0; }
.storeband__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  margin-bottom: var(--s-7);
  padding-top: var(--s-6);
  /* Full width, so the rule reads as a band divider rather than a line that
     ran out halfway. The copy inside keeps its own reading measure. */
  border-top: var(--border);
}
.storeband__head .t-lead { max-width: var(--w-text); }

/* The one product that needs real prominence. Same card component as every
   other product — only its surroundings differ. */
.spotlight {
  display: grid;
  gap: var(--s-6);
  align-items: center;
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-7);
  border-bottom: var(--border);
}
@media (min-width: 800px) {
  .spotlight { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--s-8); }
}
.spotlight__copy { max-width: 46ch; }

.checklist {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--t-body);
  color: var(--c-text-muted);
}
.checklist .icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 5px;
  color: var(--c-text);   /* a tick, not an accent */
}

.store__faq {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: var(--border);
  color: var(--c-text-muted);
}
.store__faq a { color: var(--c-text); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--c-line-strong); }
.store__faq a:hover { text-decoration-color: currentColor; }


/* --- Closing band --- */

.band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  text-align: center;
  padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--s-5);
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--r-lg);
}
.band .t-lead { max-width: 46ch; }
.band .btn { margin-top: var(--s-3); }


/* ==========================================================================
   07. HEADER
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(10, 10, 11, 0.86);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--c-line);
  background: rgba(10, 10, 11, 0.96);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: var(--header-h);
}

/* --- Brand --- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--tap);
  margin-right: auto;
  flex-shrink: 0;
}
.brand img { max-height: 40px; width: auto; }
.brand__text {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 0.9375rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.brand__text span { display: block; }
.brand__text .brand__sub {
  font-size: var(--t-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-text-muted);
}

/* --- Nav --- */
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: var(--tap);
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-small);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  color: var(--c-text-muted);
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.nav__link:hover,
.nav__item:focus-within > .nav__link { color: var(--c-text); }

.nav__item.is-current > .nav__link { color: var(--c-text); }
.nav__item.is-current > .nav__link::after {
  content: "";
  position: absolute;
  left: var(--s-3);
  right: var(--s-3);
  bottom: 12px;
  height: 1px;
  background: var(--c-text);   /* current page marker is white, not red */
}

.nav__caret {
  width: 10px;
  height: 10px;
  flex: none;
  transition: transform var(--dur-fast) var(--ease);
}

/* Dropdown */
.nav__sub {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 15rem;
  padding: var(--s-2);
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-panel);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
}
.nav__item:hover > .nav__sub,
.nav__item:focus-within > .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__item:hover > .nav__link .nav__caret,
.nav__item:focus-within > .nav__link .nav__caret { transform: rotate(180deg); }

.nav__sub a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--t-small);
  color: var(--c-text-muted);
}
.nav__sub a:hover { background: var(--c-surface-2); color: var(--c-text); }

/* --- Header actions --- */
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  flex-shrink: 0;
}

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--r-md);
  color: var(--c-text-muted);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: var(--c-surface-2); color: var(--c-text); }
.icon-btn svg { width: 20px; height: 20px; }

/* Cart count. The one other place red is allowed: it marks a live cart. */
.cart-count {
  position: absolute;
  top: 4px;
  right: 3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-accent);
  color: #fff;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  border-radius: var(--r-pill);
}
.cart-count[data-count="0"] { display: none; }

/* --- Search drawer --- */
.header__search {
  border-top: var(--border);
  background: var(--c-bg);
}
.header__search[hidden] { display: none; }
.header__search form {
  display: flex;
  gap: var(--s-3);
  padding-block: var(--s-4);
}
.header__search input[type="search"] {
  flex: 1 1 auto;
  /* Without this the input's intrinsic size refuses to shrink and pushes
     the submit button off a 375px screen. */
  min-width: 0;
  min-height: var(--tap);
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--r-md);
}
.header__search input[type="search"]::placeholder { color: var(--c-text-faint); }

/* --- Burger --- */
.nav-burger { display: none; }
.nav-burger span,
.nav-burger span::before,
.nav-burger span::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-burger span::before,
.nav-burger span::after { content: ""; position: absolute; }
.nav-burger span::before { transform: translateY(-6px); }
.nav-burger span::after  { transform: translateY(6px); }
.nav-burger[aria-expanded="true"] span { background: transparent; }
.nav-burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] span::after  { transform: rotate(-45deg); }

.nav__sub-toggle { display: none; }

/* --- Mobile nav --- */
@media (max-width: 1099px) {
  .nav-burger { display: inline-flex; }

  /* Absolute, not fixed. The header carries a backdrop-filter, which makes
     it the containing block for fixed-position children — a fixed panel
     collapses to the height of the header bar and the menu items below it
     render with no backdrop. Anchoring to the header instead is correct and
     travels with it, since the header is sticky. */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    z-index: var(--z-nav);
    background: var(--c-bg);
    padding: var(--s-5) var(--gutter) var(--s-10);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }

  .nav__item { border-bottom: var(--border); }

  .nav__link {
    justify-content: space-between;
    min-height: 56px;
    padding-inline: 0;
    font-size: var(--t-body-lg);
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-heading);
    color: var(--c-text);
  }
  .nav__item.is-current > .nav__link::after { display: none; }

  /* On touch, the parent link navigates and a separate button opens the
     submenu — tapping "STORE" should go to the store. */
  .nav__row { display: flex; align-items: center; gap: var(--s-2); }
  .nav__row > .nav__link { flex: 1 1 auto; min-width: 0; }
  .nav__sub-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap);
    height: var(--tap);
    flex: none;
    color: var(--c-text-muted);
  }
  .nav__sub-toggle svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease); }
  .nav__sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .nav__link .nav__caret { display: none; }

  .nav__sub {
    position: static;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0 0 var(--s-3);
  }
  .nav__sub[hidden] { display: none; }
  .nav__sub a { padding-left: var(--s-4); font-size: var(--t-body); }
}

@media (min-width: 1100px) {
  .nav__sub[hidden] { display: block; }   /* desktop uses hover, not the flag */
}


/* ==========================================================================
   08. FOOTER
   ========================================================================== */

/* CTA band above the footer */
.footer-cta {
  border-top: var(--border);
  background: var(--c-surface);
}
.footer-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem);
}
.footer-cta__copy { max-width: 42ch; }

.site-footer {
  border-top: var(--border);
  background: var(--c-bg);
  padding-top: var(--s-9);
}

.footer__cols {
  display: grid;
  gap: var(--s-8);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s-6); } }

.footer__heading {
  font-family: var(--font-body);
  font-size: var(--t-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-faint);
  margin-bottom: var(--s-4);
}

.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-size: var(--t-small);
  color: var(--c-text-muted);
}
.footer__links a:hover { color: var(--c-text); }
.footer__links li + li { margin-top: var(--s-1); }

.footer__contact dt {
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.footer__contact dd {
  margin: var(--s-1) 0 var(--s-4);
  font-size: var(--t-small);
  color: var(--c-text);
}
.footer__contact a { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--c-line-strong); }
.footer__contact a:hover { text-decoration-color: currentColor; }

.social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: var(--border);
  border-radius: var(--r-md);
  color: var(--c-text-muted);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.social a:hover { border-color: var(--c-line-strong); color: var(--c-text); background: var(--c-surface); }
.social svg { width: 18px; height: 18px; }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-9);
  padding-block: var(--s-5);
  border-top: var(--border);
}
.footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
}
.footer__legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-size: var(--t-small);
  color: var(--c-text-muted);
}
.footer__legal-links a:hover { color: var(--c-text); }
.footer__copyright { font-size: var(--t-small); color: var(--c-text-faint); }

/* Footer lists sit at 36px on a mouse and open up to the full 44px target
   on anything touch-sized. A stack of footer links is exactly where a thumb
   misses. */
@media (max-width: 900px) {
  .footer__links a,
  .footer__legal-links a { min-height: var(--tap); }
  .footer__links li + li { margin-top: 0; }
}


/* ==========================================================================
   09. UTILITIES
   ========================================================================== */

/* WordPress core and WooCommerce both use this class for text meant for
   screen readers only ("Remove this item", quantity labels). WooCommerce's
   colour stylesheet used to provide it; the theme does now. */
.screen-reader-text,
.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.u-center   { text-align: center; }
.u-mt-0     { margin-top: 0 !important; }
.u-flow > * + * { margin-top: var(--s-4); }

/* Hero surface. The ONLY place a background image is permitted, and only
   with the overlay. Body sections never get one. */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(420px, 56vh, 660px);
  padding-block: var(--s-10) var(--s-9);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--overlay-hero);
}
/* Wide enough that a display headline gets two or three lines instead of
   four, and that two large buttons sit on one row. The lead paragraph is
   pulled back to a reading measure separately. */
/* The cap goes on the children, not the element. hero__content sits on the
   same element as .container, and capping the element itself centred the
   whole block — so hero text started 140px to the right of every section
   below it. Capping the children keeps the left edge on the page grid. */
.hero__content > * { max-width: 46rem; }
.hero__content .t-lead { max-width: 42ch; }
.hero--flat { min-height: 0; padding-block: var(--s-9) var(--s-7); align-items: flex-start; }
.hero--flat::after { background: none; }

/* Panel: solid backdrop for text that would otherwise sit on imagery or
   video. Used by the Services reel hero and the BullyMusik release panels. */
.panel {
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.panel--solid { background: var(--overlay-flat); backdrop-filter: blur(8px); }
.panel--split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}
.panel--split > .stack { max-width: 54ch; }

/* On a phone the split panel stacks and its action takes the full width.
   A no-wrap label on a large button cannot otherwise shrink, and a long one
   pushes past the screen edge. */
@media (max-width: 600px) {
  .panel--split { flex-direction: column; align-items: stretch; }
  .panel--split .btn { width: 100%; white-space: normal; }
}

/* Numbered steps. Used by the NBA2K intake instructions, and by anything
   else that is genuinely a sequence. */
.steps {
  display: grid;
  gap: var(--s-5);
  list-style: none;
  counter-reset: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.steps__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--r-lg);
}
.steps__num {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: var(--fw-display);
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--c-line-strong);   /* a number, not a badge. never red. */
}
.steps__item .t-body { color: var(--c-text-muted); }

/* Callout: a quiet emphasis block. No icon slot, so it can never render an
   empty circle. */
.callout {
  margin-top: var(--s-7);
  padding: var(--s-5) var(--s-6);
  border-left: 2px solid var(--c-line-strong);
  background: var(--c-surface);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.callout > * + * { margin-top: var(--s-2); }
.callout a { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--c-line-strong); }
.callout a:hover { text-decoration-color: currentColor; }

.section__foot { margin-top: var(--s-7); }

.hero__actions { margin-top: var(--s-7); }

/* On a phone the hero actions go full width and stack. Both land in the
   thumb zone, neither can be clipped by a long label, and the primary
   action is unmissable. */
@media (max-width: 600px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; white-space: normal; }
}

/* The NBA2K hero runs taller — it is the landing page for social traffic and
   the key art is the first thing that has to land. */
.hero--nba2k { min-height: clamp(460px, 68vh, 720px); }

/* TODO markers. Visible to logged-in admins only; never to a visitor.
   Used wherever copy, contact details or media are still to be supplied. */
.todo {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px dashed var(--c-warning);
  border-radius: var(--r-sm);
  background: rgba(227, 179, 65, 0.08);
  color: var(--c-warning);
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
}
.todo::before { content: "TODO"; font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: 0.1em; padding-top: 2px; }
.todo--block { display: flex; width: 100%; }

/* Legal pages. The draft notice is deliberately loud — it has to survive
   being skim-read, because a policy published with [TODO] markers still in
   it is worse than no policy. */
.legal-draft-notice {
  border: 1px dashed var(--c-warning);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: rgba(227, 179, 65, 0.08);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-7);
}
.legal-draft-notice p { color: var(--c-warning); font-size: var(--t-small); line-height: 1.6; }

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  overflow-wrap: break-word;
}
.prose em { color: var(--c-text-muted); }


/* ==========================================================================
   10. MOTION
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .card:hover { transform: none; }
}

/* A checkbox field: the whole label is the 44px target. */
.field--check label {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  min-height: var(--tap);
  font-size: var(--t-small);
  font-weight: var(--fw-body);
  color: var(--c-text-muted);
  cursor: pointer;
}
.field--check input[type="checkbox"] {
  flex: none;
  width: 20px;
  min-height: 0;
  height: 20px;
  margin-top: 1px;
  padding: 0;
  accent-color: var(--c-text);
}

/* ==========================================================================
   Amazon picks
   ========================================================================== */

/* The affiliate disclosure: first thing on the page, before any link, and
   plainly readable — not fine print. */
.disclosure {
  max-width: 62ch;
  margin-top: var(--s-5);
  padding: var(--s-3) var(--s-4);
  border: var(--border);
  border-left: 3px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text-muted);
}
.picks { margin-top: var(--s-5); }
/* Amazon product shots are on white; give them a white well so they do not
   float as bright rectangles on the dark card. Only when there is an image. */
.pick .card__media:has(img) { background: #fff; }
/* In the two-up phone grid "View on Amazon" plus the arrow is wider than
   the column. Drop the arrow there, and if a very narrow screen still cannot
   fit the words, wrap them inside the button instead of spilling out. */
@media (max-width: 620px) {
  .pick .card__foot .btn { white-space: normal; text-align: center; line-height: 1.25; }
  .pick .card__foot .btn svg { display: none; }
}

/* ==========================================================================
   Order Received — sending files after ordering
   ========================================================================== */

.contact__side .callout { margin-top: 0; }
.contact__side .checklist { margin-top: var(--s-4); }
.contact__alt { margin-top: var(--s-4); color: var(--c-text-muted); }
.contact__alt a { color: var(--c-text); text-decoration: underline; text-underline-offset: 0.2em; }
@media (min-width: 960px) {
  .contact__side { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}
/* The field's own min-height would squash the native file control. */
.contact-form input[type="file"] { min-height: var(--tap); cursor: pointer; }

/* The pointer from WooCommerce's thank-you screen to this page. */
.thankyou-next { margin: var(--s-6) 0; }
/* My Account → the order: the way to its Your Order page. */
.oss-design-account { margin: var(--s-5) 0; }
/* On a phone the guidance comes before the form — it is meant to be read
   before choosing files, not found after sending them. */
@media (max-width: 959px) {
  .contact__side { order: -1; }
}

/* ==========================================================================
   Product page and category archive (inc/product-page.php)
   ========================================================================== */

/* The lane above the title: the way back to the rest of it. */
.product-lane { margin-bottom: var(--s-3); }
.product-lane a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--c-text-muted);
}
.product-lane a::before { content: "\2190"; margin-right: var(--s-2); }   /* ← */
.product-lane a:hover { color: var(--c-text); }
.woocommerce div.product .product-lane + .product_title { margin-top: 0; }

.product-rating { margin: calc(var(--s-2) * -1) 0 var(--s-4); }

/* Delivery terms: a quiet definition list, not a feature grid. */
.terms {
  margin: 0 0 var(--s-6);
  border-top: var(--border);
}
.terms__row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: var(--border);
  font-size: var(--t-small);
}
.terms dt { color: var(--c-text-faint); font-weight: var(--fw-semibold); }
.terms dd { margin: 0; color: var(--c-text); }

/* More in this lane */
.lane-more { clear: both; padding-top: var(--s-9); }
.lane-more__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

/* The sticky bar — phones only. */
.buybar { display: none; }
@media (max-width: 959px) {
  .buybar {
    position: fixed;
    inset: auto 0 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
    background: var(--c-surface);
    border-top: 1px solid var(--c-line-strong);
    box-shadow: var(--shadow-panel);
    transition: transform var(--dur) var(--ease), visibility 0s linear 0s;
  }
  .buybar.is-hidden {
    transform: translateY(110%);
    visibility: hidden;
    transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  .buybar__info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .buybar__name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--t-small);
    color: var(--c-text-muted);
  }
  .buybar .price { margin: 0; }
  .buybar .price__now { font-size: var(--t-body-lg); }
  .buybar .price__was { font-size: var(--t-micro); }
  .buybar__btn { flex: none; }
  body.has-buybar { padding-bottom: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .buybar, .buybar.is-hidden { transition: none; }
}

/* Category archive */
.archive-head { max-width: var(--w-text); margin-bottom: var(--s-7); }
.archive-head__desc { margin-top: var(--s-3); color: var(--c-text-muted); }
.archive-head__desc > * + * { margin-top: var(--s-3); }
.archive-empty { max-width: 36rem; }
.woocommerce .woocommerce-result-count { color: var(--c-text-faint); font-size: var(--t-small); }
.woocommerce .woocommerce-ordering { margin-bottom: var(--s-5); }

/* ==========================================================================
   Cart and checkout
   ========================================================================== */

.pay-note {
  margin: var(--s-4) 0 0;
  font-size: var(--t-small);
  color: var(--c-text-muted);
}
.woocommerce-checkout .pay-note { margin: 0 0 var(--s-4); }
.cart-back { margin-top: var(--s-3); font-size: var(--t-small); }
.cart-back a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--c-line-strong);
}
/* The product name is the only way back to a product from the cart. */
.woocommerce table.shop_table .product-name > a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

/* Checkout: your details on the left, the order and "Place order" on the
   right, staying in view while the form is filled in. */
@media (min-width: 960px) {
  .woocommerce form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    /* Row 1: any error notices. Row 2: "Your order". Row 3 takes the rest of
       the details column's height, so the heading stays tight to its table. */
    grid-template-rows: auto auto 1fr;
    column-gap: var(--s-9);
    align-items: start;
  }
  .woocommerce form.checkout > * { grid-column: 1 / -1; }
  .woocommerce form.checkout #customer_details { grid-column: 1; grid-row: 2 / span 2; }
  .woocommerce form.checkout #order_review_heading { grid-column: 2; grid-row: 2; margin-top: 0; }
  .woocommerce form.checkout #order_review {
    grid-column: 2;
    grid-row: 3;
    position: sticky;
    top: calc(var(--header-h) + var(--s-5));
  }
  .woocommerce form.checkout .col2-set .col-1,
  .woocommerce form.checkout .col2-set .col-2 { float: none; width: 100%; }
  .woocommerce form.checkout .col2-set .col-2 { margin-top: var(--s-6); }
}

/* WooCommerce's inline checkout errors, dressed like the theme's own. */
.woocommerce form .form-row .checkout-inline-error-message {
  margin: var(--s-2) 0 0;
  font-size: var(--t-small);
  color: var(--c-warning);
}
.woocommerce form .form-row.woocommerce-invalid .input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid .select2-selection { border-color: var(--c-warning); }
.woocommerce form .form-row.woocommerce-invalid label { color: var(--c-text); }

/* ==========================================================================
   Order intake — steps, options, uploads (inc/intake.php, assets/js/intake.js)
   ========================================================================== */

.intake [hidden],
form.cart .single_add_to_cart_button[hidden],
form.cart .quantity[hidden] { display: none !important; }

/* Progress: a thin bar and "Step 2 of 4 · Jersey 1". */
.intake__progress { display: flex; flex-direction: column; gap: var(--s-2); }
.intake__bar { height: 4px; border-radius: var(--r-pill); background: var(--c-surface-2); overflow: hidden; }
.intake__bar span { display: block; height: 100%; width: 0; background: var(--c-text); transition: width var(--dur) var(--ease); }
.intake__progress-text { margin: 0; color: var(--c-text-muted); }

.intake__step { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.intake__step-title { margin: 0; font-weight: var(--fw-semibold); color: var(--c-text); outline: none; }
.intake__item { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-4); border-top: var(--border); }
.intake__item:first-of-type { padding-top: 0; border-top: 0; }
.intake__item-title { margin: 0; font-weight: var(--fw-semibold); color: var(--c-text-muted); }

/* Pick-one: big tappable pills rather than a dropdown. */
.intake__choices { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.intake__choices legend { padding: 0; margin-bottom: var(--s-2); }
.intake__options { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.intake__option { position: relative; }
.intake__option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.intake__option span {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--s-4);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  font-size: var(--t-small);
  font-weight: var(--fw-semibold);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.intake__option input:checked + span { border-color: var(--c-text); color: var(--c-text); background: var(--c-surface); }
.intake__option input:focus-visible + span { outline: 2px solid var(--c-text); outline-offset: 2px; }

/* Uploads: one row per file, each with its own progress. */
.intake__uploads { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; }
.intake__uploads:empty { display: none; }
.intake__upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: var(--border);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  font-size: var(--t-small);
}
.intake__upload-name { flex: 1 1 10rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text); }
.intake__upload progress { flex: 1 1 8rem; height: 6px; accent-color: var(--c-text); }
.intake__upload.is-done .intake__upload-name::before { content: "\2713"; margin-right: var(--s-2); color: var(--c-success); }
.intake__upload.is-error { border-color: var(--c-warning); }
.intake__upload-error { flex-basis: 100%; color: var(--c-warning); }
.intake__remove {
  min-height: var(--tap);
  padding: 0 var(--s-3);
  background: none;
  border: 0;
  color: var(--c-text-muted);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.intake__remove:hover { color: var(--c-text); }
.intake__count { color: var(--c-text-faint); }
.intake__field--files.is-short .intake__count { color: var(--c-warning); }
.intake__field.is-invalid input[type="file"] { border-color: var(--c-warning); }

.intake__qty .quantity { margin: 0 0 var(--s-2); }
.intake__nav { display: flex; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-2); }
.intake__nav [data-next] { margin-left: auto; }
.intake__note {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--c-warning);
  background: rgba(227, 179, 65, 0.08);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--t-small);
  color: var(--c-text);
}
.qty-fixed { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: var(--fw-semibold); }

/* "Or paste a folder link" under an upload question. */
.intake__link { display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px dashed var(--c-line); }
.intake__label--sub { font-weight: var(--fw-medium); color: var(--c-text-muted); }

/* Product names are long ("Custom Stream Intros (Twitch/YouTube/Kick)") and
   can contain one unbreakable run. On a phone the title steps down one size
   in the scale so it wraps between words, not inside one. */
@media (max-width: 600px) {
  .woocommerce div.product .product_title { font-size: var(--t-h2); }
}