/* =================================================================
   THEMAKEUPHOUSE — Undertone Scan Store
   A broadsheet-counter aesthetic: double rules, mono labels above
   values, numerals in their own right-aligned columns, rust ink
   reserved for match figures.
   ================================================================= */

/**
 * Palette — "Gold Disc", sampled from design/social/ig-06-gold-disc-full.png:
 *   ground  #0d0300   the black around the disc
 *   marble  #372c20   the disc face
 *   gold    #d2ab5e   the rim
 *   lit     #fbe4ab   the lit edge and the brightest lettering
 *
 * The page sits on the disc's marble rather than the black around it. Pure
 * black made every panel edge disappear.
 */
:root {
  /* Three depths of night, warm rather than blue: the ground, a panel, and a
     card lifted off it. */
  --paper: #221c14;
  --paper-2: #2e2619;
  --paper-3: #3a3123;

  /* Ink is the lettering cream. The alpha steps keep the ratios the light
     palette used, so every rule leaning on them stays in proportion. */
  --ink: #f2e7cf;
  --ink-75: rgba(242, 231, 207, 0.72);
  --ink-70: rgba(242, 231, 207, 0.66);
  --ink-55: rgba(242, 231, 207, 0.5);
  --ink-30: rgba(242, 231, 207, 0.26);
  --ink-22: rgba(242, 231, 207, 0.18);
  --ink-16: rgba(242, 231, 207, 0.13);

  /* Rust was the one warm accent. Gold has the job now. */
  --rust: #d2ab5e;
  --gold: #d2ab5e;
  --gold-lit: #fbe4ab;
  --gold-deep: #8f6d2f;
  --on-gold: #17120b;

  /* Dark sections sit ABOVE the ground, not below it, or they recede
     instead of lifting. */
  --dark: #352c1e;
  --dark-ink: #f7edd8;
  --dark-ink-60: rgba(247, 237, 216, 0.62);
  --dark-ink-35: rgba(247, 237, 216, 0.34);

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Gabarito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --rule: 3px double rgba(210, 171, 94, 0.62);
  --rule-dark: 3px double rgba(210, 171, 94, 0.5);
  --hair: 1px solid var(--ink-30);
  --max: 1240px;
  --gutter: 30px;
  --screen-pad: 40px;
}

/*
 * The site is dark, so the browser must draw its own furniture dark too —
 * the select popup, scrollbars, focus rings. Left on `light` (which it was,
 * from the old paper design) the state list rendered as cream text on the
 * browser's white popup, which is barely readable.
 */
:root {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: var(--sans);
  color: inherit;
}

em {
  font-style: italic;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 400;
}

.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;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  z-index: 100;
  font: 500 12px/1 var(--sans);
}
.skip-link:focus {
  left: 8px;
  top: 8px;
}

/* --- shell -------------------------------------------------------- */

#app {
  max-width: var(--max);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}

.site-main {
  flex: 1;
}

/* --- header ----------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: var(--rule);
  padding: 16px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center; /* the mark is three rows tall, so centre rather than baseline */
  gap: 16px;
  flex-wrap: wrap;
}

/* ── Mark typography ──────────────────────────────────────────────
   Hallmark letters: Syne, the display sans from the type study.
   Wordmark: Ink Free bold.

   ⚠ Ink Free ships with Windows only. It is not a webfont and cannot
   be redistributed, so visitors on macOS, iOS, Android and Linux —
   most of them — fall through to Shantell Sans, a casual marker face
   from Google Fonts chosen to sit close to it. The permanent fix for
   a logo is to outline the lettering to SVG paths so every visitor
   sees identical shapes; ask and I'll cut it.                       */
:root {
  --mk-letter-face: "Syne", system-ui, sans-serif;
  --mk-letter-weight: 700;
  --mk-letter: 0.44;
  --mk-letter-track: 0.01em;

  /* Ink Free's caps are tall (0.84 of the em) and dip below the baseline, so its
     inked height runs ~1.05x the font size. Holding --mk-word at .95 keeps a line
     exactly inside its row; going higher makes the three lines collide. To set
     the wordmark larger, raise --s on the lockup — the rows and the hallmark
     cells grow together and the shared grid survives. */
  --mk-word-face: "Ink Free", "Shantell Sans", "Segoe Print", var(--sans);
  --mk-word-weight: 700;
  --mk-word: 0.95;
  --mk-track: 0.01em;
}

/* ── The house mark ───────────────────────────────────────────────
   Three cells indexing three words: T·THE, M·MAKEUP, H·HOUSE. Sized
   in em from one --s variable, so it scales with no image asset.
   The frame is an inset shadow rather than a border so it adds no
   layout box and the cells stay exactly on the word rows.          */
.mk {
  font-size: calc(var(--s, 15) * 1px);
  font-family: var(--serif);
  line-height: 1;
  color: inherit;
  flex: none;
}
.mk .box {
  display: flex;
  box-shadow: inset 0 0 0 1px currentColor;
}
.mk .box .cell {
  width: 1em;
  height: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mk .box .cell i {
  font-family: var(--mk-letter-face, var(--serif));
  font-weight: var(--mk-letter-weight, 400);
  font-size: calc(var(--mk-letter, 0.55) * 1em);
  line-height: 1;
  font-style: normal;
  letter-spacing: var(--mk-letter-track, 0.03em);
}
.mk .words {
  display: flex;
  flex-direction: column;
}
.mk .words .row {
  height: 1em;
  display: flex;
  align-items: center;
}
.mk .w {
  font-family: var(--mk-word-face, var(--serif));
  font-weight: var(--mk-word-weight, 400);
  font-size: calc(var(--mk-word, 0.84) * 1em);
  letter-spacing: var(--mk-track, 0.07em);
  white-space: nowrap;
}

.mk--indexed {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.44em;
}
.mk--indexed .box {
  flex-direction: column;
}
.mk--indexed .box .cell {
  border-bottom: 1px solid currentColor;
}
.mk--indexed .box .cell:last-child {
  border-bottom: 0;
}

.mk--compact {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.mk--compact .box .cell {
  border-right: 1px solid currentColor;
}
.mk--compact .box .cell:last-child {
  border-right: 0;
}
.mk__line {
  font: 500 0.62em/1 var(--serif);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.mk--icon {
  display: inline-flex;
}
.mk--icon .box .cell {
  width: 1.34em;
  height: 1.34em;
}
.mk--icon .box .cell i {
  font-size: 0.72em;
}

/* Face presets for the mark. Newsreader is live (the defaults above); to switch,
   add that face to the Google Fonts link in index.html and set these four on
   :root. Word/letter values are tuned so each face reads the same optical size.

   Bodoni Moda       --mk-face:'Bodoni Moda',Didot,serif;  --mk-weight:500; --mk-word:.78; --mk-track:.13em; --mk-letter:.50;
   Instrument Serif  --mk-face:'Instrument Serif',serif;   --mk-weight:400; --mk-word:.96; --mk-track:.06em; --mk-letter:.62;
   Fraunces          --mk-face:'Fraunces',Georgia,serif;   --mk-weight:500; --mk-word:.78; --mk-track:.05em; --mk-letter:.52;
   Cormorant Garamond--mk-face:'Cormorant Garamond',serif; --mk-weight:600; --mk-word:.94; --mk-track:.16em; --mk-letter:.60;
   Archivo           --mk-face:'Archivo',system-ui,sans-serif; --mk-weight:500; --mk-word:.70; --mk-track:.10em; --mk-letter:.46;
   Syne              --mk-face:'Syne',system-ui,sans-serif;    --mk-weight:600; --mk-word:.68; --mk-track:.05em; --mk-letter:.46;
   Spectral          --mk-face:'Spectral',Georgia,serif;  --mk-weight:500; --mk-word:.76; --mk-track:.08em; --mk-letter:.50;
*/

.wordmark {
  display: inline-flex;
  color: var(--ink);
}
.wordmark:hover {
  color: var(--rust);
}

.site-nav {
  display: flex;
  gap: 22px;
  align-items: baseline;
  flex-wrap: wrap;
}

.nav-link,
.nav-cart {
  font: 400 11px/1 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-70);
}
.nav-link:hover {
  color: var(--ink);
}
.nav-link[aria-current='page'] {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
}
.nav-cart {
  color: var(--ink);
  border: 1px solid rgba(43, 38, 32, 0.5);
  padding: 7px 11px;
  white-space: nowrap;
}
.nav-cart:hover {
  background: var(--ink);
  color: var(--paper);
}

/* --- footer ---------------------------------------------------- */

.site-footer {
  margin-top: auto;
  border-top: var(--rule);
  background: var(--paper);
  padding: 24px var(--gutter) 84px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr;
  gap: 26px;
}
.footer-wordmark {
  display: flex;
}
.footer-blurb {
  font: 400 12px/1.7 var(--sans);
  color: var(--ink-70);
  margin: 10px 0 0;
  max-width: 280px;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font: 400 11.5px/1.4 var(--sans);
  color: var(--ink-70);
}
.footer-col a:hover {
  color: var(--ink);
}
.footer-head {
  font: 400 9px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-55);
}

/* --- typography helpers -------------------------------------- */

.display {
  font: 300 clamp(38px, 6vw, 62px) / 1.02 var(--serif);
  letter-spacing: -0.022em;
  text-wrap: pretty;
}
.display--sm {
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.05;
}

.mono-kicker,
.mono-label {
  font: 400 9.5px/1.4 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.mono-kicker {
  color: var(--rust);
}
.mono-label--rust {
  color: var(--rust);
}
.serif-caps {
  font: 500 15px/1 var(--serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mono {
  font-family: var(--mono);
  font-size: 0.82em;
}
.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.prose {
  font: 400 13px/1.7 var(--sans);
  color: var(--ink-72, var(--ink-70));
  max-width: 60ch;
}
.columns {
  font: 400 13px/1.7 var(--sans);
  color: var(--ink-70);
  columns: 2;
  column-gap: 26px;
}
.fine-print {
  font: 400 10.5px/1.6 var(--mono);
  color: var(--ink-55);
  margin: 0;
}
.fine-print--center {
  text-align: center;
}
.link {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link:hover {
  color: var(--rust);
}

/* --- buttons -------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(43, 38, 32, 0.5);
  background: transparent;
  color: var(--ink);
  padding: 15px 24px;
  font: 500 12px/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.btn:hover {
  background: var(--ink);
  color: var(--paper);
}
.btn--solid {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.btn--solid:hover {
  opacity: 0.88;
}
.btn--block {
  width: 100%;
}
.btn--sm {
  padding: 11px 16px;
  font-size: 11px;
}
.btn--ghost {
  color: var(--ink-75);
}
.btn.is-disabled,
.btn:disabled {
  background: rgba(43, 38, 32, 0.28);
  border-color: transparent;
  color: var(--paper);
  cursor: not-allowed;
  pointer-events: none;
}
.btn-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.btn-row--baseline {
  align-items: center;
}

/* --- generic screen padding -------------------------------- */

.screen {
  padding: var(--screen-pad) var(--gutter);
}
.screen--split {
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 378px;
  align-items: stretch;
}
.screen--dark {
  background: var(--dark);
  color: var(--dark-ink);
}
.screen--dark .mono-label,
.screen--dark .fine-print {
  color: var(--dark-ink-60);
}

.placeholder {
  border: var(--hair);
  background: repeating-linear-gradient(135deg, #e3dcd0 0 8px, #dad2c5 8px 16px);
  min-height: 76px;
}
.placeholder--product {
  height: 420px;
  display: flex;
  align-items: flex-end;
  padding: 16px;
}

/* --- home --------------------------------------------------- */

/* ── Dark-scrim hero ──────────────────────────────────────────────
   A wide flat-lay behind a left-to-right scrim. The scrim is what
   makes the headline legible regardless of what the picture holds,
   so it stays even if the art is swapped for a photograph.         */
.hero-dark {
  position: relative;
  /* Bleed out of the screen padding to the full container width. */
  margin: calc(-1 * var(--screen-pad, 40px)) calc(-1 * var(--gutter)) 0;
  background: var(--dark);
  min-height: 420px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-dark__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}
.hero-dark__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(43, 38, 32, 0.95) 0%,
    rgba(43, 38, 32, 0.88) 30%,
    rgba(43, 38, 32, 0.68) 58%,
    rgba(43, 38, 32, 0.34) 100%
  );
}
.hero-dark__body {
  position: relative;
  max-width: 620px;
  padding: 54px var(--gutter);
}
.mono-kicker--warm {
  color: #d09a80;
}
.hero-dark__display {
  color: var(--dark-ink);
  margin-top: 16px;
  font-size: clamp(34px, 4.6vw, 58px);
}
.hero-dark__lede {
  margin: 20px 0 0;
  font: 400 13.5px/1.75 var(--sans);
  color: rgba(246, 241, 232, 0.74);
  max-width: 46ch;
}
.hero-dark .btn-row {
  margin-top: 26px;
}
.btn--light {
  border-color: var(--dark-ink);
  color: var(--dark-ink);
}
.btn--light:hover {
  background: var(--dark-ink);
  color: var(--ink);
}
.btn--light-solid {
  border-color: var(--dark-ink);
  background: var(--dark-ink);
  color: var(--ink);
}
.btn--light-solid:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

/* The 42-shade panel, now a band of its own beneath the hero. */
.panel--range {
  margin-top: 34px;
}
.panel--range .shade-preview {
  grid-template-columns: repeat(21, 1fr);
}
.panel--range .shade-preview span {
  height: 34px;
}

.hero {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 34px;
  align-items: start;
  padding-bottom: 34px;
  border-bottom: var(--hair);
}
.hero__lede .mono-kicker {
  display: block;
}
.hero .display {
  margin-top: 16px;
}
.hero__body {
  margin-top: 22px;
}
.hero .btn-row {
  margin-top: 26px;
}

.panel {
  border: 1px solid var(--ink-22);
  background: var(--paper-2);
  padding: 18px;
}
.panel__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.shade-preview {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-top: 12px;
  border: 1px solid var(--ink-22);
}
.shade-preview span {
  height: 44px;
  background: var(--swatch-color);
}
.panel__note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--ink-22);
  font: 400 12.5px/1.65 var(--sans);
  color: var(--ink-70);
}

.steps {
  list-style: none;
  margin: 0;
  padding: 26px 0;
  border-bottom: var(--hair);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.steps li {
  padding: 0 26px;
  border-right: 1px solid var(--ink-22);
}
.steps li:first-child {
  padding-left: 0;
}
.steps li:last-child {
  border-right: 0;
  padding-right: 0;
}
.steps h3 {
  font: 400 20px/1.25 var(--serif);
  margin-top: 9px;
}
.steps p {
  font: 400 12.5px/1.65 var(--sans);
  color: var(--ink-70);
  margin: 9px 0 0;
}

.split .display--sm {
  margin-top: 12px;
}
.split .prose {
  margin-top: 14px;
}
.split .btn {
  margin-top: 20px;
}

/* --- range ------------------------------------------------- */

.range__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 30px;
  border-bottom: var(--hair);
  padding-bottom: 16px;
  flex-wrap: wrap;
}
.range__head .display--sm {
  margin-top: 10px;
}
.range__intro {
  font: 400 11.5px/1.7 var(--sans);
  color: var(--ink-70);
  max-width: 330px;
}
.shade-grid {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 6px;
  margin-top: 22px;
}
.shade-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: center;
}
.shade-cell span:first-child {
  height: 46px;
  background: var(--swatch-color);
  border: 1px solid var(--ink-22);
}
.shade-cell .mono-label {
  font-size: 8px;
  letter-spacing: 0.04em;
  color: var(--ink-70);
}
.shade-cell.is-mine span:first-child {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.range__families {
  margin-top: 26px;
  padding-top: 18px;
  border-top: var(--hair);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.range__families p:last-child {
  font: 400 12.5px/1.7 var(--sans);
  color: var(--ink-70);
  margin: 8px 0 0;
}
.screen--range .btn--solid {
  margin-top: 24px;
}

/* --- scan / consent -------------------------------------- */

.scan {
  display: flex;
  min-height: 720px;
  padding: 0;
}
.scan__stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-left: var(--gutter);
}
.scan__stage-head {
  padding: 22px var(--gutter) 22px 0;
  border-bottom: var(--rule-dark);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.scan__viewport {
  flex: 1;
  margin: 24px var(--gutter) 24px 0;
  border: 1px solid var(--dark-ink-35);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  background: repeating-linear-gradient(135deg, #332d26 0 8px, #2e2822 8px 16px);
}
.scan__guide {
  width: 300px;
  height: 400px;
  max-width: 70vw;
  border: 1px solid rgba(246, 241, 232, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: 400 10px/1.8 var(--mono);
  letter-spacing: 0.14em;
  color: var(--dark-ink-60);
}
.scan__fig {
  position: absolute;
  top: 14px;
  left: 16px;
  font: 400 9px/1 var(--mono);
  letter-spacing: 0.14em;
  color: rgba(246, 241, 232, 0.5);
}
.scan__telemetry {
  position: absolute;
  bottom: 14px;
  left: 16px;
  right: 16px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font: 400 9px/1 var(--mono);
  letter-spacing: 0.1em;
  color: rgba(246, 241, 232, 0.55);
}
.scan__readouts {
  padding: 0 var(--gutter) 26px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--dark-ink-35);
  border: 1px solid var(--dark-ink-35);
}
.scan__readouts > div {
  background: var(--dark);
  padding: 13px 15px;
}
.scan__readouts span:first-child {
  display: block;
}
.scan__readouts span:last-child {
  font: 400 19px/1.1 var(--serif);
  margin-top: 6px;
  display: block;
}

.scan__consent {
  width: 430px;
  flex: none;
  background: var(--paper-3);
  color: var(--ink);
  display: flex;
  flex-direction: column;
}
/* Light island inside a dark section — undo the dark text overrides. */
.scan__consent .mono-label,
.scan__consent .fine-print,
.try-on__panel .mono-label,
.try-on__panel .fine-print {
  color: var(--ink-55);
}
.scan__consent .mono-label--rust,
.try-on__panel .mono-label--rust {
  color: var(--rust);
}
.scan__consent-head {
  padding: 22px var(--gutter) 16px;
  border-bottom: var(--rule);
}
.scan__consent-head .display--sm {
  margin-top: 10px;
}
.consent-list {
  margin: 0;
  padding: 18px var(--gutter) 0;
}
.consent-list > div {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(43, 38, 32, 0.2);
}
.consent-list dt {
  font: 400 9px/1.5 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.consent-list dd {
  margin: 0;
  font: 400 12.5px/1.6 var(--sans);
  color: var(--ink-75);
}
.consent-checks {
  padding: 16px var(--gutter) 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: 500 12.5px/1.55 var(--sans);
}
.check--muted {
  font-weight: 400;
  color: var(--ink-75);
}
/* The checkbox draws itself.
   It used to be a bare native control sitting next to a decorative span, so
   the consent line showed two boxes — and the span, which only dimmed under
   an `aria-pressed` the label never had, stayed filled whether or not consent
   had been given. Styling the real input means one box that is always telling
   the truth, and it keeps the keyboard and screen-reader behaviour that comes
   free with a checkbox. */
.check input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  flex: none;
  margin: 2px 0 0;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}
/* Filled, not ticked. A checkmark at 15px either needs an icon font to load
   first or a clip-path fiddly enough to come out looking like a letter — and
   a solid cream square against an empty outline is unambiguous, and is the
   language the rest of the page is already speaking. */
.check input[type='checkbox']:checked {
  background: var(--ink);
}
.check input[type='checkbox']:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.scan__actions {
  margin-top: auto;
  padding: 20px var(--gutter) 26px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

/* --- scanning -------------------------------------------- */

.scanning {
  min-height: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
}
.scanning__viewport {
  width: 300px;
  height: 400px;
  max-width: 72vw;
  border: 1px solid rgba(246, 241, 232, 0.75);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(135deg, #332d26 0 8px, #2e2822 8px 16px);
}
.scanning__sweep {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(1% * var(--progress));
  height: 1px;
  background: rgba(246, 241, 232, 0.9);
  box-shadow: 0 0 22px 6px rgba(246, 241, 232, 0.35);
}
.scanning__meter {
  width: min(420px, 80vw);
}
.scanning__meter-head {
  display: flex;
  justify-content: space-between;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.12em;
  color: var(--dark-ink-60);
}
.progress {
  margin-top: 10px;
  height: 6px;
  border: 1px solid rgba(246, 241, 232, 0.5);
}
.progress__bar {
  height: 100%;
  background: var(--dark-ink);
  transition: width 0.12s linear;
}
.scanning__meter .fine-print {
  margin-top: 18px;
}

/* --- results / ranked table --------------------------- */

.results {
  padding: 26px var(--gutter) 30px;
  display: flex;
  flex-direction: column;
}
.results__head {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 30px;
  align-items: start;
  border-bottom: var(--hair);
  padding-bottom: 22px;
}
.results__head .display--sm {
  margin-top: 10px;
}
.results__head .prose {
  margin-top: 12px;
}
.reading-stats {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ink-30);
  border: 1px solid var(--ink-30);
}
.reading-stats > div {
  background: var(--paper);
  padding: 12px 13px;
}
.screen--dark .reading-stats > div {
  background: var(--dark);
}
.reading-stats dt {
  font: 400 8.5px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.reading-stats dd {
  margin: 6px 0 0;
  font: 400 19px/1.1 var(--serif);
}
.reading-stats__conf {
  grid-column: span 3;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.reading-stats__conf dd {
  margin: 0;
  font-size: 13px;
  font-family: var(--mono);
  color: var(--rust);
}

.results__list-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 20px 0 12px;
  flex-wrap: wrap;
  gap: 8px;
}

table.ranked,
table.cart-table,
table.mini-table {
  width: 100%;
  border-collapse: collapse;
}
.ranked th,
.cart-table th,
.mini-table th {
  font: 400 9px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-55);
  text-align: left;
  padding: 8px 6px;
  border-bottom: var(--hair);
}
.ranked td,
.cart-table td,
.mini-table td {
  padding: 13px 6px;
  border-bottom: 1px solid var(--ink-16);
  vertical-align: middle;
}
.ranked th.num,
.ranked td.num,
.cart-table th.num,
.cart-table td.num,
.mini-table th.num,
.mini-table td.num {
  text-align: right;
}
.ranked__thumb {
  display: block;
  width: 38px;
  height: 48px;
  background: repeating-linear-gradient(135deg, #e3dcd0 0 5px, #dad2c5 5px 10px);
  border: 1px solid var(--ink-16);
}
.ranked__name {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ranked__name span:first-child {
  font: 400 17px/1.25 var(--serif);
}
.ranked__name:hover span:first-child {
  color: var(--rust);
}
.ranked__shade {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
}
.ranked td.is-strong {
  color: var(--rust);
  font-weight: 500;
}
.ranked td.is-weak {
  color: var(--ink-55);
}

.chip-btn {
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  padding: 8px 12px;
  font: 500 10.5px/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.chip-btn.is-active {
  background: var(--ink);
  color: var(--paper);
}
.icon-btn {
  border: 0;
  background: none;
  color: var(--ink-55);
  font: 400 15px/1 var(--mono);
  cursor: pointer;
}
.icon-btn:hover {
  color: var(--ink);
}

/* --- swatch ------------------------------------------- */

.swatch {
  display: inline-block;
  width: var(--swatch-size, 16px);
  height: var(--swatch-size, 16px);
  background: var(--swatch-color, transparent);
  border: 1px solid var(--ink-30);
  flex: none;
}
.swatch--empty {
  border-style: dashed;
}
.swatch--selected {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

/* --- cart rail (results / product / try-on) --------- */

.cart-rail,
.order-rail,
.try-on__panel {
  width: 378px;
  flex: none;
  background: var(--paper-2);
  border-left: var(--hair);
  display: flex;
  flex-direction: column;
}
.order-rail {
  background: var(--paper);
}
.try-on__panel {
  background: var(--paper-3);
  color: var(--ink);
}
.cart-rail__head {
  padding: 22px 26px 16px;
  border-bottom: var(--hair);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.cart-rail__head h2 {
  font: 500 13px/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.cart-rail__body {
  padding: 18px 26px 0;
  display: flex;
  flex-direction: column;
}
.cart-rail__empty {
  font: 400 12.5px/1.7 var(--sans);
  color: var(--ink-70);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink-16);
  margin: 0;
}
.cart-line {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 13px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-16);
}
.cart-line__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cart-line__name {
  font: 400 15px/1.3 var(--serif);
}
.cart-line__price {
  font: 400 12px/1 var(--mono);
}
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font: 400 11px/1 var(--mono);
}
.stepper button {
  border: 1px solid rgba(43, 38, 32, 0.4);
  background: none;
  padding: 4px 8px;
  cursor: pointer;
}
.cart-rail__card {
  margin: 18px 26px 0;
  border: 1px solid var(--ink-30);
  padding: 14px 15px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.cart-rail__card-name {
  font: 400 14px/1.3 var(--serif);
}
.cart-rail__adding {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cart-rail__adding > div > div {
  font: 400 16px/1.25 var(--serif);
}
.cart-rail__foot {
  margin-top: auto;
  padding: 18px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shade-card {
  display: flex;
  border: 1px solid var(--ink-22);
}
.shade-card__chip {
  flex: 1;
  height: 30px;
  background: var(--swatch-color);
  position: relative;
}
.shade-card__chip.is-kept::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--ink);
}
.shade-card__labels {
  display: flex;
  justify-content: space-between;
  font: 400 10px/1 var(--mono);
  color: var(--ink-55);
  margin-top: 8px;
}

.totals {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font: 400 12px/1 var(--mono);
  color: var(--ink-75);
}
.totals__row {
  display: flex;
  justify-content: space-between;
}
/* ── Free-delivery meter ──────────────────────────────────────────
   Sits inside the totals block, so it appears wherever totals do:
   the cart rail, the cart summary, the address and checkout rails.  */
.ship-meter {
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px dashed var(--ink-30);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ship-meter.is-free {
  border-style: solid;
  border-color: var(--ink-22);
}
.ship-meter__line {
  margin: 0;
  font: 400 11.5px/1.5 var(--sans);
  color: var(--ink-70);
}
.ship-meter__line b {
  font-weight: 600;
  color: var(--rust);
  font-variant-numeric: tabular-nums;
}
.ship-meter.is-free .ship-meter__line {
  color: var(--ink);
}
.ship-meter__track {
  height: 4px;
  background: var(--ink-16);
  overflow: hidden;
}
.ship-meter__bar {
  height: 100%;
  background: var(--rust);
  transition: width 0.2s ease;
}
.ship-meter.is-free .ship-meter__bar {
  background: var(--ink);
}
.ship-meter .link {
  align-self: flex-start;
}
.totals__row .is-free {
  color: var(--ink);
}

.totals__grand {
  margin-top: 14px;
  padding-top: 14px;
  border-top: var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.screen--dark .totals__grand {
  border-top-color: rgba(246, 241, 232, 0.5);
}
.totals__grand span:first-child {
  font: 400 9.5px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.totals__grand-value {
  font: 300 28px/1 var(--serif);
}

/* --- product ---------------------------------------- */

.product {
  padding: 20px var(--gutter) 30px;
}
.crumbs {
  padding-bottom: 16px;
}
.crumbs a:hover {
  color: var(--rust);
}
.product__body {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 30px;
  align-items: start;
}
.product__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.product__thumbs .placeholder {
  height: 76px;
}
.product__title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.product__detail .display--sm {
  margin-top: 10px;
}
.product__subtitle {
  font-size: 26px;
}
.product__match {
  margin-top: 18px;
  border-top: var(--hair);
  border-bottom: var(--hair);
  padding: 14px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
}
.product__match p {
  margin: 0;
  font: 400 12.5px/1.6 var(--sans);
  color: var(--ink-75);
}
/* No reading yet — the block invites one instead of asserting a score. */
.product__match--none {
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
}
.product__shades .link {
  display: inline-block;
  margin-top: 10px;
}
.product__match-score {
  text-align: right;
}
.product__match-value {
  display: block;
  font: 500 30px/1 var(--mono);
  color: var(--rust);
  margin-top: 6px;
}
.product__shades {
  margin-top: 18px;
}
.product__shade-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 11px;
}
.product__shade {
  border: 1px solid var(--ink-30);
  padding: 6px;
  font: 400 9px/1 var(--mono);
  text-align: center;
  color: var(--ink-70);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.product__shade::before {
  content: '';
  height: 34px;
  background: var(--swatch-color);
}
.product__shade.is-current {
  border: 2px solid var(--ink);
  color: var(--ink);
}
.product__shade.is-dim {
  opacity: 0.55;
}

.spec-grid {
  margin: 20px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: var(--hair);
}
.spec-grid > div {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--ink-16);
}
.spec-grid > div:nth-child(even) {
  border-left: 1px solid var(--ink-16);
  padding-left: 20px;
}
.spec-grid > div:nth-child(odd) {
  padding-right: 20px;
}
.spec-grid dt {
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.spec-grid dd {
  margin: 0;
  font: 400 12px/1 var(--mono);
}
.product .prose {
  margin-top: 18px;
}

.reviews {
  margin-top: 20px;
  padding-top: 16px;
  border-top: var(--hair);
}
.reviews__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 12px;
}
.reviews blockquote {
  margin: 0;
}
.reviews blockquote p {
  font: 400 12.5px/1.7 var(--sans);
  color: var(--ink-75);
  margin: 0;
}
.reviews cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
}

.cross-sell {
  margin: 18px 26px 0;
  padding-top: 16px;
  border-top: var(--hair);
}
.cross-sell__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--ink-16);
  font: 400 14px/1.3 var(--serif);
}
.cross-sell__row a:hover {
  color: var(--rust);
}

/* --- try-on --------------------------------------- */

.try-on__stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-left: var(--gutter);
}
.try-on__stage-head {
  padding: 22px var(--gutter) 22px 0;
  border-bottom: var(--rule-dark);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.try-on__viewport {
  flex: 1;
  margin: 24px var(--gutter) 20px 0;
  border: 1px solid var(--dark-ink-35);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 440px;
  background: repeating-linear-gradient(135deg, #332d26 0 8px, #2e2822 8px 16px);
}
.try-on__feed {
  width: 320px;
  height: 420px;
  max-width: 70vw;
  border: 1px solid rgba(246, 241, 232, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: 400 10px/1.8 var(--mono);
  letter-spacing: 0.14em;
  color: rgba(246, 241, 232, 0.55);
}
.try-on__scale {
  padding: 0 var(--gutter) 26px 0;
}
.try-on__scale-labels {
  display: flex;
  justify-content: space-between;
  font: 400 9.5px/1 var(--mono);
  letter-spacing: 0.12em;
  color: var(--dark-ink-60);
}
.try-on__scale-labels .is-current {
  color: var(--dark-ink);
}
.try-on__track {
  margin-top: 12px;
  height: 10px;
  background: linear-gradient(90deg, #dcae8b, #c99a76, #b9805f);
  position: relative;
  border: 1px solid rgba(246, 241, 232, 0.4);
}
.try-on__thumb {
  position: absolute;
  top: -7px;
  width: 4px;
  height: 22px;
  background: var(--dark-ink);
  transform: translateX(-50%);
  transition: left 0.16s ease;
}
.try-on__scale .fine-print {
  margin-top: 14px;
  max-width: 620px;
}
.try-on__panel-head {
  padding: 22px 26px 16px;
  border-bottom: var(--rule);
}
.try-on__panel-head .display--sm {
  margin: 9px 0;
}
.try-on__switch {
  padding: 16px 26px 0;
}
.try-on__option {
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr 46px 24px;
  align-items: center;
  gap: 6px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--ink-16);
  background: none;
  cursor: pointer;
  text-align: left;
}
.try-on__option-label {
  font: 400 14px/1.3 var(--serif);
  padding-left: 11px;
}
.try-on__option.is-active .num {
  color: var(--rust);
}
.try-on__dot {
  text-align: right;
  font: 400 13px/1 var(--mono);
  color: var(--ink-30);
}
.try-on__option.is-active .try-on__dot {
  color: var(--ink);
}
.try-on__push {
  margin-top: auto;
  padding: 0 26px 14px;
}
.try-on__foot {
  padding: 0 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- cart page ---------------------------------- */

.cart__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: var(--rule);
  padding-bottom: 16px;
}
.cart__empty {
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  max-width: 440px;
}
.cart__empty p {
  font: 400 15px/1.7 var(--sans);
  color: var(--ink-70);
  margin: 0;
}
.cart__layout {
  display: grid;
  grid-template-columns: 1fr 378px;
  gap: 30px;
  align-items: start;
  margin-top: 20px;
}
.cart-table__thumb {
  display: block;
  width: 46px;
  height: 58px;
  background: repeating-linear-gradient(135deg, #e3dcd0 0 5px, #dad2c5 5px 10px);
  border: 1px solid var(--ink-16);
}
.cart-table__thumb--card {
  background: linear-gradient(90deg, #dcae8b 0 33%, #c99a76 33% 66%, #b9805f 66%);
}
.cart-table__name {
  font: 400 17px/1.25 var(--serif);
}
.cart-table__gift td {
  color: var(--ink-70);
}
.cart__summary {
  border: 1px solid var(--ink-30);
  background: var(--paper-2);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* --- checkout ---------------------------------- */

.checkout__main {
  padding: 26px var(--gutter) 30px;
}
.stepper-bar {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  gap: 26px;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.stepper-bar li.is-current {
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 5px;
}
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 26px;
  margin: 24px 0 0;
  max-width: 720px;
}
.field-grid > div {
  padding: 14px 0;
  border-bottom: 1px solid rgba(43, 38, 32, 0.2);
}
.field-grid .span-2 {
  grid-column: span 2;
}
.field-grid dt {
  font: 400 9px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.field-grid dd {
  margin: 8px 0 0;
  font: 400 16px/1.3 var(--serif);
}
.checkout .display--sm {
  margin-top: 22px;
}
.delivery-option {
  margin-top: 22px;
  border: 1px solid var(--ink-30);
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  max-width: 720px;
}
.delivery-option p {
  margin: 5px 0 0;
  font: 400 17px/1.3 var(--serif);
}
.delivery-option .fine-print {
  font-family: var(--sans);
  font-size: 12px;
}
.checkout .prose {
  margin-top: 20px;
}
.review-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: 24px;
  max-width: 720px;
}
.review-cards > div {
  border: 1px solid var(--ink-30);
  padding: 16px;
}
.review-cards p {
  margin: 9px 0 0;
  font: 400 15px/1.6 var(--serif);
}
.review-items {
  margin-top: 22px;
  max-width: 720px;
}
.review-items__row {
  display: grid;
  grid-template-columns: 1fr 120px 80px;
  align-items: baseline;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ink-16);
  font: 400 16px/1.3 var(--serif);
}
.review-items__row .mono-label {
  text-align: right;
}

.order-rail__lines {
  padding: 18px 26px 0;
}
.order-rail__line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 13px 0;
  border-bottom: 1px solid var(--ink-16);
  font: 400 15px/1.3 var(--serif);
}
.order-rail__reading {
  margin: 18px 26px 0;
  border: 1px solid var(--ink-30);
  padding: 14px 15px;
}
.order-rail__reading > div {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 11px;
  font: 400 15px/1.3 var(--serif);
}

/* --- delivery address ------------------------ */

.address__main {
  padding: 26px var(--gutter) 34px;
}
.address__main .display--sm {
  margin: 10px 0 12px;
}
.address__form {
  margin-top: 24px;
  max-width: 720px;
}
.address__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 26px;
}
.address__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 0;
}
.address__field.span-2 {
  grid-column: span 2;
}
.address__field input,
.address__field select {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--ink-30);
  background: transparent;
  padding: 8px 0;
  font: 400 17px/1.3 var(--serif);
  color: var(--ink);
  border-radius: 0;
}
.address__field select {
  appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-55) 50%),
    linear-gradient(135deg, var(--ink-55) 50%, transparent 50%);
  background-position: right 8px center, right 3px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 22px;
}
.address__field input::placeholder {
  color: var(--ink-30);
}
.address__field input:focus,
.address__field select:focus {
  outline: 0;
  border-bottom-color: var(--ink);
}
.address__field.has-error input,
.address__field.has-error select {
  border-bottom-color: var(--rust);
}
.address__error {
  margin: 0;
  font: 400 11px/1.5 var(--mono);
  color: var(--rust);
}
.address__summary-error {
  margin: 16px 0 0;
  padding: 11px 14px;
  border: 1px solid var(--rust);
  font: 400 11.5px/1.5 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rust);
}
.address__form .btn-row {
  margin-top: 26px;
}
.address__form .fine-print {
  margin-top: 16px;
}

.saved-address {
  margin-top: 22px;
  border: 1px solid var(--ink-30);
  padding: 16px 18px;
  max-width: 720px;
}
.saved-address__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.saved-address__head .link {
  border: 0;
  background: none;
  cursor: pointer;
}
.saved-address__body {
  margin: 10px 0 0;
  font: 400 16px/1.6 var(--serif);
}

/* --- confirmation ---------------------------- */

.confirmation__head {
  border-bottom: var(--rule);
  padding-bottom: 18px;
}
.confirmation__head .mono-label {
  display: block;
  margin-bottom: 12px;
}
.confirmation__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 24px;
}
.confirmation__cols > div {
  padding: 0 26px;
  border-right: 1px solid var(--ink-22);
}
.confirmation__cols > div:first-child {
  padding-left: 0;
}
.confirmation__cols > div:last-child {
  border-right: 0;
  padding-right: 0;
}
.confirmation__cols h3 {
  font: 400 20px/1.3 var(--serif);
  margin-top: 9px;
}
.confirmation__cols p {
  font: 400 12.5px/1.65 var(--sans);
  color: var(--ink-70);
  margin: 9px 0 0;
}
.confirmation__cta {
  margin-top: 26px;
  border: 1px solid var(--ink-30);
  background: var(--paper-2);
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 26px;
  align-items: center;
}
.confirmation__cta p {
  margin: 8px 0 0;
  font: 400 13px/1.7 var(--sans);
  color: var(--ink-72, var(--ink-70));
  max-width: 620px;
}

/* --- account -------------------------------- */

.account__top {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 34px;
  align-items: start;
  border-bottom: var(--hair);
  padding-bottom: 22px;
}
.account__reading {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  margin: 12px 0 20px;
}
.account__code {
  font: 300 56px/0.94 var(--serif);
  letter-spacing: -0.025em;
}
.account__reading-name {
  font: 400 22px/1.2 var(--serif);
  font-style: italic;
  color: var(--ink-75);
  padding-bottom: 6px;
}
.account__tables {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 22px;
}
.account__tables > div:first-child {
  padding-right: 30px;
  border-right: var(--hair);
}
.account__tables > div:last-child {
  padding-left: 30px;
}
.mini-table td {
  font: 400 12px/1.3 var(--mono);
}
.mini-table td:nth-child(2) {
  font: 400 15px/1.2 var(--serif);
}
.mini-table tr.is-current td:first-child,
.mini-table tr.is-current td:nth-child(4) {
  color: var(--rust);
}
.account__reorder {
  margin-top: 16px;
  padding-top: 14px;
  border-top: var(--hair);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font: 400 12.5px/1.6 var(--sans);
  color: var(--ink-70);
}

/* --- data policy --------------------------- */

.data-policy__head {
  border-bottom: var(--rule);
  padding-bottom: 18px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 30px;
  align-items: end;
}
.data-policy__head .display--sm {
  margin-top: 12px;
}
.policy-list {
  margin: 22px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 30px;
}
.policy-list > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(43, 38, 32, 0.2);
}
.policy-list dd {
  margin: 0;
  font: 400 13px/1.7 var(--sans);
  color: var(--ink-75);
}

/* --- WhatsApp -------------------------------- */

:root {
  --wa: #1fa855;
  --wa-ink: #ffffff;
}

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

/* Inline link: quiet by default, brand green on hover. */
.wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 500 11px/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-70);
  border-bottom: 1px solid var(--ink-30);
  padding-bottom: 4px;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.wa-btn:hover {
  color: var(--wa);
  border-color: var(--wa);
}

.wa-btn--solid,
.wa-btn--block {
  border: 1px solid var(--wa);
  border-bottom-width: 1px;
  background: var(--wa);
  color: var(--wa-ink);
  padding: 15px 22px;
  font-size: 12px;
  letter-spacing: 0.08em;
}
.wa-btn--block {
  width: 100%;
}
.wa-btn--solid:hover,
.wa-btn--block:hover {
  color: var(--wa-ink);
  border-color: var(--wa);
  opacity: 0.88;
}

/* Floating buttons, on every screen. Instagram sits above WhatsApp, which
   keeps the spot nearest the thumb because it is the one that takes orders. */
.fab-stack {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.wa-fab,
.ig-fab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(43, 38, 32, 0.22);
  font: 500 12px/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.wa-fab {
  background: var(--wa);
  color: var(--wa-ink);
}
/* Instagram's own gradient, running corner to corner the way the app draws it. */
.ig-fab {
  background: linear-gradient(45deg, #feda75 0%, #fa7e1e 26%, #d62976 52%, #962fbf 76%, #4f5bd5 100%);
  color: #fff;
}
.wa-fab:hover,
.ig-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(43, 38, 32, 0.28);
}
.wa-fab:hover {
  color: var(--wa-ink);
}
.ig-fab:hover {
  color: #fff;
}
.wa-fab:focus-visible,
.ig-fab:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.cart__wa {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-22);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-wa {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--wa);
}
.footer-wa:hover {
  color: var(--wa);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Instagram sits under the WhatsApp link in the footer's contact column. */
.footer-ig {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-70);
  transition: color 0.12s ease;
}
.footer-ig:hover {
  color: var(--rust);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ig-icon {
  flex: none;
  display: block;
}

.footer-wa-num {
  font: 400 12px/1 var(--mono);
  color: var(--ink);
}
.footer-wa-hours {
  font: 400 10.5px/1.5 var(--mono);
  color: var(--ink-55);
}

/* --- wishlist toggle (used on several screens) --- */

.save-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--ink-30);
  background: transparent;
  color: var(--ink-55);
  padding: 6px 9px;
  font: 500 10.5px/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.save-btn__mark {
  font-size: 13px;
  line-height: 1;
}
.save-btn:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.save-btn.is-saved {
  color: var(--rust);
  border-color: var(--rust);
}

/* --- products index ------------------------ */

.products__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 30px;
  flex-wrap: wrap;
  border-bottom: var(--rule);
  padding-bottom: 16px;
}
.products__head .display--sm {
  margin-top: 10px;
}
.products__intro {
  font: 400 12.5px/1.7 var(--sans);
  color: var(--ink-70);
  max-width: 360px;
  margin: 0;
}
.products__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-bottom: var(--hair);
}
.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.filter {
  border: 1px solid var(--ink-22);
  padding: 8px 14px;
  font: 500 10.5px/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-70);
}
.filter:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.filter.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.product-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ink-16);
  border: 1px solid var(--ink-16);
  border-top: 0;
}
.product-card {
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.product-card.is-in-cart {
  background: var(--paper-2);
}
.product-card__media {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  height: 190px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--ink-16);
}
/* The category sits ON the artwork, and photographs keep a cream mount — so
   cream type would vanish over half the grid. A dark pill carries it on
   either ground, and all but disappears against the drawn artwork. */
.product-card__media .mono-label {
  position: relative;
  padding: 3px 7px;
  border-radius: 3px;
  background: rgba(22, 18, 11, 0.72);
  color: var(--ink);
}

/* ── Product artwork ──────────────────────────────────────────── */
.product-art {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
}
/* Inline SVG ignores object-fit — give it a box and let its own
   preserveAspectRatio letterbox inside it. */
.product-card__media .product-art {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  bottom: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
}
.product-art--photo {
  object-fit: contain;
  /* Photographs carry their own ground; keep them off the panel tint. */
  background: #fff;
}
.gallery__main .product-art--photo,
.gallery__thumb .product-art--photo {
  background: transparent;
}
/* ── Thumb-rail gallery ───────────────────────────────────────────
   Frames down the left, the selected one large beside them.        */
.gallery {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  align-items: start;
}
.gallery__rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gallery__thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 6px;
  border: 1px solid var(--ink-22);
  background: var(--paper-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.12s ease;
}
.gallery__thumb .product-art {
  width: 100%;
  height: 100%;
}
.gallery__thumb:hover {
  border-color: var(--ink);
}
.gallery__thumb.is-on {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.gallery__main {
  margin: 0;
  border: 1px solid var(--ink-22);
  background: var(--paper-2);
  padding: 26px 26px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gallery__main .product-art {
  width: 100%;
  height: 360px;
}
.gallery__main figcaption {
  align-self: flex-start;
  padding: 12px 0 11px;
}
.product-card__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
.product-card__title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.product-card__title h2 {
  font: 400 21px/1.2 var(--serif);
}
.product-card__title a:hover h2 {
  color: var(--rust);
}
.product-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--ink-16);
  border-bottom: 1px solid var(--ink-16);
}
.product-card__shade {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.product-card__match.is-strong {
  color: var(--rust);
  font-weight: 500;
}
.product-card__match.is-weak {
  color: var(--ink-55);
}
.product-card__copy {
  font: 400 12.5px/1.65 var(--sans);
  color: var(--ink-70);
  margin: 0;
}
.product-card__foot {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.product-card__price {
  font: 300 26px/1 var(--serif);
}
.product-card__incart {
  color: var(--rust);
  margin: 0;
}
.product-card__qty {
  display: flex;
  align-items: center;
  gap: 10px;
}
.product-card__qty .stepper {
  gap: 0;
  border: 1px solid var(--ink);
}
.product-card__qty .stepper button {
  border: 0;
  padding: 9px 12px;
  font: 400 13px/1 var(--mono);
}
.product-card__qty .stepper button:hover {
  background: var(--ink);
  color: var(--paper);
}
.product-card__qty .stepper > span {
  min-width: 30px;
  padding: 0 2px;
  text-align: center;
  font: 500 12px/1 var(--mono);
  border-left: 1px solid var(--ink-22);
  border-right: 1px solid var(--ink-22);
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-card__qty .icon-btn {
  font-size: 17px;
  line-height: 1;
  padding: 4px;
}
.products__foot {
  margin-top: 20px;
}

/* --- wishlist ------------------------------ */

.wishlist__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: var(--rule);
  padding-bottom: 16px;
}
.wishlist__head .display--sm {
  margin-top: 10px;
}
.wishlist__empty {
  padding: 40px 0;
  max-width: 480px;
}
.wishlist__empty p {
  font: 400 15px/1.7 var(--sans);
  color: var(--ink-70);
  margin: 0;
}
.wishlist__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px 0;
}
.wishlist-table {
  width: 100%;
  border-collapse: collapse;
}
.wishlist-table th {
  font: 400 9px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-55);
  text-align: left;
  padding: 8px 6px;
  border-bottom: var(--hair);
}
.wishlist-table td {
  padding: 14px 6px;
  border-bottom: 1px solid var(--ink-16);
  vertical-align: middle;
}
.wishlist-table th.num,
.wishlist-table td.num {
  text-align: right;
}
.wishlist-table__thumb {
  display: block;
  width: 46px;
  height: 58px;
  background: repeating-linear-gradient(135deg, #e3dcd0 0 5px, #dad2c5 5px 10px);
  border: 1px solid var(--ink-16);
}
.wishlist-table__name {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.wishlist-table__name span:first-child {
  font: 400 17px/1.25 var(--serif);
}
.wishlist-table__name:hover span:first-child {
  color: var(--rust);
}
.wishlist-table__note {
  display: block;
  margin-top: 5px;
  color: var(--rust);
}
.wishlist-table__shade {
  white-space: nowrap;
}
.wishlist-table__shade .swatch {
  vertical-align: middle;
  margin-right: 7px;
}
.wishlist-table__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.wishlist-table td.is-strong {
  color: var(--rust);
  font-weight: 500;
}
.wishlist-table td.is-weak {
  color: var(--ink-55);
}

.ranked__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cart-rail__save {
  display: flex;
}
.cart-rail__save .save-btn {
  width: 100%;
  justify-content: center;
  padding: 12px;
  font-size: 11px;
}

/* --- header wishlist badge ----------------- */

.nav-saved {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 400 11px/1 var(--sans);
  letter-spacing: 0.08em;
  color: var(--ink-70);
}
.nav-saved:hover {
  color: var(--rust);
}
.nav-saved span[aria-hidden] {
  font-size: 14px;
}

/* --- sign in ------------------------------- */

.auth {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 60px;
  align-items: start;
}
.auth__intro .display--sm {
  margin: 12px 0 14px;
}
.auth__reasons {
  margin: 26px 0 0;
  border-top: var(--hair);
}
.auth__reasons > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-16);
}
.auth__reasons dd {
  margin: 0;
  font: 400 12.5px/1.6 var(--sans);
  color: var(--ink-75);
}
.auth__form {
  border: 1px solid var(--ink-30);
  background: var(--paper-2);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.auth__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.auth__field input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  padding: 8px 0;
  font: 400 18px/1.3 var(--serif);
  color: var(--ink);
}
.auth__field input::placeholder {
  color: var(--ink-30);
}
.auth__field input:focus {
  outline: 0;
  border-bottom-color: var(--rust);
}
.auth__form .btn {
  margin-top: 4px;
}
.auth__form .fine-print {
  line-height: 1.7;
}

/* The step list, the six-digit box and the resend row belong to the
   code-by-email flow, which sign-in no longer uses. They are kept because the
   endpoints behind them are kept, for "forgot my password". */
.auth__steps {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  display: flex;
  gap: 22px;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-30);
}
.auth__steps li.is-current {
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 5px;
}

.auth__phone {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-bottom: 1px solid var(--ink);
}
.auth__phone:focus-within {
  border-bottom-color: var(--rust);
}
.auth__phone input {
  border-bottom: 0;
  letter-spacing: 0.04em;
}
.auth__cc {
  font-size: 15px;
  color: var(--ink-55);
  flex: none;
}

.auth__code {
  font-family: var(--mono) !important;
  font-size: 26px !important;
  letter-spacing: 0.42em;
  text-align: left;
}

.auth__sent {
  border: 1px solid var(--ink-22);
  padding: 13px 15px;
}
.auth__sent-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 7px;
}
.auth__number {
  font: 400 19px/1.1 var(--serif);
}

.auth__error {
  margin: -6px 0 0;
  font: 400 11.5px/1.5 var(--mono);
  color: var(--rust);
}

.auth__resend {
  text-align: center;
}
.auth__resend .link,
.auth__sent-row .link {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--mono);
}
.auth__resend .link:hover,
.auth__sent-row .link:hover {
  color: var(--rust);
}


.account__bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: var(--rule);
}
.account__hello {
  margin: 8px 0 0;
  font: 300 34px/1.05 var(--serif);
  letter-spacing: -0.02em;
}

/* ── Profile ──────────────────────────────────────────────────── */
.profile {
  border: 1px solid var(--ink-30);
  background: var(--paper-2);
  padding: 20px 22px 22px;
  margin-bottom: 30px;
}
.profile__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-22);
}
.profile__grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 26px;
}
.profile__grid > div {
  padding: 15px 0;
  border-bottom: 1px solid var(--ink-16);
}
.profile__grid .span-2 {
  grid-column: 1 / -1;
  border-bottom: 0;
}
.profile__grid dd {
  margin: 8px 0 0;
  font: 400 16px/1.6 var(--serif);
}
.profile__blank {
  font: 400 12.5px/1.6 var(--sans);
  color: var(--ink-55);
}
.profile__stats {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-22);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.profile__stats b {
  display: block;
  margin-top: 6px;
  font: 300 26px/1 var(--serif);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* Signed in, but no reading taken yet. */
.account__empty {
  border: 1px solid var(--ink-22);
  background: var(--paper-2);
  padding: 34px 26px;
  margin-bottom: 26px;
}
.account__empty .display--sm {
  margin: 10px 0 0;
}
.account__empty .prose {
  margin-top: 12px;
}
.account__tables--single {
  grid-template-columns: 1fr;
}
.account__tables--single > div:last-child {
  padding-left: 0;
}

/* =================================================================
   Responsive
   ================================================================= */

@media (max-width: 1080px) {
  .screen--split {
    grid-template-columns: 1fr;
  }
  .cart-rail,
  .order-rail,
  .try-on__panel {
    width: auto;
    border-left: 0;
    border-top: var(--hair);
  }
  .scan {
    flex-direction: column;
  }
  .scan__consent {
    width: auto;
  }
  .scan__stage {
    padding: 0 var(--gutter);
  }
  .scan__stage-head,
  .scan__viewport,
  .scan__readouts,
  .try-on__stage-head,
  .try-on__viewport,
  .try-on__scale {
    margin-right: 0;
    padding-right: 0;
  }
  .try-on__stage {
    padding: 0 var(--gutter);
  }
}

@media (max-width: 900px) {
  .hero,
  .results__head,
  .product__body,
  .cart__layout,
  .account__top,
  .data-policy__head,
  .confirmation__cta,
  .auth {
    grid-template-columns: 1fr;
  }
  .auth {
    gap: 32px;
  }
  .split,
  .reviews__grid,
  .review-cards,
  .policy-list {
    grid-template-columns: 1fr;
  }
  .steps,
  .range__families,
  .account__tables,
  .confirmation__cols {
    grid-template-columns: 1fr 1fr;
  }
  .steps li,
  .confirmation__cols > div {
    border-right: 0;
    border-bottom: 1px solid var(--ink-22);
    padding: 16px 0;
  }
  .account__tables > div:first-child {
    border-right: 0;
    border-bottom: var(--hair);
    padding: 0 0 20px;
  }
  .account__tables > div:last-child {
    padding: 20px 0 0;
  }
  .columns {
    columns: 1;
  }
  .shade-grid {
    grid-template-columns: repeat(7, 1fr);
  }
  .auth__reasons > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  :root {
    --gutter: 18px;
  }
  .site-header {
    position: static;
  }
  /* The mark folds into one row on narrow screens: the hallmark turns
     horizontal and the three words run inline. Same markup, same grid.
     Scaled back so the single line still clears a 320px phone. */
  .site-header .mk--indexed {
    font-size: calc(var(--s, 24) * 0.74px);
    align-items: center;
    gap: 0.42em;
  }
  .site-header .mk--indexed .box {
    flex-direction: row;
  }
  .site-header .mk--indexed .box .cell {
    border-bottom: 0;
    border-right: 1px solid currentColor;
  }
  .site-header .mk--indexed .box .cell:last-child {
    border-right: 0;
  }
  .site-header .mk--indexed .words {
    flex-direction: row;
    gap: 0.3em;
  }
  .steps,
  .range__families,
  .account__tables,
  .confirmation__cols,
  .field-grid,
  .spec-grid,
  .address__grid,
  .product__shade-grid {
    grid-template-columns: 1fr;
  }
  .address__field.span-2 {
    grid-column: auto;
  }
  .address__field input,
  .address__field select {
    padding: 11px 0;
    font-size: 16px; /* keeps iOS from zooming on focus */
  }
  .product__shade-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .gallery {
    grid-template-columns: 1fr;
  }
  .gallery__rail {
    order: 2;
    flex-direction: row;
  }
  .gallery__thumb {
    flex: 1;
  }
  .gallery__main .product-art {
    height: 300px;
  }
  .ranked th:nth-child(3),
  .ranked td:nth-child(3) {
    display: none;
  }
  .product-grid {
    grid-template-columns: 1fr;
  }
  /* Comfortable touch targets for the quantity controls. */
  .product-card__qty .stepper button {
    padding: 13px 16px;
    font-size: 15px;
  }
  .product-card__qty .stepper > span {
    min-width: 38px;
    font-size: 13px;
  }
  .product-card__qty .icon-btn {
    padding: 11px;
    font-size: 20px;
  }
  .wishlist-table th:nth-child(3),
  .wishlist-table td:nth-child(3),
  .wishlist-table th:nth-child(5),
  .wishlist-table td:nth-child(5) {
    display: none;
  }
  .wishlist-table__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .wishlist__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .site-footer {
    grid-template-columns: 1fr 1fr;
  }
  /* Footer links are 16px tall — too fine to tap. Pad them out on touch. */
  .footer-wa,
  .footer-ig {
    padding: 10px 0;
  }
  /* Icon-only bubbles on small screens so they never cover the content. */
  .fab-stack {
    right: 16px;
    bottom: 16px;
    gap: 8px;
  }
  .wa-fab,
  .ig-fab {
    padding: 15px;
  }
  .wa-fab__label,
  .ig-fab__label {
    display: none;
  }
  .reading-stats {
    grid-template-columns: 1fr;
  }
  .reading-stats__conf {
    grid-column: auto;
  }
  .profile__grid {
    grid-template-columns: 1fr;
  }
  .profile__stats {
    grid-template-columns: 1fr 1fr;
  }
  .account__bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   GOLD DISC — rules that wrote ink-on-paper literally rather than through a
   token. Each would read dark-on-dark without the restatement below. Kept
   together at the end so the palette change stays legible as one move.
   ══════════════════════════════════════════════════════════════════════════ */

.nav-cart,
.btn {
  border-color: rgba(210, 171, 94, 0.55);
}
.btn.is-disabled,
.btn:disabled {
  background: rgba(242, 231, 207, 0.16);
  color: rgba(242, 231, 207, 0.4);
}
.consent-list > div,
.field-grid > div,
.policy-list > div {
  border-bottom-color: rgba(242, 231, 207, 0.16);
}
.stepper button {
  border-color: rgba(210, 171, 94, 0.45);
}

/* The hatched "no photograph yet" fill, restated in the disc's own tones. */
.placeholder,
.ranked__thumb,
.cart-table__thumb,
.wishlist-table__thumb {
  background: repeating-linear-gradient(135deg, #3b3123 0 8px, #302818 8px 16px);
}

/* Photographs keep a light mount. The products were all shot on cream, so a
   dark mount would cut holes in the page rather than frame them. */
.product-art--photo {
  background: #f6f1e8;
}

.mono-kicker--warm {
  color: var(--gold-lit);
}

/* The scrim stays darker than the page: its job is holding text legible over
   a photograph, not matching the ground. */
.hero-dark__scrim {
  background: linear-gradient(
    100deg,
    rgba(22, 18, 11, 0.94) 0%,
    rgba(22, 18, 11, 0.86) 30%,
    rgba(22, 18, 11, 0.66) 58%,
    rgba(22, 18, 11, 0.32) 100%
  );
}

/* A drop shadow has nothing to darken on a dark page; depth comes from a
   heavier, tighter shadow instead. */
.wa-fab,
.ig-fab {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
}
.wa-fab:hover,
.ig-fab:hover {
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.7);
}

/* Rim gold for the hallmark cells, lit gold for the words — the relationship
   the disc itself uses. */
.logo,
.wordmark,
.footer-wordmark {
  color: var(--gold);
}
.logo .word,
.wordmark .word {
  color: var(--gold-lit);
}

/* Solid fills. Everywhere the sheet fills with var(--ink) it meant "the dark
   one"; inverted, that token is cream. Restated as gold with near-black type,
   which keeps one loud colour for the things you are meant to press. */
.skip-link,
.nav-cart:hover,
.btn:hover,
.btn--solid,
.btn--block,
.btn--light:hover,
.btn--light-solid,
.chip-btn.is-active,
.filter.is-active,
.product-card__qty .stepper button:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-gold);
}
.btn--solid:hover,
.btn--block:hover,
.btn--light-solid:hover {
  background: var(--gold-lit);
  border-color: var(--gold-lit);
  color: var(--on-gold);
}

/* Meters and bars: the same gold, no border. */
.progress__bar,
.ship-meter__bar,
.ship-meter.is-free .ship-meter__bar {
  background: var(--gold);
}
.ship-meter__track {
  background: rgba(242, 231, 207, 0.14);
}

/* Links take the rim colour so they still read as links. */
.link {
  color: var(--gold);
}
a:not(.btn):not(.nav-link):not(.wa-fab):not(.ig-fab):hover {
  color: var(--gold-lit);
}

/* Cart rows lead to the product, the way the wishlist rows already did.
   The link wraps name and shade together so the whole block is the target,
   not just the words. */
.cart-table__link,
.cart-line__link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: inherit;
  text-decoration: none;
}
.cart-table__link:hover .cart-table__name,
.cart-line__link:hover .cart-line__name {
  color: var(--gold-lit);
}
.cart-table__thumb:hover,
.wishlist-table__thumb:hover {
  border-color: var(--gold);
}

/* Row thumbnails. The hatch stays as the ground, so a product without a
   photograph still shows a filled cell rather than a hole; a photograph
   covers it, cropped, because letterboxing 46px leaves nothing to read. */
.cart-table__thumb,
.wishlist-table__thumb {
  overflow: hidden;
}
.row-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The drawn fallback is inline SVG, which ignores object-fit — centre it and
   let its own preserveAspectRatio do the fitting. */
.cart-table__thumb .product-art,
.wishlist-table__thumb .product-art {
  margin: 0 auto;
  height: 100%;
  width: auto;
}

/* ── The scan-versus-quiz band ────────────────────────────────────────────
   A photograph as the ground with the copy over a scrim — the same device
   the hero uses, so the page ends the way it opens. The image is cut above
   the bottle's printed label (assets/band-splash.jpg) because a product
   photograph's own marketing copy cannot sit under ours. */
.band {
  position: relative;
  margin-top: 30px;
  min-height: 360px;
  display: grid;
  align-items: center;
  border: var(--hair);
  overflow: hidden;
}
.band__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 50%;
}
.band__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(22, 18, 11, 0.96) 0%,
    rgba(22, 18, 11, 0.9) 34%,
    rgba(22, 18, 11, 0.6) 62%,
    rgba(22, 18, 11, 0.15) 100%
  );
}
.band__copy {
  position: relative;
  max-width: 50%;
  padding: 34px 38px;
}

@media (max-width: 900px) {
  .band__copy {
    max-width: 66%;
  }
}
/* Narrow enough that the copy spans the photograph rather than sitting beside
   it, so the scrim turns vertical and covers the whole frame. */
@media (max-width: 620px) {
  .band {
    min-height: 0;
  }
  .band__copy {
    max-width: 100%;
    padding: 26px 22px;
  }
  .band__scrim {
    background: linear-gradient(
      180deg,
      rgba(22, 18, 11, 0.76) 0%,
      rgba(22, 18, 11, 0.92) 45%,
      rgba(22, 18, 11, 0.96) 100%
    );
  }
}

/* ── Sign-in channel toggle ───────────────────────────────────────────────
   Mobile or email. Two buttons rather than a select, because there are only
   ever two and the choice should be visible without opening anything. */
.auth__channel {
  display: inline-flex;
  /* The form is a stretching column, so without this the pair spans the whole
     width and the selected half reads as a progress bar, not a choice. */
  align-self: flex-start;
  border: 1px solid var(--ink-30);
}
.auth__channel-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-55);
  cursor: pointer;
  padding: 9px 20px;
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.12s ease, color 0.12s ease;
}
.auth__channel-btn + .auth__channel-btn {
  border-left: 1px solid var(--ink-30);
}
.auth__channel-btn:hover {
  color: var(--ink);
}
.auth__channel-btn.is-on {
  background: var(--gold);
  color: var(--on-gold);
}
.auth__channel-btn:focus-visible {
  outline: 2px solid var(--gold-lit);
  outline-offset: -2px;
}

/* An address is longer than a number and must not force the row to scroll. */
.auth__sent-row .auth__number {
  overflow-wrap: anywhere;
}

/* ── Payment method ───────────────────────────────────────────────────────
   Two cards rather than a select: there are only ever two, and each needs a
   line of explanation that a dropdown has nowhere to put. */
.pay-options {
  display: grid;
  gap: 10px;
  margin: 6px 0 22px;
}
.pay-option {
  appearance: none;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 15px 17px;
  background: transparent;
  border: 1px solid var(--ink-30);
  color: var(--ink);
  transition: border-color 0.12s ease, background 0.12s ease;
}
.pay-option:hover {
  border-color: var(--gold);
}
.pay-option.is-on {
  border-color: var(--gold);
  background: rgba(210, 171, 94, 0.08);
}
.pay-option:focus-visible {
  outline: 2px solid var(--gold-lit);
  outline-offset: 2px;
}
/* The dot. A ring that fills when chosen, so the state survives a screenshot
   in grayscale as well as in colour. */
.pay-option__mark {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--ink-55);
}
.pay-option.is-on .pay-option__mark {
  box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 5px var(--gold);
}
.pay-option__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pay-option__name {
  font: 400 17px/1.2 var(--serif);
}
.pay-option__note {
  font: 400 13px/1.5 var(--sans);
  color: var(--ink-70);
}

/* The order number and its date share a cell, stacked. */
.orders-date {
  display: block;
  margin-top: 3px;
}
.orders-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 0 4px;
  color: var(--ink-70);
}

/* Appears once a card has something in the cart, under the stepper, so the
   quantity controls and the way out of the grid sit together. */
.product-card__to-cart {
  display: flex;
  justify-content: center;
  margin-top: 12px;
  width: 100%;
}

/* ── Native select list ───────────────────────────────────────────────────
   `color-scheme: dark` above gets the popup right on its own in most
   browsers; these state the colours anyway, for the ones that paint options
   from the page rather than the scheme. */
select option {
  background-color: var(--paper-2);
  color: var(--ink);
}
select option:checked {
  background-color: var(--paper-3);
  color: var(--gold-lit);
}
/* The "Select a state" row is a prompt, not a state. */
select option[value=''] {
  color: var(--ink-55);
}

/* A list of thirty-six states is long enough that the closed field wants a
   little more room to breathe than a one-line text input. */
.address__field select {
  letter-spacing: 0.01em;
}

/* ══════════════════════════════════════════════════════════════════════════
   VIRTUAL TRY-ON
   ══════════════════════════════════════════════════════════════════════════ */

.tryon__head {
  max-width: 62ch;
  margin-bottom: 26px;
}
.tryon__layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 30px;
  align-items: start;
}

.tryon__viewport {
  position: relative;
  background: var(--paper-2);
  border: var(--hair);
  /* 4:3, the shape most webcams hand back. */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.tryon__canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.tryon__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 30px;
  text-align: center;
  background: rgba(22, 18, 11, 0.86);
}
.tryon__overlay .fine-print {
  max-width: 46ch;
}
.tryon__source-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
/* The file input is hidden, so the label has to look and behave like a button. */
.tryon__upload {
  cursor: pointer;
}
.tryon__error {
  max-width: 46ch;
  color: var(--ink-75);
}
.tryon__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 11px 14px;
  text-align: center;
  background: rgba(22, 18, 11, 0.8);
  font: 500 11px/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-75);
}

/* An indeterminate bar: the model gives no progress events worth trusting. */
.tryon__bar {
  width: 190px;
  height: 3px;
  background: var(--ink-16);
  overflow: hidden;
}
.tryon__bar span {
  display: block;
  width: 40%;
  height: 100%;
  background: var(--gold);
  animation: tryon-slide 1.1s ease-in-out infinite;
}
@keyframes tryon-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

.tryon__stage-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 12px;
}
.tryon__stage-actions {
  display: flex;
  gap: 8px;
}

.tryon__panel {
  border: var(--hair);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tryon__panel-note {
  margin: 0;
  font: 400 13px/1.5 var(--sans);
  color: var(--ink-70);
}

.tryon-product {
  border: 1px solid var(--ink-16);
}
.tryon-product.is-on {
  border-color: var(--gold);
}
.tryon-product__head {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: transparent;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
/* A ring that fills when the product is on the face. */
.tryon-product__mark {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--ink-55);
}
.tryon-product.is-on .tryon-product__mark {
  box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 4px var(--gold);
}
.tryon-product__name {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font: 400 16px/1.2 var(--serif);
}
.tryon-product__body {
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.tryon-shades {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tryon-shade {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  padding: 5px 7px 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: var(--ink-70);
}
.tryon-shade span {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--swatch-color);
}
.tryon-shade em {
  font: 500 9.5px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-style: normal;
}
.tryon-shade.is-on {
  border-color: var(--gold);
  color: var(--ink);
}

.tryon-strength {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tryon-strength input {
  width: 100%;
  accent-color: var(--gold);
}

.tryon__foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

@media (max-width: 900px) {
  .tryon__layout {
    grid-template-columns: 1fr;
  }
}

/* The consent gate now lives inside the viewport, so it has to scroll. */
.tryon__overlay--consent {
  justify-content: flex-start;
  overflow-y: auto;
  text-align: left;
  align-items: stretch;
  gap: 14px;
}
.tryon__overlay--consent .consent-list {
  margin: 0;
}
.tryon__overlay--consent .tryon__source-btns {
  justify-content: flex-start;
}

/* What the measurement found. */
.reading-card {
  margin-top: 18px;
  border: 1px solid var(--gold);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.reading-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.reading-card__code {
  margin: 4px 0 2px;
  font: 400 40px/1 var(--serif);
  color: var(--gold-lit);
}
.reading-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.reading-card__patches > div {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.reading-card__patches span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-70);
}
/* The swatch is the colour actually sampled off the face. */
.reading-card__patches i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--swatch-color);
  box-shadow: inset 0 0 0 1px var(--ink-30);
}

/* What to buy, shown under the reading that produced it. */
.matches {
  margin-top: 18px;
  border: var(--hair);
  padding: 18px 20px;
}
.matches__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink-16);
}
.match-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--ink-16);
}
.match-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.match-row__name {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: inherit;
  text-decoration: none;
  font: 400 17px/1.2 var(--serif);
}
.match-row__name:hover {
  color: var(--gold-lit);
}
.match-row__score {
  font-size: 15px;
  color: var(--ink-55);
}
.match-row__score.is-strong {
  color: var(--gold-lit);
}
.match-row__actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

@media (max-width: 620px) {
  .match-row {
    grid-template-columns: 1fr auto;
  }
  .match-row__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* Products with nothing to try on — said plainly rather than left out. */
.tryon__none {
  margin: 2px 0 0;
  font: 400 12.5px/1.5 var(--sans);
  color: var(--ink-55);
}

/* The whole range, folded away until asked for. */
.tryon-range summary {
  cursor: pointer;
  padding: 4px 0;
  list-style: none;
}
.tryon-range summary::-webkit-details-marker {
  display: none;
}
.tryon-range summary::before {
  content: '+ ';
  color: var(--gold);
}
.tryon-range[open] summary::before {
  content: '− ';
}
.tryon-range__grid {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 3px;
  margin: 9px 0 6px;
}
.tryon-range__chip {
  appearance: none;
  border: 0;
  padding: 0;
  aspect-ratio: 1;
  cursor: pointer;
  background: var(--swatch-color);
}
.tryon-range__chip.is-on {
  box-shadow: 0 0 0 2px var(--paper-2), 0 0 0 3px var(--gold-lit);
}

/* ── Studio: applied panel and recommendation rows ───────────────────────── */

.tryon__panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.tryon__panel-head p {
  margin: 0;
}
/* The applied block's header is not a toggle any more — the × is. */
.tryon-product__head {
  cursor: default;
}
.tryon-product__remove {
  margin-left: auto;
  font-size: 18px;
}
.matches__hint {
  color: var(--ink-55);
}
/* "Take off" once a product is on the face, so the state reads at a glance. */
.match-row .btn.is-applied {
  border-color: var(--gold);
  color: var(--gold-lit);
}
.match-row .stepper {
  flex: none;
}

/* Buying something while it is on your face, from the panel it is applied in. */
.tryon-product__buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 2px;
}
.tryon-product__buy .btn {
  flex: 1 1 auto;
  justify-content: center;
}
.tryon-product__buy .stepper {
  flex: 0 0 auto;
}

/* Held frame: the button reads Unfreeze and looks engaged while it is. */
.tryon__stage-actions .btn.is-applied {
  border-color: var(--gold);
  color: var(--gold-lit);
}

/* Reordering the stack: up paints earlier (further under), down later. */
.tryon-product__tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}
.tryon-product__tools .icon-btn {
  padding: 2px 6px;
  font-size: 13px;
  line-height: 1;
}
.tryon-product__tools .icon-btn.is-disabled {
  opacity: 0.3;
  cursor: default;
}
.tryon-product__remove {
  font-size: 18px;
}
.tryon__panel-hint {
  margin: 0;
  color: var(--ink-55);
}

/* Order over Instagram — the same shape as the WhatsApp button, in
   Instagram's own gradient so the two read as a pair of channels. */
.ig-btn {
  appearance: none;
  cursor: pointer;
  background: linear-gradient(45deg, #feda75 0%, #fa7e1e 26%, #d62976 52%, #962fbf 76%, #4f5bd5 100%);
  border-color: transparent;
  color: #fff;
}
.ig-btn:hover {
  color: #fff;
  filter: brightness(1.06);
}
.ig-btn:focus-visible {
  outline: 2px solid var(--gold-lit);
  outline-offset: 2px;
}

/* ── Password fields ──────────────────────────────────────────────────── */

/* The input and its Show button share one underline, so the pair reads as a
   single field rather than a field with something bolted beside it. */
.auth__password {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-bottom: 1px solid var(--ink);
}
.auth__password:focus-within {
  border-bottom-color: var(--rust);
}
.auth__password input {
  flex: 1;
  min-width: 0;
  border-bottom: 0;
}
.auth__password input:focus {
  border-bottom-color: transparent;
}
/* A revealed password is set in mono: `l1I` and `O0` have to be told apart,
   which is the whole reason for revealing it. */
.auth__password input[type='text'] {
  font: 400 16px/1.3 var(--mono);
  letter-spacing: 0.04em;
}

.auth__reveal {
  flex: none;
  border: 0;
  background: none;
  /* Vertical padding only for the thumb; the text still sits on the baseline
     with the input, which is what keeps the pair reading as one field. */
  padding: 10px 0 10px 4px;
  cursor: pointer;
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.auth__reveal:hover {
  color: var(--gold-lit);
}
.auth__reveal:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.auth__hint {
  margin: 2px 0 0;
  color: var(--ink-70);
}

/* ── The field that is wrong ──────────────────────────────────────────── */

/* Gold, not red: the palette has no red, and an error drawn in a colour the
   page never uses elsewhere reads as a system message rather than as part of
   this shop. The label carries the weight. */
.auth__field.has-error > label {
  color: var(--gold-lit);
}
.auth__field.has-error input,
.auth__field.has-error .auth__phone,
.auth__field.has-error .auth__password {
  border-bottom-color: var(--gold);
}

/* ── Sign in / register switch ────────────────────────────────────────── */

.auth__switch {
  margin: 2px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--ink-22);
  text-align: center;
  font: 400 12.5px/1.5 var(--mono);
  color: var(--ink-70);
}
.auth__switch .link {
  border: 0;
  background: none;
  /* This is the whole route to registration on a phone, so it gets a target
     worth aiming at rather than the 19px the line-height alone would give. */
  padding: 7px 6px;
  margin: -7px 0;
  cursor: pointer;
  font: inherit;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth__switch .link:hover {
  color: var(--gold-lit);
}
.auth__switch .link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Two switches under one form want less air between them than one does. */
.auth__switch--tight {
  margin-top: -6px;
  padding-top: 12px;
  border-top: 0;
}

/* Not an error and not a label: the one line that says something went right.
   Gold text on a gold-tinted ground, so it reads as reassurance rather than
   as another thing to fix. */
.auth__notice {
  margin: -4px 0 0;
  padding: 10px 12px;
  border-left: 2px solid var(--gold);
  background: rgba(210, 171, 94, 0.09);
  font: 400 12.5px/1.55 var(--mono);
  color: var(--ink);
}

/* ── The human way back in ────────────────────────────────────────────── */

/* Set apart from the form above it: this is not another thing to fill in,
   it is what to do when the form cannot help you. */
.auth__help {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--ink-22);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth__help-lead {
  margin: 0;
  font: 400 13px/1.6 var(--sans);
  color: var(--ink-75);
}
.auth__help-lead strong {
  color: var(--ink);
  font-weight: 500;
}
.auth__help-note {
  margin: 0;
  color: var(--ink-70);
}

/* When WhatsApp is the only route there is nothing above it to be set apart
   from, so the rule and the extra air come off. */
.auth__help--sole {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* What was registered, read back. Same shape as the account screen's profile
   list, so a customer sees the same thing before and after approval. */
.auth__summary {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth__summary > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink-16);
}
.auth__summary > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.auth__summary dd {
  margin: 0;
  font: 400 16px/1.3 var(--serif);
  color: var(--ink);
}