/* ===========================================================================
   NuSoulz. One stylesheet for the whole site.

   How this file is organised, top to bottom:
     1. Tokens          the colors, spacing, and sizes. Change them here only.
     2. Reset and base  browser normalising and default element styles
     3. Layout          containers and section rhythm
     4. Components      header, footer, buttons, cards, inputs, and so on
     5. Utilities       small single purpose helpers
     6. Motion          scroll reveal, with reduced motion respected

   Rule for anyone editing: never write a raw hex color in a component.
   Every color comes from a token in section 1.
   =========================================================================== */

/* ===========================================================================
   1. TOKENS
   =========================================================================== */

:root {
  /* --- Color ------------------------------------------------------------
     Sampled directly from the NuSoulz logo artwork rather than guessed.
     The logo runs a teal to indigo to purple gradient with a cyan scan line,
     and a deep navy wordmark. Those five are the whole palette.

     Measured from the artwork pixels:
       teal   #059197   the largest area of colour in the mark
       indigo #3D23A5   the middle of the gradient
       purple #66249C   the hand and the lower foot
       cyan   #8BDBEB   the scan line glow
       navy   #0A1A55   the wordmark and the focus brackets
     ---------------------------------------------------------------------- */
  --bg:            #080F1B;   /* page background */
  --surface:       #0D1526;   /* cards, panels */
  --surface-2:     #131E33;   /* inputs, nested panels */
  --line:          rgba(14, 143, 148, 0.20);
  --line-strong:   rgba(14, 143, 148, 0.44);

  --primary:       #0E8F94;   /* CTA fills and accents. Nowhere else. */
  --primary-hover: #3FB6BA;   /* accent text and border hover on dark */
  --primary-deep:  #0A7176;   /* filled CTA background */
  --primary-press: #086065;   /* filled CTA hover and active */
  --primary-soft:  rgba(14, 143, 148, 0.12);
  --secondary:     #1B2A63;   /* section blocks, from the wordmark navy */

  /* Gradient accents. Used sparingly: rules, underlines, and the sticky bar
     edge. Never behind text. */
  --brand-indigo:  #3D23A5;
  --brand-purple:  #66249C;
  --brand-cyan:    #6FD8E8;
  --brand-gradient: linear-gradient(90deg, #0E8F94 0%, #3D23A5 55%, #66249C 100%);

  --text:          #FFFFFF;
  --text-muted:    #9CA3AF;   /* never carries critical information */
  --success:       #34D399;   /* in stock, guarantee ticks */
  --warning:       #FBBF24;
  --danger:        #F87171;

  /* --- Shape ------------------------------------------------------------ */
  --radius:        14px;
  --radius-sm:     8px;
  --radius-lg:     20px;
  --radius-pill:   9999px;

  /* --- Spacing. Every value is a multiple of 8px. ------------------------ */
  --space:         8px;
  --space-1:       8px;
  --space-2:       16px;
  --space-3:       24px;
  --space-4:       32px;
  --space-5:       40px;
  --space-6:       48px;
  --space-8:       64px;
  --space-10:      80px;
  --space-12:      96px;

  /* --- Layout ----------------------------------------------------------- */
  --maxw:          1120px;
  --maxw-prose:    68ch;      /* line length cap for reading */
  --header-h:      64px;

  /* --- Type ------------------------------------------------------------- */
  --font-heading:  "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:     "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-h1:         clamp(2rem, 5vw, 3.25rem);
  --fs-h2:         clamp(1.5rem, 3vw, 2.1rem);
  --fs-h3:         clamp(1.25rem, 2.2vw, 1.5rem);
  --fs-h4:         1.125rem;
  --fs-body:       1rem;
  --fs-sm:         0.9375rem;
  --fs-xs:         0.8125rem;
  --fs-lead:       clamp(1.0625rem, 1.6vw, 1.25rem);

  /* --- Motion ----------------------------------------------------------- */
  --ease:          cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:           300ms;

  /* --- Focus ------------------------------------------------------------ */
  --focus-ring:    0 0 0 3px rgba(63, 182, 186, 0.55);
  --input-ring:    0 0 0 3px rgba(14, 143, 148, 0.30);
}

/* ===========================================================================
   2. RESET AND BASE
   =========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-2));
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; }
h4 { font-size: var(--fs-h4); font-weight: 700; }

p { text-wrap: pretty; }

p, li { max-width: var(--maxw-prose); }

a {
  color: var(--primary-hover);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover { color: var(--text); }

img, video, svg, picture {
  display: block;
  max-width: 100%;
  height: auto;
}

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

ul, ol { padding-left: 1.25em; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-6) 0;
}

/* Every focusable thing gets a visible ring. Never remove this. */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Skip link for keyboard and screen reader users. */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  z-index: 100;
  padding: var(--space-1) var(--space-2);
  background: var(--primary);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-weight: 700;
  transform: translateY(-200%);
  transition: transform 150ms var(--ease);
}

.skip-link:focus { transform: translateY(0); color: var(--text); }

/* ===========================================================================
   3. LAYOUT
   =========================================================================== */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.section {
  padding-block: var(--space-8);
}

.section--tight { padding-block: var(--space-6); }
.section--loose { padding-block: var(--space-12); }

/* A section painted on the secondary navy block. */
.section--panel {
  background: var(--secondary);
}

.section--surface {
  background: var(--surface);
}

.section__head {
  margin-bottom: var(--space-5);
}

.section__head p {
  color: var(--text-muted);
  font-size: var(--fs-lead);
  margin-top: var(--space-2);
}

.grid {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 960px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

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

@media (min-width: 720px) {
  .section { padding-block: var(--space-10); }
}

/* ===========================================================================
   4. COMPONENTS
   =========================================================================== */

/* --- Buttons --------------------------------------------------------------
   Pill shape, minimum 48px tall on mobile so it is a comfortable tap target.

   Filled buttons use --primary-deep, not --primary. White on --primary is
   3.91:1, which only passes WCAG AA if the label is large, and .btn--sm is
   16px. Using the deeper teal gives 5.77:1 at every size, so a small button
   is as readable as a big one. --primary stays the accent colour for borders,
   selected states, and icons.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 48px;
  padding: 12px var(--space-4);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform 120ms var(--ease);
}

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

.btn--primary {
  background: var(--primary-deep);
  color: var(--text);
}

.btn--primary:hover {
  background: var(--primary-press);
  color: var(--text);
}

.btn--secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--primary);
}

.btn--secondary:hover {
  background: var(--primary-soft);
  color: var(--text);
  border-color: var(--primary-hover);
}

.btn--ghost {
  background: transparent;
  color: var(--text-muted);
  min-height: 44px;
  font-size: var(--fs-body);
}

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

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

.btn--sm {
  min-height: 48px;
  padding: 10px var(--space-3);
  font-size: 1rem;
}

/* Some CTAs carry a short label for narrow screens and a longer one above it.
   Markup contract:
     <a class="btn btn--primary">
       <span class="btn__label-short">Get Insoles</span>
       <span class="btn__label-long">Get My Insoles</span>
     </a> */
.btn__label-long { display: none; }

@media (min-width: 420px) {
  .btn__label-short { display: none; }
  .btn__label-long { display: inline; }
}

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

/* --- Header ---------------------------------------------------------------
   Logo left, minimal nav, pill CTA right. On mobile the nav collapses behind
   a hamburger and the CTA stays visible, because the CTA is the point.
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8, 15, 27, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--header-h);
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.site-header__logo {
  display: flex;
  align-items: center;
  margin-right: auto;
}

.site-header__logo img {
  height: 30px;
  width: auto;
}

/* The header holds three things on a 375px phone: logo, CTA, and the menu
   button. Keep the CTA on one line and tighten it so nothing wraps. */
.site-header .btn {
  white-space: nowrap;
  padding-inline: var(--space-2);
}

@media (min-width: 560px) {
  .site-header__logo img { height: 36px; }
  .site-header .btn { padding-inline: var(--space-3); }
}

.site-nav {
  display: none;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] { color: var(--primary-hover); }

.site-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;          /* never let flex shrink it below the tap target */
  width: 48px;
  height: 48px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.site-header__toggle svg { width: 22px; height: 22px; }
.site-header__toggle .icon-close { display: none; }
.site-header__toggle[aria-expanded="true"] .icon-close { display: block; }
.site-header__toggle[aria-expanded="true"] .icon-menu { display: none; }

/* Mobile panel. Hidden by default, opened by main.js. */
.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.mobile-nav.is-open { display: block; }

.mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: var(--space-2) var(--space-3) var(--space-3);
}

.mobile-nav__list a {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 880px) {
  .site-nav { display: block; }
  .site-header__toggle { display: none; }
  .mobile-nav { display: none !important; }
}

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

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-block: var(--space-8) var(--space-4);
  margin-top: var(--space-10);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 720px) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

.site-footer h2 {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li + li { margin-top: var(--space-1); }

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--text);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.site-footer a:hover { color: var(--primary-hover); }

.site-footer__logo img { height: 34px; width: auto; }

.site-footer__blurb {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin-top: var(--space-2);
}

.site-footer__pay {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-3);
}

/* Payment acceptance marks.
   Each mark is its own file in /assets/img/pay/, so replacing ours with the
   official brand assets is a file swap and touches no markup and no CSS.
   See NEXT-STEPS.md for where each brand publishes its official mark. */
.pay-mark {
  display: inline-block;
  width: 40px;
  height: 25px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 4px;
}

.pay-mark--visa        { background-image: url("/assets/img/pay/visa.svg"); }
.pay-mark--mastercard  { background-image: url("/assets/img/pay/mastercard.svg"); }
.pay-mark--amex        { background-image: url("/assets/img/pay/amex.svg"); }
.pay-mark--discover    { background-image: url("/assets/img/pay/discover.svg"); }
.pay-mark--apple-pay   { background-image: url("/assets/img/pay/apple-pay.svg"); }
.pay-mark--google-pay  { background-image: url("/assets/img/pay/google-pay.svg"); }

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.site-footer__credit a {
  min-height: 0;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  text-decoration: underline;
}

.site-footer__credit a:hover { color: var(--primary-hover); }

/* --- Cards ---------------------------------------------------------------
   No drop shadows. Shadows do nothing on a near black background. Separation
   comes from the hairline border and the surface step.
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.card--flush { padding: 0; overflow: hidden; }

.card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: 800;
}

.card__meta {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* Selectable cards: model tiers and bundle rows.
   Selection has to be obvious on a phone in daylight, so it is a 2px blue
   border plus an inner glow, not a subtle tint. */
.select-card {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}

.select-card:hover { border-color: var(--line-strong); }

.select-card.is-selected,
.select-card[aria-checked="true"] {
  border: 2px solid var(--primary);
  padding: calc(var(--space-3) - 1px);
  box-shadow: inset 0 0 0 1px rgba(14, 143, 148, 0.30),
              inset 0 0 24px rgba(14, 143, 148, 0.12);
}

.select-card__badge {
  position: absolute;
  top: calc(var(--space-1) * -1.5);
  left: var(--space-3);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--text);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.select-card__price {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 800;
}

.select-card__was {
  color: var(--text-muted);
  text-decoration: line-through;
  font-size: var(--fs-sm);
  margin-left: var(--space-1);
}

.select-card__save {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(52, 211, 153, 0.14);
  color: var(--success);
  font-size: var(--fs-xs);
  font-weight: 700;
}

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

.field { display: block; }

.field__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.field__hint {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  margin-top: var(--space-1);
}

.field__error {
  color: var(--danger);
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-top: var(--space-1);
}
.field__error[hidden] { display: none; }

.input,
.select,
.textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px var(--space-2);
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.textarea { min-height: 120px; padding-top: var(--space-2); }

.input::placeholder,
.textarea::placeholder { color: var(--text-muted); }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--input-ring);
}

.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--space-5);
}

/* Segmented toggle, used for the mens and womens size system switch. */
.segmented {
  display: inline-flex;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.segmented button {
  min-height: 40px;
  padding: 0 var(--space-3);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
}

.segmented button[aria-pressed="true"] {
  background: var(--primary);
  color: var(--text);
}

/* --- Accordion ------------------------------------------------------------ */

.accordion {
  border-top: 1px solid var(--line);
}

.accordion__item { border-bottom: 1px solid var(--line); }

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: 56px;
  padding: var(--space-2) 0;
  background: transparent;
  border: 0;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.accordion__trigger::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(45deg) translateY(-25%);
  transition: transform var(--dur) var(--ease);
}

.accordion__trigger[aria-expanded="true"]::after {
  transform: rotate(-135deg) translateY(-25%);
}

.accordion__panel {
  padding-bottom: var(--space-3);
  color: var(--text-muted);
}

.accordion__panel[hidden] { display: none; }

/* --- Trust row and small pieces ------------------------------------------- */

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: center;
}

.trust-row__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.trust-row__item svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--success);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-hover);
  margin-bottom: var(--space-1);
}

.pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.lead {
  font-size: var(--fs-lead);
  color: var(--text-muted);
}

/* --- Sticky mobile buy bar ------------------------------------------------
   Revealed by main.js once the gallery scrolls out of view.
   -------------------------------------------------------------------------- */

.buy-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  padding-bottom: calc(var(--space-1) + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 15, 27, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease);
}

.buy-bar.is-visible { transform: translateY(0); }

.buy-bar__price {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: 800;
  margin-right: auto;
}

.buy-bar__price small {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-muted);
}

@media (min-width: 880px) {
  .buy-bar { display: none; }
}

/* --- Product page ---------------------------------------------------------
   Mobile: gallery on top, buy panel below. Desktop: side by side with the
   buy panel sticky so the price and CTA stay in view while the page scrolls.
   -------------------------------------------------------------------------- */

.product {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-4);
}

@media (min-width: 900px) {
  .product {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-6);
    align-items: start;
  }

  .product__buy {
    position: sticky;
    top: calc(var(--header-h) + var(--space-2));
  }
}

/* A fixed square stage. The photography is a mix of landscape and portrait,
   so without a fixed box the page would jump on every image change and the
   crossfade would have nothing stable to fade against. Images are contained
   rather than cropped, so nothing is ever cut off. */
.gallery__stage {
  position: relative;
  /* 5:4 is the compromise between the two orientations in the photo set.
     The landscape printer shots fill it almost exactly, and the portrait
     shots still fit whole rather than being cropped. */
  aspect-ratio: 5 / 4;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.gallery__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 260ms var(--ease);
}

.gallery__layer.is-active { opacity: 1; }

/* Colour switch under the thumbnails. */
.gallery__colors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-3);
}

.gallery__colors-label {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--text-muted);
}

.gallery__colors-value {
  color: var(--text);
  margin-left: 6px;
}

.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.gallery__thumb {
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1;
}

.gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__thumb.is-selected {
  border: 2px solid var(--primary);
}

/* --- Price ---------------------------------------------------------------- */

.price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.price {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
}

.price__unit {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.price__note {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin-top: 4px;
}

.delivery-line {
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
}

.delivery-line strong { color: var(--success); }

/* --- Selectors ------------------------------------------------------------ */

.selector {
  margin: var(--space-5) 0 0;
  padding: 0;
  border: 0;
}

.selector__legend {
  padding: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: 800;
  margin-bottom: var(--space-2);
}

.selector__sub,
.selector__note {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin-top: var(--space-2);
}

.selector__sub { margin-top: 0; margin-bottom: var(--space-2); }

.tier-grid {
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 520px) {
  .tier-grid { grid-template-columns: repeat(3, 1fr); }
}

.tier {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tier__name {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tier.is-selected .tier__name { color: var(--primary-hover); }

.tier__line {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.4;
}

.tier-detail {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}

.tier-detail ul {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.tier-detail li + li { margin-top: 4px; }

/* --- Color swatches -------------------------------------------------------
   The three stocked filament colors. These are the only place in the CSS
   where a product color is allowed to be a literal value, because they
   describe a physical object rather than the interface.
   -------------------------------------------------------------------------- */

:root {
  --filament-red:   #E23B2E;
  --filament-blue:  #4B93D8;
  --filament-black: #1C1C1E;
}

.color-picker {
  display: grid;
  gap: var(--space-2);
}

.color-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.color-pair__label {
  min-width: 62px;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--text-muted);
}

.swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.swatch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 48px;
  padding: 0 var(--space-3) 0 var(--space-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.swatch:hover { border-color: var(--line-strong); }

.swatch.is-selected {
  border: 2px solid var(--primary);
  box-shadow: inset 0 0 16px rgba(14, 143, 148, 0.14);
}

.swatch__dot {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  /* A hairline keeps the black swatch visible against the dark surface. */
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.swatch__dot--red   { background: var(--filament-red); }
.swatch__dot--blue  { background: var(--filament-blue); }
.swatch__dot--black { background: var(--filament-black); }

.size-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.size-row .select { flex: 1 1 180px; }

/* --- Bundle rows ---------------------------------------------------------- */

.bundle-list {
  display: grid;
  gap: var(--space-2);
}

.bundle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.bundle__count {
  font-family: var(--font-heading);
  font-weight: 800;
  min-width: 68px;
}

.bundle__pricing {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}

.bundle__each {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.bundle__total {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 700;
}

/* --- How you buy ---------------------------------------------------------- */

.buy-options {
  display: grid;
  gap: var(--space-2);
}

.buy-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.buy-option__title {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.buy-option.is-selected .buy-option__title { color: var(--primary-hover); }

.buy-option__pricing {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
}

.buy-option__unit {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.buy-option__note {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.5;
  margin-top: 4px;
}

/* Renewal terms. Never shrink this below --fs-xs and never hide it behind a
   tooltip: auto renewal rules require the terms to be clear and conspicuous
   before purchase. */
#renewal-terms {
  border-left: 3px solid var(--primary);
  padding-left: var(--space-2);
}

/* --- Buy form ------------------------------------------------------------- */

.buy-form {
  margin-top: var(--space-5);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.buy-form__reassure {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  text-align: center;
}

/* --- Numbered steps ------------------------------------------------------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: none;
}

.step__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  border: 1px solid var(--line-strong);
  color: var(--primary-hover);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 800;
}

.step__title {
  font-size: var(--fs-h3);
  margin-bottom: 4px;
}

.step p { color: var(--text-muted); }

/* --- Comparison strip ----------------------------------------------------- */

.compare {
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 720px) {
  .compare { grid-template-columns: repeat(3, 1fr); }
}

.compare__item {
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.compare__item--ours {
  border: 2px solid var(--primary);
  background: var(--surface);
}

.compare__label {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

.compare__item--ours .compare__label { color: var(--primary-hover); }

.compare__value {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: 800;
}

.compare__note {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin-top: 4px;
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-6) var(--space-8);
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-8);
  }
}

.hero__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

/* --- Trust badges --------------------------------------------------------- */

.badge-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 760px) {
  .badge-grid { grid-template-columns: repeat(3, 1fr); }
}

.badge {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.badge__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary-hover);
}

.badge__icon svg { width: 20px; height: 20px; }

.badge__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-sm);
}

.badge__note {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

/* --- Reviews --------------------------------------------------------------
   Hidden until real reviews exist. See the REVIEWS contract in main.js.
   -------------------------------------------------------------------------- */

.review-rail {
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 760px) {
  .review-rail { grid-template-columns: repeat(3, 1fr); }
}

.review {
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.review__stars {
  color: var(--warning);
  letter-spacing: 2px;
  font-size: var(--fs-sm);
}

.review__body {
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
}

.review__meta {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.review__photo {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin-top: var(--space-2);
}

.review-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.review-summary__score {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 800;
}

/* --- Thank you page -------------------------------------------------------
   The scan CTA is deliberately the loudest thing on the page. Everything
   else, including the order summary, sits below it.
   -------------------------------------------------------------------------- */

.confirm { max-width: 720px; }

.scan-cta {
  padding: var(--space-4) var(--space-3);
  background: var(--surface);
  border: 2px solid var(--primary);
  border-radius: var(--radius);
}

.scan-cta h2 {
  font-size: var(--fs-h3);
}

.scan-cta p {
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.scan-cta__later {
  font-size: var(--fs-sm);
  margin-top: var(--space-2);
  text-align: center;
}

.summary {
  margin: 0;
  display: grid;
  gap: var(--space-1);
}

.summary > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.summary dt {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.summary dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
}

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

.notice {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: var(--fs-sm);
}

.notice--success { border-left-color: var(--success); }
.notice--danger  { border-left-color: var(--danger); }

/* ===========================================================================
   5. UTILITIES
   =========================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.text-center  { text-align: center; }
.text-muted   { color: var(--text-muted); }
.text-success { color: var(--success); }

.center-prose {
  margin-inline: auto;
  max-width: var(--maxw-prose);
}

.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }

.flex-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.flex-row--center { justify-content: center; }

.is-hidden { display: none !important; }

/* ===========================================================================
   6. MOTION
   Fade and rise on section entry. 300ms, 12px of travel. Nothing else.
   =========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}