/* ==========================================================================
   KUBA SPORTS — site stylesheet
   --------------------------------------------------------------------------
   Written mobile-first: the default rules target a phone, and the @media
   blocks at the bottom of each section add what a wider screen can afford.
   Colours and spacing all come from the custom properties in :root, so
   changing the brand in one place changes it everywhere.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     MONOCHROME PALETTE
     ----------------------------------------------------------------------
     Black and white only. The accent is pure white against a warm off-white
     body text, which is what keeps buttons and prices reading as different
     from ordinary copy without introducing a third colour.

     To go back to the volt green of the original mockup, swap these three:
         --volt: #CBF442;  --volt-lift: #E4FF8A;  --on-volt: #1E2408;
     Nothing else needs to change.
     ---------------------------------------------------------------------- */

  --ink:        #0B0B0C;   /* page background */
  --surface:    #141416;   /* raised panels, alternating sections */
  --card:       #1A1A1E;   /* image wells behind product photos */
  --line:       #26262A;   /* hairline borders */
  --line-loud:  #4A4A4E;   /* borders on interactive things */
  --text:       #E8E7E3;   /* body text — warm off-white */
  --muted:      #8E8D89;   /* secondary text */
  --volt:       #FFFFFF;   /* the accent — pure white */
  --volt-lift:  #C9C8C4;   /* accent on hover */
  --on-volt:    #0B0B0C;   /* text placed on an accent background */
  --warn:       #E06A4E;   /* errors only — never decorative */

  /* Type */
  --display: Anton, "Arial Narrow", Impact, sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* Spacing scale — everything is a multiple of these */
  --gap-xs: 8px;
  --gap-sm: 14px;
  --gap:    22px;
  --gap-lg: 40px;
  --gap-xl: 64px;

  /* The page gutter. Grows on bigger screens via the media queries below. */
  --gutter: 18px;
  --maxw: 1320px;
}

@media (min-width: 640px)  { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; } }
@media (min-width: 1400px) { :root { --gutter: 64px; } }

/* --------------------------------------------------------------------------
   Reset — only what we actually need, not a full normalise
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Any author `display` rule beats the browser's own [hidden] styling, so
   without this the hidden attribute silently does nothing on .card, .empty
   and anything else we give a display value to. */
[hidden] { display: none !important; }

img, picture, video { max-width: 100%; display: block; }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* Keyboard focus must stay visible — this is the only accessible default. */
:focus-visible {
  outline: 2px solid var(--volt);
  outline-offset: 3px;
}

/* Screen-reader-only text (used for labels that would clutter the design) */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section      { padding-block: 56px; }
.section--tight { padding-block: 36px; }
.section--alt {
  background: var(--surface);
  border-block: 1px solid var(--line);
}

@media (min-width: 900px) {
  .section { padding-block: 88px; }
  .section--tight { padding-block: 56px; }
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.display {
  font-family: var(--display);
  font-weight: 400;          /* Anton only ships one weight */
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.01em;
}

/* Fluid sizes: clamp(min, preferred, max) so type scales with the viewport
   without needing a breakpoint for every step. */
.display--xl { font-size: clamp(2.6rem, 11vw, 6rem); }
.display--lg { font-size: clamp(2rem, 7vw, 3.4rem); }
.display--md { font-size: clamp(1.5rem, 5vw, 2.2rem); }

.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--volt);
}

.lede { font-size: clamp(1rem, 2.4vw, 1.18rem); color: var(--muted); }
.muted { color: var(--muted); }
.price { font-weight: 700; color: var(--volt); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  padding: 16px 26px;
  border: 1px solid transparent;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  /* 48px minimum tap target — thumbs on a phone, not a mouse */
  min-height: 48px;
}

.btn--primary { background: var(--volt); color: var(--on-volt); }
.btn--primary:hover { background: var(--volt-lift); }

.btn--ghost { border-color: var(--line-loud); color: var(--text); }
.btn--ghost:hover { border-color: var(--text); }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; }

.btn--block { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* The WhatsApp button carries its own green so it reads as WhatsApp,
   not as a generic call to action. */
.btn--whatsapp { background: var(--volt); color: var(--on-volt); }
.btn--whatsapp:hover { background: var(--volt-lift); }
.btn--whatsapp svg { width: 18px; height: 18px; fill: currentColor; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 11, 12, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  min-height: 62px;
}

.header__logo img { height: 24px; width: auto; }

/* Nav is hidden behind a toggle on phones and laid out inline from 900px up. */
.nav {
  display: none;
  gap: var(--gap-lg);
}
.nav a {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-block: 6px;
  border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] {
  color: var(--volt);
  border-bottom-color: var(--volt);
}

.header__actions { display: flex; align-items: center; gap: var(--gap-sm); }

.header__cta { display: none; }

/* Bag pill with a live count */
.bag-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border: 1px solid var(--line-loud);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-height: 44px;
}
.bag-link:hover { border-color: var(--volt); color: var(--volt); }
.bag-link__count {
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  display: grid;
  place-items: center;
  background: var(--volt);
  color: var(--on-volt);
  font-size: 0.72rem;
  line-height: 1;
}
.bag-link__count[data-empty="true"] { display: none; }

/* Hamburger */
.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--line-loud);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px; height: 2px;
  background: var(--text);
  position: relative;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: ""; position: absolute; left: 0;
  width: 18px; height: 2px; background: var(--text);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

/* The panel that drops down when the hamburger is tapped */
.nav-panel {
  display: none;
  border-top: 1px solid var(--line);
  padding-block: var(--gap-sm) var(--gap);
}
.nav-panel[data-open="true"] { display: block; }
.nav-panel a {
  display: block;
  padding: 14px 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.nav-panel a:last-of-type { border-bottom: 0; }

@media (min-width: 900px) {
  .header__bar { min-height: 76px; }
  .header__logo img { height: 30px; }
  .nav { display: flex; }
  .header__cta { display: inline-flex; }
  .nav-toggle, .nav-panel { display: none !important; }
}

/* --------------------------------------------------------------------------
   Hero — full-bleed video with the headline over it
   --------------------------------------------------------------------------
   Capped below full viewport height on purpose. A 100vh hero looks dramatic
   but pushes every product below the fold, and the job of this page is to get
   people into the catalogue. Roughly three quarters of the screen leaves the
   top of the product grid visible, which invites the scroll.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(520px, 78vh, 820px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: var(--card);
}

.hero__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Belt and braces: the file is already desaturated at encode time, but this
     guarantees monochrome even if the source is ever swapped for a colour one. */
  filter: grayscale(1) contrast(1.04);
}

/* Two-stop scrim: heavy at the bottom where the text sits, light at the top
   so the fabric texture still reads. A flat overlay would kill the footage. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(11,11,12,0.96) 0%, rgba(11,11,12,0.72) 34%, rgba(11,11,12,0.28) 66%, rgba(11,11,12,0.45) 100%);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap);
  padding-block: 56px 60px;
}

.hero__title { max-width: 14ch; }
.hero__lede { max-width: 46ch; color: #C9C8C4; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--gap-sm); }

@media (min-width: 900px) {
  .hero__inner { padding-block: 96px 88px; gap: var(--gap-lg); }
}

/* --------------------------------------------------------------------------
   Eyebrow tag
   -------------------------------------------------------------------------- */

.tag {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid rgba(255,255,255,0.28);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(255,255,255,0.05);
}

/* --------------------------------------------------------------------------
   Section heading with a link on the right
   -------------------------------------------------------------------------- */

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap);
  margin-bottom: var(--gap-lg);
  flex-wrap: wrap;
}
.section-head a {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--volt);
  border-bottom: 1px solid transparent;
}
.section-head a:hover { border-bottom-color: var(--volt); }

/* --------------------------------------------------------------------------
   Product grid and cards
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-sm);
}

@media (min-width: 700px)  { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card { display: flex; flex-direction: column; gap: 10px; }

.card__media {
  position: relative;
  background: var(--card);
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.card:hover .card__media img { transform: scale(1.04); }

/* Second photo fades in on hover where one exists */
.card__media img + img {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card:hover .card__media img + img { opacity: 1; }

.card__tag {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--volt);
  color: var(--on-volt);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 9px;
}

.card__name {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
}
.card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-xs);
  font-size: 0.9rem;
}
.card__colours { color: var(--muted); font-size: 0.8rem; }

/* --------------------------------------------------------------------------
   Product detail page
   -------------------------------------------------------------------------- */

.pdp { display: grid; gap: var(--gap-lg); padding-block: var(--gap-lg); }

@media (min-width: 950px) {
  .pdp {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--gap-xl);
    align-items: start;
    padding-block: var(--gap-xl);
  }
  .pdp__info { position: sticky; top: 100px; }
}

.gallery { display: flex; flex-direction: column; gap: var(--gap-sm); }

.gallery__main {
  background: var(--card);
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }

.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.gallery__thumbs button {
  background: var(--card);
  border: 2px solid transparent;
  padding: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
}
.gallery__thumbs button[aria-current="true"] { border-color: var(--volt); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.pdp__info { display: flex; flex-direction: column; gap: var(--gap); }

.pdp__price {
  font-family: var(--display);
  font-size: 2rem;
  color: var(--volt);
  line-height: 1;
}

.pdp__note {
  font-size: 0.85rem;
  color: var(--muted);
  border-left: 2px solid var(--line-loud);
  padding-left: 12px;
}

/* Option pickers — size and colour */
.options { display: flex; flex-direction: column; gap: var(--gap-sm); }

.option__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-xs);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.option__label a { color: var(--volt); text-decoration: underline; font-weight: 600; }

.swatches { display: flex; flex-wrap: wrap; gap: 8px; }

.swatch {
  min-width: 54px;
  min-height: 48px;
  padding: 12px 16px;
  background: none;
  border: 1px solid var(--line-loud);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.swatch:hover { border-color: var(--text); }
.swatch[aria-pressed="true"] {
  background: var(--volt);
  border-color: var(--volt);
  color: var(--on-volt);
}

/* Quantity stepper */
.qty { display: inline-flex; align-items: stretch; border: 1px solid var(--line-loud); }
.qty button {
  width: 48px; min-height: 48px;
  background: none; border: 0;
  font-size: 1.2rem; cursor: pointer;
}
.qty button:hover { color: var(--volt); }
.qty input {
  width: 56px;
  background: none; border: 0;
  text-align: center;
  font-weight: 700;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pdp__actions { display: flex; flex-direction: column; gap: 10px; }

/* Collapsible detail blocks */
.accordion { border-top: 1px solid var(--line); }
.accordion summary {
  padding: 16px 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; color: var(--volt); font-size: 1.2rem; }
.accordion[open] summary::after { content: "–"; }
.accordion__body { padding-bottom: 18px; color: var(--muted); font-size: 0.95rem; }
.accordion__body li {
  padding-left: 18px;
  position: relative;
  margin-bottom: 7px;
}
.accordion__body li::before {
  content: "";
  position: absolute; left: 0; top: 10px;
  width: 7px; height: 2px;
  background: var(--volt);
}

/* Sticky order bar that appears on phones once you scroll past the button */
.sticky-buy {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  display: none;
  gap: 10px;
  align-items: center;
  padding: 10px var(--gutter);
  background: rgba(11, 11, 12, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.sticky-buy[data-show="true"] { display: flex; }
.sticky-buy .btn { flex: 1; padding-inline: 12px; }
.sticky-buy__price { font-family: var(--display); font-size: 1.3rem; color: var(--volt); }

@media (min-width: 950px) { .sticky-buy { display: none !important; } }

/* --------------------------------------------------------------------------
   Bag and line items
   -------------------------------------------------------------------------- */

.lines { display: flex; flex-direction: column; }

.line {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: var(--gap-sm);
  padding-block: var(--gap);
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.line__media { background: var(--card); aspect-ratio: 4 / 5; overflow: hidden; }
.line__media img { width: 100%; height: 100%; object-fit: cover; }
.line__body { display: flex; flex-direction: column; gap: 8px; }
.line__top { display: flex; justify-content: space-between; gap: var(--gap-sm); }
.line__opts { font-size: 0.85rem; color: var(--muted); }
.line__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-sm); }
.line__remove {
  background: none; border: 0; cursor: pointer;
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  padding: 8px 0;
}
.line__remove:hover { color: var(--warn); }

@media (min-width: 700px) {
  .line { grid-template-columns: 110px minmax(0, 1fr); }
}

.totals {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-block: var(--gap);
}
.totals__row { display: flex; justify-content: space-between; gap: var(--gap-sm); }
.totals__row--grand {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-size: 1.5rem;
}
.totals__row--grand span:last-child { color: var(--volt); }

.empty {
  padding-block: var(--gap-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: var(--gap-sm); }
.field label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px;
  min-height: 48px;
  background: var(--surface);
  border: 1px solid var(--line-loud);
  color: var(--text);
  border-radius: 0;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--volt);
  outline: none;
}
.field textarea { min-height: 120px; resize: vertical; }
.field__hint { font-size: 0.8rem; color: var(--muted); }

.field-row { display: grid; gap: var(--gap-sm); }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }

.form-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: var(--gap);
}
@media (min-width: 700px) { .form-panel { padding: var(--gap-lg); } }

/* --------------------------------------------------------------------------
   Callout band (the volt "ordering for a gym or a team?" strip)
   -------------------------------------------------------------------------- */

.band {
  background: var(--volt);
  color: var(--on-volt);
  padding-block: 48px;
}
.band__inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.band p { color: #3A3A3E; }   /* readable grey on the white band */
.band__actions { display: flex; flex-wrap: wrap; gap: var(--gap-sm); align-items: center; }

@media (min-width: 900px) {
  .band { padding-block: 72px; }
  .band__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-xl);
  }
  .band__copy { max-width: 700px; }
}

/* --------------------------------------------------------------------------
   Three-step / feature columns
   -------------------------------------------------------------------------- */

.steps { display: grid; gap: var(--gap-lg); }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 56px; } }

.step { display: flex; flex-direction: column; gap: 12px; }
.step__num { font-family: var(--display); font-size: 1.25rem; color: var(--volt); }

/* --------------------------------------------------------------------------
   Tables (size guide)
   -------------------------------------------------------------------------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; min-width: 420px; }
th, td {
  padding: 14px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
th {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
tbody tr:hover { background: var(--surface); }

/* --------------------------------------------------------------------------
   Prose blocks (about, exchanges)
   -------------------------------------------------------------------------- */

.prose { max-width: 68ch; display: flex; flex-direction: column; gap: var(--gap); }
.prose p { color: var(--muted); }
.prose h2 { margin-top: var(--gap); }
.prose ul li {
  color: var(--muted);
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
}
.prose ul li::before {
  content: "";
  position: absolute; left: 0; top: 11px;
  width: 9px; height: 2px;
  background: var(--volt);
}

/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */

.notice {
  border: 1px solid var(--line-loud);
  border-left: 3px solid var(--volt);
  background: var(--surface);
  padding: var(--gap-sm) var(--gap);
  font-size: 0.92rem;
  color: var(--muted);
}
.notice strong { color: var(--text); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-block: var(--gap-lg);
}
.footer__grid { display: grid; gap: var(--gap-lg); }
@media (min-width: 760px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--gap-xl); }
}

.footer h4 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--gap-sm);
}
.footer li { margin-bottom: 9px; }
.footer a { color: var(--muted); font-size: 0.92rem; }
.footer a:hover { color: var(--volt); }
.footer__logo img { height: 28px; width: auto; margin-bottom: var(--gap-sm); }

.footer__bottom {
  margin-top: var(--gap-lg);
  padding-top: var(--gap);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm) var(--gap);
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Toast — confirmation when something is added to the bag
   -------------------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translate(-50%, 16px);
  z-index: 90;
  background: var(--volt);
  color: var(--on-volt);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  padding: 13px 22px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.toast[data-show="true"] { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   Social icons
   --------------------------------------------------------------------------
   Each brand gets its own colour on hover so the logos are recognisable,
   while sitting quietly in muted grey until then.
   -------------------------------------------------------------------------- */

.icon { display: block; flex: none; }

/* Icon-only row — footer */
.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--gap-sm);
}
.social-row__link {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-loud);
  color: var(--muted);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.social-row__link:hover {
  color: var(--on-volt);
  background: var(--volt);
  border-color: var(--volt);
}

/* Icon plus handle — contact page */
.social-list {
  display: grid;
  gap: 10px;
  margin-block: var(--gap-sm);
}
@media (min-width: 560px) {
  .social-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.social-list__link {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: 14px;
  border: 1px solid var(--line-loud);
  min-height: 48px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.social-list__link:hover { border-color: var(--volt); background: var(--surface); }
.social-list__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  color: var(--text);
}
.social-list__link .social-list__icon { color: var(--text); }
.social-list__link:hover .social-list__icon { color: var(--volt); }

/* --------------------------------------------------------------------------
   Map
   --------------------------------------------------------------------------
   OpenStreetMap rather than a Google embed: about a fifth of the weight, no
   advertising cookies, no API key. It only loads once scrolled into view.
   -------------------------------------------------------------------------- */

.map {
  border: 1px solid var(--line-loud);
  background: var(--card);
  aspect-ratio: 16 / 11;
  overflow: hidden;
}
.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* The default OSM tiles are bright white against a dark page. Knocking
     the brightness back stops the map glaring out of the layout. */
  filter: grayscale(0.25) brightness(0.88) contrast(1.05);
}

@media (min-width: 700px) { .map { aspect-ratio: 16 / 9; } }

/* Developer credit — present, but quieter than the client's own content. */
.credit { color: var(--muted); }
.credit strong { font-weight: 600; color: var(--muted); }
.credit a:hover, .credit a:hover strong { color: var(--volt); }

/* --------------------------------------------------------------------------
   Motion
   --------------------------------------------------------------------------
   One easing curve used everywhere. It decelerates hard at the end, which is
   what makes movement feel weighted rather than mechanical. Only transform
   and opacity are animated — anything else forces the browser to re-lay-out
   the page on every frame, which is exactly what kills a cheap Android.
   -------------------------------------------------------------------------- */

:root { --ease: cubic-bezier(0.22, 0.61, 0.24, 1); }

.btn,
.card__media img,
.swatch,
.social-row__link,
.social-list__link,
.bag-link {
  transition-timing-function: var(--ease);
  transition-duration: 0.45s;
}

/* Physical press feedback */
.btn:active { transform: scale(0.982); }

/* CTA with a nested arrow, rather than an arrow floating beside the label */
.btn--arrow { padding-right: 8px; }
.btn__dot {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: 10px;
  border-radius: 50%;
  background: rgba(0,0,0,0.10);
  font-size: 0.82rem;
  transition: transform 0.45s var(--ease);
}
.btn--arrow:hover .btn__dot { transform: translate(2px, -2px); }

/* --------------------------------------------------------------------------
   Scroll reveals
   --------------------------------------------------------------------------
   Elements start shifted down and transparent, and kuba.js adds .is-in when
   they enter the viewport. The no-js / reduced-motion case leaves everything
   visible, because content must never depend on an animation to be readable.
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* If the browser cannot run the observer, or the visitor asked for less
   motion, show everything immediately. */
html:not(.js) .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__video { display: none; }
}

/* --------------------------------------------------------------------------
   Hero framing
   --------------------------------------------------------------------------
   The footage is landscape (848x480) and the model is standing. On a phone
   the hero is taller than it is wide, so object-fit:cover would scale to the
   height and crop away most of the width — leaving a narrow vertical strip of
   torso. The garment, which is the whole point, disappears.

   So on phones the video is NOT a background. It sits in its own landscape
   block at the top, uncropped, with the copy underneath on solid black. The
   model is shown whole. From 900px up the viewport is wide enough that a
   background crop keeps the figure intact, so the overlay returns.
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
  .hero {
    display: block;
    min-height: 0;
  }

  .hero__video {
    position: relative;
    z-index: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  /* Fades the foot of the video into the copy block below it. 62.5vw is the
     height of a 16:10 box at full viewport width. */
  .hero__scrim {
    top: 0;
    bottom: auto;
    height: 62.5vw;
    background: linear-gradient(to top,
      rgba(11, 11, 12, 0.85) 0%,
      rgba(11, 11, 12, 0.15) 38%,
      rgba(11, 11, 12, 0) 70%);
  }

  .hero__inner {
    position: relative;
    z-index: 1;
    background: var(--ink);
    padding-block: 34px 48px;
  }
}

@media (min-width: 900px) {
  /* Bias the crop upward so a wide hero keeps the model's head in frame
     rather than trimming it equally from top and bottom. */
  .hero__video { object-position: 50% 28%; }
}

@media (min-width: 900px) {
  /* Push the model to the right of the frame so the headline sits on the
     plain wall rather than across his chest. */
  .hero__video { object-position: 68% 26%; }

  /* The wall behind the model is light, and white type on light grey is not
     readable. A left-to-right scrim gives the copy a dark ground while
     leaving the model in clear view on the right. */
  .hero__scrim {
    background:
      linear-gradient(to right,
        rgba(11, 11, 12, 0.93) 0%,
        rgba(11, 11, 12, 0.78) 30%,
        rgba(11, 11, 12, 0.34) 56%,
        rgba(11, 11, 12, 0.10) 78%),
      linear-gradient(to top,
        rgba(11, 11, 12, 0.80) 0%,
        rgba(11, 11, 12, 0.30) 40%,
        rgba(11, 11, 12, 0.10) 70%,
        rgba(11, 11, 12, 0.40) 100%);
  }
}

/* --------------------------------------------------------------------------
   Product card motion
   --------------------------------------------------------------------------
   Cards rise and their photograph settles from slightly over-scaled to true
   size, which reads as the image coming to rest rather than simply appearing.
   Transform and opacity only — nothing here forces the browser to re-lay-out
   the page, so it stays smooth on a cheap phone.
   -------------------------------------------------------------------------- */

.reveal--card { transform: translate3d(0, 28px, 0); }

.reveal--card .card__media img {
  transform: scale(1.06);
  transition: transform 1s var(--ease);
}
.reveal--card.is-in .card__media img { transform: scale(1); }

/* Hover: the photo pushes in while the name shifts, so the whole card feels
   like one object responding rather than two unrelated effects. */
.card__name { transition: transform 0.45s var(--ease), color 0.45s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card:hover .card__name { transform: translateX(4px); }
.card:active { transform: scale(0.995); }

/* Touch screens have no hover, and a sticky hover state left behind after a
   tap looks broken. Only arm these where a real pointer exists. */
@media (hover: none) {
  .card:hover .card__media img { transform: scale(1); }
  .card:hover .card__name { transform: none; }
}

/* --------------------------------------------------------------------------
   Heading discipline
   --------------------------------------------------------------------------
   A wide container is what keeps a display heading to two or three lines. A
   narrow one turns it into a column of single words, which is the single most
   common way big typography is ruined.
   -------------------------------------------------------------------------- */

.hero__title { max-width: 18ch; }

@media (min-width: 1100px) {
  .hero__title { max-width: 24ch; }
}