:root {
  --font-head: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --bg: #faf9f6;
  --bg-alt: #f1efe9;
  --ink: #121110;
  --ink-soft: #4a4744;
  --line: #dedad2;
  --line-strong: #121110;
  --white: #ffffff;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --maxw: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }

/* Knoppen en formuliervelden erven het lettertype niet vanzelf van body: browsers
   geven ze hun eigen systeemletter. Zonder deze regel stond het aantal in het
   winkelwagentje in Arial tussen de Helvetica Neue van al het andere. */
button, input, select, textarea { font-family: inherit; }

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

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }

/* De server verpakt elke <img> in een <picture> met AVIF- en WebP-varianten
   (lib/beeldInjectie.js). Zonder deze regel schuift die <picture> als extra element in de
   opmaak: waar een foto een direct kind was van een grid of flexbox, is dat nu de wrapper,
   en verliest de foto zijn plek. `display: contents` haalt de wrapper uit de opmaak zodat
   de <img> zich gedraagt alsof hij er nog steeds direct in staat.

   LET OP bij nieuwe CSS: een selector als `.vlak > img` matcht hier niet meer op, want er
   staat een <picture> tussen. Schrijf `.vlak img`. */
picture { display: contents; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 400; line-height: 1.05; }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.1; }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; color: var(--ink-soft); }

a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: 24px;
}

.eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  border: none;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  padding: 0 0 6px 0;
  margin-bottom: 22px;
  background: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  transition: transform 0.4s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
  background: var(--ink);
  color: var(--white);
}
.btn:active { transform: scale(0.98); }
.btn:hover { background: #2b2926; }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn-outline:hover { background: var(--ink); color: var(--white); }

.btn-block { width: 100%; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-ic {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.16);
  margin: -6px -14px -6px 2px;
  flex-shrink: 0;
  transition: transform 0.5s var(--ease), background 0.3s var(--ease);
}
.btn-outline .btn-ic { background: rgba(18, 17, 16, 0.07); }
.btn:hover .btn-ic { transform: translateX(3px); }
.btn-outline:hover .btn-ic { background: rgba(255, 255, 255, 0.18); }

/* ---------- Header ---------- */
/* layout.js vult <div id="site-header"> met de aankondigingsbalk en de header. Zonder deze
   regel is die div een gewoon blok van precies de hoogte van zijn inhoud, en dan heeft de
   sticky header hieronder geen ruimte om binnen zijn ouder te blijven staan: hij scrollt
   mee weg met de div. Dat was op deze site altijd al zo — `position: sticky` stond er,
   maar de header verdween toch, en de winkelwagen dus ook. `display: contents` haalt de
   wrapper uit de opmaak, zodat balk en header directe kinderen van <body> worden en het
   plakken tegen de paginascroll werkt. */
#site-header { display: contents; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 249, 246, 0.86);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 24px;
  max-width: var(--maxw);
  margin: 0 auto;
}

.header-left {
  display: flex;
  align-items: center;
  justify-self: start;
}

.header-nav { justify-self: center; }

.logo {
  display: inline-flex;
  align-items: center;
}

.logo-img {
  height: 18px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14.5px;
  color: var(--ink-soft);
}

.nav-links a {
  position: relative;
  padding-bottom: 4px;
  transition: color 0.3s var(--ease);
}
.nav-links a:hover,
.nav-links a.active { color: var(--ink); }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--ink);
  transition: width 0.35s var(--ease);
}
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

.header-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 22px;
}

.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  align-items: center;
  position: relative;
  padding: 4px;
}

.cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--ink);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@keyframes cartCountPulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.4); }
  100% { transform: scale(1); }
}
.cart-count--pulse { animation: cartCountPulse 0.4s var(--ease); }

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
}

.mobile-nav { display: none; }

/* ---------- Mobile nav ---------- */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .menu-toggle { display: flex; }

  .mobile-nav {
    display: flex;
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 200;
    display: flex;
    flex-direction: column;
    padding: 24px;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.5s var(--ease), visibility 0s linear 0.5s;
  }
  .mobile-nav.open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.5s var(--ease), visibility 0s linear 0s;
  }
  .mobile-nav-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
  }
  .mobile-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 26px;
  }
  .mobile-nav li {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  }
  .mobile-nav.open li { opacity: 1; transform: translateY(0); }
  .mobile-nav.open li:nth-child(1) { transition-delay: 0.14s; }
  .mobile-nav.open li:nth-child(2) { transition-delay: 0.21s; }
  .mobile-nav.open li:nth-child(3) { transition-delay: 0.28s; }
  .mobile-nav a {
    font-family: var(--font-head);
    font-size: 2.2rem;
    font-weight: 400;
  }
}

/* ---------- Welcome bar ---------- */
.welcome-bar {
  text-align: center;
  padding: clamp(20px, 3vw, 40px) 24px clamp(14px, 2.4vw, 30px);
  background: var(--bg);
}
.welcome-bar p {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1.3rem, 3.4vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

/* ---------- Hero banner ---------- */
.hero-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #a9a9a9 0%, #c9c9c8 48%, #f2f2f0 100%);
  padding: 40px 10px 70px;
  min-height: calc(100vh - 170px);
  min-height: calc(100svh - 170px);
  overflow: hidden;
}
@media (max-width: 860px) {
  .hero-banner {
    min-height: calc(100vh - 128px);
    min-height: calc(100svh - 128px);
  }
}
.hero-stage {
  position: relative;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  text-align: center;
}
.hero-wordmark {
  width: 100%;
  height: auto;
  display: block;
}
.hero-banner-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(26px, 7vw, 100px);
  text-align: center;
}
.hero-banner-tagline {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.9rem, 6.2vw, 4.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #ffffff;
  max-width: 12ch;
}
.btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(28px, 4.5vw, 56px);
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: clamp(14px, 2vw, 22px);
  padding: 0.5em 1.5em;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.15rem, 2.8vw, 1.9rem);
  transition: background 0.3s var(--ease), transform 0.4s var(--ease);
}
.btn-hero:hover { background: rgba(18, 17, 16, 0.06); }
.btn-hero:active { transform: scale(0.98); }

@media (max-width: 640px) {
  .hero-banner { padding: 30px 10px 44px; }
  .hero-banner-content {
    position: static;
    transform: none;
    margin-top: 32px;
    gap: 16px;
  }
  .hero-banner-tagline {
    color: var(--ink);
    font-size: 1.55rem;
    max-width: none;
  }
  .btn-hero {
    margin-top: 10px;
    font-size: 1.05rem;
    border-radius: 10px;
  }
}

.hero-intro {
  padding-block: clamp(84px, 9vw, 116px) 0;
  text-align: center;
}
.hero-intro p.lead {
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 1rem + 1.6vw, 2.05rem);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--ink);
  max-width: 34ch;
  margin: 0 auto 34px;
  text-wrap: balance;
}

/* ---------- USP bar ---------- */
.usp-bar {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.usp-inner {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(26px, 6vw, 90px);
  padding: 17px 24px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}
@media (max-width: 640px) {
  .usp-inner { flex-direction: column; gap: 9px; padding: 14px 24px; }
}
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------- Sections ---------- */
section { padding-block: clamp(64px, 7vw, 100px); }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(48px, 6vw, 68px);
  gap: 24px;
  flex-wrap: wrap;
}
.section-head p { max-width: 420px; margin: 0 0 6px; }
.section-head h2 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); margin-bottom: 0; }

/* ---------- Product grid ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
@media (max-width: 960px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 560px) {
  .product-grid { grid-template-columns: 1fr; }
}

.product-grid--featured {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 44px);
}
@media (max-width: 560px) {
  .product-grid--featured { grid-template-columns: 1fr; gap: 34px; }
}

.product-card {
  display: block;
  transition: transform 0.6s var(--ease);
}
.product-card:hover { transform: translateY(-6px); }
.product-card .frame {
  position: relative;
  border: 8px solid var(--white);
  border-radius: 22px;
  overflow: hidden;
  background: var(--bg-alt);
  aspect-ratio: 4/5;
  box-shadow: 0 0 0 1px rgba(18, 17, 16, 0.06), 0 18px 44px -24px rgba(30, 25, 20, 0.16);
  transition: box-shadow 0.6s var(--ease);
}
.product-card:hover .frame {
  box-shadow: 0 0 0 1px rgba(18, 17, 16, 0.05), 0 32px 64px -26px rgba(30, 25, 20, 0.24);
}
.product-card .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.product-card:hover .frame img { transform: scale(1.045); }

/* Altijd zichtbare plus-knop: direct toevoegen aan het mandje. Klikken op de
   rest van de kaart opent nog steeds de productpagina. */
.card-add {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--ink);
  border: 1px solid rgba(18, 17, 16, 0.08);
  border-radius: 0;
  cursor: pointer;
  box-shadow: 0 8px 22px -8px rgba(30, 25, 20, 0.32);
  transition: background 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease);
}
.card-add svg { width: 16px; height: 16px; display: block; }
.card-add:hover { background: var(--ink); color: var(--white); }
.card-add:active { transform: scale(0.92); }
.card-add:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.product-card .sold-out-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--white);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}

.product-card .meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 16px;
  padding: 0 6px;
  gap: 12px;
}
.product-card h3 { margin: 0; font-size: 1.05rem; }
.product-card .price {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* ---------- Product detail ---------- */
.product-detail {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 70px;
  align-items: flex-start;
}
@media (max-width: 860px) {
  .product-detail { grid-template-columns: 1fr; gap: 36px; }
}
.product-detail .frame {
  border: 10px solid var(--white);
  border-radius: 26px;
  overflow: hidden;
  background: var(--bg-alt);
  aspect-ratio: 4/5;
  box-shadow: 0 0 0 1px rgba(18, 17, 16, 0.06), 0 34px 70px -34px rgba(30, 25, 20, 0.2);
}
.product-detail .frame img { width: 100%; height: 100%; object-fit: cover; }
.product-detail .price {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 22px;
  font-variant-numeric: tabular-nums;
}

.stock-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 10px;
}
.stock-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5d7a5f;
  flex-shrink: 0;
}

.qty-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 30px 0;
}
.qty-control {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  overflow: hidden;
}
.qty-control button {
  background: none;
  border: none;
  width: 40px;
  height: 44px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.3s var(--ease);
}
.qty-control button:hover { background: rgba(18, 17, 16, 0.05); }
.qty-control span { min-width: 30px; text-align: center; font-weight: 600; }
.qty-incart {
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.product-detail-info { list-style: none; padding: 0; margin: 34px 0 0; border-top: 1px solid var(--line); }
.product-detail-info li {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-soft);
}

/* ---------- Cart drawer ---------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 17, 16, 0.4);
  backdrop-filter: blur(2px);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.overlay.open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 100%);
  background: var(--bg);
  z-index: 301;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.5s var(--ease);
  border-radius: 24px 0 0 24px;
  box-shadow: -30px 0 70px -34px rgba(18, 17, 16, 0.3);
}
.cart-drawer.open { transform: translateX(0); }
@media (max-width: 560px) {
  .cart-drawer { border-radius: 0; }
}

.cart-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--line);
}
.cart-drawer-items { flex: 1; overflow-y: auto; padding: 10px 24px; }
.cart-line {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.cart-line img {
  width: 76px; height: 90px;
  object-fit: cover;
  border-radius: 12px;
  background: var(--bg-alt);
  box-shadow: 0 0 0 1px rgba(18, 17, 16, 0.06);
}
.cart-line-body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.cart-line-top { display: flex; justify-content: space-between; gap: 10px; }
.cart-line-remove { background: none; border: none; text-decoration: underline; font-size: 12px; cursor: pointer; color: var(--ink-soft); padding: 0; }

.cart-drawer-foot {
  padding: 24px;
  border-top: 1px solid var(--line);
}
.cart-subtotal-row {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: 18px;
}
.cart-empty { padding: 60px 0; text-align: center; color: var(--ink-soft); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: clamp(64px, 8vw, 96px) 0 34px;
  background: var(--bg-alt);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: clamp(40px, 5vw, 60px);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-wordmark {
  width: 112px;
  height: auto;
  margin-bottom: 20px;
  display: block;
}
@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
}
.footer-grid h4 {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-weight: 700;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-soft);
}

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field textarea, .field select {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--line-strong);
  box-shadow: 0 0 0 3px rgba(18, 17, 16, 0.07);
}
.field textarea { resize: vertical; min-height: 120px; }

.form-note { font-size: 13px; color: var(--ink-soft); margin-top: -8px; margin-bottom: 20px; }
.form-error { color: #a12b2b; font-size: 14px; margin: 12px 0 0; display: none; }
.form-error.show { display: block; }

/* ---------- Checkout summary ---------- */
.checkout-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: flex-start;
}
@media (max-width: 900px) {
  .checkout-layout { grid-template-columns: 1fr; }
}
.summary-card {
  background: var(--white);
  border-radius: 28px;
  padding: 28px;
  box-shadow: 0 0 0 1px rgba(18, 17, 16, 0.06), 0 40px 80px -44px rgba(30, 25, 20, 0.2);
}
.summary-line { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.summary-total { display: flex; justify-content: space-between; padding-top: 16px; font-weight: 700; font-size: 1.1rem; }

/* ---------- Confirmation ---------- */
.confirm-box { max-width: 640px; margin: 0 auto; text-align: center; }
.confirm-icon {
  width: 68px; height: 68px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 28px;
}
/* Een mislukte betaling hoort er niet uit te zien als een geslaagde bestelling. */
.confirm-icon--fout {
  border-color: #9c2f2f;
  color: #9c2f2f;
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); filter: blur(0); }

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

.featured-fallback {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 24px;
  background: var(--white);
  border-radius: 22px;
  box-shadow: 0 0 0 1px rgba(18, 17, 16, 0.06);
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 34px; } }
.split .frame {
  border: 10px solid var(--white);
  border-radius: 26px;
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--bg-alt);
  box-shadow: 0 0 0 1px rgba(18, 17, 16, 0.06), 0 34px 70px -34px rgba(30, 25, 20, 0.2);
}
.split .frame img { width: 100%; height: 100%; object-fit: cover; }

.page-hero { padding-block: clamp(60px, 7vw, 92px) 16px; text-align: center; }
.page-hero h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
.page-hero p { max-width: 560px; margin: 0 auto; }

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: var(--ink);
  color: var(--white);
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 13px;
  z-index: 400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   Uitbreidingen: legal-pagina's, FAQ/accordion, cookiebanner,
   nieuwsbrief, betaal-iconen, socials, reviews, productverdieping
   ============================================================ */

/* Legal / content-pagina's */
.legal { max-width: 760px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) 24px; overflow-wrap: break-word; }
.legal p, .legal li, .legal .legal-note { overflow-wrap: break-word; }
.legal .eyebrow { margin-bottom: 18px; }
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 10px; }
.legal .legal-updated { color: var(--ink-soft); font-size: 13px; margin-bottom: 40px; }
.legal h2 { font-size: 1.25rem; margin: 38px 0 12px; }
.legal h3 { font-size: 1rem; margin: 24px 0 8px; }
.legal p, .legal li { color: var(--ink-soft); font-size: 15px; line-height: 1.75; }
.legal ul, .legal ol { padding-left: 20px; margin: 0 0 1em; }
.legal li { margin-bottom: 6px; }
.legal a { text-decoration: underline; text-underline-offset: 2px; }
.legal .legal-note {
  background: var(--bg-alt); border: 1px solid var(--line);
  padding: 18px 20px; margin: 24px 0; font-size: 14px;
}

/* Accordion (FAQ, ingrediënten, gebruik) */
.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  list-style: none; cursor: pointer;
  padding: 20px 0; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; font-weight: 600; font-size: 15px; color: var(--ink);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: ''; width: 11px; height: 11px; flex-shrink: 0;
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg); transition: transform 0.3s var(--ease);
}
.accordion details[open] summary::after { transform: rotate(-135deg); }
.accordion .accordion-body { padding: 0 0 22px; }
.accordion .accordion-body p, .accordion .accordion-body li { color: var(--ink-soft); font-size: 14.5px; line-height: 1.7; margin: 0 0 10px; }

/* Product: expandable secties onder de koopknop */
.product-accordion { margin-top: 30px; }
/* De INCI-lijst staat in de database als platte tekst met regeleinden voor de voetnoten. */
.product-accordion .inci-list { white-space: pre-line; }

/* Cookiebanner */
.cookie-bar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1200;
  max-width: 720px; margin: 0 auto;
  background: var(--ink); color: var(--bg);
  padding: 18px 20px; border-radius: 12px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px;
  box-shadow: 0 20px 50px rgba(18, 17, 16, 0.28);
  transform: translateY(140%); transition: transform 0.5s var(--ease);
}
.cookie-bar.show { transform: translateY(0); }
.cookie-bar p { margin: 0; color: var(--bg); font-size: 13px; line-height: 1.6; flex: 1 1 320px; }
.cookie-bar p a { color: var(--bg); text-decoration: underline; }
.cookie-bar .cookie-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.cookie-bar button {
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  padding: 10px 18px; border-radius: 8px; cursor: pointer; border: 1px solid var(--bg);
}
.cookie-bar .cookie-accept { background: var(--bg); color: var(--ink); }
.cookie-bar .cookie-decline { background: transparent; color: var(--bg); }

/* Nieuwsbrief */
.newsletter { border-top: 1px solid var(--line); }
.newsletter-inner { max-width: 560px; margin: 0 auto; text-align: center; padding: clamp(48px,6vw,84px) 24px; }
.newsletter-inner h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: 12px; }
.newsletter-inner p { max-width: 420px; margin: 0 auto 26px; font-size: 15px; }
.newsletter-form { display: flex; gap: 10px; max-width: 420px; margin: 0 auto; }
.newsletter-form input {
  flex: 1; padding: 14px 16px; font-size: 16px; font-family: var(--font-body);
  border: 1px solid var(--line-strong); background: var(--white); color: var(--ink); border-radius: 0;
}
.newsletter-form button { white-space: nowrap; border-radius: 0; }
.newsletter-msg { font-size: 13px; margin-top: 14px; min-height: 18px; color: var(--ink-soft); }
@media (max-width: 480px) { .newsletter-form { flex-direction: column; } }

/* Footer socials + betaal-iconen + legal-links */
.footer-social { display: flex; gap: 14px; margin-top: 18px; }
.footer-social a { display: inline-flex; }
.footer-social svg { width: 20px; height: 20px; }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-legal-links a { font-size: 13px; color: var(--ink-soft); }
.footer-legal-links a:hover { color: var(--ink); }
.footer-company { font-size: 12px; color: var(--ink-soft); line-height: 1.7; margin-top: 14px; }
.footer-pay { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.footer-pay svg { height: 22px; width: auto; border-radius: 3px; }

/* Reviews */
.stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.stars svg { width: 15px; height: 15px; }
.star-full { fill: var(--ink); }
.star-empty { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.review-summary { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; font-size: 13px; color: var(--ink-soft); }
.reviews-section { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 30px; }
.review-item { padding: 20px 0; border-bottom: 1px solid var(--line); }
.review-item .review-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.review-item .review-name { font-weight: 600; font-size: 14px; }
.review-item .review-date { font-size: 12px; color: var(--ink-soft); }
.review-item p { font-size: 14.5px; line-height: 1.7; margin: 6px 0 0; }
.review-meer { margin-top: 16px; }
.review-form { margin-top: 26px; display: grid; gap: 12px; max-width: 520px; }
.review-form input, .review-form textarea, .review-form select {
  padding: 12px 14px; font-size: 16px; font-family: var(--font-body);
  border: 1px solid var(--line-strong); background: var(--white); color: var(--ink); border-radius: 0; width: 100%;
}
.review-form textarea { min-height: 96px; resize: vertical; }
/* Sterren kiezen. De vulling zit bewust NIET in :hover: een telefoon heeft dat niet, en
   daar bleef bij een tik op de vijfde ster alleen die ene ster over. product.html zet de
   klasse `vol` op elke ster tot en met de gekozene. Zie DECISIONS.md 13-08-2026. */
.star-input { display: inline-flex; gap: 2px; }
.star-input input { position: absolute; opacity: 0; width: 0; height: 0; }
/* 44x44: onder die maat mist een duim de ster die hij bedoelt. */
.star-input label {
  cursor: pointer; color: var(--line-strong); padding: 8px; line-height: 0;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.star-input label svg { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 1.4; }
.star-input label.vol svg { fill: var(--ink); }
.star-input input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: -2px; }
.star-input-uitleg { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 2px; }

/* Zoeken */
.search-overlay {
  position: fixed; inset: 0; z-index: 1300; background: rgba(18,17,16,0.5);
  padding: 11vh 16px 16px;
  opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease);
}
.search-overlay.open { opacity: 1; pointer-events: auto; }
.search-panel { background: var(--bg); padding: 24px; max-width: 640px; margin: 0 auto; }
.search-panel input {
  width: 100%; padding: 16px 18px; font-size: 18px; font-family: var(--font-head);
  border: none; border-bottom: 1px solid var(--line-strong); background: transparent; color: var(--ink);
}
.search-panel input:focus { outline: none; }
.search-results { margin-top: 18px; display: grid; gap: 10px; max-height: 60vh; overflow-y: auto; }
.search-result { display: flex; gap: 14px; align-items: center; padding: 8px; }
.search-result img { width: 54px; height: 54px; object-fit: cover; background: var(--bg-alt); }
.search-result .sr-name { font-size: 14px; font-weight: 600; }
.search-result .sr-price { font-size: 13px; color: var(--ink-soft); }
.search-empty { color: var(--ink-soft); font-size: 14px; padding: 10px 8px; }

/* Betaalmethode-chips */
.pay-chip {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--ink-soft); background: var(--white);
  border: 1px solid var(--line); border-radius: 5px;
  padding: 5px 9px; min-width: 44px;
}
/* Zoekknop in header */
.header-actions .icon-btn.search-btn svg { width: 20px; height: 20px; }

/* Verzendmethode-keuze op de checkout */
.shipping-methods { border: none; padding: 0; margin: 0 0 22px; }
.shipping-methods legend { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); padding: 0; margin-bottom: 10px; }
.ship-option {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); cursor: pointer;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.ship-option:hover { border-color: var(--ink); }
.ship-option:has(input:checked) { border-color: var(--ink); background: var(--bg-alt); }
.ship-option input { width: 18px; height: 18px; accent-color: var(--ink); flex-shrink: 0; margin: 0; }
.ship-option-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ship-option-title { font-size: 14px; color: var(--ink); }
.ship-option-meta { font-size: 12px; color: var(--ink-soft); }
.ship-option-price { font-size: 14px; color: var(--ink); white-space: nowrap; }

/* Certificerings/claims-rij (about-pagina) */
.claims-row { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.claims-row li {
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); background: var(--bg-alt);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px;
}

/* Swipebare productgalerij (productpagina) */
.pdp-gallery { position: relative; }
.pdp-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border: 10px solid var(--white);
  border-radius: 26px;
  background: var(--bg-alt);
  box-shadow: 0 0 0 1px rgba(18, 17, 16, 0.06), 0 34px 70px -34px rgba(30, 25, 20, 0.2);
}
.pdp-track::-webkit-scrollbar { display: none; }
.pdp-slide { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 4/5; }
.pdp-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.9); color: var(--ink);
  border: 1px solid var(--line); cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(30, 25, 20, 0.35);
  transition: background 0.2s var(--ease), opacity 0.2s var(--ease);
}
.pdp-arrow svg { width: 20px; height: 20px; }
.pdp-arrow:hover { background: #fff; }
.pdp-arrow:disabled { opacity: 0.35; cursor: default; }
.pdp-prev { left: 16px; }
.pdp-next { right: 16px; }
.pdp-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.pdp-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--line); border: none; padding: 0; cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.pdp-dot.active { background: var(--ink); transform: scale(1.25); }
/* Op touch-schermen zijn de pijlen overbodig: swipen volstaat */
@media (hover: none) {
  .pdp-arrow { display: none; }
}

/* Productfoto's volledig binnen het kader tonen (niet bijsnijden) */
.product-card .frame { background: #fff; }
.product-card .frame img { object-fit: contain; padding: 7%; }
.product-detail .frame img { object-fit: contain; padding: 7%; }
.pdp-track { background: #fff; }
.pdp-slide { padding: 6%; }
.pdp-slide img { object-fit: contain; }

/* Terug-knop op de productpagina */
.pdp-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 22px;
  font-size: 13px; letter-spacing: 0.04em;
  color: var(--ink-soft);
  transition: color 0.2s var(--ease), gap 0.2s var(--ease);
}
.pdp-back svg { width: 16px; height: 16px; }
.pdp-back:hover { color: var(--ink); gap: 10px; }

/* --- 404-pagina (stond eerder inline in 404.html) --- */
.nf { text-align: center; padding-block: clamp(70px, 12vw, 150px); }
.nf-code {
  display: block;
  font-size: clamp(3.4rem, 11vw, 7rem);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 18px;
}
.nf p { max-width: 460px; margin: 0 auto 12px; }
.nf-actions {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: 32px;
}

/* --- productpagina (stond eerder inline in product.html) --- */
/* Claims als labels, zoals op over-ons. Links uitgelijnd, want deze kolom is dat ook.
   De streep erboven houdt de scheiding die de oude opsomming had. */
.product-claims {
  justify-content: flex-start;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

/* --- Aankondigingsbalk boven de header, op elke pagina ---
   Stond eerder alleen op de homepage. De klant wil deze plek voor een actie of een nieuwe
   collectie op de hele site, dus rendert layout.js hem nu boven de gedeelde header.
   Bewust NIET sticky: de balk scrollt weg, de header eronder blijft staan. Zo is de actie
   het eerste wat iemand ziet, zonder dat hij de rest van het bezoek ruimte opeet. */
.pv-announce {
  /* var(--ink) en niet var(--cg-ink): die laatste staat in home.css, en home.css wordt
     alleen op de homepage geladen. Op shop, product, checkout, faq en contact bestond de
     variabele dus niet, viel de achtergrond terug op doorzichtig en stond er witte tekst
     op de crème body -- contrast 1,05:1, oftewel onzichtbaar. Gemeten 28-08-2026.
     home.css zet zelf `--cg-ink: var(--ink)`, dus de kleur blijft exact hetzelfde. */
  background: var(--ink);
  color: var(--white);
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 9px 16px;
}
.pv-announce a { display: inline-flex; align-items: center; gap: 8px; color: var(--white); }
.pv-announce svg { flex-shrink: 0; }

/* Melding boven het besteloverzicht als de winkelwagen is bijgewerkt: een prijs die is
   veranderd of een product dat niet meer te koop is. Opvallend genoeg om te lezen voordat
   iemand op bestellen klikt, want hij verandert het bedrag dat eronder staat. */
.cart-melding { display: none; }
.cart-melding.show {
  display: block;
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--bg-alt);
  border-left: 2px solid var(--ink);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
}