/* Peptiva — storefront
   White and gold: paper-white surfaces, one warm gray family, and a single
   metallic gold ramp that every accent samples from. Geist for text and
   Geist Mono for every figure. */

/* -------------------------------------------------------------- tokens */
:root {
  /* Surfaces. The page is warm off-white and cards are pure white; that one
     step of separation is what lets a card read as raised without a border.
     Everything is tinted warm (~40°) so the gold never looks like a foreign
     colour dropped onto a cool gray page. */
  --bg: #FDFBF6;
  --bg-2: #F7F2E7;
  --surface: #ffffff;
  --surface-2: #F3EDE0;
  --line: #E7DEC9;
  --line-soft: #F0E9DA;

  /* One warm gray family. No cool grays anywhere. */
  --text: #241F17;
  --muted: #6E6553;
  --muted-2: #9A907C;
  --ink: #16120C;

  /* The gold ramp. --gold is the one solid value safe to put text in on
     white (4.6:1); --gold-deep carries anything smaller or lighter-weight.
     --gold-lite and --gold-pale are surface tints, never text. */
  --gold: #9A7218;
  --gold-deep: #7A5A11;
  --gold-mid: #C9962F;
  --gold-bright: #E4BE68;
  --gold-lite: #FAF3E0;
  --gold-pale: #FDF9EF;
  --gold-line: #E2CB92;

  /* The metal itself. Used as a background on large shapes and as the paint
     behind background-clip:text — never as a flat fill behind body copy. */
  --gold-metal: linear-gradient(118deg,
    #8A5F1E 0%, #C08A2A 16%, #F5E1A4 33%, #D9B15C 48%,
    #B07E28 64%, #F0D796 83%, #96681F 100%);
  --gold-metal-soft: linear-gradient(118deg, #C9962F 0%, #F0D796 42%, #B8862F 100%);

  /* Signals — desaturated so they inform without shouting. */
  --danger: #A8352A;
  --danger-soft: #FDF2F0;
  --danger-line: #F0CCC6;
  --warn: #8A6A2F;
  --warn-soft: #FAF5EA;
  --warn-line: #E8DCC0;
  --ok: #2F7A4F;

  /* Radius: soft on containers, tighter as elements nest inward. */
  --r-xl: 20px;
  --r-lg: 16px;
  --r: 12px;
  --r-sm: 9px;
  --r-xs: 6px;

  /* Shadows carry the page's warmth instead of neutral black. */
  --shadow-sm: 0 1px 2px rgba(60, 44, 16, .06);
  --shadow-md: 0 12px 30px -10px rgba(60, 44, 16, .16), 0 2px 6px -2px rgba(60, 44, 16, .06);
  --shadow-lg: 0 28px 56px -16px rgba(60, 44, 16, .24), 0 4px 10px -4px rgba(60, 44, 16, .08);
  --shadow-gold: 0 10px 28px -12px rgba(154, 114, 24, .45);
  --ring: 0 0 0 3px rgba(154, 114, 24, .18);

  --font-sans: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;
  /* The display face for headlines and the wordmark. A serif against the sans
     body is what separates "premium" from "clean" here. */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

  --max: 1240px;
  --header-h: 118px;   /* topbar + header row; sticky offsets key off this */

  /* z-index scale — every layer in the app is named here. */
  --z-grain: 1;
  --z-header: 40;
  --z-backdrop: 80;
  --z-drawer: 90;
  --z-toast: 100;
  --z-skip: 110;
}

* { box-sizing: border-box; }

/* The hidden attribute must always win, even over rules that set display
   (e.g. .cart-drawer { display: flex }) — without this the cart drawer,
   its backdrop and the cart badge render permanently. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Grain. A flat vector page reads as sterile; ~4% noise gives the white
   surfaces a paper-like tooth. Fixed, so it never repaints on scroll. */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

h1, h2, h3, h4 {
  line-height: 1.14;
  margin: 0 0 .5em;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -.022em;
  text-wrap: balance;
}
h1 { font-weight: 650; letter-spacing: -.034em; }
p { text-wrap: pretty; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.hidden { display: none !important; }

/* Every figure on the site is monospaced and tabular, so prices in a column
   line up digit for digit. */
.num, .price .now, .price .was, .price-box .now, .price-box .was,
.cart-line-total, .sum-row span:last-child, .summary-item b, .kv b,
.order-no, .sidebar a span, .qty input, .stat b {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--r-xs); }

button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* --------------------------------------------------------- gold shine */
/* Three ways gold appears on this site, and only three:

   .gold-text  — the metal painted through the glyphs themselves. The sweep
                 is a second, brighter layer moving across the same text, so
                 the highlight travels rather than the whole word pulsing.
   .gold-rule  — a hairline of metal. Border colours cannot hold a gradient,
                 so these are backgrounds on a 1px box.
   .shine      — a specular sweep passed over a filled shape on hover.

   Anything else gets a flat token. Gradient text at body size is unreadable
   and gradient borders everywhere is how a gold theme turns into a casino. */
.gold-text {
  background: var(--gold-metal);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* A fallback for engines that ignore background-clip: without this the
     text would be invisible rather than merely flat. */
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .gold-text { color: var(--gold); -webkit-text-fill-color: currentColor; background: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .gold-text.sheen { animation: gold-drift 7s ease-in-out infinite; }
}
@keyframes gold-drift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.gold-rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--gold-line) 18%, var(--gold-mid) 50%, var(--gold-line) 82%, transparent);
}

/* Specular sweep. The element needs its own stacking context and overflow
   clip, which every caller here already has. */
.shine { position: relative; overflow: hidden; isolation: isolate; }
.shine::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .58) 48%, rgba(255, 255, 255, .9) 52%, transparent 62%);
  transform: translateX(-130%);
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
.shine:hover::after, .shine:focus-visible::after { transform: translateX(130%); }

/* Keyboard users land here first and can jump the whole header. */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: var(--z-skip);
  transform: translateY(-160%);
  background: var(--ink); color: #fff;
  padding: 11px 18px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow-lg);
  transition: transform .18s ease;
}
.skip-link:focus-visible { transform: translateY(0); outline-offset: 3px; }

/* ------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(253, 251, 246, .84);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  /* A gold hairline under the header instead of a gray border — the one
     place the metal appears sitewide, on every page. */
  box-shadow: inset 0 -1px 0 var(--gold-line), 0 1px 14px -10px rgba(60, 44, 16, .4);
}

.topbar-note {
  text-align: center; font-size: 12px; letter-spacing: .012em;
  padding: 8px 16px;
  background: var(--ink);
  color: #B6AB93;
  position: relative; overflow: hidden;
}
.topbar-note strong { font-weight: 500; }
/* The bar is the one element that shines on its own rather than on hover:
   it is the first gold on the page and it has to announce the palette. */
@media (prefers-reduced-motion: no-preference) {
  .topbar-note::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 42%, rgba(240, 215, 150, .16) 50%, transparent 58%);
    transform: translateX(-100%);
    animation: bar-sweep 9s ease-in-out infinite;
  }
}
@keyframes bar-sweep {
  0%, 62% { transform: translateX(-100%); }
  92%, 100% { transform: translateX(100%); }
}

.header-inner { display: flex; align-items: center; gap: 26px; height: 70px; }

/* Brand lockup: the SVG mark plus a serif wordmark painted in the metal.
   Setting the word as live text rather than baking it into the logo file
   keeps it crisp at every size and lets the sheen animate. */
.brand { display: flex; align-items: center; gap: 11px; }
.brand-logo { height: 42px; width: auto; display: block; flex: none; }
.brand-word {
  font-family: var(--font-display);
  font-size: 25px; font-weight: 700; letter-spacing: .085em;
  text-transform: uppercase; line-height: 1;
  padding-right: .085em;  /* the tracking would clip the last letter */
}
.brand-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 8.5px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 400; margin-top: 4px;
  padding-right: .26em;
}
.footer-brand .brand-logo { height: 46px; }

.main-nav { display: flex; gap: 2px; font-size: 14px; font-weight: 450; }
.main-nav a {
  position: relative;
  color: var(--muted); padding: 8px 12px; border-radius: var(--r-sm);
  transition: color .16s ease, background .16s ease; white-space: nowrap;
}
.main-nav a:hover { color: var(--ink); background: var(--gold-lite); }
.main-nav a.active { color: var(--ink); font-weight: 550; background: transparent; }
/* Current page is marked with a rule under the label, not a filled chip —
   it stays legible next to the hover fill instead of competing with it. */
.main-nav a.active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--gold-metal-soft);
}

.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.search { position: relative; display: flex; }
.search input {
  width: 212px; padding: 9px 38px 9px 15px;
  background: var(--surface-2); border: 1px solid transparent;
  border-radius: 999px; color: var(--text); font-size: 14px;
  font-family: inherit; outline: none;
  /* Width is deliberately fixed: growing it on focus animates layout and
     shoves the cart button sideways. The ring carries the focus instead. */
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.search input::placeholder { color: var(--muted-2); }
.search input:focus { background: var(--surface); border-color: var(--gold-line); box-shadow: var(--ring); }
.search button {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--muted); cursor: pointer; padding: 6px;
  border-radius: 999px; transition: color .16s ease;
}
.search button:hover { color: var(--gold); }

.cart-btn {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); width: 42px; height: 42px; border-radius: var(--r);
  display: grid; place-items: center; cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .12s ease;
}
.cart-btn:hover { border-color: var(--gold-line); box-shadow: var(--shadow-sm); }
.cart-btn:active { transform: scale(.96); }
.cart-count {
  position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px;
  background: var(--gold-metal-soft); color: #2A1E06; border-radius: 999px;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 10.5px; font-weight: 600; display: grid; place-items: center;
  border: 2px solid var(--bg);
}

.burger {
  display: none; background: var(--surface); border: 1px solid var(--line);
  width: 42px; height: 42px; border-radius: var(--r); cursor: pointer;
  padding: 0; place-items: center;
}
.burger span {
  display: block; width: 17px; height: 1.6px; background: var(--ink);
  margin: 3.5px auto; border-radius: 2px; transition: transform .2s ease, opacity .2s ease;
}

/* --------------------------------------------------------------- main */
/* Bottom padding runs heavier than top: optically, a footer needs more air
   above it than a sticky header needs below it.
   The element is <main class="wrap">, and `.wrap` sets padding too — on a
   plain `main` selector the class wins on specificity and the vertical
   padding silently resolves to zero, which butted the last section straight
   against the footer. `main.wrap` beats it, and padding-block leaves the
   horizontal gutter to `.wrap` where it belongs. */
main { flex: 1; }
main.wrap { padding-block: 34px 96px; }

.page-head { margin-bottom: 30px; }
.page-head h1 { font-size: clamp(27px, 3.4vw, 40px); max-width: 20ch; }
.page-head p { max-width: 62ch; }
.breadcrumbs { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.breadcrumbs a { transition: color .15s ease; }
.breadcrumbs a:hover { color: var(--gold); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------------------------------------------------------- hero */
/* Replaces the old banner image. A picture of a headline cannot be selected,
   translated, read by a screen reader or indexed, and it shipped 180KB to say
   four words — this says them in markup. */
.hero {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--line-soft);
  background:
    radial-gradient(120% 130% at 88% 8%, #FBF2DC 0%, rgba(251, 242, 220, 0) 58%),
    radial-gradient(90% 110% at 4% 96%, #FAF4E6 0%, rgba(250, 244, 230, 0) 56%),
    var(--surface);
  box-shadow: var(--shadow-sm);
  margin-bottom: 26px;
  /* padding is set with the banner rules below, as custom properties */
  isolation: isolate;
}
/* A single pool of gold light, huge and mostly off-canvas. The stops have to
   reach full transparency inside the box: a conic or hard-edged gradient here
   renders as a visible beige disc sitting on the hero rather than as light. */
.hero::before {
  content: "";
  position: absolute; z-index: -1;
  top: -55%; right: -22%; width: 78%; aspect-ratio: 1;
  background: radial-gradient(closest-side,
    rgba(201, 150, 47, .2) 0%,
    rgba(228, 190, 104, .13) 42%,
    rgba(240, 215, 150, .05) 68%,
    transparent 82%);
}
.hero-inner { max-width: 44rem; position: relative; z-index: 1; }

/* The product photograph, filling the hero with the copy set over it.
   The figure is still first in the markup, so document order matches what is
   on screen for a screen reader and for the LCP measurement.

   Three things make text legible on a photograph that is white in one corner
   and near-black in another:

   1. object-position puts the pens and boxes on the right, where no text is.
   2. mix-blend-mode: multiply drops the photo's white background into the
      hero's warm gradient, so the picture has no visible rectangular edge.
   3. The scrim below is opaque on the left and clears by the middle. It is a
      white veil rather than a dark one because the ink stays dark — the
      panel keeps the white-and-gold identity instead of turning into the
      dark-photo-with-white-text hero every other shop uses.

   The stops are not eyeballed: the composited pixels under every line of text
   were sampled and checked against WCAG, and the weakest of them is recorded
   in the note above the mobile override. */
.hero {
  --hero-py: clamp(34px, 5vw, 66px);
  --hero-px: clamp(22px, 4vw, 58px);
  padding: var(--hero-py) var(--hero-px);
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-content: center;
  min-height: clamp(400px, 42vw, 540px);
}

.hero-media { position: absolute; inset: 0; margin: 0; z-index: 0; pointer-events: none; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 86% 50%; mix-blend-mode: multiply; }

/* The veil has to stay near-opaque across the whole text column and only then
   fall away, which is why the column is capped at 38rem above: the narrower
   the copy, the more photograph is left uncovered. The first measurement of
   this hero failed exactly here — the column ran to 63% of the width while
   the scrim had already dropped to .28 by that point. */
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(96deg,
    rgba(255, 255, 255, .97) 0%,
    rgba(255, 255, 255, .96) 45%,
    rgba(255, 255, 255, .93) 58%,
    rgba(255, 255, 255, .40) 71%,
    rgba(255, 255, 255, .06) 85%,
    rgba(255, 255, 255, 0) 100%);
}
@media (min-width: 900px) {
  .hero-inner { max-width: 38rem; }
}

/* Below 900px the copy runs the full width, so a left-to-right scrim would
   leave the last words of every line on bare photograph — the veil goes flat
   instead.

   object-position matters more here than the veil does. A 1.92:1 photograph
   cropped into a tall phone hero is magnified about twofold, so whatever sits
   under the crop is shown huge: centred, that is the lettering on a carton,
   and blurred half-words behind a headline look like a mistake however well
   they measure for contrast. Framing the left edge instead picks up the white
   background, the gold molecule and the pen cap — shapes rather than type. */
@media (max-width: 899px) {
  .hero { min-height: 0; }
  .hero-media img { object-position: 9% 46%; }
  .hero-media::after {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, .80) 0%,
      rgba(255, 255, 255, .88) 40%,
      rgba(255, 255, 255, .92) 100%);
  }
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 500;
  background: var(--gold-pale); border: 1px solid var(--gold-line);
  padding: 6px 13px; border-radius: 999px; margin-bottom: 22px;
}
.hero-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-mid); box-shadow: 0 0 0 3px rgba(201, 150, 47, .2);
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 5.4vw, 62px);
  line-height: 1.04; letter-spacing: -.028em; font-weight: 700;
  margin: 0 0 18px;
}
.hero-title em { font-style: normal; }

.hero-lead { font-size: clamp(15.5px, 1.5vw, 18px); color: var(--muted); max-width: 54ch; margin: 0 0 30px; }

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* Four figures under the fold-line. Mono and tabular so they read as
   measurements rather than marketing. */
.hero-stats {
  display: flex; flex-wrap: wrap; gap: 0 clamp(24px, 4vw, 48px);
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}
.stat { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; }
.stat b { font-size: 21px; font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
.stat span { font-size: 12px; color: var(--muted); }

/* -------------------------------------------------------- trust strip */
/* Four floating shadowed cards is the stock "feature row". One bordered
   instrument panel with hairline dividers reads as a spec plate instead. */
.badges {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.home-badges { margin: 0 0 8px; }

.badge {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 19px 20px;
  border-right: 1px solid var(--line-soft);
  font-size: 12.5px; line-height: 1.5; color: var(--muted);
}
.badge:last-child { border-right: 0; }
.badge b {
  color: var(--ink); font-weight: 550; display: block;
  font-size: 13.5px; letter-spacing: -.012em; margin-bottom: 2px;
}
.badge-icon {
  width: 34px; height: 34px; border-radius: var(--r-sm); flex: none;
  background: var(--gold-lite); color: var(--gold-deep);
  border: 1px solid var(--gold-line);
  display: grid; place-items: center;
}

/* ---------------------------------------------------- category tiles */
/* The old homepage went straight from banner to a 200-item grid. These give
   the catalogue a way in that is not "scroll until something looks right". */
.cat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.cat-tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 132px; padding: 18px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--surface) 46%, var(--gold-pale));
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.cat-tile:hover { border-color: var(--gold-line); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cat-tile-icon {
  position: absolute; top: 16px; left: 18px;
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: var(--gold-lite); border: 1px solid var(--gold-line);
  color: var(--gold-deep); display: grid; place-items: center;
}
.cat-tile b { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; display: block; }
.cat-tile span { font-size: 12.5px; color: var(--muted); }

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--r); border: 1px solid transparent;
  font-size: 14.5px; font-weight: 550; letter-spacing: -.008em;
  cursor: pointer; font-family: inherit;
  transition: transform .12s cubic-bezier(.34, 1.56, .64, 1),
              background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.99); }

/* The primary button is the metal itself. Ink-dark text on it rather than
   white: white on mid-gold fails contrast at this size. */
.btn-primary {
  background: var(--gold-metal); background-size: 180% 100%;
  color: #221803; box-shadow: var(--shadow-gold);
  position: relative; overflow: hidden; isolation: isolate;
  background-position: 0% 50%;
  transition: transform .12s cubic-bezier(.34, 1.56, .64, 1),
              background-position .5s ease, box-shadow .16s ease;
}
.btn-primary:hover { background-position: 100% 50%; box-shadow: 0 14px 34px -12px rgba(154, 114, 24, .6); }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .5) 50%, transparent 60%);
  transform: translateX(-130%);
  transition: transform .75s cubic-bezier(.22, 1, .36, 1);
}
.btn-primary:hover::after, .btn-primary:focus-visible::after { transform: translateX(130%); }

.btn-ghost { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--gold-line); color: var(--gold-deep); background: var(--gold-pale); }
/* Third tier, so a screen never has to choose between two loud buttons. */
.btn-text {
  background: none; border: 0; color: var(--gold-deep); padding: 12px 4px;
  text-decoration: underline; text-decoration-color: var(--gold-line); text-underline-offset: 3px;
}
.btn-text:hover { text-decoration-color: currentColor; }
.btn-block { width: 100%; }
/* The buy button takes the rest of the row next to the quantity stepper. */
.btn-buy { flex: 1; min-width: 190px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primary:disabled::after { display: none; }

/* On the dark CTA band and the footer, ghost buttons need the inverse. */
.on-dark .btn-ghost { background: transparent; border-color: rgba(226, 203, 146, .34); color: #F4EEE0; }
.on-dark .btn-ghost:hover { border-color: var(--gold-bright); color: #fff; background: rgba(226, 203, 146, .09); }

/* -------------------------------------------------------- section head */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin: 64px 0 24px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.7vw, 30px); margin: 0; letter-spacing: -.024em; font-weight: 700;
}
.section-head a {
  font-size: 13.5px; font-weight: 550; color: var(--gold-deep); white-space: nowrap;
  transition: color .15s ease;
}
.section-head a:hover { color: var(--gold-mid); }
.section-head p { margin: 6px 0 0; font-size: 14px; }
.section-head > div { min-width: 0; }

/* ---------------------------------------------------------- shop grid */
.shop-layout { display: grid; grid-template-columns: 244px 1fr; gap: 40px; align-items: start; }

.sidebar {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: 14px;
  position: sticky; top: calc(var(--header-h) + 12px);
  box-shadow: var(--shadow-sm);
}
.sidebar h4 {
  font-family: var(--font-mono);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted-2); font-weight: 500; margin: 4px 10px 12px;
}
.sidebar a {
  display: flex; justify-content: space-between; gap: 8px; align-items: center;
  padding: 9px 12px; border-radius: var(--r-sm); font-size: 14px; color: var(--muted);
  transition: background .14s ease, color .14s ease;
}
.sidebar a:hover { background: var(--surface-2); color: var(--ink); }
.sidebar a.active { background: var(--gold-lite); color: var(--gold-deep); font-weight: 550; }
.sidebar a span { font-size: 11px; color: var(--muted-2); }
.sidebar a.active span { color: var(--gold); }

.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 22px; flex-wrap: wrap;
}
.toolbar select {
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  padding: 9px 13px; border-radius: var(--r-sm); font-size: 14px;
  font-family: inherit; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.toolbar select:hover { border-color: var(--gold-line); }
.toolbar select:focus-visible { border-color: var(--gold); box-shadow: var(--ring); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }

/* ------------------------------------------------------- product card */
.card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card:hover { border-color: var(--gold-line); transform: translateY(-3px); box-shadow: var(--shadow-md); }

.card-media {
  position: relative; aspect-ratio: 1; overflow: hidden;
  background: linear-gradient(168deg, var(--surface) 40%, var(--gold-pale));
  border-bottom: 1px solid var(--line-soft);
}
.card-media img { width: 100%; height: 100%; object-fit: contain; padding: 16px; transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.card:hover .card-media img { transform: scale(1.05); }
/* The sweep rides the photo panel, not the whole card: over the body copy it
   would flash the text. */
.card-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 249, 232, .72) 50%, transparent 60%);
  transform: translateX(-130%);
  transition: transform .85s cubic-bezier(.22, 1, .36, 1);
}
.card:hover .card-media::after { transform: translateX(130%); }

.tag-row { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; z-index: 1; }
/* Squared flags, not pills — a pill badge is the stock component look. */
.pill {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 7px; border-radius: var(--r-xs); line-height: 1.4;
}
.pill-sale { background: var(--danger); color: #fff; }
.pill-new { background: var(--ink); color: var(--gold-bright); }
.pill-best { background: var(--gold-metal-soft); color: #2A1E06; }
.pill-out { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }

.card-body { padding: 15px 16px 16px; display: flex; flex-direction: column; flex: 1; gap: 6px; }
.card-cat {
  font-family: var(--font-mono);
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted-2); font-weight: 400;
}
.card-title {
  font-size: 14.5px; font-weight: 550; line-height: 1.4; margin: 0;
  color: var(--ink); letter-spacing: -.012em;
  transition: color .15s ease;
}
.card-title:hover { color: var(--gold-deep); }
/* margin-top:auto pins every foot to the card's bottom edge, so prices and
   buttons form one straight line across a row of uneven titles. */
.card-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 12px; }

.price { display: flex; flex-direction: column; line-height: 1.25; }
.price .now { font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -.03em; }
.price .was { font-size: 11.5px; color: var(--muted-2); text-decoration: line-through; }
.price .ask { font-size: 13px; color: var(--warn); font-weight: 550; }

.add-btn {
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); border-radius: var(--r-sm); padding: 8px 13px;
  font-size: 13px; font-weight: 550; cursor: pointer; font-family: inherit; white-space: nowrap;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .12s ease;
}
.add-btn:hover:not(:disabled) { background: var(--gold-metal-soft); border-color: var(--gold-line); color: #241A04; }
.add-btn:active:not(:disabled) { transform: scale(.96); }
.add-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Cards cascade in rather than all appearing at once. Capped at 8 steps so a
   200-product page never staggers past a quarter second. */
@media (prefers-reduced-motion: no-preference) {
  .grid > .card, .blog-grid > .blog-card { animation: rise .45s cubic-bezier(.22, 1, .36, 1) backwards; }
  .grid > .card:nth-child(1),  .blog-grid > .blog-card:nth-child(1)  { animation-delay: 0ms; }
  .grid > .card:nth-child(2),  .blog-grid > .blog-card:nth-child(2)  { animation-delay: 35ms; }
  .grid > .card:nth-child(3),  .blog-grid > .blog-card:nth-child(3)  { animation-delay: 70ms; }
  .grid > .card:nth-child(4),  .blog-grid > .blog-card:nth-child(4)  { animation-delay: 105ms; }
  .grid > .card:nth-child(5),  .blog-grid > .blog-card:nth-child(5)  { animation-delay: 140ms; }
  .grid > .card:nth-child(6),  .blog-grid > .blog-card:nth-child(6)  { animation-delay: 175ms; }
  .grid > .card:nth-child(7),  .blog-grid > .blog-card:nth-child(7)  { animation-delay: 200ms; }
  .grid > .card:nth-child(n+8), .blog-grid > .blog-card:nth-child(n+8) { animation-delay: 230ms; }
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

/* The listing page's body copy, under the grid. Set apart from the products
   by a rule and a narrower measure so it reads as an explanatory note rather
   than as another row of content. */
.listing-note {
  margin-top: 48px; padding-top: 28px;
  border-top: 1px solid var(--line-soft);
  max-width: 72ch;
}
.listing-note p { font-size: 14px; }
.listing-note p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------- split band */
/* Copy on one side, a numbered spec list on the other. Used for the "how we
   verify a batch" section, which is the whole argument for the price. */
.split {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
  margin-top: 64px; padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--surface) 40%, var(--gold-pale));
  box-shadow: var(--shadow-sm);
}
.split h2 { font-family: var(--font-display); font-size: clamp(23px, 2.8vw, 32px); font-weight: 700; }
.split p { color: var(--muted); max-width: 46ch; }
.split-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.step {
  display: grid; grid-template-columns: 38px 1fr; gap: 16px; align-items: start;
  padding: 16px 0; border-bottom: 1px solid var(--line-soft);
}
.step:last-child { border-bottom: 0; }
.step i {
  font-family: var(--font-mono); font-style: normal; font-size: 12px; font-weight: 500;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--gold-line); color: var(--gold-deep);
  display: grid; place-items: center;
}
.step b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -.018em; margin-bottom: 2px; }
.step span { font-size: 13.5px; color: var(--muted); line-height: 1.6; }

/* ----------------------------------------------------------- CTA band */
.cta-band {
  margin-top: 72px; padding: clamp(34px, 5vw, 58px);
  border-radius: var(--r-xl);
  background:
    radial-gradient(90% 140% at 12% 0%, #2A2115 0%, rgba(42, 33, 21, 0) 62%),
    var(--ink);
  color: #E9E2D3; text-align: center;
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--gold-metal);
}
.cta-band h2 { font-family: var(--font-display); color: #fff; font-size: clamp(24px, 3vw, 34px); font-weight: 700; }
.cta-band p { max-width: 56ch; margin: 0 auto 26px; color: #B6AB93; font-size: 15px; }
.cta-band .hero-actions { justify-content: center; }

/* ------------------------------------------------------- product page */
.product-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.product-gallery {
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: radial-gradient(120% 90% at 50% 0%, var(--surface) 45%, var(--gold-pale));
  overflow: hidden; position: sticky; top: calc(var(--header-h) + 12px);
  box-shadow: var(--shadow-sm);
}
/* height:auto matters: the <img> now carries intrinsic width/height attributes
   for layout-shift reasons, and an attribute height is a presentational hint
   that would otherwise pin the box at 900px and switch aspect-ratio off. */
.product-gallery img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; padding: 34px; }

.product-info h1 { font-family: var(--font-display); font-size: clamp(26px, 3.1vw, 37px); font-weight: 700; }
.product-brand {
  font-family: var(--font-mono);
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--gold); font-weight: 500; margin-bottom: 10px;
}
.product-lead { color: var(--muted); font-size: 15.5px; max-width: 58ch; }

.price-box {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 24px 0; padding: 20px 22px;
  border: 1px solid var(--gold-line);
  border-radius: var(--r-lg); background: var(--gold-pale);
}
.price-box .now { font-size: 30px; font-weight: 600; color: var(--ink); letter-spacing: -.04em; }
.price-box .was { font-size: 15px; color: var(--muted-2); text-decoration: line-through; }
.price-box .ask { font-size: 20px; color: var(--warn); font-weight: 550; }
.save-pill {
  background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger-line);
  font-size: 12px; font-weight: 550; padding: 5px 10px; border-radius: var(--r-xs);
}
.vat-note { font-size: 12.5px; color: var(--muted); width: 100%; }

.buy-row { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.qty button {
  width: 42px; align-self: stretch; background: none; border: 0; color: var(--muted);
  font-size: 18px; cursor: pointer; transition: color .14s ease, background .14s ease;
}
.qty button:hover { color: var(--gold-deep); background: var(--gold-lite); }
.qty input {
  width: 46px; text-align: center; background: none; border: 0;
  color: var(--ink); font-size: 15px; font-weight: 550;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.stock-line { display: flex; align-items: center; gap: 9px; font-size: 13.5px; margin: 18px 0; color: var(--ink); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(47, 122, 79, .14); }
.dot.off { background: var(--muted-2); box-shadow: 0 0 0 4px rgba(154, 144, 124, .14); }

.usp-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 11px; font-size: 14px; color: var(--muted); }
.usp-list li { display: flex; gap: 11px; align-items: flex-start; }
.usp-list svg { color: var(--gold); flex: none; margin-top: 4px; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 26px; }
.tag {
  font-size: 11.5px; color: var(--muted); background: var(--surface-2);
  border: 1px solid transparent; padding: 4px 9px; border-radius: var(--r-xs);
  transition: border-color .15s ease, color .15s ease;
}
.tag:hover { border-color: var(--gold-line); color: var(--ink); }

/* Long-form copy: ~68 characters, the readable measure. */
.product-desc { margin-top: 64px; border-top: 1px solid var(--line); padding-top: 40px; max-width: 68ch; }
.product-desc h2 { font-family: var(--font-display); font-size: 23px; margin-top: 38px; font-weight: 700; }
.product-desc h3 { font-size: 17px; margin-top: 28px; }
.product-desc p, .product-desc li { color: #443C2E; font-size: 15.5px; }
.product-desc a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--gold-line); }
.product-desc a:hover { text-decoration-color: currentColor; }
.product-desc ul, .product-desc ol { padding-left: 20px; }
.product-desc table {
  width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.product-desc th, .product-desc td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; }
.product-desc th { background: var(--gold-lite); font-weight: 550; color: var(--ink); }
.product-desc img { border-radius: var(--r); margin: 16px 0; }
/* Imported descriptions carry wide spec tables. Each gets its own scroll box
   so the page body never scrolls sideways on a phone. */
.table-scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.table-scroll table { margin: 20px 0; min-width: 460px; }

/* --------------------------------------------------------------- cart */
.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(22, 18, 12, .4);
  backdrop-filter: blur(2px); z-index: var(--z-backdrop);
  animation: fade .2s ease;
}
@keyframes fade { from { opacity: 0; } }

.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 100%);
  background: var(--surface); z-index: var(--z-drawer);
  display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
  animation: slide-in .28s cubic-bezier(.22, 1, .36, 1);
  border-left: 1px solid var(--gold-line);
}
@keyframes slide-in { from { transform: translateX(100%); } }
.cart-drawer header { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line-soft); }
.cart-drawer header h3 { margin: 0; font-size: 16px; letter-spacing: -.02em; }
.cart-drawer header button {
  background: none; border: 0; color: var(--muted); font-size: 24px; line-height: 1;
  cursor: pointer; width: 40px; height: 40px; margin: -8px -10px -8px 0; border-radius: var(--r-sm);
  transition: background .14s ease, color .14s ease;
}
.cart-drawer header button:hover { background: var(--surface-2); color: var(--ink); }
#cart-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.cart-items { flex: 1; overflow-y: auto; padding: 14px 22px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.cart-item { display: grid; grid-template-columns: 58px 1fr auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); align-items: center; }
.cart-item:last-child { border-bottom: 0; }
.cart-item img { width: 58px; height: 58px; object-fit: contain; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 4px; }
.cart-item-name { font-size: 13.5px; line-height: 1.4; margin-bottom: 5px; font-weight: 500; color: var(--ink); display: block; transition: color .15s ease; }
.cart-item-name:hover { color: var(--gold-deep); }
.cart-item-end { text-align: right; }
.cart-qty { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cart-qty button {
  width: 26px; height: 26px; border-radius: var(--r-xs); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); cursor: pointer; line-height: 1; font-size: 13px;
  transition: border-color .14s ease, color .14s ease, transform .1s ease;
}
.cart-qty button:hover { border-color: var(--gold-line); color: var(--gold-deep); }
.cart-qty button:active { transform: scale(.92); }
.cart-line-total { font-weight: 600; font-size: 13.5px; white-space: nowrap; color: var(--ink); letter-spacing: -.02em; }
.cart-remove {
  display: block; background: none; border: 0; color: var(--muted-2); font-size: 11.5px;
  cursor: pointer; padding: 4px 0 0; margin-left: auto; transition: color .14s ease;
}
.cart-remove:hover { color: var(--danger); }

.cart-foot {
  border-top: 1px solid var(--line);
  padding: 18px 22px calc(22px + env(safe-area-inset-bottom, 0px));
  background: var(--gold-pale);
}
.sum-row { display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; margin-bottom: 8px; color: var(--muted); }
.sum-row.total {
  font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -.02em;
  margin: 12px 0 16px; padding-top: 12px; border-top: 1px solid var(--line);
}
.ship-hint {
  font-size: 12.5px; color: var(--gold-deep); font-weight: 550; margin-bottom: 12px;
  background: var(--gold-lite); border: 1px solid var(--gold-line);
  border-radius: var(--r-xs); padding: 7px 10px;
}

.empty-state { text-align: center; padding: 64px 24px; color: var(--muted); max-width: 46ch; margin: 0 auto; }
/* Recessive but still legible — var(--line) alone all but disappears on white. */
.empty-state svg { color: var(--gold-line); margin: 0 auto 16px; }
.empty-state h1, .empty-state h2 { margin-bottom: .4em; }
.empty-state p { margin-bottom: 22px; }

/* ----------------------------------------------------------- checkout */
.checkout-layout { display: grid; grid-template-columns: 1fr 390px; gap: 36px; align-items: start; }
.panel {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: 26px; box-shadow: var(--shadow-sm);
}
.panel + .panel { margin-top: 20px; }
.panel h3 { font-size: 15.5px; margin-bottom: 20px; display: flex; align-items: center; gap: 11px; letter-spacing: -.02em; }
.panel h3 i {
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--gold-lite); border: 1px solid var(--gold-line);
  color: var(--gold-deep); display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 11.5px; font-style: normal; font-weight: 500;
  /* Optical nudge: a digit's ink sits high in its box, so mathematical
     centring inside a circle reads a hair too low. */
  padding-bottom: 1px;
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; color: var(--ink); font-weight: 500; }
.field input, .field textarea {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 11px 13px; color: var(--text); font-size: 14.5px; font-family: inherit; outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field input:hover, .field textarea:hover { border-color: var(--muted-2); }
.field input:focus, .field textarea:focus { border-color: var(--gold); box-shadow: var(--ring); }
.field textarea { resize: vertical; min-height: 84px; line-height: 1.6; }
/* Scoped to direct children of a panel: inside .form-grid the grid gap already
   spaces the fields, and a margin here would double it. */
.panel > .field + .field { margin-top: 14px; }
.panel > .pay-options + .field { margin-top: 18px; }
.panel > .field + .btn { margin-top: 18px; }
.field .err { font-size: 12px; color: var(--danger); }
.field .err:empty { display: none; }
.field.invalid input, .field.invalid textarea { border-color: var(--danger); }
.field.invalid input:focus, .field.invalid textarea:focus { box-shadow: 0 0 0 3px rgba(168, 53, 42, .14); }

.pay-options { display: grid; gap: 10px; }
.pay-option {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r); cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.pay-option:hover { border-color: var(--gold-line); }
.pay-option input { margin-top: 4px; accent-color: var(--gold); flex: none; }
.pay-option .pay-icon {
  width: 36px; height: 36px; border-radius: var(--r-sm); flex: none;
  background: var(--surface-2); color: var(--muted);
  display: grid; place-items: center;
  transition: background .16s ease, color .16s ease;
}
.pay-option.selected .pay-icon { background: var(--gold-lite); color: var(--gold-deep); }
.pay-option.selected { border-color: var(--gold); background: var(--gold-pale); box-shadow: inset 0 0 0 1px var(--gold); }
.pay-option b { display: block; font-size: 14.5px; margin-bottom: 2px; color: var(--ink); font-weight: 550; }
.pay-option span { font-size: 12.5px; color: var(--muted); line-height: 1.55; }

/* Waiting for the PayToLink controller to hand back a link. A thin ring reads
   as "working" without demanding attention — the surrounding copy carries the
   message. */
.paylink-spinner {
  width: 26px; height: 26px; margin: 14px 0 4px;
  border: 2px solid var(--gold-line);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: paylink-spin .9s linear infinite;
}
@keyframes paylink-spin { to { transform: rotate(360deg); } }

.consent { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; color: var(--muted); margin-top: 6px; cursor: pointer; }
.consent input { margin-top: 4px; accent-color: var(--gold); flex: none; }
.consent a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }

.summary { position: sticky; top: calc(var(--header-h) + 12px); }
.summary-items { max-height: 320px; overflow-y: auto; margin-bottom: 16px; overscroll-behavior: contain; }
.summary-item { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.summary-item span { color: var(--muted); font-size: 12.5px; }
.summary-item b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.fineprint { font-size: 12px; color: var(--muted); margin: 12px 0 0; text-align: center; line-height: 1.5; }

.alert { padding: 13px 16px; border-radius: var(--r-sm); font-size: 14px; margin-bottom: 18px; }
.alert-error { background: var(--danger-soft); border: 1px solid var(--danger-line); color: var(--danger); text-align: left; }

/* -------------------------------------------------- order confirmation */
.confirm { max-width: 660px; margin: 0 auto; text-align: center; padding: 24px 0; }
.confirm-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--gold-metal-soft); color: #241A04;
  display: grid; place-items: center; margin: 0 auto 24px;
  box-shadow: 0 0 0 8px rgba(201, 150, 47, .1);
}
.order-no { font-size: 24px; font-weight: 600; color: var(--gold-deep); letter-spacing: .01em; margin: 8px 0 16px; }
.confirm-panel { text-align: left; margin-top: 26px; }
.confirm-panel .fineprint { text-align: left; margin-top: 14px; }
/* The "pay with card" button sits below a short paragraph and a total row, so
   it needs a little breathing room to read as the primary action. */
.btn-pay { margin-top: 16px; padding: 14px 24px; font-size: 15px; }
.kv { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.kv:last-child { border-bottom: 0; }
.kv span { color: var(--muted); }
.kv b { font-weight: 600; color: var(--ink); text-align: right; }
.kv a { color: var(--gold-deep); transition: color .15s ease; }
.kv a:hover { color: var(--gold-mid); }
.kv .note { color: var(--muted); font-weight: 400; font-size: 13px; }
.kv-total { font-size: 17px; padding-top: 14px; border-bottom: 0; }
.kv-total b { color: var(--gold-deep); }
.mono { font-family: var(--font-mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.confirm-actions { margin-top: 32px; }

.status-badge {
  display: inline-block; padding: 5px 11px; border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
}
.st-pending { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-line); }
.st-paid, .st-processing { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
.st-shipped { background: var(--gold-lite); color: var(--gold-deep); border: 1px solid var(--gold-line); }
.st-completed { background: #EAF4EE; color: var(--ok); border: 1px solid #C9E3D3; }
.st-cancelled, .st-refunded { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger-line); }

/* --------------------------------------------------------------- blog */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }

.blog-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.blog-card:hover { border-color: var(--gold-line); transform: translateY(-3px); box-shadow: var(--shadow-md); }

.blog-cover {
  display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: linear-gradient(168deg, var(--surface) 40%, var(--gold-pale));
  border-bottom: 1px solid var(--line-soft);
}
.blog-cover img { width: 100%; height: 100%; object-fit: contain; padding: 14px; transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.blog-card:hover .blog-cover img { transform: scale(1.04); }

.blog-card-body { padding: 17px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
/* Mono and tracked, not the usual shouting uppercase date. */
.blog-date { font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); letter-spacing: .04em; }
.blog-title { font-size: 16.5px; font-weight: 600; line-height: 1.35; color: var(--ink); letter-spacing: -.024em; transition: color .15s ease; }
.blog-title:hover { color: var(--gold-deep); }
.blog-excerpt { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.6; }
.blog-more { margin-top: auto; padding-top: 8px; font-size: 13.5px; font-weight: 550; color: var(--gold-deep); transition: color .15s ease; }
.blog-more:hover { color: var(--gold-mid); }

.post { max-width: 72ch; margin: 0 auto; }
.post-title { font-family: var(--font-display); font-size: clamp(28px, 3.7vw, 44px); margin-top: 8px; font-weight: 700; }
.post-meta { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted-2); margin-bottom: 28px; letter-spacing: .02em; }
.post-cover {
  border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden;
  background: linear-gradient(168deg, var(--surface) 40%, var(--gold-pale)); margin-bottom: 32px;
}
.post-cover img { width: 100%; max-height: 380px; object-fit: contain; padding: 24px; }
.post-body { margin-top: 0; border-top: 0; padding-top: 0; max-width: none; }
.post-body h2 { font-size: 24px; }

/* -------------------------------------------------------- static pages */
.prose { max-width: 68ch; }
.prose h2 { font-family: var(--font-display); margin-top: 38px; font-size: 22px; font-weight: 700; }
.prose h3 { margin-top: 26px; font-size: 16px; }
.prose p, .prose li { color: #443C2E; }
.prose a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--gold-line); }
.prose a:hover { text-decoration-color: currentColor; }
/* Panels used as list rows inside prose (partner sites, contact blocks). */
.prose .panel { margin-top: 16px; }
.prose .panel p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- skeletons */
/* Shaped like the content they stand in for, so the layout does not jump
   when the real markup lands. */
.sk { background: var(--surface-2); border-radius: var(--r-xs); position: relative; overflow: hidden; }
.sk::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

.sk-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.sk-media { aspect-ratio: 1; border-radius: 0; }
.sk-cover { aspect-ratio: 16 / 9; border-radius: 0; }
.sk-body { padding: 15px 16px 16px; display: flex; flex-direction: column; gap: 9px; }
.sk-line { height: 10px; }
.sk-line.w40 { width: 40%; }
.sk-line.w60 { width: 60%; }
.sk-line.w80 { width: 80%; }
.sk-line.tall { height: 15px; }
.sk-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 8px; }
.sk-foot .sk:first-child { width: 72px; height: 18px; }
.sk-foot .sk:last-child { width: 88px; height: 32px; border-radius: var(--r-sm); }
.sk-gallery { aspect-ratio: 1; border-radius: var(--r-xl); }
.sk-block { height: 96px; border-radius: var(--r-lg); }
.sk-title { height: 30px; width: 70%; }
.sk-stack { display: flex; flex-direction: column; gap: 13px; }
/* Same height as the rendered hero and trust strip, so the fold does not
   shift when the real markup lands. */
.sk-hero { height: 430px; border-radius: var(--r-xl); margin-bottom: 26px; }
.sk-strip { height: 74px; border-radius: var(--r-lg); margin-bottom: 8px; }

/* -------------------------------------------------------------- misc */
/* Top-right, under the sticky header. Both bottom corners are taken by fixed
   widgets — the chat bubble on the right, the language switcher on the left —
   and the bottom-right corner is also where the cart drawer's "Till kassan"
   button lands the moment a toast fires, because adding to the cart is what
   opens the drawer. A toast that covers the checkout button is worse than no
   toast. The top edge is the only one with nothing permanent on it. */
.toast-stack {
  position: fixed; top: calc(var(--header-h) + 12px); right: 22px;
  z-index: var(--z-toast); display: flex; flex-direction: column; gap: 10px;
}
@keyframes toast-in-top { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
.toast {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--gold-mid);
  color: var(--ink); padding: 13px 17px; border-radius: var(--r); font-size: 14px;
  box-shadow: var(--shadow-md); animation: toast-in-top .24s cubic-bezier(.22, 1, .36, 1); max-width: 330px;
}
.toast.err { border-left-color: var(--danger); }

/* The language switcher mounts itself fixed at bottom-left with a z-index far
   above everything on the page, so it floats over the cart drawer's backdrop
   while that modal is open — a live control outside a focus-trapped dialog.
   The backdrop precedes the wrapper in the markup, so a sibling selector can
   hide it without app.js needing to know the widget exists. */
#drawer-backdrop:not([hidden]) ~ .gtranslate_wrapper { display: none; }

/* Adding to the cart fires a toast *and* opens the drawer, so those two always
   co-occur — and at top-right the toast lands inside the panel. It cannot just
   be suppressed: the toast stack is the aria-live region that announces the
   addition, and the drawer opening is not announced on its own. So it moves to
   the other side for as long as the panel is up. Only above the drawer's
   breakpoint; below it the panel is full width and there is no clear side. */
@media (min-width: 761px) {
  #drawer-backdrop:not([hidden]) ~ .toast-stack { right: auto; left: 22px; }
}

/* --------------------------------------------------------------- 404 */
.notfound { text-align: center; padding: 72px 20px 40px; max-width: 54ch; margin: 0 auto; }
.notfound-code {
  font-family: var(--font-mono); font-size: clamp(64px, 13vw, 120px); font-weight: 500;
  line-height: 1; letter-spacing: -.05em; color: var(--gold-lite);
  /* Outline-first: the numeral reads as a drawn form, not a filled slab. */
  -webkit-text-stroke: 1.5px var(--gold-line);
  margin-bottom: 10px;
}
.notfound h1 { font-family: var(--font-display); font-size: clamp(23px, 3vw, 32px); font-weight: 700; }
.notfound p { color: var(--muted); margin-bottom: 26px; }
.notfound-links { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; align-items: center; }

/* -------------------------------------------------------------- footer */
/* The footer inverts: warm ink under a gold hairline. On a page that is white
   from the header down, ending on another white block leaves the layout with
   no floor. */
.site-footer {
  background: var(--ink); color: #B6AB93;
  padding: 0 0 28px; margin-top: auto;
  border-top: 2px solid transparent;
  border-image: var(--gold-metal) 1;
}
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 36px; padding-top: 56px; }
.footer-grid h4 {
  font-family: var(--font-mono);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--gold-bright); font-weight: 500; margin-bottom: 12px;
}
.footer-grid p { font-size: 14px; max-width: 42ch; }
.footer-grid .muted { color: #9A8F79; }
.footer-grid a { display: block; font-size: 14px; color: #B6AB93; padding: 4px 0; transition: color .15s ease; }
.footer-grid a:hover { color: var(--gold-bright); }
/* Payment methods, under the contact details. Filled by the server from the
   methods checkout actually offers, so it cannot promise card where card is off. */
.footer-grid p + h4 { margin-top: 26px; }
.pay-methods { list-style: none; margin: 0; padding: 0; }
.pay-methods li { font-size: 14px; line-height: 1.5; color: #9A8F79; padding: 3px 0; }
.footer-brand { margin-bottom: 14px; }
.site-footer .brand-word { font-size: 22px; }
.site-footer .brand-tag { color: #7E7460; }

/* The research-use notice stays in the page's own palette instead of
   dropping a warm block into a cool layout — the accent rule carries it. */
.disclaimer {
  margin-top: 40px; padding: 16px 20px;
  border: 1px solid rgba(226, 203, 146, .2); border-left: 3px solid var(--gold-mid);
  background: rgba(255, 255, 255, .03); border-radius: var(--r-sm);
  font-size: 12.5px; color: #9A8F79; line-height: 1.7;
}
.disclaimer strong { color: var(--gold-bright); font-weight: 550; }
.copy { margin-top: 24px; font-size: 12px; text-align: center; color: #7E7460; }

/* --------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .badges { grid-template-columns: 1fr 1fr; }
  .badge:nth-child(2) { border-right: 0; }
  .badge:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
  .split { grid-template-columns: 1fr; }
}

/* The nav collapses into the burger well before the phone breakpoint. Seven
   labels plus the brand lockup, the search field and the cart button stop
   fitting on one row somewhere around 1150px, and a flex row does not wrap —
   it just overflows the viewport and gives the whole page a horizontal
   scrollbar. */
@media (max-width: 1150px) {
  .main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; background: var(--surface);
    border-bottom: 1px solid var(--gold-line); padding: 8px 20px 14px;
    box-shadow: var(--shadow-md);
  }
  .main-nav.open { display: flex; animation: fade .18s ease; }
  .main-nav a { padding: 13px 4px; border-radius: 0; border-bottom: 1px solid var(--line-soft); }
  .main-nav a:last-child { border-bottom: 0; }
  .main-nav a.active::after { left: 4px; right: auto; width: 18px; bottom: 8px; }
  .burger { display: grid; }
  .header-actions { margin-left: auto; }
}

@media (max-width: 1000px) {
  :root { --header-h: 106px; }
  .shop-layout, .checkout-layout, .product-layout { grid-template-columns: 1fr; }
  .summary, .product-gallery, .sidebar { position: static; }
  .product-layout { gap: 28px; }

  /* Categories collapse into one horizontally scrollable row of chips. */
  .sidebar {
    display: flex; overflow-x: auto; gap: 8px;
    border: 0; background: none; border-radius: 0; padding: 2px 20px 10px;
    margin: 0 -20px 6px; box-shadow: none;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar h4 { display: none; }
  .sidebar a {
    flex: none; background: var(--surface); border: 1px solid var(--line);
    border-radius: 999px; padding: 9px 15px; font-size: 13.5px; white-space: nowrap;
  }
  .sidebar a.active { border-color: var(--gold-line); }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .section-head { margin-top: 52px; }
}

@media (max-width: 760px) {
  :root { --header-h: 92px; }
  .topbar-note { font-size: 11.5px; padding: 7px 12px; }
  .tn-extra { display: none; }
  .header-inner { height: 60px; gap: 14px; }
  .brand-tag { display: none; }
  .brand-logo { height: 34px; }
  .brand-word { font-size: 20px; }

  /* 16px inputs stop iOS Safari from zooming the page on focus.
     Selectors mirror the base rules so specificity wins everywhere. */
  input, select, textarea,
  .field input, .field textarea, .search input,
  .toolbar select, .qty input { font-size: 16px; }

  main.wrap { padding-block: 26px 72px; }
  .hero { border-radius: var(--r-lg); margin-bottom: 18px; }
  .hero-stats { gap: 0 26px; }
  .stat b { font-size: 18px; }

  .badges { grid-template-columns: 1fr; }
  .badge { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .badge:last-child { border-bottom: 0; }
  .home-badges { margin-top: 0; }

  .form-grid { grid-template-columns: 1fr; }
  .checkout-layout { gap: 20px; }
  .panel { padding: 20px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .blog-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; padding-top: 40px; }
  .cta-band { margin-top: 52px; }

  .toast-stack { left: 16px; right: 16px; top: calc(var(--header-h) + 10px); }
  .toast { max-width: none; }
}

@media (max-width: 560px) {
  /* Header becomes: mark + wordmark · search · cart · menu.
     The wordmark stays. Dropping it left a 27px monogram as the only branding
     on the page a first-time visitor actually lands on, and at that size the
     helix is mud — the name is doing the work, not the glyph. The search field
     gives up the width instead, since it has a minimum but no ideal. */
  .brand { flex: none; gap: 7px; }
  .brand-word { font-size: 17px; letter-spacing: .06em; }
  .header-actions { flex: 1; min-width: 0; gap: 7px; }
  .search { flex: 1; min-width: 0; }
  .search input, .search input:focus { width: 100%; min-width: 0; padding-right: 32px; }
  .search button { right: 2px; padding: 5px; }
  .hero-actions .btn { width: 100%; }
}

/* 375px is the common small phone and still fits all four header items, so the
   cutoff sits below it. Under 340px search is the one that can go: it is one
   tap away on every shop page, whereas the cart and the brand are not. */
@media (max-width: 340px) {
  .search { display: none; }
  .brand-word { font-size: 19px; }
}

@media (max-width: 480px) {
  .card-body { padding: 12px 12px 14px; }
  .card-foot { flex-direction: column; align-items: stretch; gap: 9px; }
  .price { flex-direction: row; align-items: baseline; gap: 8px; }
  .price .now { font-size: 15.5px; }
  .add-btn { width: 100%; padding: 10px; font-size: 13.5px; }

  .price-box { padding: 16px; gap: 10px; }
  .price-box .now { font-size: 26px; }
  .buy-row { flex-direction: column; }
  .qty { width: 100%; justify-content: space-between; height: 48px; }
  .buy-row .btn { width: 100%; min-width: 0; padding: 14px; }
  .product-gallery img { padding: 20px; }

  .cart-item { grid-template-columns: 50px 1fr auto; gap: 10px; }
  .cart-item img { width: 50px; height: 50px; }
}

/* ------------------------------------------------------------ partners */
/* The sister storefronts on /partners. Each row is a link plus the market it
   serves, so the destination is identifiable before it is clicked — these leave
   the site, and an unlabelled outbound link reads as an ad. */
.partner-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }

.partner-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color .18s ease, transform .18s ease;
}

.partner-item:hover { border-color: var(--gold-line); transform: translateY(-1px); }
.partner-item a { font-weight: 600; text-decoration: none; }
.partner-item a:hover { text-decoration: underline; }
.partner-item .muted { font-size: 14px; }

/* ------------------------------------------------- motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .blog-card:hover, .cat-tile:hover, .btn:hover, .btn:active { transform: none; }
  .card:hover .card-media img, .blog-card:hover .blog-cover img { transform: none; }
  /* The sweeps are decoration with no state to convey — park them offscreen
     rather than letting them snap across in 0.01ms. */
  .shine::after, .btn-primary::after, .card-media::after, .topbar-note::after { display: none; }
}

/* ----------------------------------------------------- newsletter popup */
/* The welcome-discount dialog. Shares the drawer's backdrop token so the two
   overlays cannot end up at different z-indexes, and is centred rather than
   edge-anchored because it is a decision point, not a panel. */
.nl-modal {
  position: fixed; inset: 0; z-index: calc(var(--z-backdrop) + 2);
  display: grid; place-items: center; padding: 20px;
}
.nl-card {
  position: relative; width: min(460px, 100%); max-height: calc(100dvh - 40px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--card, #fff); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg, 20px); padding: 30px 28px 26px;
  box-shadow: 0 30px 80px -24px rgba(22, 18, 12, .45);
  animation: nl-rise .26s cubic-bezier(.22, 1, .36, 1);
}
@keyframes nl-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .nl-card { animation: none; } }

.nl-close {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); font-size: 22px; line-height: 1;
  cursor: pointer;
}
.nl-close:hover { background: var(--line-soft); color: var(--ink); }

.nl-eyebrow { display: block; text-align: center; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.nl-card h2 { margin: 10px 0 6px; text-align: center; font-size: 27px; line-height: 1.15; letter-spacing: -.03em; }
.nl-card h2 em { font-style: normal; }
.nl-lead { text-align: center; color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0 0 20px; }
.nl-form .field { margin-bottom: 12px; }
.nl-form .consent { margin: 14px 0 18px; }
.nl-form .btn { width: 100%; }

/* The code, once issued. Monospaced and selectable because the next thing the
   visitor does is copy it into the checkout field. */
.nl-code {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 18px 0; padding: 15px 18px; border-radius: var(--r-sm, 12px);
  border: 1px dashed var(--gold, #9a7218); background: rgba(154, 114, 24, .07);
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 20px;
  font-weight: 600; letter-spacing: .06em; color: var(--gold-deep, #7a5a12);
  user-select: all;
}
.nl-copy {
  border: 1px solid var(--line-soft); background: var(--card, #fff);
  border-radius: 8px; padding: 6px 11px; font-size: 12px; cursor: pointer;
  color: var(--muted); user-select: none; flex: none;
}
.nl-copy:hover { color: var(--ink); border-color: var(--gold, #9a7218); }
.nl-done { text-align: center; }
.nl-done .nl-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; background: rgba(154, 114, 24, .12); color: var(--gold-deep, #7a5a12); }

/* The company statement on the homepage. Reuses .split's two-column grid; the
   claim line is the visual full stop on the right, so it is centred against
   the prose rather than sitting at the top of its column. */
.company-note .company-claim { display: grid; place-items: center; }
.company-note .company-claim p {
  margin: 0; text-align: center; font-size: 19px; line-height: 1.5;
  color: var(--gold-deep, #7a5a12); max-width: 22ch;
}
@media (max-width: 760px) {
  .company-note .company-claim p { font-size: 17px; max-width: none; }
}

/* ------------------------------------------------------- payment band */
/* The accepted payment methods, scrolling under the header on the homepage.
   Markup: src/payment-band.mjs. Two identical lists translate left together;
   each is at least as wide as the band, so the second one arrives exactly
   where the first began and the loop restarts on the same picture. */
.pay-band { position: relative; padding-top: 16px; }
.pay-band > .wrap { display: flex; align-items: center; gap: 10px; }
/* The band brings its own top spacing, so the hero does not need main's. */
.pay-band:not([hidden]) + main.wrap { padding-top: 18px; }

.pay-marquee {
  --pay-gap: 14px;
  flex: 1; min-width: 0;
  display: flex; gap: var(--pay-gap);
  overflow: hidden;
  padding: 5px 0 9px;          /* room for the badges' shadow */
  /* The edges fade into whatever is behind them — the page colour and the
     grain — which a painted gradient overlay could only approximate. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
}

.pay-group {
  flex: none; min-width: 100%;
  display: flex; align-items: center; justify-content: space-around; gap: var(--pay-gap);
  margin: 0; padding: 0; list-style: none;
  animation: pay-scroll 30s linear infinite;
}
@keyframes pay-scroll {
  to { transform: translateX(calc(-100% - var(--pay-gap))); }
}
.pay-band.is-paused .pay-group { animation-play-state: paused; }
@media (hover: hover) {
  .pay-marquee:hover .pay-group { animation-play-state: paused; }
}

.pay-badge {
  flex: none; box-sizing: border-box;
  width: 76px; height: 46px; padding: 7px 9px;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: 0 2px 7px rgba(60, 44, 16, .06);
}
.pay-badge img { width: 100%; height: 100%; max-width: 58px; max-height: 31px; object-fit: contain; }

/* Bank transfer is text, so it sizes to its label instead of the logo box. */
.pay-badge-transfer {
  width: auto; padding: 0 13px;
  display: flex; gap: 7px;
  font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap;
  color: var(--ink);
}
.pay-badge-transfer svg { flex: none; color: var(--gold); }

.pay-toggle {
  flex: none; width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--muted);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.pay-toggle:hover { color: var(--gold); border-color: var(--gold-line); }
.pay-toggle .i-play,
.pay-toggle[aria-pressed="true"] .i-pause { display: none; }
.pay-toggle[aria-pressed="true"] .i-play { display: block; }

/* Transfer only (no card terminal yet): one badge, nothing to scroll. */
.pay-static {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 5px 0 9px;
}
.pay-static .pay-group { min-width: 0; animation: none; }
.pay-label { font-size: 13px; color: var(--muted); }

@media (max-width: 760px) {
  .pay-band { padding-top: 12px; }
  .pay-band:not([hidden]) + main.wrap { padding-top: 14px; }
  .pay-marquee {
    --pay-gap: 10px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  }
  .pay-group { animation-duration: 24s; }
  .pay-badge { width: 66px; height: 41px; padding: 6px 7px; border-radius: 7px; }
  .pay-badge img { max-width: 52px; max-height: 27px; }
  .pay-badge-transfer { width: auto; padding: 0 10px; font-size: 12px; }
}
@media (max-width: 400px) {
  .pay-group { animation-duration: 22s; }
  .pay-badge { width: 62px; height: 39px; }
  .pay-badge-transfer { width: auto; }
}

/* Reduced motion: no scrolling at all. The copy and the pause button go, and
   the one real list wraps so every method is still in view. */
@media (prefers-reduced-motion: reduce) {
  .pay-marquee { -webkit-mask-image: none; mask-image: none; }
  .pay-group { animation: none; flex: 1; min-width: 0; flex-wrap: wrap; justify-content: center; }
  .pay-group[aria-hidden="true"], .pay-toggle { display: none; }
}