:root {
  --ink: #17140f;
  --paper: #ffffff;
  --wash: #f6f3ed;          /* photo field + quiet panels — warm stone, not cold grey */
  --wash-2: #ece6d9;
  --line: #e6e0d3;
  --line-hard: #cec5b0;
  --muted: #6b6255;
  --faint: #9a9182;

  --brand: #EAE587;         /* actions, links, focus — sampled from the logo */
  --brand-ink: color-mix(in srgb, var(--brand) 85%, black);   /* hover/pressed — a shade deeper so it reads on white */
  --brand-wash: color-mix(in srgb, var(--brand) 22%, white);
  --brand-lift: var(--brand);    /* the brand colour lifted to read on dark ground */
  --sale: #c8452c;          /* discounts only — never decorative */

  /* Fixed dark/light — for plates (hero, banners, dark buttons) that stay
     dark regardless of theme, so their white text never has to invert. */
  --ink-fixed: #17140f;
  --paper-fixed: #ffffff;

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

  /* shadcn-style scale: soft rounding, layered shadows used for elevation
     instead of hard borders */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(23, 20, 15, 0.06);
  --shadow-md: 0 12px 28px -12px rgba(23, 20, 15, 0.18);
  --shadow-lg: 0 26px 54px -20px rgba(23, 20, 15, 0.3);
  --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 45%, transparent);

  /* 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);
}

/* Dark mode: neutrals invert to a dark ground, brand colour is unchanged
   so the logo/accent reads identically in both themes. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f3f1ea;
    --paper: #14120e;
    --wash: #1c1a15;
    --wash-2: #262319;
    --line: #322e24;
    --line-hard: #433d2d;
    --muted: #b3aa98;
    --faint: #7d7566;

    --brand-ink: color-mix(in srgb, var(--brand) 85%, white);
    --brand-wash: color-mix(in srgb, var(--brand) 22%, black);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 12px 28px -12px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 26px 54px -20px rgba(0, 0, 0, 0.65);
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
.item__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item__fact {
  display:none!important;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  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: var(--ink-fixed);
  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, .h-lg {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.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); }
.h-xl em, .h-lg em { font-style: italic; color: var(--muted); }

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

.label--icon { display: inline-flex; align-items: center; gap: 7px; }
.label--icon svg { flex: none; width: 16px; height: 16px; color: var(--ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.value-icon { display: flex; align-items: flex-start; gap: 9px; }
.value-icon svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--ink); }

.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-fixed);
  color: #fff;
  text-align: center;
  padding: 8px 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: color-mix(in srgb, var(--paper) 75%, transparent);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  transition: box-shadow 0.3s ease;
}
.rail.scrolled { box-shadow: 0 4px 30px rgba(23, 20, 15, 0.08); }
.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; }
.nav a {
  font: 500 13.5px/1 var(--display);
  padding: 8px 0;
  color: var(--muted);
  position: relative;
  transition: color 0.25s ease;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--brand); border-radius: 2px;
  transform: scaleX(0); transition: transform 0.3s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.search { margin-left: auto; position: relative; flex: 0 1 260px; }
.search input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--wash);
  padding: 9px 12px 9px 36px;
  font: 400 13.5px/1 var(--display);
  color: var(--ink);
  transition: all 0.3s var(--ease);
}
.search input::placeholder { color: var(--faint); }
.search input:hover { border-color: var(--line-hard); background: var(--paper); }
.search input:focus { background: var(--paper); border-color: var(--brand); outline: none; box-shadow: var(--ring); }
.search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--faint); transition: color 0.25s ease; }
.search input:focus + svg { color: var(--brand-ink); }

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

.cart-btn {
  display: flex; align-items: center; gap: 8px;
  background: var(--ink-fixed); color: #fff;
  border-radius: var(--r-pill); padding: 10px 16px;
  font: 700 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  transition: all 0.3s var(--ease);
  position: relative; overflow: hidden;
  isolation: isolate;
}
.cart-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--brand-ink);
  transform: translateX(-101%); transition: transform 0.35s var(--ease);
}
.cart-btn:hover { color: var(--ink-fixed); box-shadow: var(--shadow-sm); }
.cart-btn:hover::before { transform: translateX(0); }
.cart-btn span, .cart-btn::after { position: relative; z-index: 1; }
.cart-btn__n {
  min-width: 17px; height: 17px; border-radius: 20px; background: #fff; color: var(--ink-fixed);
  display: grid; place-items: center; font-size: 10px; padding-inline: 4px;
  transition: transform 0.2s ease;
}
.cart-btn:hover .cart-btn__n { transform: scale(1.1); }

.burger { display: none; width: 40px; height: 36px; border: 1px solid var(--line); background: var(--paper); border-radius: var(--r-sm); 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: var(--r-pill);
  padding: 13px 22px;
  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, box-shadow 0.2s linear, transform 0.15s var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn--solid { background: var(--brand); color: var(--ink-fixed); }
.btn--solid:hover { background: var(--brand-ink); box-shadow: var(--shadow-sm); }
.btn--dark { background: var(--ink-fixed); color: #fff; box-shadow: var(--shadow-sm); }
.btn--dark:hover { background: #322c22; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.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 15px; font-size: 10px; }
/* for use on dark ground, where brand blue on near-black is too low-contrast */
.btn--light { background: var(--paper-fixed); color: var(--ink-fixed); }
.btn--light:hover { background: color-mix(in srgb, var(--paper-fixed) 88%, var(--ink-fixed)); }
.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 7px; border-radius: var(--r-pill);
}
.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: var(--r-sm);
}
.ph img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s var(--ease), filter 0.5s ease;
}
.ph--contain img { object-fit: contain; padding: 6%; }
.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: 10px; left: 10px; z-index: 1;
  background: var(--sale); color: #fff;
  font: 700 10px/1 var(--mono); letter-spacing: 0.06em;
  padding: 5px 8px; border-radius: 30px;
  animation: pulse-badge 2s ease-in-out infinite;
}
@keyframes pulse-badge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

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

.items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
  transition: all 0.35s var(--ease);
}
.item:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 20px 50px -15px rgba(23, 20, 15, 0.2);
  z-index: 2;
}
.item:hover .ph img { transform: scale(1.06); }
.item:hover .ph { border-radius: 0; }

.item__media { display: block; }
.item__media .ph { border-radius: 0; }

.item__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.item__cat { font: 500 10.5px/1 var(--display); 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.25;
  letter-spacing: -0.015em;
  transition: color 0.25s ease;
}
.item:hover .item__name { color: var(--brand-ink); }
.item__fact {
  font: 400 12px/1.5 var(--display); 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: 14px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.item__add {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ink-fixed); color: #fff; border: none; cursor: pointer;
  transition: all 0.3s var(--ease);
  position: relative; overflow: hidden;
}
.item__add::before {
  content: ""; position: absolute; inset: 0;
  background: var(--brand-ink);
  border-radius: 50%;
  transform: scale(0); transition: transform 0.3s var(--ease);
}
.item__add:hover::before { transform: scale(1); }
.item__add svg { position: relative; z-index: 1; }
.item__add:active { transform: scale(0.9); }

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

.band {
    padding-block: clamp(25px, 0vw, 25px);
}
.band--tight { padding-block: clamp(28px, 3vw, 52px); }

.band--wash { background: var(--wash); }

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

.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-fixed) url("../img/hero-bg.svg") center / cover no-repeat;
  color: var(--paper-fixed);
  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-fixed); 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-fixed); }

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

/* ------------------------------------------------------------- category nav */

.cat-nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px, 1.6vw, 14px);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(14px, 2vw, 20px);
  margin-top: clamp(20px, 3vw, 32px);
  position: relative; z-index: 3;
}
.cat-nav__item {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 12px 20px; border-radius: var(--r-md);
  min-width: 92px;
  transition: all 0.3s var(--ease);
}
.cat-nav__item:hover { background: var(--wash); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.cat-nav__item svg { width: 22px; height: 22px; color: var(--ink); }
.cat-nav__item span {
  font: 700 10px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  text-align: center;
}

@media (max-width: 620px) {
  .cat-nav { margin-top: 20px; }
}

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

.collections { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: clamp(12px, 1.8vw, 18px); }
.collection {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px 22px 22px;
  display: flex; flex-direction: column; gap: 6px; min-height: 132px;
  transition: all 0.35s var(--ease);
  position: relative; overflow: hidden;
}
.collection::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--brand); transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.collection:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 16px 40px -12px rgba(23, 20, 15, 0.18); }
.collection:hover::before { transform: scaleX(1); }
.collection b { font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; }
.collection .label { margin-top: auto; }
.collection__n { font: 700 11px/1 var(--mono); color: var(--brand-ink); }

/* centred page banner, used for the shop heading */
.banner {
  border-bottom: 1px solid var(--ink-fixed);
  background: var(--ink-fixed);
  color: var(--paper-fixed);
  text-align: center;
  padding-block: clamp(34px, 5vw, 68px);
  position: relative; overflow: hidden;
}
.banner::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, color-mix(in srgb, var(--brand) 6%, transparent), transparent 60%);
}
.banner h1 { letter-spacing: -0.03em; color: var(--paper-fixed); font-size: clamp(2.3rem, 5.4vw, 4.2rem); position: relative; z-index: 1; }
.banner .lede { color: rgba(255, 255, 255, 0.72); margin-inline: auto; position: relative; z-index: 1; }
.banner .crumbs { color: rgba(255, 255, 255, 0.58); position: relative; z-index: 1; }
.banner .crumbs a:hover { color: var(--paper); text-decoration: underline; }
.banner .label { color: rgba(255, 255, 255, 0.62); position: relative; z-index: 1; }
.banner :focus-visible { outline-color: var(--paper); }

/* small account link, since the main menu is now four items — styled to
   exactly match the cart button beside it, as one matching pair */
.rail__acct {
  display: inline-flex;
  align-items: center;
  background: var(--ink-fixed);
  color: #fff;
  border-radius: var(--r-pill);
  padding: 10px 16px;
  font: 700 10.5px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.3s var(--ease);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.rail__acct::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--brand-ink);
  transform: translateX(-101%); transition: transform 0.35s var(--ease);
}
.rail__acct:hover { color: var(--ink-fixed); box-shadow: var(--shadow-sm); }
.rail__acct:hover::before { transform: translateX(0); }

/* 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: var(--r-md);
  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); border-radius: var(--r-lg); overflow: hidden; background: var(--paper); }
.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(--ink); width: 15px; height: 15px; }
.check .count { margin-left: auto; font: 700 10px/1 var(--mono); color: var(--faint); }

.range { width: 100%; accent-color: var(--ink); }
.select {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 9px 11px; font: 500 12.5px/1 var(--display); 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(--ink);
  border-radius: var(--r-pill); padding: 5px 11px;
  font: 700 10px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  border: 0; cursor: pointer;
}
.chip:hover { background: var(--wash-2); }

.empty { border: 1px dashed var(--line-hard); border-radius: var(--r-lg); 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); border-radius: var(--r-lg); }

.gallery { display: grid; grid-template-columns: 72px 1fr; gap: 14px; }
.gallery__main {
  grid-column: 2; grid-row: 1; margin-bottom: 0; overflow: hidden; cursor: zoom-in;
}
.gallery__main img { transition: transform 0.5s var(--ease); }
.gallery__main:hover img { transform: scale(1.08); }
.gallery__thumbs {
  grid-column: 1; grid-row: 1;
  display: flex; flex-direction: column; gap: 10px;
  max-height: 100%; overflow-y: auto; padding: 2px;
}
.gallery__thumb {
  width: 64px; height: 64px; flex: none; padding: 0; cursor: pointer;
  border: 2px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
  background: var(--wash); transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__thumb:hover { border-color: var(--line-hard); transform: translateY(-1px); }
.gallery__thumb.is-active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }

@media (max-width: 620px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery__main { grid-column: 1; grid-row: 1; }
  .gallery__thumbs { grid-column: 1; grid-row: 2; flex-direction: row; overflow-x: auto; overflow-y: visible; }
}
.pdp__name { margin-block: 12px 14px; }
.crumbs { font: 500 12px/1 var(--display); color: var(--faint); margin-bottom: 22px; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }

.buy {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; margin-top: 22px;
  background: var(--paper);
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.3s ease;
}
.buy::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 40%, transparent));
}
.buy:hover { box-shadow: var(--shadow-lg); }
.buy__row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; }

.trust-row {
  display: flex; flex-wrap: wrap; gap: 14px 20px; margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--line);
}
.trust-row div { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--muted); }
.trust-row svg { flex: none; width: 17px; height: 17px; color: var(--brand-ink); }

.qty { display: inline-flex; border: 1px solid var(--line-hard); border-radius: var(--r-pill); overflow: hidden; background: var(--paper); }
.qty button { width: 38px; height: 44px; background: transparent; border: 0; cursor: pointer; font-size: 16px; transition: background 0.2s ease; }
.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); }

/* -------------------------------------------------------------- color swatches */

.swatches { margin: 16px 0 4px; }
.swatches [data-picked] { color: var(--ink); font-weight: 700; text-transform: none; letter-spacing: 0; }
.swatches__row { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line-hard); padding: 0; cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.swatch:hover { transform: translateY(-2px); }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--wash), 0 0 0 4px var(--ink); }
.swatch--text {
  width: auto; height: 32px; border-radius: var(--r-pill); padding: 0 14px;
  display: inline-flex; align-items: center;
  background: var(--paper); color: var(--ink);
  font: 700 10.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.swatch--text[aria-checked="true"] { background: var(--ink-fixed); color: #fff; border-color: var(--ink-fixed); box-shadow: none; }

.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);
  transition: all 0.3s ease;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.tabpanel { padding-top: 20px; }
.tabpanel[hidden] { display: none; }

/* product page only — a segmented pill bar reads more premium than the
   plain underline tabs shared with account.html, so it's scoped here
   rather than changed on the shared .tabs rule. */
#tabs-area .tabs {
  display: inline-flex; gap: 2px; border-bottom: 0; margin-top: 44px;
  padding: 4px; background: var(--wash); border-radius: var(--r-pill);
  max-width: 100%; overflow-x: auto;
}
#tabs-area .tabs button {
  border-bottom: 0; border-radius: var(--r-pill); padding: 10px 18px; white-space: nowrap;
}
#tabs-area .tabs button:hover { color: var(--ink); }
#tabs-area .tabs button[aria-selected="true"] {
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm);
}

/* -------------------------------------------------------- sticky buy bar */

.sticky-buy {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: flex; align-items: center; gap: 16px;
  padding: 12px clamp(16px, 3.4vw, 48px);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 28px -12px rgba(23, 20, 15, 0.18);
  transform: translateY(100%); transition: transform 0.35s var(--ease);
}
.sticky-buy.is-shown { transform: translateY(0); }
.sticky-buy__media { flex: none; width: 42px; height: 42px; border-radius: var(--r-sm); overflow: hidden; }
.sticky-buy__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sticky-buy__name {
  flex: 1; min-width: 0; font: 700 13px/1.3 var(--display);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sticky-buy__price { flex: none; font: 700 15px/1 var(--mono); color: var(--ink); }
.sticky-buy button { flex: none; }

@media (max-width: 620px) {
  .sticky-buy__name { 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; transition: background 0.2s ease; }
.line:hover { background: var(--wash); }
.line .ph { border: 1px solid var(--line); border-radius: var(--r-sm); }
.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); border-radius: var(--r-lg); padding: 22px;
  position: sticky; top: calc(var(--rail-h) + 18px); background: var(--paper);
  transition: box-shadow 0.3s ease;
}
.summary:hover { box-shadow: var(--shadow-md); }
.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); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 18px; }
.ship-bar__track { height: 5px; background: var(--wash-2); border-radius: var(--r-pill); overflow: hidden; margin-top: 9px; }
.ship-bar__fill { height: 100%; width: 0; background: var(--ink); transition: width 0.8s var(--ease); }
.ship-bar.is-free .ship-bar__fill { background: var(--brand-ink); }

/* --------------------------------------------------------------------- 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: var(--r-sm);
  color: var(--ink); padding: 12px 13px; font-family: var(--display); font-size: 0.95rem;
  transition: all 0.3s var(--ease);
}
.input:hover, .textarea:hover { border-color: var(--line); }
.input:focus, .textarea:focus { border-color: var(--brand); outline: none; box-shadow: var(--ring); }
.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); transition: all 0.3s ease; }
.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); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 30px); background: var(--paper); transition: box-shadow 0.3s ease; }
.panel:hover { box-shadow: var(--shadow-sm); }

/* ---------------------------------------------------------------------- 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); border-radius: var(--r-lg); overflow: hidden; margin-top: 18px; }
.map__frame { width: 100%; height: 400px; 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(--ink); }
.map__link:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ dark CTA */

.cta {
  background: var(--ink-fixed);
  color: var(--paper-fixed);
  border-radius: var(--r-lg);
  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;
  position: relative; overflow: hidden;
}
.cta::before {
  content: ""; position: absolute; top: -50%; right: -10%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 8%, transparent), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.cta__copy { max-width: 46ch; position: relative; z-index: 1; }
.cta > .btn { position: relative; z-index: 1; }
.cta h2 { margin: 0; color: var(--paper-fixed); letter-spacing: -0.01em; font-family: var(--display); }
.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-fixed); }

@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: clamp(12px, 1.8vw, 18px); }
.cell {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px 20px;
  transition: all 0.35s var(--ease);
  position: relative; overflow: hidden;
}
.cell::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: var(--brand); transform: scaleX(0); transition: transform 0.35s var(--ease);
}
.cell:hover { box-shadow: 0 16px 40px -12px rgba(23, 20, 15, 0.15); transform: translateY(-4px); }
.cell:hover::after { transform: scaleX(1); }
.cell b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.15rem; margin-bottom: 8px; letter-spacing: -0.01em; }
.cell p { margin: 0; font-size: 0.9rem; color: var(--muted); }
.cell .num { font: 700 10.5px/1 var(--mono); color: var(--brand-ink); 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(--ink); }
.acc details[open] summary::after { content: "−"; }
.acc p { margin: 0 0 18px; color: var(--muted); max-width: 72ch; }

/* --------------------------------------------------------------- perks strip */

.perks {
  margin-top: 40px;
  padding: 10px 0 24px;
}
.perks__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--ink-fixed);
  border-radius: var(--r-lg);
  padding: 24px 0;
  transition: all 0.3s ease;
}
.perks__grid:hover {
  box-shadow: 0 20px 60px -15px rgba(23, 20, 15, 0.3);
}
.perks__card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 16px;
  position: relative;
  transition: transform 0.3s ease;
}
.perks__card:hover {
  transform: translateY(-2px);
}

.perks__icon {
  flex: 0 0 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand-lift);
  transition: all 0.3s ease;
}
.perks__card:hover .perks__icon {
  background: color-mix(in srgb, var(--brand) 20%, transparent);
  transform: scale(1.1);
}
.perks__icon svg { width: 20px; height: 20px; }
.perks__text { display: flex; flex-direction: column; gap: 2px; }
.perks__text b {
  font-family: var(--display);
  font-size: 0.88rem; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--paper-fixed);
}
.perks__text span { font-size: 0.76rem; color: var(--faint); }

@media (max-width: 900px) {
  .perks__grid { grid-template-columns: repeat(2, 1fr); gap: 16px 0; }
  .perks__card + .perks__card::before { display: none; }
}

@media (max-width: 620px) {
  .perks__grid { grid-template-columns: 1fr; gap: 12px 0; padding: 16px 18px; }
  .perks__card { justify-content: flex-start; padding: 0; }
}

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

.foot {  background: var(--wash); padding-block: 56px 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: 16px; color: var(--ink); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot li a { font-size: 0.9rem; color: var(--muted); transition: all 0.25s ease; display: inline-block; }
.foot li a:hover { color: var(--ink); transform: translateX(4px); }
.foot__perks {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px;
  padding: 26px 0; margin-bottom: 26px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.foot__perk { display: flex; align-items: center; gap: 12px; }
.foot__perk svg { flex: none; color: var(--ink); }
.foot__perk b { display: block; font: 700 12px/1.3 var(--display); }
.foot__perk span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.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-fixed); color: #fff; padding: 14px 24px; border-radius: var(--r-lg);
  font: 700 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  z-index: 150; transition: all 0.4s var(--ease);
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.4);
}
.toast.is-up { transform: translate(-50%, 0); }

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

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

/* stagger children */
.rise:nth-child(2) { transition-delay: 0.1s; }
.rise:nth-child(3) { transition-delay: 0.2s; }
.rise:nth-child(4) { transition-delay: 0.3s; }

/* ----------------------------------------------------------------- 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: 980px) {
  .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: 980px) {
  .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__body { 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; }
}