:root {
  --ink: #12171b;
  --paper: #ffffff;
  --wash: #eef1ee;          /* photo field + quiet panels */
  --wash-2: #e4e8e4;
  --line: #d9ded9;
  --line-hard: #b9c0b9;
  --muted: #5c6663;
  --faint: #8b938f;

  --brand: #17876b;         /* actions, links, focus — sampled from the logo */
  --brand-ink: #0f6250;     /* hover/pressed */
  --brand-wash: #e6f2ee;
  --brand-lift: #5fc9a6;    /* the same green lifted to read on dark ground */
  --sale: #cf3223;          /* discounts only — never decorative */

  --display: "Familjen Grotesk", "Helvetica Neue", sans-serif;
  --body: "Instrument Sans", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;

  /* The logo drives the rail height, so the mark can grow as large as the
     design allows without the header ever clipping it. Both sizes scale
     with the viewport, so there is no breakpoint where the logo jumps. */
  --logo-h: clamp(42px, 5.2vw, 68px);
  --logo-h-foot: clamp(46px, 5.6vw, 76px);
  --rail-h: calc(var(--logo-h) + 22px);
  --gutter: clamp(16px, 3.4vw, 48px);
  --maxw: 1340px;
  --ease: cubic-bezier(0.2, 0.75, 0.2, 1);
}

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

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

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

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 8px; top: 8px; z-index: 200; background: var(--brand); color: #fff;
  padding: 10px 16px; font: 700 13px/1 var(--mono);
}

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin: 0;
}

.h-xl { font-size: clamp(2.3rem, 5.4vw, 4.2rem); }
.h-lg { font-size: clamp(1.7rem, 3.4vw, 2.7rem); }
.h-md { font-size: clamp(1.25rem, 2.1vw, 1.6rem); }

.label {
  font: 700 10.5px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.lede { font-size: clamp(1rem, 1.4vw, 1.12rem); color: var(--muted); max-width: 60ch; }
.mono { font-family: var(--mono); }
.sku { font: 700 10.5px/1 var(--mono); letter-spacing: 0.08em; color: var(--faint); }

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

.promo {
  background: var(--ink);
  color: #fff;
  text-align: center;
  padding: 7px 16px;
  font: 700 10.5px/1.4 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.promo b { color: #ffd84d; }

.rail { position: sticky; top: 0; z-index: 90; background: var(--paper); border-bottom: 1px solid var(--line); }
.rail__inner { height: var(--rail-h); display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); }

/* The logo is the whole lockup — cart, badge and wordmark — so the brand link
   carries no text of its own; the name lives in the image's alt attribute. */
.brand { display: flex; align-items: center; flex: none; min-width: 0; }
/* Height is the only dimension set: width follows the file's own 388x141 ratio,
   so the lockup is never stretched. aspect-ratio states that ratio up front so
   the header reserves the right width before the image has loaded. */
.brand__logo {
  height: var(--logo-h);
  width: auto;
  max-width: 100%;
  aspect-ratio: 388 / 141;
  object-fit: contain;
  display: block;
}
.foot .brand__logo { height: var(--logo-h-foot); }

.nav { display: flex; gap: clamp(12px, 1.6vw, 24px); }
.nav__acct { display: none; }  /* the header tools carry this on desktop */
.nav a {
  font: 500 13.5px/1 var(--body);
  padding: 8px 0;
  color: var(--muted);
  position: relative;
  transition: color 0.2s linear;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand);
}

.search { margin-left: auto; position: relative; flex: 0 1 260px; }
.search input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--wash);
  padding: 9px 12px 9px 34px;
  font: 400 13.5px/1 var(--body);
  color: var(--ink);
}
.search input::placeholder { color: var(--faint); }
.search input:focus { background: var(--paper); border-color: var(--brand); outline: none; }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--faint); }

.rail__tools { display: flex; align-items: center; gap: 8px; }

.cart-btn {
  display: flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff;
  border-radius: 3px; padding: 10px 14px;
  font: 700 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.2s linear;
}
.cart-btn:hover { background: var(--brand); }
.cart-btn__n {
  min-width: 17px; height: 17px; border-radius: 20px; background: #fff; color: var(--ink);
  display: grid; place-items: center; font-size: 10px; padding-inline: 4px;
}

.burger { display: none; width: 40px; height: 36px; border: 1px solid var(--line); background: var(--paper); border-radius: 3px; padding: 10px; }
.burger span { display: block; height: 1.6px; background: var(--ink); margin-bottom: 4px; }
.burger span:last-child { margin-bottom: 0; width: 65%; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 1px solid transparent; border-radius: 3px;
  padding: 13px 20px;
  font: 700 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s linear, border-color 0.18s linear, transform 0.1s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--solid { background: var(--brand); color: #fff; }
.btn--solid:hover { background: var(--brand-ink); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #26313a; }
.btn--ghost { border-color: var(--line-hard); color: var(--ink); background: var(--paper); }
.btn--ghost:hover { border-color: var(--ink); background: var(--wash); }
.btn--wide { width: 100%; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.btn--sm { padding: 9px 13px; font-size: 10px; }
/* for use on dark ground, where brand blue on near-black is too low-contrast */
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: var(--wash-2); }
.btn--outline { border-color: rgba(255, 255, 255, 0.45); color: var(--paper); background: transparent; }
.btn--outline:hover { border-color: var(--paper); background: rgba(255, 255, 255, 0.1); }

/* ------------------------------------------------------------ price tag motif */

.tag { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.tag__now { font: 700 clamp(1.1rem, 1.5vw, 1.32rem)/1 var(--mono); letter-spacing: -0.02em; }
.tag__was { font: 400 12px/1 var(--mono); color: var(--faint); text-decoration: line-through; }
.tag__off {
  font: 700 10px/1 var(--mono); letter-spacing: 0.08em;
  background: var(--sale); color: #fff; padding: 4px 6px; border-radius: 2px;
}
.tag--lg .tag__now { font-size: clamp(1.9rem, 3.4vw, 2.5rem); }
.tag--lg .tag__was { font-size: 14px; }
.tag--lg .tag__off { font-size: 11px; padding: 5px 8px; }

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

.ph {
  position: relative;
  aspect-ratio: 1;
  background: var(--wash);
  overflow: hidden;
  border-radius: 2px;
}
.ph img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.ph--contain img { object-fit: contain; padding: 6%; }
/* if a photo fails to load, the frame states what should be there instead of collapsing */
.ph.is-missing img { display: none; }
.ph.is-missing::after {
  content: attr(data-name);
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 12%; text-align: center;
  font: 700 11px/1.5 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--faint);
}

.ph__off {
  position: absolute; top: 0; left: 0; z-index: 1;
  background: var(--sale); color: #fff;
  font: 700 10px/1 var(--mono); letter-spacing: 0.06em;
  padding: 5px 7px; border-radius: 0 0 2px 0;
}

/* ------------------------------------------------------------------ item grid */

/* Hairlines are drawn with shadows so half-empty rows leave no stray borders. */
.items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 1px;
}

.item {
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--line);
  padding: 16px 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
  transition: box-shadow 0.2s linear;
}
.item:hover { box-shadow: 0 0 0 1px var(--line-hard); z-index: 2; }
.item:hover .ph img { transform: scale(1.045); }

.item__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.item__cat { font: 500 10.5px/1 var(--body); color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; }
.item__name {
  font-family: var(--display); font-weight: 700; font-size: 0.98rem; line-height: 1.2;
  letter-spacing: -0.015em;
}
.item:hover .item__name { color: var(--brand-ink); }
.item__fact {
  font: 400 12px/1.5 var(--body); color: var(--muted); margin: 0;
  display: flex; gap: 6px;
}
.item__fact b { font: 700 10px/1.6 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.item__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }

/* ------------------------------------------------------------------ sections */

.band { padding-block: clamp(44px, 6vw, 84px); }
.band--tight { padding-block: clamp(28px, 4vw, 52px); }
.band--rule { border-top: 1px solid var(--line); }
.band--wash { background: var(--wash); }

.band__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }

.split { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.split--center { align-items: center; }

/* ---------------------------------------------------------------------- hero */

/* Hero: a centred stack on a dark textured plate. Swap the background-image
   for your own photograph and nothing else here needs to change — the colour
   underneath keeps the text legible while a large image is still loading. */
.hero {
  background: var(--ink) url("../img/hero-bg.svg") center / cover no-repeat;
  color: var(--paper);
  padding-block: clamp(56px, 9vw, 128px);
  text-align: center;
}
.hero__inner { display: flex; flex-direction: column; align-items: center; }
.hero .label { color: rgba(255, 255, 255, 0.62); }
.hero h1 { margin-block: 18px 22px; color: var(--paper); text-wrap: balance; }
.hero h1 span { color: var(--brand-lift); }   /* full-strength brand is ~2.3:1 on the plate */
.hero .lede { color: rgba(255, 255, 255, 0.74); max-width: 56ch; }
.hero__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; justify-content: center; }
.hero :focus-visible { outline-color: var(--paper); }

.figures {
  display: flex; flex-wrap: wrap; gap: 0; margin-top: 42px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  justify-content: center; width: 100%; max-width: 860px;
}
.figures div { flex: 1 1 118px; padding: 18px 14px 0; text-align: center; }
.figures b { display: block; font-family: var(--display); font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing: -0.03em; }
.figures span { font: 700 9.5px/1.5 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }

/* ----------------------------------------------------------- collection index */

.collections { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 1px; }
.collection {
  background: var(--paper); box-shadow: 0 0 0 1px var(--line);
  padding: 20px 18px 18px;
  display: flex; flex-direction: column; gap: 6px; min-height: 132px;
  transition: background 0.2s linear;
}
.collection:hover { background: var(--wash); }
.collection b { font-family: var(--display); font-size: 1.15rem; letter-spacing: -0.02em; }
.collection .label { margin-top: auto; }
.collection__n { font: 700 11px/1 var(--mono); color: var(--brand); }

/* centred page banner, used for the shop heading */
.banner {
  border-bottom: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  padding-block: clamp(34px, 5vw, 68px);
}
.banner h1 { letter-spacing: -0.03em; color: var(--paper); }

/* the banner runs on a dark field, so the muted greys used elsewhere are lifted */
.banner .lede { color: rgba(255, 255, 255, 0.72); margin-inline: auto; }
.banner .crumbs { color: rgba(255, 255, 255, 0.58); }
.banner .crumbs a:hover { color: var(--paper); text-decoration: underline; }
.banner .label { color: rgba(255, 255, 255, 0.62); }
.banner :focus-visible { outline-color: var(--paper); }

/* small account link, since the main menu is now four items */
.rail__acct {
  font: 500 13px/1 var(--body);
  color: var(--muted);
  padding: 10px 8px;
  white-space: nowrap;
}
.rail__acct:hover { color: var(--ink); }

/* the single payment method, stated rather than chosen */
.pay {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: start;
  border: 1px solid var(--brand);
  background: var(--brand-wash);
  padding: 16px;
  border-radius: 3px;
  cursor: default;
}
.pay input { accent-color: var(--brand); width: 17px; height: 17px; margin-top: 2px; }
.pay b { font-family: var(--display); font-size: 1.02rem; display: block; }
.pay em { font-style: normal; font-size: 0.88rem; color: var(--muted); display: block; margin-top: 4px; }
.pay__due { text-align: right; white-space: nowrap; }
.pay__due b { font-family: var(--mono); font-size: 1.15rem; margin-top: 4px; }

/* order lines with a thumbnail — used in the basket summary, the payment step,
   the review step and the receipt */
.mini { display: grid; gap: 10px; }
.mini__row { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; }
.mini__row .ph { border: 1px solid var(--line); }
.mini__name { font-size: 0.86rem; line-height: 1.35; }
.mini__name em {
  display: block; font-style: normal; margin-top: 3px;
  font: 700 9.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint);
}

/* ---------------------------------------------------------------------- shop */

.shop { display: grid; grid-template-columns: 224px 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; }

.filters { position: sticky; top: calc(var(--rail-h) + 18px); border: 1px solid var(--line); }
.filters__group { padding: 18px; border-bottom: 1px solid var(--line); }
.filters__group:last-child { border-bottom: 0; }
.filters h3 { font: 700 10.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 13px; }

.check { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; padding: 5px 0; cursor: pointer; color: var(--muted); }
.check:hover { color: var(--ink); }
.check input { accent-color: var(--brand); width: 15px; height: 15px; }
.check .count { margin-left: auto; font: 700 10px/1 var(--mono); color: var(--faint); }

.range { width: 100%; accent-color: var(--brand); }
.select {
  background: var(--paper); border: 1px solid var(--line); border-radius: 3px;
  padding: 9px 11px; font: 500 12.5px/1 var(--body); color: var(--ink);
}

.shop__bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--brand-wash); color: var(--brand-ink);
  border-radius: 20px; padding: 5px 11px;
  font: 700 10px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  border: 0; cursor: pointer;
}
.chip:hover { background: var(--brand-wash); }

.empty { border: 1px dashed var(--line-hard); padding: 54px 28px; text-align: center; color: var(--muted); }

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

.pdp { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(24px, 4vw, 60px); align-items: start; }
.pdp__media { position: sticky; top: calc(var(--rail-h) + 18px); }
.pdp__media .ph { border: 1px solid var(--line); }
.pdp__name { margin-block: 12px 14px; }
.crumbs { font: 500 12px/1 var(--body); color: var(--faint); margin-bottom: 22px; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }

.buy { border: 1px solid var(--line); padding: 20px; margin-top: 22px; background: var(--wash); }
.buy__row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; }

.qty { display: inline-flex; border: 1px solid var(--line-hard); border-radius: 3px; overflow: hidden; background: var(--paper); }
.qty button { width: 38px; height: 44px; background: transparent; border: 0; cursor: pointer; font-size: 16px; }
.qty button:hover { background: var(--wash-2); }
.qty input { width: 46px; text-align: center; background: transparent; border: 0; border-inline: 1px solid var(--line); font: 700 14px/1 var(--mono); color: var(--ink); }

.facts { border-top: 1px solid var(--line); margin-top: 26px; }
.facts div { display: grid; grid-template-columns: 168px 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.facts dt, .facts .k { font: 700 10.5px/1.6 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }

.blocks { margin-top: 8px; }
.blocks section { padding: 22px 0; border-bottom: 1px solid var(--line); }
.blocks h3 { font-size: 1.05rem; margin-bottom: 8px; }
.blocks p { margin: 0; color: var(--muted); max-width: 74ch; }

.box-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.box-list li { display: flex; gap: 10px; font-size: 0.93rem; color: var(--muted); }
.box-list li::before { content: "▢"; color: var(--brand); }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-top: 36px; flex-wrap: wrap; }
.tabs button {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  padding: 12px 14px; cursor: pointer;
  font: 700 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint);
}
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); }
.tabpanel { padding-top: 20px; }
.tabpanel[hidden] { display: none; }

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

.cart { display: grid; grid-template-columns: 1fr 352px; gap: clamp(22px, 3.5vw, 48px); align-items: start; }

.line { display: grid; grid-template-columns: 92px 1fr auto; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: center; }
.line .ph { border: 1px solid var(--line); }
.line h3 { font-size: 0.98rem; margin-bottom: 5px; }
.line__right { text-align: right; display: flex; flex-direction: column; gap: 9px; align-items: flex-end; }

.summary { border: 1px solid var(--line); padding: 22px; position: sticky; top: calc(var(--rail-h) + 18px); }
.row { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; font-size: 0.92rem; color: var(--muted); }
.row b { color: var(--ink); font-family: var(--mono); font-weight: 700; }
.row--save { color: var(--sale); }
.row--save b { color: var(--sale); }
.row--total { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 14px; color: var(--ink); font-family: var(--display); font-size: 1.2rem; }
.row--total b { font-family: var(--mono); font-size: 1.2rem; }

.ship-bar { background: var(--wash); border: 1px solid var(--line); padding: 12px 14px; margin-bottom: 18px; }
.ship-bar__track { height: 5px; background: var(--wash-2); border-radius: 20px; overflow: hidden; margin-top: 9px; }
.ship-bar__fill { height: 100%; width: 0; background: var(--brand); transition: width 0.5s var(--ease); }
.ship-bar.is-free .ship-bar__fill { background: var(--brand); }

/* --------------------------------------------------------------------- forms */

.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font: 700 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.input, .textarea {
  width: 100%; background: var(--paper); border: 1px solid var(--line-hard); border-radius: 3px;
  color: var(--ink); padding: 12px 13px; font-family: var(--body); font-size: 0.95rem;
}
.input:focus, .textarea:focus { border-color: var(--brand); outline: none; }
.textarea { min-height: 120px; resize: vertical; }
.input[aria-invalid="true"] { border-color: var(--sale); background: #fdf3f2; }
.err { display: none; font: 700 10px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sale); margin-top: 6px; }
.is-bad .err { display: block; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.steps { display: flex; gap: 3px; margin-bottom: 28px; }
.steps div { flex: 1; border-top: 3px solid var(--line); padding-top: 10px; font: 700 10px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.steps div.is-on { border-top-color: var(--brand); color: var(--ink); }
.steps div.is-done { border-top-color: var(--ink); color: var(--muted); }

.panel { border: 1px solid var(--line); padding: clamp(20px, 3vw, 30px); }

/* ---------------------------------------------------------------------- map
   OpenStreetMap rather than Google: it needs no API key, sets no advertising
   cookies, and the privacy page promises exactly that. */
.map { border: 1px solid var(--line); margin-top: 18px; }
.map__frame { width: 100%; height: 260px; border: 0; display: block; background: var(--wash); }
.map__foot {
  display: flex; gap: 12px; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  padding: 12px 16px; border-top: 1px solid var(--line); background: var(--wash);
}
.map__foot .label { margin: 0; }
.map__link { font: 700 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); }
.map__link:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ dark CTA
   The closing call on the home and about pages. Sits on near-black so it reads
   as a full stop after a page of white, and both routes land on the contact
   form rather than dead-ending in a toast. */
.cta {
  background: var(--ink);
  color: var(--paper);
  border-radius: 4px;
  padding: clamp(30px, 4.4vw, 54px) clamp(22px, 4vw, 52px);
  display: flex;
  gap: clamp(22px, 3vw, 40px);
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.cta__copy { max-width: 46ch; }
.cta h2 { margin: 0; color: var(--paper); letter-spacing: -0.025em; }
.cta p { margin: 10px 0 0; color: rgba(255, 255, 255, 0.68); font-size: 0.94rem; line-height: 1.6; }
.cta :focus-visible { outline-color: var(--paper); }

@media (max-width: 620px) {
  .cta { flex-direction: column; align-items: stretch; }
  .cta .btn { width: 100%; }
}

/* -------------------------------------------------------------------- content */

.prose { max-width: 70ch; }
.prose p { color: var(--muted); }
.prose h3 { margin-top: 32px; margin-bottom: 10px; font-size: 1.08rem; }
.prose ul, .prose ol { color: var(--muted); margin: 12px 0 0; padding-left: 20px; line-height: 1.9; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 4px; }
.prose li::marker { color: var(--faint); }

.cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 1px; }
.cell { background: var(--paper); box-shadow: 0 0 0 1px var(--line); padding: 24px 20px; }
.cell b { display: block; font-family: var(--display); font-size: 1.05rem; margin-bottom: 8px; letter-spacing: -0.02em; }
.cell p { margin: 0; font-size: 0.9rem; color: var(--muted); }
.cell .num { font: 700 10.5px/1 var(--mono); color: var(--brand); display: block; margin-bottom: 10px; }

.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  cursor: pointer; padding: 17px 0; list-style: none;
  font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: -0.015em;
  display: flex; justify-content: space-between; gap: 14px;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-family: var(--mono); color: var(--brand); }
.acc details[open] summary::after { content: "−"; }
.acc p { margin: 0 0 18px; color: var(--muted); max-width: 72ch; }

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

.foot { border-top: 1px solid var(--line); background: var(--wash); padding-block: 48px 26px; margin-top: 20px; }
.foot__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 30px; }
.foot h4 { font: 700 10.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot li a { font-size: 0.9rem; color: var(--muted); }
.foot li a:hover { color: var(--brand); text-decoration: underline; }
.foot__base {
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font: 700 9.5px/1.6 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint);
}

/* ---------------------------------------------------------------------- toast */

.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 140%);
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 3px;
  font: 700 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  z-index: 150; transition: transform 0.35s var(--ease);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.5);
}
.toast.is-up { transform: translate(-50%, 0); }

/* -------------------------------------------------------------------- reveals */

.rise { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.rise.is-in { opacity: 1; transform: none; }

/* ----------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .split, .pdp, .cart { grid-template-columns: 1fr; }
  .pdp__media, .summary, .filters { position: static; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .burger { display: block; }
  .search { order: 3; flex-basis: 100%; }
  .nav {
    position: fixed; inset: calc(var(--rail-h)) 0 auto; flex-direction: column; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 4px var(--gutter) 18px; display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
  .nav__acct { display: block; }
  .nav a[aria-current="page"]::after { display: none; }
  .search { display: none; }
  .rail__tools { margin-left: auto; }
  .shop { grid-template-columns: 1fr; }
  .facts div { grid-template-columns: 132px 1fr; }
}

@media (max-width: 900px) {
  .rail__acct { display: none; }
}

@media (max-width: 620px) {
  .pay { grid-template-columns: auto 1fr; }
  .pay__due { grid-column: 2; text-align: left; margin-top: 8px; }
  .two, .cells { grid-template-columns: 1fr; }
  .items { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }
  .item { padding: 12px 12px 14px; }
  .item__name { font-size: 0.88rem; }
  .line { grid-template-columns: 74px 1fr; }
  .line__right { grid-column: 1 / -1; align-items: flex-start; text-align: left; flex-direction: row; justify-content: space-between; width: 100%; }
  .foot__grid { grid-template-columns: 1fr; }
  .facts div { grid-template-columns: 1fr; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .rise { opacity: 1; transform: none; }
}