/*
Theme Name: Sweet Chaos
Theme URI: https://sweetchaos.nl
Description: Child theme of Kadence for Sweet Chaos Dessert Bar — Bergen op Zoom. 1:1 rebuild of the Canva design with the WordPress block editor.
Author: Ricardo van der Spoel
Template: kadence
Version: 2.0.0
Text Domain: sweet-chaos
*/

/* =========================================================
   FONTS — ⚠ LOCAL PREVIEW ONLY
   These .woff files are Canva's OWN fonts, extracted from the client's
   Canva design so the local mockup matches the original 1:1. Canva fonts
   are licensed for use *inside Canva* and MUST NOT be self-hosted on a
   production domain. Before go-live: replace with licensed equivalents.
   ========================================================= */
/* Families exact zoals de design-JSON ze benoemt: Quicksand (koppen+body),
   Caveat (script), Now, Nourd, Montserrat. */
@font-face { font-family: "SC Quicksand"; src: url("assets/fonts/quicksand-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SC Quicksand"; src: url("assets/fonts/quicksand-600.woff") format("woff"); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: "SC Quicksand"; src: url("assets/fonts/quicksand-700.woff") format("woff"); font-weight: 700 900; font-style: normal; font-display: swap; }
@font-face { font-family: "SC Caveat"; src: url("assets/fonts/caveat-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SC Caveat"; src: url("assets/fonts/caveat-700.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "SC Now"; src: url("assets/fonts/now-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SC Now"; src: url("assets/fonts/now-500.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "SC Now"; src: url("assets/fonts/now-700.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "SC Now"; src: url("assets/fonts/now-900.woff") format("woff"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "SC Nourd"; src: url("assets/fonts/nourd-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SC Nourd"; src: url("assets/fonts/nourd-700.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "SC Montserrat"; src: url("assets/fonts/montserrat-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SC Montserrat"; src: url("assets/fonts/montserrat-700.woff") format("woff"); font-weight: 500 800; font-style: normal; font-display: swap; }

/* =========================================================
   Tokens
   ========================================================= */
:root {
  --sc-pink:      #F45A77;
  --sc-pink-soft: #E9A6B6;
  --sc-rose:      #F3D3DA;
  --sc-burg:      #461720;
  --sc-sage:      #97A87E;
  --sc-sage-deep: #7E8C69;
  --sc-olive:     #5E6B47;
  --sc-cream:     #F8E8E0;
  --sc-cream-card:#F3ECD8;
  --sc-white-warm:#FBF6EF;
  --sc-ink:       #2A1418;
  --sc-shadow: 0 18px 50px rgba(70,23,32,.14);
  --sc-display: "SC Now", "Poppins", Impact, sans-serif;
  --sc-script:  "SC Caveat", "Caveat", cursive;
  --sc-bodyf:   "SC Quicksand", "Quicksand", -apple-system, sans-serif;
  --sc-mont:    "SC Montserrat", "Montserrat", sans-serif;
  --sc-nourd:   "SC Nourd", "SC Quicksand", sans-serif;
}

body { -webkit-font-smoothing: antialiased; color: var(--sc-ink); font-family: var(--sc-bodyf); }
body, .entry-content p { font-family: var(--sc-bodyf); }

/* Full-bleed sections stack seamlessly — no white slivers between blocks */
.entry-content > .wp-block-group.alignfull { margin-top: 0 !important; margin-bottom: 0 !important; }

/* =========================================================
   CANVAS-LAYOUT zoals Canva: zijmarge | content (max 1630px) | zijmarge
   De pagina-achtergrond blijft aan weerszijden zichtbaar; secties
   bleeden dus NIET naar de viewport-randen.
   ========================================================= */
body.home { background: #E8C7CD; }
/* Canvas gedraagt zich als het origineel: max 1000px, daarbuiten groeien de
   gutters. container-type maakt cqw-units mogelijk: 1cqw = 1% canvasbreedte,
   zodat ALLES proportioneel meeschaalt zoals Canva dat doet. */
body.home .site-container, body.home .content-container, body.home .site-main { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
body.home .entry-content { max-width: 66.35vw; margin-left: auto !important; margin-right: auto !important; container-type: inline-size; }
@media (max-width: 1024px) { body.home .entry-content { max-width: 94vw; } }
body.home .entry-content > .wp-block-group.alignfull,
body.home .entry-content > section.wp-block-group.alignfull {
  width: 100% !important; max-width: 100% !important;
  margin-left: 0 !important; margin-right: 0 !important;
}

/* Typography helpers ------------------------------------------------------ */
/* Sinds de font-ontdekking is Quicksand Bold dé kopstijl van het ontwerp —
   subpagina-koppen (.sc-display) gaan daarin mee. */
.sc-display, .sc-display.wp-block-heading {
  font-family: var(--sc-bodyf) !important; font-weight: 700 !important;
  text-transform: uppercase; color: #7E8C69;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: .015em;
  line-height: .95;
}
.sc-script { font-family: var(--sc-script) !important; }

/* Pills ------------------------------------------------------------------- */
.sc-pill {
  display: inline-block; padding: .5em 1.5em; border-radius: 999px;
  background: var(--sc-pink); color: #fff !important;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .74rem;
}
.sc-pill--soft  { background: var(--sc-pink-soft); color: var(--sc-burg) !important; }
.sc-pill--ghost { background: rgba(255,255,255,.75); color: var(--sc-burg) !important; }
.sc-pill--outline { background: transparent; border: 1.5px solid rgba(248,232,224,.85); color: var(--sc-cream) !important; font-weight: 500; letter-spacing: .22em; }
.sc-pill.has-text-align-center { display: block; width: fit-content; margin-left: auto; margin-right: auto; }

/* Buttons ------------------------------------------------------------------ */
.wp-block-button__link, .sc-btn {
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  border-radius: 999px; font-weight: 700; font-family: var(--sc-bodyf);
}
.sc-btn { display: inline-block; text-decoration: none; padding: .85em 2em; background: var(--sc-pink); color: #fff !important; }
.sc-btn--outline { background: transparent; color: var(--sc-burg) !important; border: 2px solid var(--sc-burg); }
.sc-btn:hover, .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(244,90,119,.35); }
.sc-btn--outline:hover { background: var(--sc-burg); color: #fff !important; }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--sc-burg); border: 2px solid var(--sc-burg); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--sc-burg); color: #fff; }

/* =========================================================
   Header / navigation — transparent over the hero (like Canva)
   ========================================================= */
.site-branding .site-title { display: none !important; }
.site-header-item .site-branding img, .site-logo img, img.custom-logo { max-height: 60px; width: auto; }

/* Transparent header pages: nav floats over the rose hero */
.transparent-header #masthead { background: transparent; }
.transparent-header #masthead .site-header-row, .transparent-header #masthead .site-main-header-wrap { background: transparent !important; border: 0; box-shadow: none; }

/* Home: hide the small header logo (the big logo lives in the hero) + center
   the nav — desktop only; de mobiele header (hamburger) volgt Kadence-default
   met de knop rechts. */
@media (min-width: 1025px) {
  body.home #masthead .site-branding { display: none; }
  body.home #masthead .site-main-header-inner-wrap { display: flex !important; justify-content: center; align-items: center; }
  body.home #masthead .site-header-main-section-left { display: none; }
  /* Origineel: het nav-cluster (items + pill) staat iets links van het
     midden — center op 45.9cqw i.p.v. 50 (JSON: nav x=25.2, pill tot 66.6) */
  body.home #masthead .main-navigation .primary-menu-container > ul { transform: translateX(-2.74vw); }
}

/* Menu link styling (all pages) — exact origineel: Quicksand Bold 24.76
   design-px (1.2vw op 1366-canvas), olijf #7E8C69, nooit blauw */
#masthead .main-navigation a, #masthead .main-navigation a:visited,
.main-navigation .primary-menu-container > ul > li > a,
.main-navigation ul li a {
  font-family: var(--sc-bodyf); font-weight: 700; color: #7E8C69 !important;
  font-size: clamp(15px, 1.203vw, 27px);
}
.main-navigation .primary-menu-container > ul > li > a { padding-left: .78vw; padding-right: .78vw; }
.main-navigation ul li a:hover { color: var(--sc-pink) !important; }
/* Laatste item (Contact) als mauve-roze pill — kleuren exact uit de
   design-JSON: pill #E199AE, tekst donker bordeaux #461720.
   (#masthead in de selector: moet de olijf-regel hierboven verslaan) */
#masthead .main-navigation .primary-menu-container > ul > li:last-child > a,
.main-navigation .primary-menu-container > ul > li:last-child > a {
  background: #E199AE; color: #461720 !important; border-radius: 999px;
  padding: .85em 1.5em !important; letter-spacing: .1em; text-transform: uppercase;
  font-size: clamp(11px, .813vw, 18px); font-weight: 700 !important;
}
#masthead .main-navigation .primary-menu-container > ul > li:last-child > a:hover,
.main-navigation .primary-menu-container > ul > li:last-child > a:hover { background: var(--sc-pink); color: #fff !important; }

/* =========================================================
   HERO — layered Canva composition
   ========================================================= */
/* Hero is een proportioneel canvas: hoogte = 57.5% van de canvasbreedte,
   alle elementen op absolute cqw-coördinaten (gekalibreerd op het origineel). */
.sc-hero {
  position: relative; overflow: hidden;
  height: 57.5cqw; min-height: 0;
  padding: 0 !important;
  /* hero-achtergrond en zijbanden: exacte sectiekleur uit de design-JSON */
  background: #F1C8CB !important;
  box-shadow: 0 0 0 100vmax #F1C8CB;
  clip-path: inset(0 -100vmax);
}
.sc-hero-wrap { position: static; padding: 0; z-index: 2; }
.sc-hero-copy { position: static; max-width: none; }
.sc-hero-copy > * { position: absolute; z-index: 2; }
/* Alle posities/maten exact uit de Canva design-JSON (canvas 1366 → cqw). */
.sc-hero-logo { left: 1.68cqw; top: -0.61cqw; width: 20.54cqw !important; height: auto; max-width: none !important; }
.sc-hero-title { left: 0; top: 0; width: 100%; height: 100%; margin: 0 !important; }
/* Hero-woorden: Quicksand Bold + Canva "lift"-effect (DRIP/CHAOS 0.43, CRUNCH 0.86).
   Tops/line-height gemeten op de originele DOM-render (canvas 1366 = 1:1 px). */
.sc-hero-title span { position: absolute; display: block; font-family: var(--sc-bodyf) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0; line-height: 1.4; white-space: nowrap; }
.sc-w-drip   { left: 13.45cqw; top: 18.55cqw; color: #7E8C69; font-size: 6.44cqw;
  text-shadow: 0 .5cqw 1cqw rgba(0,0,0,.32); }
.sc-w-crunch { left: 17.26cqw; top: 23.80cqw; width: 42.25cqw; text-align: center; color: #fff; font-size: 9.52cqw;
  text-shadow: 0 .7cqw 1.6cqw rgba(0,0,0,.38); }
.sc-w-chaos  { left: 11.96cqw; top: 33.10cqw; color: #7E8C69; font-size: 6.44cqw;
  text-shadow: 0 .5cqw 1cqw rgba(0,0,0,.32); }
.sc-hero-script, .entry-content p.sc-hero-script {
  left: 19cqw; top: 39.32cqw; width: 24cqw; text-align: center;
  font-family: var(--sc-script) !important; color: var(--sc-pink);
  font-size: 2.59cqw; line-height: 1.25; margin: 0; white-space: nowrap;
  transform: rotate(-6.66deg);
}
.sc-hero-heart { left: 39.38cqw; top: 35.48cqw; width: 7.74cqw !important; height: auto; z-index: 1; }
.sc-hero-text { left: 12.39cqw; top: 43.77cqw; color: #fff; font-size: 1.18cqw; font-weight: 700; line-height: 1.77; width: 26cqw; margin: 0; }
/* CTA's uit de klantbriefing: Bekijk menu + Route */
.sc-hero-cta { left: 12.39cqw; top: 51.3cqw; display: flex; gap: 1.1cqw; z-index: 2; }
.sc-cta-btn { font-family: var(--sc-bodyf); font-weight: 700; font-size: 1.05cqw; letter-spacing: .1em;
  text-transform: uppercase; border-radius: 999px; padding: .8em 2em; text-decoration: none; display: inline-block; }
.sc-cta-primary, .sc-cta-primary:visited { background: #F45A77; color: #fff !important;
  box-shadow: 0 .6cqw 1.6cqw rgba(244,90,119,.35); }
.sc-cta-primary:hover { background: #E4486B; color: #fff !important; }
.sc-cta-outline, .sc-cta-outline:visited { border: .16cqw solid #fff; color: #fff !important; }
.sc-cta-outline:hover { background: rgba(255,255,255,.18); color: #fff !important; }

/* Stage: gelaagde compositie — exacte lagen uit de design-JSON */
.sc-hero-stage { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sc-hero-stage .sc-layer { position: absolute; height: auto; max-width: none !important; }
.sc-ghost  { left: 49.61cqw; top: -9.35cqw; width: 50.39cqw; height: 66.33cqw; z-index: 0; }
.sc-splash { left: 56.29cqw; top: -8.86cqw; width: 42.64cqw; height: 54.74cqw; z-index: 1; }
.sc-linedrip { left: 17.62cqw; top: 46.51cqw; width: .86cqw; height: 12.78cqw; z-index: 1; }
.sc-cup    { left: 63.06cqw; top: -8.03cqw; width: 32.02cqw !important; height: 60.56cqw; z-index: 2; }
.sc-badge  { left: 67.05cqw; top: 22.74cqw; width: 22.55cqw !important; z-index: 3; }
/* Strooisel: aardbei + 11 grond-nootjes + 5 nootjes op/naast de cup (exact origineel) */
.sc-straw { left: 51.42cqw; top: 44.19cqw; width: 12.67cqw; z-index: 4; }
.sc-n1  { left: 61.69cqw; top: 47.74cqw; width: 6.82cqw;  z-index: 4; }
.sc-n2  { left: 64.62cqw; top: 51.08cqw; width: 4.87cqw;  z-index: 4; }
.sc-n3  { left: 67.50cqw; top: 51.90cqw; width: 5.85cqw;  z-index: 4; }
.sc-n4  { left: 72.37cqw; top: 50.25cqw; width: 4.87cqw;  z-index: 4; }
.sc-n5  { left: 82.41cqw; top: 50.83cqw; width: 4.92cqw;  z-index: 4; }
.sc-n6  { left: 86.31cqw; top: 47.49cqw; width: 11.69cqw; z-index: 4; }
.sc-n7  { left: 48.15cqw; top: 53.55cqw; width: 2.92cqw;  z-index: 4; }
.sc-n8  { left: 56.82cqw; top: 52.73cqw; width: 3.94cqw;  z-index: 4; }
.sc-n9  { left: 59.75cqw; top: 51.90cqw; width: 3.94cqw;  z-index: 4; }
.sc-n10 { left: 62.67cqw; top: 52.73cqw; width: 3.90cqw;  z-index: 4; }
.sc-n11 { left: 72.76cqw; top: 54.13cqw; width: 3.90cqw;  z-index: 4; }
.sc-c1  { left: 56.82cqw; top: 27.85cqw; width: 2.97cqw;  z-index: 4; }
.sc-c2  { left: 60.72cqw; top: 34.50cqw; width: 2.00cqw;  z-index: 4; }
.sc-c3  { left: 63.64cqw; top: 39.44cqw; width: 2.92cqw;  z-index: 4; }
.sc-c4  { left: 61.69cqw; top: 42.79cqw; width: 5.85cqw;  z-index: 4; }
.sc-c5  { left: 90.74cqw; top: 27.03cqw; width: 2.97cqw;  z-index: 4; }

/* =========================================================
   Entrance-animaties — Canva-achtig: elementen POPPEN binnen met
   bounce (overshoot → terugveren), snel, in chaotische volgorde.
   ========================================================= */
/* Veer-effect: doorschieten → terugveren → natrillen → stil (dubbele bounce) */
@keyframes sc-pop {          /* badge & accenten: schaal-bounce */
  0%   { opacity: 0; transform: scale(.2) rotate(-10deg); }
  45%  { opacity: 1; transform: scale(1.18) rotate(3deg); }
  62%  { transform: scale(.92) rotate(-1.5deg); }
  78%  { transform: scale(1.07); }
  90%  { transform: scale(.98); }
  100% { opacity: 1; transform: none; }
}
@keyframes sc-drop {         /* strooisel: valt neer en stuitert twee keer */
  0%   { opacity: 0; transform: translateY(-34px) scale(.4) rotate(-16deg); }
  45%  { opacity: 1; transform: translateY(7px) scale(1.12) rotate(4deg); }
  62%  { transform: translateY(-6px) scale(.95) rotate(-2deg); }
  78%  { transform: translateY(3px) scale(1.04); }
  90%  { transform: translateY(-1px) scale(.99); }
  100% { opacity: 1; transform: none; }
}
@keyframes sc-rise {         /* tekst & reveals: bounce omhoog met natrilling */
  0%   { opacity: 0; transform: translateY(44px) scale(.94); }
  45%  { opacity: 1; transform: translateY(-11px) scale(1.04); }
  62%  { transform: translateY(6px) scale(.985); }
  78%  { transform: translateY(-3px) scale(1.01); }
  90%  { transform: translateY(1px); }
  100% { opacity: 1; transform: none; }
}
@keyframes sc-rise-script {  /* script houdt zijn schuine stand vast */
  0%   { opacity: 0; transform: translateY(44px) rotate(-6.66deg); }
  45%  { opacity: 1; transform: translateY(-11px) rotate(-6.66deg); }
  62%  { transform: translateY(6px) rotate(-6.66deg); }
  78%  { transform: translateY(-3px) rotate(-6.66deg); }
  100% { opacity: 1; transform: rotate(-6.66deg); }
}
@keyframes sc-layer-in {     /* grote fotolagen: pop met naveer */
  0%   { opacity: 0; transform: scale(.88) translateY(16px); }
  50%  { opacity: 1; transform: scale(1.045) translateY(-5px); }
  70%  { transform: scale(.98) translateY(2px); }
  85%  { transform: scale(1.012); }
  100% { opacity: 1; transform: none; }
}

/* Load: alles start onzichtbaar, popt binnen zodra sc-loaded er is */
.sc-js .sc-hero-stage .sc-layer, .sc-js .sc-hero-copy > * { opacity: 0; }
/* De beker komt als een van de eersten; ghost/splash er direct omheen */
.sc-loaded .sc-hero-stage .sc-cup      { animation: sc-layer-in 0.35s ease 0.03s both; }
.sc-loaded .sc-hero-stage .sc-ghost    { animation: sc-layer-in 0.325s ease 0s   both; }
.sc-loaded .sc-hero-stage .sc-splash   { animation: sc-layer-in 0.325s ease 0.11s both; }
.sc-loaded .sc-hero-stage .sc-linedrip { animation: sc-pop 0.3s ease 0.2s both; }
.sc-loaded .sc-hero-stage .sc-badge    { animation: sc-pop 0.325s ease 0.24s both; }
.sc-loaded .sc-hero-stage .sc-nut      { animation: sc-drop 0.35s ease both; }
/* Strooisel in twee golven: helft snel & chaotisch vooraan... */
.sc-loaded .sc-hero-stage .sc-n8  { animation-delay: 0.08s; }
.sc-loaded .sc-hero-stage .sc-straw { animation-delay: 0.09s; }
.sc-loaded .sc-hero-stage .sc-n6  { animation-delay: 0.1s; }
.sc-loaded .sc-hero-stage .sc-n2  { animation-delay: 0.11s; }
.sc-loaded .sc-hero-stage .sc-n10 { animation-delay: 0.13s; }
.sc-loaded .sc-hero-stage .sc-n4  { animation-delay: 0.15s; }
.sc-loaded .sc-hero-stage .sc-n9  { animation-delay: 0.16s; }
.sc-loaded .sc-hero-stage .sc-c2  { animation-delay: 0.17s; }
/* ...andere helft netjes achter elkaar aan het einde */
.sc-loaded .sc-hero-stage .sc-n1  { animation-delay: 0.39s; }
.sc-loaded .sc-hero-stage .sc-n3  { animation-delay: 0.43s; }
.sc-loaded .sc-hero-stage .sc-n5  { animation-delay: 0.47s; }
.sc-loaded .sc-hero-stage .sc-n7  { animation-delay: 0.51s; }
.sc-loaded .sc-hero-stage .sc-n11 { animation-delay: 0.55s; }
.sc-loaded .sc-hero-stage .sc-c1  { animation-delay: 0.59s; }
.sc-loaded .sc-hero-stage .sc-c3  { animation-delay: 0.63s; }
.sc-loaded .sc-hero-stage .sc-c4  { animation-delay: 0.67s; }
.sc-loaded .sc-hero-stage .sc-c5  { animation-delay: 0.71s; }

/* Hero-copy: bounce omhoog, gemixte volgorde */
.sc-loaded .sc-hero-copy > * { animation: sc-rise 0.35s ease both; }
.sc-loaded .sc-hero-copy > .sc-hero-logo   { animation-delay: 0.025s; }
.sc-loaded .sc-hero-copy > .sc-hero-title  { animation-delay: 0.08s; }
.sc-loaded .sc-hero-copy > .sc-hero-text   { animation-delay: 0.17s; }
.sc-loaded .sc-hero-copy > .sc-hero-cta    { animation-delay: 0.25s; }
.sc-loaded .sc-hero-copy > .sc-hero-script { animation-name: sc-rise-script; animation-delay: 0.22s; }
.sc-loaded .sc-hero-copy > .sc-hero-heart  { animation-name: sc-pop; animation-delay: 0.28s; }

/* =========================================================
   USP band — inset white card with splashes (like Canva)
   ========================================================= */
/* USP-band: 9cqw hoog, canvasbreed créme (#FDF1EB origineel); de zijbanden
   krijgen — net als elke sectie — een gedempte tint van de sectiekleur. */
.sc-usp {
  /* padding op álle kanten weg: de band loopt exact van canvasrand tot
     canvasrand (has-background geeft anders 30px horizontale inset) */
  padding: 0 !important;
  background: transparent !important;
}
.sc-usp-band {
  position: relative; background: #FDF1EB;
  width: 100%; height: 9cqw; margin: 0 auto;
  padding: 0 21.3cqw 0 17.6cqw;
  overflow: hidden;
  display: flex; align-items: center;
}
.sc-usp-splash { position: absolute; width: auto; }
.sc-usp-splash--l { left: 0; top: 26%; height: 73%; }
.sc-usp-splash--r { right: 0; top: 4.5%; height: 93%; }
.sc-usp-grid { display: flex; width: 100%; align-items: flex-start; }
.sc-usp-item { flex: 1; text-align: center; padding: 0 1cqw; }
.sc-usp-item + .sc-usp-item { border-left: .15cqw dotted rgba(228,122,140,.55); }
.sc-usp-item img { width: 2.2cqw; height: auto; margin: 0 auto .3cqw; display: block; }
.sc-usp-item h3 { font-family: var(--sc-bodyf); font-size: .78cqw; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7a6a5e; margin: 0 0 .25cqw; line-height: 1.25; }
.sc-usp-item p { font-size: .72cqw; line-height: 1.35; color: #8a7a70; margin: 0; }

/* =========================================================
   BUILT IN LAYERS — sage section
   ========================================================= */
/* Layers = proportioneel canvas-stage, ALLES exact uit de design-JSON.
   De sectie heeft een fotografische achtergrond (lay-bg) op het canvas;
   de zijbanden blijven #95A67F. */
.sc-layers { position: relative; overflow: hidden; padding: 0 !important; background: #72785D !important; }
.sc-lay-stage { position: relative; height: 52.23cqw; }
.sc-lay-stage .sl { position: absolute; margin: 0 !important; max-width: none !important; height: auto; }
.sl-bg       { left: -1.32cqw; top: 0;         width: 100.87cqw; height: 52.07cqw; z-index: 0; }
.sl-splash-l { left: -.87cqw;  top: 5.65cqw;   width: 13.67cqw; z-index: 1; }
.sl-waffle   { left: 2.50cqw;  top: .22cqw;    width: 34.14cqw; z-index: 2; }
.sl-toppings { left: 26.34cqw; top: -1.94cqw;  width: 22.78cqw; z-index: 3; }
.sl-crumb1   { left: 1.37cqw;  top: 47.14cqw;  width: 7.99cqw;  z-index: 3; }
.sl-crumb2   { left: 7.69cqw;  top: 49.09cqw;  width: 4.61cqw;  z-index: 3; }
.sl-crumb3   { left: 29.77cqw; top: 43.87cqw;  width: 6.86cqw;  z-index: 3; }
.sl-badge    { left: 15.03cqw; top: 34.51cqw;  width: 17.64cqw; z-index: 3; }
.sl-pillimg  { left: 55.92cqw; top: 2.38cqw;   width: 17.04cqw; z-index: 2; }
/* Tekst krijgt exact het pill-vak (afbeelding is 288x60 → 3.55cqw hoog)
   met line-height = vakhoogte: perfect verticaal gecentreerd */
.sl-pilltext { left: 55.92cqw; top: 2.38cqw;   width: 17.04cqw; line-height: 3.55cqw; text-align: center; z-index: 3;
  font-family: var(--sc-bodyf); font-weight: 700; font-size: 1.02cqw; letter-spacing: .18em; text-transform: uppercase; color: #F8E8E0; }
.sl-heart-sm { left: 62.73cqw; top: 5.65cqw;   width: 2.31cqw;  z-index: 3; }
.sl-sparkle  { left: 82.60cqw; top: 5.00cqw;   width: 3.43cqw;  z-index: 3; }
.sl-title    { left: 0; top: 0; width: 100%; height: 100%; margin: 0 !important; z-index: 2; pointer-events: none; }
.sl-title span { position: absolute; display: block; text-align: center; text-transform: uppercase;
  font-family: var(--sc-bodyf) !important; line-height: 1.4; letter-spacing: 0; }
.sl-title .b1 { left: 48.47cqw; top: 6.35cqw; width: 35.85cqw; font-weight: 500; font-size: 7.88cqw; color: #F8E8E0; z-index: 2; }
.sl-title .b2 { left: 47.72cqw; top: 9.58cqw; width: 35.85cqw; font-weight: 700; font-size: 9.08cqw; color: #E47A8C; z-index: 1; }
.sl-heart-doodle { left: 73.46cqw; top: 19.68cqw; width: 16.25cqw; z-index: 2; }
.sl-card       { left: 35.45cqw; top: 23.10cqw; width: 17.10cqw; z-index: 3; }
.sl-card-title { left: 38.20cqw; top: 25.52cqw; width: 12.72cqw; margin: 0 !important; z-index: 4; white-space: nowrap;
  font-family: var(--sc-script) !important; color: #E47A8C; font-size: 2.63cqw; line-height: 1.1; }
.sl-line1      { left: 37.70cqw; top: 27.48cqw; width: 13.73cqw; z-index: 4; }
.sl-card-text  { left: 38.20cqw; top: 30.19cqw; width: 13.4cqw; margin: 0 !important; z-index: 4;
  font-family: var(--sc-nourd); font-weight: 700; color: #625E44; font-size: 1.69cqw; line-height: 1.45; }
.sl-line2      { left: 37.70cqw; top: 38.39cqw; width: 9.17cqw; z-index: 4; }
.sl-ic1a { left: 55.30cqw; top: 31.18cqw; width: 4.61cqw; z-index: 2; }
.sl-ic1b { left: 56.48cqw; top: 31.18cqw; width: 2.31cqw; z-index: 3; }
.sl-sep1 { left: 55.30cqw; top: 35.56cqw; width: 26.21cqw; z-index: 2; }
.sl-ic2a { left: 55.30cqw; top: 35.56cqw; width: 4.61cqw; z-index: 2; }
.sl-ic2b { left: 55.30cqw; top: 36.67cqw; width: 4.61cqw; z-index: 3; }
.sl-sep2 { left: 55.30cqw; top: 40.30cqw; width: 26.21cqw; z-index: 2; }
.sl-ic3a { left: 55.30cqw; top: 41.04cqw; width: 4.61cqw; z-index: 2; }
.sl-ic3b { left: 56.48cqw; top: 41.04cqw; width: 2.31cqw; z-index: 3; }
.sl-sep3 { left: 55.30cqw; top: 45.00cqw; width: 26.21cqw; z-index: 2; }
.sl-ic4a { left: 55.30cqw; top: 45.36cqw; width: 4.61cqw; z-index: 2; }
.sl-ic4b { left: 56.48cqw; top: 46.47cqw; width: 2.31cqw; z-index: 3; }
.sl-vline { left: 50.24cqw; top: 44.92cqw; width: 1.18cqw; z-index: 2; }
.sl-li { left: 61.21cqw; width: 21cqw; z-index: 2; font-family: var(--sc-bodyf); color: #F8E8E0; }
.sl-li b    { display: block; font-size: 1.20cqw; font-weight: 700; line-height: 1.35; }
.sl-li span { display: block; font-size: .88cqw; margin-top: .5cqw; line-height: 1.3; opacity: .92; }
.sl-li1 { top: 31.90cqw; } .sl-li2 { top: 36.60cqw; } .sl-li3 { top: 41.40cqw; } .sl-li4 { top: 46.45cqw; }
/* Sectiekoppen gebruiken Canva Sans bold (rond, letterspaced) — NIET het
   zware display-font; dat is alleen voor DRIP./CRUNCH./CHAOS. en accenten. */
.sc-cups-title, .sc-smaak-title {
  font-family: var(--sc-bodyf) !important; font-weight: 700 !important;
}

/* =========================================================
   JOUW CHAOS — sage with rose drips + polaroid cards
   ========================================================= */
/* Jouw Chaos-kop: canvas-stage, exact uit de design-JSON. De dripband is
   de échte Canva-afbeelding (roze vulvorm + witte penseelstreken). */
.sc-jouw { position: relative; overflow: hidden; padding: 0 !important; background: #9CAD8C !important; }
.sc-jc-stage { position: relative; height: 54.54cqw; }
.sc-jc-stage .sj { position: absolute; margin: 0 !important; max-width: none !important; height: auto; }
.sj-drip    { left: -1.40cqw; top: 0; width: 102.68cqw; height: 23.28cqw; z-index: 0; opacity: .8; }
.sj-heart   { left: 36.94cqw; top: 3.17cqw; width: 6.62cqw; z-index: 2; }
.sj-strokes { left: 75.37cqw; top: 5.25cqw; width: 5.55cqw; z-index: 2; }
.sj-ontdek  { left: 21.20cqw; top: 3.87cqw; width: 15.20cqw; z-index: 2; text-align: center;
  font-family: var(--sc-script) !important; font-size: 5.48cqw; line-height: 1.19; color: #F1F0E4; }
.sj-title { left: 0; top: 0; width: 100%; height: 100%; margin: 0 !important; z-index: 2; pointer-events: none; }
.sj-title span { position: absolute; display: block; text-align: center; text-transform: uppercase;
  font-family: var(--sc-bodyf) !important; font-weight: 700 !important; line-height: 1.4; letter-spacing: 0;
  text-shadow: 0 .5cqw 1.2cqw rgba(0,0,0,.22); }
.sj-title .p1 { left: 21.45cqw; top: 10.44cqw; width: 27.02cqw; font-size: 7.54cqw; color: #F1A8B0; }
.sj-title .p2 { left: 45.14cqw; top: 10.63cqw; width: 29.55cqw; font-size: 7.27cqw; color: #F1F0E4; }
.sj-sub { left: 23.88cqw; top: 20.45cqw; width: 48.12cqw; z-index: 2; text-align: center;
  font-family: var(--sc-bodyf); font-weight: 700; font-size: 1.61cqw; line-height: 1.62; color: #625E44; }
.sj-ic1 { left: 18.20cqw; top: 27.18cqw; width: 6.68cqw; z-index: 2; }
.sj-ic2 { left: 34.70cqw; top: 27.18cqw; width: 7.80cqw; z-index: 2; }
.sj-ic3 { left: 53.38cqw; top: 27.18cqw; width: 5.55cqw; z-index: 2; }
.sj-ic4 { left: 68.81cqw; top: 27.18cqw; width: 7.74cqw; z-index: 2; }
.sj-sep1 { left: 28.13cqw; top: 28.19cqw; width: 1.12cqw; z-index: 2; }
.sj-sep2 { left: 47.94cqw; top: 28.19cqw; width: 1.12cqw; z-index: 2; }
.sj-sep3 { left: 64.38cqw; top: 28.19cqw; width: 1.18cqw; z-index: 2; }
.sj-lab { z-index: 2; text-align: center; white-space: nowrap; font-family: var(--sc-bodyf);
  font-size: 1.33cqw; letter-spacing: .14em; text-transform: uppercase; color: #F1F0E4; }
.sj-lab1 { left: 17.97cqw; top: 34.80cqw; width: 7.11cqw; }
.sj-lab2 { left: 31.47cqw; top: 34.80cqw; width: 14.21cqw; }
.sj-lab3 { left: 50.75cqw; top: 34.80cqw; width: 11.19cqw; }
.sj-lab4 { left: 67.43cqw; top: 34.80cqw; width: 10.83cqw; }
.sj-scr { z-index: 2; text-align: center; white-space: nowrap;
  font-family: var(--sc-script) !important; font-size: 1.78cqw; line-height: 1.2; color: #F1F0E4; }
.sj-scr1 { left: 16.42cqw; top: 36.65cqw; width: 10.69cqw; }
.sj-scr2 { left: 31.69cqw; top: 36.60cqw; width: 13.79cqw; }
.sj-scr3 { left: 51.60cqw; top: 36.60cqw; width: 9.22cqw; }
.sj-scr4 { left: 67.21cqw; top: 36.60cqw; width: 11.26cqw; }
.sj-banner  { left: 16.01cqw; top: 41.76cqw; width: 63.84cqw; height: 7.34cqw; z-index: 1; }
.sj-heart-l { left: 18.20cqw; top: 43.84cqw; width: 3.37cqw; z-index: 2; }
.sj-heart-r { left: 74.31cqw; top: 43.84cqw; width: 3.37cqw; z-index: 2; }
.sj-banner-text { left: 19.9cqw; top: 44.10cqw; width: 56cqw; z-index: 2; text-align: center;
  font-family: var(--sc-bodyf); font-weight: 600; font-size: 1.40cqw; line-height: 1.58;
  letter-spacing: .04em; text-transform: uppercase; color: #625E44; white-space: nowrap; }
.sj-banner-text em { font-style: normal; color: #E4708A; }
/* Regelafbreking banner: .brd = desktop, .brm = mobiel */
.sj-banner-text .brm { display: none; }
.sj-banner-text .brd { display: inline; }
.sj-squiggle { left: 39.13cqw; top: 50.12cqw; width: 18.74cqw; z-index: 2; }
/* Kaartengrid onder de stage: rijbreedte 95.3cqw zoals origineel */
.sc-jouw .wp-block-columns { gap: 1.85cqw; padding: 0 2.3cqw; margin-bottom: 0; }
.sc-jc-end { text-align: center; margin: 3.7cqw 0 1.6cqw !important; }
.sc-jc-end img { width: 36.8cqw; height: auto; display: inline-block; }
.sc-frame img { background: #fff; padding: .8cqw; border-radius: .5cqw; box-shadow: 0 1.8cqw 4cqw rgba(40,30,10,.22); display: block; width: 100%; height: auto; transition: transform .22s ease; }
.sc-frame:hover img { transform: translateY(-6px); }

/* =========================================================
   ONS VERHAAL — rose canvas-stage: sage-drips top, badge, boog+mascotte,
   titel/verhaal in vaste rechterkolom (maten uit het origineel)
   ========================================================= */
/* Verhaal = canvas-stage, exact uit de design-JSON: roze canvas #F1C8CB,
   sage drip-afbeelding (met witte streken) hangt van boven binnen. */
.sc-verhaal { position: relative; overflow: hidden; padding: 0 !important; background: #F1C8CB !important; }
.sc-vh-stage { position: relative; height: 71.7cqw; }
.sc-vh-stage .sv { position: absolute; margin: 0 !important; max-width: none !important; height: auto; }
.sv-drip     { left: -8.39cqw; top: -17.69cqw; width: 116.57cqw; height: 45.46cqw; z-index: 1; }
.sv-arch     { left: 5.65cqw;  top: 7.97cqw;  width: 47.11cqw; z-index: 2; }
.sv-mascotte { left: 2.70cqw;  top: 12.19cqw; width: 51.36cqw; z-index: 3; }
.sv-cone     { left: 87.07cqw; top: 51.84cqw; width: 13.79cqw; z-index: 2; }
.sv-logo     { left: 2.37cqw;  top: 1.19cqw;  width: 13.57cqw; z-index: 3; }
.sv-title    { left: 60.13cqw; top: 7.17cqw;  width: 29.99cqw; margin: 0 !important; z-index: 2; text-align: right;
  font-family: var(--sc-bodyf) !important; font-weight: 700 !important; font-size: 4.59cqw; line-height: 1.19; letter-spacing: 0; }
.sv-title .p { color: #E4597C; } .sv-title .g { color: #72785D; }
.sv-line1    { left: 61.87cqw; top: 13.43cqw; width: 24.46cqw; z-index: 2; }
.sv-p { z-index: 2; text-align: center; font-family: var(--sc-bodyf);
  color: #7E8C69; font-size: 1.35cqw; line-height: 1.62; }
.sv-p1 { left: 54.22cqw; top: 17.00cqw; width: 42.99cqw; }
.sv-p2 { left: 66.30cqw; top: 19.21cqw; width: 18.31cqw; color: #F45A77; font-weight: 700; font-size: 1.58cqw; }
.sv-p3 { left: 54.22cqw; top: 23.26cqw; width: 42.08cqw; }
.sv-p4 { left: 56.30cqw; top: 34.97cqw; width: 37.66cqw; }
.sv-p5 { left: 58.64cqw; top: 44.71cqw; width: 33.25cqw; }
.sv-p6 { left: 55.52cqw; top: 50.49cqw; width: 39.48cqw; }
.sv-p strong { color: #F45A77; font-weight: 700; }
.sv-script { left: 52.93cqw; top: 55.26cqw; width: 26.35cqw; margin: 0 !important; z-index: 2; text-align: center;
  font-family: var(--sc-script) !important; font-size: 4.82cqw; line-height: 1.19; color: #F46B7C; }
.sv-heart  { left: 81.42cqw; top: 53.77cqw; width: 4.91cqw; z-index: 2; }
.sv-mtic   { left: 54.25cqw; top: 61.37cqw; width: 38.20cqw; margin: 0 !important; z-index: 2; text-align: center;
  font-family: var(--sc-bodyf); font-size: 1.99cqw; color: #7E8C69; }
.sv-line2  { left: 57.05cqw; top: 64.29cqw; width: 27.70cqw; z-index: 2; }

/* =========================================================
   VAN MINI TOT OVERLOADED — wit, cup-trio
   ========================================================= */
/* Van Mini tot Overloaded = canvas-stage, exact uit de design-JSON.
   Dripband bovenaan is de echte Canva-sprite, roze getint + witte streken. */
.sc-cups { position: relative; overflow: hidden; padding: 0 !important; background: #F6ECE9 !important; }
.sc-mc-stage { position: relative; height: 77.2cqw; }
.sc-mc-stage .mc { position: absolute; margin: 0 !important; max-width: none !important; height: auto; }
/* Kaart-vlakken en extra iconen bestaan alleen in de mobiele layout */
.mc-card, .mk-card, .mk-uic { display: none; }
.mc-drip      { left: -1.31cqw; top: -2.09cqw; width: 104.86cqw; height: 23.77cqw; z-index: 0; }
.mc-heart-top { left: 48.33cqw; top: 7.72cqw;  width: 2.98cqw; z-index: 2; }
.mc-title { left: 0; top: 0; width: 100%; height: 100%; margin: 0 !important; z-index: 2; pointer-events: none; }
.mc-title span { position: absolute; display: block; text-align: center; text-transform: uppercase;
  font-family: var(--sc-bodyf) !important; font-weight: 700 !important; line-height: 1.4; letter-spacing: 0; }
.mc-title .g { left: 1.04cqw;  top: 10.66cqw; width: 50.55cqw; font-size: 6.69cqw; color: #7E8C69;
  transform: rotate(-2deg); }
.mc-title .p { left: 51.31cqw; top: 9.86cqw;  width: 50.00cqw; font-size: 6.16cqw; color: #F46B7C; }
.mc-sub { left: 24.18cqw; top: 22.39cqw; width: 48.31cqw; z-index: 2; text-align: center;
  font-family: var(--sc-bodyf); font-weight: 600; font-size: 1.81cqw; line-height: 1.62; color: #7E8C69; }
.mc-strokes { left: 71.27cqw; top: 16.51cqw; width: 5.74cqw; z-index: 2; }
.mc-meest-pill { left: 37.76cqw; top: 29.19cqw; width: 19.18cqw; z-index: 1; }
.mc-meest-txt  { left: 37.76cqw; top: 30.37cqw; width: 19.18cqw; z-index: 2; text-align: center;
  font-family: var(--sc-bodyf); font-weight: 700; font-size: 1.17cqw; color: #fff; }
.mc-cup-mini   { left: 7.72cqw;  top: 41.66cqw; width: 15.87cqw; z-index: 1; }
.mc-mini-badge { left: 11.50cqw; top: 48.36cqw; width: 7.57cqw;  z-index: 2; }
.mc-cup-loaded { left: 38.28cqw; top: 34.31cqw; width: 18.13cqw; z-index: 1; }
.mc-cup-over   { left: 69.58cqw; top: 27.18cqw; width: 19.28cqw; z-index: 1; }
.mc-sep1 { left: 31.17cqw; top: 37.42cqw; width: 1.48cqw; height: 36.96cqw; z-index: 1; }
.mc-sep2 { left: 62.46cqw; top: 37.42cqw; width: 1.48cqw; height: 36.96cqw; z-index: 1; }
.mc-pill1 { left: 6.71cqw;  top: 57.53cqw; width: 16.38cqw; z-index: 1; }
.mc-hrt1  { left: 21.12cqw; top: 55.44cqw; width: 4.12cqw;  z-index: 2; }
.mc-pill2 { left: 36.60cqw; top: 57.53cqw; width: 19.18cqw; z-index: 1; }
.mc-hrt2  { left: 54.31cqw; top: 55.82cqw; width: 4.19cqw;  z-index: 2; }
.mc-pill3 { left: 67.89cqw; top: 57.53cqw; width: 23.22cqw; z-index: 1; }
.mc-hrt3  { left: 88.08cqw; top: 55.82cqw; width: 4.19cqw;  z-index: 2; }
.mc-lbl { z-index: 2; text-align: center; white-space: nowrap; text-transform: uppercase;
  font-family: var(--sc-bodyf); font-weight: 700; color: #fff; letter-spacing: .08em; }
.mc-lbl1 { left: 9.67cqw;  top: 58.78cqw; width: 11.10cqw; font-size: 1.58cqw; }
.mc-lbl2 { left: 39.82cqw; top: 58.81cqw; width: 13.72cqw; font-size: 1.54cqw; }
.mc-lbl3 { left: 69.87cqw; top: 58.81cqw; width: 18.40cqw; font-size: 1.50cqw; }
.mc-ml { z-index: 2; text-align: center; white-space: nowrap; text-transform: uppercase;
  font-family: var(--sc-bodyf); font-weight: 700; font-size: 1.36cqw; letter-spacing: .18em; color: #F16C82; }
.mc-ml1 { left: 12.40cqw; top: 61.92cqw; width: 5.42cqw; }
.mc-ml2 { left: 43.92cqw; top: 61.92cqw; width: 5.73cqw; }
.mc-ml3 { left: 76.73cqw; top: 61.92cqw; width: 5.68cqw; }
.mc-line1 { left: 8.03cqw;  top: 62.58cqw; width: 13.74cqw; z-index: 1; }
.mc-line2 { left: 39.32cqw; top: 62.58cqw; width: 13.74cqw; z-index: 1; }
.mc-line3 { left: 72.01cqw; top: 62.58cqw; width: 15.06cqw; z-index: 1; }
.mc-oms { z-index: 2; text-align: center; font-family: var(--sc-bodyf); font-weight: 700;
  font-size: 1.25cqw; line-height: 1.55; color: #625E44; }
.mc-oms1 { left: 9.12cqw;  top: 65.23cqw; width: 11.97cqw; }
.mc-oms2 { left: 39.44cqw; top: 64.44cqw; width: 14.70cqw; }
.mc-oms3 { left: 71.28cqw; top: 65.23cqw; width: 16.22cqw; }
.mc-bol1 { left: 12.15cqw; top: 70.45cqw; width: 5.51cqw;  z-index: 2; }
.mc-bol2 { left: 43.44cqw; top: 70.45cqw; width: 6.91cqw;  z-index: 2; }
.mc-bol3 { left: 73.33cqw; top: 70.45cqw; width: 11.03cqw; z-index: 2; }
.mc-bollen { z-index: 2; text-align: center; white-space: nowrap; text-transform: uppercase;
  font-family: var(--sc-bodyf); font-weight: 700; font-size: 1.13cqw; letter-spacing: .14em; color: #625E44; }
.mc-bollen1 { left: 12.06cqw; top: 74.75cqw; width: 5.88cqw; }
.mc-bollen2 { left: 42.54cqw; top: 74.75cqw; width: 8.27cqw; }
.mc-bollen3 { left: 74.87cqw; top: 74.75cqw; width: 8.27cqw; }

/* =========================================================
   KIES JE SMAAK — crème, scoops op golf + 7 smaken
   ========================================================= */
/* Kies je smaak = canvas-stage, exact uit de design-JSON. Zelfde canvas- én
   bandkleur als Van Mini (#F6ECE9); roomtextuur-foto als achtergrond. */
.sc-smaak { position: relative; overflow: hidden; padding: 0 !important; background: #F6ECE9 !important; }
.sc-ks-stage { position: relative; height: 59.6cqw; }
.sc-ks-stage .ks { position: absolute; margin: 0 !important; max-width: none !important; height: auto; }
.ks-bg       { left: -1.33cqw; top: -1.18cqw; width: 102.66cqw; height: 57.78cqw; z-index: 0; opacity: .5; }
.ks-splash-l { left: -1.33cqw; top: -1.18cqw; width: 22.04cqw; z-index: 1; }
.ks-splash-r { left: 80.52cqw; top: -1.18cqw; width: 20.82cqw; z-index: 1; }
.ks-heart-l  { left: 15.00cqw; top: 3.61cqw;  width: 7.37cqw; z-index: 2; }
.ks-heart-r  { left: 78.71cqw; top: 3.61cqw;  width: 4.91cqw; z-index: 2; }
.ks-title { left: 21.56cqw; top: 3.61cqw; width: 56.98cqw; margin: 0 !important; z-index: 2; text-align: center;
  text-transform: uppercase; font-family: var(--sc-bodyf) !important; font-weight: 700 !important;
  font-size: 6.76cqw; line-height: 1.4; letter-spacing: 0; }
.ks-title .g { color: #7E8C69; } .ks-title .p { color: #F46B7C; }
.ks-sub { left: 29.93cqw; top: 12.15cqw; width: 40.24cqw; z-index: 2; text-align: center;
  font-family: var(--sc-script) !important; font-weight: 700; font-size: 2.0cqw; line-height: 1.2; color: #F46B7C; }
.ks-line     { left: 43.86cqw; top: 18.04cqw; width: 12.28cqw; z-index: 2; }
.ks-heart-sm { left: 54.55cqw; top: 19.92cqw; width: 2.98cqw;  z-index: 3; }
.ks-s1 { left: -1.33cqw; top: 18.04cqw; width: 14.68cqw; z-index: 2; }
.ks-s2 { left: 12.05cqw; top: 19.27cqw; width: 15.96cqw; z-index: 2; }
.ks-s3 { left: 25.50cqw; top: 18.04cqw; width: 17.19cqw; z-index: 2; }
.ks-s4 { left: 40.18cqw; top: 19.27cqw; width: 15.96cqw; z-index: 2; }
.ks-s5 { left: 54.85cqw; top: 19.27cqw; width: 17.19cqw; z-index: 2; }
.ks-s6 { left: 69.53cqw; top: 19.27cqw; width: 17.19cqw; z-index: 2; }
.ks-s7 { left: 84.20cqw; top: 19.27cqw; width: 17.13cqw; z-index: 2; }
.ks-i1 { left: 3.52cqw;  top: 37.32cqw; width: 3.75cqw; z-index: 2; }
.ks-i2 { left: 16.97cqw; top: 37.32cqw; width: 3.75cqw; z-index: 2; }
.ks-i3 { left: 30.41cqw; top: 37.32cqw; width: 3.75cqw; z-index: 2; }
.ks-i4 { left: 46.32cqw; top: 37.32cqw; width: 3.68cqw; z-index: 2; }
.ks-i5 { left: 62.22cqw; top: 37.32cqw; width: 3.68cqw; z-index: 2; }
.ks-i6 { left: 76.83cqw; top: 37.32cqw; width: 3.75cqw; z-index: 2; }
.ks-i7 { left: 91.11cqw; top: 38.32cqw; width: 3.32cqw; z-index: 2; }
.ks-n { z-index: 2; text-align: center; text-transform: uppercase; font-family: var(--sc-bodyf);
  font-weight: 700; font-size: 1.65cqw; line-height: 1.08; color: #7E8C69; }
.ks-n1 { left: 3.21cqw;  top: 40.92cqw; width: 6.05cqw; }
.ks-n2 { left: 15.19cqw; top: 40.93cqw; width: 7.29cqw; font-size: 1.62cqw; }
.ks-n3 { left: 29.08cqw; top: 40.93cqw; width: 8.32cqw; }
.ks-n4 { left: 43.36cqw; top: 40.93cqw; width: 11.53cqw; }
.ks-n5 { left: 61.38cqw; top: 40.93cqw; width: 5.35cqw; }
.ks-n6 { left: 75.16cqw; top: 40.93cqw; width: 7.08cqw; }
.ks-n7 { left: 88.91cqw; top: 41.00cqw; width: 8.46cqw; font-size: 1.62cqw; }
.ks-u1 { left: 3.52cqw;  top: 44.50cqw; width: 2.52cqw; z-index: 2; }
.ks-u2 { left: 15.74cqw; top: 44.50cqw; width: 3.75cqw; z-index: 2; }
.ks-u3 { left: 30.41cqw; top: 44.50cqw; width: 3.75cqw; z-index: 2; }
.ks-u4 { left: 45.09cqw; top: 44.50cqw; width: 4.91cqw; z-index: 2; }
.ks-u5 { left: 62.22cqw; top: 44.50cqw; width: 2.46cqw; z-index: 2; }
.ks-u6 { left: 78.16cqw; top: 44.47cqw; width: 2.46cqw; z-index: 2; }
.ks-u7 { left: 90.92cqw; top: 44.55cqw; width: 4.91cqw; z-index: 2; }
.ks-d { z-index: 2; text-align: center; font-family: var(--sc-bodyf);
  font-weight: 600; font-size: .96cqw; line-height: 1.5; color: #7E8C69; }
.ks-d1 { left: 1.49cqw;  top: 45.56cqw; width: 8.83cqw; }
.ks-d2 { left: 14.42cqw; top: 45.56cqw; width: 8.83cqw; }
.ks-d3 { left: 28.68cqw; top: 45.56cqw; width: 9.65cqw; }
.ks-d4 { left: 43.36cqw; top: 45.56cqw; width: 11.09cqw; }
.ks-d5 { left: 58.83cqw; top: 45.56cqw; width: 10.06cqw; }
.ks-d6 { left: 74.02cqw; top: 45.56cqw; width: 9.14cqw; }
.ks-d7 { left: 88.91cqw; top: 45.56cqw; width: 8.32cqw; }
.ks-outro { left: 29.08cqw; top: 52.23cqw; width: 40.86cqw; z-index: 2; text-align: center;
  font-family: var(--sc-script) !important; font-weight: 700; font-size: 1.83cqw; line-height: 1.2; color: #F46B7C; }

/* =========================================================
   MEER CHAOS, MEER KEUZE — sage productgrid
   ========================================================= */
/* Meer chaos, meer keuze = canvas-stage, exact uit de design-JSON.
   Roze drip-artwork bovenaan (zelfde sprite als cups), 11 producten. */
.sc-keuze { position: relative; overflow: hidden; padding: 0 !important; background: #9CAD8C !important; }
.sc-mk-stage { position: relative; height: 114.9cqw; }
.sc-mk-stage .mk { position: absolute; margin: 0 !important; max-width: none !important; height: auto; }
.mk-drip { left: .12cqw; top: -1.60cqw; width: 100cqw; height: 22.67cqw; z-index: 0; opacity: .8; }
/* Titel: zelfde stijl als de hero-woorden (Quicksand Bold, strak) +
   Canva lift-schaduw (0.4) */
.mk-title { left: 0; top: 0; width: 100%; height: 100%; margin: 0 !important; z-index: 2; pointer-events: none; }
.mk-title span { position: absolute; display: block; text-align: center; text-transform: uppercase;
  font-family: var(--sc-bodyf) !important; font-weight: 700 !important; line-height: 1.4; letter-spacing: .02em;
  text-shadow: 0 .35cqw 1cqw rgba(0,0,0,.28); }
.mk-title .r1 { left: 4.45cqw; top: 9.55cqw;  width: 43.84cqw; font-size: 4.6cqw; color: #fff; }
.mk-title .r2 { left: 4.45cqw; top: 16.75cqw; width: 41.42cqw; font-size: 4.7cqw; color: #F1A8B0; }
.mk-heart1 { left: 44.73cqw; top: 15.56cqw; width: 10.11cqw; z-index: 2; }
.mk-heart2 { left: 25.41cqw; top: 22.55cqw; width: 8.46cqw;  z-index: 2; }
.mk-script { left: 6.46cqw; top: 25.87cqw; width: 19.22cqw; z-index: 2;
  font-family: var(--sc-script) !important; font-size: 1.81cqw; line-height: 1.18; color: #fff; }
.mk-underline { left: 6.02cqw; top: 29.57cqw; width: 11.14cqw; z-index: 2; }
/* USP's: drie blokjes van 3 regels naast elkaar (JSON-posities) */
.mk-usp { z-index: 2; text-align: center; text-transform: uppercase;
  font-family: var(--sc-bodyf); font-size: .96cqw; line-height: 1.5; letter-spacing: .1em; color: #fff; }
.mk-usp1 { left: 43.9cqw; top: 19.07cqw; width: 10cqw; }
.mk-usp2 { left: 52.2cqw; top: 19.07cqw; width: 10cqw; }
.mk-usp3 { left: 61.5cqw; top: 19.07cqw; width: 10cqw; }
.mk-p1  { left: 8.73cqw;  top: 26.29cqw; width: 16.82cqw; z-index: 1; }
.mk-p2  { left: 26.43cqw; top: 35.93cqw; width: 18.42cqw; z-index: 1; }
.mk-p3  { left: 46.46cqw; top: 30.13cqw; width: 14.26cqw; z-index: 1; }
.mk-p4  { left: 60.04cqw; top: 27.51cqw; width: 16.51cqw; z-index: 1; }
.mk-p5  { left: 76.54cqw; top: 30.13cqw; width: 13.46cqw; z-index: 1; }
.mk-p6  { left: 22.44cqw; top: 63.53cqw; width: 16.24cqw; z-index: 1; }
.mk-p7  { left: 43.35cqw; top: 60.16cqw; width: 12.99cqw; z-index: 1; }
.mk-p8  { left: 59.35cqw; top: 60.75cqw; width: 14.75cqw; z-index: 1; }
.mk-p9  { left: 2.57cqw;  top: 84.26cqw; width: 30.57cqw; z-index: 1; }
.mk-p10 { left: 43.10cqw; top: 89.12cqw; width: 21.31cqw; z-index: 1; }
.mk-p11 { left: 66.14cqw; top: 86.31cqw; width: 28.93cqw; z-index: 1; }
.mk-ic1  { left: 8.73cqw;  top: 49.75cqw;  width: 3.60cqw; z-index: 2; }
.mk-ic2  { left: 28.87cqw; top: 50.38cqw;  width: 5.14cqw; z-index: 2; }
.mk-ic3  { left: 44.85cqw; top: 51.21cqw;  width: 4.64cqw; z-index: 2; }
.mk-ic4  { left: 63.11cqw; top: 49.75cqw;  width: 4.13cqw; z-index: 2; }
.mk-ic5  { left: 77.93cqw; top: 50.65cqw;  width: 4.10cqw; z-index: 2; }
.mk-ic6  { left: 23.04cqw; top: 77.36cqw;  width: 2.38cqw; z-index: 2; }
.mk-ic7  { left: 43.09cqw; top: 77.12cqw;  width: 4.10cqw; z-index: 2; }
.mk-ic8  { left: 63.28cqw; top: 77.14cqw;  width: 3.32cqw; z-index: 2; }
.mk-ic9  { left: 10.00cqw; top: 101.93cqw; width: 2.85cqw; z-index: 2; }
.mk-ic10 { left: 44.91cqw; top: 101.93cqw; width: 3.32cqw; z-index: 2; }
.mk-ic11 { left: 78.66cqw; top: 101.93cqw; width: 4.27cqw; z-index: 2; }
.mk-n { z-index: 2; text-transform: uppercase; white-space: nowrap; font-family: var(--sc-bodyf);
  font-weight: 700; font-size: 1.2cqw; letter-spacing: .08em; color: #F1C8CB; }
.mk-n1  { left: 14.12cqw; top: 50.76cqw;  width: 11.09cqw; font-size: .95cqw; }
.mk-n2  { left: 34.55cqw; top: 51.05cqw;  width: 7.47cqw; }
.mk-n3  { left: 50.00cqw; top: 51.33cqw;  width: 12.92cqw; }
.mk-n4  { left: 67.38cqw; top: 51.18cqw;  width: 8.80cqw; }
.mk-n5  { left: 82.37cqw; top: 51.03cqw;  width: 13.34cqw; }
.mk-n6  { left: 26.43cqw; top: 79.23cqw;  width: 15.13cqw; }
.mk-n7  { left: 47.19cqw; top: 79.08cqw;  width: 10.27cqw; }
.mk-n8  { left: 67.04cqw; top: 79.00cqw;  width: 8.94cqw; }
.mk-n9  { left: 13.88cqw; top: 103.32cqw; width: 9.74cqw; }
.mk-n10 { left: 48.57cqw; top: 103.32cqw; width: 14.05cqw; }
.mk-n11 { left: 82.93cqw; top: 103.32cqw; width: 11.40cqw; }
.mk-d { z-index: 2; font-family: var(--sc-bodyf); font-size: .97cqw; line-height: 1.45; color: #fff; }
.mk-d1  { left: 14.34cqw; top: 52.60cqw;  width: 10.86cqw; font-size: .76cqw; }
.mk-d2  { left: 34.55cqw; top: 52.92cqw;  width: 10.30cqw; }
.mk-d3  { left: 50.21cqw; top: 53.21cqw;  width: 8.85cqw; }
.mk-d4  { left: 67.38cqw; top: 52.79cqw;  width: 7.47cqw; }
.mk-d5  { left: 82.37cqw; top: 52.65cqw;  width: 10.90cqw; }
.mk-d6  { left: 26.43cqw; top: 80.93cqw;  width: 12.54cqw; }
.mk-d7  { left: 47.19cqw; top: 80.70cqw;  width: 9.15cqw; }
.mk-d8  { left: 67.04cqw; top: 80.70cqw;  width: 8.94cqw; }
.mk-d9  { left: 13.88cqw; top: 105.02cqw; width: 10.24cqw; }
.mk-d10 { left: 48.57cqw; top: 105.02cqw; width: 8.64cqw; }
.mk-d11 { left: 82.93cqw; top: 105.02cqw; width: 6.99cqw; }

/* =========================================================
   FOOTER — canvas-stage: art-foto als achtergrond met groene waas
   (origineel), logo + contactinfo + socials erop
   ========================================================= */
.sc-footer-art { position: relative; overflow: hidden; padding: 0 !important; background: #9CAD8C !important; }
.sc-ft-stage { position: relative; height: 43.9cqw; }
.sc-ft-stage .ft { position: absolute; margin: 0 !important; max-width: none !important; height: auto; }
.ft-bg   { left: -5.13cqw; top: -3.42cqw; width: 110.26cqw; height: 47.27cqw; opacity: .32; z-index: 0; }
.ft-logo { left: -0.79cqw; top: 1.42cqw; width: 33.99cqw; z-index: 1; }
.ft-h { z-index: 1; margin: 0 !important; font-family: var(--sc-bodyf) !important; font-weight: 700 !important;
  color: #fff; font-size: 2.38cqw; line-height: 1.19; letter-spacing: .06em; }
.ft-h1 { left: 33.20cqw; top: 11.79cqw; width: 30cqw; }
.ft-h2 { left: 33.20cqw; top: 26.26cqw; width: 30cqw; }
.ft-t { z-index: 1; margin: 0 !important; font-family: var(--sc-bodyf); color: #fff; font-size: 1.64cqw; line-height: 1.25; }
.ft-t strong { font-weight: 700; }
.ft-t a { color: #fff !important; text-decoration: none; }
.ft-tel   { left: 33.20cqw; top: 16.46cqw; width: 30cqw; }
.ft-mail  { left: 33.20cqw; top: 20.64cqw; width: 32.27cqw; }
.ft-adres { left: 33.20cqw; top: 30.46cqw; width: 25.8cqw; }
.ft-soc { z-index: 1; display: block; }
.ft-soc img { width: 100%; height: auto; display: block; }
.ft-soc1 img { filter: brightness(0) invert(1); }
.ft-soc1 { left: 7.93cqw;  top: 35.92cqw; width: 2.31cqw; }
.ft-soc2 { left: 11.38cqw; top: 35.92cqw; width: 2.32cqw; }
.ft-soc3 { left: 14.84cqw; top: 35.86cqw; width: 2.43cqw; }
/* Onderbalk: heel smal zwart strookje met witte tekst */
.sc-legal { padding: .5cqw 0 !important; background: #111 !important;
  box-shadow: 0 0 0 100vmax #111; clip-path: inset(0 -100vmax); }
.sc-legal-links { margin: 0 !important; display: flex; gap: 2.4cqw; align-items: center; padding: 0 1.2cqw;
  font-family: var(--sc-bodyf); font-size: .8cqw; font-weight: 700; color: #fff; }
.sc-legal-links a, .sc-legal-links a:visited, .sc-legal-links a:hover, .sc-legal-links a:focus,
.entry-content .sc-legal-links a, .entry-content .sc-legal-links a:visited {
  color: #fff !important; text-decoration: none; }
.sc-legal-links .c { margin-left: auto; color: rgba(255,255,255,.65); font-weight: 400; }
/* De Kadence-sitefooter blijft uit: de zwarte legal-balk is het einde. */
#colophon { display: none !important; }

/* Sitefooter op subpagina's: eigen cqw-container op viewportbreedte,
   hergebruikt de .sc-ft-stage/.sc-legal stijlen */
.sc-sub-footer { background: #9CAD8C; overflow: hidden; position: relative; }
.sc-sub-footer-inner { width: 66.35vw; margin: 0 auto; container-type: inline-size; }
@media (max-width: 781px) { .sc-sub-footer-inner { width: 100vw; } }
.sc-sub-footer .sc-legal { box-shadow: none; clip-path: none; }

/* Subpagina's (Menu/Contact): header in het hero-roze i.p.v. wit,
   koppen in de huisstijl */
body:not(.home) #masthead .site-main-header-wrap,
body:not(.home) #masthead .site-header-row { background: #F1C8CB !important; }
body:not(.home) .sc-menu-cat h3, body:not(.home) .sc-size-card h3 { font-family: var(--sc-bodyf) !important; font-weight: 700 !important; }
body:not(.home) .sc-size-card .ml { font-family: var(--sc-bodyf); font-weight: 700; letter-spacing: .12em; }

/* Subpagina-decoratie: splashes in de kopband, drip die eruit druipt,
   hart-squiggle dividers en bollen-iconen */
.sc-page-hero { position: relative; overflow: hidden; }
.sc-ph-splash { position: absolute; top: 50%; transform: translateY(-50%); width: clamp(90px, 13vw, 210px); height: auto; pointer-events: none; }
.sc-ph-splash--l { left: 1.5vw; }
.sc-ph-splash--r { right: 1.5vw; }
.sc-ph-heart { position: absolute; top: 16%; right: 26%; width: clamp(36px, 4.5vw, 70px); height: auto; pointer-events: none; }
.sc-ph-drip { display: block; width: 100vw; max-width: none; height: auto;
  margin: -5px 0 -3vw calc(50% - 50vw) !important; position: relative; z-index: 2; pointer-events: none; }
.sc-page-hero { margin-bottom: 0 !important; }
.sc-squiggle { text-align: center; margin: 1.5rem 0; }
.sc-squiggle img { width: clamp(170px, 24vw, 330px); height: auto; display: inline-block; }
.sc-size-card .bol { width: clamp(42px, 5vw, 66px); height: auto; margin: .7rem auto 0; display: block; }

/* Juridische pagina's (Terms & Support / Privacy Policy) */
.sc-legal-content { max-width: 780px; margin: 0 auto; }
.sc-legal-content h2 { font-family: var(--sc-bodyf) !important; font-weight: 700 !important;
  text-transform: uppercase; color: #7E8C69; font-size: 1.4rem; letter-spacing: .03em; margin: 2.4rem 0 .7rem; }
.sc-legal-content h2:first-child { margin-top: 0; }
.sc-legal-content p, .sc-legal-content li { color: #5D5346; line-height: 1.75; }
.sc-legal-content a { color: var(--sc-pink); }
.sc-legal-note { background: #FBEFE6; border-radius: 14px; padding: 1.1rem 1.4rem; color: #8A7A70 !important; font-size: .92rem; }

/* Drip-strips als sectie-overgang (echte Canva-graphics) ------------------ */
.sc-dripimg { display: block; width: 100%; height: auto; margin: 0; pointer-events: none; }

/* =========================================================
   Flavours / bestsellers
   ========================================================= */
.sc-flavors .wp-block-column { text-align: center; }
.sc-flavor-name { font-family: var(--sc-display); text-transform: uppercase; color: var(--sc-pink); font-size: 1.2rem; line-height: 1.1; margin: 0 0 .35rem; letter-spacing: .04em; }
.sc-flavor-desc { font-size: .9rem; color: var(--sc-burg); opacity: .85; }

/* =========================================================
   Menu page components
   ========================================================= */
.sc-menu-cat { background: #fff; border-radius: 22px; padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: var(--sc-shadow); height: 100%; }
.sc-menu-cat h3 { font-family: var(--sc-display); text-transform: uppercase; color: var(--sc-burg); letter-spacing: .03em; margin: 0 0 .4rem; }
.sc-menu-cat ul { list-style: none; margin: 0; padding: 0; }
.sc-menu-cat li { padding: .55rem 0; border-bottom: 1px dashed rgba(70,23,32,.16); font-size: .95rem; }
.sc-menu-cat li:last-child { border-bottom: 0; }
.sc-menu-cat li strong { color: var(--sc-burg); }
.sc-size-card { text-align: center; background: #fff; border-radius: 22px; padding: 1.6rem 1.2rem; box-shadow: var(--sc-shadow); }
.sc-size-card .ml { font-family: var(--sc-display); color: var(--sc-pink); font-size: 1.6rem; line-height: 1; }
.sc-size-card h3 { text-transform: uppercase; color: var(--sc-burg); letter-spacing: .04em; margin: .3rem 0 .5rem; }
.sc-card { border-radius: 28px; overflow: hidden; box-shadow: var(--sc-shadow); transition: transform .22s ease; background: #fff; }
.sc-card:hover { transform: translateY(-6px); }
.sc-card img { display: block; width: 100%; height: auto; }
.sc-round img { border-radius: 26px; }
.sc-round-lg img { border-radius: 34px; box-shadow: var(--sc-shadow); }

/* =========================================================
   Contact page components
   ========================================================= */
.sc-info-card { background: #fff; border-radius: 22px; padding: clamp(1.4rem, 3vw, 2rem); box-shadow: var(--sc-shadow); }
.sc-info-card h3 { text-transform: uppercase; letter-spacing: .05em; font-size: 1rem; color: var(--sc-pink); margin: 0 0 .5rem; }
.sc-hours { list-style: none; margin: 0; padding: 0; }
.sc-hours li { display: flex; justify-content: space-between; padding: .35rem 0; border-bottom: 1px dashed rgba(70,23,32,.15); }
.sc-map iframe { width: 100%; min-height: 320px; border: 0; border-radius: 22px; display: block; }

/* Footer ------------------------------------------------------------------ */
.site-footer, .site-footer * { color: var(--sc-cream); }
.site-footer a:hover { color: #fff; }

/* =========================================================
   Scroll: alleen de verbindings-drips bouncen
   ========================================================= */
/* De drip zit met z'n top vast aan de naad tussen twee secties, dus schaalt
   hij vanaf boven naar beneden uit — als een echte druppel die zich vormt. */
@keyframes sc-drip-bounce {
  0%   { transform: scaleY(.62); }
  42%  { transform: scaleY(1.14); }
  63%  { transform: scaleY(.93); }
  80%  { transform: scaleY(1.04); }
  92%  { transform: scaleY(.99); }
  100% { transform: scaleY(1); }
}
.sc-js .sc-drip-in { transform-origin: top center; }
.sc-js .sc-drip-in.sc-in { animation: sc-drip-bounce .7s cubic-bezier(.5,1.4,.5,1) both; }

/* Reduced motion ---------------------------------------------------------- */
.sc-no-motion .sc-drip-in, .sc-no-motion .sc-hero-copy > *, .sc-no-motion .sc-hero-stage .sc-layer { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }

/* =========================================================
   Responsive
   ========================================================= */
/* =========================================================
   MOBIEL (≤781px) — eigen layout per sectie (mockups Ricardo).
   Desktop blijft volledig ongewijzigd.
   ========================================================= */
@media (max-width: 781px) {
  body.home .entry-content { max-width: 100vw; }

  /* --- HERO --- */
  .sc-hero { height: 128cqw; }
  .sc-hero-logo { left: -1cqw; top: -5cqw; width: 40cqw !important; }
  .sc-w-drip   { left: 8cqw;   top: 32cqw;   font-size: 9.2cqw; }
  .sc-w-crunch { left: 8.5cqw; top: 39.5cqw; width: auto; text-align: left; font-size: 10.4cqw; }
  .sc-w-chaos  { left: 8cqw;   top: 50cqw;   font-size: 9.2cqw; }
  .sc-hero-script, .entry-content p.sc-hero-script { left: 6cqw; top: 61cqw; width: 36cqw; font-size: 3.8cqw; }
  .sc-hero-heart { left: 42cqw; top: 58.5cqw; width: 9cqw !important; }
  .sc-hero-text { left: 8cqw; top: 68cqw; width: 46cqw; font-size: clamp(15px, 3.4cqw, 21px); line-height: 1.55; }
  .sc-hero-cta { left: 8cqw; top: 94cqw; flex-direction: column; align-items: flex-start; gap: 2.6cqw; }
  .sc-cta-btn { font-size: clamp(13px, 3cqw, 19px); padding: .85em 2.3em; }
  .sc-ghost  { left: 46cqw; top: 46cqw; width: 55cqw; height: auto; }
  .sc-splash { left: 55cqw; top: 38cqw; width: 45cqw; height: auto; }
  .sc-linedrip { display: none; }
  .sc-cup    { left: 50cqw; top: 36cqw; width: 42cqw !important; height: auto; }
  .sc-badge  { left: 52cqw; top: 62cqw; width: 37cqw !important; }
  .sc-straw  { left: 33cqw; top: 106cqw; width: 15cqw; }
  .sc-n1  { left: 52cqw; top: 112cqw; width: 8cqw; }
  .sc-n3  { left: 62cqw; top: 114cqw; width: 7cqw; }
  .sc-n4  { left: 71cqw; top: 113cqw; width: 6cqw; }
  .sc-n5  { left: 80cqw; top: 112cqw; width: 6cqw; }
  .sc-n6  { left: 86cqw; top: 108cqw; width: 13cqw; }
  .sc-n8  { left: 45cqw; top: 114.5cqw; width: 5cqw; }
  .sc-n2, .sc-n7, .sc-n9, .sc-n10, .sc-n11,
  .sc-c1, .sc-c2, .sc-c3, .sc-c4, .sc-c5 { display: none; }

  /* --- USP: afgeronde créme kaart, 3+2 grid --- */
  .sc-usp::before { background: #F1C8CB; }
  .sc-usp-band {
    width: 92cqw; margin: 0 auto; height: auto;
    border-radius: 5cqw; padding: 6cqw 4cqw 16cqw;
    box-shadow: 0 3cqw 7cqw rgba(70,23,32,.10);
  }
  .sc-usp-grid { flex-wrap: wrap; row-gap: 5cqw; justify-content: center; }
  .sc-usp-item { flex: 1 1 30%; padding: 0 2.5cqw; }
  .sc-usp-item:nth-child(4) { border-left: 0; }
  .sc-usp-item:nth-child(4), .sc-usp-item:nth-child(5) {
    flex: 0 1 40%; border-top: .35cqw dotted rgba(228,122,140,.55); padding-top: 4cqw; }
  .sc-usp-item + .sc-usp-item { border-left-width: .35cqw; }
  .sc-usp-item img { width: 10cqw; }
  .sc-usp-item:nth-child(4) img { width: 7cqw; }
  .sc-usp-item h3 { font-size: clamp(13px, 3cqw, 17px); }
  .sc-usp-item p { font-size: clamp(12px, 2.8cqw, 16px); }
  .sc-usp-splash { display: block; top: auto; height: 19%; }
  .sc-usp-splash--l { left: 0; bottom: 0; }
  .sc-usp-splash--r { right: 0; bottom: 0; }

  /* --- BUILT IN LAYERS --- */
  .sc-lay-stage { height: 198cqw; }
  .sl-bg { left: -3cqw; top: 0; width: 106cqw; object-fit: cover; }
  .sl-pillimg  { left: 26cqw; top: 4cqw; width: 48cqw; }
  .sl-pilltext { left: 26cqw; top: 4cqw; width: 48cqw; line-height: 10cqw; font-size: 3.2cqw; }
  .sl-heart-sm { left: 47.5cqw; top: 15.5cqw; width: 5cqw; }
  .sl-title .b1 { left: 10cqw; top: 17.5cqw; width: 80cqw; font-size: 12.2cqw; }
  .sl-title .b2 { left: 10cqw; top: 28cqw;   width: 80cqw; font-size: 13cqw; }
  .sl-sparkle { left: 78cqw; top: 15cqw; width: 8cqw; }
  .sl-heart-doodle { left: 72cqw; top: 44cqw; width: 20cqw; }
  .sl-waffle { left: 11cqw; top: 40cqw; width: 68cqw; }
  .sl-splash-l { left: 4cqw; top: 52cqw; width: 22cqw; }
  .sl-toppings { left: 58cqw; top: 40cqw; width: 34cqw; }
  .sl-crumb1 { left: 8cqw;  top: 100cqw; width: 12cqw; }
  .sl-crumb2 { left: 68cqw; top: 98cqw; width: 9cqw; }
  .sl-crumb3 { left: 80cqw; top: 66cqw; width: 9cqw; }
  /* Badge op de puntzak (max ~25% overlap met het ijs), fors groter */
  .sl-badge { left: 30cqw; top: 82cqw; width: 36cqw; }
  .sl-card { left: 23cqw; top: 112cqw; width: 54cqw; }
  .sl-card-title { left: 27cqw; top: 114.5cqw; width: 46cqw; font-size: 4.4cqw; }
  .sl-line1 { left: 27cqw; top: 119cqw; width: 32cqw; }
  .sl-card-text { left: 27cqw; top: 121.5cqw; width: 46cqw; font-size: 3.6cqw; line-height: 1.5; }
  .sl-line2 { left: 27cqw; top: 134cqw; width: 20cqw; }
  /* Lijst: smaller blok, gecentreerd onder de kaart */
  .sl-ic1a { left: 16cqw; top: 144cqw; width: 9cqw; }  .sl-ic1b { left: 18.3cqw; top: 144cqw; width: 4.5cqw; }
  .sl-li1 { top: 145cqw; }
  .sl-sep1 { left: 20cqw; top: 154.5cqw; width: 60cqw; }
  .sl-ic2a { left: 16cqw; top: 157cqw; width: 9cqw; } .sl-ic2b { left: 16cqw; top: 159.2cqw; width: 9cqw; }
  .sl-li2 { top: 158cqw; }
  .sl-sep2 { left: 20cqw; top: 167.5cqw; width: 60cqw; }
  .sl-ic3a { left: 16cqw; top: 170cqw; width: 9cqw; }  .sl-ic3b { left: 18.3cqw; top: 170cqw; width: 4.5cqw; }
  .sl-li3 { top: 171cqw; }
  .sl-sep3 { left: 20cqw; top: 180.5cqw; width: 60cqw; }
  .sl-ic4a { left: 16cqw; top: 183cqw; width: 9cqw; } .sl-ic4b { left: 18.3cqw; top: 185.2cqw; width: 4.5cqw; }
  .sl-li4 { top: 184cqw; }
  .sl-li { left: 29cqw; width: 56cqw; }
  .sl-li b { font-size: 4cqw; }
  .sl-li span { font-size: 3.2cqw; margin-top: .6cqw; }
  .sl-vline { display: none; }

  /* --- ONTDEK JOUW CHAOS --- */
  .sc-jc-stage { height: 111cqw; }
  .sj-drip { left: -3cqw; top: 0; width: 106cqw; height: 16cqw; }
  .sj-ontdek { left: 25cqw; top: 8.5cqw; width: 30cqw; font-size: 5.6cqw; }
  .sj-heart { left: 53cqw; top: 7cqw; width: 8cqw; }
  .sj-strokes { left: 84cqw; top: 13cqw; width: 6cqw; }
  .sj-title .p1 { left: 2cqw;  top: 14cqw; width: 45.5cqw; font-size: 9.2cqw; text-align: right; }
  .sj-title .p2 { left: 50cqw; top: 14.2cqw; width: 45.5cqw; font-size: 8.8cqw; text-align: left; }
  .sj-sub { left: 10cqw; top: 26.5cqw; width: 80cqw; font-size: clamp(13px, 3.2cqw, 18px); line-height: 1.55; }
  .sj-ic1 { left: 26cqw; top: 44cqw; width: 8.5cqw; }
  .sj-ic2 { left: 64cqw; top: 44cqw; width: 9.5cqw; }
  .sj-ic3 { left: 25cqw; top: 64cqw; width: 9.5cqw; }
  .sj-ic4 { left: 64.5cqw; top: 64cqw; width: 9.5cqw; }
  .sj-sep1 { left: 49.5cqw; top: 43cqw; width: 1.2cqw; display: block; }
  .sj-sep2, .sj-sep3 { display: none; }
  .sj-lab1 { left: 6cqw;  top: 54.5cqw; width: 40cqw; font-size: 3.2cqw; }
  .sj-lab2 { left: 53cqw; top: 54.5cqw; width: 40cqw; font-size: 3.2cqw; }
  .sj-lab3 { left: 6cqw;  top: 74.5cqw; width: 40cqw; font-size: 3.2cqw; }
  .sj-lab4 { left: 53cqw; top: 74.5cqw; width: 40cqw; font-size: 3.2cqw; }
  .sj-scr1 { left: 6cqw;  top: 58.5cqw; width: 40cqw; font-size: 3.5cqw; }
  .sj-scr2 { left: 53cqw; top: 58.5cqw; width: 40cqw; font-size: 3.5cqw; }
  .sj-scr3 { left: 6cqw;  top: 78.5cqw; width: 40cqw; font-size: 3.5cqw; }
  .sj-scr4 { left: 53cqw; top: 78.5cqw; width: 40cqw; font-size: 3.5cqw; }
  .sj-banner { left: 5cqw; top: 86cqw; width: 90cqw; }
  .sj-heart-l { left: 9cqw;  top: 92cqw; width: 5cqw; }
  .sj-heart-r { left: 86cqw; top: 92cqw; width: 5cqw; }
  .sj-banner-text { left: 13cqw; top: 88cqw; width: 74cqw; font-size: clamp(11px, 2.7cqw, 15px); line-height: 1.55; }
  .sj-banner-text .brm { display: inline; }
  .sj-banner-text .brd { display: none; }
  .sj-squiggle { left: 36cqw; top: 105cqw; width: 28cqw; }
  /* Kaarten (volledige afbeeldingen) gestapeld op volle breedte */
  .sc-jouw .wp-block-columns { display: block; padding: 0 4cqw; }
  .sc-jouw .wp-block-columns .wp-block-column { width: 100%; margin: 0 0 4cqw; }
  .sc-frame img { border-radius: 3cqw; padding: 0; }

  /* --- ONS VERHAAL --- */
  .sc-vh-stage { height: 233cqw; }
  .sv-drip { left: -8cqw; top: -7cqw; width: 116cqw; height: 32cqw; }
  .sv-logo { left: 4cqw; top: 2cqw; width: 21cqw; }
  .sv-title { left: 20cqw; top: 9cqw; width: 60cqw; text-align: center; font-size: 6.8cqw; }
  .sv-line1 { left: 30cqw; top: 17.5cqw; width: 40cqw; }
  .sv-arch { left: 22cqw; top: 21cqw; width: 56cqw; }
  .sv-mascotte { left: 14cqw; top: 26cqw; width: 72cqw; }
  .sv-p { font-size: clamp(12px, 3.2cqw, 18px); line-height: 1.6; }
  .sc-vh-stage .sv-p br { display: none; }
  .sv-p1, .sv-p3, .sv-p4, .sv-p6 { left: 6cqw !important; width: 88cqw !important; }
  .sv-p1 { left: 8cqw;  top: 112cqw; width: 84cqw; }
  .sv-p2 { left: 20cqw; top: 124cqw; width: 60cqw; font-size: clamp(12px, 3.4cqw, 18px); }
  .sv-p3 { left: 6cqw;  top: 130.5cqw; width: 88cqw; }
  .sv-p4 { left: 8cqw;  top: 164cqw; width: 84cqw; }
  .sv-p5 { left: 12cqw; top: 182cqw; width: 76cqw; }
  .sv-p6 { left: 8cqw;  top: 194cqw; width: 84cqw; }
  .sv-script { left: 23cqw; top: 207cqw; width: 40cqw; font-size: 6.2cqw; }
  .sv-heart { left: 62cqw; top: 206cqw; width: 7cqw; }
  .sv-mtic { left: 25cqw; top: 218cqw; width: 50cqw; font-size: 4.2cqw; }
  .sv-line2 { left: 28cqw; top: 224.5cqw; width: 44cqw; }
  .sv-cone { left: 72cqw; top: 200cqw; width: 22cqw; }

  /* --- VAN MINI TOT OVERLOADED: 3 witte kaarten gestapeld --- */
  .sc-mc-stage { height: 186cqw; }
  .mc-drip { left: -3cqw; top: 0; width: 106cqw; height: 14cqw; }
  .mc-heart-top { left: 19cqw; top: 8cqw; width: 5cqw; }
  .mc-title .g { left: 5cqw; top: 10.5cqw; width: 90cqw; font-size: 7.4cqw; transform: none; }
  .mc-title .p { left: 5cqw; top: 19cqw;   width: 90cqw; font-size: 7.6cqw; }
  .mc-sub { left: 12cqw; top: 28.5cqw; width: 76cqw; font-size: clamp(13px, 3.3cqw, 19px); line-height: 1.55; }
  .mc-strokes { left: 84cqw; top: 27cqw; width: 7cqw; }
  .mc-meest-pill { left: 31cqw; top: 43cqw; width: 38cqw; }
  .mc-meest-txt  { left: 31cqw; top: 44.6cqw; width: 38cqw; font-size: 2.8cqw; }
  .mc-card { display: block; background: #FDFAF7; border-radius: 4.5cqw;
    box-shadow: 0 2.5cqw 6cqw rgba(70,23,32,.08); z-index: 0; }
  .mc-card1 { left: 5cqw; top: 53cqw;  width: 90cqw; }
  .mc-card2 { left: 5cqw; top: 93cqw;  width: 90cqw; border: .5cqw solid #F3B8C4; }
  .mc-card3 { left: 5cqw; top: 137cqw; width: 90cqw; }
  .mc-cup-mini   { left: 6cqw;  top: 57cqw;  width: 31cqw; }
  .mc-mini-badge { left: 13cqw; top: 67cqw; width: 15cqw; }
  .mc-cup-loaded { left: 5cqw;  top: 91cqw;  width: 32cqw; }
  .mc-cup-over   { left: 6cqw;  top: 135cqw; width: 30cqw; }
  .mc-pill1 { left: 46cqw; top: 57cqw; width: 34cqw; }
  .mc-hrt1  { left: 82cqw; top: 55cqw; width: 6.5cqw; }
  .mc-lbl1  { left: 46cqw; top: 58.2cqw; width: 34cqw; font-size: 3.3cqw; }
  .mc-ml1   { left: 46cqw; top: 64.5cqw; width: 34cqw; font-size: 3.1cqw; }
  .mc-oms1  { left: 43cqw; top: 68.5cqw; width: 40cqw; font-size: 3cqw; line-height: 1.5; }
  .mc-line1 { left: 49cqw; top: 78.5cqw; width: 28cqw; }
  .mc-bol1  { left: 58cqw; top: 81cqw; width: 9cqw; }
  .mc-bollen1 { left: 46cqw; top: 87cqw; width: 34cqw; font-size: 2.8cqw; }
  .mc-pill2 { left: 45cqw; top: 98cqw; width: 37cqw; }
  .mc-hrt2  { left: 83cqw; top: 96cqw; width: 6.5cqw; }
  .mc-lbl2  { left: 45cqw; top: 99.3cqw; width: 37cqw; font-size: 3.3cqw; }
  .mc-ml2   { left: 45cqw; top: 105.5cqw; width: 37cqw; font-size: 3.1cqw; }
  .mc-oms2  { left: 43cqw; top: 109.5cqw; width: 41cqw; font-size: 3cqw; line-height: 1.5; }
  .mc-line2 { left: 49cqw; top: 119.5cqw; width: 28cqw; }
  .mc-bol2  { left: 56cqw; top: 122cqw; width: 13cqw; }
  .mc-bollen2 { left: 45cqw; top: 129.5cqw; width: 37cqw; font-size: 2.8cqw; }
  .mc-pill3 { left: 43cqw; top: 142cqw; width: 41cqw; }
  .mc-hrt3  { left: 85cqw; top: 140cqw; width: 6.5cqw; }
  .mc-lbl3  { left: 43cqw; top: 143.2cqw; width: 41cqw; font-size: 3.1cqw; }
  .mc-ml3   { left: 43cqw; top: 149.5cqw; width: 41cqw; font-size: 3.1cqw; }
  .mc-oms3  { left: 42cqw; top: 153.5cqw; width: 43cqw; font-size: 3cqw; line-height: 1.5; }
  .mc-line3 { left: 49cqw; top: 163.5cqw; width: 28cqw; }
  .mc-bol3  { left: 54cqw; top: 166cqw; width: 17cqw; }
  .mc-bollen3 { left: 43cqw; top: 174cqw; width: 41cqw; font-size: 2.8cqw; }
  .mc-sep1, .mc-sep2 { display: none; }

  /* --- KIES JE SMAAK: 7 ruime rijen, elk bolletje los --- */
  .sc-ks-stage { height: 332cqw; }
  .ks-bg { left: -3cqw; top: 0; width: 106cqw; object-fit: cover; }
  .ks-splash-l { left: -4cqw; top: -1cqw; width: 30cqw; }
  .ks-splash-r { left: 73cqw; top: -1cqw; width: 30cqw; }
  .ks-heart-l { left: 17cqw; top: 4cqw; width: 8cqw; }
  .ks-heart-r { display: none; }
  .ks-title { left: 10cqw; top: 3.5cqw; width: 80cqw; font-size: 8.6cqw; line-height: 1.15; }
  .ks-title .g, .ks-title .p { display: block; }
  .ks-sub { left: 22cqw; top: 24cqw; width: 56cqw; font-size: clamp(13px, 3.5cqw, 19px); line-height: 1.4; white-space: normal; }
  .ks-line { left: 36cqw; top: 33.5cqw; width: 28cqw; }
  .ks-heart-sm { left: 63cqw; top: 32cqw; width: 4.5cqw; }
  .ks-s1 { left: 2cqw; top: 38cqw;  width: 33cqw; }
  .ks-s2 { left: 2cqw; top: 78cqw;  width: 33cqw; }
  .ks-s3 { left: 2cqw; top: 118cqw; width: 33cqw; }
  .ks-s4 { left: 2cqw; top: 158cqw; width: 33cqw; }
  .ks-s5 { left: 2cqw; top: 198cqw; width: 33cqw; }
  .ks-s6 { left: 2cqw; top: 238cqw; width: 33cqw; }
  .ks-s7 { left: 2cqw; top: 278cqw; width: 33cqw; }
  .ks-i1 { left: 40cqw; top: 45cqw;  width: 6.5cqw; }
  .ks-i2 { left: 40cqw; top: 85cqw;  width: 6.5cqw; }
  .ks-i3 { left: 40cqw; top: 125cqw; width: 6.5cqw; }
  .ks-i4 { left: 40cqw; top: 165cqw; width: 6.5cqw; }
  .ks-i5 { left: 40cqw; top: 205cqw; width: 6.5cqw; }
  .ks-i6 { left: 40cqw; top: 245cqw; width: 6.5cqw; }
  .ks-i7 { left: 40cqw; top: 285cqw; width: 6.5cqw; }
  .ks-n { text-align: left; font-size: 3.9cqw; line-height: 1.15; }
  .ks-n1 { left: 49cqw; top: 44.5cqw;  width: 40cqw; }
  .ks-n2 { left: 49cqw; top: 84.5cqw;  width: 40cqw; font-size: 3.3cqw; }
  .ks-n3 { left: 49cqw; top: 124.5cqw; width: 40cqw; }
  .ks-n4 { left: 49cqw; top: 164.5cqw; width: 40cqw; }
  .ks-n5 { left: 49cqw; top: 204.5cqw; width: 40cqw; }
  .ks-n6 { left: 49cqw; top: 244.5cqw; width: 40cqw; }
  .ks-n7 { left: 49cqw; top: 284.5cqw; width: 40cqw; font-size: 3.3cqw; }
  .ks-d { text-align: left; font-size: clamp(12px, 3cqw, 17px); line-height: 1.5; }
  .ks-d1 { left: 49cqw; top: 52.5cqw;  width: 38cqw; }
  .ks-d2 { left: 49cqw; top: 92.5cqw;  width: 38cqw; }
  .ks-d3 { left: 49cqw; top: 132.5cqw; width: 38cqw; }
  .ks-d4 { left: 49cqw; top: 172.5cqw; width: 38cqw; }
  .ks-d5 { left: 49cqw; top: 212.5cqw; width: 38cqw; }
  .ks-d6 { left: 49cqw; top: 252.5cqw; width: 38cqw; }
  .ks-d7 { left: 49cqw; top: 292.5cqw; width: 38cqw; }
  .ks-u1 { left: 40cqw; top: 74cqw;  width: 54cqw; }
  .ks-u2 { left: 40cqw; top: 114cqw; width: 54cqw; }
  .ks-u3 { left: 40cqw; top: 154cqw; width: 54cqw; }
  .ks-u4 { left: 40cqw; top: 194cqw; width: 54cqw; }
  .ks-u5 { left: 40cqw; top: 234cqw; width: 54cqw; }
  .ks-u6 { left: 40cqw; top: 274cqw; width: 54cqw; }
  .ks-u7 { display: none; }
  .ks-outro { left: 15cqw; top: 320cqw; width: 70cqw; font-size: 4cqw; }

  /* --- MEER CHAOS, MEER KEUZE: kaartgrid 2+2, lineups vol --- */
  .sc-mk-stage { height: 448cqw; }
  .mk-drip { left: -3cqw; top: 0; width: 106cqw; height: 16cqw; }
  .mk-title .r1 { left: 5cqw; top: 6.5cqw;  width: 90cqw; font-size: 6.6cqw; }
  .mk-title .r2 { left: 5cqw; top: 13.5cqw; width: 90cqw; font-size: 6.8cqw; }
  .mk-script { left: 21cqw; top: 22.5cqw; width: 58cqw; font-size: 3.8cqw; text-align: center; }
  .mk-underline { left: 30cqw; top: 30cqw; width: 24cqw; }
  .mk-heart1 { left: 60cqw; top: 24.5cqw; width: 9cqw; }
  .mk-heart2 { display: none; }
  .mk-uic { display: block; z-index: 2; }
  .mk-uic1 { left: 15cqw; top: 33.5cqw; width: 7cqw; }
  .mk-uic2 { left: 46cqw; top: 33cqw;   width: 8cqw; }
  .mk-uic3 { left: 78.5cqw; top: 33.5cqw; width: 7cqw; }
  .mk-usp { white-space: normal; line-height: 1.55; letter-spacing: .14em; font-size: clamp(11px, 2.6cqw, 15px); }
  .mk-usp1 { left: 3cqw;  top: 42cqw; width: 31cqw; }
  .mk-usp2 { left: 34.5cqw; top: 42cqw; width: 31cqw; }
  .mk-usp3 { left: 66cqw; top: 42cqw; width: 31cqw; }
  /* Producten: 2 naast elkaar (items 1-8), lineups (9-11) volle breedte */
  .mk-card { display: block; background: rgba(255,255,255,.28); border-radius: 3.5cqw; z-index: 0; }
  .mk-card1 { left: 4cqw;  top: 56cqw;  width: 44cqw; }
  .mk-card2 { left: 52cqw; top: 56cqw;  width: 44cqw; }
  .mk-card3 { left: 4cqw;  top: 114cqw; width: 44cqw; }
  .mk-card4 { left: 52cqw; top: 114cqw; width: 44cqw; }
  .mk-card5 { left: 4cqw;  top: 172cqw; width: 44cqw; }
  .mk-card6 { left: 52cqw; top: 172cqw; width: 44cqw; }
  .mk-card7 { left: 4cqw;  top: 230cqw; width: 44cqw; }
  .mk-card8 { left: 52cqw; top: 230cqw; width: 44cqw; }
  .mk-card9  { left: 4cqw; top: 288cqw; width: 92cqw; }
  .mk-card10 { left: 4cqw; top: 340cqw; width: 92cqw; }
  .mk-card11 { left: 4cqw; top: 392cqw; width: 92cqw; }
  .mk-p1 { left: 6cqw;  top: 58cqw;  width: 40cqw; }
  .mk-p2 { left: 54cqw; top: 58cqw;  width: 40cqw; }
  .mk-p3 { left: 6cqw;  top: 116cqw; width: 40cqw; }
  .mk-p4 { left: 54cqw; top: 116cqw; width: 40cqw; }
  .mk-p5 { left: 6cqw;  top: 174cqw; width: 40cqw; }
  .mk-p6 { left: 54cqw; top: 174cqw; width: 40cqw; }
  .mk-p7 { left: 6cqw;  top: 232cqw; width: 40cqw; }
  .mk-p8 { left: 54cqw; top: 232cqw; width: 40cqw; }
  .mk-p9  { left: 6cqw; top: 290cqw; width: 88cqw; }
  .mk-p10 { left: 6cqw; top: 342cqw; width: 88cqw; }
  .mk-p11 { left: 6cqw; top: 394cqw; width: 88cqw; }
  .mk-ic1 { left: 6.5cqw;  top: 90.5cqw;  width: 6cqw; }
  .mk-ic2 { left: 54.5cqw; top: 91cqw;    width: 6.5cqw; }
  .mk-ic3 { left: 6.5cqw;  top: 149cqw; width: 6.5cqw; }
  .mk-ic4 { left: 54.5cqw; top: 149cqw; width: 6cqw; }
  .mk-ic5 { left: 6.5cqw;  top: 207cqw; width: 6cqw; }
  .mk-ic6 { left: 54.5cqw; top: 207cqw; width: 5.5cqw; }
  .mk-ic7 { left: 6.5cqw;  top: 265cqw; width: 6cqw; }
  .mk-ic8 { left: 54.5cqw; top: 265cqw; width: 5.5cqw; }
  .mk-ic9  { left: 8cqw; top: 320.5cqw; width: 5.5cqw; }
  .mk-ic10 { left: 8cqw; top: 372.5cqw; width: 6cqw; }
  .mk-ic11 { left: 8cqw; top: 424.5cqw; width: 6.5cqw; }
  .mk-n { font-size: clamp(12px, 3.1cqw, 17px); white-space: normal; line-height: 1.2; }
  .mk-n1 { left: 14cqw; top: 91cqw;  width: 29cqw; }
  .mk-n2 { left: 62cqw; top: 91cqw;  width: 29cqw; }
  .mk-n3 { left: 14cqw; top: 149.5cqw; width: 29cqw; }
  .mk-n4 { left: 62cqw; top: 149.5cqw; width: 29cqw; }
  .mk-n5 { left: 14cqw; top: 207.5cqw; width: 29cqw; }
  .mk-n6 { left: 62cqw; top: 207.5cqw; width: 29cqw; }
  .mk-n7 { left: 14cqw; top: 265.5cqw; width: 29cqw; }
  .mk-n8 { left: 62cqw; top: 265.5cqw; width: 29cqw; }
  .mk-n9  { left: 16cqw; top: 321cqw; width: 60cqw; }
  .mk-n10 { left: 16cqw; top: 373cqw; width: 60cqw; }
  .mk-n11 { left: 16cqw; top: 425cqw; width: 60cqw; }
  .mk-d { font-size: clamp(11px, 2.7cqw, 15px); line-height: 1.45; }
  .mk-d1 { left: 6.5cqw;  top: 99.5cqw;  width: 39cqw; }
  .mk-d2 { left: 54.5cqw; top: 99.5cqw;  width: 39cqw; }
  .mk-d3 { left: 6.5cqw;  top: 157.5cqw; width: 39cqw; }
  .mk-d4 { left: 54.5cqw; top: 157.5cqw; width: 39cqw; }
  .mk-d5 { left: 6.5cqw;  top: 215.5cqw; width: 39cqw; }
  .mk-d6 { left: 54.5cqw; top: 215.5cqw; width: 39cqw; }
  .mk-d7 { left: 6.5cqw;  top: 273.5cqw; width: 39cqw; }
  .mk-d8 { left: 54.5cqw; top: 273.5cqw; width: 39cqw; }
  .mk-d9  { left: 16cqw; top: 326cqw; width: 74cqw; }
  .mk-d10 { left: 16cqw; top: 378cqw; width: 74cqw; }
  .mk-d11 { left: 16cqw; top: 430cqw; width: 74cqw; }

  /* --- FOOTER --- */
  .sc-ft-stage { height: 150cqw; }
  .ft-bg { left: 0; top: 0; width: 100cqw; height: 100%; object-fit: cover; }
  .ft-logo { left: 22cqw; top: 6cqw; width: 56cqw; }
  .ft-h { font-size: 6.2cqw; }
  .ft-h1 { left: 8cqw; top: 62cqw; width: 84cqw; }
  .ft-h2 { left: 8cqw; top: 92cqw; width: 84cqw; }
  .ft-t { font-size: clamp(14px, 3.9cqw, 21px); }
  .ft-tel   { left: 8cqw; top: 72cqw; width: 84cqw; }
  .ft-mail  { left: 8cqw; top: 79.5cqw; width: 84cqw; }
  .ft-adres { left: 8cqw; top: 102cqw; width: 66cqw; }
  .ft-soc1 { left: 12cqw; top: 124cqw; width: 8.5cqw; }
  .ft-soc2 { left: 24cqw; top: 124cqw; width: 8.5cqw; }
  .ft-soc3 { left: 36cqw; top: 123.8cqw; width: 9cqw; }
  /* Legal-balk: gecentreerd, 2 regels, strak (niet afgerond) */
  .sc-legal { box-shadow: none; clip-path: none; padding: 4cqw 0 3cqw !important; }
  .sc-legal-links { flex-wrap: wrap; justify-content: center; gap: 8cqw; font-size: clamp(12px, 3.4cqw, 17px); }
  .sc-legal-links .c { flex-basis: 100%; margin-left: 0; text-align: center; font-size: clamp(10px, 3cqw, 15px); }

  /* Specificiteit: de stage-basisregels zetten height:auto op elk kind
     (0,2,0) — deze hoogtes moeten dáárvan winnen. */
  .sc-lay-stage .sl-bg { height: 100%; }
  .sc-lay-stage .sl-card { height: 27cqw; object-fit: fill; }
  .sc-ks-stage .ks-bg { height: 100%; }
  .sc-ft-stage .ft-bg { height: 100%; }
  .sc-mc-stage .mc-drip { height: 14cqw; }
  .sc-jc-stage .sj-drip { height: 16cqw; }
  .sc-jc-stage .sj-sep1 { height: 40cqw; }
  .sc-jc-stage .sj-banner { height: 16cqw; }
  .sc-mk-stage .mk-drip { height: 16cqw; }
  .sc-vh-stage .sv-drip { height: 32cqw; }
  .sc-mc-stage .mc-card1 { height: 41cqw; }
  .sc-mc-stage .mc-card2 { height: 44cqw; }
  .sc-mc-stage .mc-card3 { height: 46cqw; }
  .sc-mk-stage .mk-card1, .sc-mk-stage .mk-card2, .sc-mk-stage .mk-card3, .sc-mk-stage .mk-card4,
  .sc-mk-stage .mk-card5, .sc-mk-stage .mk-card6, .sc-mk-stage .mk-card7, .sc-mk-stage .mk-card8 { height: 56cqw; }
  .sc-mk-stage .mk-card9, .sc-mk-stage .mk-card10, .sc-mk-stage .mk-card11 { height: 47cqw; }
  /* Productfoto's netjes gecropt binnen de kaart */
  .sc-mk-stage .mk-p1, .sc-mk-stage .mk-p2, .sc-mk-stage .mk-p3, .sc-mk-stage .mk-p4,
  .sc-mk-stage .mk-p5, .sc-mk-stage .mk-p6, .sc-mk-stage .mk-p7, .sc-mk-stage .mk-p8 {
    height: 28cqw; object-fit: cover; border-radius: 3cqw; }
  .sc-mk-stage .mk-p9, .sc-mk-stage .mk-p10, .sc-mk-stage .mk-p11 {
    height: 26cqw; object-fit: cover; border-radius: 3cqw; }
}

/* Leesbaarheids-minima (clamp raakt desktop niet: daar zit de cqw-maat
   ruim boven het minimum) */
.sc-cta-btn { font-size: clamp(10px, 1.05cqw, 20px); }
.sc-hero-text { font-size: clamp(13px, 1.18cqw, 22px); }

/* =========================================================
   Mobiel menu: licht roze zijpaneel (mockup) — logo, iconen-items,
   Route/Contact-knoppen, "Let's get social" + splash onderin.
   ========================================================= */
#mobile-drawer .drawer-overlay { background: rgba(70,23,32,.12) !important; }
#mobile-drawer .drawer-inner {
  background: #FBE9EC !important;
  position: fixed !important; top: 0 !important; right: 0 !important;
  left: auto !important; bottom: 0 !important;
  width: min(420px, 84vw) !important; height: 100% !important; max-height: none !important;
  border-radius: 0 !important;
  box-shadow: -12px 0 40px rgba(70,23,32,.18) !important;
  padding: 2px 26px 0 !important;
  overflow-y: auto !important;
  transform: none !important;
}
#mobile-drawer .drawer-header { display: flex !important; justify-content: flex-end; padding: 4px 0 0; background: transparent !important; flex: none; }
#mobile-drawer .drawer-inner { display: flex !important; flex-direction: column; }
#mobile-drawer .drawer-content { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#mobile-drawer .mobile-navigation { flex: none; }
#mobile-drawer .drawer-header .drawer-toggle { color: #5E6B47 !important; background: transparent !important; }
.sc-drawer-logo { display: block; width: 78%; max-width: 280px; height: auto; margin: 4px auto 16px; }
#mobile-drawer .mobile-navigation ul li a,
#mobile-drawer .mobile-navigation ul li a:visited {
  display: flex; align-items: center; gap: 20px;
  font-family: var(--sc-bodyf) !important; font-weight: 600 !important;
  color: #45423C !important; font-size: 1.1rem; letter-spacing: .02em;
  padding: 8.5px 2px !important;
}
#mobile-drawer .mobile-navigation ul li { border-bottom: 1px solid rgba(240,114,143,.35) !important; }
#mobile-drawer .mobile-navigation ul li:last-child { border-bottom: 0 !important; }
.sc-mi { width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.sc-mi svg { width: 28px; height: 28px; stroke: #F0728F; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sc-drawer-extra { padding: 2px 0 12px; flex: 1; display: flex; flex-direction: column; }
.sc-drawer-extra > * { flex: none; }
.sc-drawer-extra .dots + .sc-dbtn + .sc-dbtn + .dots { margin-top: auto; }
.sc-drawer-extra .dots { border-top: 2px dotted #E9A6B6; margin: 3px 0 10px; }
.sc-dbtn, .sc-dbtn:visited { display: block; text-align: center; border-radius: 999px;
  font-family: var(--sc-bodyf); font-weight: 700; font-size: 15px; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase; padding: 10px 0; margin: 0 0 8px; text-decoration: none; }
.sc-dbtn--route, .sc-dbtn--route:visited { background: #E76A8B; color: #fff !important; }
.sc-dbtn--contact, .sc-dbtn--contact:visited { border: 2px solid #E98BA4; color: #C25B75 !important; }
.sc-drawer-social-title { font-family: var(--sc-script) !important; color: #E76A8B;
  font-size: 1.2rem; margin: 0 0 7px !important; }
.sc-drawer-social { display: flex; gap: 14px; }
.sc-drawer-social a { width: 37px; height: 37px; border: 2px solid #F0728F; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex: none; }
.sc-drawer-social svg { width: 19px; height: 19px; stroke: #F0728F; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sc-drawer-splash { display: block; width: 40%; height: auto; margin: 5px auto 0; }
/* Krappe schermen: splash weglaten zodat het menu nooit hoeft te scrollen */
@media (max-height: 800px) { .sc-drawer-splash { display: none; } }
/* CONTACT-pill in de mobiele header (naast de hamburger) */
.sc-mob-contact, .sc-mob-contact:visited {
  background: #E199AE; color: #461720 !important; border-radius: 999px;
  font-family: var(--sc-bodyf); font-weight: 700; font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; padding: .7em 1.5em; text-decoration: none;
  margin-right: 6px; white-space: nowrap;
  display: inline-flex; align-items: center; align-self: center; line-height: 1; height: auto;
}
/* Topbar op mobiel: alleen het swirl-icoon */
@media (max-width: 1024px) {
  .site-mobile-header-wrap .site-branding img { max-height: 44px !important; width: auto !important; }
  /* Op de home geen icoon linksboven: het grote hero-logo volstaat */
  body.home .site-mobile-header-wrap .site-branding { display: none; }
}

/* Anker-navigatie: soepel scrollen, met ruimte voor de vaste header */
html { scroll-behavior: smooth; }
#verhaal, #menu, #keuze, #contact { scroll-margin-top: 90px; }

/* Bol-ijs iconen onder de cup-omschrijvingen */
.bollen-ico { display: flex; justify-content: center; gap: .3cqw; margin-top: 1.2cqw; }
.bollen-ico img { width: 2.6cqw; height: auto; }

/* =========================================================
   GUTTER-KLEUREN per sectie (zoals origineel): de zijbanden nemen een
   gedempte tint van de sectiekleur aan. Techniek: 100vmax box-shadow
   + clip-path zodat alleen de horizontale bleed zichtbaar blijft.
   ========================================================= */
.sc-layers, .sc-jouw {
  box-shadow: 0 0 0 100vmax #95A67F; clip-path: inset(0 -100vmax);
}
.sc-footer-art { box-shadow: 0 0 0 100vmax #9CAD8C; clip-path: inset(0 -100vmax); }
.sc-verhaal { box-shadow: 0 0 0 100vmax #E9C9CF; clip-path: inset(0 -100vmax); }
/* Cups + smaak: zijbanden in dezelfde kleur als het canvas (origineel);
   keuze: uniform sectiegroen. */
.sc-cups, .sc-smaak { box-shadow: 0 0 0 100vmax #F6ECE9; clip-path: inset(0 -100vmax); }
.sc-keuze { box-shadow: 0 0 0 100vmax #9CAD8C; clip-path: inset(0 -100vmax); }
.entry-content > .wp-block-group.alignfull.has-cream-background-color:last-of-type {
  box-shadow: 0 0 0 100vmax #F0DFD3; clip-path: inset(0 -100vmax);
}

/* USP-zijbanden: de hero-sectiekleur (roze) loopt naast de canvasbrede
   band gewoon door — exact zoals het origineel. ::before-bleed (z0),
   band erboven (z1). */
.sc-usp { position: relative; }
.sc-usp::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw;
  background: #F1C8CB; z-index: 0;
}
.sc-usp-band { position: relative; z-index: 1; }

/* Drip-banden blijven binnen het canvas — de zijbanden lopen er egaal
   naast door (origineel: dripstroken zijn canvas-elementen, x=0 w=1366). */