:root {
  --blue: #1c3e94;
  --blue-dark: #142c6b;
  --gold: #b08d3f;
  --gold-dark: #8f7026;
  --gold-light: #d8c08a;
  --cream: #faf6ec;
  --beige: #efe6d3;
  --ink: #2b3147;
  --muted: #5d6173;
  --white: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: "Nunito Sans", sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
}

h1, h2, h3 {
  font-family: "Nunito", sans-serif;
  color: var(--blue);
  line-height: 1.15;
}

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

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }

/* Scroll-reveal: alleen met JS, anders gewoon zichtbaar */
html.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

html.js .reveal.visible { opacity: 1; transform: none; }

html.js .reveal-delay { transition-delay: 0.15s; }

/* Sectie-koppen en ornamenten */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold-dark);
  margin-bottom: 10px;
}

.eyebrow-light { color: var(--gold-light); }

.ornament {
  width: 56px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
  margin: 18px 0 22px;
}

.intro .ornament, .section-head .ornament { margin-left: auto; margin-right: auto; }

/* Golf-overgangen tussen secties */
.wave { display: block; width: 100%; height: 72px; margin-bottom: -1px; }
.wave-into-blue { background: var(--white); }
.wave-into-blue path { fill: var(--blue-dark); }
.wave-outof-blue { background: var(--blue-dark); }
.wave-outof-blue path { fill: var(--white); }
.wave-cream { background: var(--white); }
.wave-cream path { fill: var(--cream); }
.wave-blue { background: var(--cream); }
.wave-blue path { fill: var(--blue-dark); }

/* Preview-balk */
.preview-bar {
  background: var(--blue-dark);
  color: #d6ddef;
  text-align: center;
  font-size: 0.85rem;
  padding: 8px 16px;
}

/* Header */
.site-header {
  background: var(--white);
  border-bottom: 1px solid #e8e0cd;
  position: sticky;
  top: 0;
  z-index: 10;
  transition: box-shadow 0.3s;
}

.site-header.scrolled { box-shadow: 0 4px 18px rgba(20, 44, 107, 0.10); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
}

.brand { display: flex; align-items: center; }

/* Menu en winkelwagen samen rechts, het logo links */
.nav { margin-left: auto; }

.brand-logo { height: 104px; width: auto; }

.nav a {
  margin-left: 22px;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.95rem;
  border-bottom: 2px solid transparent;
  padding-bottom: 3px;
  transition: color 0.2s, border-color 0.2s;
}

.nav a:hover { color: var(--gold-dark); border-color: var(--gold); }
.nav a.actief { color: var(--blue); border-color: var(--gold); }

/* Hero: paginabrede foto met donkerblauwe overlay */
.hero {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-bg, .hero-overlay {
  position: absolute;
  inset: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 40%;
  animation: heroZoom 12s ease-out both;
}

@keyframes heroZoom {
  from { transform: scale(1.07); }
  to { transform: scale(1); }
}

.hero-overlay {
  background: linear-gradient(100deg,
    rgba(20, 44, 107, 0.90) 0%,
    rgba(20, 44, 107, 0.62) 45%,
    rgba(20, 44, 107, 0.10) 100%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 84px;
  padding-bottom: 110px;
}

.hero-text { max-width: 560px; }

.hero-text > * { animation: fadeUp 0.7s ease-out both; }
.hero-text > :nth-child(1) { animation-delay: 0.05s; }
.hero-text > :nth-child(2) { animation-delay: 0.15s; }
.hero-text > :nth-child(3) { animation-delay: 0.25s; }
.hero-text > :nth-child(4) { animation-delay: 0.35s; }
.hero-text > :nth-child(5) { animation-delay: 0.45s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
}

.hero-kicker {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold-light);
  margin-bottom: 14px;
}

.hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.3rem);
  font-weight: 800;
  color: var(--white);
  margin-bottom: 18px;
  text-shadow: 0 2px 14px rgba(20, 44, 107, 0.35);
}

.hero-text > p { color: #e8edf9; font-size: 1.05rem; }

.hero-buttons { display: flex; gap: 14px; margin: 30px 0 16px; }

.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(10, 20, 50, 0.30); }

.btn-gold { background: var(--gold); color: var(--white); }
.btn-gold:hover { background: var(--gold-dark); }

.btn-outline { border: 2px solid rgba(255, 255, 255, 0.85); color: var(--white); padding: 12px 28px; }
.btn-outline:hover { background: var(--white); color: var(--blue-dark); }

.hero-note { font-size: 0.85rem; color: #c4cfe8; }

.hero-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 72px;
  z-index: 1;
}

.hero-wave path { fill: var(--white); }

/* USP-balk */
.usp { background: var(--white); }

.usp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding-top: 52px;
  padding-bottom: 56px;
}

.usp-item { text-align: center; }

.usp-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--beige);
  margin: 0 auto 14px;
}

.usp-icon svg { width: 28px; height: 28px; color: var(--gold); }

.usp-item h3 { font-size: 1.02rem; margin-bottom: 4px; }

.usp-item p { font-size: 0.86rem; color: var(--muted); }

/* Intro: donkerblauwe band */
.intro {
  background: var(--blue-dark);
  padding: 56px 0 72px;
  text-align: center;
}

.intro h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); color: var(--white); }

.intro p { margin-bottom: 14px; color: #c9d4ee; }

/* Categorie-kaarten: foto met tekst eroverheen */
.categories { padding: 72px 0 96px; }

.section-head { text-align: center; margin-bottom: 44px; }

.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); }

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 460px;
  box-shadow: 0 10px 30px rgba(28, 62, 148, 0.14);
  display: block;
}

.card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease-out;
}

.card:hover > img { transform: scale(1.06); }

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(20, 44, 107, 0.92) 0%,
    rgba(20, 44, 107, 0.45) 38%,
    rgba(20, 44, 107, 0.05) 65%);
}

.card-chip {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  background: var(--gold);
  color: var(--white);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 16px;
  border-radius: 999px;
}

.card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 26px 28px 28px;
}

.card-content h3 { color: var(--white); font-size: 1.55rem; margin-bottom: 8px; }

.card-content p { color: #dfe6f5; font-size: 0.95rem; margin-bottom: 14px; max-width: 420px; }

.card-link {
  display: inline-block;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--gold-light);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
}

/* Over ons */
.story {
  background: var(--cream);
  padding: 56px 0 96px;
  position: relative;
  overflow: hidden;
}

.story-paw {
  position: absolute;
  right: -60px;
  bottom: -40px;
  width: 380px;
  height: 380px;
  fill: var(--gold);
  opacity: 0.07;
  pointer-events: none;
}

.story-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.story-image { position: relative; }

.story-image img {
  border-radius: 999px 999px 20px 20px;
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
  box-shadow: 0 14px 38px rgba(20, 44, 107, 0.16);
}

.story-image::before {
  content: "";
  position: absolute;
  inset: -14px 14px 14px -14px;
  border: 2px solid var(--gold);
  border-radius: 999px 999px 20px 20px;
  opacity: 0.5;
  pointer-events: none;
}

.story-badge {
  position: absolute;
  right: -10px;
  top: 30px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--white);
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 8px 22px rgba(143, 112, 38, 0.35);
  animation: floatBadge 5s ease-in-out infinite alternate;
}

@keyframes floatBadge {
  from { transform: translateY(0); }
  to { transform: translateY(-10px); }
}

.story h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 16px; }

.story h3 { font-size: 1.25rem; margin: 24px 0 10px; color: var(--gold-dark); }

.story p { color: var(--muted); margin-bottom: 12px; }

/* Footer */
.site-footer { background: var(--blue-dark); color: #d6ddef; }

.footer-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-top: 48px;
  padding-bottom: 40px;
}

.footer-inner p { font-size: 0.92rem; margin-bottom: 6px; }

.footer-inner strong { color: var(--white); }

.footer-brand {
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--white) !important;
}

.footer-brand span { font-style: italic; font-weight: 400; color: var(--gold-light); }

.footer-note {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 18px;
  padding-bottom: 18px;
}

.footer-note p { font-size: 0.8rem; color: #95a1c4; }

/* Minder beweging op verzoek van het systeem */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .hero-bg img, .hero-text > *, .story-badge { animation: none; }
  .btn:hover { transform: none; }
  .card:hover > img { transform: none; }
}

/* Mobiel */
@media (max-width: 820px) {

  .brand-logo { height: 76px; }

  .hero { min-height: 520px; }

  .hero-inner { padding-top: 56px; padding-bottom: 90px; }

  .hero-overlay {
    background: linear-gradient(170deg,
      rgba(20, 44, 107, 0.88) 0%,
      rgba(20, 44, 107, 0.55) 60%,
      rgba(20, 44, 107, 0.25) 100%);
  }

  .usp-grid { grid-template-columns: 1fr 1fr; gap: 24px; }

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

  .card { height: 400px; }

  .story-inner { grid-template-columns: 1fr; gap: 40px; }

  .story-image { max-width: 380px; margin: 0 auto; }

  .story-badge { right: 0; }

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

  .wave, .hero-wave { height: 44px; }
}

/* ====== Subpagina's ====== */

/* Compacte pagina-hero */
.page-hero {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.page-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 44, 107, 0.88) 0%, rgba(20, 44, 107, 0.45) 50%, rgba(20, 44, 107, 0.20) 100%);
}

.page-hero .container { position: relative; z-index: 1; padding-bottom: 40px; }

.page-hero .eyebrow { color: var(--gold-light); }

.page-hero h1 {
  color: var(--white);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  text-shadow: 0 2px 14px rgba(20, 44, 107, 0.35);
}

.breadcrumb { padding: 16px 0; font-size: 0.86rem; color: var(--muted); }
.breadcrumb a { color: var(--gold-dark); font-weight: 600; }
.breadcrumb span { margin: 0 6px; opacity: 0.5; }

/* Tekstsectie Over ons */
.prose { padding: 64px 0 24px; }
.prose p { margin-bottom: 16px; color: var(--ink); }
.prose .lead { font-size: 1.15rem; color: var(--muted); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 48px 0;
}

.split.reverse .split-media { order: 2; }

.split-media img {
  border-radius: 18px;
  box-shadow: 0 14px 38px rgba(20, 44, 107, 0.16);
  width: 100%;
}

.split-text h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 14px; }
.split-text p { color: var(--muted); margin-bottom: 14px; }

.team-photo {
  max-width: 860px;
  margin: 16px auto 0;
  padding: 0 24px;
}
.team-photo figure { margin: 0; }
.team-photo img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 14px 38px rgba(20, 44, 107, 0.16);
}
.team-photo figcaption {
  text-align: center;
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--muted);
}

.values {
  background: var(--cream);
  padding: 56px 0;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.value-card {
  background: var(--white);
  border-radius: 16px;
  padding: 26px 24px;
  box-shadow: 0 6px 22px rgba(28, 62, 148, 0.08);
  border-top: 3px solid var(--gold);
}

.value-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.value-card p { font-size: 0.92rem; color: var(--muted); }

/* ====== Assortiment / productlijst ====== */
.assortiment { padding: 56px 0 88px; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid #ede6d6;
  border-radius: 16px;
  padding: 28px 26px 26px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.product-card.linked:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(28, 62, 148, 0.14);
  border-color: var(--gold);
}

.product-cat {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-dark);
  margin-bottom: 8px;
}

.product-card h3 { font-size: 1.3rem; margin-bottom: 10px; }
.product-card p { font-size: 0.94rem; color: var(--muted); flex-grow: 1; }

.product-foot {
  margin-top: 18px;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--gold-dark);
}

.product-card.soon .product-foot { color: var(--muted); font-weight: 600; }

.product-badge-basis {
  position: absolute;
  top: 20px;
  right: 22px;
  background: var(--blue);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: 999px;
}

/* ====== Productpagina ====== */
.product-hero { padding: 48px 0 56px; }

.product-hero-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: center;
}

/* Diana levert complete visuals met eigen achtergrond, dus geen kader eromheen */
.product-visual {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(20, 44, 107, 0.14);
  align-self: start;
}

.product-visual img { width: 100%; height: auto; display: block; }

.product-placeholder {
  flex-direction: column;
  text-align: center;
  min-height: 380px;
  position: relative;
}

.product-placeholder .placeholder-logo {
  height: 90px;
  opacity: 0.35;
  margin-bottom: 28px;
}

.product-placeholder .placeholder-name {
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--blue);
  line-height: 1.1;
}

.product-placeholder .placeholder-note {
  position: absolute;
  bottom: 18px;
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kwaliteit { background: var(--white); padding: 48px 0 24px; }
.kwaliteit h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-bottom: 18px; }
.kwaliteit .tags { margin-bottom: 0; }

/* ====== Productpagina v2: koop-blok ====== */

.buy-box {
  border: 1px solid #e8ddc5;
  border-radius: 16px;
  padding: 24px 26px;
  background: var(--white);
  box-shadow: 0 4px 18px rgba(28, 62, 148, 0.06);
}

/* Banner-hero. Diana levert banners in wisselende verhoudingen, dus geeft elke
   pagina zijn eigen ratio mee via --banner-ratio. Zo wordt er niets gecropt. */
.page-hero-banner {
  min-height: 0;
  width: 100%;
  aspect-ratio: var(--banner-ratio, 2000 / 600);
  max-height: var(--banner-max, 620px);
  overflow: hidden;
}

.page-hero-banner img { object-position: center center; }

@media (max-width: 820px) {
  /* Op de telefoon hangt de hoogte aan de verhouding van de mobiele foto zelf.
     Zo wordt er niets van links of rechts weggesneden, wat eerder een halve
     Fabienne opleverde op de pagina Over ons. */
  .page-hero.page-hero-banner {
    aspect-ratio: var(--banner-ratio-mobiel, 4 / 5);
    min-height: 0;
    max-height: none;
  }
}

/* Ondertitel onder de productnaam */
.product-sub {
  font-size: 0.88rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 18px !important;
}

/* Productafbeelding op de overzichtskaart */
/* De productvisual is portret en heeft de naam erin, dus volledig tonen */
.product-thumb {
  margin: -28px -26px 20px;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  background: var(--cream);
}

.product-thumb img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.6s ease-out;
}

.product-card.linked:hover .product-thumb img { transform: scale(1.05); }

.product-prijs {
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  color: var(--blue);
  font-size: 1.05rem;
  margin-top: 12px;
  flex-grow: 0 !important;
}

/* Enkele verpakking, geen keuze nodig */
.single-pack {
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 18px;
}

/* Lijst met kop-plus-uitleg (actieve ingrediënten) */
.plain-list { list-style: none; }
.plain-list li {
  padding: 9px 0;
  border-bottom: 1px solid #ece4d3;
  color: var(--muted);
  font-size: 0.94rem;
}
.plain-list li:last-child { border-bottom: 0; }
.plain-list strong { color: var(--ink); display: block; font-family: "Nunito", sans-serif; }

.buy-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 10px;
}

.variants { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }

.variant input { position: absolute; opacity: 0; pointer-events: none; }

.variant label {
  display: block;
  border: 2px solid #e3d9c2;
  border-radius: 12px;
  padding: 11px 18px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
  line-height: 1.3;
}

.variant label .v-size { display: block; font-weight: 700; color: var(--ink); font-size: 0.95rem; }
.variant label .v-price { display: block; font-size: 0.85rem; color: var(--muted); }

.variant input:checked + label {
  border-color: var(--gold);
  background: var(--cream);
}

.variant input:focus-visible + label { outline: 3px solid var(--blue); outline-offset: 2px; }

.price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}

.price {
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: 2rem;
  color: var(--blue);
}

.price-note { font-size: 0.85rem; color: var(--muted); }

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

.qty {
  display: flex;
  align-items: center;
  border: 2px solid #e3d9c2;
  border-radius: 999px;
  overflow: hidden;
}

.qty button {
  border: 0;
  background: transparent;
  width: 40px;
  height: 46px;
  font-size: 1.2rem;
  color: var(--blue);
  cursor: pointer;
  font-family: inherit;
}

.qty button:hover { background: var(--cream); }
.qty input {
  width: 42px;
  border: 0;
  text-align: center;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
}

.btn-cart {
  flex-grow: 1;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  background: var(--blue);
  color: var(--white);
  padding: 15px 32px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  transition: background 0.2s, transform 0.2s;
}

.btn-cart:hover { background: var(--blue-dark); transform: translateY(-2px); }

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #efe7d6;
}

.trust-row span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.86rem;
  color: var(--muted);
}

.trust-row svg { width: 16px; height: 16px; color: var(--gold); flex-shrink: 0; }

/* Korte kernpunten direct onder de intro */
.key-points { list-style: none; margin: 0 0 22px; }

.key-points li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.96rem;
  color: var(--ink);
  padding: 5px 0;
}

.key-points svg { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; margin-top: 4px; }

/* ====== Uitklapbare secties ====== */

.details-wrap { max-width: 820px; margin: 0 auto; }

.acc {
  border-bottom: 1px solid #e9e0cd;
}

.acc:first-of-type { border-top: 1px solid #e9e0cd; }

.acc summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  position: relative;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--blue);
}

.acc summary::-webkit-details-marker { display: none; }

.acc summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-right: 2.5px solid var(--gold);
  border-bottom: 2.5px solid var(--gold);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s;
}

.acc[open] summary::after { transform: translateY(-30%) rotate(-135deg); }

.acc summary:hover { color: var(--gold-dark); }

.acc-body { padding: 0 0 26px; }
.acc-body p { color: var(--muted); margin-bottom: 14px; }
.acc-body p:last-child { margin-bottom: 0; }
.acc-body .dose-table { margin-bottom: 14px; }
.acc-body .compo { padding: 26px 28px; }

.acc-sub {
  font-size: 0.95rem;
  color: var(--gold-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  margin: 22px 0 8px;
  font-family: "Nunito", sans-serif;
}

.acc-sub:first-child { margin-top: 0; }

/* ====== FAQ ====== */

.faq { background: var(--cream); padding: 64px 0; }
.faq h2 { text-align: center; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.faq .ornament { margin: 14px auto 34px; }

.faq .acc { border-color: #e0d5bd; background: var(--white); border-radius: 12px; margin-bottom: 12px; border-bottom: 0; }
.faq .acc:first-of-type { border-top: 0; }
.faq .acc summary { padding: 18px 46px 18px 22px; font-size: 1rem; }
.faq .acc summary::after { right: 20px; }
.faq .acc-body { padding: 0 22px 20px; }

/* Sticky bestelbalk op mobiel */
.sticky-buy {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--white);
  border-top: 1px solid #e8ddc5;
  padding: 10px 16px;
  box-shadow: 0 -4px 18px rgba(20, 44, 107, 0.10);
  align-items: center;
  gap: 12px;
}

.sticky-buy .sb-price { font-family: "Nunito", sans-serif; font-weight: 800; color: var(--blue); font-size: 1.15rem; }
.sticky-buy .btn-cart { padding: 12px 22px; font-size: 0.92rem; }

@media (max-width: 820px) {
  .buy-box { padding: 20px; }
  .price { font-size: 1.7rem; }
  .buy-actions { flex-direction: column; align-items: stretch; }
  .qty { align-self: flex-start; }
  .sticky-buy { display: flex; }
  body.has-sticky { padding-bottom: 76px; }
}

.product-intro h1 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: 16px; }
.product-intro > p { color: var(--muted); margin-bottom: 22px; }

.tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }

.tag {
  background: var(--white);
  border: 1.5px solid var(--gold);
  color: var(--gold-dark);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 7px 16px;
  border-radius: 999px;
}

.product-order {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 22px;
  background: var(--cream);
  border-radius: 14px;
}

.product-order .packs { font-size: 0.9rem; color: var(--muted); }
.product-order .packs strong { color: var(--ink); }
.soon-pill {
  background: var(--blue);
  color: var(--white);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 8px 18px;
  border-radius: 999px;
}

/* Voordeelblokjes */
.benefits { background: var(--blue-dark); padding: 64px 0; }
.benefits h2 { color: var(--white); text-align: center; margin-bottom: 8px; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.benefits .ornament { margin: 14px auto 40px; }

.benefit-grid {
  display: grid;
  /* Het aantal kolommen komt per product mee als variabele. Niet als losse
     inline regel: die wint namelijk van elke media query, waardoor de vier
     blokken op een telefoon naast elkaar bleven staan en buiten beeld vielen. */
  grid-template-columns: repeat(var(--kolommen, 5), 1fr);
  gap: 18px;
}

.benefit {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 22px 18px;
}

.benefit h3 { color: var(--gold-light); font-size: 1rem; margin-bottom: 8px; }
.benefit p { color: #c9d4ee; font-size: 0.86rem; }

/* Dosering + samenstelling */
.spec { padding: 64px 0; }
.spec h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-bottom: 18px; }

.dose-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
}

.dose-table th, .dose-table td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid #ece4d3;
  font-size: 0.94rem;
}

.dose-table th { background: var(--cream); color: var(--blue); font-family: "Nunito", sans-serif; }
.dose-table td:last-child { font-weight: 700; color: var(--ink); }

.dose-note { font-size: 0.9rem; color: var(--muted); }

.compo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 40px;
  background: var(--cream);
  border-radius: 16px;
  padding: 32px 36px;
}

.compo-block h3 {
  font-size: 0.95rem;
  color: var(--gold-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e3d9c2;
}

.compo-block ul { list-style: none; }
.compo-block li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.88rem;
  padding: 3px 0;
  color: var(--ink);
}
.compo-block li span { color: var(--muted); white-space: nowrap; }
.compo-block.wide { grid-column: 1 / -1; }

.disclaimer {
  margin-top: 26px;
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
  border-left: 3px solid var(--beige);
  padding-left: 16px;
}

/* Eenvoudige CTA-band */
.cta-band {
  background: var(--cream);
  text-align: center;
  padding: 64px 0;
}
.cta-band h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 12px; }
.cta-band p { color: var(--muted); max-width: 540px; margin: 0 auto 24px; }

@media (max-width: 820px) {
  .split, .split.reverse { grid-template-columns: 1fr; gap: 28px; }
  .split.reverse .split-media { order: 0; }
  .values-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .product-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compo { grid-template-columns: 1fr; padding: 24px; }
  .page-hero { min-height: 380px; }
}

/* Losse intro-alinea onder de hero */
.intro-lead { padding: 46px 0 6px; text-align: center; }
.intro-lead p { font-size: 1.12rem; color: var(--muted); }

/* Inleidende alinea onder een sectiekop */
.section-lead {
  max-width: 660px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 0.98rem;
}

/* ============================================================
   Webshop: winkelwagen, afrekenen, bedankt
   ============================================================ */

/* Winkelwagen-icoon in de header */
.cart-link {
  position: relative;
  margin-left: 24px;
  display: inline-flex;
  align-items: center;
  color: var(--blue);
  border-bottom: 2px solid transparent;
  padding-bottom: 3px;
}

.cart-link svg { width: 24px; height: 24px; }
.cart-link:hover { color: var(--gold-dark); }

.cart-count {
  position: absolute;
  top: -6px;
  right: -9px;
  min-width: 19px;
  height: 19px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 800;
  font-family: "Nunito", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* Paginakader voor de shop-stappen */
.shop-page { padding: 40px 0 88px; }
.shop-page h1 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: 28px; }

.cart-empty {
  text-align: center;
  padding: 56px 24px;
  background: var(--cream);
  border-radius: 18px;
}

.cart-empty p { color: var(--muted); margin-bottom: 24px; font-size: 1.05rem; }

.cart-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 36px;
  align-items: start;
}

/* Regels in de winkelwagen */
.cart-list { list-style: none; }

.cart-row {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid #ece4d3;
  align-items: center;
}

.cart-row:first-child { border-top: 1px solid #ece4d3; }

.cart-thumb {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cream);
}

.cart-thumb img { width: 100%; height: auto; display: block; }

.cart-info h3 { font-size: 1.05rem; margin-bottom: 4px; }
.cart-info a:hover h3 { color: var(--gold-dark); }
.cart-variant { font-size: 0.9rem; color: var(--ink); font-weight: 600; }
.cart-unit { font-size: 0.85rem; color: var(--muted); }

.cart-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.cart-actions .qty { height: 40px; }
.cart-actions .qty button { height: 38px; width: 34px; font-size: 1.05rem; }
.cart-actions .qty input { width: 36px; }

.cart-line {
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  color: var(--blue);
  font-size: 1.05rem;
}

.cart-del {
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.cart-del:hover { color: #a33; }

/* Samenvatting rechts */
.cart-summary {
  background: var(--cream);
  border: 1px solid #e8ddc5;
  border-radius: 16px;
  padding: 26px 24px;
  position: sticky;
  top: 130px;
}

.cart-summary h2 { font-size: 1.2rem; margin-bottom: 18px; }

.sum-rows { margin-bottom: 14px; }
.sum-rows > div {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  font-size: 0.94rem;
}
.sum-rows dt { color: var(--muted); }
.sum-rows dd { font-weight: 600; color: var(--ink); }
.sum-rows .gratis { color: var(--gold-dark); font-weight: 700; }

.sum-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0;
  margin-bottom: 18px;
  border-top: 2px solid #e3d9c2;
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  color: var(--blue);
}

.sum-total span:last-child { font-size: 1.45rem; }

.cart-summary .btn-cart {
  display: block;
  width: 100%;
  text-align: center;
  flex-grow: 0;
}

.sum-note {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 14px;
  line-height: 1.5;
}

/* Formulier op de afrekenpagina */
.checkout-fields fieldset {
  border: 1px solid #e8ddc5;
  border-radius: 16px;
  padding: 22px 24px 24px;
  margin-bottom: 22px;
}

.checkout-fields legend {
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  color: var(--blue);
  font-size: 1.05rem;
  padding: 0 10px;
}

.veld { margin-bottom: 16px; }
.veld:last-child { margin-bottom: 0; }

.veld label {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}

.veld label span { color: var(--gold-dark); }

.veld input, .veld select, .veld textarea {
  width: 100%;
  border: 1.5px solid #e3d9c2;
  border-radius: 10px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--white);
}

.veld input:focus, .veld select:focus, .veld textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(176, 141, 63, 0.16);
}

.veld small { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 5px; }
.veld textarea { resize: vertical; }

.veld-rij { display: flex; gap: 16px; }
.veld-rij .veld { flex: 1; }
.veld-rij .veld-breed { flex: 2.4; }
.veld-rij .veld-smal { flex: 1; }

/* Miniatuurlijst in de samenvatting */
.mini-list { list-style: none; margin-bottom: 20px; }

.mini-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #e8dfc9;
  font-size: 0.88rem;
  align-items: start;
}

.mini-aantal { color: var(--muted); font-weight: 700; }
.mini-naam { color: var(--ink); line-height: 1.35; }
.mini-naam em { display: block; font-style: normal; color: var(--muted); font-size: 0.82rem; }
.mini-prijs { font-weight: 700; color: var(--ink); white-space: nowrap; }

/* Kortingscode */
.korting { margin-bottom: 18px; }
.korting label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 6px; }
.korting-rij { display: flex; gap: 8px; }

.korting-rij input {
  flex: 1;
  min-width: 0;
  border: 1.5px solid #e3d9c2;
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.92rem;
  background: var(--white);
}

.korting-rij button {
  border: 1.5px solid var(--gold);
  background: var(--white);
  color: var(--gold-dark);
  border-radius: 10px;
  padding: 10px 16px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  white-space: nowrap;
}

.korting-rij button:hover { background: var(--gold); color: var(--white); }

.korting-melding { font-size: 0.84rem; margin-top: 7px; color: var(--muted); }
.korting-melding.ok { color: #2f7d43; font-weight: 700; }
.korting-melding.fout { color: #a33; }

/* Akkoord en foutmelding */
.akkoord {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.86rem;
  color: var(--muted);
  margin-bottom: 16px;
  cursor: pointer;
}

.akkoord input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--gold); flex-shrink: 0; }
.akkoord a { color: var(--gold-dark); font-weight: 700; text-decoration: underline; }

.foutmelding {
  background: #fdecec;
  border: 1px solid #f0c2c2;
  color: #a33;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 0.88rem;
  margin-top: 12px;
}

.btn-cart:disabled { opacity: 0.6; cursor: default; transform: none; }
.btn-cart.toegevoegd { background: var(--gold-dark); }

/* Bedankt-pagina */
.check-cirkel {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 26px;
  box-shadow: 0 8px 24px rgba(143, 112, 38, 0.30);
}

.check-cirkel svg { width: 40px; height: 40px; }

.lead-groot { font-size: 1.12rem; color: var(--muted); margin-bottom: 18px; }

.order-nr {
  display: inline-block;
  background: var(--cream);
  border: 1px solid var(--beige);
  border-radius: 999px;
  padding: 9px 22px;
  font-size: 0.92rem;
  color: var(--muted);
  margin-bottom: 28px;
}

.order-nr strong { color: var(--blue); font-family: "Nunito", sans-serif; }

@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
}

@media (max-width: 820px) {
  .cart-link { margin-left: 0; }

  .cart-row { grid-template-columns: 74px 1fr; gap: 14px; }
  .cart-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .veld-rij { flex-direction: column; gap: 0; }
}

/* ============================================================
   Beheer: bestellingen terugkijken
   ============================================================ */

.beheer-login {
  max-width: 420px;
  margin: 40px auto;
  background: var(--cream);
  border: 1px solid #e8ddc5;
  border-radius: 16px;
  padding: 30px;
}

.beheer-login h1 { font-size: 1.6rem; margin-bottom: 10px; }
.beheer-login p { color: var(--muted); font-size: 0.94rem; margin-bottom: 20px; }
.beheer-login .btn-cart { width: 100%; }

.beheer-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 26px;
}

.beheer-kop h1 { margin-bottom: 0; }
.beheer-acties { display: flex; gap: 10px; flex-wrap: wrap; }

.beheer-acties select, .beheer-acties button {
  border: 1.5px solid #e3d9c2;
  background: var(--white);
  border-radius: 999px;
  padding: 9px 18px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.beheer-acties button:hover { border-color: var(--gold); color: var(--gold-dark); }

.beheer-cijfers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 30px;
}

.cijfer {
  background: var(--cream);
  border: 1px solid #e8ddc5;
  border-radius: 14px;
  padding: 20px 22px;
}

.cijfer-getal {
  display: block;
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: 1.7rem;
  color: var(--blue);
  line-height: 1.1;
}

.cijfer-label { font-size: 0.84rem; color: var(--muted); }

.beheer-leeg {
  text-align: center;
  padding: 50px;
  background: var(--cream);
  border-radius: 14px;
  color: var(--muted);
}

.order-kaart {
  border: 1px solid #ece4d3;
  border-radius: 12px;
  margin-bottom: 10px;
  background: var(--white);
}

.order-kaart summary {
  list-style: none;
  cursor: pointer;
  padding: 15px 20px;
  display: grid;
  grid-template-columns: 118px 88px 1fr 150px 90px;
  gap: 14px;
  align-items: center;
  font-size: 0.9rem;
}

.order-kaart summary::-webkit-details-marker { display: none; }
.order-kaart[open] { border-color: var(--gold); }
.order-kaart summary:hover { background: var(--cream); border-radius: 12px; }

.order-nummer { font-family: "Nunito", sans-serif; font-weight: 800; color: var(--blue); }

.order-status {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 999px;
  text-align: center;
}

.status-betaald { background: #e4f4e8; color: #256b38; }
.status-nieuw { background: #fdf3dd; color: #8a6d1a; }
.status-mislukt, .status-verlopen, .status-geannuleerd { background: #fbe9e9; color: #9c3232; }

.order-klant { color: var(--ink); font-weight: 600; }
.order-datum { color: var(--muted); font-size: 0.84rem; }
.order-totaal { text-align: right; font-weight: 800; color: var(--blue); font-family: "Nunito", sans-serif; }

.order-body { padding: 4px 20px 22px; border-top: 1px solid #f0e9d8; }

.order-kolommen {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 34px;
  padding-top: 18px;
}

.order-body h3 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold-dark);
  margin: 0 0 10px;
}

.order-body h3:not(:first-child) { margin-top: 20px; }

.order-regels { list-style: none; }

.order-regels li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  font-size: 0.9rem;
  border-bottom: 1px solid #f4eee0;
}

.order-regels em { font-style: normal; color: var(--muted); }
.order-totalen { margin-top: 12px; }
.order-totalen li { border-bottom: 0; color: var(--muted); }

.order-eind {
  border-top: 2px solid #e3d9c2 !important;
  margin-top: 6px;
  padding-top: 10px !important;
  font-weight: 800;
  color: var(--blue) !important;
  font-family: "Nunito", sans-serif;
}

.order-adres, .order-contact, .order-meta {
  font-size: 0.9rem;
  color: var(--ink);
  line-height: 1.6;
  margin-bottom: 12px;
}

.order-meta { color: var(--muted); font-size: 0.85rem; }
.order-contact a { color: var(--gold-dark); text-decoration: underline; }

.order-opmerking {
  font-size: 0.9rem;
  background: #fff8e6;
  border-left: 3px solid var(--gold);
  padding: 10px 14px;
  color: var(--ink);
  line-height: 1.6;
  margin-bottom: 12px;
}

.opnieuw {
  border: 1.5px solid var(--gold);
  background: var(--white);
  color: var(--gold-dark);
  border-radius: 999px;
  padding: 9px 18px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.opnieuw:hover { background: var(--gold); color: var(--white); }
.opnieuw:disabled { opacity: 0.5; cursor: default; }
.opnieuw-melding { font-size: 0.82rem; color: var(--muted); margin-left: 10px; }

@media (max-width: 900px) {
  .beheer-cijfers { grid-template-columns: 1fr; }
  .order-kaart summary { grid-template-columns: 1fr auto; grid-auto-rows: auto; gap: 6px 12px; }
  .order-datum, .order-klant { grid-column: 1 / -1; }
  .order-kolommen { grid-template-columns: 1fr; gap: 22px; }
}

/* hidden moet altijd winnen van een display-regel elders */
[hidden] { display: none !important; }

/* Tekstpagina's: voorwaarden en privacy */
.let-op {
  background: #fff8e6;
  border-left: 4px solid var(--gold);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
  margin-bottom: 34px;
}

.let-op strong {
  display: block;
  color: var(--gold-dark);
  font-family: "Nunito", sans-serif;
  margin-bottom: 4px;
}

.let-op p { color: var(--ink); font-size: 0.92rem; margin: 0; }

.artikel { margin-bottom: 34px; }

.artikel h2 {
  font-size: 1.18rem;
  padding-bottom: 9px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--beige);
}

.lid { display: flex; gap: 14px; margin-bottom: 13px; }

.lid-nr {
  flex-shrink: 0;
  width: 38px;
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  color: var(--gold-dark);
  font-size: 0.9rem;
  padding-top: 2px;
}

.lid p { color: var(--muted); font-size: 0.93rem; line-height: 1.65; margin: 0; }

.shop-page .narrow > h2 {
  font-size: 1.18rem;
  margin: 30px 0 12px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--beige);
}

.shop-page .narrow > p { color: var(--muted); margin-bottom: 14px; font-size: 0.95rem; }

/* Footer: onderste balk met links naar de juridische pagina's */
.footer-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 26px;
}

.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }

.footer-links a {
  font-size: 0.8rem;
  color: #95a1c4;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.footer-links a:hover { color: var(--gold-light); border-color: var(--gold); }

.footer-inner a {
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.footer-inner a:hover { color: var(--gold-light); border-color: var(--gold-light); }

@media (max-width: 620px) {
  .footer-note { justify-content: flex-start; }
}

/* ============================================================
   Homepage-hero: paard en hond beide in beeld houden
   ============================================================
   De banner van Diana heeft het paard links en de hond rechts. Op een breed
   scherm viel het paard achter de donkere overlay, en op een telefoon sneed
   de browser het paard er helemaal af. Daarom:
   - breed scherm: lichtere overlay en een uitsnede die het paard vrijlaat
   - telefoon: een gestapelde versie (paard boven, hond onder) met de tekst
     eronder in plaats van eroverheen, zodat er niets gecropt hoeft te worden
*/

.hero-bg picture { display: block; width: 100%; height: 100%; }

.hero-bg img { object-position: center 55%; }

.hero-overlay {
  background: linear-gradient(100deg,
    rgba(20, 44, 107, 0.78) 0%,
    rgba(20, 44, 107, 0.55) 42%,
    rgba(20, 44, 107, 0.10) 100%);
}

/* Bij een lichtere overlay heeft de tekst iets meer hulp nodig */
.hero h1 { text-shadow: 0 2px 20px rgba(12, 26, 64, 0.65); }
.hero-text > p { text-shadow: 0 1px 12px rgba(12, 26, 64, 0.60); }
.hero-kicker { text-shadow: 0 1px 10px rgba(12, 26, 64, 0.55); }

@media (max-width: 820px) {
  /* Foto boven, tekst eronder: niets wordt weggesneden */
  .hero {
    display: block;
    min-height: 0;
    background: var(--blue-dark);
  }

  .hero-bg {
    position: relative;
    inset: auto;
    /* Breedte expliciet vastzetten. Safari op iOS knijpt anders ook de breedte
       af door de combinatie van aspect-ratio en max-height, waardoor er een
       lege strook naast de foto verschijnt. */
    width: 100%;
    aspect-ratio: 800 / 1000;
    max-height: 64vh;
    overflow: hidden;
  }

  .hero-bg img { height: 100%; object-position: center center; }

  /* Op een smal scherm staat de tekst onder de foto, dus de donkere overlay
     over de hele hero is niet nodig. Wel een zacht blauw verloop onderaan de
     foto zelf, zodat die vloeiend overgaat in het tekstblok eronder en de hero
     er hetzelfde uitziet als de banners op de andere pagina's. De overlay hangt
     hier aan de foto, niet aan de hero: die laatste is nu net zo hoog als foto
     plus tekst samen. */
  .hero-overlay { display: none; }

  .hero-bg::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42%;
    pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(20, 44, 107, 0) 0%,
      rgba(20, 44, 107, 0.30) 55%,
      rgba(20, 44, 107, 0.95) 100%);
  }

  .hero-inner {
    padding-top: 30px;
    padding-bottom: 74px;
  }

  .hero-text { max-width: none; }

  .hero h1, .hero-text > p, .hero-kicker {
    text-shadow: none;
  }

  .hero h1 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
}

/* ============================================================
   Contact, cookiemelding en modelformulier
   ============================================================ */

.pagina-lead {
  font-size: 1.08rem;
  color: var(--muted);
  max-width: 680px;
  margin-bottom: 34px;
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 36px;
  align-items: start;
}

.contact-info {
  background: var(--cream);
  border: 1px solid #e8ddc5;
  border-radius: 16px;
  padding: 26px 24px;
}

.contact-info h2 { font-size: 1.15rem; margin-bottom: 18px; }

.contact-regel { font-size: 0.94rem; color: var(--ink); margin-bottom: 16px; line-height: 1.6; }
.contact-regel strong { color: var(--gold-dark); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.contact-regel a { color: var(--blue); text-decoration: underline; }
.contact-regel a:hover { color: var(--gold-dark); }

.contact-usp {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #e3d9c2;
}

.contact-usp p { font-size: 0.9rem; color: var(--muted); line-height: 1.65; }

/* Onzichtbaar veld tegen bots: voor mensen niet te zien, wel in de DOM */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-gelukt {
  text-align: center;
  background: var(--cream);
  border: 1px solid #e8ddc5;
  border-radius: 18px;
  padding: 44px 30px;
}

.contact-gelukt h2 { font-size: 1.5rem; margin-bottom: 12px; }
.contact-gelukt p { color: var(--muted); max-width: 420px; margin: 0 auto; }
.contact-gelukt .check-cirkel { width: 68px; height: 68px; margin-bottom: 20px; }
.contact-gelukt .check-cirkel svg { width: 32px; height: 32px; }

/* Cookiemelding onderaan */
.cookiemelding {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  max-width: 620px;
  margin: 0 auto;
  z-index: 30;
  background: var(--white);
  border: 1px solid #e8ddc5;
  border-radius: 14px;
  box-shadow: 0 10px 34px rgba(20, 44, 107, 0.18);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.cookiemelding p { font-size: 0.86rem; color: var(--muted); line-height: 1.55; margin: 0; }
.cookiemelding a { color: var(--gold-dark); font-weight: 700; text-decoration: underline; white-space: nowrap; }

.cookiemelding button {
  flex-shrink: 0;
  border: 0;
  background: var(--blue);
  color: var(--white);
  border-radius: 999px;
  padding: 11px 22px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
}

.cookiemelding button:hover { background: var(--blue-dark); }

/* Opsomming op de tekstpagina's */
.lijst { margin: 0 0 16px 22px; }
.lijst li { color: var(--muted); font-size: 0.95rem; padding: 4px 0; }

/* Modelformulier voor herroeping */
.modelformulier {
  border: 2px solid var(--beige);
  border-radius: 16px;
  padding: 28px 30px;
  margin: 28px 0 34px;
  background: var(--white);
}

.modelformulier h2 { margin-top: 0; border-bottom: 0; padding-bottom: 0; }
.mf-toelichting { font-size: 0.9rem; color: var(--muted); margin-bottom: 22px; }
.mf-toelichting a { color: var(--gold-dark); font-weight: 700; }

.mf-blok {
  padding: 16px 0;
  border-top: 1px solid #ece4d3;
}

.mf-blok p { font-size: 0.93rem; color: var(--ink); line-height: 1.7; margin-bottom: 8px; }
.mf-regel { color: var(--muted) !important; letter-spacing: 0.02em; }
.mf-klein { font-size: 0.8rem !important; color: var(--muted) !important; font-style: italic; }

@media print {
  .site-header, .preview-bar, .site-footer, .cookiemelding, .modelformulier button { display: none !important; }
  .modelformulier { border: 1px solid #999; }
}

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .cookiemelding { flex-direction: column; align-items: stretch; text-align: center; }
  .cookiemelding a { white-space: normal; }
}

/* Waarschuwing bij wedstrijden (MSM en eucalyptus) */
.wedstrijd-waarschuwing {
  margin-top: 22px;
  padding: 18px 22px;
  background: #fff8e6;
  border: 1px solid #efd9a0;
  border-left: 4px solid var(--gold);
  border-radius: 0 12px 12px 0;
}

.wedstrijd-waarschuwing h3 {
  font-size: 0.95rem;
  color: var(--gold-dark);
  margin-bottom: 7px;
}

.wedstrijd-waarschuwing p {
  font-size: 0.9rem;
  color: var(--ink);
  line-height: 1.6;
  margin: 0;
}

.wedstrijd-waarschuwing a { color: var(--gold-dark); text-decoration: underline; }


/* Vangnet tegen horizontaal schuiven op telefoons. Een enkel te breed element
   trok vroeger de hele pagina scheef, waardoor tekst rechts wegviel. */
html, body { overflow-x: hidden; }

@media (max-width: 560px) {
  .benefit-grid { grid-template-columns: minmax(0, 1fr); }
}


/* ---------------------------------------------------------------------------
   Menu op de telefoon

   Het menu stond op smalle schermen volledig op display:none, waardoor er
   alleen nog een winkelwagentje overbleef en je niet meer kon navigeren.
   Nu klapt het uit onder een knop. De winkelwagen staat ernaast en blijft
   dus altijd met een tik bereikbaar. Zonder JavaScript blijft het menu
   gewoon staan, dan valt er niets weg.
   --------------------------------------------------------------------------- */

.kop-acties { display: flex; align-items: center; gap: 4px; }

.menu-knop {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 8px;
  background: none;
  border: 0;
  cursor: pointer;
}

.menu-knop span {
  display: block;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.2s;
}

.menu-knop[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-knop[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-knop[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 820px) {
  html.js .menu-knop { display: flex; }

  .header-inner { position: relative; }

  html.js .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    background: var(--white);
    border-bottom: 1px solid #e8e0cd;
    box-shadow: 0 12px 26px rgba(20, 44, 107, 0.12);
    padding: 4px 24px 14px;
  }

  html.js .nav.open { display: flex; }

  html.js .nav a {
    margin-left: 0;
    padding: 13px 2px;
    font-size: 1.02rem;
    border-bottom: 1px solid #f0ead9;
  }

  html.js .nav a:last-child { border-bottom: 0; }
  html.js .nav a.actief { border-bottom-color: #f0ead9; color: var(--gold-dark); }

  .cart-link { margin-left: 0; }
}


/* Kopbalk zonder foto. Voor pagina's waar geen beeld bij hoort, zoals de
   webshop: een fotobanner zou daar alleen maar herhalen wat er verderop
   al staat. */
.page-hero-vlak {
  min-height: 0;
  padding: 54px 0 46px;
  background: var(--blue-dark);
}

.page-hero-vlak::after { display: none; }
.page-hero-vlak .container { padding-bottom: 0; }
.page-hero-lead { color: #c9d4ee; margin-top: 10px; font-size: 1.05rem; }

@media (max-width: 820px) {
  .page-hero-vlak { padding: 38px 0 34px; }
}

/* Variant zonder prijs: zichtbaar, maar niet te kiezen */
.variant-uit label { opacity: 0.55; cursor: not-allowed; }
.variant-uit .v-price { font-style: italic; }