/* =============================================================
   HANGABLE, editorial gallery storefront
   Type: Fraunces (display serif) + Hanken Grotesk (grotesque body)
   Restrained warm-neutral palette, one plum accent, hairline rules.
   Depth from space + type, not effects.
   ============================================================= */

:root {
  --paper:        #f4eee3;   /* warm bone base            */
  --paper-2:      #ece3d4;   /* warm grey panel           */
  --paper-3:      #e4d9c6;   /* deeper warm panel         */
  --ink:          #1b1815;   /* near-black text           */
  --muted:        #5c5347;   /* muted secondary text      */
  --muted-2:      #6b6254;   /* faint captions (AA small)  */
  --line:         #cdc1ad;   /* hairline rule             */
  --line-soft:    #ddd3c1;   /* faint hairline            */
  --dark:         #201c17;   /* dark section bg           */
  --accent:       #6b2b46;   /* restrained plum accent    */
  --accent-2:     #7d3450;

  --maxw: 1560px;
  --pad:  clamp(1.25rem, 5vw, 5rem);
  --gap:  clamp(1.25rem, 2.4vw, 2.75rem);

  --f-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-sans:  'Hanken Grotesk', system-ui, -apple-system, sans-serif;
}

/* ------------------ reset ------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
/* display:block hierboven won het van het hidden-attribuut, waardoor een nog
   lege afbeelding toch zichtbaar bleef (met alt-tekst in beeld). */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul { list-style: none; padding: 0; }

::selection { background: var(--ink); color: var(--paper); }

@keyframes pagefade { from { opacity: 0 } to { opacity: 1 } }
body { animation: pagefade 0.65s ease both; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* Op de donkere vlakken haalt de pruimkleur maar 1,66:1 contrast, en 3:1 is de
   ondergrens voor een focusrand. Papier haalt daar 14,67:1. Zonder dit ziet
   iemand die met het toetsenbord door de voettekst gaat niet waar hij staat. */
.footer :focus-visible,
.cta-band :focus-visible,
.notice :focus-visible { outline-color: var(--paper); }

/* Deze velden zetten hun omlijning uit en laten alleen de rand verkleuren. Met
   een muis prima, maar met het toetsenbord is een randkleurtje te weinig. Ze
   krijgen hun rand terug, en alleen bij toetsenbordgebruik. */
.form input:focus-visible, .form textarea:focus-visible, .form select:focus-visible,
.custom-size input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: 0.85rem 1.3rem; font-size: 0.78rem;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* kop die alleen voor schermlezers en zoekmachines bestaat */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* subtle paper grain, very low opacity, no gradients */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.03; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, nav, footer { position: relative; z-index: 2; }

/* hairline gallery edge on artwork imagery */
.figure img, .col-card img, .product-card img, .journal-card img,
.split-media img, .craft-media img, .feature-media img,
.pd-hero img, .pd-thumbs img {
  outline: 1px solid rgba(27, 24, 21, 0.08);
  outline-offset: -1px;
}

/* ------------------ typography ------------------ */
.display {
  font-family: var(--f-serif);
  font-weight: 340;
  font-optical-sizing: auto;
  line-height: 0.98;
  letter-spacing: -0.015em;
}
h1, h2, h3 { font-family: var(--f-serif); font-weight: 360; line-height: 1.02; letter-spacing: -0.01em; }
/* cursief woord in een kop krijgt standaard de plumkleur; secties met een
   eigen accent (ambacht, donkere banden) overschrijven dit verderop */
.display em { font-style: italic; color: var(--accent); }

/* Paginalabel bovenaan: Volume 01 / Het Atelier. Stond alleen lokaal in
   studio, checkout en account; hier staat hij zodat elke pagina hem kan
   gebruiken en de site een nummering aanhoudt in plaats van twee. */
.studio-eyebrow {
  font-family: var(--f-sans);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 1rem;
}

.eyebrow {
  font-family: var(--f-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: baseline;
  gap: 0.7rem;
}
.eyebrow .num {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--accent);
  text-transform: none;
  font-size: 0.95rem;
}

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.32rem);
  line-height: 1.5;
  color: var(--muted);
  font-weight: 350;
}

/* editorial text link with drawing underline */
.link {
  position: relative;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  padding-bottom: 2px;
  display: inline-block;
}
.link::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); }
.link .arrow { display: inline-block; transition: transform 0.4s cubic-bezier(0.19,1,0.22,1); }
.link:hover .arrow { transform: translateX(5px); }

/* ------------------ layout helpers ------------------ */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
/* De pagina werd te lang om doorheen te scrollen. Deze marge stond op
   10vw, oftewel bijna 300 pixels lucht tussen elke twee secties. */
.section { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
/* Eén haarlijn op de homepage, op de overgang naar het cadeaublok. Daar
   verandert het onderwerp: hiervoor gaat het over het maken, daarna over
   weggeven. De andere overgangen houden hun witruimte zonder lijn, want
   overal een streep maakt er een formulier van. De lijn loopt op
   contentbreedte mee omdat .section en .wrap hetzelfde element zijn. */
#main > .collections + .section { border-top: 1px solid var(--line); }
/* Rondom die lijn mag het wit kleiner: de lijn scheidt al. En de ruimte is
   met opzet ongelijk verdeeld, ruim tweederde erboven: de lijn hoort bij
   wat eronder begint, niet bij wat erboven eindigt. Zo hangt hij lager en
   staat het cadeaublok er dichter tegenaan. */
#main > .collections { padding-bottom: clamp(2.75rem, 4.4vw, 4.25rem); }
#main > .collections + .section { padding-top: clamp(1.5rem, 2.2vw, 2rem); }
.rule { border: 0; border-top: 1px solid var(--line); }
.rule-soft { border: 0; border-top: 1px solid var(--line-soft); }

/* ================= ANNOUNCEMENT =================
   Een regel met de vier feiten die een bezoeker meteen wil weten. De
   punten komen uit CSS, zodat de HTML alleen de feiten bevat. Het
   middelste feit zit in .nx en valt weg op de telefoon, waar de balk
   anders over drie regels loopt. */
.notice {
  background: var(--ink); color: var(--paper);
  text-align: center; padding: 0.55rem var(--pad);
  font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase;
}
.notice b { font-weight: 600; }
.notice > * + *::before {
  content: "\00b7";
  font-family: var(--f-sans); font-style: normal; font-size: 0.66rem;
  letter-spacing: 0; color: rgba(245, 240, 232, 0.38);
  margin: 0 0.7rem;
}

/* ================= NAVIGATION ================= */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
  transition: padding 0.35s ease;
}
.nav-inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: 1.15rem var(--pad);
  display: grid;
  /* Gelijke zijkolommen zetten het menu precies in het midden. Dat kon weer
     sinds de hoofdknop uit de balk is; die duwde het menu anders scheef. */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.2rem;
  transition: padding 0.35s ease;
}
.nav.compact .nav-inner { padding-block: 0.7rem; }
.wordmark {
  font-family: var(--f-serif);
  font-weight: 350;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  line-height: 1;
}
.wordmark em { font-style: italic; color: var(--accent); }
/* Het merkteken in de kop groeit een tikje bij hover. Met transform, zodat
   er niets in de kop opschuift, en met het ankerpunt links zodat hij naar
   rechts uitzet in plaats van naar beide kanten te springen. Alleen in de
   kop: in de voettekst staat hij groot en is het geen link. */
.nav .wordmark { display: inline-block; transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1); }
.nav .wordmark:hover,
.nav .wordmark:focus-visible { transform: scale(1.06); }
.nav-links {
  display: flex; justify-content: center; gap: clamp(1.2rem, 2.4vw, 2.6rem);
}
.nav-links a {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
  display: inline-flex; align-items: flex-start; gap: 0.28rem;
  position: relative; padding-block: 0.2rem;
}
.nav-links a .idx {
  font-size: 0.6rem; color: var(--muted-2); transform: translateY(-1px);
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.19,1,0.22,1);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-right { display: flex; justify-content: flex-end; align-items: center; gap: 1.1rem; }
/* Taalwisselaar met vlag. De gekozen taal staat vol, de andere gedimd,
   zodat je zonder lezen ziet in welke taal je zit. De vlaggen zijn
   inline SVG: geen extra verzoek en scherp op elk scherm. */
.nav-lang {
  display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.nav-lang b, .nav-lang a { display: inline-flex; align-items: center; gap: 0.33rem; }
.nav-lang b { color: var(--ink); font-weight: 600; }
.nav-lang a { color: var(--muted); opacity: 0.55; transition: opacity 0.25s ease, color 0.25s ease; }
.nav-lang a:hover, .nav-lang a:focus-visible { opacity: 1; color: var(--ink); }
.nav-lang .sep { color: var(--line); }
/* Ronde vlaggen, dus vierkant uitgemeten en met een ring in plaats van een
   rechthoekig randje. */
.flag {
  width: 20px; height: 20px; flex: 0 0 auto; display: block; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(27, 24, 21, 0.14);
}
/* de vlag van de niet-gekozen taal iets rustiger houden */
.nav-lang a .flag { filter: saturate(0.7); }
.nav-lang a:hover .flag { filter: none; }
.nav-account { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
/* Iconen in de kop volgen de tekstkleur, dus ook de hover-staat. Vandaar
   currentColor in de SVG zelf en geen vaste kleur. */
.nav-ico { width: 19px; height: 19px; display: block; flex: 0 0 auto; }
/* Hamburger als het menu dicht is, kruisje als het open staat. */
.ico-insta { width: 15px; height: 15px; display: inline-block; vertical-align: -3px; }
.nav-toggle .ico-close { display: none; }
.nav-toggle[aria-expanded="true"] .ico-open { display: none; }
.nav-toggle[aria-expanded="true"] .ico-close { display: inline; }
.nav-account { display: inline-flex; align-items: center; }
/* Twee oogjes die opengaan als je over het accountpoppetje gaat. Ze staan
   altijd in de SVG, alleen onzichtbaar; dat scheelt gepriegel met JS en
   houdt het icoon in rust precies zoals het was. */
.nav-account .oog { opacity: 0; transform-box: fill-box; transform-origin: center;
  transform: scaleY(0.2); transition: opacity 0.18s ease, transform 0.25s cubic-bezier(0.19, 1, 0.22, 1); }
.nav-account:hover .oog,
.nav-account:focus-visible .oog { opacity: 1; transform: scaleY(1); }
.nav-account:hover, .nav-account:focus-visible { color: var(--accent); }
.nav-toggle { display: none; }

/* ================= HERO ================= */
/* De kop stond zo groot dat de knop bij 1280x720 ruim onder de vouw viel.
   Kleinere schaalfactor + iets bredere tekstkolom: kop, belofte, knop en
   prijs staan nu samen in het eerste scherm, met het beeld ernaast. */
.hero { padding-top: clamp(1.5rem, 3vw, 2.6rem); padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
/* Kop links, de belofte en de knop rechts. De drie stappen staan eronder,
   zodat het uploadvak meteen in het eerste scherm meekomt. */
.hero-top {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem); align-items: end;
  margin-bottom: clamp(1.8rem, 3.5vw, 3rem);
}
.hero-top h1 { margin: 0; }
.hero-aside .lede { max-width: 46ch; }
@media (max-width: 860px) {
  .hero-top { grid-template-columns: 1fr; gap: 1.1rem; align-items: start; margin-bottom: 1.5rem; }
}
.hero h1 {
  font-size: clamp(2.9rem, 5.4vw, 6.4rem);
  margin: 0.4rem 0 1.4rem;
  letter-spacing: -0.025em;
}
.hero h1 em { font-style: italic; color: var(--accent); }
.hero .lede { max-width: 40ch; margin-bottom: 1.8rem; font-size: clamp(1.02rem, 1.25vw, 1.18rem); }
.hero-cta { display: flex; align-items: center; gap: 1.6rem 2rem; flex-wrap: wrap; }
/* Kleine geruststelling direct onder de knop: gratis proberen, geen account. */
.figure { position: relative; }
.figure img {
  width: 100%; object-fit: cover;
  background: var(--paper-3);
}
/* one restrained, believable frame shadow, used sparingly on hero art only */
.figure.framed img {
  box-shadow: 0 1px 0 rgba(27,24,21,0.06), 0 34px 60px -30px rgba(27,24,21,0.42);
}
.figcap {
  margin-top: 1rem;
  display: flex; gap: 0.9rem; align-items: baseline;
  font-size: 0.8rem; color: var(--muted);
}
.figcap .n {
  font-family: var(--f-serif); font-style: italic; color: var(--accent);
  font-size: 0.95rem;
}
.figcap .t { color: var(--ink); }
.figcap .m { margin-left: auto; color: var(--muted-2); letter-spacing: 0.03em; }

/* ================= INDEX STRIP ================= */
.index-strip { border-block: 1px solid var(--line); }
.index-strip .wrap {
  display: flex; flex-wrap: wrap; gap: 0.4rem 2.4rem;
  padding-block: 1.15rem; align-items: baseline;
}
.index-strip .label { font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-2); }
.index-strip a {
  font-family: var(--f-serif); font-size: 1.05rem; font-weight: 380;
  display: inline-flex; gap: 0.35rem; align-items: baseline;
}
.index-strip a sup { font-family: var(--f-sans); font-size: 0.58rem; color: var(--muted-2); }
.index-strip a:hover { font-style: italic; color: var(--accent); }

/* ================= COLLECTIONS (editorial asymmetric grid) ================= */
.collections .head {
  display: grid; grid-template-columns: 1fr auto; gap: 1.5rem;
  align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.collections .head h2 { font-size: clamp(2.2rem, 4.6vw, 4.2rem); max-width: 14ch; }
.collections .head h2 em { font-style: italic; color: var(--accent); }

.col-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 3.2vw, 3.5rem) var(--gap);
  align-items: start;
}
.col-card { display: block; }
.col-card .frame { overflow: hidden; background: var(--paper-3); }
.col-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(0.19,1,0.22,1);
}
.col-card:hover img { transform: scale(1.035); }
.col-meta {
  margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: auto 1fr auto; gap: 0.5rem 1rem;
  align-items: baseline;
}
.col-meta .num { font-family: var(--f-serif); font-style: italic; color: var(--accent); font-size: 1rem; }
.col-meta h3 { font-size: 1.6rem; font-weight: 380; }
.col-card:hover h3 { font-style: italic; }
.col-meta .price { font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.col-meta .desc { grid-column: 2 / -1; font-size: 0.9rem; color: var(--muted); max-width: 44ch; }

/* three even columns */
.col-card.a, .col-card.b, .col-card.c, .col-card.d { grid-column: span 4; margin-top: 0; }
.col-card.a .frame, .col-card.b .frame, .col-card.c .frame, .col-card.d .frame { aspect-ratio: 4 / 3; }

/* ================= CRAFT / PRINTS MOMENT ================= */
.craft { background: var(--paper); color: var(--ink); }
/* Tekst links, beeld rechts, en de vier kwaliteitsvakken over de volle
   breedte eronder. Op de telefoon alles onder elkaar. */
.craft .wrap { display: grid; grid-template-columns: 1fr; gap: 0; align-items: start; }
.craft .benefits { grid-column: 1 / -1; }
/* Er stond hier een foto naast de tekst. Die is eruit, dus de kop en de
   inleiding lopen nu over de volle breedte in plaats van in een halve kolom. */
.craft-copy { max-width: none; }
.craft .eyebrow { color: var(--muted); }
.craft .eyebrow .num { color: var(--accent); }
.craft h2 {
  font-size: clamp(1.9rem, 3.8vw, 3rem); color: var(--ink);
  margin: 1.4rem 0 1.8rem; max-width: 16ch;
}
.craft h2 em { font-style: italic; color: var(--accent); }
.craft p { color: var(--muted); max-width: none; margin-bottom: 1.4rem; }
.pull {
  font-family: var(--f-serif); font-style: italic; font-weight: 340;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.3;
  color: #f4eee3; margin: 2.2rem 0; padding-left: 1.4rem;
  border-left: 1px solid #6b2b46;
}
.craft .link { color: #f4eee3; }
.spec-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; margin-top: 2.4rem;
  border-top: 1px solid #3a352d; padding-top: 1.8rem;
}
.spec-row .s .k { font-family: var(--f-serif); font-size: 1.5rem; color: #f4eee3; display: block; }
.spec-row .s .v { font-size: 0.78rem; color: #9d937f; letter-spacing: 0.04em; }

/* ================= FEATURE (single artwork, full-bleed-ish) ================= */
.feature .wrap { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.feature-media { position: relative; }
.feature-media img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.feature-cap {
  position: absolute; left: clamp(1rem, 3vw, 2.5rem); bottom: clamp(1rem, 3vw, 2.5rem);
  background: var(--paper); padding: 1.2rem 1.5rem; max-width: 22rem;
}
.feature-cap .eyebrow { margin-bottom: 0.7rem; }
.feature-cap h3 { font-size: 1.7rem; font-weight: 380; margin-bottom: 0.4rem; }
.feature-cap h3 em { font-style: italic; }
.feature-cap p { font-size: 0.86rem; color: var(--muted); }

/* ================= CLOSING / NEWSLETTER ================= */
.closing { text-align: left; }
.closing .wrap { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(2rem,5vw,5rem); align-items: end; }
.closing h2 { font-size: clamp(2.4rem, 5.4vw, 5rem); max-width: 16ch; }
.closing h2 em { font-style: italic; color: var(--accent); }
.subscribe { display: flex; flex-direction: column; gap: 1rem; }
.subscribe .field {
  display: flex; align-items: center; gap: 0.5rem;
  border-bottom: 1px solid var(--ink); padding-bottom: 0.7rem;
}
.subscribe input {
  flex: 1; border: 0; background: transparent; font: inherit; color: var(--ink);
  padding: 0.2rem 0;
}
.subscribe input::placeholder { color: var(--muted-2); }
.subscribe button { white-space: nowrap; }
.subscribe .fine { font-size: 0.74rem; color: var(--muted-2); }

/* ================= BUTTONS (understated) ================= */
.btn {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 1.05rem 1.9rem;
  background: var(--ink); color: var(--paper);
  font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
  border: 1px solid var(--ink);
  transition: background 0.45s ease, color 0.45s ease, border-color 0.45s ease;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.btn .arrow { transition: transform 0.4s cubic-bezier(0.19,1,0.22,1); }
.btn:hover .arrow { transform: translateX(5px); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btn.block { width: 100%; justify-content: space-between; }

/* ================= SHOP ================= */
.shop-head { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem,3vw,2.5rem); }
.shop-head h1 { font-size: clamp(2.6rem, 6vw, 5.2rem); }
.shop-head h1 em { font-style: italic; color: var(--accent); }
.shop-head .lede { max-width: 46ch; margin-top: 1.4rem; }

.filters {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: baseline;
  padding-block: 1.3rem; border-block: 1px solid var(--line);
}
.filter-group { display: inline-flex; gap: 0.9rem; align-items: baseline; }
.filter-group .glabel { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-2); }
.filter-group button {
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.filter-group button[aria-pressed="true"] { color: var(--ink); border-color: var(--accent); }
.filter-group button:hover { color: var(--ink); }
.filters .sort { margin-left: auto; font-size: 0.82rem; color: var(--muted); }

.grid-shop {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 3.4vw, 3.6rem) var(--gap);
  padding-top: clamp(2.5rem, 5vw, 4rem);
}
.product-card { display: block; margin: 0; }
.product-card.gallery { cursor: default; }
.product-card .frame { overflow: hidden; background: var(--paper-3); aspect-ratio: 4 / 5; position: relative; }
.product-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(0.19,1,0.22,1); }
.product-card:hover img { transform: scale(1.04); }
.product-card .quick {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--ink); color: var(--paper);
  padding: 0.8rem 1.1rem; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  transform: translateY(101%); transition: transform 0.45s cubic-bezier(0.19,1,0.22,1);
  display: flex; justify-content: space-between; align-items: center;
}
.product-card:hover .quick, .product-card:focus-within .quick { transform: translateY(0); }
.p-meta {
  margin-top: 1.1rem; padding-top: 0.95rem; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 0.4rem;
}
.p-meta .pm { order: -1; font-size: 0.64rem; color: var(--muted-2); letter-spacing: 0.24em; text-transform: uppercase; }
.p-meta .pt { font-family: var(--f-serif); font-size: 1.3rem; font-weight: 380; }
.product-card:hover .pt { font-style: italic; }
.p-meta .pr {
  margin-top: 0.5rem; padding-top: 0.7rem; border-top: 1px dotted var(--line);
  font-family: var(--f-serif); font-style: italic; font-size: 0.92rem;
  line-height: 1.5; color: var(--muted);
}
.p-meta .pr::before {
  content: "Studio prompt"; display: block;
  font-family: var(--f-sans); font-style: normal;
  font-size: 0.58rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 0.45rem;
}

.pager { display: flex; gap: 1rem; align-items: center; justify-content: center; padding-block: clamp(3rem,6vw,5rem); }
.pager a, .pager span { font-family: var(--f-serif); font-size: 1.1rem; color: var(--muted); }
.pager .cur { color: var(--ink); font-style: italic; }
.pager button {
  font-family: var(--f-serif); font-size: 1.1rem; color: var(--muted);
  line-height: 1; padding: 0.4rem 0.2rem; min-width: 1.6rem;
  border-bottom: 1px solid transparent; transition: color 0.25s ease, border-color 0.25s ease;
}
.pager button:hover:not(:disabled) { color: var(--ink); border-bottom-color: var(--line); }
.pager button[aria-current="page"] { color: var(--ink); font-style: italic; border-bottom-color: var(--ink); }
.pager button:disabled { opacity: 0.3; cursor: default; }
.pager .pg-step { font-size: 0.95rem; padding-inline: 0.5rem; }

/* ================= PRODUCT DETAIL ================= */
.pd { padding-top: clamp(1.5rem, 3vw, 3rem); }
.crumb { font-size: 0.76rem; letter-spacing: 0.06em; color: var(--muted-2); padding-block: 1.2rem; }
.crumb a:hover { color: var(--ink); }
.pd-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.pd-media { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: 1rem; }
.pd-hero { background: var(--paper-3); }
.pd-hero img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pd-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
.pd-thumbs button { aspect-ratio: 1; overflow: hidden; background: var(--paper-3); border: 1px solid var(--line-soft); transition: border-color 0.3s ease; }
.pd-thumbs button[aria-pressed="true"] { border-color: var(--accent); }
.pd-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.pd-info { padding-top: 0.5rem; }
.pd-info .eyebrow { margin-bottom: 1.1rem; }
.pd-info h1 { font-size: clamp(2.2rem, 3.8vw, 3.4rem); }
.pd-info h1 em { font-style: italic; color: var(--accent); }
.pd-edition { color: var(--muted); margin-top: 0.9rem; font-size: 0.92rem; }
.pd-price { font-family: var(--f-serif); font-size: 1.7rem; margin: 1.4rem 0; font-variant-numeric: tabular-nums; }
.pd-desc { color: var(--muted); max-width: 48ch; margin-bottom: 2rem; }

.opt { border-top: 1px solid var(--line); padding-block: 1.5rem; }
.opt .ol { display: flex; justify-content: space-between; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 1rem; }
.opt .ol .sel { color: var(--ink); letter-spacing: 0.03em; text-transform: none; font-size: 0.86rem; }
.swatches { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.swatch, .swatches button {
  border: 1px solid var(--line); padding: 0.65rem 1.05rem; font-size: 0.85rem; color: var(--muted);
  background: transparent;
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.swatch[aria-pressed="true"], .swatches button[aria-pressed="true"] {
  border-color: var(--ink); color: var(--ink);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.swatch:hover, .swatches button:hover { border-color: var(--ink); color: var(--ink); }
.swatch .sz, .swatches .sz { font-variant-numeric: tabular-nums; }

/* custom size picker */
.custom-size { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-top: 1.1rem; font-size: 0.85rem; color: var(--muted); }
.custom-size label { display: inline-flex; align-items: center; gap: 0.55rem; }
.custom-size input { width: 4.8rem; padding: 0.55rem 0.4rem; border: 1px solid var(--line); background: transparent; font: inherit; color: var(--ink); text-align: center; font-variant-numeric: tabular-nums; }
.custom-size input:focus { outline: none; border-color: var(--ink); }
.custom-size .x { font-family: var(--f-serif); font-style: italic; color: var(--accent); }
.custom-size .note { flex-basis: 100%; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted-2); }

.buy { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.buy .row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.86rem; color: var(--muted); }
.buy .row b { font-family: var(--f-serif); font-size: 1.4rem; color: var(--ink); font-weight: 380; }

.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { padding-block: 1.2rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; font-size: 0.86rem; letter-spacing: 0.02em; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .plus { font-family: var(--f-serif); font-size: 1.3rem; color: var(--accent); transition: transform 0.3s ease; }
.acc details[open] summary .plus { transform: rotate(45deg); }
.acc .body { padding-bottom: 1.3rem; color: var(--muted); font-size: 0.9rem; max-width: 52ch; }

/* ================= FOOTER ================= */
.footer { background: var(--dark); color: #cabfab; padding-block: clamp(3.5rem, 7vw, 6rem) 2.5rem; margin-top: clamp(3rem,7vw,7rem); }
/* Eindigt de pagina met de donkere cta-band, dan zou die marge een lichte
   strook tussen twee even donkere vlakken zetten. Weghalen, dan lopen ze
   in elkaar over. Op pagina's die anders eindigen blijft de lucht staan. */
main:has(> .cta-band:last-child) + .footer { margin-top: 0; }
/* Op sommige pagina's staat de band buiten main, direct voor de voettekst.
   Dan greep de regel hierboven niet en bleef er een lichte strook tussen
   twee even donkere vlakken staan. */
.cta-band + .footer { margin-top: 0; }
.footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
.footer .brand .wordmark { font-size: clamp(2.5rem, 6vw, 4.5rem); color: #f4eee3; }
.footer .brand p { color: #9d937f; max-width: 30ch; margin-top: 1rem; font-size: 0.9rem; }
.footer h4 { font-family: var(--f-sans); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: #837a6c; font-weight: 600; margin-bottom: 1.1rem; }
.footer li { margin-bottom: 0.6rem; }
.footer a { font-size: 0.9rem; color: #cabfab; transition: color 0.3s ease; }
.footer a:hover { color: #f4eee3; }
.footer-base {
  max-width: var(--maxw); margin-inline: auto; padding: 2.5rem var(--pad) 0; margin-top: 3rem;
  border-top: 1px solid #3a352d; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 0.78rem; color: #837a6c;
}

/* ================= CONTENT PAGES ================= */
/* De kop van een pagina stond op 66ch, waardoor een grote titel over vier
   regels brak en er veel lucht omheen bleef staan. Breder en iets minder
   ruimte erboven scheelt een half scherm zonder dat er iets uit gaat. */
/* Geen max-width op het blok zelf: samen met de gecentreerde .wrap zette
   dat de hele kop in het midden, terwijl alles eronder links begint. De
   regellengte wordt nu op de titel en de zin geregeld, niet op het vak. */
.page-head { padding-block: clamp(2.2rem, 4.5vw, 4rem) clamp(1.2rem, 2.4vw, 2rem); }
.page-head .eyebrow { margin-bottom: 1.4rem; }
.page-head h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); max-width: 20ch; }
.page-head h1 em { font-style: italic; color: var(--accent); }
.page-head .lede { margin-top: 1.5rem; max-width: 54ch; }

/* prose / legal / article */
.prose { max-width: 68ch; padding-bottom: clamp(4rem, 8vw, 7rem); }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 { font-family: var(--f-serif); font-weight: 360; font-size: clamp(1.5rem, 3vw, 2.2rem); margin-top: 2.8rem; letter-spacing: -0.01em; }
.prose h3 { font-family: var(--f-serif); font-weight: 380; font-size: 1.25rem; margin-top: 1.8rem; }
.prose p, .prose li { color: var(--muted); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose ul { display: grid; gap: 0.55rem; padding-left: 1.1rem; list-style: none; }
.prose ul li { position: relative; }
.prose ul li::before { content: '·'; position: absolute; left: -1.1rem; color: var(--accent); }
.prose .meta-note { font-size: 0.82rem; color: var(--muted-2); font-style: italic; font-family: var(--f-serif); }
.prose blockquote { border-left: 1px solid var(--accent); padding-left: 1.3rem; font-family: var(--f-serif); font-style: italic; font-size: 1.25rem; color: var(--ink); margin-block: 1.6rem; }

/* split section: image + copy, alternating */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.split.reverse .split-media { order: 2; }
/* Tekst tegen de bovenrand van het beeld in plaats van gecentreerd. Alleen
   waar de tekst ongeveer even hoog is als de foto; bij een korte tekst
   naast een hoog beeld blijft centreren beter, en dat is de standaard. */
.split.top { align-items: start; }
.split-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--paper-3); }
.split-media.wide img { aspect-ratio: 4 / 3; }
.split-copy .eyebrow { margin-bottom: 1.1rem; }
.split-copy h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); margin-bottom: 1.2rem; }
.split-copy h2 em { font-style: italic; color: var(--accent); }
.split-copy p { color: var(--muted); margin-bottom: 1rem; max-width: 46ch; }
/* Alleen op de over-pagina: daar staat geen beeld naast de tekst, dus de
   regels lopen over de volle breedte in plaats van in een halve kolom. */
.split-copy.breed p, .split-copy.breed blockquote { max-width: none; }
.split-copy.breed h2 { max-width: 22ch; }
.split-copy .spec-inline { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.split-copy .spec-inline .s .k { font-family: var(--f-serif); font-size: 1.3rem; display: block; }
.split-copy .spec-inline .s .v { font-size: 0.76rem; color: var(--muted-2); letter-spacing: 0.03em; }

/* info columns (3-up editorial, hairline separated) */
.info-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.info-cols .ic { padding: 2rem 2rem 2.4rem; border-right: 1px solid var(--line); }
.info-cols .ic:last-child { border-right: 0; }
.info-cols .ic .n { font-family: var(--f-serif); font-style: italic; color: var(--accent); font-size: 1rem; }
.info-cols .ic h3 { font-family: var(--f-serif); font-weight: 380; font-size: 1.5rem; margin: 1.4rem 0 0.7rem; }
.info-cols .ic p { color: var(--muted); font-size: 0.92rem; }

/* contact / forms */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); padding-bottom: clamp(4rem, 8vw, 7rem); align-items: start; }
.form { display: grid; gap: 1.5rem; }
.form label { display: grid; gap: 0.5rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-2); }
.form input, .form textarea, .form select {
  font: inherit; color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--line); padding: 0.6rem 0;
  transition: border-color 0.3s ease;
}
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--accent); }
.form textarea { resize: vertical; min-height: 6rem; }
.contact-aside .block { padding-block: 1.3rem; border-top: 1px solid var(--line); }
.contact-aside .block:last-child { border-bottom: 1px solid var(--line); }
.contact-aside h3 { font-family: var(--f-serif); font-weight: 380; font-size: 1.2rem; margin-bottom: 0.4rem; }
.contact-aside p, .contact-aside a { color: var(--muted); font-size: 0.92rem; }
.contact-aside a { text-decoration: underline; text-underline-offset: 3px; }

/* journal / editorial list */
.journal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2.5rem, 4vw, 4rem) var(--gap); padding-bottom: clamp(4rem, 8vw, 7rem); }
.journal-card .frame { overflow: hidden; background: var(--paper-3); aspect-ratio: 3 / 2; }
.journal-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(0.19,1,0.22,1); }
.journal-card:hover img { transform: scale(1.035); }
.journal-card .jm { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.journal-card .jcat { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-2); }
.journal-card h3 { font-family: var(--f-serif); font-weight: 380; font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0.6rem 0; }
.journal-card:hover h3 { font-style: italic; }
.journal-card p { color: var(--muted); font-size: 0.92rem; max-width: 46ch; }
.journal-card.lead { grid-column: 1 / -1; }
.journal-card.lead .frame { aspect-ratio: 21 / 9; }

/* gift / price cards */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); padding-bottom: clamp(3rem,6vw,5rem); }
.tier { border: 1px solid var(--line); padding: 2rem; display: flex; flex-direction: column; gap: 0.8rem; background: color-mix(in srgb, var(--paper) 60%, #fff); }
.tier .amt { font-family: var(--f-serif); font-size: 2.4rem; }
.tier p { color: var(--muted); font-size: 0.9rem; flex: 1; }

.cta-band { background: var(--dark); color: #ece3d4; padding-block: clamp(3.5rem,7vw,6rem); text-align: center; }
.cta-band h2 { font-family: var(--f-serif); font-weight: 340; font-size: clamp(2rem,4.4vw,3.6rem); color: #f4eee3; max-width: 18ch; margin: 0 auto 1.2rem; }
.cta-band h2 em { font-style: italic; color: #d69bb2; }
.cta-band p { color: #cabfab; max-width: 44ch; margin: 0 auto 2rem; }
.cta-band .btn { background: #f4eee3; color: #1b1815; border-color: #f4eee3; }
.cta-band .btn:hover { background: transparent; color: #f4eee3; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .split.reverse .split-media { order: 1; }
  .info-cols { grid-template-columns: 1fr; }
  .info-cols .ic { border-right: 0; border-bottom: 1px solid var(--line); }
  .info-cols .ic:last-child { border-bottom: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .journal-grid { grid-template-columns: 1fr; }
  .tier-grid { grid-template-columns: 1fr; }
}

/* ================= REVEAL ANIMATION ================= */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s cubic-bezier(0.19,1,0.22,1), transform 1s cubic-bezier(0.19,1,0.22,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1080px) {
  .footer .wrap { grid-template-columns: 1fr 1fr; }
  .footer .brand { grid-column: 1 / -1; }
  .grid-shop { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .nav-inner { grid-template-columns: 1fr auto; }
  /* De taalwissel blijft ook op mobiel in de kop staan. Dat kan sinds de
     letters EN en NL eraf zijn: het blokje is nog 59px breed en past op
     375px zonder dat de kop overloopt. Stond hij verborgen, dan kon een
     Engelstalige bezoeker alleen via de voettekst wisselen. */
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem;
    position: absolute; top: 100%; left: 0; right: 0; background: var(--paper);
    border-bottom: 1px solid var(--line); padding: 1.8rem var(--pad) 2.2rem;
  }
  .nav.open .nav-links a { font-size: 1.4rem; font-family: var(--f-serif); }
  .nav.open .nav-links a .idx { font-size: 0.7rem; }

  .hero h1 { font-size: clamp(2.7rem, 12.5vw, 5.5rem); margin: 0 0 1rem; }
  .hero .lede { margin-bottom: 1.4rem; }

  /* Drie kaarten onder elkaar kostte bijna veertienhonderd pixels.
     Als schuifrij blijven ze alle drie vindbaar in een derde van de ruimte. */
  .col-grid {
    display: flex; flex-direction: row; gap: 1rem;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad);
    margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);
    padding-bottom: 0.5rem; -webkit-overflow-scrolling: touch;
  }
  .col-grid::-webkit-scrollbar { height: 2px; }
  .col-grid::-webkit-scrollbar-thumb { background: var(--line); }
  .col-card { flex: 0 0 76%; scroll-snap-align: start; margin-top: 0 !important; }
  .col-card .frame { aspect-ratio: 4 / 5 !important; }
  .col-meta .desc { font-size: 0.85rem; }

  .spec-row { gap: 1rem; }

  .closing .wrap { grid-template-columns: 1fr; align-items: start; gap: 2.5rem; }

  .grid-shop { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
  .pd-grid { grid-template-columns: 1fr; }
  .pd-media { position: static; }
}
@media (max-width: 560px) {
  .grid-shop { grid-template-columns: 1fr; }
  .col-meta { grid-template-columns: auto 1fr; }
  .col-meta .price { grid-column: 2; text-align: left; }
  .filters .sort { margin-left: 0; width: 100%; }
  /* Twee kolommen linkjes, merk erboven: onder elkaar was dit met 1443px
     het grootste blok van de hele telefoonpagina. */
  .footer .wrap { grid-template-columns: 1fr 1fr; gap: 1.8rem 1.4rem; }
  .footer .brand { grid-column: 1 / -1; }
  .footer li { margin-bottom: 0.45rem; }
  /* De voettekst was op de telefoon het grootste blok van de pagina.
     Kleiner beeldmerk, strakkere marges, dezelfde inhoud. */
  .footer { padding-block: 2.5rem 1.75rem; margin-top: 2rem; }
  .footer .brand .wordmark { font-size: 2rem; }
  .footer .brand p { margin-top: 0.7rem; font-size: 0.85rem; }
  .footer-base { margin-top: 1.75rem; padding-top: 1.5rem; }
}

/* ---- trust: payment badges, footer contact, guarantee ---- */
.pay-methods { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.pay-methods.center { justify-content: center; }
/* Officiele Mollie-iconen zijn 32x24 en brengen hun eigen afgeronde
   achtergrond mee, dus hier alleen de maat (zelfde verhouding, 4:3). */
.pay-badge { width: 36px; height: 27px; display: block; flex: 0 0 auto; }
.foot-contact { margin-top: 0.7rem; font-size: 0.82rem; color: var(--muted); }
.foot-contact a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Keurmerk in de voettekst, naast de betaalmethodes. Staat op elke pagina,
   want vertrouwen wordt niet alleen op de homepage gewonnen. */
.foot-cert {
  display: flex; align-items: center; gap: 0.9rem;
  margin-top: 1.1rem; padding-top: 1rem;
  border-top: 1px solid var(--line);
  max-width: 30ch;
}
.foot-cert .cert-marks { display: flex; align-items: center; gap: 0.8rem; flex: 0 0 auto; }
.foot-cert img { width: 38px; height: auto; display: block; }
.foot-cert span { font-size: 0.74rem; line-height: 1.35; color: var(--muted); }

.foot-pay { margin-top: 1rem; }
.foot-pay .pay-label { display: block; font-size: 0.55rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 0.45rem; }
/* Acht badges van 36px vulden de voetkolom precies tot de rand, dus geen
   lucht en op smallere schermen viel de rij om. In de voettekst mogen ze
   kleiner: daar is het een bevestiging, geen argument. In de checkout
   blijven ze op ware grootte, want daar moeten ze overtuigen. */
.foot-pay .pay-badge { width: 30px; height: 22px; }
/* Ook hier een vaste 6 + 5 in plaats van 10 + 1. De voetkolom is breed
   genoeg voor tien op een regel, dus zonder deze rem valt alleen de
   laatste eruit. 6 x 30px plus 5 tussenruimtes van 0,4rem is 212px. */
.foot-pay .pay-methods { max-width: 212px; }
/* In de bestelsamenvatting is wel ruimte, en daar moeten ze overtuigen. */
/* De Engelse samenvatting is 336px breed, de Nederlandse 365px. Bij acht
   badges past 38px alleen als de tussenruimte kleiner wordt; anders valt
   de rij op de Engelse pagina om naar twee regels. */
/* Negen badges passen niet op een regel in een kolom van 336px. Kleiner
   maken zou ze onleesbaar maken, dus laten we ze netjes omvallen: ruimere
   regelafstand dan kolomafstand, zodat het twee rijen worden en geen blok. */
/* Vaste verdeling van 6 en 5. Zonder de max-width hangt het aantal per regel
   af van de vensterbreedte, en dan wordt het op een breed scherm 7 en 4. Nu
   passen er nooit meer dan zes naast elkaar en vallen de rest gecentreerd
   eronder. 6 x 50px plus 5 tussenruimtes van 5px is 325px. */
.order-summary .pay-methods,
aside.summary .pay-methods { display: flex; flex-wrap: wrap; justify-content: center;
  column-gap: 5px; row-gap: 7px; max-width: 325px; margin-inline: auto; }
/* 50px is bewust gekozen: bij een kolom van 336px (EN) en 365px (NL) passen
   er dan exact zes op een regel en vallen de overige drie gecentreerd
   eronder. Groter dus, en toch een nette 6 + 3 in plaats van 7 + 2. */
.order-summary .pay-badge,
aside.summary .pay-badge { width: 50px; height: 38px; }
.secure-note.guarantee { color: var(--ink); font-weight: 500; }
.secure-note.guarantee::before { content: '\2713\00a0'; color: var(--gold); }

/* consent bar */
.consent-bar {
  position: fixed; left: 50%; bottom: clamp(0.75rem, 2vw, 1.25rem);
  transform: translateX(-50%); z-index: 60;
  width: calc(100% - clamp(1.5rem, 6vw, 3rem)); max-width: 40rem;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem);
  flex-wrap: wrap; justify-content: space-between;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 4px;
  padding: clamp(0.9rem, 2.2vw, 1.15rem) clamp(1rem, 2.6vw, 1.4rem);
  box-shadow: 0 12px 40px rgba(27, 24, 21, 0.14);
}
.consent-bar p { flex: 1 1 16rem; margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--muted); }
.consent-actions { display: flex; align-items: center; gap: clamp(0.9rem, 2.4vw, 1.4rem); flex: 0 0 auto; }
.consent-actions .link { white-space: nowrap; }
.consent-actions .btn { padding: 0.6rem 1.1rem; font-size: 0.72rem; }

.foot-legal { margin-top: 0.5rem; font-size: 0.72rem; color: var(--muted-2); letter-spacing: 0.02em; }


/* Lookbook source tabs (prompt vs photo) + before/after tiles */
.grid-shop[hidden], .grid-photo[hidden], .filters[hidden], .pager[hidden] { display: none; }
.source-tabs { display: flex; gap: 0.4rem; margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.source-tabs button {
  font-family: 'Fraunces', serif; font-size: 1.02rem; font-style: italic;
  color: var(--muted); padding: 0.55rem 1.15rem 0.7rem;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.source-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.source-tabs button:hover { color: var(--ink); }
.source-tabs { border-bottom: 1px solid var(--line); }

.grid-photo {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 3.4vw, 3.6rem) var(--gap);
  padding-top: clamp(2.5rem, 5vw, 4rem);
}
.ba-card { display: block; margin: 0; }
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--line); border: 1px solid var(--line); }
.ba-side { position: relative; overflow: hidden; background: var(--paper-3); aspect-ratio: 4 / 5; }
.ba-side img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-tag {
  position: absolute; top: 0.7rem; left: 0.7rem; z-index: 1;
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  background: rgba(27, 24, 21, 0.82); color: var(--paper); padding: 0.26rem 0.62rem;
}
.photo-empty {
  grid-column: 1 / -1; text-align: center; color: var(--muted);
  font-family: 'Fraunces', serif; font-style: italic; font-size: 1.08rem;
  padding: clamp(3rem, 7vw, 6rem) 1rem;
}
@media (max-width: 720px) {
  .grid-photo { grid-template-columns: 1fr; }
}


/* Gift card purchase form */
.giftbuy { max-width: 34rem; }
.giftbuy > h2 { margin-bottom: 1.4rem; }
.gift-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); margin-bottom: 1.4rem; }
.gift-amounts button {
  padding: 0.9rem 0.5rem; border: none; border-right: 1px solid var(--line);
  background: var(--bg); color: var(--ink); cursor: pointer;
  font-family: 'Fraunces', serif; font-size: 1.1rem; transition: all 0.2s;
}
.gift-amounts button:last-child { border-right: none; }
.gift-amounts button:hover { background: var(--cream); }
.gift-amounts button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.giftbuy .form-field { margin-bottom: 1rem; }
.giftbuy #giftPay { margin-top: 0.4rem; }
.giftbuy #giftError:empty { display: none; }
.giftbuy #giftError { color: #b23; margin-top: 0.8rem; font-size: 0.85rem; }
.gift-points { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); list-style: none; }
.gift-points li { position: relative; padding-left: 1.2rem; margin-bottom: 0.7rem; font-size: 0.9rem; color: var(--muted); }
.gift-points li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }


/* Gift card redeem on checkout */
.gift-redeem { display: flex; gap: 0.5rem; margin-top: 1rem; }
.gift-redeem input {
  flex: 1; min-width: 0; padding: 0.6rem 0.7rem; border: 1px solid var(--line);
  background: var(--bg); font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 0.82rem; letter-spacing: 0.04em; color: var(--ink);
}
.gift-redeem button {
  padding: 0.6rem 1rem; border: 1px solid var(--ink); background: var(--ink);
  color: var(--bg); cursor: pointer; font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.gift-redeem button:disabled { opacity: 0.5; cursor: default; }
#giftMsg:empty { display: none; }
#giftMsg { margin-top: 0.5rem; font-size: 0.8rem; color: var(--muted); }


/* Gift code box on the thank-you page */
.gift-code-box {
  margin: 1.6rem 0 0.8rem; padding: 1.4rem 1.6rem; border: 1px solid var(--line);
  background: var(--cream); display: inline-flex; flex-direction: column; gap: 0.4rem;
}
.gcb-label { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.gcb-code { font-family: 'Fraunces', serif; font-size: clamp(1.6rem, 4vw, 2.3rem); letter-spacing: 0.06em; color: var(--ink); }
.gcb-status { font-size: 0.85rem; color: var(--accent); }


/* =====================================================================
   Conversie-onderdelen (aug 2026)
   Doel: sneller duidelijk maken wat Hangable doet, en de hoofdactie
   ("maak jouw kunstwerk") overal binnen handbereik houden.
   ===================================================================== */

/* ---- 1. Hoofdactie -----------------------------------------------------
   Stond eerst als zwarte knop in de kopbalk, maar die balk werd daar te
   druk van (aug 2026, gebruikerswens). Studio blijft in het menu staan,
   en de balk onderaan het scherm neemt de knop-rol over zodra je scrolt. */


/* ---- 2. Meelopende balk onderaan (alle schermen) --------------------
   Sinds de knop uit de kopbalk is, doet deze balk het werk ook op de
   desktop. Hij komt pas na 420px scrollen omhoog, dus de eerste indruk
   blijft rustig. De inhoud volgt dezelfde maximale breedte als de rest
   van de site, anders staan tekst en knop op een breed scherm los in
   de uiterste hoeken. */
.cta-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 0.65rem;
  padding-inline: max(var(--pad), calc((100vw - var(--maxw)) / 2));
  padding-bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--paper) 95%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  transform: translateY(115%);
  transition: transform 0.55s cubic-bezier(0.19,1,0.22,1);
}
.cta-dock.on { transform: none; }
.cta-dock .dock-note { flex: 1 1 auto; min-width: 0; font-size: 0.64rem; line-height: 1.45;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cta-dock .dock-note b { display: block; color: var(--ink); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.12em; }
.cta-dock .btn { flex: 0 0 auto; white-space: nowrap; padding: 0.85rem 1.15rem; font-size: 0.66rem; letter-spacing: 0.12em; }
@media (max-width: 360px) { .cta-dock .dock-note { display: none; } .cta-dock .btn { width: 100%; justify-content: center; } }

/* ---- 3. Mededelingsbalk korter op de telefoon ------------------------ */
@media (max-width: 620px) {
  .notice { font-size: 0.58rem; letter-spacing: 0.12em; padding-block: 0.5rem; }
  .notice .nx { display: none; }
  .notice > * + *::before { margin: 0 0.45rem; }
}
/* Op een telefoonscherm past alleen de prijs plus de levertijd op een
   regel. De rest valt weg in plaats van af te breken. */
@media (max-width: 560px) {
  .notice > span:not(.keep) { display: none; }
}

/* ---- 4. Van foto naar muur ------------------------------------------
   Het sterkste verhaal van het merk, en tot nu toe alleen in woorden.
   Links zet de bezoeker zijn eigen foto neer, rechts staat wat het
   atelier ervan maakt. De foto reist mee naar de studio. */
.trans { background: var(--paper-2); padding-block: clamp(3.5rem, 7vw, 7rem); }
.trans-head { max-width: 58ch; }
.trans-head h2 { font-family: var(--f-serif); font-weight: 340; font-size: clamp(1.85rem, 3.6vw, 3.1rem); line-height: 1.05; margin: 1.1rem 0 1.1rem; max-width: 20ch; }
.trans-head h2 em { font-style: italic; color: var(--accent); }
.trans-head .lede { max-width: 52ch; }

.pair {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: clamp(1rem, 2.4vw, 2.2rem);
  margin-top: clamp(2rem, 4vw, 3.4rem);
  align-items: start;
  /* zonder bovengrens worden de vakken op een breed scherm te groot */
  max-width: 1400px;
}
.pair-arrow {
  align-self: center; font-family: var(--f-serif); font-style: italic;
  color: var(--accent); font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1;
  padding-top: 2.2rem;
}
/* Tussen het voorbeeld en het uploadvak staat geen pijl maar een streep.
   Een pijl zou suggereren dat het uploadvak de volgende stap van hetzelfde
   voorbeeld is, en dat is het niet: 01 en 02 zijn een moment voor en na,
   03 is de uitnodiging om het zelf te doen. */
.pair-split { align-self: stretch; width: 1px; background: var(--line); margin-top: 2.2rem; }

.pair-cap {
  display: flex; gap: 0.7rem; align-items: baseline; margin-bottom: 0.85rem;
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-2);
}
.pair-cap .n { font-family: var(--f-serif); font-style: italic; color: var(--accent); font-size: 0.95rem; letter-spacing: 0; text-transform: none; }
.pair-box { position: relative; aspect-ratio: 1 / 1; background: var(--paper-3); overflow: hidden; }
.pair-box > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pair-note { margin-top: 0.9rem; font-size: 0.88rem; line-height: 1.5; color: var(--muted); max-width: 40ch; }

/* het neerzetvak voor een eigen foto */
.drop-home {
  position: absolute; inset: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 1.4rem; text-align: center; cursor: pointer;
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  border: 1px dashed var(--line); color: var(--ink);
  transition: background 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}
.drop-home:hover, .drop-home:focus-visible, .drop-home.over { background: var(--paper); border-color: var(--accent); }
.drop-home svg { width: 30px; height: 30px; stroke: var(--accent); fill: none; stroke-width: 1; }
.drop-home .dh-t { font-family: var(--f-serif); font-size: clamp(1.05rem, 1.7vw, 1.3rem); font-weight: 380; }
.drop-home .dh-s { font-size: 0.78rem; color: var(--muted); max-width: 24ch; }
.pair-box.has-photo .drop-home { opacity: 0; background: rgba(27,24,21,0.62); border-color: transparent; color: var(--paper); }
.pair-box.has-photo .drop-home .dh-s { color: #cabfab; }
.pair-box.has-photo .drop-home svg { stroke: #d69bb2; }
.pair-box.has-photo:hover .drop-home, .pair-box.has-photo:focus-within .drop-home { opacity: 1; }

/* de wisselende voorbeelden aan de rechterkant */
.rot { position: absolute; inset: 0; }
.rot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease; }
.rot img.on { opacity: 1; }
.rot-cap {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  background: var(--paper); padding: 0.5rem 0.85rem;
  font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}
/* verschijnt zodra iemand een foto heeft neergezet, precies onder het vak */
.drop-go { margin-top: 1.1rem; }
.trans-cta { display: flex; align-items: center; gap: 1.6rem 2rem; flex-wrap: wrap; margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }
.trans-cta .fine { font-size: 0.8rem; color: var(--muted-2); }

@media (max-width: 860px) {
  /* Drie vakken onder elkaar werd bijna twaalfhonderd pixels scrollen.
     Eigen foto op volle breedte, de twee uitkomsten daaronder naast elkaar. */
  .pair { grid-template-columns: 1fr 1fr; gap: 1.5rem 1.1rem; }
  .pair-arrow, .pair-split { display: none; }
  /* Voor en na naast elkaar, het uploadvak eronder op volle breedte:
     daar moet je iets doen, dus daar hoort de ruimte. */
  .pair-side:last-child { grid-column: 1 / -1; }
  .pair-box { aspect-ratio: 3 / 4; }
  .pair-side:last-child .pair-box { aspect-ratio: 4 / 3; }
  .pair-note { max-width: none; font-size: 0.8rem; }
  .pair-side:last-child .pair-note { font-size: 0.84rem; }
}

/* ---- 5. Stappenrij: nooit twijfelen over de volgende stap ------------ */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); list-style: none; }
/* Gecentreerd: vijf smalle kolommen links uitgelijnd gaven een rafelige
   rechterrand. Het cijfer, de kop en de zin staan nu onder elkaar op de
   middenas van hun eigen vak. */
.flow li { padding: 1.5rem 1.3rem 1.7rem; border-right: 1px solid var(--line); text-align: center; }
.flow li:last-child { border-right: 0; }
.flow .n { font-family: var(--f-serif); font-style: italic; color: var(--accent); font-size: 1rem; }
.flow h3 { font-family: var(--f-serif); font-weight: 380; font-size: 1.18rem; margin: 0.85rem 0 0.45rem; }
.flow p { font-size: 0.86rem; line-height: 1.5; color: var(--muted); max-width: 24ch; margin-inline: auto; }
@media (max-width: 980px) {
  .flow { grid-template-columns: repeat(2, 1fr); }
  .flow li { border-bottom: 1px solid var(--line); }
  .flow li:nth-child(2n) { border-right: 0; }
  .flow li:last-child { grid-column: 1 / -1; border-bottom: 0; }
}
@media (max-width: 560px) {
  /* De woorden zijn kort genoeg voor twee kolommen, en dat scheelt op de
     telefoon bijna vierhonderd pixels ten opzichte van vijf rijen onder elkaar. */
  /* Symmetrische marge, anders staat de gecentreerde tekst optisch scheef. */
  .flow li { padding: 1.1rem 0.7rem 1.2rem; }
  .flow h3 { font-size: 1.05rem; }
  .flow p { font-size: 0.82rem; }
}

/* gelegenheden onder de cadeautekst */
.occasions {
  margin: 1.4rem 0 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
  font-size: 0.86rem; line-height: 1.7; color: var(--muted-2) !important; max-width: 44ch;
}

/* de knop in de studio krijgt nadruk als de foto al klaarstaat */
.generate-btn.ready { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }

/* ---- 6b. Kwaliteit vertaald naar wat de klant eraan heeft ------------
   Losse specificaties zeggen een koper niets. Elk getal krijgt hier de
   reden erbij waarom het uitmaakt. Staat over de volle breedte onder de
   ambachtssectie, op de donkere ondergrond. */
.benefits {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  margin-top: clamp(2.2rem, 4vw, 3.5rem);
}
.benefits .b { padding: 1.9rem 1.6rem 0; border-right: 1px solid var(--line); }
.benefits .b:first-child { padding-left: 0; }
.benefits .b:last-child { border-right: 0; }
.benefits .k { display: block; font-family: var(--f-serif); font-size: 1.85rem; line-height: 1; color: var(--ink); }
.benefits .k i { font-style: normal; font-size: 0.8rem; letter-spacing: 0.02em; }
.benefits .t {
  display: block; margin: 0.7rem 0 0.55rem;
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}
.benefits p { margin: 0; max-width: none; font-size: 0.88rem; line-height: 1.55; color: var(--muted); }
@media (max-width: 980px) {
  .benefits { grid-template-columns: 1fr 1fr; }
  .benefits .b { padding-inline: 1.3rem; border-bottom: 1px solid var(--line); padding-bottom: 1.6rem; }
  .benefits .b:nth-child(2n) { border-right: 0; padding-right: 0; }
  .benefits .b:nth-child(2n+1) { padding-left: 0; }
  .benefits .b:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
}
@media (max-width: 359px) {
  .benefits { grid-template-columns: 1fr; }
  .benefits .b { padding: 1.5rem 0; border-right: 0; border-bottom: 1px solid #3a352d; }
  .benefits .b:last-child { border-bottom: 0; }
}

/* ---- 6d. Herhaalde, ingetogen oproep tot actie ------------------------ */
.cta-inline {
  display: flex; align-items: center; gap: 1rem 2rem; flex-wrap: wrap;
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.6rem; border-top: 1px solid var(--line);
}
.cta-inline .fine { font-size: 0.84rem; color: var(--muted-2); }

/* ---- 7. Eerlijke bewijsrij ------------------------------------------- */
.trust-row { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); }
.trust-row .t { padding: 1.5rem 1.4rem 1.6rem; border-right: 1px solid var(--line); }
.trust-row .t:last-child { border-right: 0; }
.trust-row .t b { display: block; font-family: var(--f-serif); font-weight: 400; font-size: 1.1rem; margin-bottom: 0.35rem; }
.trust-row .t span { font-size: 0.84rem; line-height: 1.5; color: var(--muted); }
@media (max-width: 860px) {
  .trust-row { grid-template-columns: 1fr; }
  .trust-row .t { border-right: 0; border-bottom: 1px solid var(--line); }
  .trust-row .t:last-child { border-bottom: 0; }
}

/* vijf specificaties naast elkaar in de ambachtssectie */
.spec-row.five { grid-template-columns: repeat(5, 1fr); gap: 1.1rem; }
@media (max-width: 1080px) { .spec-row.five { grid-template-columns: repeat(3, 1fr); row-gap: 1.6rem; } }
@media (max-width: 560px) { .spec-row, .spec-row.five { grid-template-columns: repeat(2, 1fr); row-gap: 1.4rem; } }

/* Price reassurance strip (from-price + trust, shown before generating) */

/* Stand van de bomen op de overpagina; blijft weg zolang er nul zijn. */
.tree-count { margin-top: 0.9rem; font-size: 0.86rem; color: var(--muted); }
.tree-count b { color: var(--ink); font-weight: 600; }

/* Mandje in de kop. Alleen zichtbaar als er iets in zit. */
.nav-mand {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 500; color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.nav-mand[hidden] { display: none; }
.nav-mand b {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem;
  background: var(--accent); color: var(--paper);
  border-radius: 999px; font-size: 0.66rem; letter-spacing: 0;
}
/* display op de klasse overstemt het hidden-attribuut, dus dit is nodig om
   het telbolletje bij een lege mand echt weg te krijgen. */
/* Klein duwtje bij hover, alsof het karretje een stukje rolt. Zelfde taal
   als de pijl die in je knoppen meebeweegt. */
.nav-mand .nav-ico { transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1); }
.nav-mand:hover .nav-ico,
.nav-mand:focus-visible .nav-ico { transform: translateX(2px); }
/* En een stoot op het moment dat er iets bij komt. Zonder dat is de teller
   je enige signaal, en die verandert zo klein dat je het mist. */
@keyframes mand-stoot {
  0%   { transform: none; }
  30%  { transform: translateY(-3px) scale(1.1); }
  60%  { transform: translateY(0) scale(0.96); }
  100% { transform: none; }
}
.nav-mand.stoot .nav-ico { animation: mand-stoot 0.5s ease; }
.nav-mand b[hidden] { display: none; }
.nav-mand:hover { color: var(--accent); }

/* Vier kaarten horen twee bij twee, niet drie plus een eenzame op rij twee. */
.info-cols.vier { grid-template-columns: 1fr 1fr; }
.info-cols.vier .ic:nth-child(2n) { border-right: 0; }
.info-cols.vier .ic:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.info-cols.vier .ic:nth-child(2n+1) { border-right: 1px solid var(--line); }
/* Onderkop onder een sectiekop: iets groter dan de lopende tekst. */
.lede-sub { font-family: var(--f-serif); font-size: 1.12rem; font-style: italic; color: var(--muted); margin-bottom: 1.2rem; }
@media (max-width: 760px) {
  .info-cols.vier { grid-template-columns: 1fr; }
  .info-cols.vier .ic { border-right: 0; border-bottom: 1px solid var(--line); }
  .info-cols.vier .ic:last-child { border-bottom: 0; }
}

/* Bomenbelofte onder de vijf stappen. Eén regel, geen blok: het hoort erbij
   maar het is niet waar de homepage over gaat. */
.boomregel {
  display: flex; align-items: center; justify-content: center; gap: 0.7rem;
  margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  font-size: 0.86rem; color: var(--muted); text-align: center; flex-wrap: wrap;
}
.boomregel b { color: var(--ink); font-weight: 500; }
.boomregel a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.boomregel svg { flex: 0 0 auto; }

/* ---- Boomteller -----------------------------------------------------
   De stand van de belofte, groot genoeg om te zien. Stond eerder als
   halve zin achter een alinea op de about; daar las niemand hem.
   Het getal komt van /.netlify/functions/trees en telt op bij het
   laden. Lukt dat niet, dan blijft alleen de belofte staan: die is ook
   zonder cijfer waar. */
.boomteller {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2.2rem);
  margin-top: 1.8rem; padding: clamp(1.2rem, 3vw, 1.8rem) clamp(1.2rem, 3vw, 2rem);
  background: var(--paper-2); border: 1px solid var(--line);
}
.boomteller .bt-cijfer {
  display: none; align-items: baseline; gap: 0.55rem; flex: 0 0 auto;
}
.boomteller.geladen .bt-cijfer { display: flex; }
.bt-cijfer b {
  font-family: var(--f-serif); font-weight: 380; line-height: 0.9;
  font-size: clamp(2.8rem, 8vw, 4.2rem); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.bt-cijfer span {
  font-family: var(--f-serif); font-style: italic; font-weight: 300;
  font-size: clamp(1rem, 2.4vw, 1.25rem); color: var(--accent);
}
.bt-uitleg {
  flex: 1 1 15rem; margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--muted);
  display: flex; align-items: flex-start; gap: 0.65rem;
}
.bt-uitleg svg { flex: 0 0 auto; margin-top: 0.15rem; color: var(--accent); }
.bt-uitleg b { color: var(--ink); font-weight: 500; }
.bt-uitleg a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* Op de homepage staat hij midden onder de vijf stappen, met een streep
   erboven in plaats van een kader: daar zou een tweede blok te zwaar zijn. */
.boomteller.los {
  background: none; border: 0; border-top: 1px solid var(--line);
  padding: 1.6rem 0 0; margin-top: 2rem;
  justify-content: center; text-align: left;
}
.boomteller.los .bt-uitleg { flex: 0 1 26rem; }

@media (max-width: 560px) {
  .boomteller { gap: 0.9rem; }
  .boomteller.los { justify-content: flex-start; }
}

/* Op de about staat de belofte al in de kaart erboven; daar toont de teller
   alleen het getal. Dan mag het kader ook helemaal weg blijven als het
   ophalen mislukt, want een leeg vak zegt niets. */
.boomteller.alleen-getal { display: none; }
.boomteller.alleen-getal.geladen { display: flex; }
.boomteller.alleen-getal .bt-cijfer { gap: 0.75rem; }
.boomteller.alleen-getal .bt-cijfer svg { color: var(--accent); align-self: center; }

/* ---- Setkorting ------------------------------------------------------
   Tien procent vanaf drie werken. Stond alleen in de checkout, dus je zag
   het pas als je er al drie had. Nu ook in de cadeausectie, waar de
   gedachte "misschien ook een voor iemand anders" zit. Rustig gehouden:
   het merk verkoopt geen aanbiedingen, dit is een feit dat handig is om
   te weten. */
.stapelkorting {
  display: flex; align-items: flex-start; gap: 0.7rem;
  margin: 1.4rem 0; padding: 0.95rem 1.1rem;
  border: 1px solid var(--line); background: var(--paper-2);
  font-size: 0.86rem; line-height: 1.55; color: var(--muted);
  max-width: 46ch;
}
.stapelkorting svg { flex: 0 0 auto; margin-top: 0.2rem; color: var(--accent); }
.stapelkorting b { color: var(--ink); font-weight: 500; }