/* ==========================================================================
   MI by Sneha — theme stylesheet
   Tokens are lifted verbatim from the MI by Sneha Digital Design System.
   Never write a raw hex below the primitives block. Semantics are the API.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — colour
   -------------------------------------------------------------------------- */
:root {
  /* Primitives — maroon ramp */
  --maroon-50:#FBEFF1;--maroon-100:#F3D9DD;--maroon-200:#E0AEB5;--maroon-300:#C46E7B;
  --maroon-400:#A8283A;--maroon-500:#6B0F1E;--maroon-600:#590C18;--maroon-700:#45080F;--maroon-800:#2A0A10;

  /* Primitives — warm neutral scale */
  --neutral-0:#FFFFFF;--neutral-25:#FAF6EF;--neutral-75:#F0E4D2;--neutral-100:#EFE8DC;
  --neutral-200:#E4DCCE;--neutral-300:#CFC7BB;--neutral-400:#A9A099;--neutral-500:#6E6560;
  --neutral-700:#3A3134;--neutral-900:#191214;

  /* Primitives — accent & status */
  --gold-300:#D9B87A;--gold-500:#A98149;--gold-700:#8A6636;
  --rose-200:#E3C3BE;
  --green-50:#EAF0EA;--green-600:#3E6B4E;--green-800:#2F5A3D;--green-900:#24462F;
  --red-50:#FBEBEC;--red-500:#B4232E;--red-700:#8E1A23;
  --amber-50:#FBF0E1;--amber-500:#D9903A;--amber-700:#8A5A15;--amber-800:#6E4610;

  /* Semantic */
  --surface-page:var(--neutral-25);
  --surface-raised:var(--neutral-0);
  --surface-sunken:var(--neutral-75);
  --surface-inverse:var(--maroon-500);
  --surface-inverse-deep:var(--maroon-700);

  --text-primary:var(--neutral-900);
  --text-body:var(--neutral-700);
  --text-secondary:var(--neutral-500);
  --text-disabled:var(--neutral-400);
  --text-inverse:var(--neutral-75);

  --action-primary:var(--maroon-500);
  --action-hover:var(--maroon-600);
  --action-pressed:var(--maroon-700);
  --action-subtle:var(--maroon-50);
  --action-subtle-pressed:var(--maroon-100);

  --border-default:var(--neutral-300);
  --border-subtle:var(--neutral-100);
  --border-strong:var(--maroon-500);

  --status-success:var(--green-600);
  --status-success-surface:var(--green-50);
  --status-success-text:var(--green-800);
  --status-warning:var(--amber-500);
  --status-warning-surface:var(--amber-50);
  --status-warning-text:var(--amber-700);
  --status-critical:var(--red-500);
  --status-critical-surface:var(--red-50);
  --status-critical-text:var(--red-700);

  --accent-gold:var(--gold-500);
  --accent-gold-on-dark:var(--gold-300);
  --accent-campaign:var(--amber-500);

  --focus-ring:var(--maroon-500);
  --scrim:rgba(25,18,20,.55);
}

/* --------------------------------------------------------------------------
   2. Tokens — type, space, layout, motion, elevation
   -------------------------------------------------------------------------- */
:root {
  --font-display:'Cormorant Garamond','EB Garamond',Georgia,serif;
  --font-text:'Jost','Futura','Avenir Next',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  --weight-light:300;--weight-regular:400;--weight-medium:500;

  --size-display-xl:56px;--size-display-lg:40px;
  --size-heading-lg:28px;--size-heading-sm:22px;
  --size-quote:20px;--size-eyebrow:12px;
  --size-body-lg:18px;--size-body:16px;
  --size-label:14px;--size-caption:13px;--size-spec:11px;

  --leading-display-xl:1.02;--leading-display-lg:1.08;
  --leading-heading-lg:1.2;--leading-heading-sm:1.25;
  --leading-quote:1.4;--leading-eyebrow:1;
  --leading-body-lg:1.7;--leading-body:1.65;
  --leading-label:1.4;--leading-caption:1.55;--leading-spec:1.5;

  --track-display-xl:-.015em;--track-display-lg:-.01em;
  --track-eyebrow:.22em;--track-label:.02em;--track-caption:.04em;--track-spec:.14em;

  --measure:66ch;

  /* 4px grid. Eleven steps. Never 20, never 28. */
  --space-025:2px;--space-050:4px;--space-100:8px;--space-150:12px;--space-200:16px;
  --space-300:24px;--space-400:32px;--space-500:40px;--space-600:48px;--space-800:64px;--space-1000:80px;

  --section-gap:80px;
  --card-padding:24px;

  /* The brand is square-cornered */
  --radius-0:0;--radius-100:2px;--radius-200:4px;--radius-300:8px;--radius-400:16px;--radius-full:999px;

  --target-min:44px;--target-mobile:48px;--target-sticky:56px;

  --content-max:1280px;
  --page-margin:40px;
  --header-h:72px;
  --drawer-bag:420px;
  --filter-rail:240px;

  --duration-instant:100ms;--duration-fast:160ms;--duration-base:240ms;
  --duration-slow:320ms;--duration-page:420ms;
  --ease-standard:cubic-bezier(.2,.8,.2,1);
  --ease-exit:cubic-bezier(.4,0,1,1);

  --elevation-0:none;
  --elevation-100:0 1px 2px rgba(42,10,16,.06),0 1px 1px rgba(42,10,16,.04);
  --elevation-200:0 4px 12px rgba(42,10,16,.09),0 1px 2px rgba(42,10,16,.05);
  --elevation-300:0 12px 32px rgba(42,10,16,.14),0 2px 6px rgba(42,10,16,.06);
}

@media (max-width: 989px) {
  :root {
    --size-display-xl:40px;--size-display-lg:30px;
    --size-heading-lg:24px;--size-heading-sm:20px;
    --size-quote:18px;--size-eyebrow:11px;
    --size-body-lg:17px;
    --section-gap:48px;
    --card-padding:16px;
    --page-margin:16px;
    --header-h:56px;
  }
}

@media (prefers-reduced-motion:reduce) {
  :root {
    --duration-instant:160ms;--duration-fast:160ms;--duration-base:160ms;
    --duration-slow:160ms;--duration-page:160ms;
  }
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
@keyframes mi-spin { to { transform: rotate(360deg); } }

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

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-text);
  font-weight: var(--weight-light);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

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

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

::selection { background: var(--rose-200); color: var(--neutral-900); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-default); }

/* width/height attributes are required for layout stability, but they map to
   presentational hints that would beat our aspect-ratio rules — so hand height
   back to CSS. Class-level height rules still win on specificity. */
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

button { font-family: var(--font-text); }

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }

.visually-hidden {
  position: absolute !important; 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: -9999px; top: 0; z-index: 300;
  background: var(--surface-raised); color: var(--action-primary);
  padding: 12px 18px; font: var(--weight-medium) 12px/1 var(--font-text);
}
.skip-link:focus { left: 12px; top: 12px; }

/* --------------------------------------------------------------------------
   4. Layout helpers
   -------------------------------------------------------------------------- */
.shell {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--page-margin);
  padding-right: var(--page-margin);
}

.section { padding-top: var(--section-gap); }
.section--flush { padding-top: 0; }

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

.grid { display: grid; gap: 34px; }
@media (max-width: 989px) { .grid { gap: 12px; } }

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 989px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--6 { grid-template-columns: repeat(3, 1fr); }
  .grid--stack-mobile { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   5. Type roles
   -------------------------------------------------------------------------- */
.eyebrow {
  font: var(--weight-medium) 8.5px/1 var(--font-text);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--action-primary);
}
.eyebrow--gold { color: var(--accent-gold-on-dark); }
.eyebrow--muted { color: var(--text-secondary); }
.eyebrow--sm { font-size: 7.5px; letter-spacing: .18em; }

.display {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  letter-spacing: var(--track-display-xl);
  line-height: 1.06;
  margin: 0;
}
.display--xl { font-size: var(--size-display-xl); }
.display--lg { font-size: var(--size-display-lg); }
.display--md { font-size: 34px; }
.display--sm { font-size: 30px; }
@media (max-width: 989px) {
  .display--md { font-size: 26px; }
  .display--sm { font-size: 24px; }
}

.headline {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-heading-sm);
  margin: 0;
}

.lede {
  font: var(--weight-light) var(--size-body)/var(--leading-body) var(--font-text);
  color: var(--text-body);
  max-width: 58ch;
}

.prose { max-width: var(--measure); }
.prose p {
  font: var(--weight-light) 17px/1.75 var(--font-text);
  color: var(--text-body);
  margin: 0 0 18px;
}
.prose h2 {
  font: var(--weight-regular) 24px/1.25 var(--font-display);
  margin: 36px 0 12px;
}
.prose h3 {
  font: var(--weight-regular) 20px/1.3 var(--font-display);
  margin: 28px 0 10px;
}
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 20px; color: var(--text-body); }
.prose li { font: var(--weight-light) 16px/1.75 var(--font-text); margin-bottom: 6px; }
.prose blockquote {
  margin: 34px 0; padding: 0 0 0 24px;
  border-left: 2px solid var(--action-primary);
  font: var(--weight-light) italic 22px/1.45 var(--font-display);
  color: var(--action-primary);
}
.prose img { margin: 24px 0; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 989px) {
  .prose p { font-size: 15px; }
  .prose h2 { font-size: 20px; }
  .prose blockquote { font-size: 18px; padding-left: 18px; }
}

.quote {
  font: var(--weight-light) italic 19px/1.5 var(--font-display);
  color: var(--action-primary);
}

.caption {
  font: var(--weight-light) 10.5px/1.6 var(--font-text);
  color: var(--text-secondary);
}

.spec-line {
  font: var(--weight-regular) 10px/1.5 var(--font-text);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   6. Button
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 40px; padding: 0 18px;
  border-radius: var(--radius-0); border: 1px solid transparent;
  font-family: var(--font-text); font-weight: var(--weight-medium); font-size: 12px;
  line-height: 1; letter-spacing: var(--track-label);
  cursor: pointer; text-decoration: none; text-align: center;
  box-shadow: none; outline-offset: 2px;
  transition: background var(--duration-instant) var(--ease-standard),
              color var(--duration-instant) var(--ease-standard),
              border-color var(--duration-instant) var(--ease-standard);
}
.btn:hover { text-decoration: none; }

.btn--small  { min-height: 32px; padding: 0 14px; font-size: 11px; }
.btn--large  { min-height: 48px; padding: 0 22px; font-size: 14px; }
.btn--sticky { min-height: 56px; padding: 0 26px; font-size: 15px; }
.btn--full   { display: flex; width: 100%; }

.btn--primary {
  background: var(--action-primary); color: var(--text-inverse);
  border-color: var(--action-primary);
}
.btn--primary:hover { background: var(--action-hover); border-color: var(--action-hover); color: var(--text-inverse); }
.btn--primary:active { background: var(--action-pressed); border-color: var(--action-pressed); }

.btn--secondary {
  background: transparent; color: var(--action-primary);
  border-color: var(--action-primary);
}
.btn--secondary:hover { background: var(--action-subtle); color: var(--action-primary); }
.btn--secondary:active {
  background: var(--action-subtle-pressed);
  color: var(--action-pressed); border-color: var(--action-pressed);
}

.btn--tertiary {
  background: transparent; color: var(--action-primary);
  border-color: transparent; padding: 0 8px;
}
.btn--tertiary:hover { color: var(--action-hover); border-bottom-color: var(--action-hover); }
.btn--tertiary:active { background: var(--action-subtle); color: var(--action-pressed); }

.btn--destructive { background: transparent; color: var(--status-critical); border-color: var(--status-critical); }
.btn--destructive:hover { background: var(--status-critical-surface); color: var(--status-critical-text); }

/* On maroon and ink grounds */
.btn--on-dark.btn--secondary { border-color: var(--text-inverse); color: var(--text-inverse); }
.btn--on-dark.btn--secondary:hover { background: rgba(240,228,210,.12); color: var(--text-inverse); }
.btn--on-dark.btn--primary {
  background: var(--text-inverse); color: var(--surface-inverse); border-color: var(--text-inverse);
}
.btn--on-dark.btn--primary:hover { background: var(--neutral-0); color: var(--surface-inverse); }

.btn[disabled], .btn[aria-disabled="true"] {
  cursor: not-allowed;
  background: var(--neutral-200); color: var(--text-disabled); border-color: var(--neutral-200);
}
.btn--secondary[disabled], .btn--tertiary[disabled] {
  background: transparent; color: var(--text-disabled); border-color: var(--neutral-200);
}

.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn__label { opacity: .7; }
.btn__spinner { display: none; width: 11px; height: 11px; flex: none; border-radius: 50%; }
.btn.is-loading .btn__spinner {
  display: inline-block;
  border: 1.5px solid rgba(240,228,210,.4);
  border-top-color: var(--text-inverse);
  animation: mi-spin 700ms linear infinite;
}
.btn--secondary.is-loading .btn__spinner {
  border-color: var(--neutral-200); border-top-color: var(--action-primary);
}

/* --------------------------------------------------------------------------
   7. Icon button
   -------------------------------------------------------------------------- */
.icon-btn {
  position: relative; width: 44px; height: 44px; flex: none;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border-radius: var(--radius-0); cursor: pointer;
  background: transparent; border: 1px solid transparent;
  color: var(--text-primary); outline-offset: 2px;
  transition: background var(--duration-instant) var(--ease-standard),
              opacity var(--duration-instant) var(--ease-standard);
}
.icon-btn--outline { border-color: var(--border-default); }
.icon-btn--outline:hover, .icon-btn--plain:hover { background: var(--action-subtle); }
.icon-btn--filled { background: var(--action-primary); color: var(--text-inverse); }
.icon-btn--filled:hover { background: var(--action-hover); }
.icon-btn--inverse { color: var(--text-inverse); }
.icon-btn--inverse:hover { opacity: .78; }
.icon-btn--40 { width: 40px; height: 40px; }

.icon-btn__badge {
  position: absolute; top: 8px; right: 7px;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: var(--radius-full);
  background: var(--text-inverse); color: var(--action-primary);
  font: var(--weight-medium) 8.5px/15px var(--font-text); text-align: center;
}
.icon-btn__badge[hidden] { display: none; }

/* --------------------------------------------------------------------------
   8. Status badge / alert / empty state
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; border-radius: var(--radius-0);
  font: var(--weight-medium) 9.5px/1 var(--font-text);
  letter-spacing: var(--track-spec); text-transform: uppercase;
}
.badge--brand   { background: var(--action-primary); color: var(--text-inverse); }
.badge--success { background: var(--status-success-surface); color: var(--status-success-text); }
.badge--warning { background: var(--status-warning-surface); color: var(--status-warning-text); }
.badge--critical{ background: var(--status-critical-surface); color: var(--status-critical-text); }
.badge--neutral { background: var(--surface-sunken); color: var(--text-body); }

.alert {
  display: flex; gap: 11px; padding: 14px 16px;
  border-left: 2px solid var(--action-primary);
  background: var(--action-subtle);
}
.alert--info     { border-color: var(--action-primary); background: var(--action-subtle); }
.alert--success  { border-color: var(--status-success); background: var(--status-success-surface); }
.alert--warning  { border-color: var(--status-warning); background: var(--status-warning-surface); }
.alert--critical { border-color: var(--status-critical); background: var(--status-critical-surface); }
.alert__title { font: var(--weight-medium) 11.5px/1.4 var(--font-text); margin-bottom: 4px; }
.alert__body  { font: var(--weight-light) 11px/1.6 var(--font-text); color: var(--text-body); }

.empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 48px 24px; gap: 14px;
}
.empty-state__mark { width: 34px; height: 43px; object-fit: contain; opacity: .8; }
.empty-state__title { font: var(--weight-regular) 20px/1.25 var(--font-display); }
.empty-state__body {
  font: var(--weight-light) 12px/1.7 var(--font-text);
  color: var(--text-secondary); max-width: 42ch;
}

/* --------------------------------------------------------------------------
   9. Price
   -------------------------------------------------------------------------- */
.price { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.price__amount {
  font: var(--weight-medium) 13px/1.3 var(--font-text);
  letter-spacing: var(--track-label); color: var(--text-primary);
}
.price--large .price__amount { font-size: 20px; }
.price--xl .price__amount    { font-size: 26px; }
.price--small .price__amount { font-size: 12px; }
.price__was {
  font: var(--weight-light) 11px/1.3 var(--font-text);
  color: var(--text-secondary); text-decoration: line-through;
}
.price--muted .price__amount { color: var(--text-secondary); }
.price__note {
  display: block; width: 100%;
  font: var(--weight-light) 10px/1.5 var(--font-text); color: var(--text-secondary);
  margin-top: 5px;
}

/* --------------------------------------------------------------------------
   10. Product card — the most important component we own.
       4:5 image, no border, no shadow, no card background.
   -------------------------------------------------------------------------- */
.product-card { position: relative; display: block; }

/* The title carries the link; its ::after spans the card so the whole tile is
   clickable without nesting buttons inside an anchor. */
.product-card__link { text-decoration: none; color: inherit; }
.product-card__link:hover { text-decoration: none; color: var(--action-primary); }
.product-card__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }

.product-card__media {
  position: relative; background: var(--surface-sunken);
  aspect-ratio: 4 / 5; margin-bottom: 14px; overflow: hidden;
}
@media (max-width: 989px) { .product-card__media { border-radius: var(--radius-200); } }

.product-card__image {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.product-card__image--hover {
  opacity: 0; transition: opacity var(--duration-page) var(--ease-standard);
}
.product-card:hover .product-card__image--hover { opacity: 1; }

.product-card__badge { position: absolute; top: 10px; left: 10px; z-index: 2; }

.product-card__save {
  position: absolute; top: 4px; right: 4px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; padding: 0; cursor: pointer;
  color: var(--text-inverse); z-index: 2;
}
.product-card__save[aria-pressed="true"] svg { fill: var(--text-inverse); }

.product-card__soldout {
  position: absolute; inset: 0; background: rgba(250,246,239,.72);
  display: flex; align-items: center; justify-content: center;
}
.product-card__soldout span {
  background: var(--surface-page); color: var(--status-critical-text);
  font: var(--weight-medium) 9.5px/1 var(--font-text);
  letter-spacing: var(--track-spec); text-transform: uppercase; padding: 9px 13px;
}

.product-card__quick-add-form { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; }
.product-card__quick-add {
  position: absolute; bottom: 0; left: 0; right: 0; border: none; z-index: 2;
  display: block; background: var(--action-primary); color: var(--text-inverse);
  font: var(--weight-medium) 11px/1 var(--font-text);
  letter-spacing: var(--track-label); padding: 13px; text-align: center; cursor: pointer;
  text-decoration: none; width: 100%;
  opacity: 0; pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.product-card__quick-add-form .product-card__quick-add { position: static; }
.product-card:hover .product-card__quick-add { opacity: 1; pointer-events: auto; }
.product-card__quick-add:hover { color: var(--text-inverse); text-decoration: none; }
.product-card__quick-add:focus-visible { opacity: 1; pointer-events: auto; }
@media (max-width: 989px) {
  .product-card__quick-add, .product-card__quick-add-form { display: none; }
}

.product-card__name {
  font: var(--weight-regular) 16px/1.25 var(--font-display);
  color: var(--text-primary); margin-bottom: 5px;
}
.product-card__meta {
  font: var(--weight-regular) 10px/1.5 var(--font-text);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-secondary); margin-bottom: 8px;
}
.product-card--sold-out .product-card__name { color: var(--text-secondary); }
.product-card--sold-out .product-card__meta { color: var(--text-disabled); }

/* Skeleton, not a spinner, while a grid loads. */
.product-card-skeleton__media {
  aspect-ratio: 4 / 5; margin-bottom: 14px; overflow: hidden;
  background: linear-gradient(100deg,var(--border-subtle) 30%,#F6F1E7 50%,var(--border-subtle) 70%);
}
.product-card-skeleton__line { background: var(--border-subtle); }

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */
.field { display: block; }
.field__label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font: var(--weight-medium) 10.5px/1 var(--font-text);
  letter-spacing: .06em; margin-bottom: 8px;
}
.field__optional { font-weight: var(--weight-light); color: var(--text-secondary); }
.field__help {
  font: var(--weight-light) 10px/1.5 var(--font-text);
  color: var(--text-secondary); margin-top: 6px;
}
.field__error {
  font: var(--weight-regular) 10px/1.45 var(--font-text);
  color: var(--status-critical); margin-top: 6px;
}

.input, .textarea, .select {
  width: 100%; background: var(--surface-raised);
  border: 1px solid var(--border-default); border-radius: var(--radius-0);
  color: var(--text-primary);
  font: var(--weight-light) 13px/1.4 var(--font-text);
  padding: 13px 13px; outline-offset: 2px;
  transition: border-color var(--duration-instant) var(--ease-standard);
}
.input:hover, .textarea:hover, .select:hover { border-color: var(--text-secondary); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--action-primary); }
.input::placeholder, .textarea::placeholder { color: var(--text-disabled); }
.textarea { min-height: 96px; resize: vertical; }

.select {
  appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%236E6560' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 18px;
}

.checkbox { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }
.checkbox input {
  margin: 2px 0 0; width: 16px; height: 16px; flex: none;
  accent-color: var(--action-primary); cursor: pointer;
}
.checkbox__label { font: var(--weight-light) 12px/1.5 var(--font-text); color: var(--text-body); }
.checkbox__count { color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   12. Size picker
   -------------------------------------------------------------------------- */
.size-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.size-picker__option {
  min-width: 44px; height: 44px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border-default);
  border-radius: var(--radius-0); cursor: pointer;
  font: var(--weight-medium) 12px/1 var(--font-text); color: var(--text-primary);
  transition: border-color var(--duration-instant) var(--ease-standard),
              background var(--duration-instant) var(--ease-standard);
}
.size-picker__option:hover { border-color: var(--action-primary); }
.size-picker--sm .size-picker__option { min-width: 36px; height: 36px; font-size: 11px; }

.size-picker__input { position: absolute; opacity: 0; pointer-events: none; }
.size-picker__input:checked + .size-picker__option {
  border: 1.5px solid var(--action-primary);
  background: var(--action-subtle); color: var(--action-primary);
}
.size-picker__input:focus-visible + .size-picker__option {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}
.size-picker__input:disabled + .size-picker__option {
  color: var(--text-disabled); border-color: var(--neutral-200);
  cursor: not-allowed; background: var(--surface-page);
  text-decoration: line-through; text-decoration-color: var(--text-disabled);
}

/* --------------------------------------------------------------------------
   13. Quantity stepper
   -------------------------------------------------------------------------- */
.qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border-default); background: var(--surface-raised);
}
.qty__btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: var(--text-primary); padding: 0;
}
.qty__btn:hover { background: var(--action-subtle); }
.qty__btn:disabled { color: var(--text-disabled); cursor: not-allowed; }
.qty__input {
  width: 40px; height: 36px; text-align: center; border: none; background: none;
  font: var(--weight-medium) 12px/1 var(--font-text); color: var(--text-primary);
  -moz-appearance: textfield;
}
.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty__note {
  font: var(--weight-light) 10px/1.4 var(--font-text);
  color: var(--status-warning-text); margin-top: 6px;
}

/* --------------------------------------------------------------------------
   14. Filter chip
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 10px; border: 1px solid var(--action-primary);
  background: var(--action-subtle); color: var(--action-primary);
  font: var(--weight-medium) 10.5px/1 var(--font-text); border-radius: var(--radius-0);
  text-decoration: none;
}
.chip:hover { color: var(--action-pressed); text-decoration: none; }
.chip__remove { display: flex; align-items: center; }

/* --------------------------------------------------------------------------
   15. Accordion
   -------------------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--border-subtle); }
.accordion__item { border-bottom: 1px solid var(--border-subtle); }
.accordion__summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 0; cursor: pointer; list-style: none;
  font: var(--weight-medium) 12px/1.4 var(--font-text); color: var(--text-primary);
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__sign { color: var(--accent-gold); font: var(--weight-light) 17px/1 var(--font-text); flex: none; }
.accordion__item[open] .accordion__sign { transform: rotate(45deg); }
.accordion__body {
  padding: 0 0 18px; max-width: 52ch;
  font: var(--weight-light) 12.5px/1.75 var(--font-text); color: var(--text-body);
}
.accordion__body p { margin: 0 0 10px; }
.accordion__body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   16. Spec table
   -------------------------------------------------------------------------- */
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td {
  text-align: left; padding: 11px 10px;
  font: var(--weight-light) 11.5px/1.5 var(--font-text); color: var(--text-body);
  border-bottom: 1px solid var(--border-subtle);
}
.spec-table th {
  font-weight: var(--weight-medium); font-size: 9.5px;
  letter-spacing: var(--track-spec); text-transform: uppercase;
  color: var(--text-secondary); border-bottom-color: var(--action-primary);
}
.spec-table td:not(:first-child), .spec-table th:not(:first-child) { text-align: right; }
.spec-table tr.is-highlighted td {
  background: var(--action-subtle); color: var(--action-primary);
  font-weight: var(--weight-medium);
}

/* --------------------------------------------------------------------------
   17. Breadcrumbs, pagination, tabs
   -------------------------------------------------------------------------- */
.crumbs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font: var(--weight-light) 10.5px/1.4 var(--font-text); color: var(--text-secondary);
  padding-top: 22px;
}
.crumbs a { color: inherit; }
.crumbs__sep { color: var(--border-default); }
.crumbs__current { color: var(--text-primary); }
@media (max-width: 989px) { .crumbs { padding-top: 14px; } }

.pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding-top: 8px;
}
.pagination__summary { font: var(--weight-light) 10.5px/1.4 var(--font-text); color: var(--text-secondary); }
.pagination__list { display: flex; align-items: center; gap: 4px; }
.pagination__link {
  min-width: 36px; height: 36px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; color: var(--text-primary);
  font: var(--weight-light) 12px/1 var(--font-text); text-decoration: none;
}
.pagination__link:hover { border-color: var(--border-default); text-decoration: none; color: var(--text-primary); }
.pagination__link[aria-current="page"] {
  border-color: var(--action-primary); color: var(--action-primary);
  font-weight: var(--weight-medium);
}

.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-default); }
.tabs__tab {
  padding: 11px 16px; background: none; border: none; cursor: pointer;
  font: var(--weight-medium) 11px/1 var(--font-text); color: var(--text-secondary);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs__tab[aria-selected="true"] { color: var(--action-primary); border-bottom-color: var(--action-primary); }

.unit-toggle { display: inline-flex; border: 1px solid var(--border-default); }
.unit-toggle button {
  padding: 9px 16px; border: none; cursor: pointer; background: transparent;
  font: var(--weight-medium) 10px/1 var(--font-text);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary);
}
.unit-toggle button[aria-pressed="true"] { background: var(--action-primary); color: var(--text-inverse); }

/* --------------------------------------------------------------------------
   18. Section head
   -------------------------------------------------------------------------- */
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 20px; margin-bottom: 32px;
}
.section-head__eyebrow { margin-bottom: 10px; }
@media (max-width: 989px) {
  .section-head { margin-bottom: 20px; }
  .section-head__action { display: none; }
}

.page-head { padding-top: 52px; padding-bottom: 34px; }
.page-head__eyebrow { margin-bottom: 12px; }
.page-head .lede { margin-top: 16px; }
@media (max-width: 989px) {
  .page-head { padding-top: 32px; padding-bottom: 24px; }
  .page-head .lede { margin-top: 12px; }
}

/* --------------------------------------------------------------------------
   19. Header, announcement bar, mega menu
   -------------------------------------------------------------------------- */
.header-group { position: sticky; top: 0; z-index: 50; }

.announcement {
  background: var(--surface-inverse-deep); color: var(--text-inverse);
  text-align: center; padding: 9px 16px;
}
.announcement__item {
  font: var(--weight-medium) 8.5px/1.4 var(--font-text);
  letter-spacing: .2em; text-transform: uppercase; opacity: .92;
  display: none;
}
.announcement__item.is-active { display: block; }
@media (max-width: 989px) { .announcement__item { font-size: 7.5px; } }

.header { background: var(--surface-inverse); border-bottom: 1px solid rgba(240,228,210,.28); }
.header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--header-h);
}
.header__nav { display: flex; gap: 26px; flex: 1; }
.header__nav-item {
  background: none; border: none; padding: 5px 0; cursor: pointer;
  font: var(--weight-medium) 11px/1 var(--font-text);
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(240,228,210,.82); border-bottom: 1px solid transparent;
  text-decoration: none;
  transition: color var(--duration-instant) var(--ease-standard);
}
.header__nav-item:hover, .header__nav-item[aria-expanded="true"] {
  color: var(--text-inverse); border-bottom-color: var(--text-inverse); text-decoration: none;
}
.header__logo {
  background: none; border: none; cursor: pointer; padding: 0; flex: none;
  display: flex; align-items: center; gap: 12px; text-decoration: none;
}
.header__logo:hover { text-decoration: none; }
.header__logo img { width: 24px; height: 30px; object-fit: contain; }
.header__logo span {
  font: var(--weight-light) 18px/1 var(--font-display);
  color: var(--text-inverse); white-space: nowrap;
}
.header__actions { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: flex-end; }
@media (max-width: 989px) {
  .header__actions { flex: none; }
  .header__logo img { width: 20px; height: 25px; }
  .header__logo span { font-size: 15px; }
}

.mega {
  background: var(--surface-raised);
  border-top: 1px solid var(--surface-inverse-deep);
  box-shadow: var(--elevation-200);
  display: none;
}
.mega.is-open { display: block; }
.mega__inner {
  display: grid; grid-template-columns: repeat(3, 1fr) 1.3fr; gap: 34px;
  padding-top: 30px; padding-bottom: 30px;
}
.mega__col-title { margin-bottom: 13px; }
.mega__links { display: flex; flex-direction: column; gap: 8px; }
.mega__link {
  font: var(--weight-light) 12px/1.4 var(--font-text);
  color: var(--text-body); text-decoration: none;
}
.mega__link:hover { color: var(--action-primary); text-decoration: underline; text-underline-offset: 3px; }
.mega__editorial {
  background: var(--surface-sunken); display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
.mega__editorial:hover { text-decoration: none; color: inherit; }
.mega__editorial img { width: 100%; height: 108px; object-fit: cover; }
.mega__editorial-body { padding: 14px 16px 16px; }
.mega__editorial-title {
  font: var(--weight-light) 16px/1.25 var(--font-display);
  color: var(--action-primary); margin-bottom: 7px;
}
.mega__editorial-line {
  font: var(--weight-light) 10.5px/1.6 var(--font-text); color: var(--text-body);
}

/* --------------------------------------------------------------------------
   20. Overlays — scrim, drawers, sheets, modals
   -------------------------------------------------------------------------- */
.overlay { position: fixed; inset: 0; z-index: 95; pointer-events: none; }
.overlay.is-open { pointer-events: auto; }
.overlay__scrim {
  position: absolute; inset: 0; background: var(--scrim);
  opacity: 0; transition: opacity var(--duration-slow) var(--ease-standard);
}
.overlay.is-open .overlay__scrim { opacity: 1; }

.drawer {
  position: absolute; top: 0; bottom: 0; right: 0;
  width: var(--drawer-bag); max-width: 92%;
  background: var(--surface-raised); display: flex; flex-direction: column;
  box-shadow: var(--elevation-300); transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-standard);
}
.overlay.is-open .drawer { transform: translateX(0); }

.drawer--left {
  right: auto; left: 0; width: 86%; max-width: 380px;
  background: var(--surface-inverse); transform: translateX(-100%);
  overflow-y: auto;
}

.drawer__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 16px 18px 20px; border-bottom: 1px solid var(--border-subtle); flex: none;
}
.drawer__title { font: var(--weight-regular) 18px/1.2 var(--font-display); }
.drawer__body { flex: 1; overflow-y: auto; }
.drawer__foot { padding: 18px 20px; border-top: 1px solid var(--border-subtle); flex: none; }

.modal {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 26px; opacity: 0; transition: opacity var(--duration-base) var(--ease-standard);
}
.overlay.is-open .modal { opacity: 1; }
.modal__panel {
  position: relative; background: var(--surface-raised); width: 100%; max-width: 560px;
  box-shadow: var(--elevation-300); max-height: 86%; overflow-y: auto;
}
@media (max-width: 989px) {
  .modal { align-items: flex-end; padding: 0; }
  .modal__panel {
    max-width: none; border-radius: var(--radius-400) var(--radius-400) 0 0;
    transform: translateY(100%); transition: transform var(--duration-slow) var(--ease-standard);
  }
  .overlay.is-open .modal__panel { transform: translateY(0); }
}

.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--surface-raised);
  border-radius: var(--radius-400) var(--radius-400) 0 0;
  max-height: 80%; display: flex; flex-direction: column;
  box-shadow: var(--elevation-300); transform: translateY(100%);
  transition: transform var(--duration-slow) var(--ease-standard);
}
.overlay.is-open .sheet { transform: translateY(0); }
.sheet__head { padding: 18px 20px 12px; flex: none; }
.sheet__title { font: var(--weight-regular) 18px/1.2 var(--font-display); }
.sheet__subtitle {
  font: var(--weight-light) 10.5px/1.5 var(--font-text);
  color: var(--text-secondary); margin-top: 4px;
}
.sheet__body { padding: 0 20px 20px; overflow-y: auto; flex: 1; }
.sheet__foot { padding: 14px 20px 20px; border-top: 1px solid var(--border-subtle); flex: none; }

/* Mobile nav */
.mobile-nav__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 12px 14px 16px;
}
.mobile-nav__title { font: var(--weight-light) 18px/1 var(--font-display); color: var(--text-inverse); }
.mobile-nav__rule { height: 1px; background: rgba(240,228,210,.28); margin: 0 16px; }
.mobile-nav__body { padding: 8px 16px 20px; }
.mobile-nav__group { border-bottom: 1px solid rgba(240,228,210,.18); }
.mobile-nav__summary {
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 0; cursor: pointer; list-style: none;
}
.mobile-nav__summary::-webkit-details-marker { display: none; }
.mobile-nav__summary span:first-child {
  font: var(--weight-medium) 11px/1 var(--font-text);
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-inverse);
}
.mobile-nav__sign { font: var(--weight-light) 17px/1 var(--font-text); color: var(--accent-gold-on-dark); }
.mobile-nav__group[open] .mobile-nav__sign { transform: rotate(45deg); }
.mobile-nav__panel { padding: 12px 0 16px; }
.mobile-nav__col { margin-bottom: 14px; }
.mobile-nav__col-title { margin-bottom: 9px; }
.mobile-nav__links { display: flex; flex-direction: column; gap: 9px; }
.mobile-nav__link {
  font: var(--weight-light) 12px/1.4 var(--font-text);
  color: rgba(240,228,210,.86); text-decoration: none;
}
.mobile-nav__link:hover { color: var(--text-inverse); text-decoration: none; }
.mobile-nav__utility { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.mobile-nav__utility a {
  font: var(--weight-light) 12px/1.4 var(--font-text);
  color: rgba(240,228,210,.7); text-decoration: none;
}

/* Search overlay */
.search-overlay { z-index: 96; }
.search-overlay__panel {
  position: absolute; top: 0; left: 0; right: 0;
  background: var(--surface-raised); box-shadow: var(--elevation-300);
  transform: translateY(-100%); transition: transform var(--duration-slow) var(--ease-standard);
  max-height: 100%; overflow-y: auto;
}
.overlay.is-open .search-overlay__panel { transform: translateY(0); }
.search-overlay__form { display: flex; align-items: center; gap: 12px; padding: 22px 0; }
.search-overlay__input {
  flex: 1; min-width: 0; background: none; border: none;
  border-bottom: 1px solid var(--border-default); padding: 10px 0;
  font: var(--weight-light) 24px/1.3 var(--font-display); color: var(--text-primary);
}
.search-overlay__input:focus { border-bottom-color: var(--action-primary); outline: none; }
.search-overlay__input::placeholder { color: var(--text-disabled); }
.search-overlay__suggestions { display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 24px; }
.search-overlay__results { padding-bottom: 30px; }

/* Toast */
.toast-region {
  position: fixed; left: 24px; bottom: 24px; z-index: 130; max-width: 340px;
  display: flex; flex-direction: column; gap: 8px;
}
@media (max-width: 989px) {
  .toast-region { left: 50%; transform: translateX(-50%); width: calc(100% - 32px); }
}
.toast {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--surface-inverse-deep); color: var(--text-inverse);
  padding: 14px 16px; box-shadow: var(--elevation-300);
  font: var(--weight-light) 12px/1.5 var(--font-text);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast__action {
  background: none; border: none; cursor: pointer; flex: none; padding: 0;
  font: var(--weight-medium) 10px/1 var(--font-text);
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-gold-on-dark);
}

/* --------------------------------------------------------------------------
   21. Footer
   -------------------------------------------------------------------------- */
.footer {
  position: relative; overflow: hidden;
  background: var(--surface-inverse-deep); color: var(--text-inverse);
  margin-top: var(--section-gap);
}
.footer__texture { position: absolute; inset: 0; background-size: 360px; background-position: center; opacity: .22; }
.footer__wash { position: absolute; inset: 0; background: linear-gradient(120deg,rgba(69,8,15,.82),rgba(42,10,16,.95)); }
.footer__inner { position: relative; padding-top: 56px; padding-bottom: 40px; }
.footer__top {
  display: grid; grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 40px; margin-bottom: 44px;
}
.footer__mark { width: 34px; height: 43px; object-fit: contain; margin-bottom: 16px; }
.footer__line {
  font: var(--weight-light) 22px/1.25 var(--font-display);
  margin-bottom: 12px; max-width: 22ch;
}
.footer__blurb {
  font: var(--weight-light) 10.5px/1.7 var(--font-text);
  color: rgba(240,228,210,.78); max-width: 38ch; margin-bottom: 20px;
}
.footer__social { display: flex; gap: 18px; }
.footer__social a {
  font: var(--weight-medium) 8px/1 var(--font-text);
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(240,228,210,.6); text-decoration: none;
}
.footer__social a:hover { color: var(--text-inverse); text-decoration: none; }
.footer__col-title { margin-bottom: 14px; }
.footer__links { display: flex; flex-direction: column; gap: 9px; }
.footer__links a {
  font: var(--weight-light) 11px/1.4 var(--font-text);
  color: rgba(240,228,210,.86); text-decoration: none;
}
.footer__links a:hover { color: var(--text-inverse); text-decoration: none; }

.footer__signup {
  padding: 28px 0; margin-bottom: 22px;
  border-top: 1px solid rgba(240,228,210,.28);
  border-bottom: 1px solid rgba(240,228,210,.28);
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
}
.footer__signup-title { font: var(--weight-light) 19px/1.3 var(--font-display); margin-bottom: 6px; }
.footer__signup-note { font: var(--weight-light) 10.5px/1.6 var(--font-text); color: rgba(240,228,210,.72); }
.footer__signup-form { display: flex; gap: 10px; }
.footer__signup-form input {
  flex: 1; min-width: 0; background: transparent;
  border: 1px solid rgba(240,228,210,.4); color: var(--text-inverse);
  padding: 12px 13px; font: var(--weight-light) 12px/1.4 var(--font-text); outline-offset: 2px;
}
.footer__signup-form input::placeholder { color: rgba(240,228,210,.5); }
.footer__signup-form button {
  background: var(--text-inverse); color: var(--surface-inverse); border: none;
  padding: 0 18px; cursor: pointer;
  font: var(--weight-medium) 11px/1 var(--font-text);
  letter-spacing: var(--track-label); white-space: nowrap;
}
.footer__signup-success { font: var(--weight-light) 12px/1.6 var(--font-text); color: var(--accent-gold-on-dark); }

.footer__base {
  display: flex; flex-wrap: wrap; gap: 24px;
  justify-content: space-between; align-items: center;
}
.footer__base, .footer__base a {
  font: var(--weight-light) 10px/1.6 var(--font-text); color: rgba(240,228,210,.6);
}
.footer__base a { text-decoration: none; }
.footer__base a:hover { color: var(--text-inverse); text-decoration: none; }
.footer__legal { display: flex; gap: 16px; }

@media (max-width: 989px) {
  .footer__inner { padding-top: 40px; padding-bottom: 28px; }
  .footer__top { grid-template-columns: 1fr; gap: 30px; margin-bottom: 32px; }
  .footer__line { font-size: 19px; }
  .footer__signup { grid-template-columns: 1fr; gap: 16px; padding: 24px 0; }
  .footer__signup-title { font-size: 17px; }
  .footer__base { gap: 10px; }
}

/* --------------------------------------------------------------------------
   22. Home sections
   -------------------------------------------------------------------------- */
.hero { position: relative; height: 640px; overflow: hidden; background: var(--surface-inverse-deep); }
.hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__wash {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,rgba(42,10,16,.88) 0%,rgba(42,10,16,.52) 46%,rgba(42,10,16,.12) 100%);
}
.hero__inner {
  position: relative; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
}
.hero__content { max-width: 30ch; color: var(--text-inverse); }
.hero__eyebrow { letter-spacing: .26em; margin-bottom: 20px; }
.hero__title { margin-bottom: 20px; }
.hero__body {
  font: var(--weight-light) var(--size-body)/var(--leading-body) var(--font-text);
  color: rgba(240,228,210,.9); margin-bottom: 30px; max-width: 40ch;
}
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 989px) {
  .hero { height: 520px; }
  .hero__wash { background: linear-gradient(180deg,rgba(42,10,16,.25) 0%,rgba(42,10,16,.88) 68%); }
  .hero__inner { justify-content: flex-end; padding-bottom: 36px; }
  .hero__content { max-width: 100%; }
  .hero__eyebrow { margin-bottom: 14px; }
  .hero__title { margin-bottom: 14px; }
  .hero__body { font-size: 14px; margin-bottom: 22px; }
}

.values { background: var(--surface-sunken); }
.values__inner {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px;
  padding-top: 30px; padding-bottom: 30px;
}
.values__item { display: flex; gap: 12px; align-items: flex-start; }
.values__item svg { color: var(--action-primary); flex: none; }
.values__title { font: var(--weight-medium) 11px/1.4 var(--font-text); margin-bottom: 3px; }
.values__note { font: var(--weight-light) 10px/1.5 var(--font-text); color: var(--text-secondary); }
@media (max-width: 989px) {
  .values__inner { grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 26px; padding-bottom: 26px; }
}

.collection-tile {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 5; background: var(--surface-sunken); text-decoration: none;
}
.collection-tile:hover { text-decoration: none; }
.collection-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.collection-tile__wash {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,rgba(42,10,16,0) 38%,rgba(42,10,16,.86) 100%);
}
.collection-tile__body {
  position: absolute; left: 20px; right: 20px; bottom: 20px; color: var(--text-inverse);
}
.collection-tile__season { display: block; margin-bottom: 8px; }
.collection-tile__name {
  display: block; font: var(--weight-light) 26px/1.1 var(--font-display); margin-bottom: 6px;
}
.collection-tile__line {
  display: block; font: var(--weight-light) 10.5px/1.55 var(--font-text);
  color: rgba(240,228,210,.84);
}
@media (max-width: 989px) { .collection-tile { aspect-ratio: 16 / 9; } }

.band { display: grid; grid-template-columns: 1fr 1fr; }
.band__body {
  background: var(--surface-sunken); padding: 56px 48px;
  display: flex; flex-direction: column; justify-content: center;
}
.band__quote {
  font: var(--weight-light) italic 20px/1.4 var(--font-display);
  color: var(--action-primary); margin-bottom: 16px;
}
.band__text {
  font: var(--weight-light) var(--size-body)/var(--leading-body) var(--font-text);
  color: var(--text-body); margin-bottom: 24px; max-width: 42ch;
}
.band__media { width: 100%; height: 100%; object-fit: cover; }
.band .btn { align-self: flex-start; }
@media (max-width: 989px) {
  .band { grid-template-columns: 1fr; }
  .band__body { order: 2; padding: 32px 24px; }
  .band__media { order: 1; height: 240px; }
  .band__quote { font-size: 17px; }
  .band__text { font-size: 14px; }
}

.journal-card { display: block; text-decoration: none; color: inherit; }
.journal-card:hover { text-decoration: none; color: inherit; }
.journal-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 14px; }
.journal-card__meta { margin-bottom: 8px; }
.journal-card__title {
  font: var(--weight-regular) 19px/1.25 var(--font-display);
  color: var(--text-primary); margin-bottom: 7px;
}
.journal-card__standfirst {
  font: var(--weight-light) 11.5px/1.65 var(--font-text); color: var(--text-secondary);
}
.journal-card__date {
  font: var(--weight-light) 10px/1.5 var(--font-text); color: var(--text-disabled); margin-top: 8px;
}
@media (max-width: 989px) { .journal-card__title { font-size: 17px; } }

.press-strip { border-top: 1px solid var(--accent-gold); padding-top: 30px; }
.press-quote__text {
  font: var(--weight-light) italic var(--size-body)/1.5 var(--font-display);
  color: var(--action-primary); margin-bottom: 12px;
}

.instagram-tile {
  position: relative; aspect-ratio: 1; background: var(--surface-sunken); overflow: hidden;
}
.instagram-tile img { width: 100%; height: 100%; object-fit: cover; }
.instagram-grid { gap: 10px; }
@media (max-width: 989px) { .instagram-grid { gap: 6px; } }

/* --------------------------------------------------------------------------
   23. Collection page
   -------------------------------------------------------------------------- */
.collection-banner {
  position: relative; height: 260px; overflow: hidden; background: var(--surface-inverse-deep);
}
.collection-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.collection-banner__wash {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,rgba(42,10,16,.86) 0%,rgba(42,10,16,.35) 100%);
}
.collection-banner__body {
  position: relative; height: 100%; display: flex; flex-direction: column;
  justify-content: center; padding: 0 40px; color: var(--text-inverse);
}
.collection-banner__eyebrow { margin-bottom: 12px; }
.collection-banner__line {
  font: var(--weight-light) 13px/1.6 var(--font-text);
  color: rgba(240,228,210,.86); margin-top: 10px; max-width: 46ch;
}
@media (max-width: 989px) {
  .collection-banner { height: 180px; }
  .collection-banner__body { padding: 0 20px; }
  .collection-banner__line { font-size: 12px; }
}

.collection-toolbar {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; margin-bottom: 28px; flex-wrap: wrap;
}
.collection-toolbar__count {
  font: var(--weight-light) 12px/1.6 var(--font-text); color: var(--text-secondary); margin-top: 8px;
}
.collection-toolbar__controls { display: flex; gap: 10px; align-items: center; }
.collection-toolbar__sort-label {
  font: var(--weight-light) 10.5px/1 var(--font-text); color: var(--text-secondary);
}
.collection-toolbar .select { width: 190px; }
@media (max-width: 989px) {
  .collection-toolbar { margin-bottom: 18px; }
  .collection-toolbar .select { width: 150px; }
}

.collection-layout {
  display: grid; grid-template-columns: var(--filter-rail) 1fr; gap: 44px; align-items: start;
}
@media (max-width: 989px) { .collection-layout { grid-template-columns: 1fr; gap: 0; } }

.facets { position: sticky; top: 120px; }
.facets__head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 11px; border-bottom: 1px solid var(--action-primary); margin-bottom: 18px;
}
.facets__group { margin-bottom: 26px; }
.facets__group-title {
  font: var(--weight-medium) 10px/1 var(--font-text);
  letter-spacing: .06em; margin-bottom: 12px;
}
.facets__options { display: flex; flex-direction: column; gap: 10px; }
.facets__price-row {
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
}
.facets__price-row .input { padding: 9px 10px; font-size: 12px; }

.active-facets {
  display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; align-items: center;
}

.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-bottom: 40px; }
@media (max-width: 989px) { .product-grid { grid-template-columns: 1fr 1fr; gap: 12px; } }

.mobile-filter-bar { display: none; }
@media (max-width: 989px) { .mobile-filter-bar { display: block; } }

/* --------------------------------------------------------------------------
   24. Product page
   -------------------------------------------------------------------------- */
.product-layout {
  display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: start;
  padding-top: 28px;
}
@media (max-width: 989px) { .product-layout { grid-template-columns: 1fr; gap: 22px; padding-top: 16px; } }

.product-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.product-gallery__item { position: relative; }
.product-gallery__item--lead { grid-column: span 2; }
.product-gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.product-gallery__badge { position: absolute; top: 14px; left: 14px; }
@media (max-width: 989px) { .product-gallery { display: none; } }

.product-gallery-mobile { display: none; }
@media (max-width: 989px) { .product-gallery-mobile { display: block; } }
.product-gallery-mobile__stage {
  position: relative; aspect-ratio: 3 / 4; background: var(--surface-sunken); overflow: hidden;
}
.product-gallery-mobile__stage img {
  width: 100%; height: 100%; object-fit: cover; display: none;
}
.product-gallery-mobile__stage img.is-active { display: block; }
.product-gallery-mobile__dots {
  position: absolute; bottom: 10px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 5px;
}
.product-gallery-mobile__dot {
  width: 5px; height: 5px; border-radius: 50%; border: none; padding: 0;
  background: rgba(240,228,210,.45); cursor: pointer;
}
.product-gallery-mobile__dot.is-active { background: var(--text-inverse); }
.product-gallery-mobile__thumbs { display: flex; gap: 6px; margin-top: 6px; overflow-x: auto; }
.product-gallery-mobile__thumb {
  width: 54px; height: 68px; flex: none; padding: 0; cursor: pointer;
  border: 1px solid var(--border-default); background: none;
}
.product-gallery-mobile__thumb.is-active { border: 1.5px solid var(--action-primary); }
.product-gallery-mobile__thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-info { position: sticky; top: 120px; }
@media (max-width: 989px) { .product-info { position: static; } }
.product-info__eyebrow { margin-bottom: 11px; }
.product-info__title { margin-bottom: 9px; }
.product-info__line {
  font: var(--weight-light) italic 18px/1.4 var(--font-display);
  color: var(--action-primary); margin-bottom: 18px;
}
.product-info__body {
  font: var(--weight-light) var(--size-body)/var(--leading-body) var(--font-text);
  color: var(--text-body); margin-bottom: 24px; max-width: 48ch;
}
.product-info__size-head {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px;
}
.product-info__size-label { font: var(--weight-medium) 10.5px/1 var(--font-text); letter-spacing: .06em; }
.product-info__actions { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 26px; }
.product-info__assurances {
  display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 26px;
}
.product-info__assurance {
  display: flex; align-items: center; gap: 7px;
  font: var(--weight-light) 10px/1.4 var(--font-text); color: var(--text-secondary);
}
.product-info__assurance svg { color: var(--accent-gold); flex: none; }
@media (max-width: 989px) {
  .product-info__line { font-size: 14px; margin-bottom: 14px; }
  .product-info__body { font-size: 14px; }
}

.maker-strip { background: var(--surface-sunken); display: grid; grid-template-columns: 1fr 1.2fr; }
.maker-strip img { width: 100%; height: 100%; object-fit: cover; }
.maker-strip__body { padding: 44px; }
.maker-strip__quote {
  font: var(--weight-light) italic 22px/1.35 var(--font-display);
  color: var(--action-primary); margin: 14px 0;
}
.maker-strip__text {
  font: var(--weight-light) 15px/1.7 var(--font-text);
  color: var(--text-body); margin-bottom: 20px; max-width: 46ch;
}
@media (max-width: 989px) {
  .maker-strip { grid-template-columns: 1fr; }
  .maker-strip img { height: 200px; }
  .maker-strip__body { padding: 26px 22px; }
  .maker-strip__quote { font-size: 17px; }
  .maker-strip__text { font-size: 13px; }
}

/* Size guide sheet rows */
.size-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 14px; width: 100%; cursor: pointer;
  background: transparent; border: 1px solid var(--border-default);
}
.size-row.is-selected { background: var(--action-subtle); border: 1.5px solid var(--action-primary); }
.size-row[disabled] {
  background: var(--surface-page); border-color: var(--neutral-200);
  color: var(--text-disabled); cursor: not-allowed;
}
.size-row__label { font: var(--weight-medium) 12px/1 var(--font-text); }
.size-row__note { font: var(--weight-light) 10px/1 var(--font-text); color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   25. Cart
   -------------------------------------------------------------------------- */
.cart-layout {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: start;
}
@media (max-width: 989px) { .cart-layout { grid-template-columns: 1fr; gap: 30px; } }

.cart-lines { border-top: 1px solid var(--action-primary); }
.cart-line {
  display: flex; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--border-subtle);
}
.cart-line__image { width: 108px; height: 135px; object-fit: cover; flex: none; }
.cart-line__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cart-line__top { display: flex; justify-content: space-between; gap: 12px; }
.cart-line__name {
  font: var(--weight-regular) 17px/1.25 var(--font-display); color: var(--text-primary);
  text-decoration: none;
}
.cart-line__name:hover { color: var(--action-primary); text-decoration: none; }
.cart-line__spec { margin: 5px 0 0; }
.cart-line__variant {
  font: var(--weight-light) 11px/1.6 var(--font-text); color: var(--text-secondary); margin-top: 4px;
}
.cart-line__foot {
  margin-top: auto; padding-top: 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
.cart-line__actions { display: flex; gap: 6px; }
@media (max-width: 989px) {
  .cart-line { gap: 14px; padding: 18px 0; }
  .cart-line__image { width: 78px; height: 98px; }
  .cart-line__name { font-size: 15px; }
}

.cart-summary {
  position: sticky; top: 120px;
  border: 1px solid var(--neutral-200); background: var(--surface-raised); padding: 24px;
}
@media (max-width: 989px) { .cart-summary { position: static; padding: 20px; } }
.cart-summary__title { margin-bottom: 16px; }
.summary-row {
  display: flex; justify-content: space-between;
  font: var(--weight-light) 11px/1.9 var(--font-text); color: var(--text-body);
}
.summary-row__free { color: var(--status-success); }
.summary-divider { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.summary-divider__rule { flex: 1; height: 1px; background: var(--border-default); }
.summary-divider__bead { width: 5px; height: 5px; border-radius: 50%; background: var(--action-primary); }
.cart-summary__total {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px;
}
.cart-summary__total-label { font: var(--weight-medium) 12px/1 var(--font-text); }
.cart-summary__assurances { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
.cart-summary__assurance {
  display: flex; align-items: center; gap: 9px;
  font: var(--weight-light) 10px/1.4 var(--font-text); color: var(--text-secondary);
}
.cart-summary__assurance svg { color: var(--accent-gold); flex: none; }

.cart-drawer-line {
  padding: 16px 20px; border-bottom: 1px solid var(--border-subtle);
  display: flex; gap: 14px;
}
.cart-drawer-line img { width: 60px; height: 75px; object-fit: cover; flex: none; }
.cart-drawer-line__main { flex: 1; min-width: 0; }
.cart-drawer-line__name { font: var(--weight-regular) 14px/1.25 var(--font-display); }
.cart-drawer-line__meta {
  font: var(--weight-light) 10px/1.5 var(--font-text);
  color: var(--text-secondary); margin: 3px 0 8px;
}
.cart-drawer-line__foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}

.gift-note { margin-top: 22px; }
.gift-note__field { margin-top: 12px; max-width: 420px; }

/* --------------------------------------------------------------------------
   26. Editorial / info pages
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; }
@media (max-width: 989px) { .split { grid-template-columns: 1fr; gap: 20px; } }

.value-block { border-top: 2px solid var(--action-primary); padding-top: 16px; }
.value-block__number {
  font: var(--weight-light) 26px/1 var(--font-display);
  color: var(--action-primary); margin-bottom: 10px;
}
.value-block__title { font: var(--weight-regular) 19px/1.3 var(--font-display); margin-bottom: 9px; }
.value-block__body {
  font: var(--weight-light) 14px/1.7 var(--font-text); color: var(--text-body); max-width: 42ch;
}

.timeline { border-top: 1px solid var(--action-primary); }
.timeline__row {
  display: grid; grid-template-columns: 140px 1fr; gap: 34px;
  padding: 22px 0; border-bottom: 1px solid var(--border-subtle);
}
.timeline__when { padding-top: 4px; }
.timeline__title { font: var(--weight-regular) 18px/1.3 var(--font-display); margin-bottom: 7px; }
.timeline__body {
  font: var(--weight-light) 13.5px/1.75 var(--font-text); color: var(--text-body); max-width: 58ch;
}
@media (max-width: 989px) {
  .timeline__row { grid-template-columns: 1fr; gap: 8px; padding: 18px 0; }
  .timeline__title { font-size: 16px; }
  .timeline__body { font-size: 12.5px; }
}

.maker-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 16px; }
.maker-card__role { margin-bottom: 8px; }
.maker-card__name { font: var(--weight-regular) 20px/1.25 var(--font-display); margin-bottom: 8px; }
.maker-card__line {
  font: var(--weight-light) 12px/1.7 var(--font-text); color: var(--text-body); margin-bottom: 8px;
}
.maker-card__years { font: var(--weight-light) 10px/1.5 var(--font-text); color: var(--text-secondary); }

.ink-panel {
  position: relative; overflow: hidden;
  background: var(--surface-inverse-deep); padding: 56px 48px;
}
.ink-panel__texture { position: absolute; inset: 0; background-size: 320px; background-position: center; opacity: .22; }
.ink-panel__wash { position: absolute; inset: 0; background: linear-gradient(120deg,rgba(69,8,15,.84),rgba(42,10,16,.95)); }
.ink-panel__body { position: relative; color: var(--text-inverse); max-width: 46ch; }
.ink-panel__text {
  font: var(--weight-light) 14px/1.7 var(--font-text);
  color: rgba(240,228,210,.86); margin: 16px 0 24px;
}
.ink-panel__actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 989px) { .ink-panel { padding: 36px 24px; } }

.press-row {
  display: block; padding: 28px 0;
  border-top: 1px solid var(--border-default); text-decoration: none;
}
.press-row:hover { text-decoration: none; }
.press-row__foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.press-row__foot svg { color: var(--accent-gold); }

.info-layout { display: grid; grid-template-columns: 220px 1fr; gap: 60px; align-items: start; }
@media (max-width: 989px) { .info-layout { grid-template-columns: 1fr; gap: 24px; } }
.info-rail { position: sticky; top: 120px; }
@media (max-width: 989px) { .info-rail { position: static; } }
.info-rail__title { margin-bottom: 14px; }
.info-rail__links { display: flex; flex-direction: column; gap: 10px; }
.info-rail__links a {
  font: var(--weight-light) 12px/1.4 var(--font-text);
  color: var(--text-body); text-decoration: none;
}
.info-rail__links a:hover { color: var(--action-primary); text-decoration: underline; text-underline-offset: 3px; }

.policy-block { padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--border-subtle); }
.policy-block:last-child { border-bottom: none; }
.policy-block__title { font: var(--weight-regular) 20px/1.3 var(--font-display); margin-bottom: 10px; }
.policy-block__body {
  font: var(--weight-light) 14px/1.75 var(--font-text); color: var(--text-body); max-width: 62ch;
}

.faq-group { margin-bottom: 40px; }
.faq-group__title {
  font: var(--weight-regular) 22px/1.3 var(--font-display); margin-bottom: 14px;
}

.contact-card {
  border-top: 1px solid var(--action-primary); padding-top: 18px;
}
.contact-card__label { margin-bottom: 10px; }
.contact-card__value {
  font: var(--weight-regular) 18px/1.4 var(--font-display);
  color: var(--text-primary); white-space: pre-line; margin-bottom: 8px;
}
.contact-card__value a { color: inherit; }
.contact-card__note { font: var(--weight-light) 11px/1.6 var(--font-text); color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   27. Account, track order, gift card
   -------------------------------------------------------------------------- */
.auth-layout { max-width: 420px; margin: 0 auto; padding-top: 52px; }
.auth-layout--wide { max-width: 560px; }
.auth-form { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.auth-alt {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-subtle);
  font: var(--weight-light) 11.5px/1.7 var(--font-text); color: var(--text-secondary);
}

.account-layout { display: grid; grid-template-columns: 200px 1fr; gap: 48px; align-items: start; }
@media (max-width: 989px) { .account-layout { grid-template-columns: 1fr; gap: 24px; } }
.account-nav { display: flex; flex-direction: column; gap: 2px; }
.account-nav a {
  padding: 11px 12px; font: var(--weight-light) 12px/1.4 var(--font-text);
  color: var(--text-body); text-decoration: none; border-left: 2px solid transparent;
}
.account-nav a:hover { background: var(--action-subtle); text-decoration: none; }
.account-nav a[aria-current="page"] {
  border-left-color: var(--action-primary); color: var(--action-primary);
  font-weight: var(--weight-medium); background: var(--action-subtle);
}
@media (max-width: 989px) {
  .account-nav { flex-direction: row; overflow-x: auto; gap: 4px; }
  .account-nav a { border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; }
  .account-nav a[aria-current="page"] { border-bottom-color: var(--action-primary); }
}

.order-table { width: 100%; border-collapse: collapse; }
.order-table th, .order-table td {
  text-align: left; padding: 14px 10px; border-bottom: 1px solid var(--border-subtle);
  font: var(--weight-light) 12px/1.5 var(--font-text); color: var(--text-body);
}
.order-table th {
  font-weight: var(--weight-medium); font-size: 9.5px;
  letter-spacing: var(--track-spec); text-transform: uppercase;
  color: var(--text-secondary); border-bottom-color: var(--action-primary);
}
.order-table td:last-child, .order-table th:last-child { text-align: right; }

.track-timeline { border-left: 1px solid var(--border-default); padding-left: 24px; margin-left: 6px; }
.track-event { position: relative; padding-bottom: 26px; }
.track-event::before {
  content: ''; position: absolute; left: -29px; top: 4px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface-page); border: 1.5px solid var(--border-default);
}
.track-event.is-done::before { background: var(--action-primary); border-color: var(--action-primary); }
.track-event__title { font: var(--weight-medium) 12px/1.4 var(--font-text); margin-bottom: 4px; }
.track-event__when { font: var(--weight-light) 10.5px/1.5 var(--font-text); color: var(--text-secondary); }

.giftcard-preview {
  position: relative; background: var(--surface-inverse-deep);
  aspect-ratio: 4 / 5; overflow: hidden;
}
.giftcard-preview__texture { position: absolute; inset: 0; background-size: 280px; background-position: center; opacity: .3; }
.giftcard-preview__wash { position: absolute; inset: 0; background: linear-gradient(120deg,rgba(69,8,15,.8),rgba(42,10,16,.94)); }
.giftcard-preview__body {
  position: relative; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 20px;
  color: var(--text-inverse); padding: 30px; text-align: center;
}
.giftcard-preview__mark { width: 46px; height: 58px; object-fit: contain; }
.giftcard-preview__name { font: var(--weight-light) 34px/1.15 var(--font-display); }
.giftcard-preview__rule { height: 1px; width: 60px; background: var(--accent-gold-on-dark); }
.giftcard-preview__amount { font: var(--weight-medium) 40px/1 var(--font-text); }
@media (max-width: 989px) {
  .giftcard-preview { aspect-ratio: 4 / 3; }
  .giftcard-preview__name { font-size: 26px; }
  .giftcard-preview__amount { font-size: 30px; }
}

.amount-picker { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.amount-picker__option {
  padding: 13px 16px; cursor: pointer;
  font: var(--weight-medium) 12px/1 var(--font-text);
  border: 1px solid var(--border-default); background: transparent; color: var(--text-primary);
}
.amount-picker__input { position: absolute; opacity: 0; pointer-events: none; }
.amount-picker__input:checked + .amount-picker__option {
  border: 1.5px solid var(--action-primary);
  background: var(--action-subtle); color: var(--action-primary);
}

/* --------------------------------------------------------------------------
   28. Utilities
   -------------------------------------------------------------------------- */
.u-mt-0  { margin-top: 0; }
.u-mt-100{ margin-top: var(--space-100); }
.u-mt-200{ margin-top: var(--space-200); }
.u-mt-300{ margin-top: var(--space-300); }
.u-mt-400{ margin-top: var(--space-400); }
.u-mb-100{ margin-bottom: var(--space-100); }
.u-mb-200{ margin-bottom: var(--space-200); }
.u-mb-300{ margin-bottom: var(--space-300); }
.u-mb-400{ margin-bottom: var(--space-400); }
.u-flex  { display: flex; }
.u-gap-100 { gap: var(--space-100); }
.u-gap-150 { gap: var(--space-150); }
.u-gap-200 { gap: var(--space-200); }
.u-wrap  { flex-wrap: wrap; }
.u-center{ text-align: center; }
.u-hide-desktop { display: none; }
@media (max-width: 989px) {
  .u-hide-mobile { display: none !important; }
  .u-hide-desktop { display: revert; }
}