/* ============================================================================
   Size Hub — design system
   Rebuilt 14 August 2026 from the approved "Size Hub Website" design.

   This replaced the previous cold/square/vermilion system wholesale. The token
   NAMES were kept identical on purpose: the page markup references
   var(--color-bg), var(--color-divider) and so on inline, so redefining the
   values here re-skins most of the site without touching twelve pages.

   The character of the new system, so later edits stay in key:
     · warm cream ground, never grey
     · ochre accent (the logo colour), deep maroon for anything you click
     · 1px hairline borders, never heavy rules
     · generous radii — pills on buttons, soft corners on cards
     · Instrument Serif for display, Archivo for everything else
     · soft warm-tinted shadows instead of hard edges
   ========================================================================= */

:root {
  /* ---- ground and surfaces ---- */
  --color-bg: #FBF6EE;            /* page */
  --color-surface: #FAF0DE;       /* raised panels, summary cards */
  --color-surface-2: #F6EFE4;     /* image wells, quieter fills */
  --color-surface-3: #F0E5D6;     /* pressed / tertiary */
  --color-blush: #F7E9E4;         /* warm tint for promo blocks */
  --color-white: #FFFFFF;

  /* ---- ink ---- */
  --color-text: #2A1610;          /* warm near-black */
  --color-text-2: #3F2A21;
  --color-muted: #7C6A60;         /* body muted */
  --color-muted-2: #9C8A7E;       /* captions, meta */

  /* ---- brand ---- */
  --color-accent: #C88A32;        /* ochre — matches the logo */
  --color-accent-600: #A66F22;    /* ochre, pressed */
  --color-accent-100: #FAF0DE;
  --color-accent-200: #E8C68A;
  --color-deep: #6B2419;          /* deep maroon — primary actions */
  --color-deep-600: #4E170F;
  --color-deep-tint: #5A2A1C;

  /* ---- lines ---- */
  --color-divider: #EADCCB;       /* hairline */
  --color-divider-2: #D9C6AB;     /* stronger outline, e.g. secondary buttons */

  /* legacy aliases, so any stray old reference still resolves sensibly */
  --color-cyan: #C88A32;
  --color-neutral-100: #FBF6EE;
  --color-neutral-200: #F0E5D6;
  --color-neutral-300: #EADCCB;
  --color-neutral-400: #D9C6AB;
  --color-neutral-500: #9C8A7E;
  --color-neutral-600: #7C6A60;
  --color-neutral-700: #5A3A22;
  --color-neutral-800: #3F2A21;
  --color-neutral-900: #2A1610;
  --color-accent-800: #6B2419;

  /* ---- type ---- */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-heading: "Archivo", system-ui, sans-serif;   /* UI headings, buttons */
  --font-body: "Archivo", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-heading-weight: 800;

  /* ---- shape ---- */
  --radius-pill: 999px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-xl: 30px;

  /* ---- elevation: warm-tinted, never neutral grey ---- */
  --shadow-sm: 0 8px 26px rgba(42, 22, 16, .06);
  --shadow-md: 0 10px 26px rgba(42, 22, 16, .14);
  --shadow-lg: 0 24px 50px rgba(42, 22, 16, .22);

  /* ---- spacing / layout ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --page: 1200px;
  --gutter: clamp(20px, 5vw, 72px);
}

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

body {
  margin: 0; font-size: 15px; line-height: 1.6; font-weight: 400;
  background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Display type is the serif; UI headings (h5/h6, card titles) stay sans so
   labels and buttons keep their tight, functional feel. */
h1, h2 {
  font-family: var(--font-display); font-weight: 400;
  line-height: 1.06; letter-spacing: -.02em; margin: 0 0 var(--space-3);
}
h3, h4 {
  font-family: var(--font-display); font-weight: 400;
  line-height: 1.12; letter-spacing: -.01em; margin: 0 0 var(--space-2);
}
h5, h6 {
  font-family: var(--font-heading); font-weight: 800;
  line-height: 1.2; margin: 0 0 var(--space-2);
}
h1 { font-size: clamp(30px, 4.4vw, 52px); }
h2 { font-size: clamp(24px, 3vw, 38px); }
h3 { font-size: 22px; }
h4 { font-size: 19px; }
h5 { font-size: 15px; }
h6 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-600); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }

.text-muted { color: var(--color-muted); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: rgba(200, 138, 50, .28); }

.grayscale { filter: none; }   /* the new design shows photography in colour */

/* layout ------------------------------------------------------------------ */
.shell { max-width: var(--page); margin: 0 auto; padding-inline: var(--gutter); }
.band  { border-bottom: 1px solid var(--color-divider); }
.band-surface { background: var(--color-surface); }
.stack { display: flex; flex-direction: column; }
.row-between { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.crumb { font-size: 12.5px; color: var(--color-muted-2); margin-bottom: 12px; }
.crumb a { color: inherit; text-decoration: none; }
.crumb a:hover { color: var(--color-accent-600); }

.hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* buttons — pills ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 700;
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.btn svg { display: block; }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }

.btn-primary { background: var(--color-deep); color: var(--color-white); }
.btn-primary:hover { background: var(--color-deep-600); color: var(--color-white); }

.btn-secondary { background: var(--color-white); border-color: var(--color-divider-2); color: var(--color-text); }
.btn-secondary:hover { background: var(--color-surface); }

.btn-accent { background: var(--color-accent); color: var(--color-white); }
.btn-accent:hover { background: var(--color-accent-600); }

.btn-ghost { color: var(--color-accent-600); padding-inline: 6px; background: transparent; }
.btn-ghost:hover { color: var(--color-deep); }

.btn-icon {
  width: 38px; height: 38px; padding: 0; border-radius: 50%;
  border: 1px solid var(--color-divider); background: var(--color-white);
}
.btn-icon:hover { border-color: var(--color-divider-2); }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* forms -------------------------------------------------------------------- */
.field > label, .field-label {
  display: block; font-size: 12px; margin-bottom: 6px; color: var(--color-muted);
}
.input, select.input, textarea.input {
  width: 100%; min-height: 44px; padding: 11px 14px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-white);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: var(--color-divider-2); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 96px; resize: vertical; }
.input:disabled { background: var(--color-surface-3); color: var(--color-muted-2); }

.field.invalid .input { border-color: var(--color-deep); background: #FDF3F0; }
.field .err { display: none; font-size: 11.5px; color: var(--color-deep); margin-top: 4px; }
.field.invalid .err { display: block; }

.radio { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.radio input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.radio .dot { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid var(--color-divider-2); }
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 3px var(--color-white);
}

/* segmented control — pill chips, not a joined bar */
.seg { display: inline-flex; gap: 8px; flex-wrap: wrap; border: 0; }
.seg a, .seg .seg-opt {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px;
  font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none;
  color: var(--color-text); background: var(--color-white);
  border: 1px solid var(--color-divider); border-radius: var(--radius-pill);
}
.seg a + a, .seg .seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg a.on, .seg .seg-opt.on {
  background: var(--color-deep); color: var(--color-white); border-color: var(--color-deep);
}
.seg a:not(.on):hover { border-color: var(--color-divider-2); background: var(--color-surface); }

/* cards / tags ------------------------------------------------------------- */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); background: var(--color-white);
  border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
}
.card-kicker {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-accent-600); font-weight: 700;
}
.elev-lg { box-shadow: var(--shadow-lg); }

.tag {
  display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700;
  letter-spacing: .02em; padding: 5px 12px; border-radius: var(--radius-pill);
}
.tag-accent { background: var(--color-accent); color: var(--color-white); }
.tag-neutral { background: var(--color-surface-2); color: var(--color-muted); }
.tag-outline { border: 1px solid var(--color-divider-2); color: var(--color-text); background: var(--color-white); }
.tag-ink { background: var(--color-deep); color: var(--color-white); }

/* ==========================================================================
   MOTION — the design's own keyframes, plus the scroll reveal it marks up
   with data-reveal (see Scripts\site.js).
   ========================================================================== */
@keyframes shFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes shPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes shSpin  { to { transform: rotate(360deg); } }

[data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Anyone who has asked for reduced motion gets the content, not the animation.
   Also the safety net if the script never runs: content must never stay hidden. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero-float, .offer-dot { animation: none !important; }
}
.no-js [data-reveal] { opacity: 1; transform: none; }

/* navigation --------------------------------------------------------------- */
/* Deep maroon strip, per the design. */
.topbar { background: var(--color-deep); color: var(--color-blush); }
.topbar-inner {
  max-width: 1240px; margin: 0 auto; padding: 9px 24px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 12.5px;
}
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: var(--color-accent-200); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 16px; opacity: .85; white-space: nowrap; }
.offer { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.offer-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent);
  animation: shPulse 1.8s ease-in-out infinite;
}

/* The nav is a floating white pill card on the cream ground. The sticky wrapper
   holds the padding so the card keeps its rounded corners while pinned. */
.nav-sticky { position: sticky; top: 0; z-index: 60; background: var(--color-bg); padding: 12px 24px; }
/* Three tracks: logo left, links truly centred in the bar, actions right.
   Grid rather than flex + auto margins, because with flex the centre group
   drifts as the two outer groups change width. */
.nav {
  position: relative;   /* positioning context for the mobile dropdown */
  max-width: 1240px; margin: 0 auto; background: var(--color-white);
  border: 1px solid var(--color-divider); border-radius: 28px;
  padding: 8px 12px 8px 18px;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 14px;
  box-shadow: 0 8px 26px rgba(42, 22, 16, .06);
}
.nav-brand { text-decoration: none; color: inherit; display: flex; align-items: center; gap: 10px; flex: none; }
.nav-links {
  justify-self: center;
  display: flex; align-items: center;
  font-size: 13.5px; font-weight: 600;
}
/* On desktop the wrapper is just the row itself. */
.nav-links-inner {
  display: flex; align-items: center; gap: 18px; row-gap: 6px;
  flex-wrap: wrap; white-space: nowrap;
}
.nav-links a { color: var(--color-text); text-decoration: none; }
.nav-links a:hover, .nav-links a.current { color: var(--color-accent-600); }
.nav-actions { justify-self: end; display: flex; align-items: center; gap: 6px; }

/* The hamburger only exists below the breakpoint. */
.nav-burger { display: none; }

/* Below the point where three tracks stop fitting, the links collapse behind the
   hamburger. They used to wrap onto a second and third line, which pushed the bar
   to nearly half the screen on a phone. */
@media (max-width: 980px) {
  .nav { grid-template-columns: auto 1fr auto; row-gap: 0; padding: 8px 10px 8px 14px; }

  .nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 38px; height: 38px; padding: 0 9px; order: -1;
    border: 1px solid var(--color-divider); border-radius: 50%;
    background: var(--color-white); cursor: pointer;
  }
  .nav-burger span {
    display: block; height: 2px; width: 100%; border-radius: 2px;
    background: var(--color-text); transition: transform .2s ease, opacity .2s ease;
  }
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav-burger:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

  .nav-brand { justify-self: center; }
  .nav-actions { justify-self: end; }

  /* A dropdown panel, NOT a row inside the nav grid.
     The 0fr -> 1fr collapse used elsewhere cannot work here: this element would be
     a grid item in an auto-sized row, so the fraction depends on the row height and
     the row height depends on the fraction. Chrome resolves that circularity to
     zero and the menu never opens. Taking it out of flow removes the dependency,
     and a panel that floats over the page reads better on a phone than one that
     shoves the bar taller. */
  .nav-links {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: var(--color-white); border: 1px solid var(--color-divider);
    border-radius: 20px; box-shadow: 0 14px 34px rgba(42,22,16,.14);
    padding: 6px 16px; z-index: 70;
    display: block; font-size: 15px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .nav-links.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav-links-inner { display: flex; flex-direction: column; }
  .nav-links a {
    padding: 13px 4px; border-bottom: 1px solid var(--color-surface-3);
  }
  .nav-links a:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links, .nav-burger span { transition: none; }
}
.nav-icon {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--color-divider);
  display: flex; align-items: center; justify-content: center; color: var(--color-text);
  position: relative; text-decoration: none; flex: none;
}
.nav-icon:hover { border-color: var(--color-divider-2); background: var(--color-bg); }
.nav-cta { font-size: 13px; padding: 10px 16px; white-space: nowrap; }
.cart-badge {
  position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: var(--radius-pill); background: var(--color-accent); color: #fff;
  font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
@media (max-width: 720px) { .nav-cta { display: none; } }

.brand-logo { height: 30px; width: auto; display: block; }
@media (max-width: 600px) { .brand-logo { height: 31px; } }

/* product grid ------------------------------------------------------------- */
.grid-products {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
  gap: clamp(16px, 2vw, 26px); background: transparent; border: 0;
}
.pcard {
  background: var(--color-white); display: flex; flex-direction: column;
  border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  overflow: hidden; transition: box-shadow .18s ease, transform .18s ease;
}
.pcard:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }

/* 1:1 and filled, exactly as the design specifies for a product card
   (aspect-ratio:1/1; object-fit:cover). The store's photography is square, so the
   image fills the frame with nothing cropped and no letterbox bands.
   NOTE: 3:4 belongs to the CATEGORY tiles further down, not to these. */
.pcard .shot {
  position: relative; aspect-ratio: 1/1; background: var(--color-surface-2);
  overflow: hidden;
}
.pcard .shot .shot-img { object-fit: cover; padding: 0; background: var(--color-surface-2); }
.pcard .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.pcard h3 {
  font-family: var(--font-heading); font-weight: 700; font-size: 15.5px;
  line-height: 1.3; letter-spacing: 0; margin: 0;
}
.pcard h3 a { color: inherit; text-decoration: none; }
.rating { font-size: 12px; color: var(--color-accent); letter-spacing: 1px; }
.rating span { letter-spacing: 0; color: var(--color-muted-2); }
.price-row { margin-top: auto; display: flex; align-items: baseline; gap: 9px; padding-top: 8px; }
.price-row b { font-size: 18px; font-weight: 800; }
.price-was { text-decoration: line-through; font-size: 13px; color: var(--color-muted-2); }

/* imagery ------------------------------------------------------------------ */
.media { position: relative; overflow: hidden; background: var(--color-surface-2); }
.shot-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  background: var(--color-surface-2);
}
.shot-img-contain { object-fit: contain; background: var(--color-white); }
.pattern-svg { width: 100%; height: 100%; display: block; background: var(--color-white); }
.grayscale-img { filter: none; }

.slot {
  width: 100%; height: 100%; background: var(--color-surface-2);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--color-muted-2); font-size: 12px; padding: 12px;
}
.slot-circle { border-radius: 50%; }

/* ==========================================================================
   CONFIGURATOR — built to the approved design, 14 Aug 2026

   Layout follows the design exactly: one grouped, scrolling option column beside
   a cream live-preview panel, inside a 28px card. The earlier icon rail is gone.

   The one thing NOT copied from the design is the measurement input. The design
   mocks free number boxes; these are dropdowns fed from the drafting chart, so a
   value the workshop cannot cut is never offered. Styled to look identical.
   ========================================================================== */
.cfg-wrap { max-width: 1240px; margin: 0 auto; }
.cfg-crumb { font-size: 12.5px; color: var(--color-muted-2); margin-bottom: 14px; }
.cfg-crumb a { color: var(--color-muted-2); text-decoration: none; }
.cfg-crumb a:hover { color: var(--color-accent-600); }

/* step bar — one pill, four segments */
.cfg-steps {
  display: flex; background: var(--color-white); border: 1px solid var(--color-divider);
  border-radius: var(--radius-pill); overflow: hidden; margin-bottom: 20px; flex-wrap: wrap;
}
.cfg-step {
  flex: 1; min-width: 150px; display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; font-size: 13px; font-weight: 600;
  color: var(--color-muted); background: var(--color-white);
}
.cfg-step .n {
  width: 24px; height: 24px; flex: none; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800;
  background: var(--color-surface); color: var(--color-accent-600);
}
.cfg-step.is-active { background: var(--color-deep); color: var(--color-white); }
.cfg-step.is-active .n { background: var(--color-white); color: var(--color-deep); }
.cfg-step.is-done .n { background: var(--color-accent); color: var(--color-white); }
.cfg-step.is-todo { opacity: .62; }

/* card */
.cfg-card {
  background: var(--color-white); border: 1px solid var(--color-divider);
  border-radius: 28px; overflow: hidden;
}
.cfg-card-hd {
  padding: 18px 22px; border-bottom: 1px solid var(--color-surface-3);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.cfg-card-ft {
  border-top: 1px solid var(--color-surface-3); padding: 18px 22px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.cfg-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-accent);
}
.cfg-was { font-size: 13px; color: var(--color-muted-2); text-decoration: line-through; }
.cfg-reset {
  margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--color-deep);
  border: 1px solid var(--color-divider); background: var(--color-white);
  padding: 8px 14px; border-radius: var(--radius-pill); cursor: pointer;
}
.cfg-reset:hover { background: var(--color-surface); }

.cfg-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* left: grouped options */
.cfg-options { border-right: 1px solid var(--color-surface-3); max-height: 620px; overflow: auto; }
.cfg-group-name { font-size: 12.5px; font-weight: 800; letter-spacing: .02em; }
.cfg-opt {
  display: flex; align-items: center; gap: 11px; padding: 10px 18px;
  border-bottom: 1px solid #F5EDE2; font-size: 13px; color: var(--color-text);
  text-decoration: none; background: var(--color-white);
}
.cfg-opt:hover { background: var(--color-bg); }
.cfg-opt.is-on { background: var(--color-surface); font-weight: 700; }
.cfg-dot {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 2px solid var(--color-divider-2); background: transparent;
}
.cfg-opt.is-on .cfg-dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 3px var(--color-white);
}
.cfg-sw {
  width: 40px; height: 46px; flex: none; border-radius: 8px;
  border: 1px solid var(--color-divider); background-color: var(--color-white);
  background-image: repeating-linear-gradient(45deg, transparent 0 5px, rgba(42,22,16,.07) 5px 10px);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 2px;
}
.cfg-opt.is-on .cfg-sw { border-color: var(--color-accent); }
.cfg-code { font-family: var(--font-mono); font-size: 7px; color: #B0A197; letter-spacing: .02em; }
.cfg-opt-label { flex: 1; line-height: 1.3; }
.cfg-delta { font-size: 11.5px; color: var(--color-muted); white-space: nowrap; }

/* right: live preview */
.cfg-preview { background: var(--color-surface); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.cfg-preview-hd {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-accent-600);
}
.cfg-pieces { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.cfg-piece {
  background: var(--color-white); border-radius: 16px; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.cfg-piece-art {
  aspect-ratio: 4/5; border-radius: 10px; background-color: var(--color-bg);
  background-image: repeating-linear-gradient(45deg, transparent 0 8px, rgba(42,22,16,.06) 8px 16px);
  display: flex; align-items: center; justify-content: center; padding: 8px;
}
.cfg-piece-art svg { width: 100%; height: 100%; }
.cfg-piece b { font-size: 11.5px; }
.cfg-piece span { font-size: 10.5px; color: var(--color-muted); line-height: 1.3; }

/* measurement step */
.cfg-label { display: block; font-size: 12px; color: var(--color-muted); margin-bottom: 6px; }
.cfg-input {
  width: 100%; padding: 11px 14px; border-radius: 14px; font: inherit;
  border: 1px solid var(--color-divider); background: var(--color-bg);
  font-size: 14px; color: var(--color-text);
}
.cfg-input:focus-visible { border-color: var(--color-accent); outline: none; }
.cfg-input:disabled { background: var(--color-surface-3); color: var(--color-muted-2); }
.cfg-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.cfg-rule { height: 1px; background: var(--color-surface-3); margin: 26px 0; }
.field.invalid .cfg-input { border-color: var(--color-deep); background: #FDF3F0; }

.cfg-note { border-radius: 12px; padding: 12px 15px; font-size: 13px; margin-bottom: 18px; }
.cfg-note-ok { background: #F1EFE3; border-left: 5px solid #7C9A4A; color: #3F4A28; }
.cfg-note-warn { background: var(--color-blush); border-left: 5px solid var(--color-deep); color: var(--color-deep-tint); }

/* ---- retired with the old configurator layout, kept harmless ---- */
.panel { border: 1px solid var(--color-divider); background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; }
.panel-hd { padding: 16px 20px; border-bottom: 1px solid var(--color-divider); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--color-surface); }
.panel-bd { padding: 20px; }
.kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .16em; color: var(--color-muted); font-weight: 700; }
.hf { font-family: var(--font-heading); font-weight: 800; }

.stepper { display: flex; gap: 8px; flex-wrap: wrap; border: 0; overflow: visible; margin-bottom: 26px; }
.stepper .st {
  flex: 1; min-width: 150px; display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; font-size: 13px; color: var(--color-muted);
  background: var(--color-white); text-decoration: none;
  border: 1px solid var(--color-divider); border-radius: var(--radius-pill);
}
.stepper .st + .st { border-left: 1px solid var(--color-divider); }
.stepper .st .num {
  width: 24px; height: 24px; flex: 0 0 auto; display: inline-flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: 11.5px;
  border: 1px solid var(--color-divider); border-radius: 50%;
}
.stepper .st .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stepper .st.done .num { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.stepper .st.active { background: var(--color-deep); border-color: var(--color-deep); color: var(--color-white); font-weight: 700; }
.stepper .st.active .num { background: var(--color-white); border-color: var(--color-white); color: var(--color-deep); }
.stepper .st.todo { opacity: .55; }

.cfg { display: grid; grid-template-columns: 78px 274px 1fr; min-height: 470px; }
@media (max-width: 900px) { .cfg { grid-template-columns: 68px 1fr; } .cfg .stage { grid-column: 1 / -1; } }
.rail { background: var(--color-surface); border-right: 1px solid var(--color-divider); }
.rail button {
  width: 100%; border: 0; border-bottom: 1px solid var(--color-divider); background: transparent;
  padding: 10px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 700; line-height: 1.15; color: var(--color-muted);
  text-align: center; cursor: pointer; font-family: var(--font-heading);
}
.rail button.active { background: var(--color-accent); color: #fff; }
.rail button svg { width: 30px; height: 34px; }

.optlist { border-right: 1px solid var(--color-divider); max-height: 540px; overflow: auto; background: var(--color-white); }
.optlist .oh { padding: 12px 16px; border-bottom: 1px solid var(--color-divider); font-weight: 800; font-size: 13px; position: sticky; top: 0; background: var(--color-white); z-index: 1; font-family: var(--font-heading); }
.opt { display: flex; align-items: center; gap: 11px; padding: 9px 14px; border-bottom: 1px solid var(--color-divider); cursor: pointer; font-size: 12.5px; }
.opt:hover { background: var(--color-surface); }
.opt.sel { background: var(--color-accent-100); font-weight: 700; }
.opt .sw { width: 40px; height: 44px; flex: 0 0 auto; border: 1px solid var(--color-divider-2); background: #fff; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); }
.opt.sel .sw { border-color: var(--color-accent); }
.opt .sw svg { width: 100%; height: 100%; }
.opt .pd { margin-left: auto; white-space: nowrap; color: var(--color-muted); font-size: 11.5px; font-weight: 700; }

.stage { background: var(--color-surface-2); display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 20px; align-content: center; }
@media (max-width: 1150px) { .stage { grid-template-columns: repeat(2, 1fr); } }
.piece { background: #fff; display: flex; flex-direction: column; align-items: center; padding: 10px 8px 8px; border-radius: var(--radius-md); border: 1px solid var(--color-divider); }
.piece svg { width: 100%; height: 112px; }
.piece b { font-size: 10.5px; margin-top: 5px; font-family: var(--font-heading); }
.piece small { font-size: 9.5px; color: var(--color-muted); text-align: center; line-height: 1.25; }

.barbot { border-top: 1px solid var(--color-divider); padding: 16px 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--color-surface); }
.notice { border-left: 4px solid var(--color-deep); background: var(--color-blush); padding: 13px 15px; font-size: 13.5px; border-radius: var(--radius-md); }
.info { border-left: 4px solid var(--color-accent); background: var(--color-accent-100); padding: 13px 15px; font-size: 13.5px; border-radius: var(--radius-md); }
.chip { display: inline-block; border: 1px solid var(--color-divider); background: var(--color-white); padding: 4px 11px; font-size: 11.5px; margin: 0 5px 5px 0; border-radius: var(--radius-pill); }

.qty-box { display: flex; align-items: center; border: 1px solid var(--color-divider); width: max-content; border-radius: var(--radius-pill); overflow: hidden; background: var(--color-white); }
.qty-box a, .qty-box button {
  width: 36px; height: 36px; border: 0; background: transparent; font-size: 17px;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  color: var(--color-text); cursor: pointer;
}
.qty-box a:hover, .qty-box button:hover { background: var(--color-surface); }
.qty-box span { min-width: 34px; text-align: center; font-weight: 800; font-size: 14px; }

.sumrow { display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0; }
.meas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.unverified { color: var(--color-muted-2); cursor: help; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 26px; z-index: 100;
  background: var(--color-deep); color: var(--color-white); padding: 13px 22px;
  display: flex; gap: 10px; align-items: center; box-shadow: var(--shadow-lg);
  font-weight: 700; font-size: 14px; border-radius: var(--radius-pill);
}

/* ==========================================================================
   LANDING PAGE — built to the approved design, 14 Aug 2026
   ========================================================================== */
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--color-accent);
}
.sec-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.sec-head h2 { font-size: clamp(26px, 3.2vw, 38px); font-family: var(--font-heading); font-weight: 800; letter-spacing: -.02em; margin: 0; }
.link-arrow {
  font-size: 13.5px; font-weight: 700; color: var(--color-accent-600);
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
}
.btn-lg { font-size: 15px; padding: 15px 26px; }

/* hero */
.hero {
  position: relative; background: var(--color-white); border-radius: 34px; overflow: hidden;
  border: 1px solid var(--color-divider); box-shadow: 0 18px 50px rgba(42,22,16,.07);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.hero-copy { padding: clamp(30px,4vw,58px); display: flex; flex-direction: column; justify-content: center; }

/* Pull the artwork in from the right. The two hero columns are equal, but the copy
   never fills its own, so the disc ended up marooned with a wide gap on its left
   and dead white on its right. Insetting the art column moves the whole block —
   disc, garment and both chips, since they all position against it — back towards
   the copy. Above the stacking breakpoint only: once the hero is a single column
   the art wants the full width. */
@media (min-width: 900px) {
  /* The copy column is given slightly less than half — its text is capped and never
     filled an equal share, which is what opened the gap in the middle. */
  .hero { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
  .hero-art { margin-right: clamp(8px, 1.6vw, 26px); }
}
.hero-h1 {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(40px, 5.4vw, 68px); line-height: .98; letter-spacing: -.03em;
  margin: 16px 0 0; color: var(--color-text);
}
.hero-h1 .serif-accent { letter-spacing: -.01em; }
.hero-lede { font-size: 16.5px; line-height: 1.6; max-width: 44ch; margin: 20px 0 0; color: var(--color-muted); }
.hero-stats { display: flex; gap: 24px; margin: 26px 0 0; flex-wrap: wrap; }
.hero-stat { display: flex; align-items: center; gap: 11px; font-size: 13px; line-height: 1.3; }
.hero-stat b { display: block; font-size: 14px; }
.hero-stat .text-muted { display: block; }
.hero-pill {
  width: 40px; height: 40px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex: none;
}
.hero-pill-ochre { background: var(--color-surface); color: var(--color-accent-600); }
.hero-pill-blush { background: var(--color-blush); color: var(--color-deep); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

/* Grid rather than flex-end: the disc and the garment now share one centre, so the
   garment sits in the middle of the circle instead of hanging off its lower edge. */
.hero-art {
  position: relative; display: grid; place-items: center; padding: 26px;
  min-height: clamp(360px, 34vw, 500px);
}
.hero-disc {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(90%, 440px); aspect-ratio: 1/1; border-radius: 50%;
  background: linear-gradient(160deg, var(--disc-a, var(--color-accent)), var(--disc-b, var(--color-accent-600)));
}

/* The base sits under the cycling discs so the middle of a cross-fade is never a
   bare page background. Neutral cream — it reads as a lull, not a flash. */
.hero-disc-base { --disc-a: #F6EAD9; --disc-b: #EADAC1; }

/* One tinted disc per garment, matched to it and fading on the same schedule.
   Translate is repeated inside the keyframes because animating transform would
   otherwise drop the centring translateX. */
.hero-disc-cyc {
  opacity: 0;
  animation: heroDisc 25s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes heroDisc {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  18%  { opacity: 1; }
  22%  { opacity: 0; }
  100% { opacity: 0; }
}
.hero-img {
  position: relative; width: 100%; max-width: 460px; border-radius: 26px;
  object-fit: cover; aspect-ratio: 4/3; box-shadow: 0 24px 50px rgba(42,22,16,.22);
}

/* ---- hero garment rotation ----------------------------------------------
   Five transparent cut-outs cross-fading in a fixed order. The frames are
   stacked absolutely so the block does not resize between them; the wrapper
   holds the height. No shadow or card — these are cut-outs meant to sit
   directly on the ochre disc. */
/* Deliberately narrower than the disc (440px) so the garment always keeps a ring of
   colour around it rather than touching the edge. */
.hero-cycle {
  position: relative; width: min(88%, 350px); aspect-ratio: 495/440;
  margin-inline: auto;
}
.hero-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; opacity: 0;
  animation: heroCycle 25s cubic-bezier(.4,0,.2,1) infinite;
}

/* 25s over five frames: each holds ~5s. The fades overlap slightly so there is
   never a moment with nothing on the disc. */
@keyframes heroCycle {
  0%   { opacity: 0; transform: translateY(10px) scale(.965); }
  3%   { opacity: 1; transform: none; }
  18%  { opacity: 1; transform: none; }
  22%  { opacity: 0; transform: translateY(-8px) scale(1.015); }
  100% { opacity: 0; transform: translateY(10px) scale(.965); }
}

/* Reduced motion: hold the first garment, no cycling. */
@media (prefers-reduced-motion: reduce) {
  .hero-frame { animation: none; opacity: 0; }
  .hero-frame:first-child { opacity: 1; }
  /* Hold the first garment and the disc that belongs to it. */
  .hero-disc-cyc { animation: none; opacity: 0; }
  /* nth-of-type(2), not first-of-type: the base disc is a span too and comes first. */
  .hero-disc-cyc:nth-of-type(2) { opacity: 1; }
}
/* Two floating chips over the disc. They are pulled well inside the hero card —
   at the old 26px inset the first one sat on the card's rounded corner and looked
   half off the edge. */
.hero-float {
  position: absolute; background: var(--color-white);
  border-radius: 16px; padding: 11px 15px; display: flex; align-items: center; gap: 10px;
  box-shadow: 0 10px 26px rgba(42,22,16,.14); font-size: 11.5px; line-height: 1.3;
  animation: shFloat 5s ease-in-out infinite;   /* the design's own keyframe */
}
.hero-float b { display: block; font-size: 12.5px; }
.hero-float .text-muted { display: block; }
.hero-float-icon {
  width: 30px; height: 30px; border-radius: 9px; background: var(--color-surface);
  display: flex; align-items: center; justify-content: center; color: var(--color-accent-600); flex: none;
}
/* Upper chip to the right, lower chip to the left — the pair reads diagonally
   across the disc. The second is given a longer period and an offset delay so they
   never bob in lockstep. */
/* Dropped to 13% so the chip's inner corner sits on the disc. Higher up the circle
   is too narrow there and the chip floats clear of it. */
.hero-float-a { top: 13%; right: 30px; }
.hero-float-b { bottom: 8%; left: 0; animation-duration: 6.5s; animation-delay: -2.2s; }

@media (max-width: 640px) {
  /* On a narrow screen the chips would cover the garment, so they tuck to the
     corners and shrink rather than overlapping it. */
  .hero-float { font-size: 10.5px; padding: 9px 12px; }
  .hero-float-a { top: 0; right: 0; }
  .hero-float-b { bottom: 0; left: 0; }
}

/* trust strip */
.trust {
  background: var(--color-white); border: 1px solid var(--color-divider); border-radius: 26px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); overflow: hidden;
}
.trust-cell { padding: 22px 24px; display: flex; gap: 13px; align-items: center; font-size: 12.5px; line-height: 1.35; }
.trust-cell + .trust-cell { border-left: 1px solid var(--color-surface-3); }
.trust-cell b { display: block; font-size: 14px; }
.trust-cell .text-muted { display: block; }
.trust-icon {
  width: 38px; height: 38px; border-radius: 12px; background: var(--color-surface);
  display: flex; align-items: center; justify-content: center; color: var(--color-accent-600); flex: none;
}

/* promo pair */
.promo-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.promo-h { font-size: clamp(30px,3.8vw,44px); font-family: var(--font-heading); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; margin: 6px 0 8px; }
.promo-festival {
  position: relative; background: var(--color-surface); border-radius: var(--radius-xl); overflow: hidden;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: center; min-height: 280px;
}
.promo-orb { position: relative; height: 100%; min-height: 240px; }
.promo-orb-img {
  position: absolute; right: -8%; top: 50%; transform: translateY(-50%);
  width: 118%; aspect-ratio: 1/1; object-fit: cover; border-radius: 50%;
}
.promo-stamp {
  position: absolute; left: -22px; bottom: 16px; width: 82px; height: 82px; border-radius: 50%;
  background: var(--color-white); color: var(--color-deep);
  font-family: var(--font-display); font-style: italic; font-size: 14px; line-height: 1.15;
  display: flex; align-items: center; justify-content: center; text-align: center;
  box-shadow: 0 10px 24px rgba(42,22,16,.16); transform: rotate(-12deg);
}
.promo-dark { position: relative; border-radius: var(--radius-xl); overflow: hidden; min-height: 280px; background: #F1E7D8; }
.promo-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo-scrim { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(42,22,16,.78) 0%, rgba(42,22,16,.12) 78%); }
.promo-dark-copy { position: relative; padding: clamp(24px,3vw,38px); max-width: 320px; color: #fff; }

/* product card extras used by the landing/shop grids */
.pcard-shot { position: relative; display: block; background: var(--color-surface-2); text-decoration: none; }
.shot-off {
  position: absolute; top: 12px; right: 12px; background: var(--color-deep); color: #fff;
  font-size: 11px; font-weight: 800; padding: 5px 10px; border-radius: var(--radius-pill);
}
.shot-badge {
  position: absolute; bottom: 12px; left: 12px; background: var(--color-white); color: var(--color-accent-600);
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--radius-pill);
}
.pcard-cta {
  margin-top: 10px; background: var(--color-surface); color: var(--color-deep);
  font-size: 13px; font-weight: 700; padding: 11px; border-radius: var(--radius-pill);
  text-align: center; text-decoration: none; display: block;
}
.pcard-cta:hover { background: #F0DFC0; }

/* how it works */
.how { background: var(--color-white); border: 1px solid var(--color-divider); border-radius: var(--radius-xl); padding: clamp(28px,4vw,52px); }
.how h2 { font-size: clamp(24px,3vw,34px); font-family: var(--font-heading); font-weight: 800; letter-spacing: -.02em; }
.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px; }
.how-step { display: flex; flex-direction: column; gap: 12px; }
.how-step h3 { font-family: var(--font-heading); font-size: 19px; font-weight: 700; margin: 0; letter-spacing: 0; }
.how-step p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--color-muted); }
.how-num {
  width: 46px; height: 46px; border-radius: 50%; font-weight: 800; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.how-num-1 { background: var(--color-deep); color: #fff; }
.how-num-2 { background: var(--color-accent); color: #fff; }
.how-num-3 { background: var(--color-surface); color: var(--color-accent-600); }

/* reviews */
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; }
.review-card {
  background: var(--color-white); border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 14px;
}
.review-stars { color: var(--color-accent); letter-spacing: 2px; font-size: 15px; }
.review-card p { margin: 0; font-size: 14.5px; line-height: 1.6; flex: 1; color: var(--color-text-2); }
.review-by { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.3; }
.review-by b { display: block; }
.review-by .text-muted { display: block; font-size: 11.5px; }
.review-initial {
  width: 34px; height: 34px; border-radius: 50%; background: var(--color-blush);
  color: var(--color-deep); font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center; flex: none;
}

/* poster */
.poster {
  position: relative; overflow: hidden; border-radius: 32px; color: #fff;
  padding: clamp(34px,5vw,64px);
  background: linear-gradient(120deg, #6B2419 0%, #8A3520 55%, #C88A32 130%);
}
.poster-orb { position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,255,255,.08); }
.poster-h {
  font-family: var(--font-heading); font-size: clamp(30px,4.6vw,56px); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.04; margin: 14px 0 0; max-width: 18ch; color: #fff;
}
.poster-p { font-size: 16px; line-height: 1.6; margin: 18px 0 0; max-width: 52ch; opacity: .9; }

/* ---- shared page furniture: white header card, filter row ---------------- */
.page-head {
  background: var(--color-white); border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl); padding: clamp(26px, 4vw, 44px);
}
.page-h1 {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(30px, 4vw, 46px); letter-spacing: -.03em; margin: 0;
}
.page-lede { margin: 12px 0 0; max-width: 56ch; font-size: 15.5px; color: var(--color-muted); }

.filter-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.filter-pill {
  font-size: 13px; font-weight: 700; padding: 10px 16px; border-radius: var(--radius-pill);
  background: var(--color-white); color: var(--color-text);
  border: 1px solid var(--color-divider); text-decoration: none;
}
.filter-pill:hover { border-color: var(--color-divider-2); background: var(--color-surface); }
.filter-pill.is-on { background: var(--color-deep); color: #fff; border-color: var(--color-deep); }

.sort-select {
  font-size: 13px; font-weight: 600; padding: 10px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-divider); background: var(--color-white); color: var(--color-text);
}

/* The shop grid uses the solid maroon CTA; the landing strip uses the soft cream
   one. Same component, two weights — deliberate, per the design. */
.pcard-cta-solid { background: var(--color-deep); color: #fff; }
.pcard-cta-solid:hover { background: var(--color-deep-600); }

/* category tiles — 3:4 portrait with a scrim and a corner arrow, per the design */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.cat-tile {
  position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden;
  background: #F1E7D8; aspect-ratio: 3/4; text-decoration: none;
  transition: transform .25s ease;
}
.cat-tile:hover { transform: translateY(-4px); }
/* The category art is transparent garment cut-outs, not photography, so it is
   CONTAINED on the tinted ground rather than cropped to fill. Bottom padding keeps
   the garment clear of the label. */
.cat-tile img, .cat-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 14px 14px 62px;
}
/* Supplied category photographs are opaque and edge-to-edge — they fill the tile
   rather than floating on the ground. Set by ImageService.CategoryFitClass. */
.cat-tile img.cat-fill { object-fit: cover; padding: 0; }
/* Only the lower band is darkened — a full-height scrim over a transparent image
   just muddies the tint. This keeps the white label readable and the garment clean. */
.cat-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(42,22,16,.78) 0%, rgba(42,22,16,.35) 18%, rgba(42,22,16,0) 42%);
}
.cat-meta {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; color: #fff;
}
.cat-meta b { display: block; font-size: 16px; letter-spacing: -.01em; }
.cat-count { font-size: 12px; opacity: .85; }
/* The white disc was static on hover — the tile lifted and the photo zoomed, but
   the one thing that looks like a button did nothing. It now takes the accent,
   grows slightly, and its arrow steps to the right. */
.cat-go {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: var(--color-white); color: var(--color-deep);
  display: flex; align-items: center; justify-content: center;
  transition: background .22s ease, color .22s ease, transform .22s ease;
}
.cat-go svg { transition: transform .22s cubic-bezier(.4,0,.2,1); }
.cat-tile:hover .cat-go,
.cat-tile:focus-visible .cat-go {
  background: var(--color-accent); color: #fff; transform: scale(1.13);
}
.cat-tile:hover .cat-go svg,
.cat-tile:focus-visible .cat-go svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .cat-go, .cat-go svg { transition: none; }
  .cat-tile:hover .cat-go { transform: none; }
  .cat-tile:hover .cat-go svg { transform: none; }
}

/* ---- cart ---------------------------------------------------------------- */
.cart-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 3vw, 36px); align-items: start;
}
.cart-lines { display: flex; flex-direction: column; gap: 14px; }
.cart-line {
  background: var(--color-white); border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg); padding: 18px; display: flex; gap: 16px; flex-wrap: wrap;
}
.cart-thumb {
  width: 92px; height: 92px; border-radius: 16px; overflow: hidden; flex: none;
  background: var(--color-surface-2); position: relative;
}
.cart-thumb img, .cart-thumb svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.cart-chip {
  border: 1px solid var(--color-divider); border-radius: var(--radius-pill);
  padding: 3px 10px; font-size: 11px; color: var(--color-muted);
}
.cart-remove { font-size: 12.5px; font-weight: 700; color: var(--color-deep); text-decoration: none; }
.link-back {
  font-size: 13.5px; font-weight: 700; color: var(--color-deep);
  display: inline-flex; align-items: center; gap: 8px; padding: 4px; text-decoration: none;
}
.cart-summary {
  background: var(--color-white); border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg); overflow: hidden; position: sticky; top: 96px;
}
.cart-summary-hd { padding: 20px 22px; border-bottom: 1px solid var(--color-surface-3); }
.cart-summary-bd { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.cart-rule { height: 1px; background: var(--color-surface-3); margin: 6px 0; }
.cart-checkout { justify-content: center; padding: 15px; font-size: 15px; margin-top: 8px; }

/* free-shipping progress */
.ship-bar { height: 7px; border-radius: var(--radius-pill); background: var(--color-surface-3); overflow: hidden; }
.ship-bar span {
  display: block; height: 100%; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-accent), var(--color-deep));
  transition: width .4s ease;
}
.empty-icon {
  width: 64px; height: 64px; border-radius: 50%; background: var(--color-surface);
  color: var(--color-accent-600); display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}

/* ---- order confirmation / tracking --------------------------------------- */
.order-banner {
  background: linear-gradient(120deg, #6B2419, #A0522A);
  border-radius: var(--radius-xl); padding: clamp(28px, 4vw, 52px); color: #fff;
}
.order-tick {
  width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.order-h1 {
  font-family: var(--font-heading); font-size: clamp(26px, 3.6vw, 42px); font-weight: 800;
  letter-spacing: -.03em; margin: 0; color: #fff;
}
.block-h2 { font-family: var(--font-heading); font-size: 20px; font-weight: 800; margin: 0 0 14px; }
.panel-card {
  background: var(--color-white); border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg); overflow: hidden;
}
.stage-row {
  display: flex; gap: 14px; padding: 16px 20px;
  border-bottom: 1px solid #F5EDE2; align-items: flex-start;
}
.stage-row:last-child { border-bottom: 0; }
.stage-num {
  width: 26px; height: 26px; flex: none; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 12px; font-weight: 800;
  background: var(--color-surface); color: var(--color-accent-600);
}
.stage-num.is-done { background: var(--color-deep); color: #fff; }
.next-note {
  margin-top: 16px; background: var(--color-surface); border-radius: 20px;
  padding: 16px 18px; font-size: 13.5px; color: var(--color-neutral-700); line-height: 1.55;
}
.track-card {
  background: var(--color-white); border: 1px solid var(--color-divider);
  border-radius: 28px; padding: clamp(26px, 4vw, 40px);
}

/* ---- journal ------------------------------------------------------------- */
.article-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.article-card {
  background: var(--color-white); border: 1px solid var(--color-divider);
  border-radius: 26px; overflow: hidden; display: flex; flex-direction: column;
  text-decoration: none; color: inherit; transition: transform .25s ease;
}
.article-card:hover { transform: translateY(-4px); }
.article-shot { width: 100%; aspect-ratio: 16/10; background: var(--color-surface-2); overflow: hidden; }
.article-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-body { padding: 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.article-body h3 {
  font-family: var(--font-heading); font-size: 18px; font-weight: 700;
  line-height: 1.28; margin: 0; letter-spacing: 0;
}
.article-body p { margin: 0; font-size: 14px; color: var(--color-muted); line-height: 1.55; flex: 1; }
.article-meta { font-size: 12px; color: var(--color-muted-2); }

/* the italic serif accent the design uses inside headings */
.serif-accent {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  color: var(--color-accent);
}

.promo-band {
  background: var(--color-surface); border-radius: var(--radius-xl);
  padding: clamp(24px, 3vw, 38px);
}

/* footer ------------------------------------------------------------------- */
/* ---- footer -------------------------------------------------------------
   Deep maroon panel with a rounded top, four columns across. Its own colour
   tokens rather than the page ones: everything here sits on dark, so reusing
   --color-text would put near-black type on a near-black ground. */
.site-footer {
  --foot-ink: #F3E6DC;
  width: 100%; background: #2E140D; color: var(--foot-ink);
  border-radius: 36px 36px 0 0; margin-top: 8px;
}
.foot-inner { max-width: 1240px; margin: 0 auto; padding: clamp(36px,5vw,60px) 24px; }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; }
.foot-brand { max-width: 320px; }
.foot-brand p { margin: 14px 0 0; font-size: 14px; line-height: 1.6; opacity: .72; }
/* White plate behind the mark. inline-block with padding, so it grows to fit the
   logo — the logo is never scaled down to fit the plate. */
.foot-logo {
  display: inline-block; background: #FFFFFF;
  border-radius: 14px; padding: 12px 16px;
}
.foot-logo img { height: 44px; width: auto; display: block; }

.site-footer h5 { font-size: 14px; font-weight: 800; margin: 0 0 14px; color: var(--foot-ink); }
.foot-links { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; }
.site-footer a { color: var(--foot-ink); text-decoration: none; opacity: .72; transition: opacity .15s ease; }
.site-footer a:hover { opacity: 1; }
.foot-note { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; opacity: .72; }
.foot-phone { display: inline-block; margin-top: 8px; font-size: 14.5px; font-weight: 800;
  color: #E8C68A !important; opacity: 1 !important; }

.foot-rule { height: 1px; background: rgba(243,230,220,.16); margin: 32px 0 18px; }
.foot-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  font-size: 12px; opacity: .6; }

/* newsletter — pill field and a round ochre send button */
.newsletter { display: flex; gap: 8px; }
.foot-input {
  flex: 1; min-width: 0; padding: 11px 14px; border-radius: var(--radius-pill);
  border: 1px solid rgba(243,230,220,.25); background: rgba(243,230,220,.08);
  color: var(--foot-ink); font-size: 13px; font-family: inherit;
}
.foot-input::placeholder { color: var(--foot-ink); opacity: .5; }
.foot-input:focus-visible { outline: none; border-color: var(--color-accent); }
.foot-go {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  background: var(--color-accent); color: #2E140D !important; opacity: 1 !important;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.foot-go:hover { background: var(--color-accent-600); }
.foot-go:focus-visible { outline: 2px solid var(--foot-ink); outline-offset: 2px; }

@media (max-width: 560px) {
  .site-footer { border-radius: 24px 24px 0 0; }
  .foot-legal { flex-direction: column; }
}

.scroll-x { overflow-x: auto; }

/* =========================================================================
   PRODUCT DETAIL
   ========================================================================= */
.pdp {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(24px, 4vw, 52px); align-items: start;
}
.pdp-main {
  background: var(--color-white); border: 1px solid var(--color-divider);
  border-radius: 28px; overflow: hidden; aspect-ratio: 1/1;
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.pdp-main img, .pdp-main svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.pdp-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.pdp-thumb {
  background: var(--color-white); border: 1px solid var(--color-divider);
  border-radius: 16px; overflow: hidden; aspect-ratio: 1/1; padding: 8px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .18s ease, transform .18s ease;
}
.pdp-thumb:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.pdp-thumb img, .pdp-thumb svg { width: 100%; height: 100%; object-fit: contain; display: block; }

.pdp-h1 {
  font-family: var(--font-heading); font-weight: 800; margin: 10px 0 0;
  font-size: clamp(27px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -.02em;
}
.pdp-save {
  background: var(--color-deep); color: #fff; border-radius: var(--radius-pill);
  padding: 4px 12px; font-size: 12px; font-weight: 800; letter-spacing: .02em;
}
.pdp-note {
  background: var(--color-surface); border-radius: var(--radius-md);
  padding: 15px 17px; margin: 22px 0 0; font-size: 13.5px; line-height: 1.6;
  color: var(--color-text-2);
}
.pdp-cta {
  width: 100%; justify-content: center; margin-top: 16px;
  padding: 16px; font-size: 15px; gap: 10px;
}
.pdp-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.pdp-fact {
  background: var(--color-white); border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); padding: 13px; text-align: center;
}
.pdp-fact b { display: block; font-size: 13px; }
.pdp-fact span { display: block; font-size: 11.5px; color: var(--color-muted-2); margin-top: 2px; }

.layer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.layer-card {
  background: var(--color-white); border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg); padding: 18px;
}
.layer-card h3 { font-size: 14.5px; margin: 0 0 5px; }
.layer-card div { font-size: 12.5px; color: var(--color-muted); }

.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.quote-card {
  background: var(--color-white); border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg); padding: 24px 22px 20px; position: relative;
}
.quote-mark {
  font-family: var(--font-display); font-size: 56px; line-height: .6;
  color: var(--color-accent); opacity: .35; display: block; margin-bottom: 6px;
}
.quote-card p { margin: 0 0 14px; font-size: 14px; line-height: 1.65; color: var(--color-text-2); }
.quote-stars { color: var(--color-accent); letter-spacing: 2px; font-size: 12px; }
.quote-by { display: flex; align-items: center; gap: 11px; margin-top: 14px; }
.quote-by b { display: block; font-size: 13px; }
.quote-by .text-muted { display: block; font-size: 11.5px; }

/* =========================================================================
   CHECKOUT
   ========================================================================= */
.co-grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(290px, 1fr);
  gap: clamp(20px, 3vw, 36px); align-items: start;
}
@media (max-width: 900px) { .co-grid { grid-template-columns: 1fr; } }

.co-steps { display: flex; flex-direction: column; gap: 14px; }
.co-guest {
  background: var(--color-surface); border-radius: var(--radius-lg);
  padding: 15px 18px; font-size: 13.5px; color: var(--color-text-2);
}
.co-card {
  background: var(--color-white); border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg); padding: 22px;
}
.co-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.co-head h2 { font-size: 17px; margin: 0; font-family: var(--font-heading); font-weight: 800; }
.co-num {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--color-deep); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 12px;
}
.co-req { color: var(--color-accent); }
.co-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }

/* RadioButtonList in Flow layout emits input, label, <br> as flat siblings — the
   two-column grid is what turns that back into aligned rows. */
.co-choice { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: start; }
.co-choice br { display: none; }
.co-choice input[type="radio"] { margin: 3px 0 0; accent-color: var(--color-deep); width: 17px; height: 17px; }
.co-choice label { font-size: 13.5px; line-height: 1.45; cursor: pointer; }
.co-choice label b { display: block; font-size: 13.5px; }
.co-choice label span { display: block; font-size: 12px; color: var(--color-muted-2); margin-top: 1px; }
.co-choice-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.co-choice-row label { margin-right: 18px; }

.co-sum-h { font-size: 17px; font-family: var(--font-heading); font-weight: 800; margin: 0 0 14px; }
.co-line { display: flex; gap: 12px; margin-bottom: 12px; align-items: center; }
.co-line:last-child { margin-bottom: 0; }
.co-line-thumb { width: 50px; height: 50px; border-radius: 12px; }
.co-line-name { font-size: 13px; font-weight: 800; line-height: 1.3; }

/* =========================================================================
   ABOUT
   ========================================================================= */
.about-split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(24px, 4vw, 48px); align-items: center;
}
.about-shot {
  border-radius: 28px; overflow: hidden; aspect-ratio: 4/3;
  background: var(--color-surface-2); border: 1px solid var(--color-divider);
}
.about-shot img, .about-shot svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-h2 {
  font-family: var(--font-heading); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(22px, 2.8vw, 32px); line-height: 1.15; margin: 10px 0 14px;
}
.about-p { font-size: 15.5px; line-height: 1.7; color: var(--color-text-2); margin: 0 0 12px; }

.about-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.about-card {
  background: var(--color-white); border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg); padding: 24px 22px;
}
.about-card h3 { font-size: 17px; margin: 0 0 10px; font-family: var(--font-heading); font-weight: 800; }
.about-card p { margin: 0 0 10px; font-size: 14px; line-height: 1.65; color: var(--color-muted); }
.about-card p:last-child { margin-bottom: 0; }
.about-phone {
  display: inline-block; margin: 4px 0 6px; font-size: 17px; font-weight: 800;
  color: var(--color-accent-600); text-decoration: none;
}
.about-small { font-size: 12.5px !important; color: var(--color-muted-2) !important; }

/* Slow zoom on the filled category photographs — the cut-out tile is left alone,
   scaling a contained image just makes it drift. */
.cat-tile img.cat-fill { transition: transform .45s ease; }
.cat-tile:hover img.cat-fill { transform: scale(1.05); }

/* ---- cursor tail ---------------------------------------------------------
   Built by site.js. Fixed and pointer-events:none so it floats over the page
   without ever intercepting a click or affecting layout. */
.cursor-tail {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0; transition: opacity .25s ease;
}
.cursor-tail.is-on { opacity: 1; }
.cursor-dot {
  position: fixed; top: 0; left: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--color-accent), var(--color-accent-600));
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .cursor-tail { display: none; } }

/* ---- back to top --------------------------------------------------------
   Sits above the cursor tail's stacking order is irrelevant (the tail cannot
   receive events), but it stays clear of the footer's right edge. */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--color-deep); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(42,22,16,.26);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--color-accent-600); }
.to-top:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }
@media (max-width: 640px) { .to-top { right: 14px; bottom: 14px; width: 42px; height: 42px; } }

/* ---- configurator: live artwork preview ---------------------------------
   The store's layer images are transparent PNGs on one shared canvas, already
   registered against the same garment body, so they stack at inset 0 with no
   positioning of their own. */
.cfg-canvas {
  position: relative; width: 100%; aspect-ratio: 900/644;
  background: var(--color-deep); border-radius: var(--radius-lg);
  border: 1px solid var(--color-deep); overflow: hidden;
}
.cfg-ly {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block;
}
.cfg-canvas-tag {
  position: absolute; left: 12px; bottom: 12px;
  background: rgba(255,255,255,.16); color: #fff; border-radius: var(--radius-pill);
  padding: 4px 11px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
}

/* option swatches now carry the store's own thumbnails */
/* The artwork is a white pattern piece with a fine dashed outline, so the swatch
   needs a ground with some tone in it - on white the piece was invisible. */
.cfg-sw-img {
  padding: 3px; overflow: hidden; background: var(--color-deep);
  background-image: none; align-items: center; border-color: var(--color-deep);
}
.cfg-sw-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* ---- option groups as an accordion --------------------------------------
   The header is a real <button>, so it is keyboard reachable and announces its
   expanded state. The body collapses with grid-template-rows rather than
   max-height, which avoids guessing a height for a 23-row list. */
.cfg-group-hd {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 12px 18px; background: var(--color-bg); border: 0;
  border-bottom: 1px solid #F5EDE2; cursor: pointer; text-align: left;
  font-family: inherit; color: var(--color-text);
}
.cfg-group-hd:hover { background: var(--color-surface); }
.cfg-group-hd { position: sticky; top: 0; z-index: 2; }
.cfg-group-hd:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.cfg-group-pick {
  margin-left: auto; font-size: 11.5px; color: var(--color-accent-600);
  font-weight: 700; max-width: 46%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.cfg-group-n {
  font-size: 11px; color: var(--color-muted-2); font-variant-numeric: tabular-nums;
  background: var(--color-surface-2); border-radius: var(--radius-pill); padding: 1px 8px;
}
.cfg-caret { flex: none; color: var(--color-muted-2); transition: transform .2s ease; }
.cfg-group.is-open .cfg-caret { transform: rotate(180deg); }

/* Collapse by animating a single grid row from 0fr to 1fr. This only works with
   ONE child: the row template sizes rows, so a group whose options were direct
   children collapsed row 1 and left the other 22 at auto. .cfg-group-rows is that
   single child, and it is what actually clips. */
.cfg-group-bd {
  display: grid; grid-template-rows: 0fr; overflow: hidden;
  transition: grid-template-rows .24s cubic-bezier(.4,0,.2,1);
}
.cfg-group.is-open .cfg-group-bd { grid-template-rows: 1fr; }
.cfg-group-rows { min-height: 0; overflow: hidden; }
/* Deliberately NO scroller here. .cfg-options already scrolls; a second one
   inside the open group gave two nested scrollbars and a list that fought the
   wheel. The group expands to its full height and the panel scrolls it. */

@media (prefers-reduced-motion: reduce) {
  .cfg-group-bd { transition: none; }
  .cfg-caret { transition: none; }
}

/* Fixed layers — included on this product, nothing to choose. Styled as a
   read-only row so it never looks like a control that has stopped working. */
.cfg-group-hd-static { cursor: default; background: var(--color-surface); }
.cfg-group-hd-static:hover { background: var(--color-surface); }
.cfg-group-bd-open { grid-template-rows: 1fr !important; }
.cfg-opt-static { cursor: default; background: var(--color-white); }
.cfg-opt-static:hover { background: var(--color-white); }
.cfg-dot-on { background: var(--color-accent); border-color: var(--color-accent); }
.cfg-delta-inc { font-size: 11px; color: var(--color-muted-2); letter-spacing: .04em; }

/* ---- configured thumbnail -----------------------------------------------
   The cart and checkout lines show what the customer actually built: the same
   transparent layer stack as the preview, shrunk into the tile. Only when a line
   has no choices, or the product has no artwork, does the product photo show. */
.cfg-mini {
  position: relative; display: block; width: 100%; height: 100%;
  background: var(--color-deep); border-radius: inherit; overflow: hidden;
}
.cfg-mini .cfg-ly {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block;
}

/* ---- checkout: account block --------------------------------------------- */
.co-guest {
  background: var(--color-surface); border-radius: var(--radius-lg);
  padding: 15px 18px; font-size: 13.5px; color: var(--color-text-2);
}
.co-guest a { color: var(--color-accent-600); font-weight: 700; }
.co-guest-in { background: var(--color-blush); }
.co-num-plus { background: var(--color-accent); }
.co-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.co-check input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--color-deep); }
.co-check b { display: block; font-size: 14px; }
.co-check i { display: block; font-style: normal; font-size: 12.5px; color: var(--color-muted); margin-top: 3px; line-height: 1.5; }
.co-acct-pw { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--color-divider); }
.co-acct-note { margin: 10px 0 0; font-size: 12px; color: var(--color-muted-2); }

/* ---- favourites ----------------------------------------------------------
   The heart sits beside the card's button rather than over the photograph: the
   store's product shots carry a burnt-in "PATTERNS ONLY" badge in the top-left
   and nothing of ours may cover it. */
.pcard-actions { display: flex; align-items: center; gap: 8px; }
.pcard-actions .pcard-cta, .pcard-actions .btn { flex: 1; }
/* A real circle: an explicit height and align-self:center, or the flex row
   stretches it to the button's height and it reads as an oval. */
.fav-btn {
  flex: none; align-self: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--color-divider); background: var(--color-white);
  color: var(--color-muted-2); cursor: pointer; padding: 0; line-height: 0;
  display: flex; align-items: center; justify-content: center;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.fav-btn svg { width: 17px; height: 17px; display: block; }
.fav-btn:hover { color: var(--color-deep); border-color: var(--color-deep); }
.fav-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.fav-btn.is-on { color: var(--color-deep); border-color: var(--color-deep); }
.fav-btn.is-on svg { fill: var(--color-deep); }

/* nav heart */
.nav-fav { position: relative; }
.nav-fav svg { width: 17px; height: 17px; }
.nav-fav.is-on svg, .nav-fav svg { pointer-events: none; }
.fav-badge { pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  .fav-pop { animation: favPop .32s cubic-bezier(.34,1.56,.64,1); }
}
@keyframes favPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* =========================================================================
   MOBILE
   ========================================================================= */
@media (max-width: 640px) {
  /* iOS Safari zooms the entire page when a focused field's font-size is under
     16px, then leaves the layout shifted. 16px on the CONTROL only — labels and
     body copy keep their sizes. */
  .cfg-input, .input, .foot-input,
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="password"], input[type="number"], input[type="search"],
  select, textarea {
    font-size: 16px;
  }

  /* Comfortable targets. 41px was passable; these are the ones a thumb hits. */
  .cfg-input, .input, select, textarea { min-height: 46px; }
  .btn { min-height: 46px; }
  .nav-icon { width: 38px; height: 38px; }

  /* Footer links sat at 20px tall, well under a thumb's width. */
  .foot-links a, .foot-legal a { padding-block: 7px; }
  .foot-cols { gap: 26px; }

  /* The configurator's two panes stack, and the preview leads — on a phone you
     want to see what you are building before the list of choices. */
  .cfg-split { grid-template-columns: 1fr; }
  .cfg-preview { order: -1; }
  .cfg-options { max-height: none; }

  /* ---- compact step indicator -------------------------------------------
     The four pills wrapped into a 2x2 block 124px tall — a sixth of the screen
     spent on a progress bar before any content. On a phone only the step you are
     ON needs its name; the rest become numbered dots on one 44px row. */
  .cfg-steps {
    flex-wrap: nowrap; gap: 6px; padding: 5px;
    border-radius: var(--radius-pill); align-items: center;
  }
  .cfg-step {
    flex: 0 0 auto; min-width: 0; padding: 6px; gap: 0;
    font-size: 12px; border-radius: var(--radius-pill);
  }
  /* Every label is hidden; the active step's is restored below. The number chip
     is a child, so it has to be exempted explicitly. */
  .cfg-step { font-size: 0; }
  .cfg-step .n { font-size: 11.5px; width: 26px; height: 26px; }
  .cfg-step.is-active {
    flex: 1 1 auto; font-size: 12.5px; gap: 8px; padding: 6px 12px 6px 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Steps still to come sit quieter than the completed ones. */
  .cfg-step.is-todo { opacity: .45; }

  /* ---- cart controls ----------------------------------------------------- */
  .qty-box a, .qty-box button { width: 44px; height: 44px; font-size: 19px; }
  .qty-box span { min-width: 38px; font-size: 15px; }
  .cart-remove { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; }
}

/* =========================================================================
   SELECTS
   The browser default is a grey system control with a blue highlight — it looked
   borrowed from another site sitting inside this one. Every dropdown across the
   storefront now carries the theme.

   The CLOSED control is fully ours. The OPEN list is drawn by the operating
   system, and only its colours can be influenced (Chromium and Firefox honour the
   rules below; Safari ignores most of them). accent-color is what re-tints the
   highlight bar from system blue to the brand ochre.
   ========================================================================= */
select,
.cfg-input, .input, .sort-select, .foot-input {
  accent-color: var(--color-accent);
}

select {
  /* Strip the platform look. The chevron itself is applied below, at class
     specificity: .sort-select and .cfg-input both set the `background` shorthand,
     which resets background-image and would win over a bare `select` rule. */
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  cursor: pointer;
}
select::-ms-expand { display: none; }

/* One chevron, declared once, applied wherever a select actually lives. */
select,
select.cfg-input,
select.input,
select.sort-select,
select.form-select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A9701A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  /* Room for the chevron so a long option never runs underneath it. */
  padding-right: 38px;
}

select:hover { border-color: var(--color-divider-2); }
select:focus-visible {
  border-color: var(--color-accent);
  outline: 2px solid rgba(200, 138, 50, .30);
  outline-offset: 1px;
}
select:disabled,
select.cfg-input:disabled,
select.input:disabled,
select.form-select:disabled {
  cursor: not-allowed; opacity: .6;
  background-image: none;   /* a chevron on a control that cannot open is a lie */
}

/* The open list. Chromium and Firefox honour these; where they do not, the OS
   default still reads correctly against this palette. */
select option {
  background: var(--color-white);
  color: var(--color-text);
  padding: 8px 10px;
}
select option:checked,
select option:hover {
  background: var(--color-surface);
  color: var(--color-deep);
}

/* The shop's sort control is a pill, so its chevron sits further in. */
select.sort-select { padding-right: 40px; background-position: right 16px center; }

/* ---- show / hide password ------------------------------------------------
   The wrapper is inline-block and full width so it can sit inside the existing
   .field grid without changing any layout around it. */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap > input { width: 100%; padding-right: 46px; }
.pw-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; background: transparent; cursor: pointer;
  color: var(--color-muted-2); border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s ease, background .15s ease;
}
.pw-toggle:hover { color: var(--color-deep); background: var(--color-surface); }
.pw-toggle[aria-pressed="true"] { color: var(--color-accent-600); }
.pw-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }