/* ═══════════════════════════════════════════════════════════════════════
   typeart.co.uk — house style

   Ink on paper. The page is painted the logo's own paper colour (#FEFEFE) so
   the lockup sits on it without a seam. Everything else is restraint: one
   serif, one sans, hairline rules, and gold used only where the eye should
   stop. The pieces themselves are the only saturated thing on the site, and
   they are shown against darkness, because that is the only way frosted
   acrylic reads.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --paper: #FEFEFE;          /* sampled from the logo artwork */
  --paper-2: #F7F5F1;        /* the quieter band, for alternation */
  --paper-3: #F1EEE8;
  --noir: #0B0A08;           /* the gallery walls */
  --noir-2: #15130F;
  --ink: #12110E;
  --ink-soft: #2E2B25;
  --grey: #6B665C;
  --grey-faint: #A29C90;
  --line: #E7E3DB;
  --line-strong: #D2CCC0;
  --gold: #A8873C;
  --gold-soft: #C0A054;
  --gold-pale: #E8DCBC;
  --error: #8E2F22;
  --ok: #3F5D43;

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Inter", "Segoe UI", system-ui, sans-serif;

  --space: clamp(64px, 9vw, 148px);
  --gutter: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 350;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
::selection { background: var(--gold-pale); color: var(--ink); }

/* ── typography ─────────────────────────────────────────────────────────── */
h1, h2, h3, .display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.005em;
}
h1 { font-size: clamp(40px, 6.4vw, 86px); }
h2 { font-size: clamp(30px, 4.4vw, 56px); }
h3 { font-size: clamp(20px, 2.2vw, 27px); line-height: 1.2; }

p.lede {
  font-family: var(--serif);
  font-size: clamp(19px, 2.2vw, 26px);
  line-height: 1.45;
  color: var(--ink-soft);
}

.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}

/* A hairline that grows out of the heading, rather than a centred dash. */
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.rule-gold {
  border: 0; height: 1px; width: 64px; margin: 30px auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.container { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
.container.narrow { max-width: 940px; }
section { padding: var(--space) 0; position: relative; }
.center { text-align: center; }
.muted { color: var(--grey); }

a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--gold); }

/* ── scroll reveal ──────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.in { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.d1.in { transition-delay: .09s; }
.reveal.d2.in { transition-delay: .18s; }
.reveal.d3.in { transition-delay: .27s; }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 19px 44px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  position: relative;
  transition: background .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease), transform .4s var(--ease);
}
.btn:hover {
  background: var(--gold); border-color: var(--gold); color: var(--ink);
  transform: translateY(-2px);
}
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.wide { width: 100%; text-align: center; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn.small { padding: 12px 26px; font-size: 10px; }

/* A quieter call: type with a hairline that draws itself on hover. */
.link-quiet {
  display: inline-block; text-decoration: none;
  font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  padding-bottom: 6px; position: relative; color: var(--ink);
}
.link-quiet::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--line-strong);
}
/* a gold hairline draws itself over the grey one */
.link-quiet::before {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: right;
  transition: transform .55s var(--ease); z-index: 1;
}
.link-quiet:hover::before { transform: scaleX(1); transform-origin: left; }

/* ── header ─────────────────────────────────────────────────────────────── */
.ta-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
  transition: padding .4s var(--ease);
}
.ta-header .wrap {
  max-width: 1440px; margin: 0 auto;
  display: flex; align-items: center; gap: 32px;
  padding: 16px var(--gutter);
}
.brand { text-decoration: none; display: flex; align-items: center; min-width: 0; }
.brand img {
  height: 74px; width: auto; display: block;
  transition: height .4s var(--ease), opacity .3s;
}
.ta-header.tight .brand img { height: 54px; }
.brand:hover img { opacity: .78; }

.ta-header nav { margin-left: auto; display: flex; gap: 34px; align-items: center; }
.ta-header nav a {
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-soft); position: relative; padding: 4px 0;
}
.ta-header nav a.hide-m::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.ta-header nav a.hide-m:hover::after { transform: scaleX(1); transform-origin: left; }
/* the nav-link colour rules out-specify .btn, so restate the button here */
.ta-header nav a.btn { padding: 13px 28px; color: var(--paper); }
.ta-header nav a.btn:hover { color: var(--ink); }
.basket-chip {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  border: 1px solid var(--line-strong); padding: 10px 18px; color: var(--ink-soft);
  transition: border-color .35s var(--ease);
}
.basket-chip:hover { border-color: var(--gold); }
.basket-chip b { color: var(--gold); }
@media (max-width: 900px) {
  .ta-header nav .hide-m { display: none; }
  .ta-header nav { gap: 16px; }
  .brand img { height: 52px; }
  .ta-header.tight .brand img { height: 44px; }
}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero { padding: clamp(40px, 6vw, 88px) 0 clamp(40px, 5vw, 72px); }
.hero-split {
  display: grid; grid-template-columns: 1.12fr 1fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.hero-say { animation: riseIn 1.3s var(--ease) both; }
.hero-say h1 { margin-bottom: 26px; }
@keyframes riseIn { from { opacity: 0; transform: translateY(20px); } }

.hero .sub { color: var(--grey); max-width: 520px; margin: 0 0 40px; font-size: 16px; line-height: 1.85; }
/* Slightly tighter than the page default so both calls sit on one line. */
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-cta .btn { padding: 17px 32px; letter-spacing: .2em; }

/* The proposition in one picture: photograph on the left, the same photograph
   as type on the right. */
.hero-art { animation: riseIn 1.6s var(--ease) .12s both; }
.hero-art img { width: 100%; height: auto; display: block; }
.hero-art figcaption {
  margin-top: 20px; font-size: 12.5px; line-height: 1.75; color: var(--grey);
  max-width: 460px; border-left: 1px solid var(--gold); padding-left: 16px;
}
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; gap: 40px; }
  .hero-art { order: -1; }
  .hero-art figcaption { max-width: none; }
}

/* the thin band of facts under the hero */
.kicker-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; margin-top: clamp(48px, 7vw, 96px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.kicker { text-align: center; padding: 30px 12px; border-right: 1px solid var(--line); }
.kicker:last-child { border-right: 0; }
.kicker .v { font-family: var(--serif); font-size: clamp(26px, 3vw, 38px); color: var(--ink); line-height: 1; }
.kicker .k {
  font-size: 9.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  color: var(--grey); margin-top: 12px;
}
@media (max-width: 780px) {
  .kicker-row { grid-template-columns: 1fr 1fr; }
  .kicker:nth-child(2) { border-right: 0; }
  .kicker:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* ── dark gallery band: where the pieces are shown ──────────────────────── */
.noir { background: var(--noir); color: #EFEAE0; }
.noir h1, .noir h2, .noir h3 { color: #F6F2E8; }
.noir .lede { color: #B9B2A4; }
.noir .eyebrow { color: var(--gold-soft); }
.noir .rule-gold { background: linear-gradient(90deg, transparent, var(--gold-soft), transparent); }
.noir .btn { background: transparent; border-color: rgba(239,234,224,.4); color: #F6F2E8; }
.noir .btn:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--noir); }
.noir .muted { color: #8E887B; }

/* ── material cards ─────────────────────────────────────────────────────── */
.material-card {
  position: relative; text-align: left;
  display: flex; flex-direction: column;
}
.material-card .plate {
  aspect-ratio: 3 / 2; position: relative; overflow: hidden;
  background: var(--noir-2);
}
.material-card .plate img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.4s var(--ease);
}
.material-card:hover .plate img { transform: scale(1.035); }
.material-card .meta {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding-top: 22px; margin-top: 22px;
  border-top: 1px solid var(--line);
}
.noir .material-card .meta { border-top-color: rgba(239,234,224,.16); }
.material-card h3 { margin: 0; }
.material-card .price {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: .18em; color: var(--gold-soft); white-space: nowrap;
}
.material-card p { font-size: 14.5px; color: var(--grey); margin-top: 12px; line-height: 1.75; }
.noir .material-card p { color: #9A9488; }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); }
@media (max-width: 900px) { .pair { grid-template-columns: 1fr; } }

/* Plate fallbacks — only visible where no mockup image is supplied. */
.plate.acrylic { background: radial-gradient(120% 90% at 30% 20%, #3b4048 0%, #23262c 55%, #17191d 100%); }
.plate.anodised { background: radial-gradient(130% 100% at 50% 0%, #2f2c28 0%, #171512 60%, #0c0b09 100%); }

/* ── steps ──────────────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 5vw, 76px); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
.step { border-top: 1px solid var(--ink); padding-top: 26px; }
.step .num {
  font-family: var(--serif); font-size: 15px; letter-spacing: .3em;
  color: var(--gold); line-height: 1; text-transform: uppercase;
}
.step h3 { margin: 16px 0 12px; }
.step p { font-size: 14.5px; color: var(--grey); line-height: 1.8; }

/* ── product showcase (image one side, the case for it on the other) ────── */
.showcase {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(30px, 5vw, 76px); align-items: center;
}
@media (max-width: 900px) { .showcase { grid-template-columns: 1fr; } }
.showcase-art img { width: 100%; height: auto; display: block; }
.showcase-say h2 { margin-bottom: 20px; }
.price-line {
  display: flex; align-items: baseline; gap: 14px;
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line);
}
.price-big { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 42px); color: var(--ink); }
.price-line .muted { font-size: 13px; letter-spacing: .06em; }

/* ── pull quote ─────────────────────────────────────────────────────────── */
.quote { max-width: 900px; margin: 0 auto; text-align: center; }
.quote blockquote {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(24px, 3.6vw, 44px); line-height: 1.32; color: var(--ink);
}
.quote figcaption {
  margin-top: 26px; font-size: 10.5px; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase; color: var(--grey);
}

/* ── notice strips ──────────────────────────────────────────────────────── */
.notice-strip {
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  background: var(--paper-2);
  padding: 26px 30px;
  font-size: 13.5px; line-height: 1.85; color: var(--ink-soft);
}
.notice-strip strong { font-family: var(--serif); font-size: 17px; display: block; margin-bottom: 8px; }

/* ── band (multi-buy) ───────────────────────────────────────────────────── */
.band { background: var(--noir); color: #EFEAE0; }
.band h2 { color: #F6F2E8; }
.band .lede { color: #B9B2A4; }
.band .eyebrow { color: var(--gold-soft); }
.band .gold { color: var(--gold-soft); }
.band .inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) { .band .inner { grid-template-columns: 1fr; } }
.band ul.tiers { list-style: none; margin-top: 34px; }
.band ul.tiers li {
  padding: 18px 0; border-bottom: 1px solid rgba(239,234,224,.14);
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px; letter-spacing: .04em;
}
.band ul.tiers li b { font-family: var(--serif); font-weight: 400; font-size: 24px; color: var(--gold-soft); }
.band .btn { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--noir); }
.band .btn:hover { background: #EFEAE0; border-color: #EFEAE0; color: var(--noir); }

/* ── gallery ────────────────────────────────────────────────────────────── */
/* A page title set as spaced capitals rather than a sentence. */
.page-title-lg {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(46px, 9vw, 128px); line-height: 1;
  letter-spacing: .04em; text-transform: uppercase;
}

/* Two up, with the first piece running the full width — the pieces need to be
   big enough that you can see the type is type. */
/* The mockups are 3:2, so every plate stays 3:2 and nothing is ever cropped —
   the lead piece gets its scale from spanning both columns instead. */
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 48px); }
.gallery-grid .piece:first-child { grid-column: 1 / -1; }
@media (max-width: 700px) { .gallery-grid { grid-template-columns: 1fr; } }
.piece { display: block; }
.piece .plate {
  aspect-ratio: 3/2; overflow: hidden; position: relative; background: var(--noir-2);
}
.piece .plate img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.5s var(--ease);
}
.piece:hover .plate img { transform: scale(1.04); }
.piece .cap {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding-top: 18px; font-size: 12px; color: var(--grey); letter-spacing: .04em;
}
.piece .cap b { font-family: var(--serif); font-size: 19px; color: var(--ink); font-weight: 400; }
.noir .piece .cap b { color: #F6F2E8; }
.noir .piece .cap { color: #8E887B; }

/* ── forms ──────────────────────────────────────────────────────────────── */
.field { margin-bottom: 26px; }
.field label {
  display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 11px;
}
.field input[type=text], .field input[type=email], .field input[type=tel],
.field textarea, .field select {
  width: 100%; padding: 16px 18px; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: 0;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea { min-height: 170px; resize: vertical; line-height: 1.75; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(168,135,60,.1);
}
.field .help { font-size: 12.5px; color: var(--grey); margin-top: 9px; }
.field .errorlist { list-style: none; color: var(--error); font-size: 13px; margin-top: 7px; }
.check { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 16px; font-size: 13.5px; color: var(--ink-soft); }
.check input { margin-top: 4px; accent-color: var(--gold); width: 16px; height: 16px; }

.drop {
  border: 1px dashed var(--line-strong); background: var(--paper-2);
  padding: 44px 24px; text-align: center; cursor: pointer;
  transition: border-color .3s var(--ease), background .3s var(--ease);
  position: relative;
}
.drop:hover, .drop.over { border-color: var(--gold); background: #FDFBF5; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop .hint { font-size: 13px; color: var(--grey); }
.drop .thumb { max-height: 320px; max-width: 100%; margin: 0 auto; display: block; box-shadow: 0 24px 60px -30px rgba(18,17,14,.5); }
.wordcount { font-size: 12.5px; color: var(--grey); letter-spacing: .05em; margin-top: 10px; }
.wordcount b { color: var(--gold); }

.mat-chooser { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px) { .mat-chooser { grid-template-columns: 1fr; } }
input.mat-radio { position: absolute; opacity: 0; }
label.mat-option {
  display: block; border: 1px solid var(--line-strong); background: var(--paper);
  padding: 20px; cursor: pointer; text-align: left;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
label.mat-option .swatch { height: 76px; margin-bottom: 14px; position: relative; overflow: hidden; }
.swatch.acrylic { background: radial-gradient(120% 90% at 30% 20%, #454b55 0%, #26292f 55%, #191b1f 100%); }
.swatch.acrylic::after { content:""; position:absolute; inset:0; background: linear-gradient(115deg, rgba(255,255,255,.25) 0%, transparent 26%); }
.swatch.anodised { background: radial-gradient(130% 100% at 50% 0%, #35322c 0%, #181612 60%, #0c0b09 100%); }
label.mat-option h4 { font-family: var(--serif); font-weight: 400; font-size: 21px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
label.mat-option h4 span { font-family: var(--sans); font-size: 12px; letter-spacing: .16em; color: var(--gold); }
label.mat-option p { font-size: 13px; color: var(--grey); margin-top: 6px; }
input.mat-radio:checked + label.mat-option { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }

.orient-chooser { display: flex; gap: 12px; flex-wrap: wrap; }
.orient-chooser .opt {
  border: 1px solid var(--line-strong); background: var(--paper); padding: 13px 20px;
  cursor: pointer; font-size: 12.5px; letter-spacing: .08em; display: flex; align-items: center; gap: 11px;
  transition: border-color .3s var(--ease);
}
.orient-chooser input { position: absolute; opacity: 0; }
.orient-chooser input:checked + .opt { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.orient-icon { display: inline-block; border: 1.4px solid var(--ink-soft); }
.orient-icon.p { width: 13px; height: 19px; }
.orient-icon.l { width: 19px; height: 13px; }
.orient-icon.a { width: 16px; height: 16px; border-style: dashed; }

/* ── proof page ─────────────────────────────────────────────────────────── */
.progress-wrap { max-width: 660px; margin: 0 auto; text-align: center; padding: clamp(40px,7vw,88px) 0; }
.progress-track { height: 1px; background: var(--line-strong); margin: 40px 0 14px; position: relative; }
.progress-bar { position: absolute; inset: 0 100% 0 0; background: var(--gold); transition: right 1.1s var(--ease); }
.progress-pct { font-family: var(--serif); font-size: clamp(48px, 7vw, 72px); color: var(--ink); line-height: 1; }
.progress-label { font-size: 15px; letter-spacing: .04em; margin-top: 8px; }
.progress-detail { font-size: 13px; color: var(--grey); font-style: italic; min-height: 1.6em; }
.stage-list { text-align: left; max-width: 470px; margin: 44px auto 0; list-style: none; }
.stage-list li { padding: 9px 0; font-size: 13px; color: var(--grey-faint); display: flex; gap: 14px; transition: color .4s; }
.stage-list li .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); margin-top: 9px; flex: none; }
.stage-list li.done { color: var(--grey); }
.stage-list li.done .dot { background: var(--gold); }
.stage-list li.active { color: var(--ink); }
.stage-list li.active .dot { background: var(--gold); box-shadow: 0 0 0 4px var(--gold-pale); }

.proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,3vw,44px); }
@media (max-width: 900px) { .proof-grid { grid-template-columns: 1fr; } }
.proof-card .plate { cursor: zoom-in; }
.proof-tools { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; align-items: center; }
.proof-note { font-size: 13px; color: var(--grey); }
.zoom-overlay {
  position: fixed; inset: 0; background: rgba(8,7,6,.95); z-index: 200;
  display: none; align-items: center; justify-content: center; padding: 4vmin; cursor: zoom-out;
}
.zoom-overlay.open { display: flex; }
.zoom-overlay img { max-width: 96vw; max-height: 90vh; }
.zoom-overlay .cap { position: fixed; bottom: 3vmin; left: 0; right: 0; text-align: center; color: var(--grey-faint); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; }

.keyring-adder {
  display: flex; align-items: center; gap: 18px; border: 1px solid var(--line);
  background: var(--paper-2); padding: 22px 26px; margin-top: 30px; flex-wrap: wrap;
}
.keyring-adder .qty { display: flex; align-items: center; gap: 15px; font-size: 15px; }
.keyring-adder button.qbtn {
  width: 36px; height: 36px; border: 1px solid var(--line-strong);
  background: var(--paper); font-size: 17px; cursor: pointer; transition: border-color .3s;
}
.keyring-adder button.qbtn:hover { border-color: var(--gold); color: var(--gold); }

/* ── basket / checkout ──────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; }
.table th {
  font-size: 10px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  color: var(--grey); text-align: left; padding: 0 0 14px; border-bottom: 1px solid var(--ink);
}
.table td { padding: 22px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr.total td { border-bottom: none; font-family: var(--serif); font-size: 25px; padding-top: 24px; }
.table .price { text-align: right; white-space: nowrap; }
.table .strike { text-decoration: line-through; color: var(--grey-faint); font-size: 13px; margin-right: 8px; }
.save-tag {
  font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ok); border: 1px solid var(--ok); padding: 4px 9px; margin-left: 10px; white-space: nowrap;
}
.basket-thumb { width: 104px; }
.two-col { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 940px) { .two-col { grid-template-columns: 1fr; } }
.summary-card {
  border: 1px solid var(--line); background: var(--paper-2);
  padding: clamp(24px, 3vw, 38px); position: sticky; top: 120px;
}
.summary-card h3 { margin-bottom: 22px; }

/* ── order page ─────────────────────────────────────────────────────────── */
.timeline { list-style: none; margin: 34px 0; }
.timeline li { display: flex; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--grey-faint); align-items: center; }
.timeline li .tick { width: 22px; height: 22px; border: 1px solid var(--line-strong); border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 11px; color: transparent; }
.timeline li.done { color: var(--ink); }
.timeline li.done .tick { border-color: var(--gold); background: var(--gold); color: var(--paper); }
.timeline li.now { color: var(--ink); }
.timeline li.now .tick { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-pale); }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
details.faq { border-bottom: 1px solid var(--line); padding: 26px 0; }
details.faq summary {
  cursor: pointer; font-family: var(--serif); font-size: clamp(20px, 2.2vw, 25px);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--gold); font-size: 26px; font-weight: 200; flex: none; }
details.faq[open] summary::after { content: "–"; }
details.faq .a { padding-top: 16px; color: var(--grey); font-size: 15px; max-width: 780px; line-height: 1.85; }

/* ── legal ──────────────────────────────────────────────────────────────── */
.legal { max-width: 820px; }
.legal h2 { margin: 52px 0 16px; font-size: clamp(24px, 2.6vw, 32px); }
.legal p, .legal li { color: var(--ink-soft); font-size: 15px; line-height: 1.85; }
.legal ul { padding-left: 22px; margin: 14px 0; }
.legal .seal { border: 1px solid var(--line); border-left: 2px solid var(--gold); background: var(--paper-2); padding: 24px 28px; margin: 30px 0; }

/* ── footer ─────────────────────────────────────────────────────────────── */
footer { background: var(--noir); color: #8E887B; margin-top: var(--space); }
footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding: clamp(56px, 8vw, 96px) 0 48px; }
@media (max-width: 900px) { footer .cols { grid-template-columns: 1fr 1fr; gap: 36px; } }
footer h4 {
  color: #F6F2E8; font-family: var(--sans); font-weight: 500; font-size: 10px;
  letter-spacing: .28em; text-transform: uppercase; margin-bottom: 20px;
}
footer a { color: #8E887B; text-decoration: none; display: block; font-size: 13.5px; padding: 5px 0; transition: color .3s; }
footer a:hover { color: var(--gold-soft); }
footer .legal-line { border-top: 1px solid rgba(239,234,224,.12); padding: 26px 0; font-size: 11.5px; color: #6B665C; line-height: 1.8; }
footer .flogo { max-width: 220px; margin-bottom: 18px; opacity: .92; }
footer .fnote { font-size: 13px; max-width: 330px; line-height: 1.8; }

/* ── flash messages ─────────────────────────────────────────────────────── */
.messages { position: fixed; top: 100px; right: 24px; z-index: 300; display: grid; gap: 10px; }
.messages .msg {
  background: var(--noir); color: #F6F2E8; padding: 16px 22px; font-size: 13.5px;
  border-left: 2px solid var(--gold); box-shadow: 0 24px 50px -20px rgba(0,0,0,.55); max-width: 340px;
}
.messages .msg.error { border-left-color: var(--error); }

/* ── misc ───────────────────────────────────────────────────────────────── */
.dev-banner { background: var(--error); color: #fff; text-align: center; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; padding: 7px; }
.empty-state { text-align: center; padding: clamp(60px, 9vw, 120px) 0; }
.pill { display: inline-block; font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; border: 1px solid var(--line-strong); padding: 6px 14px; color: var(--grey); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}