/* =============================================================================
   Gift For Him — design system
   Warm, quiet, editorial. Paper ground, ink text, one tan accent borrowed from
   the Natural felt colourway. Light-only by design: a storefront should look
   the same for everyone, and product colour accuracy matters more than
   matching the OS theme.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Surfaces */
  --paper:        #FAF8F5;
  --paper-sunk:   #F2EDE6;
  --paper-raised: #FFFFFF;
  --paper-deep:   #22242A;

  /* Ink */
  --ink:          #1E2024;
  --ink-soft:     #55585F;
  --ink-mute:     #8B8F97;
  --ink-invert:   #FBF9F6;

  /* Line */
  --line:         #E5DFD6;
  --line-strong:  #D3CBBF;

  /* Accent — the Natural felt tone, darkened for text contrast */
  --accent:       #A9784E;
  --accent-deep:  #8A6039;
  --accent-wash:  #F3EADF;

  /* Feedback */
  --good:         #2F6B4F;
  --warn:         #8A5A16;

  /* Type */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Scale — fluid, clamped so it never runs away on ultrawide */
  --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
  --step-0:  clamp(1rem, 0.96rem + 0.18vw, 1.09rem);
  --step-1:  clamp(1.19rem, 1.12rem + 0.34vw, 1.4rem);
  --step-2:  clamp(1.42rem, 1.29rem + 0.62vw, 1.8rem);
  --step-3:  clamp(1.69rem, 1.47rem + 1.05vw, 2.32rem);
  --step-4:  clamp(2.01rem, 1.66rem + 1.68vw, 2.99rem);
  --step-5:  clamp(2.4rem, 1.85rem + 2.6vw, 3.85rem);

  /* Space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* Shape */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Elevation — soft and warm, never grey-blue */
  --shadow-sm: 0 1px 2px rgba(58, 44, 28, 0.06), 0 2px 6px rgba(58, 44, 28, 0.05);
  --shadow-md: 0 2px 6px rgba(58, 44, 28, 0.07), 0 12px 28px rgba(58, 44, 28, 0.08);
  --shadow-lg: 0 4px 12px rgba(58, 44, 28, 0.08), 0 24px 56px rgba(58, 44, 28, 0.11);

  /* Height reserved for the sticky mobile buy bar. */
  --buybar-h: 5rem;

  --wrap: 1180px;
  --wrap-narrow: 720px;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Offset for the sticky header when jumping to an anchor */
  scroll-padding-top: 90px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

:where(h1, h2, h3, h4) {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-variation-settings: 'SOFT' 20, 'WONK' 0, 'opsz' 40;
  text-wrap: balance;
}
p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--ink-invert);
  padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }

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

/* --- Layout --------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--sp-9); }
.section--tight { padding-block: var(--sp-8); }
.section--sunk { background: var(--paper-sunk); }
.section--dark { background: var(--paper-deep); color: var(--ink-invert); }

.eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: var(--sp-4);
}
.section--dark .eyebrow { color: #D6AE85; }

.lede {
  font-size: var(--step-1);
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 56ch;
}
.section--dark .lede { color: #C9CBD1; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--ink-invert);
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.95rem 1.75rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  font-size: var(--step-0);
  font-weight: 550;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, opacity 0.18s ease;
  box-shadow: var(--shadow-sm);
}
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active:not(:disabled) { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.btn--accent { --btn-bg: var(--accent-deep); --btn-bd: var(--accent-deep); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line-strong);
  box-shadow: none;
}
.btn--ghost:hover:not(:disabled) { background: var(--paper-raised); }
.btn--block { width: 100%; }
.btn--lg { padding: 1.05rem 1.7rem; font-size: var(--step-1); }

.textlink {
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity 0.15s ease;
}
.textlink:hover { opacity: 0.7; }

/* --- Announcement + header ------------------------------------------------ */
.announce {
  background: var(--paper-deep);
  color: #E7E3DC;
  font-size: var(--step--1);
  text-align: center;
  padding: var(--sp-2) var(--sp-4);
  letter-spacing: 0.01em;
}
.announce b { color: #fff; font-weight: 600; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(250, 248, 245, 0.85);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.site-header[data-stuck='true'] {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 12px rgba(58, 44, 28, 0.05);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 68px;
}

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.logo__mark {
  width: 1.55rem; height: 1.55rem;
  border-radius: var(--r-sm);
  background: linear-gradient(150deg, var(--accent) 0%, var(--accent-deep) 100%);
  align-self: center;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.nav { display: flex; align-items: center; gap: var(--sp-6); }
.nav a {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.15s ease;
}
.nav a:hover { color: var(--ink); }
.nav .btn { padding: 0.6rem 1.25rem; font-size: var(--step--1); }

/* --- Hero ----------------------------------------------------------------- */
.hero { padding-block: var(--sp-8) var(--sp-9); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: var(--sp-8);
  align-items: center;
}
.hero__title {
  font-size: var(--step-5);
  margin-bottom: var(--sp-5);
}
.hero__title em {
  font-style: italic;
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 40;
  color: var(--accent-deep);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.hero__proof li { display: flex; align-items: center; gap: 0.45rem; }
.hero__proof svg { flex: none; color: var(--accent-deep); }

.hero__media { position: relative; }
.hero__media img {
  width: 100%;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .hero { padding-block: var(--sp-6) var(--sp-7); }
}

/* --- Buy module ----------------------------------------------------------- */
.buy {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--sp-8);
  align-items: start;
}
@media (max-width: 940px) {
  .buy { grid-template-columns: 1fr; gap: var(--sp-6); }
}

.gallery { position: sticky; top: 92px; }
@media (max-width: 940px) { .gallery { position: static; } }

.gallery__main {
  background: var(--paper-sunk);
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
}
.gallery__main img { width: 100%; }

.gallery__thumbs {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.thumb {
  flex: 1;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--paper-sunk);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.thumb:hover { transform: translateY(-2px); }
.thumb[aria-current='true'] {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}

.buy__title { font-size: var(--step-4); margin-bottom: var(--sp-3); }
.buy__tagline { color: var(--ink-soft); margin-bottom: var(--sp-5); }

.price-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.price {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.price-note { font-size: var(--step--1); color: var(--ink-mute); }

.field { margin-bottom: var(--sp-6); }
.field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.field__label > span:first-child {
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.field__value { font-size: var(--step--1); color: var(--ink-soft); }

/* Colour swatches */
.swatches { display: flex; gap: var(--sp-3); }
.swatch {
  --sw: transparent;
  position: relative;
  width: 3rem; height: 3rem;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--sw);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: inset 0 -6px 12px rgba(0, 0, 0, 0.12), inset 0 2px 4px rgba(255, 255, 255, 0.18);
}
.swatch:hover { transform: scale(1.05); }
.swatch[aria-checked='true'] {
  box-shadow: inset 0 -6px 12px rgba(0, 0, 0, 0.12), 0 0 0 2px var(--paper), 0 0 0 4px var(--ink);
}

/* Size cards */
.sizes { display: grid; gap: var(--sp-3); }
.size-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  text-align: left;
  padding: var(--sp-4) var(--sp-5);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.size-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.size-card[aria-checked='true'] {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.size-card__name { font-weight: 600; display: flex; align-items: center; gap: var(--sp-2); }
.size-card__dims { font-size: var(--step--1); color: var(--ink-mute); }
.size-card__price { font-weight: 600; white-space: nowrap; }

.tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: var(--r-pill);
  background: var(--accent-wash);
  color: var(--accent-deep);
}

.buy__cta { margin-top: var(--sp-6); }
.buy__status {
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-align: center;
  min-height: 1.4em;
}
.buy__status[data-tone='warn'] { color: var(--warn); }

.assurances {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.assurances li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.assurances svg { flex: none; margin-top: 0.2em; color: var(--accent-deep); }

/* Sticky mobile buy bar */
.buybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: none;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
  background: rgba(250, 248, 245, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform 0.25s ease;
}
.buybar[data-show='true'] { transform: translateY(0); }
.buybar__meta { flex: 1; min-width: 0; }
.buybar__name { font-size: var(--step--1); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar__price { font-weight: 650; }
@media (max-width: 940px) { .buybar { display: flex; } }

/* --- Feature grid --------------------------------------------------------- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-7);
}
.feature__icon {
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--accent-wash);
  color: var(--accent-deep);
  margin-bottom: var(--sp-4);
}
.section--dark .feature__icon { background: rgba(214, 174, 133, 0.14); color: #D6AE85; }
.feature h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.feature p { color: var(--ink-soft); font-size: var(--step-0); }
.section--dark .feature p { color: #B7BAC1; }

/* --- Size guide ----------------------------------------------------------- */
.sizeguide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: var(--sp-8);
  align-items: center;
  margin-top: var(--sp-7);
}
@media (max-width: 860px) { .sizeguide { grid-template-columns: 1fr; gap: var(--sp-6); } }

.sizeguide__stage {
  position: relative;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
/* Aspect ratio tracks the largest mat (900x400) so the rectangles fill the
   stage honestly, with headroom above for the active label. */
.sizeguide__rects {
  position: relative;
  width: 100%;
  aspect-ratio: 900 / 400;
  margin-top: 1.9rem;
}
.sg-rect {
  position: absolute;
  left: 0; bottom: 0;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--line-strong);
  background: rgba(169, 120, 78, 0.05);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.sg-rect[data-active='true'] {
  background: rgba(169, 120, 78, 0.18);
  border-color: var(--accent-deep);
  border-width: 2px;
  /* Lift the highlighted mat above the ones nested around it. */
  z-index: 2;
}
/* Only the active rectangle is labelled. Sizes that share a height (Standard
   and Wide are both 400mm deep) have the same top edge, so showing every
   label at once would stack them on top of each other. */
.sg-rect__label {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 0.45rem;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-deep);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.sg-rect[data-active='true'] .sg-rect__label { opacity: 1; }

.sizetable { width: 100%; border-collapse: collapse; font-size: var(--step-0); }
.sizetable th, .sizetable td {
  text-align: left;
  padding: var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.sizetable th { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mute); font-weight: 650; }
.sizetable td:last-child, .sizetable th:last-child { text-align: right; }
.sizetable td:not(:first-child), .sizetable th:not(:first-child) { white-space: nowrap; }
.sizetable tbody tr { cursor: pointer; transition: background-color 0.15s ease; }
.sizetable tbody tr:hover { background: var(--paper-sunk); }
.sizetable td small { display: block; color: var(--ink-mute); font-size: var(--step--1); margin-top: 2px; }

/* --- Colour story --------------------------------------------------------- */
.colorcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-7);
}
.colorcard {
  /* The whole card is an anchor, so the default underline has to be cleared. */
  text-decoration: none;
  color: inherit;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.colorcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.colorcard img { width: 100%; }
.colorcard__body { padding: var(--sp-5); }
.colorcard h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.colorcard p { font-size: var(--step--1); color: var(--ink-soft); }

/* --- Gift band ------------------------------------------------------------ */
.giftband {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-7);
}
.giftstep__num {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: #D6AE85;
  margin-bottom: var(--sp-2);
}
.giftstep h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.giftstep p { color: #B7BAC1; font-size: var(--step--1); }

/* --- FAQ ------------------------------------------------------------------ */
.faq { margin-top: var(--sp-7); border-top: 1px solid var(--line); }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  cursor: pointer;
  font-weight: 550;
  font-size: var(--step-1);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex: none;
  width: 0.6rem; height: 0.6rem;
  border-right: 1.5px solid var(--ink-mute);
  border-bottom: 1.5px solid var(--ink-mute);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq__body { padding-bottom: var(--sp-5); color: var(--ink-soft); max-width: 68ch; }
.faq__body p + p { margin-top: var(--sp-4); }

/* --- Prose (policy pages) ------------------------------------------------- */
.prose { max-width: 68ch; }
.prose h1 { font-size: var(--step-4); margin-bottom: var(--sp-4); }
.prose h2 { font-size: var(--step-2); margin-top: var(--sp-7); margin-bottom: var(--sp-3); }
.prose h3 { font-size: var(--step-1); margin-top: var(--sp-6); margin-bottom: var(--sp-2); }
.prose p, .prose li { color: var(--ink-soft); }
.prose p + p { margin-top: var(--sp-4); }
.prose ul, .prose ol { margin-top: var(--sp-4); padding-left: 1.3rem; display: grid; gap: var(--sp-2); }
.prose__meta { color: var(--ink-mute); font-size: var(--step--1); margin-bottom: var(--sp-6); }
.callout {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  background: var(--accent-wash);
  border-radius: var(--r-lg);
  border-left: 3px solid var(--accent-deep);
}
.callout p { color: var(--ink); }

/* --- Footer --------------------------------------------------------------- */
.site-footer {
  background: var(--paper-deep);
  color: #A9ADB5;
  padding-block: var(--sp-8) var(--sp-6);
  font-size: var(--step--1);
}
.footer__grid {
  display: grid;
  /* Explicit track count. `repeat(auto-fit, ...)` alongside a fixed first
     column emitted a phantom 0px track and collapsed to a lopsided two-column
     layout on phones. */
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.site-footer h4 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #FBF9F6;
  margin-bottom: var(--sp-4);
}
.site-footer ul { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.site-footer a { text-decoration: none; transition: color 0.15s ease; }
.site-footer a:hover { color: #fff; }
.site-footer .logo { color: #FBF9F6; margin-bottom: var(--sp-4); }
.footer__blurb { max-width: 34ch; line-height: 1.65; }
.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  justify-content: space-between;
  padding-top: var(--sp-5);
  color: #7E838C;
}

/* --- Footer, small screens ------------------------------------------------
   The brand blurb needs a full row to break sensibly; squeezed into a quarter
   of a 360px viewport it wrapped into six ragged lines. Link groups go two-up,
   which keeps "Shipping & returns" on one line at 360px.
   ------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6) var(--sp-5);
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
  .footer__blurb {
    max-width: 46ch;
  }
  .footer__base {
    justify-content: flex-start;
    gap: var(--sp-2);
  }
  .footer__base > span {
    flex: 1 1 100%;
  }
}

/* The sticky buy bar is fixed over the bottom of the viewport at the same
   breakpoint it appears at, and was covering the copyright line. Reserve the
   space so the page can scroll clear of it. */
@media (max-width: 940px) {
  /* Scoped with :has() because only the product page carries a buy bar — the
     policy pages would otherwise get 100px of dead space under the footer. */
  body:has(.buybar) .site-footer {
    padding-bottom: calc(var(--buybar-h) + var(--sp-5) + env(safe-area-inset-bottom));
  }
}

/* --- Success page --------------------------------------------------------- */
.success { text-align: center; padding-block: var(--sp-9); }
.success__mark {
  width: 4.5rem; height: 4.5rem;
  margin: 0 auto var(--sp-6);
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--accent-wash);
  color: var(--good);
}
.success h1 { font-size: var(--step-4); margin-bottom: var(--sp-4); }
.success p { color: var(--ink-soft); max-width: 48ch; margin-inline: auto; }
.success .btn { margin-top: var(--sp-6); }

/* --- Utilities ------------------------------------------------------------ */
.stack-4 > * + * { margin-top: var(--sp-4); }
.center { text-align: center; margin-inline: auto; }
.center .lede { margin-inline: auto; }
.mt-6 { margin-top: var(--sp-6); }

/* --- Markup utilities ----------------------------------------------------
   These exist so no page needs a style="" attribute, which lets the
   Content-Security-Policy drop 'unsafe-inline' from style-src entirely.
   ------------------------------------------------------------------------- */
.nav__links { display: contents; }
@media (max-width: 800px) {
  .nav__links { display: none; }
}
.plain-list { list-style: none; padding: 0; }
.section__title { font-size: var(--step-3); max-width: 22ch; }
.display-xl { font-size: var(--step-5); }