/* ---------------------------------------------------------------------------
   MURA — a two-tone monochrome system.

   The palette is expressed as custom properties rather than fixed colours, so a
   section can invert simply by carrying `.band-light`. Everything downstream —
   text, rules, plates, buttons, form fields — reads from the same tokens and
   flips with it. Black bands and white bands are the same components, not two
   sets of styles.
   --------------------------------------------------------------------------- */

:root {
  /* Black band (the default). */
  --surface:        #121212;   /* matte black   */
  --surface-raised: #1E1E1E;   /* soft charcoal */
  --surface-sunken: #0D0D0D;
  --ink:            #F5F5F7;   /* off-white     */
  --ink-muted:      #86868B;   /* muted gray    */
  --line:           rgba(255, 255, 255, .09);
  --line-strong:    rgba(255, 255, 255, .28);

  /* What a solid, high-contrast element (a primary button, a count badge)
     becomes on this band: the exact inverse of the band itself. */
  --invert-bg:      #F5F5F7;
  --invert-ink:     #121212;

  /* The one colour in the storefront. Validation errors are the only place
     hue does real work, so it is tuned per band for contrast. */
  --danger:         #FF7A7A;
}

.band-light,
.band-white {
  --surface:        #F5F5F7;
  --surface-raised: #FFFFFF;
  --surface-sunken: #EBEBED;
  --ink:            #121212;
  --ink-muted:      #6E6E73;   /* darkened from #86868B to clear AA on white */
  --line:           rgba(0, 0, 0, .10);
  --line-strong:    rgba(0, 0, 0, .30);

  --invert-bg:      #121212;
  --invert-ink:     #F5F5F7;
  --danger:         #B3261E;

  background-color: var(--surface);
  color: var(--ink);
}

/* Paper-white. Same ink, one step brighter ground. */
.band-white {
  --surface:        #FFFFFF;
  --surface-raised: #F5F5F7;
  --surface-sunken: #EBEBED;
}

/* --- Semantic utilities ----------------------------------------------------
   Used in place of fixed Tailwind colour utilities anywhere a section might
   invert. Widths and spacing still come from Tailwind. */
.surface        { background-color: var(--surface); }
.surface-raised { background-color: var(--surface-raised); }
.surface-sunken { background-color: var(--surface-sunken); }
.ink            { color: var(--ink); }
.ink-muted      { color: var(--ink-muted); }
.line           { border-color: var(--line); }
.line-strong    { border-color: var(--line-strong); }
.hover-line:hover { border-color: var(--line-strong); }
.fill-ink       { background-color: var(--ink); }
.fill-muted     { background-color: var(--ink-muted); }
.fill-line      { background-color: var(--line-strong); }
.chip-invert    { background-color: var(--invert-bg); color: var(--invert-ink); }
.danger         { color: var(--danger); }
.danger-panel   { border: 1px solid var(--danger); color: var(--danger); background: transparent; }

[x-cloak] { display: none !important; }

::selection { background: var(--ink); color: var(--surface); }

/* A quiet, thin scrollbar. A loud one is visual noise. */
* { scrollbar-width: thin; scrollbar-color: #2c2c2c transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #2c2c2c; border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* --- Navigation ------------------------------------------------------------
   The header and footer are permanently black, whatever the page below them
   does, so they read as a constant frame around the content. */
.nav-link {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  transition: color .35s cubic-bezier(.22,1,.36,1);
}
.nav-link:hover { color: var(--ink); }

.mobile-link {
  padding: 14px 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--line);
}
.mobile-link:last-child { border-bottom: 0; }

.footer-heading {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink);
  margin-bottom: 16px;
}
.footer-link {
  display: block;
  font-size: 13px;
  color: var(--ink-muted);
  padding: 6px 0;
  transition: color .3s cubic-bezier(.22,1,.36,1);
}
.footer-link:hover { color: var(--ink); }

/* --- Buttons ---------------------------------------------------------------
   A primary button is always the inverse of its band: white on black, black on
   white. It needs no per-section variant. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  padding: 16px 34px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  transition: all .4s cubic-bezier(.22,1,.36,1);
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary { background: var(--invert-bg); color: var(--invert-ink); }
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); opacity: .9; }
.btn-primary:disabled { opacity: .35; cursor: not-allowed; transform: none; }

.btn-ghost { border: 1px solid var(--line-strong); color: var(--ink); }
.btn-ghost:hover { background: var(--invert-bg); color: var(--invert-ink); }

/* --- Form fields -----------------------------------------------------------
   One class, both bands. */
/* Element-qualified so these beat the Tailwind forms plugin's own
   [type='text'] base rules, which would otherwise paint every input white. */
input.field, textarea.field, select.field {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line);
  background-color: var(--surface-raised);
  color: var(--ink);
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
  transition: border-color .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1);
}
input.field::placeholder, textarea.field::placeholder {
  color: var(--ink-muted);
  opacity: .75;
}
input.field:focus, textarea.field:focus, select.field:focus {
  outline: none;
  border-color: var(--line-strong);
  box-shadow: 0 0 0 1px var(--line-strong);
}

input.file-field { display: block; width: 100%; font-size: 12px; color: var(--ink-muted); }
input.file-field::file-selector-button {
  margin-right: 16px;
  border: 0;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 12px;
  font-weight: 500;
  background: var(--invert-bg);
  color: var(--invert-ink);
  cursor: pointer;
}
input.file-field::file-selector-button:hover { opacity: .9; }

input[type=checkbox] { accent-color: var(--ink); }

/* The payment radios are drawn from scratch rather than tinted: a native
   control keeps its own blue in some engines even with accent-color set, and
   the storefront has no blue in it. */
.pay-tile input[type=radio] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  position: relative;
  cursor: pointer;
  transition: border-color .3s cubic-bezier(.22,1,.36,1);
}
.pay-tile input[type=radio]:checked { border-color: var(--ink); }
.pay-tile input[type=radio]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: var(--ink);
}
.pay-tile input[type=radio]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--line);
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* Radio cards on checkout: the whole tile is the control. */
.pay-tile { transition: all .35s cubic-bezier(.22,1,.36,1); }
.pay-tile:hover { border-color: var(--line-strong); }
.pay-tile:has(input:checked) {
  border-color: var(--line-strong);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* --- Reveal on scroll ------------------------------------------------------
   Elements marked .reveal start slightly low and faded; mura.js adds .is-in as
   they enter the viewport. Anyone who prefers reduced motion just sees them. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --- Detail ---------------------------------------------------------------- */
.hairline { border-top: 1px solid var(--line); }

.eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-muted);
}

/* A soft radial wash behind the hero — depth without an image. */
/* background-IMAGE, not the background shorthand: the shorthand would reset
   background-color and blow away the band's ground colour underneath. */
.hero-glow {
  background-image:
    radial-gradient(60% 50% at 50% 0%, rgba(245,245,247,.07) 0%, transparent 70%),
    radial-gradient(40% 40% at 80% 60%, rgba(245,245,247,.04) 0%, transparent 70%);
}
.band-light.hero-glow,
.band-white.hero-glow,
.band-light .hero-glow,
.band-white .hero-glow {
  background-image:
    radial-gradient(65% 55% at 50% 0%, rgba(0,0,0,.05) 0%, transparent 72%),
    radial-gradient(45% 45% at 82% 62%, rgba(0,0,0,.03) 0%, transparent 72%);
}

/* Product imagery sits on a subtle raised plane rather than a hard box. */
.plate {
  background: var(--surface-raised);
  border: 1px solid var(--line);
}
.band-light .plate {
  /* On white, a flat plate disappears — a whisper of shadow holds the edge. */
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 30px rgba(0,0,0,.05);
}