/* ══════════════════════════════════════════════════════════════
   LETTERTYPES
   Deze staan in de map fonts/ naast dit bestand, dus je site haalt
   ze niet meer bij Google op. Dat laadt sneller, ziet er overal
   hetzelfde uit, en er gaan geen bezoekersgegevens naar Google.

   Zolang de map fonts/ nog leeg is, gebruikt de browser gewoon een
   reservelettertype — de site blijft dus werken.
   ══════════════════════════════════════════════════════════════ */

/* Newsreader — voor koppen en titels */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/newsreader-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/newsreader-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/newsreader-300-italic.woff2') format('woff2');
}

/* Jost — voor knoppen, menu en gewone tekst */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/jost-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jost-400.woff2') format('woff2');
}


/* ══════════════════════════════════════════════════════════════
   Starry Little Stories — stijlen
   Alle kleuren, lettertypes en maten staan bovenaan in :root.
   Verander daar iets en het verandert overal op de site mee.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Kleuren */
  --bg:          #FAF6EE;  /* pagina-achtergrond, licht beige */
  --ink:         #000000;  /* tekst, randen, zwarte knoppen */
  --white:       #FFFFFF;
  --tile:        #F2EDE3;  /* lijstjes rond de posters */
  --rule:        #E6E0D4;  /* dunne scheidingslijnen */
  --muted:       #6E6E6E;  /* bijschriften, hover */
  --body:        #4A4A4A;  /* gewone tekst */
  --body-alt:    #333333;  /* tekst in het blauwe blok */
  --quote:       #1A1A1A;
  --legal:       #8C8C8C;
  --blue:        #9AB0BF;  /* balk bovenaan + Over Tess */
  --pink:        #E7A7C6;  /* personaliseer-blok */
  --olive:       #BCAC72;  /* nieuwsbrief-blok */
  --brown:       #4C3128;  /* hover van de zwarte knop */

  /* Lettertypes */
  --serif: 'Newsreader', Georgia, serif;
  --sans:  'Jost', -apple-system, 'Helvetica Neue', sans-serif;
  /* De naam op de poster. De klant kiest op de productpagina uit drie;
     poster.js zet deze vier variabelen dan om. Dit is de standaard. */
  --naam-font:    'Cormorant Garamond', Georgia, serif;
  --naam-gewicht: 300;
  --naam-spatie:  0.16em;
  --naam-caps:    uppercase;

  /* Ruimte */
  --gutter: 56px;          /* zijmarge van de secties */
  --section: 104px;        /* verticale ruimte tussen secties */
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--muted); }
img { display: block; }
input, button { font-family: inherit; }
::selection { background: var(--pink); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── Herbruikbare stukjes ──────────────────────────────────── */
.eyebrow {
  margin: 0 0 16px;
  font-size: 11.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink);
}

.h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.h2--lg   { font-size: 44px; line-height: 1.12; }
.h2--sm   { font-size: 40px; line-height: 1.14; }
.h2--news { font-size: 36px; line-height: 1.2; }
.h2 em    { font-style: italic; }

.body {
  font-size: 16px;
  line-height: 1.75;
  color: var(--body);
  font-weight: 300;
  text-wrap: pretty;
}
.body--form { margin: 24px 0 40px; max-width: 420px; }
.body--gift { margin: 22px 0 34px; max-width: 400px; }

.link-underline {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 6px;
  white-space: nowrap;
}

.btn {
  display: inline-block;
  padding: 17px 36px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
button.btn { border: 0; cursor: pointer; font-family: var(--sans); font-weight: 300; }
button.btn--outline { border: 1px solid var(--ink); background: transparent; }
.btn:disabled { opacity: .55; cursor: default; }
.btn--solid   { background: var(--ink); color: var(--white); margin-top: 34px; }
.btn--solid:hover { background: var(--brown); color: var(--white); }
.btn--outline { border: 1px solid var(--ink); padding: 17px 34px; }
.btn--outline:hover { background: var(--ink); color: var(--white); }

.grid { display: grid; }
.grid--4 { grid-template-columns: repeat(4, 1fr); gap: 36px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* ── 1. Aankondigingsbalk ──────────────────────────────────── */
.announce {
  background: var(--blue);
  color: var(--ink);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
  padding: 11px 20px;
  font-weight: 300;
}

/* ── 2. Header ─────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding: 26px var(--gutter);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  background: rgba(250, 246, 238, .94);
  backdrop-filter: blur(8px);
  z-index: 20;
}

.util {
  display: flex;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  flex: 1;
  gap: 26px;
  justify-content: flex-end;
}
.util a { white-space: nowrap; }

.logo {
  font-family: var(--serif);
  font-size: 23px;
  letter-spacing: .06em;
  font-weight: 400;
  white-space: nowrap;
  text-align: center;
  flex: 0 0 auto;
}

/* ── Het menu ──────────────────────────────────────────────────
   Achter de drie streepjes. Klik erop en het menu klapt uit
   onder de balk — op de computer én op de telefoon.
   ──────────────────────────────────────────────────────────── */
.nav {
  display: none;
  order: 3;
  flex-basis: 100%;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px;
  padding: 26px 0 6px;
  margin-top: 4px;
  border-top: 1px solid var(--rule);
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 400;
}
.nav.is-open { display: flex; }
.nav a { white-space: nowrap; }

/* de drie streepjes */
.nav-toggle {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
  height: 34px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 1px;
  width: 22px;
  background: var(--ink);
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── 3a. Hero zonder foto — rustige achtergrond ─────────────── */
.hero.hero--rustig {
  background-image: none;
  background: var(--bg);
  min-height: 0;
  padding: 132px 32px 124px;
  border-bottom: 1px solid var(--rule);
}
.hero.hero--rustig .hero__title,
.hero.hero--rustig .hero__sub,
.hero.hero--rustig .hero__eyebrow { color: var(--ink); }
.hero.hero--rustig .hero__sub { color: var(--body); }
.hero.hero--rustig .hero__overlay { display: none; }

.hero__eyebrow {
  margin: 0 0 22px;
  font-size: 11.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: 0;
  animation: opdoemen 1.1s ease .15s forwards;
}
.hero__knop {
  margin-top: 38px;
  opacity: 0;
  animation: opdoemen 1.2s ease 1.7s forwards;
}

/* ── 3. Hero ───────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background-image: url('art/starry-bear.jpg');
  background-size: cover;
  background-position: 50% 100%;
  text-align: center;
  padding: 104px 32px 140px;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.42) 0%,
    rgba(0,0,0,.16) 46%,
    rgba(0,0,0,.06) 100%);
}
.hero__inner { position: relative; max-width: 760px; }

.hero__link {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,.7);
  padding-bottom: 5px;
  transition: border-color .2s ease;
}
.hero__link:hover { color: var(--white); border-color: var(--white); }

.hero__title {
  margin: 34px 0 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 74px;
  line-height: 1.05;
  letter-spacing: .01em;
  color: var(--white);
  text-wrap: pretty;

  /* Komt van links naar rechts tevoorschijn.
     1.9s = hoe lang het duurt. Groter getal = langzamer. */
  clip-path: inset(0 100% 0 0);
  animation: onthullen 2.2s cubic-bezier(.45, .05, .25, 1) .3s forwards;
}

@keyframes onthullen {
  to { clip-path: inset(0 0 0 0); }
}

/* Het linkje erboven doemt rustig op */
.hero__link {
  opacity: 0;
  animation: opdoemen 1.1s ease .15s forwards;
}
@keyframes opdoemen {
  to { opacity: 1; }
}

.hero__sub {
  margin: 22px 0 0;
  font-family: var(--serif);
  font-size: 21px;
  font-style: italic;
  font-weight: 300;
  color: rgba(255,255,255,.92);
  opacity: 0;
  animation: opdoemen 1.2s ease 1.5s forwards;   /* komt na de titel */
}

/* ── De schuivende balk onder de foto ──────────────────────── */
.schuifband {
  border-bottom: 1px solid var(--rule);
  padding: 34px 0;
  overflow: hidden;
  /* aan de randen vervaagt de tekst, dat oogt rustiger */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.schuifband__track {
  display: flex;
  width: max-content;
  /* 90s = hoe lang één rondje duurt. Groter getal = langzamer. */
  animation: schuif 90s linear infinite;
}

.schuifband__groep { display: flex; }

.schuifband__groep span {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  padding-right: 32px;
}
/* het sterretje tussen de zinnen — mag ook ★ of ✧ of · zijn */
.schuifband__groep span::after {
  content: '✦';
  padding-left: 32px;
  font-size: 9px;
  vertical-align: 2px;
  color: #C4B9A4;
}

@keyframes schuif {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Wie liever geen bewegende beelden ziet, krijgt alles gewoon stil */
@media (prefers-reduced-motion: reduce) {
  .hero__title { clip-path: none; animation: none; }
  .hero__link, .hero__sub { opacity: 1; animation: none; }
  .schuifband__track { animation: none; }
}

/* ── 5. Collectie ──────────────────────────────────────────── */
.collection { padding: var(--section) var(--gutter) 0; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 52px;
}

.card__frame {
  background: var(--tile);
  padding: 26px;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  box-shadow: 0 22px 38px -22px rgba(0,0,0,.35);
  transition: transform .4s ease;
}
.card:hover .card__frame img { transform: translateY(-4px); }

.card__title {
  margin: 20px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: .01em;
}
.card__note  { margin: 6px 0 0;  font-size: 13.5px; color: var(--muted); font-weight: 300; }
.card__price { margin: 10px 0 0; font-size: 13.5px; letter-spacing: .04em; }

/* ── 6. Personaliseren ─────────────────────────────────────── */
.personalise {
  margin-top: 112px;
  background: var(--pink);
  padding: 96px var(--gutter);
}
.personalise__inner {
  display: grid;
  grid-template-columns: 1fr .95fr;
  gap: 80px;
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
}

.preview {
  background: var(--white);
  padding: 56px;
  display: flex;
  justify-content: center;
}
.preview__poster {
  position: relative;
  width: 100%;
  max-width: 392px;
  box-shadow: 0 34px 64px -30px rgba(0,0,0,.3);
}
.preview__poster img { width: 100%; height: auto; }

.preview__text {
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0 28px;
}
.preview__name {
  font-family: var(--naam-font);
  font-weight: var(--naam-gewicht);
  font-size: 46px;
  letter-spacing: var(--naam-spatie);
  color: var(--ink);
  line-height: 1;
  text-transform: var(--naam-caps);
  white-space: nowrap;
  overflow: hidden;
}
.preview__date {
  font-family: var(--naam-font);
  font-size: 17px;
  letter-spacing: var(--naam-spatie);
  color: var(--muted);
  margin-top: 12px;
}

.fields { display: grid; gap: 24px; max-width: 420px; }
.field { display: block; }
.field__label {
  display: block;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 10px;
}
.field input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  font-size: 20px;
  padding: 10px 0;
  outline: none;
  font-weight: 300;
  letter-spacing: .04em;
}
.field input::placeholder { color: rgba(0,0,0,.35); }

.formats { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.format {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 14px 26px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.format.is-active { background: var(--ink); color: var(--white); }

/* ── Lettertype van de naam kiezen ─────────────────────────── */
.letterkeuze { margin-top: 34px; }
.letters { display: flex; gap: 12px; flex-wrap: wrap; }
.letter {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 12px 22px;
  font-size: 20px;
  line-height: 1.1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.letter.is-active { background: var(--ink); color: var(--white); }

/* ── Het woordmerk met haar eigen sterretjes ───────────────────
   De naam blijft gewone tekst (goed voor Google en voor de
   laadtijd); alleen de twee sterren zijn een plaatje. Alle maten
   staan in em, zodat ze meeschalen als het korps kleiner wordt. */
.merk { position: relative; display: inline-block; }
.merk__sterren {
  position: absolute;
  height: 0.60em;
  width: auto;
  left: -0.75em;
  top: -0.33em;
  pointer-events: none;
}
.merk { margin-left: 0.81em; }

/* ── 7. Kraamcadeau ────────────────────────────────────────── */
.gifts { padding: var(--section) var(--gutter); }
.gifts__inner {
  display: grid;
  grid-template-columns: .85fr 1fr;
  gap: 72px;
  align-items: center;
}

.bundle { background: var(--tile); padding: 28px 24px 26px; }
.bundle__frame {
  aspect-ratio: 3 / 4;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bundle__frame img { width: 100%; height: 100%; object-fit: contain; }
.bundle__title  { margin: 20px 0 0; font-family: var(--serif); font-weight: 400; font-size: 18px; }
.bundle__note   { margin: 6px 0 0;  font-size: 13px; line-height: 1.6; color: var(--muted); font-weight: 300; }
.bundle__price  { margin: 10px 0 0; font-size: 13.5px; }

/* ── 8. Over Tess ──────────────────────────────────────────── */
.about { background: var(--blue); padding: var(--section) var(--gutter); }
.about__inner {
  display: grid;
  grid-template-columns: .8fr 1fr;
  gap: 80px;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
}
.about__portrait { display: flex; justify-content: center; }
.about__portrait img {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 42%;   /* schuif dit als je gezicht niet mooi in beeld staat */
  border-radius: 56% 44% 52% 48% / 46% 50% 50% 54%;
  box-shadow: 0 34px 60px -34px rgba(0,0,0,.35);
}
.about__text {
  margin: 26px 0 0;
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--body-alt);
  font-weight: 300;
  max-width: 520px;
  text-wrap: pretty;
}
.about__text + .about__text { margin-top: 20px; }
.about__sign {
  margin: 34px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
}

/* ── 9. Reviews ────────────────────────────────────────────── */
.reviews { padding: 96px var(--gutter); }
.reviews__title {
  margin: 0 0 56px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 36px;
  text-align: center;
}
.reviews__grid { gap: 56px; max-width: 1200px; margin: 0 auto; }
.review { text-align: center; padding: 0 12px; }
.review__stars { margin: 0; font-size: 12px; letter-spacing: .3em; color: var(--ink); }
.review__quote {
  margin: 22px 0 0;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.65;
  color: var(--quote);
  font-weight: 300;
  font-style: italic;
  text-wrap: pretty;
}
.review__who {
  margin: 20px 0 0;
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ── 10. Nieuwsbrief ───────────────────────────────────────── */
.newsletter {
  margin: 0 var(--gutter) 96px;
  background: var(--olive);
  color: var(--ink);
  padding: 80px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.newsletter__body {
  margin: 14px 0 0;
  font-size: 15.5px;
  color: rgba(0,0,0,.7);
  font-weight: 300;
  max-width: 460px;
}
.newsletter__form {
  display: flex;
  align-items: stretch;
  min-width: 340px;
  flex: 0 1 380px;
}
.newsletter__form input {
  flex: 1;
  background: transparent;
  border: 1px solid rgba(0,0,0,.45);
  border-right: 0;
  color: var(--ink);
  padding: 16px 18px;
  font-size: 14px;
  outline: none;
  font-weight: 300;
  min-width: 0;
}
.newsletter__form input::placeholder { color: rgba(0,0,0,.45); }
.newsletter__form button {
  background: var(--ink);
  color: var(--bg);
  border: 0;
  padding: 16px 26px;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease;
}
.newsletter__form button:hover { background: var(--brown); }

/* ── 11. Footer ────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--rule);
  padding: 56px var(--gutter) 40px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
}
.footer__wordmark { margin: 0; font-family: var(--serif); font-size: 21px; }
.footer__blurb {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  font-weight: 300;
  max-width: 280px;
}
.footer__col {
  display: grid;
  gap: 12px;
  align-content: start;
  font-size: 14px;
  color: var(--body);
  font-weight: 300;
}
.footer__col a { color: var(--body); }
.footer__head {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
}
.legal {
  padding: 0 var(--gutter) 40px;
  font-size: 12px;
  color: var(--legal);
  font-weight: 300;
}

/* ══ Tablet — tot 1100px ═══════════════════════════════════ */
@media (max-width: 1100px) {
  :root { --gutter: 32px; }

  .topbar { padding: 20px var(--gutter); }
  .logo   { font-size: 20px; }
  .util   { font-size: 11.5px; gap: 16px; }
  .nav    { gap: 22px; font-size: 11.5px; }

  .grid--4, .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .section-head { flex-wrap: wrap; }

  .personalise__inner,
  .gifts__inner,
  .about__inner { grid-template-columns: 1fr; gap: 48px; }

  .footer { grid-template-columns: 1fr 1fr; }
}

/* ══ Mobiel — tot 720px ════════════════════════════════════ */
@media (max-width: 720px) {
  :root { --gutter: 24px; --section: 72px; }

  .topbar { gap: 12px; }
  .nav-toggle { flex: 0 0 34px; }
  .logo { flex: 1; font-size: 16px; letter-spacing: .03em; }
  .util { flex: 0 0 auto; gap: 0; font-size: 10.5px; letter-spacing: .1em; }
  .util a:first-child { display: none; }   /* 'Zoeken' verbergen op mobiel */

  .nav {
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 20px 0 8px;
  }

  .hero { min-height: 560px; padding: 72px 24px 96px; }
  .hero__title { font-size: 44px; }
  .hero__sub   { font-size: 18px; }
  .schuifband { padding: 26px 0; }
  .schuifband__groep span { padding-right: 24px; }
  .schuifband__groep span::after { padding-left: 24px; }

  .grid--4, .grid--3 { grid-template-columns: 1fr; }
  .footer { grid-template-columns: 1fr; }

  .h2 { font-size: 32px; }
  .h2--lg { font-size: 32px; }
  .h2--sm { font-size: 30px; }
  .h2--news { font-size: 28px; }

  .personalise { padding: 72px var(--gutter); margin-top: 72px; }
  .preview { padding: 24px; }
  .preview__name { font-size: 34px; }
  .preview__date { font-size: 13px; margin-top: 8px; }

  .newsletter { padding: 56px 28px; margin: 0 var(--gutter) 72px; }
  .newsletter__form { min-width: 0; flex: 1 1 100%; }

  .reviews__grid { gap: 40px; }
}

/* ══════════════════════════════════════════════════════════════
   WINKELPAGINA'S
   Alles hieronder hoort bij de productpagina, de winkelwagen,
   de bedankpagina en het bestellingenoverzicht.
   ══════════════════════════════════════════════════════════════ */

/* ── Losse meldingen ───────────────────────────────────────── */
.melding {
  padding: 96px var(--gutter);
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.melding .btn { margin-top: 28px; }

.terug {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 40px;
}

/* ── Productpagina ─────────────────────────────────────────── */
.product { padding: 56px var(--gutter) 104px; }

.product__grid {
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: 80px;
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
}

.preview--product { background: var(--tile); padding: 56px; }

.product__prijs {
  margin: 20px 0 0;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 300;
}

.hulp {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.toegevoegd {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--body);
}
.toegevoegd a { border-bottom: 1px solid var(--ink); }

.specs {
  margin: 48px 0 0;
  padding: 32px 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
  display: grid;
  gap: 12px;
  font-size: 14.5px;
  color: var(--body);
  line-height: 1.6;
}
.specs li { padding-left: 20px; position: relative; }
.specs li::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: var(--muted);
}

/* ── Winkelwagen + afrekenen ───────────────────────────────── */
.checkout { padding: 72px var(--gutter) 104px; max-width: 1280px; margin: 0 auto; }

.checkout__grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 72px;
  align-items: start;
}

.regels { display: grid; gap: 0; }

.regel {
  display: grid;
  grid-template-columns: 108px 1fr auto;
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.regel:last-child { border-bottom: 1px solid var(--rule); }

.regel__beeld {
  background: var(--tile);
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.regel__beeld img { width: 100%; height: 100%; object-fit: contain; }

.regel__titel   { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 19px; }
.regel__formaat { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.regel__detail  { margin: 8px 0 0; font-size: 13.5px; color: var(--body); letter-spacing: .02em; }

.regel__weg {
  margin-top: 14px;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 1px solid var(--rule);
}
.regel__weg:hover { color: var(--ink); border-color: var(--ink); }

.regel__rechts { text-align: right; display: grid; gap: 14px; justify-items: end; }
.regel__prijs  { margin: 0; font-size: 15px; }

.aantal {
  display: flex;
  align-items: center;
  border: 1px solid var(--rule);
}
.aantal button {
  width: 34px;
  height: 34px;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  color: var(--ink);
  font-family: var(--sans);
}
.aantal button:hover { background: var(--tile); }
.aantal span { min-width: 30px; text-align: center; font-size: 14px; }

/* ── Adresformulier ────────────────────────────────────────── */
.adres { display: grid; gap: 24px; max-width: 520px; margin-top: 32px; }
.adres__rij--twee { display: grid; grid-template-columns: 160px 1fr; gap: 24px; }

.adres select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  font-size: 18px;
  padding: 10px 0;
  outline: none;
  font-weight: 300;
  font-family: var(--sans);
  border-radius: 0;
}
.adres input { font-size: 18px; }

/* ── Overzicht rechts ──────────────────────────────────────── */
.samenvatting {
  background: var(--tile);
  padding: 36px 32px 32px;
  position: sticky;
  top: 120px;
}
.samenvatting__titel {
  margin: 0 0 24px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
}
.samenvatting__rij {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  font-size: 15px;
  color: var(--body);
}
.samenvatting__rij--totaal {
  border-top: 1px solid var(--rule);
  margin-top: 10px;
  padding-top: 18px;
  font-size: 18px;
  color: var(--ink);
}
.samenvatting__gratis {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.samenvatting__knop { width: 100%; margin-top: 28px; text-align: center; }
.samenvatting__klein {
  margin: 20px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
}
.samenvatting__fout {
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #8A2B2B;
  background: #F6E7E7;
  padding: 14px 16px;
}

/* ── Bedankpagina ──────────────────────────────────────────── */
.bedankt {
  padding: 120px var(--gutter);
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

/* ── Bestellingenoverzicht ─────────────────────────────────── */
.beheer { padding: 72px var(--gutter) 104px; max-width: 860px; margin: 0 auto; }
.beheer__inlog { max-width: 320px; margin: 40px 0 56px; }
.beheer__telling {
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 28px;
}

.bestelling {
  border: 1px solid var(--rule);
  padding: 28px 28px 24px;
  margin-bottom: 20px;
  background: var(--white);
}
.bestelling--mislukt { opacity: .6; }

.bestelling__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.bestelling__kop h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: .04em;
}
.bestelling__datum { margin: 6px 0 0; font-size: 13px; color: var(--muted); }

.badge {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--rule);
}
.badge--betaald { background: #E3EDE3; border-color: #C3D8C3; }
.badge--open    { background: #F5EFD9; border-color: #E2D5A8; }
.badge--mislukt { background: #F6E7E7; border-color: #E2C4C4; }

.bestelling__regels {
  margin: 22px 0 0;
  padding: 0 0 0 18px;
  display: grid;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--body);
}
.bestelling__totaal { margin: 20px 0 0; font-size: 14.5px; }
.bestelling__adres {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  line-height: 1.7;
  color: var(--body);
}

/* ══ Tablet ════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .product__grid { grid-template-columns: 1fr; gap: 48px; }
  .checkout__grid { grid-template-columns: 1fr; gap: 48px; }
  .samenvatting { position: static; }
}

/* ══ Mobiel ════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .product { padding: 32px var(--gutter) 72px; }
  .preview--product { padding: 24px; }

  .regel { grid-template-columns: 76px 1fr; gap: 16px; }
  .regel__rechts {
    grid-column: 1 / -1;
    justify-items: start;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .adres__rij--twee { grid-template-columns: 1fr; }
  .checkout { padding: 40px var(--gutter) 72px; }
  .bedankt { padding: 72px var(--gutter); }
}


/* ══════════════════════════════════════════════════════════════
   SHOP THE LOOK — je posters in een echte kamer
   ══════════════════════════════════════════════════════════════ */
.lookbook__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.lookbook__kaart { display: block; }
.lookbook__beeld {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--tile);
  overflow: hidden;
}
.lookbook__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.lookbook__kaart:hover .lookbook__beeld img { transform: scale(1.03); }

/* het label dat over de foto valt */
.lookbook__label {
  position: absolute;
  left: 18px;
  bottom: 18px;
  background: rgba(250, 246, 238, .93);
  padding: 11px 18px;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}

/* zolang er nog geen foto is */
.lookbook__leeg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 24px;
  border: 1px dashed var(--rule);
  color: var(--muted);
}
.lookbook__leeg strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17px;
  color: var(--body);
}
.lookbook__leeg span { font-size: 12.5px; line-height: 1.6; }
.lookbook__leeg code {
  font-size: 12px;
  background: var(--bg);
  padding: 3px 7px;
  letter-spacing: .02em;
}

/* ══════════════════════════════════════════════════════════════
   SHOP PER THEMA
   ══════════════════════════════════════════════════════════════ */
.themas { padding-bottom: 104px; }
.themas__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.thema {
  display: block;
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--tile);
}
.thema img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.thema:hover img { transform: scale(1.04); }
.thema__waas {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.62) 100%);
}
.thema__tekst {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 24px;
  color: var(--white);
}
.thema__naam {
  display: block;
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.15;
}
.thema__aantal {
  display: block;
  margin: 7px 0 0;
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}

@media (max-width: 1100px) {
  .lookbook__grid, .themas__grid { grid-template-columns: repeat(2, 1fr); }
  .hero.hero--rustig { padding: 96px 32px 88px; }
}
@media (max-width: 720px) {
  .lookbook__grid, .themas__grid { grid-template-columns: 1fr; gap: 20px; }
  .hero.hero--rustig { padding: 64px 24px 60px; }
  .thema { aspect-ratio: 16 / 10; }
}


/* ══════════════════════════════════════════════════════════════
   Kop: naam in het midden, menu er altijd onder, icoontjes rechts
   ══════════════════════════════════════════════════════════════ */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 24px;
}
.logo { grid-column: 2; grid-row: 1; text-align: center; }
.util { grid-column: 3; grid-row: 1; justify-content: flex-end; gap: 20px; align-items: center; }
.nav {
  display: flex;
  flex-basis: auto;
  grid-column: 1 / -1; grid-row: 2;
  justify-content: center;
  border-top: 1px solid var(--rule);
  padding: 20px 0 4px;
  margin-top: 14px;
  gap: 30px;
}
/* de sterretjes hangen links buiten de naam; die extra marge hoeft
   niet meer nu de naam in het midden staat, anders staat hij scheef */
.topbar .merk { margin-left: 0; }

.util__ico { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.util__ico svg { width: 20px; height: 20px; display: block; }
.util__aantal {
  margin-left: 7px; font: 400 11.5px 'Jost', sans-serif;
  font-variant-numeric: tabular-nums; color: var(--ink);
}

@media (max-width: 720px){
  .nav { flex-direction: row; flex-wrap: wrap; gap: 14px; font-size: 10px; padding: 14px 0 4px; }
  .util { gap: 16px; }
  .util a:first-child { display: inline-flex; }   /* zoeken mag nu wél mee */
  .util__ico svg { width: 19px; height: 19px; }
}

/* ── De vier beloftes onder de kop ───────────────────────────── */
.beloftes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 40px var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.belofte { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.belofte svg { width: 26px; height: 26px; color: var(--ink); }
.belofte span { font-size: 12px; line-height: 1.5; letter-spacing: .04em; color: var(--muted); max-width: 24ch; }
@media (max-width: 900px){
  .beloftes { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; padding: 32px var(--gutter); }
}
@media (max-width: 420px){
  .belofte span { font-size: 11px; }
  .belofte svg { width: 23px; height: 23px; }
}

/* ── Tekstpagina's (verzending, voorwaarden, privacy) ────────── */
.tekstpagina { max-width: 660px; margin: 0 auto; padding: 72px var(--gutter) 96px; }
.tekstpagina h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 5vw, 42px);
  line-height: 1.15; margin: 0 0 10px; letter-spacing: -.01em; }
.tekstpagina .datum { font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 40px; }
.tekstpagina h2 { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.3;
  margin: 40px 0 10px; }
.tekstpagina p, .tekstpagina li { font-size: 15.5px; line-height: 1.7; color: var(--body); }
.tekstpagina p { margin: 0 0 14px; }
.tekstpagina ul { margin: 0 0 14px; padding-left: 20px; }
.tekstpagina li { margin-bottom: 7px; }
.tekstpagina a { color: var(--ink); }
@media (max-width: 720px){
  .tekstpagina { padding: 48px var(--gutter) 72px; }
  .tekstpagina p, .tekstpagina li { font-size: 15px; }
}


/* ── Het kleine rondje rechtsonder bij het portret ─────────────
   Let op: de regel `.about__portrait img` hierboven geldt óók voor dit
   rondje en is specifieker dan een losse klasse. Daarom staat hier
   `.about__portrait .about__stip` en zetten we breedte, verhouding en
   ronding expliciet terug. */
.about__foto { position: relative; width: 100%; max-width: 420px; }

.about__portrait .about__stip {
  position: absolute;
  right: -16px;
  bottom: 10px;
  width: 176px;
  max-width: 176px;
  height: 176px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 40%;
  border: 3px solid var(--bg);
  box-shadow: 0 16px 30px -16px rgba(0,0,0,.45);
}
@media (max-width: 900px){
  .about__portrait .about__stip {
    width: 140px; max-width: 140px; height: 140px; border-width: 3px; right: -8px;
  }
}
@media (max-width: 420px){
  .about__portrait .about__stip {
    width: 116px; max-width: 116px; height: 116px; border-width: 3px; right: 0; bottom: 14px;
  }
}