/* =========================================================
   BoomBii stylesheet
   Kleurstijl: pastel basis met felle accentkleuren
   ========================================================= */

:root {
  /* Pastel basis */
  --bg: #FDFBF7;
  --pastel-mint: #E9F7F0;
  --pastel-yellow: #FFF7E1;
  --pastel-pink: #FDEEF3;
  --pastel-blue: #EAF5FC;

  /* Felle accenten, afgestemd op het BoomBii-logo */
  --accent-green: #3BACA3;
  --accent-green-dark: #2A7A74;
  --accent-orange: #EC6E4D;
  --accent-orange-dark: #E8522B;
  --accent-pink: #FF6FA0;
  --accent-blue: #3AA8E0;
  --accent-yellow: #FFC643;
  --accent-olive: #C3C133;

  /* Tekstveilige varianten: alleen gebruiken waar tekst erop staat.
     De felle merkkleuren hierboven blijven voor decoratief gebruik. */
  --accent-orange-text: #D63E17;   /* wit hierop: 4.60:1 */
  --accent-green-text: #2D827B;    /* wit hierop: 4.57:1 */

  /* Tekst */
  --text-dark: #22303A;
  --text-muted: #5C6B72;
  --white: #FFFFFF;

  /* Overig */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --shadow-soft: 0 10px 30px rgba(34, 48, 58, 0.08);
  --shadow-hover: 0 16px 40px rgba(34, 48, 58, 0.14);
  --max-width: 1180px;
}


/* ---------- Fallback-metrics ----------
   Laat de systeemfont bijna exact dezelfde ruimte innemen als Inter en
   Poppins, zodat de omschakeling geen zichtbare sprong meer geeft. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Poppins Fallback';
  src: local('Arial');
  size-adjust: 112%;
  ascent-override: 93%;
  descent-override: 31%;
  line-gap-override: 0%;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; height: auto; }
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

body {
  font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text-dark);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Poppins', 'Poppins Fallback', 'Inter', sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
}

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

section { padding: 88px 0; }
@media (max-width: 768px) {
  section { padding: 56px 0; }
}

.section-kicker {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-green-dark);
  background: var(--pastel-mint);
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  margin-bottom: 16px;
}

.section-intro {
  color: var(--text-muted);
  font-size: 1.08rem;
  max-width: 640px;
  margin-bottom: 48px;
}

.section-header {
  text-align: center;
  margin: 0 auto 48px;
}
.section-header .section-intro { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--accent-orange-text);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(236, 110, 77, 0.35);
}
.btn-primary:hover { background: var(--accent-orange-dark); box-shadow: 0 14px 30px rgba(236, 110, 77, 0.45); }

.btn-secondary {
  background: var(--white);
  color: var(--text-dark);
  border: 2px solid #E7E1D6;
}
.btn-secondary:hover { border-color: var(--accent-green); color: var(--accent-green-dark); }

.btn-block {
  background: var(--accent-green-text);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(43, 190, 131, 0.35);
}
.btn-block:hover { background: var(--accent-green-dark); }

.btn-small { padding: 10px 20px; font-size: 0.9rem; }
.btn-full { width: 100%; justify-content: center; }

/* "Binnenkort beschikbaar": duidelijk inactieve knop, webshop nog in ontwikkeling */
.btn-soon {
  background: #EDEAE1;
  color: var(--text-muted);
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}
.btn-soon:hover { transform: none; background: #EDEAE1; }
.btn-soon .btn-soon-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-orange);
  flex-shrink: 0;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253, 251, 247, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(34, 48, 58, 0.06);
  transition: box-shadow 0.2s ease;
}
.site-header.is-scrolled { box-shadow: 0 6px 20px rgba(34,48,58,0.06); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 16px 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.logo .logo-mark {
  height: 36px;
  width: auto;
  flex-shrink: 0;
}
.logo .logo-wordmark {
  height: 26px;
  width: auto;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
/* Menu-items niet over twee regels laten breken: "Over BoomBii" zag er
   afgehakt uit naast het logo. */
.main-nav > a,
.nav-dropdown-toggle { white-space: nowrap; }
.main-nav a {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--text-dark);
  position: relative;
  padding: 4px 0;
}
.main-nav a:hover { color: var(--accent-green-dark); }

.header-cta { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.nav-cta { display: none; }

/* Dropdown: "Assortiment" in de hoofdnavigatie */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--text-dark);
  padding: 4px 0;
}
.nav-dropdown-toggle:hover { color: var(--accent-green-dark); }
.nav-dropdown-toggle svg { transition: transform 0.2s ease; }
.nav-dropdown:hover .nav-dropdown-toggle svg,
.nav-dropdown:focus-within .nav-dropdown-toggle svg { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, 6px);
  background: var(--white);
  box-shadow: var(--shadow-hover);
  border-radius: var(--radius-sm);
  padding: 10px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 50;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav-dropdown-menu a {
  padding: 9px 12px !important;
  border-radius: 8px;
  font-size: 0.92rem !important;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: var(--pastel-mint); }
.nav-dropdown-menu a.is-current-page { color: var(--accent-green-dark); background: var(--pastel-mint); }

@media (max-width: 900px) {
  .nav-dropdown-menu,
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu {
    position: static;
    left: auto;
    opacity: 1;
    pointer-events: auto;
    transform: none !important;
    box-shadow: none;
    padding: 0 0 0 16px;
    min-width: 0;
    display: none;
  }
  .nav-dropdown.is-open .nav-dropdown-menu,
  .nav-dropdown.is-open:hover .nav-dropdown-menu,
  .nav-dropdown.is-open:focus-within .nav-dropdown-menu { display: flex; }
  .nav-dropdown-menu a { border-bottom: none !important; padding: 10px 0 !important; }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
}
.nav-toggle span {
  width: 24px;
  height: 3px;
  background: var(--text-dark);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

@media (max-width: 900px) {
  .main-nav {
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 24px 24px;
    box-shadow: 0 16px 24px rgba(34,48,58,0.08);
    transform: translateY(-130%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .main-nav.is-open { transform: translateY(0); opacity: 1; }
  .main-nav a { width: 100%; padding: 12px 0; border-bottom: 1px solid #F1EEE6; }
  .main-nav .nav-cta {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    margin-top: 12px;
    border-bottom: none;
  }
  /* De winkelwagen bleef op een telefoon achter het menu verstopt. Nu staat
     hij als rond icoon naast de hamburger; alleen het woord verdwijnt. */
  .header-inner .header-cta > .btn-primary { display: inline-flex; }
  .cart-header-btn .cart-header-label { display: none; }
  .cart-header-btn { padding: 9px 11px; border-radius: 999px; }
  .cart-header-btn .cart-count { margin-left: 2px; }
  .header-cta { gap: 8px; }
  .nav-toggle { display: flex; }
}

/* ---------- Hero ---------- */
.hero {
  padding: 72px 0 40px;
  background: radial-gradient(circle at 15% 20%, var(--pastel-yellow) 0%, transparent 45%),
              radial-gradient(circle at 85% 15%, var(--pastel-pink) 0%, transparent 40%),
              radial-gradient(circle at 50% 90%, var(--pastel-blue) 0%, transparent 45%),
              var(--bg);
  overflow: hidden;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-badges, .hero-actions { justify-content: center; }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--accent-green-dark);
  box-shadow: var(--shadow-soft);
  margin-bottom: 20px;
}

.hero-title {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  margin-bottom: 20px;
}
.hero-title .highlight { color: var(--accent-green); }

.hero-text {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 520px;
  margin-bottom: 32px;
}
@media (max-width: 900px) { .hero-text { margin-left: auto; margin-right: auto; } }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
}

/* Reserveert de hoogte van de knoppenrij zodat het laden van de
   webfonts de hero niet meer verschuift (Cumulative Layout Shift). */
.hero-actions { min-height: 62px; }
@media (max-width: 900px) {
  .hero-actions { min-height: 136px; }
}

.hero-note {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--text-muted);
}
.hero-note svg { flex-shrink: 0; color: var(--accent-green); }

.hero-visual {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
/* De foto's zitten in een <picture> voor de webp-versie, dus die wrapper is de
   rastercel en niet de <img>. Daarom staan de maten hier op de <picture> en
   vult de afbeelding hem op. Stond dit op de img, dan klapte het raster in en
   staken de foto's er scheef uit. */
.hero-visual picture {
  display: block;
  min-width: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
/* De sfeerfoto links loopt over beide rijen; haar hoogte volgt uit de twee
   vierkanten ernaast, zodat de randen gelijk liggen. */
.hero-visual picture:nth-of-type(1) { grid-row: span 2; }
.hero-visual picture:nth-of-type(2),
.hero-visual picture:nth-of-type(3) { aspect-ratio: 1 / 1; background: var(--white); }
.hero-visual img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
/* De twee productfoto's zijn pakshots op wit. Bijsnijden hakt de verpakking en
   het "set van 4"-label eraf, dus die passen we in plaats van vullend. */
.hero-visual .hv-square { object-fit: contain; padding: 10px; }
.hero-visual .hv-float {
  position: absolute;
  bottom: -18px;
  left: -18px;
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  box-shadow: var(--shadow-hover);
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.9rem;
}
.hero-visual .hv-float .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-orange); }
@media (max-width: 500px) { .hero-visual .hv-float { display: none; } }

/* Op een telefoon vielen de hero-collage en de maatfoto uit elkaar: de drie
   beelden stonden trapsgewijs onder elkaar en duwden de tekst weg. Ze voegen
   daar weinig toe, dus op smalle schermen blijven ze weg en begint de pagina
   meteen met de tekst en de actie. Op desktop veranderen ze niet. */
@media (max-width: 900px) {
  .hero-visual,
  .about-media { display: none; }
}

/* ---------- Over BoomBii ---------- */
.about {
  background: var(--white);
}
.about-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 900px) {
  .about-inner { grid-template-columns: 1fr; }
}
.about-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.about-media img { width: 100%; }

.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 36px;
}
.stat {
  background: var(--pastel-mint);
  border-radius: var(--radius-sm);
  padding: 18px 14px;
  text-align: center;
}
.stat strong {
  display: block;
  font-family: 'Poppins', 'Poppins Fallback', sans-serif;
  font-size: 1.5rem;
  color: var(--accent-green-dark);
}
.stat span { font-size: 0.82rem; color: var(--text-muted); }

.about-text p { margin-bottom: 18px; color: var(--text-muted); font-size: 1.05rem; }
.about-disclaimer {
  margin-top: 20px;
  font-size: 0.85rem;
  color: var(--text-muted);
  background: var(--pastel-yellow);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
}

/* ---------- Assortiment ---------- */
.assortment { background: var(--pastel-mint); }

.color-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 980px) { .color-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .color-grid { grid-template-columns: 1fr 1fr; gap: 14px; } }

.color-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}
.color-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }

.color-card figure {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #F5F2EA;
  padding: 8px;
}
.color-card img { width: 100%; height: 100%; object-fit: contain; }

.color-card-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.color-card-body h3 { font-size: 1.05rem; }
.color-swatch-row { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.color-swatch { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.06); }
.color-card-body .price { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 6px; }
.color-card-body a.card-link {
  margin-top: auto;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--accent-green-dark);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.color-card-body a.card-link:hover { color: var(--accent-orange); }

/* Special variants */
.variant-heading { margin-top: 64px; }

/* Vijf kaarten: drie boven, twee gecentreerd eronder (zes kolommen, elke kaart twee breed);
   onder 1100 px twee naast elkaar met de laatste in het midden, onder 600 px onder elkaar. */
.variant-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}
.variant-grid > .variant-card { grid-column: span 2; }
.variant-grid > .variant-card:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
.variant-grid > .variant-card:nth-child(5):last-child { grid-column: 4 / span 2; }
@media (max-width: 1100px) {
  .variant-grid { grid-template-columns: repeat(4, 1fr); }
  .variant-grid > .variant-card:nth-child(4):nth-last-child(2) { grid-column: span 2; }
  .variant-grid > .variant-card:nth-child(5):last-child { grid-column: 2 / span 2; }
}
@media (max-width: 600px) {
  .variant-grid { grid-template-columns: 1fr; }
  .variant-grid > .variant-card,
  .variant-grid > .variant-card:nth-child(4):nth-last-child(2),
  .variant-grid > .variant-card:nth-child(5):last-child { grid-column: auto; }
}

.variant-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
}
.variant-card figure { aspect-ratio: 1 / 1; overflow: hidden; background: #F5F2EA; padding: 10px; }
.variant-card img { width: 100%; height: 100%; object-fit: contain; }
.variant-card-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.variant-tag {
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--pastel-yellow);
  color: #A9740B;
}
.variant-card-body h3 { font-size: 1.15rem; }
.variant-card-body p { color: var(--text-muted); font-size: 0.95rem; flex: 1; }

.assortment-cta { text-align: center; margin-top: 56px; }

/* ---------- Waarom BoomBii ---------- */
.why { background: var(--white); }
.why-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) { .why-inner { grid-template-columns: 1fr; } }
.why-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }

.usp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 560px) { .usp-grid { grid-template-columns: 1fr; } }

.usp-card {
  background: var(--pastel-blue);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.usp-card:nth-child(2) { background: var(--pastel-pink); }
.usp-card:nth-child(3) { background: var(--pastel-yellow); }
.usp-card:nth-child(4) { background: var(--pastel-mint); }
.usp-card:nth-child(5) { background: var(--pastel-pink); }
.usp-card:nth-child(6) { background: var(--pastel-blue); }

.usp-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--white);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-soft);
}
.usp-card h3 { font-size: 1.02rem; }
.usp-card p { font-size: 0.9rem; color: var(--text-muted); }

/* ---------- Waar te koop ---------- */
.buy {
  background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-green-dark) 100%);
  color: var(--white);
  border-radius: var(--radius-lg);
  margin: 0 24px;
  padding: 72px 24px;
}
@media (min-width: 1180px) { .buy { margin: 0 auto; max-width: var(--max-width); } }
.buy-inner { text-align: center; max-width: 680px; margin: 0 auto; }
.buy .section-kicker { background: rgba(255,255,255,0.16); color: var(--white); }
.buy h2 { color: var(--white); font-size: clamp(1.8rem, 3.5vw, 2.4rem); margin-bottom: 16px; }
.buy p { color: rgba(255,255,255,0.9); font-size: 1.08rem; margin-bottom: 36px; }

.buy .btn-primary {
  background: var(--white);
  color: var(--accent-green-dark);
  box-shadow: 0 10px 24px rgba(0,0,0,0.15);
}
.buy .btn-primary:hover { background: var(--pastel-yellow); }

.trust-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.25);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.92rem;
}

/* ---------- Footer ---------- */
.site-footer {
  background: #1B2A2E;
  color: rgba(255,255,255,0.78);
  padding: 64px 0 28px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .footer-inner { grid-template-columns: 1fr; }
}

.footer-brand .logo { color: var(--white); margin-bottom: 14px; }
.footer-brand p { font-size: 0.92rem; max-width: 280px; color: rgba(255,255,255,0.6); }

/* De footerkoppen zijn h3 in de HTML; met alleen h4 bleven ze donker op donker (17-10-2026). */
.footer-col h3,
.footer-col h4 {
  color: var(--white);
  font-size: 0.95rem;
  margin-bottom: 16px;
}
.footer-col ul li { margin-bottom: 10px; }
.footer-col a { font-size: 0.92rem; color: rgba(255,255,255,0.68); }
.footer-col a:hover { color: var(--accent-yellow); }

.footer-social { display: flex; gap: 12px; margin-top: 6px; }
.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: grid;
  place-items: center;
  transition: background 0.2s ease;
}
.footer-social a:hover { background: var(--accent-green); }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  margin-bottom: 20px;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
}

/* ---------- Utility / animation ----------
   Progressive enhancement: content is visible by default.
   Only browsers with JS enabled (html.js, set synchronously
   in <head>) get the fade/slide-in treatment; if JS fails or
   is disabled, .reveal elements simply stay visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent-green);
  color: white;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  z-index: 200;
}
.skip-link:focus { left: 0; }

/* ---------- Categoriepagina's (kleine/grote bouwstenen, dubbelzijdig, XXL) ---------- */
.breadcrumb {
  padding-top: 18px;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.breadcrumb a { color: var(--accent-green-dark); font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }

.category-hero {
  padding: 40px 0 64px;
  background: radial-gradient(circle at 15% 20%, var(--pastel-yellow) 0%, transparent 45%),
              radial-gradient(circle at 85% 15%, var(--pastel-pink) 0%, transparent 40%),
              radial-gradient(circle at 50% 90%, var(--pastel-blue) 0%, transparent 45%),
              var(--bg);
}
.category-hero-inner { max-width: 760px; }
.category-hero .hero-badge { margin-bottom: 20px; }
.category-hero h1 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  margin-bottom: 18px;
}
.category-hero p {
  font-size: 1.08rem;
  color: var(--text-muted);
  max-width: 620px;
}
.category-price-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 700;
  color: var(--accent-orange-dark);
  margin-top: 24px;
  font-size: 1rem;
}

.category-products { padding-top: 0; }

.category-note {
  background: var(--pastel-mint);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  margin-top: 40px;
  color: var(--text-dark);
  font-size: 0.96rem;
}
.category-note strong { color: var(--accent-green-dark); }

.category-crosslinks {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(34,48,58,0.08);
}
.category-crosslinks a {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1.5px solid rgba(34,48,58,0.14);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-dark);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.category-crosslinks a:hover { border-color: var(--accent-green); color: var(--accent-green-dark); background: var(--pastel-mint); }
.category-crosslinks a.is-current { background: var(--accent-green); border-color: var(--accent-green); color: var(--white); }

/* Checkerboard swatch pattern for "transparant" */
.color-swatch.is-transparent {
  background-image: repeating-conic-gradient(#d8d8d2 0% 25%, #ffffff 0% 50%);
  background-size: 8px 8px;
  border: 1px solid rgba(34,48,58,0.15);
}

/* ---------- Productpagina (webshop-stijl) ---------- */
.product-main { padding: 40px 0 0; }

.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 460px) 1fr;
  gap: 56px;
  align-items: flex-start;
  /* Alleen boven en onder: de zijmarge komt van .container. Met
     "padding: 32px 0 64px" stond de tekst op mobiel tegen de schermrand. */
  padding-top: 32px;
  padding-bottom: 64px;
}

.product-gallery {
  background: #F5F2EA;
  border-radius: var(--radius-lg);
  padding: 32px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 100px;
}
.product-gallery img { width: 100%; height: 100%; object-fit: contain; }

.product-info { display: flex; flex-direction: column; gap: 18px; }

.product-tag-row { display: flex; align-items: center; gap: 10px; }
.product-swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.08); flex-shrink: 0; }
.product-category-tag {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-green-dark);
  background: var(--pastel-mint);
  padding: 5px 12px;
  border-radius: 999px;
}

.product-info h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 2px; }
.product-lead { color: var(--text-muted); font-size: 1.02rem; }

.product-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 20px 0;
  border-top: 1px solid rgba(34,48,58,0.08);
  border-bottom: 1px solid rgba(34,48,58,0.08);
}
.product-price { font-family: 'Poppins', 'Poppins Fallback', sans-serif; font-weight: 700; font-size: 2rem; color: var(--text-dark); }
.product-price-unit { color: var(--text-muted); font-size: 0.95rem; }

.product-buy { display: flex; flex-direction: column; gap: 10px; }
.product-buy-note { font-size: 0.85rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }

.product-desc p { color: var(--text-muted); margin-bottom: 14px; }
.product-desc p:last-child { margin-bottom: 0; }

.product-specs { margin-top: 8px; }
.product-specs h2 { font-size: 1.1rem; margin-bottom: 14px; }
.product-specs-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.product-specs-table tr { border-bottom: 1px solid rgba(34,48,58,0.08); }
.product-specs-table tr:last-child { border-bottom: none; }
.product-specs-table th, .product-specs-table td { text-align: left; padding: 10px 0; font-weight: 400; }
.product-specs-table th { color: var(--text-muted); width: 45%; font-weight: 500; }
.product-specs-table td { color: var(--text-dark); font-weight: 600; }

.product-crosslink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-green-dark);
  font-weight: 600;
  font-size: 0.95rem;
}
.product-crosslink:hover { text-decoration: underline; }

.product-related { background: var(--pastel-mint); padding: 56px 0 64px; }
.product-related h2 { font-size: 1.3rem; margin-bottom: 24px; }

/* ---------- Uitgebreide productinformatie (SEO-content) ---------- */
.product-extra { padding: 64px 0; }
.product-extra-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 48px;
}
.product-extra-block h2 { font-size: 1.1rem; margin-bottom: 10px; }
.product-extra-block p { color: var(--text-muted); margin-bottom: 12px; }
.product-extra-block p:last-child { margin-bottom: 0; }

.product-faq { background: var(--pastel-blue); padding: 56px 0 64px; }
.product-faq h2 { font-size: 1.3rem; margin-bottom: 20px; }
.faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.faq-item {
  background: #fff;
  border-radius: 12px;
  padding: 4px 20px;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  padding: 16px 0;
  list-style: none;
  position: relative;
  padding-right: 28px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 14px;
  font-size: 1.2rem;
  color: var(--accent-green-dark, #1a8a4a);
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p { color: var(--text-muted); margin: 0 0 16px; }

@media (max-width: 900px) {
  .product-extra-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 900px) {
  .product-layout { grid-template-columns: 1fr; gap: 28px; }
  .product-gallery { position: static; max-width: 420px; margin: 0 auto; width: 100%; }
}

/* ---------- Winkelwagen: badge, toast, hoeveelheid-kiezer ---------- */
.cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--accent-orange);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 18px;
}
.cart-header-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.cart-header-btn .cart-icon { flex: 0 0 auto; }

.boombii-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 20px);
  background: var(--text-dark);
  color: var(--white);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  box-shadow: var(--shadow-hover);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 999;
}
.boombii-toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

.qty-select-row {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(34,48,58,0.15);
  border-radius: 999px;
  overflow: hidden;
}
.qty-select-row .qty-btn {
  width: 38px;
  height: 38px;
  background: var(--pastel-mint);
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-green-dark);
  cursor: pointer;
}
.qty-select-row .qty-btn:hover { background: var(--accent-green); color: var(--white); }
.qty-select-row .qty-input {
  width: 48px;
  height: 38px;
  border: none;
  text-align: center;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  -moz-appearance: textfield;
}
.qty-select-row .qty-input::-webkit-outer-spin-button,
.qty-select-row .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.product-buy-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ===================== Juridische pagina's ===================== */
.legal-page { padding: 20px 0 80px; }
.legal-page-inner { max-width: 780px; margin: 0 auto; }
.legal-page-inner h1 { font-family: 'Poppins', 'Poppins Fallback', sans-serif; font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 10px; }
.legal-intro { color: var(--text-muted); font-size: 1.05rem; margin-bottom: 34px; }
.legal-page-inner h2 { font-family: 'Poppins', 'Poppins Fallback', sans-serif; font-size: 1.25rem; margin: 34px 0 12px; color: var(--text-dark); }
.legal-page-inner p, .legal-page-inner li { color: var(--text-muted); line-height: 1.7; }
.legal-page-inner ul, .legal-page-inner ol { padding-left: 22px; margin: 10px 0 16px; }
.legal-page-inner a { color: var(--accent-green-dark); font-weight: 600; }
.legal-box {
  background: var(--pastel-blue);
  border-radius: var(--radius-md);
  padding: 24px 26px;
  margin: 18px 0;
}
.legal-box p { margin: 0 0 10px; }
.legal-box p:last-child { margin-bottom: 0; }

/* ===================== WhatsApp-knop (zwevend, alle pagina's) ===================== */
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 998;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25D366;
  color: var(--white);
  padding: 14px;
  border-radius: 999px;
  box-shadow: var(--shadow-hover);
  text-decoration: none;
  transition: transform 0.2s ease, padding 0.2s ease, border-radius 0.2s ease;
}
.whatsapp-float-label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  transition: max-width 0.25s ease;
}
.whatsapp-float:hover {
  transform: translateY(-2px);
  border-radius: 999px;
  padding: 14px 18px 14px 14px;
}
.whatsapp-float:hover .whatsapp-float-label { max-width: 100px; }
@media (max-width: 600px) {
  .whatsapp-float { right: 14px; bottom: 14px; padding: 13px; }
}

/* ---------- Uitlegsecties op categorie-, gids- en infopagina's ---------- */
.category-explainer {
  padding: 64px 0 24px;
}
.category-explainer h2 {
  margin-bottom: 24px;
}
.category-explainer h3 {
  margin-top: 32px;
  margin-bottom: 8px;
  font-size: 1.15rem;
  color: var(--text-dark);
}
.category-explainer p {
  color: var(--text-muted);
  max-width: 68ch;
  line-height: 1.75;
}
.category-explainer a {
  color: var(--accent-green-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.category-explainer a:hover {
  color: var(--accent-orange-text);
}

/* Gidsen (blog): opmaak voor lange artikelen, 12-09-2026 */
.gids-kern{background:var(--pastel-mint);border-radius:var(--radius-md);padding:22px 26px;margin:0 0 32px}
.gids-kern strong{color:var(--accent-green-dark)}
.gids-kern ul{margin:0;padding-left:20px}
.gids-kern li{margin-bottom:8px;color:var(--text-dark)}
.gids-kern li:last-child{margin-bottom:0}
.gids-figuur{margin:28px 0 32px}
.gids-figuur img,.gids-figuur svg{width:100%;height:auto;border-radius:var(--radius-md);display:block}
.gids-figuur svg{background:#fff;padding:12px;box-sizing:border-box}
.gids-figuur figcaption{font-size:.88rem;color:var(--text-muted);margin-top:10px}
.gids-tabel{width:100%;border-collapse:collapse;margin:0 0 32px;font-size:.95rem;background:#fff;border-radius:var(--radius-sm);overflow:hidden}
.gids-tabel th,.gids-tabel td{text-align:left;padding:10px 14px;border-bottom:1px solid rgba(34,48,58,.1);vertical-align:top}
.gids-tabel thead th{background:var(--pastel-yellow);color:var(--text-dark);font-weight:600}
.gids-tabel tr:last-child td{border-bottom:none}
.gids-stappen{counter-reset:gstap;list-style:none;margin:0 0 32px;padding:0}
.gids-stappen li{counter-increment:gstap;position:relative;padding:0 0 18px 52px;margin:0;color:var(--text-dark)}
.gids-stappen li:before{content:counter(gstap);position:absolute;left:0;top:0;width:36px;height:36px;line-height:36px;text-align:center;background:var(--accent-orange);color:#fff;border-radius:50%;font-weight:700}
.gids-stappen li strong{display:block;margin-bottom:4px}
.gids-kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:0 0 32px}
.gids-kaart{background:#fff;border-radius:var(--radius-md);padding:20px 22px;box-shadow:var(--shadow-soft)}
.gids-kaart h3{margin:0 0 8px;font-size:1.05rem}
.gids-kaart p{margin:0;font-size:.95rem}
.gids-product{display:flex;gap:24px;align-items:center;background:#fff;border-radius:var(--radius-md);padding:22px 26px;margin:0 0 32px;box-shadow:var(--shadow-soft)}
.gids-product img{width:180px;max-width:35%;height:auto;border-radius:var(--radius-sm);flex:0 0 auto}
.gids-product h3{margin:0 0 8px}
.gids-product p{margin:0 0 10px}
.gids-prijs{font-size:1.25rem;font-weight:700;color:var(--accent-green-dark)}
.gids-prijs span{font-size:.85rem;font-weight:400;color:var(--text-muted)}
.gids-auteur{margin-top:36px;padding-top:18px;border-top:1px solid rgba(34,48,58,.12);color:var(--text-muted);font-size:.95rem}
.category-explainer .gids-artikel p{max-width:760px;margin:0 0 16px}
.category-explainer .gids-artikel ul,.category-explainer .gids-artikel ol{margin-bottom:20px}
.category-explainer .gids-artikel h2{margin-top:48px}
.category-explainer .gids-artikel a{color:var(--accent-green-dark);text-decoration:underline}
@media (max-width:700px){.gids-product{flex-direction:column;align-items:flex-start}.gids-product img{max-width:100%;width:100%}.gids-tabel{display:block;overflow-x:auto}}
/* Gidsenoverzicht (/gidsen), 17-09-2026 */
.gidsen-overzicht{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin:0 0 40px}
.gidsen-kaart{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-soft);overflow:hidden;display:flex}
.category-explainer .gidsen-kaart-link{display:flex;flex-direction:column;width:100%;color:inherit;text-decoration:none}
.gidsen-kaart img{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;display:block}
.gidsen-kaart-leeg{aspect-ratio:1200/630;background:linear-gradient(135deg,var(--pastel-mint),var(--pastel-blue))}
.gidsen-kaart-tekst{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.category-explainer .gidsen-kaart h2{font-size:1.12rem;line-height:1.35;margin:0;color:var(--text-dark)}
.category-explainer .gidsen-kaart p{margin:0;font-size:.95rem;flex:1}
.gidsen-kaart-meta{font-size:.85rem;color:var(--text-muted)}
.category-explainer .gidsen-kaart-link:hover h2{color:var(--accent-green-dark)}
.gidsen-kaart-link:focus-visible{outline:3px solid var(--accent-green-dark);outline-offset:2px}
.category-explainer .gidsen-overzicht-voet{max-width:760px}

/* 2+1 gratis. De actie moet op elke pagina opvallen, dus drie vormen:
   een balk bovenaan, een blok bij de prijs en een band op de homepage. */
.promo-bar{display:flex;align-items:center;justify-content:center;gap:.6rem .8rem;flex-wrap:wrap;
  padding:.6rem 1rem;background:var(--accent-orange-text);color:var(--white);
  text-decoration:none;text-align:center;line-height:1.35}
.promo-bar:hover,.promo-bar:focus-visible{background:var(--accent-orange-dark)}
.promo-bar-badge{padding:.18rem .6rem;border-radius:999px;background:var(--accent-yellow);
  color:var(--text-dark);font-weight:800;font-size:.85rem;letter-spacing:.06em;white-space:nowrap}
.promo-bar-text{font-size:.95rem;font-weight:600}
@media (max-width:640px){.promo-bar{padding:.5rem .75rem}.promo-bar-text{font-size:.85rem}
  /* Op een telefoon past alleen de kern; de toelichting staat op de pagina zelf. */
  .promo-bar-extra{display:none}}

.promo-2plus1{display:flex;align-items:flex-start;gap:.7rem;margin:1rem 0;padding:.8rem .95rem;
  border:2px dashed var(--accent-orange);border-radius:var(--radius-sm);background:var(--pastel-yellow)}
.promo-2plus1-badge{flex:0 0 auto;padding:.28rem .65rem;border-radius:999px;
  background:var(--accent-orange-text);color:var(--white);font-weight:800;font-size:.82rem;
  letter-spacing:.04em;white-space:nowrap}
.promo-2plus1-text{margin:0;color:var(--text-dark);font-size:.95rem;line-height:1.5}
.promo-2plus1-text strong{display:block;color:var(--accent-orange-text)}
@media (max-width:480px){.promo-2plus1{flex-direction:column;gap:.45rem}}

/* Platen onderaan een gids. Wie op een gids binnenkwam, liep anders dood:
   er stond geen enkele link naar een product in. */
.gids-producten{padding:2.4rem 0 3rem;background:var(--pastel-mint)}
.gids-producten h2{font-size:1.3rem;margin-bottom:.4rem;color:var(--text-dark)}
.gids-producten-inleiding{color:var(--text-muted);margin-bottom:1.4rem}
.gids-producten-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.gids-product-kaart{display:flex;flex-direction:column;gap:.35rem;padding:1rem 1.1rem;
  background:var(--white);border-radius:var(--radius-sm);box-shadow:var(--shadow-soft);
  text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.gids-product-kaart:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.gids-product-kaart strong{color:var(--accent-green-dark);font-size:1rem}
.gids-product-kaart span{color:var(--text-muted);font-size:.88rem;line-height:1.45}

/* Waarom hier en niet op bol. Dat is de eerste vraag van iedereen die het merk
   van bol kent, en die stond nergens beantwoord. */
.waarom-hier{margin:2rem auto 0;max-width:46rem;text-align:left;background:var(--white);
  border-radius:var(--radius-md);padding:1.6rem 1.8rem;box-shadow:var(--shadow-soft)}
.waarom-hier h3{font-size:1.05rem;margin-bottom:.9rem;color:var(--text-dark)}
.waarom-hier ul{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.waarom-hier li{position:relative;padding-left:1.5rem;color:var(--text-muted);line-height:1.55;font-size:.95rem}
.waarom-hier li::before{content:"";position:absolute;left:0;top:.55rem;width:8px;height:8px;
  border-radius:50%;background:var(--accent-green)}
.waarom-hier strong{color:var(--text-dark)}
a.trust-item{text-decoration:none}
a.trust-item:hover{color:var(--accent-green-dark)}

.promo-band{padding:2.4rem 0;text-align:center;background:var(--pastel-yellow);
  border-top:3px solid var(--accent-yellow);border-bottom:3px solid var(--accent-yellow)}
.promo-band-badge{display:inline-block;padding:.4rem 1.05rem;border-radius:999px;
  background:var(--accent-orange-text);color:var(--white);font-weight:800;font-size:1rem;
  letter-spacing:.07em}
.promo-band h2{margin:.85rem 0 .5rem;font-size:clamp(1.4rem,3.4vw,2.1rem);color:var(--text-dark)}
.promo-band p{margin:0 auto;max-width:44rem;color:var(--text-muted)}
.promo-band .btn{margin-top:1.3rem}

/* Een klasse met display:flex wint van het hidden-attribuut uit de
   browserstijl. Daardoor bleef het lege duwtje met het cadeau-icoon staan
   zodra de korting bereikt was. Deze regel zet dat recht voor de hele site. */
[hidden]{display:none !important}

.promo-bar-sep{opacity:.55}
@media (max-width:860px){.promo-bar-sep{display:none}
  /* Onder elkaar in plaats van achter elkaar: twee korte regels lezen beter
     dan een afgekapte zin. */
  .promo-bar{flex-direction:column;gap:.2rem}}

/* Gratis verzending, vlak onder de prijs. */
.product-shipping{display:flex;align-items:center;gap:.45rem;margin:.55rem 0 0;
  color:var(--accent-green-text);font-size:.95rem}
.product-shipping strong{color:var(--accent-green-text)}

.cart-nudge{display:flex;align-items:center;gap:.6rem;margin:1rem 0 0;padding:.75rem .95rem;
  border:2px dashed var(--accent-orange);border-radius:var(--radius-sm);
  background:var(--pastel-yellow);color:var(--text-dark);font-weight:600;line-height:1.45}
.cart-summary-discount{color:var(--accent-green-dark,#2c7a3f);font-weight:600}

/* Oproep naar de kleurmixer (kleuren-mixen.html) op categorie- en productpagina's,
   gezet door tools/kleurmix_links.py. */
.mix-oproep{display:flex;align-items:center;gap:12px;margin:0 0 1rem;padding:.75rem .95rem;border:2px solid rgba(34,48,58,.1);border-radius:var(--radius-sm);background:var(--white);color:var(--text-dark);text-decoration:none;transition:border-color .15s,background .15s}
.mix-oproep:hover{border-color:var(--accent-green);background:var(--pastel-mint)}
.mix-oproep-mini{flex:0 0 34px;display:grid;grid-template-columns:1fr 1fr;gap:2px;width:34px;height:34px}
.mix-oproep-mini span{border-radius:2px}
.mix-oproep-tekst{flex:1;font-size:.93rem;line-height:1.45}
.mix-oproep-tekst strong{display:block;color:var(--accent-green-dark)}
.mix-oproep-pijl{font-weight:800;color:var(--accent-green-dark)}
.category-hero .mix-oproep{max-width:560px;margin:1rem auto 0;text-align:left}
.mix-oproep-link{font-weight:700;text-decoration:underline}

/* Kleurensets (tools/kleurensets.py): productpagina met een galerij van zeven foto's,
   de lijst "elke kleur een eigen wereld" en een categoriepagina met drie kaarten naast elkaar. */
.product-gallery--multi { aspect-ratio: auto; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 20px; gap: 14px; }
.gallery-main { width: 100%; }
.gallery-slide { display: flex; align-items: center; justify-content: center; width: 100%; }
.gallery-slide + .gallery-slide { margin-top: 14px; }
.js .gallery-main { aspect-ratio: 1 / 1; }
.js .gallery-slide { display: none; height: 100%; margin: 0; }
.js .gallery-slide.is-active { display: flex; }
.gallery-thumbs { display: none; }
.js .gallery-thumbs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.gallery-thumb { padding: 0; border: 2px solid transparent; border-radius: 10px; background: #fff; overflow: hidden; cursor: pointer; aspect-ratio: 1 / 1; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb.is-active { border-color: var(--accent-green); }
.gallery-thumb:focus-visible { outline: 3px solid var(--accent-blue); outline-offset: 2px; }

.product-desc h3 { font-size: 1.05rem; margin: 20px 0 8px; }
.product-desc h3:first-child { margin-top: 0; }
.werelden-lijst { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; }
.werelden-lijst li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-muted); }
.werelden-lijst .color-swatch { flex: 0 0 16px; margin-top: 4px; }
.werelden-lijst b { color: var(--text-dark); }

.color-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .color-grid--3 { grid-template-columns: repeat(2, 1fr); } }