/** Shopify CDN: Minification failed

Line 627:0 Unexpected "}"

**/
/*
 * MAZI — LUR Terra Light launch world (homepage story sections).
 *
 * The warm counterpart of mazi-cave.css: sunlit ivory/travertine frames,
 * deep warm brown-black ink, coral #FF3B4F as the single accent. Every
 * terra section paints its OWN Terra ground (background) so the homepage
 * reads fully light even though the site-wide Dawn schemes stay charcoal.
 *
 * Tokens are terra-scoped on purpose — this file must not re-token the
 * global charcoal system (vibes pages and PDP templates depend on it).
 *
 * Typography is the Shopify theme font (Assistant) via Dawn's emitted
 * custom properties, same design direction as the cave world.
 */

:root {
  --terra-font: var(--font-body-family, 'Assistant', -apple-system, sans-serif);
  --terra-page: #EFE6D8;                     /* warm ivory page ground   */
  --terra-surface: #E7DCCB;                  /* raised warm surface      */
  --terra-surface-deep: #DCCDB6;             /* deeper travertine        */
  --terra-porcelain: #FAF6EE;                /* porcelain card surface   */
  --terra-ink: #2A211A;                      /* deep warm brown-black    */
  --terra-ink-dim: rgba(42, 33, 26, 0.68);
  --terra-ink-faint: rgba(42, 33, 26, 0.45);
  --terra-coral: #FF3B4F;                    /* LUR coral — only accent  */
  --terra-coral-deep: #E63446;               /* coral CTA hover          */
  --terra-line: rgba(42, 33, 26, 0.16);
  --terra-line-soft: rgba(42, 33, 26, 0.09);
}

/* ── Shared band scaffolding ─────────────────────────────────── */

.mazi-terra {
  position: relative;
  font-family: var(--terra-font);
  color: var(--terra-ink);
  background: var(--terra-page);
  /* full-bleed: cancel the body's editorial frame gutter */
  margin-inline: calc(-1 * var(--frame-x, 0px));
}

.mazi-terra a:not([class*="__cta"]) { color: inherit; }

.mazi-terra__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--container-max, 1440px);
  margin-inline: auto;
  padding-inline: var(--container-pad, clamp(1.5rem, 5vw, 4.5rem));
}

/* ── Type ────────────────────────────────────────────────────── */

.mazi-terra__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--terra-ink-dim);
  margin: 0 0 1.25rem;
}

.mazi-terra__eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--terra-coral);
  flex: 0 0 auto;
}

.mazi-terra__headline {
  font-family: var(--terra-font);
  font-size: clamp(2.4rem, 4vw + 0.6rem, 5.25rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--terra-ink);
  margin: 0;
  text-wrap: balance;
}

.mazi-terra__body {
  font-size: clamp(0.975rem, 0.4vw + 0.85rem, 1.175rem);
  font-weight: 400;
  line-height: 1.65;
  color: var(--terra-ink-dim);
  margin: 1.5rem 0 0;
  max-width: 44ch;
}

/* ── Buttons ─────────────────────────────────────────────────── */

.mazi-terra__cta,
.mazi-terra__cta-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  font-family: var(--terra-font);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-button, 6px);
  padding: 1rem 2rem;
  transition: background var(--duration-fast, 180ms) var(--ease-out, ease),
              color var(--duration-fast, 180ms) var(--ease-out, ease),
              border-color var(--duration-fast, 180ms) var(--ease-out, ease),
              transform var(--duration-fast, 180ms) var(--ease-out, ease);
}

/* Primary CTA — coral, white label (ink/charcoal buttons are banned) */
.mazi-terra__cta {
  background: var(--terra-coral);
  color: #ffffff;
  border: 1px solid var(--terra-coral);
}
.mazi-terra__cta:hover { background: var(--terra-coral-deep); border-color: var(--terra-coral-deep); transform: translateY(-1px); }

/* Secondary — coral outline on transparent; ink label for contrast on the
   light terra grounds (coral text on ivory is ~3.1:1, too low) */
.mazi-terra__cta-ghost {
  background: transparent;
  color: var(--terra-ink);
  border: 1px solid var(--terra-coral);
}
.mazi-terra__cta-ghost:hover { background: var(--terra-coral); color: #ffffff; }

.mazi-terra__cta--coral {
  background: var(--terra-coral);
  border-color: var(--terra-coral);
  color: #ffffff;
}
.mazi-terra__cta--coral:hover { background: var(--terra-coral-deep); border-color: var(--terra-coral-deep); }

/* ══ THE FILM (pinned scroll-scrubbed 9-shot sequence) ═══════ */
/* Default (no JS, prefers-reduced-motion, old browsers): the shots are
   normal stacked full-viewport poster bands with the same copy.
   initCaveFilm() adds .is-enhanced and takes over: the stage is pinned
   by GSAP ScrollTrigger and scroll position scrubs film time, so the
   match-cuts between shots always land in sync. */

/* De film is full-bleed EN loopt onder de header door: het beeld begint
   bovenaan het scherm en de header zweeft eroverheen. mazi.css duwt
   #MainContent omlaag met de headerhoogte (die de HeaderNav-island meet);
   die offset halen we hier weg. Zonder dit start het beeld onder de
   header en zie je bovenaan een strook paginakleur met de bovenrand van
   het videokader eronder. */
.terra-film {
  background: var(--terra-page);
  /* -header-hoogte haalt de #MainContent-offset weg, -frame-top haalt de
     bovenrand van het editoriale paginakader weg: het beeld raakt zo de
     bovenkant van het scherm. De zijkanten doet .mazi-terra al met
     margin-inline. */
  margin-top: calc(-1 * (var(--mazi-header-height, 180px) + var(--frame-top, 0px)));
}

/* Boven de film zweven alleen de twee panelen van de header. De header
   zelf schildert normaal --color-page achter die panelen: op een gewone
   pagina is dat onzichtbaar (zelfde kleur als de pagina), maar over een
   full-bleed video leest die plaat als een rand rond de header. Enkel de
   plaat gaat weg - de panelen, hun afronding en hun kleur blijven exact
   zoals in het themabestand. */
body:has(.terra-film) .mazi-header {
  background: transparent;
}

.terra-film__shot {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--terra-page);
}

.terra-film__poster,
.terra-film__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.terra-film__poster { user-select: none; -webkit-user-drag: none; }

.terra-film__video { opacity: 0; }
/* De video ligt OVER de poster. Hem zichtbaar maken zodra de driver start
   levert een wit vlak op zolang er nog geen frame gedecodeerd is - dat is
   de witte flits bij het openen. Hij verschijnt nu pas als hij echt beeld
   heeft; tot dan zie je de poster. */
.terra-film.is-enhanced .terra-film__video {
  opacity: 0;
  transition: opacity .28s ease;
}
.terra-film.is-enhanced .terra-film__video.heeft-beeld { opacity: 1; }

/* warm-light scrims: a soft ivory wash behind the copy side keeps the
   deep ink readable on textured or coral-saturated frames without
   dimming the sunlit world */
.terra-film__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.terra-film__scrim--left {
  /* Was een ivoren gradient over de hele linkerhelft. In deze lichte wereld
     is dat een zichtbare waas over het beeld, terwijl de donkere letters ook
     zonder hulp leesbaar zijn. Nu alleen nog een heel lichte aanzet in de
     hoek, voor het geval een shot daar toevallig fel is. */
  background: linear-gradient(105deg, rgba(243, 235, 222, 0.22) 0%, rgba(243, 235, 222, 0.06) 18%, transparent 34%);
}
.terra-film__scrim--right {
  background: linear-gradient(255deg, rgba(243, 235, 222, 0.22) 0%, rgba(243, 235, 222, 0.06) 18%, transparent 34%);
}
.terra-film__scrim--center {
  background: linear-gradient(0deg, rgba(243, 235, 222, 0.5) 0%, rgba(243, 235, 222, 0.16) 32%, transparent 54%);
}

.terra-film__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-inline: var(--container-pad, clamp(1.5rem, 5vw, 4.5rem));
}
.terra-film__overlay--right { align-items: flex-end; }
.terra-film__overlay--center { align-items: center; text-align: center; justify-content: flex-end; padding-bottom: clamp(3rem, 10vh, 6rem); }
.terra-film__overlay--center .mazi-terra__eyebrow { justify-content: center; }

.terra-film__display {
  font-family: var(--terra-font);
  font-size: clamp(2.6rem, 6.5vw + 0.5rem, 8rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 0.98;
  color: var(--terra-ink);
  margin: 0;
  max-width: 14ch;
  text-wrap: balance;
}
.terra-film__overlay--center .terra-film__display { max-width: 18ch; }

.terra-film__body {
  font-size: clamp(1rem, 0.5vw + 0.85rem, 1.25rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--terra-ink-dim);
  margin: 1.5rem 0 0;
  max-width: 40ch;
}

.terra-film__actions { margin-top: clamp(1.75rem, 4vh, 2.75rem); }

/* buy moment: the card lives in the end frame's LEFT negative space
   (the clean shadowed wall left of the plinth) */
.terra-film__overlay--buy {
  align-items: flex-start;
  justify-content: center;
}
.terra-film__card {
  margin-left: clamp(0rem, 2vw, 3rem);
  width: min(100%, 460px);
  background: rgba(250, 246, 238, 0.86);
  border: 1px solid rgba(42, 33, 26, 0.08);
  border-radius: var(--radius-lg, 24px);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 40px 90px rgba(42, 33, 26, 0.18);
}

.terra-buy__title {
  font-family: var(--terra-font);
  font-size: clamp(1.6rem, 1.6vw + 0.9rem, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin: 0;
  color: var(--terra-ink);
}

.terra-film__buyline {
  font-size: clamp(0.975rem, 0.4vw + 0.85rem, 1.15rem);
  line-height: 1.6;
  color: var(--terra-ink-dim);
  margin: 0.875rem 0 0;
}

.terra-buy__priceline {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  margin: 1.25rem 0 0;
}

.terra-buy__price {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--terra-ink);
}

.terra-buy__cta {
  width: 100%;
  margin-top: 1.75rem;
}

/* enhanced: pinned stage, absolutely stacked shots, 150ms crossfade */
.terra-film.is-enhanced .terra-film__stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.terra-film.is-enhanced .terra-film__shot {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
  transition: opacity 150ms linear;
  pointer-events: none;
}
.terra-film.is-enhanced .terra-film__shot.is-active {
  opacity: 1;
  pointer-events: auto;
}
.terra-film.is-enhanced [data-film-overlay] { will-change: opacity; }
.terra-film.is-enhanced .terra-film__card {
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity 500ms var(--ease-out, ease), transform 650ms var(--ease-out, ease);
}
.terra-film.is-enhanced .terra-film__card.is-in {
  opacity: 1;
  transform: none;
}

@media (max-width: 749px) {
  .terra-film__display { font-size: clamp(2.3rem, 11vw, 3.6rem); }
  /* copy drops into the bottom wash on small screens (the focal point
     of every shot lives in the upper two-thirds) */
  .terra-film__overlay {
    justify-content: flex-end;
    padding-bottom: clamp(4rem, 12vh, 7rem);
  }
  .terra-film__overlay--buy {
    align-items: center;
    justify-content: flex-end;
    padding-bottom: clamp(2.5rem, 8vh, 4.5rem);
  }
  .terra-film__card { margin-left: 0; }
  /* mobile: side scrims become bottom washes (copy reads over the lower
     third at narrow widths) */
  .terra-film__scrim--left,
  .terra-film__scrim--right {
    background: linear-gradient(0deg, rgba(243, 235, 222, 0.78) 0%, rgba(243, 235, 222, 0.34) 38%, transparent 64%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .terra-film__video { display: none; }
}

/* ══ MOSAIC (campagne stills) ════════════════════════════════ */

.terra-mosaic { padding-block: clamp(4rem, 10vh, 8rem) clamp(2rem, 5vh, 4rem); }

.terra-mosaic__head {
  max-width: 720px;
  margin-bottom: clamp(2.25rem, 6vh, 4rem);
}

.terra-mosaic__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: clamp(130px, 19vw, 320px);
  grid-auto-flow: dense;
  gap: clamp(0.5rem, 1vw, 1rem);
}

.terra-mosaic__tile {
  position: relative;
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  background: var(--terra-surface);
}

.terra-mosaic__tile--std { grid-column: span 2; grid-row: span 1; }
.terra-mosaic__tile--tall { grid-column: span 2; grid-row: span 2; }
.terra-mosaic__tile--wide { grid-column: span 4; grid-row: span 2; }

.terra-mosaic__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out, ease);
}

.terra-mosaic__tile:hover img { transform: scale(1.035); }

.terra-mosaic__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 2.25rem 1.1rem 0.9rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  background: linear-gradient(0deg, rgba(42, 33, 26, 0.66), transparent);
  opacity: 0;
  transition: opacity 400ms var(--ease-out, ease);
  pointer-events: none;
}

.terra-mosaic__tile:hover .terra-mosaic__caption { opacity: 1; }

@media (max-width: 749px) {
  .terra-mosaic__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(130px, 34vw, 220px);
  }
  .terra-mosaic__tile--std { grid-column: span 1; grid-row: span 1; }
  .terra-mosaic__tile--tall { grid-column: span 1; grid-row: span 2; }
  .terra-mosaic__tile--wide { grid-column: span 2; }
  .terra-mosaic__caption { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .terra-mosaic__tile img { transition: none; }
}

/* ══ RANGE ("binnenkort" universe) ═══════════════════════════ */

.terra-range { padding-block: clamp(4rem, 10vh, 7rem) clamp(5rem, 12vh, 9rem); }

.terra-range__head { max-width: 720px; margin-bottom: clamp(2.25rem, 6vh, 4rem); }

.terra-range__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--terra-line);
}

.terra-range__item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.5rem 2rem;
  padding: clamp(1.25rem, 3vh, 1.9rem) 0.25rem;
  border-bottom: 1px solid var(--terra-line);
  transition: padding-left 400ms var(--ease-out, ease);
}

.terra-range__item:hover { padding-left: 0.9rem; }

.terra-range__name {
  font-size: clamp(1.4rem, 1.8vw + 0.6rem, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--terra-ink);
  margin: 0;
}

.terra-range__sub {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terra-ink-faint);
}

.terra-range__status {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--terra-coral);
  white-space: nowrap;
}

.terra-range__foot {
  margin: 1.75rem 0 0;
  font-size: 0.82rem;
  color: var(--terra-ink-faint);
  letter-spacing: 0.04em;
}

@media (max-width: 749px) {
  .terra-range__item { grid-template-columns: 1fr; }
}

/* ══ PROSE (philosophy) ══════════════════════════════════════ */

.terra-prose {
  padding: var(--prose-pad-top, 120px) var(--container-pad, clamp(1.5rem, 5vw, 4.5rem)) var(--prose-pad-bottom, 96px);
}

.terra-prose__inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.terra-prose__headline {
  font-family: var(--terra-font);
  font-size: clamp(2.25rem, 4vw + 1rem, 6rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--terra-ink);
  margin: 0 0 2.25rem;
  text-wrap: balance;
}

.terra-prose__paragraph {
  font-family: var(--terra-font);
  font-size: clamp(1rem, 0.7vw + 0.7rem, 1.4rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--terra-ink-dim);
  margin: 0 0 1.5rem;
  text-wrap: pretty;
}

.terra-prose__paragraph:last-of-type { margin-bottom: 0; }

/* ══ DE VOLGENDE (KIWI BOUNCE) ══════════════════════════════
   Zit tussen de campagnemozaïek en de familielijst. De drie beelden
   staan versprongen zoals in het lookbook, zodat het niet als een
   productblok leest maar als een aankondiging. */

.terra-next {
  padding: clamp(4rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem);
}

.terra-next__head {
  max-width: 720px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.terra-next__title {
  font-size: clamp(2.75rem, 7vw, 6rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0 0 1.25rem;
  color: var(--terra-ink);
}

.terra-next__body {
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.25rem);
  line-height: 1.7;
  color: var(--terra-ink-dim);
  margin: 0 0 1.5rem;
  max-width: 46ch;
}

/* De datum krijgt de coral, want dat is het enige wat hier echt nieuws is. */
.terra-next__when {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-lur, #FF3B4F);
  border: 1px solid currentColor;
  border-radius: var(--radius-button, 6px);
  padding: 0.55rem 1rem;
  margin: 0;
}

.terra-next__beelden {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(2rem, 4.2vw, 3.6rem);
  align-items: start;
}

/* Drie beelden die elkaar echt overlappen, zonder rand en zonder kader:
   alleen een zachte schaduw geeft de laagvolgorde aan. Geen witte lijn,
   want die knipt de compositie juist weer uit elkaar. */
.terra-next__shot { margin: 0; position: relative; }

.terra-next__shot img {
  width: 100%;
  display: block;
  border-radius: var(--radius-button, 6px);
  box-shadow: 0 18px 44px rgba(42, 33, 26, 0.16);
}

/* groot en staand, links, achteraan */
.terra-next__shot--1 { grid-column: 1 / 7;  grid-row: 1 / 13; z-index: 1; }
/* de mens, overlapt het eerste beeld, ligt vooraan */
.terra-next__shot--2 { grid-column: 5 / 10; grid-row: 4 / 15; z-index: 3; }
/* het duo, rechts, schuift onder de mens door */
.terra-next__shot--3 { grid-column: 8 / 13; grid-row: 2 / 11; z-index: 2; }

/* Mobiel: dezelfde gelaagdheid, maar staand gestapeld en met minder
   overlap, zodat er nergens iets belangrijks onder verdwijnt. */
@media (max-width: 749px) {
  .terra-next__beelden { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 2.1rem; }
  .terra-next__shot img { box-shadow: 0 12px 28px rgba(42, 33, 26, 0.14); }
  .terra-next__shot--1 { grid-column: 1 / 6;  grid-row: 1 / 11;  z-index: 1; }
  .terra-next__shot--2 { grid-column: 3 / 7;  grid-row: 8 / 19;  z-index: 3; }
  .terra-next__shot--3 { grid-column: 1 / 5;  grid-row: 17 / 25; z-index: 2; }
}
}

/* ── beweging op de homepage ──────────────────────────────────
   Zelfde zachte inzoom als op de productpagina: de mozaïek en de
   kiwi-compositie leven mee als je erover gaat. */
.terra-mosaic__tile,
.terra-next__shot {
  overflow: hidden;
  border-radius: var(--radius-button, 6px);
}

.terra-mosaic__tile img,
.terra-next__shot img {
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.terra-mosaic__tile:hover img,
.terra-next__shot:hover img { transform: scale(1.045); }

@media (prefers-reduced-motion: reduce) {
  .terra-mosaic__tile img, .terra-next__shot img { transition: none; }
  .terra-mosaic__tile:hover img, .terra-next__shot:hover img { transform: none; }
}

/* ── Kiwi Bounce: film, carrousel, actieven ────────────────────────────
   De film staat op mobiel VOLLEDIG over de breedte: op een telefoon is 9:16
   het hele scherm, en dan is elke marge weggegooide ruimte. Op desktop zou
   diezelfde clip een toren worden, dus daar krijgt hij een maximum en staat
   hij gecentreerd. */
.terra-next__film {
  margin: clamp(2.5rem, 5vw, 4.5rem) auto 0;
  text-align: center;
}
.terra-next__video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
}
.terra-next__filmline {
  margin: 1.1rem 0 0;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--terra-muted, #8A7B6B);
}
@media (min-width: 750px) {
  .terra-next__film { max-width: 420px; }
  .terra-next__video {
    border-radius: var(--radius-button, 6px);
    box-shadow: 0 24px 60px rgba(60, 42, 28, .16);
  }
}

.terra-next__carrousel { margin-top: clamp(2.5rem, 5vw, 4rem); }
.terra-next__carrousel .pdp-carrousel__kaart img {
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;   /* wint van het height-attribuut, anders rekt het beeld op */
  object-fit: cover;
  display: block;
  border-radius: var(--radius-button, 6px);
}

.terra-next__actieven {
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  max-width: 640px;
}
.terra-next__subkop {
  margin: 0 0 1.4rem;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--terra-ink, #2A211A);
}
.terra-next__lijst { list-style: none; margin: 0; padding: 0; }
.terra-next__lijst li {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: .4rem 1.5rem;
  padding: .95rem 0;
  border-top: 1px solid var(--terra-line, #DCCDB6);
}
.terra-next__lijst li:last-child { border-bottom: 1px solid var(--terra-line, #DCCDB6); }
.terra-next__naam {
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--terra-ink, #2A211A);
  padding-top: .2rem;
}
.terra-next__claim { color: var(--terra-muted, #8A7B6B); line-height: 1.6; }
.terra-next__foot {
  margin: 1.6rem 0 0;
  font-size: .82rem;
  color: var(--terra-muted, #8A7B6B);
}
@media (max-width: 640px) {
  .terra-next__lijst li { grid-template-columns: 1fr; gap: .3rem; }
  .terra-next__naam { padding-top: 0; }
}

/* De familie krijgt beeld naast de naam. Nu nog placeholders; zodra de
   echte foto's er zijn is het één bestandsnaam wisselen. */
.terra-range__beeld {
  width: clamp(64px, 9vw, 104px);
  aspect-ratio: 4 / 5;
  height: auto;   /* wint van het height-attribuut, anders rekt het beeld op */
  object-fit: cover;
  border-radius: var(--radius-button, 6px);
  margin-right: clamp(1rem, 2.5vw, 1.75rem);
  flex: 0 0 auto;
}
.terra-range__item { display: flex; align-items: center; }

/* ── Kop en tekst per shot ─────────────────────────────────────────────
   De eyebrow mag groter en de kop eronder juist iets rustiger: nu leest
   de productnaam als aankondiging en de zin eronder als toelichting. */
html .terra-film__display { font-size: clamp(2rem, 5.2vw, 4rem); line-height: 1.06; }

/* Bij elke overgang faden de teksten uit en weer in. Zonder dit springt de
   volgende kop er hard in terwijl het beeld nog doorloopt. */
.terra-film__overlay { transition: opacity .5s ease; }
.terra-film__shot:not(.is-active) .terra-film__overlay { opacity: 0; }
.terra-film__shot.is-active .terra-film__overlay { opacity: 1; }
/* De ingrediëntenregel komt trager op dan de rest: die hoort te landen als
   het beeld al even bezig is. */
.terra-film__shot .terra-film__display { transition: opacity .8s ease .25s; }

/* "Stap in het serum" hoort onderaan in het midden, op één regel. */
.terra-film__overlay--center .terra-film__display { white-space: nowrap; }

/* ── De productnaam hoort bij de film, niet bij een shot ───────────────
   Hij stond alleen op het eerste beeld en verdween daarna. Nu staat hij
   op elk beeld linksboven, ALTIJD links - ook op het shot waar de kop
   gecentreerd staat - en faadt hij mee met elke overgang. Absoluut
   geplaatst, zodat hij niet meeschuift met de kop eronder.

   Het UITERLIJK komt van .mazi-terra__eyebrow (in de opmaak staan beide
   klassen naast elkaar): hetzelfde koraalkleurige streepje, dezelfde
   grootte en letterafstand als overal elders op de pagina. Hier regelen
   we alleen nog de PLAATS. */
/* De productnaam staat DIRECT boven de kop, niet los bovenaan het kader:
   samen lezen ze als een aankondiging met een zin eronder, terwijl hij
   bovenaan als een los etiket bleef hangen. Hij loopt dus gewoon mee in
   de tekstkolom. */
.terra-film__label {
  margin: 0 0 clamp(.75rem, 1.6vh, 1.25rem);
  pointer-events: none;
}
/* Behalve op het gecentreerde shot: daar staat de kop onderaan in het
   midden, en een productnaam die daar vlak boven meeschuift zou de regel
   uit balans trekken. Daar blijft hij dus wel linksboven staan. */
.terra-film__overlay--center .terra-film__label {
  position: absolute;
  top: calc(var(--mazi-header-height, 180px) + clamp(1rem, 3vh, 2.25rem));
  left: var(--container-pad, clamp(1.5rem, 5vw, 4.5rem));
  margin: 0;
  justify-content: flex-start;
  text-align: left;
}
/* Op smalle schermen mag hij over twee regels breken in plaats van de
   halve pagina uit te lopen. */
@media (max-width: 749px) {
  .terra-film__label { align-items: flex-start; max-width: 70vw; }
  .terra-film__label::before { margin-top: .55em; }
}

/* "Stap in het serum" stond te laag tegen de onderrand geplakt. Hoger in
   het kader leest hij als onderdeel van het beeld in plaats van als
   bijschrift eronder. */
html .terra-film__overlay--center { padding-bottom: clamp(6rem, 22vh, 13rem); }

/* Het koopmoment: de kaart hoort in de rechterkant van het eindbeeld. */
html .terra-film__overlay--buy { align-items: flex-end; }
html .terra-film__card { margin-left: 0; margin-right: clamp(0rem, 2vw, 3rem); }
@media (max-width: 749px) {
  html .terra-film__overlay--buy { align-items: center; }
  html .terra-film__card { margin-right: 0; }
}

/* ── Kiwi Bounce: de film is liggend geworden ──────────────────────────
   Het vak stond op 9:16 met 420px breed, gebouwd voor een staande clip.
   Deze opname is 16:9 en toont de pot, de drukschijf en de lotion breed
   in beeld; in het oude vak sneed dat de helft eraf. Nu volgt het vak de
   opname en mag hij breder staan, want een liggend beeld van 420px leest
   als een thumbnail. */
html .terra-next__video { aspect-ratio: 16 / 9; }
@media (min-width: 750px) {
  /* Rand tot rand. Een liggende clip binnen de kolombreedte leest als een
     ingesloten filmpje; over de volle breedte leest hij als een band, en
     dat is wat deze opname aankan. */
  html .terra-next__film {
    max-width: none;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    border-radius: 0;
  }
  html .terra-next__video { border-radius: 0; box-shadow: none; }
  html .terra-next__filmline { padding-inline: var(--container-pad, clamp(1.5rem, 5vw, 4.5rem)); }
}


/* De ingredientenregel staat rechts: na vier beelden met de tekst links
   is dat het moment waarop het kantelt, en de opname heeft daar zijn
   lege kant. */
html .terra-film__overlay--right { align-items: flex-end; text-align: right; }
html .terra-film__overlay--right .mazi-terra__eyebrow,
html .terra-film__overlay--right .terra-film__label { justify-content: flex-end; }
html .terra-film__overlay--right .terra-film__label::before { order: 2; }

/* ── De opsomming komt zin voor zin op ────────────────────────────────
   Vier actieven die tegelijk verschijnen lees je als een blok tekst; een
   voor een lees je ze als vier dingen. De vertraging staat op de span en
   loopt mee met de fade van de overlay eromheen. */
.terra-film__display--per-zin span {
  display: block;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease;
}
.terra-film__shot.is-active .terra-film__display--per-zin span {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--zin, 0) * .22s);
}
@media (prefers-reduced-motion: reduce) {
  .terra-film__display--per-zin span { opacity: 1; transform: none; transition: none; }
}

/* De ingredientenregel staat rechts, maar niet tegen de rand: het scherm
   in vieren gedacht hoort hij op de grens tussen het derde en het vierde
   vak te beginnen. Vandaar de extra ruimte aan de rechterkant. */
html .terra-film__overlay--right { padding-right: clamp(1.5rem, 13vw, 15rem); }
@media (max-width: 989px) {
  html .terra-film__overlay--right { padding-right: var(--container-pad, clamp(1.5rem, 5vw, 4.5rem)); }
}

/* ── "LUR, van dichtbij" op een telefoon ───────────────────────────────
   Het metselwerk van hele en halve tegels valt op twee kolommen uit
   elkaar: dense-flow schuift beelden naar gaten die er op een breed
   scherm niet zijn, en je krijgt een rommelige stapel. Op een telefoon
   werkt een veegbare rij beter - een beeld tegelijk, groot genoeg om
   iets te zien, met het volgende half in beeld zodat je ziet dat er meer
   is. Geen JS nodig: scroll-snap doet het werk. */
@media (max-width: 749px) {
  html .terra-mosaic__grid {
    display: flex;
    grid-template-columns: none;
    grid-auto-rows: auto;
    gap: 0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* rand tot rand vegen, maar de eerste tegel begint op de tekstmarge */
    padding-inline: var(--container-pad, clamp(1.5rem, 5vw, 4.5rem));
    margin-inline: calc(-1 * var(--container-pad, clamp(1.5rem, 5vw, 4.5rem)));
  }
  html .terra-mosaic__grid::-webkit-scrollbar { display: none; }
  html .terra-mosaic__tile,
  html .terra-mosaic__tile--std,
  html .terra-mosaic__tile--tall,
  html .terra-mosaic__tile--wide {
    grid-column: auto;
    grid-row: auto;
    flex: 0 0 76vw;
    aspect-ratio: 4 / 5;
    scroll-snap-align: center;
  }
}


/* ── "Herfst 2026" in de familielijst ──────────────────────────────────
   Stond in de merkkleur, waardoor het als een aanbieding las in plaats
   van als een datum. Zwart en rechts van de naam is gewoon informatie. */
html .terra-range__status {
  color: var(--terra-ink, #2A211A);
  margin-left: auto;
  text-align: right;
}

/* ── De aankondigingsbalk bij binnenkomst ──────────────────────────────
   Op de filmpagina is het eerste beeld de tube in volle hoogte. Een balk
   erboven eet daar een strook van af, precies bij het enige beeld waar
   dat opvalt. Hij begint dus ingeklapt en verschijnt pas als je terug
   naar boven scrolt - dan lees je hem ook echt.

   Het is de header zelf niet die verandert: die blijft byte-identiek aan
   het merkrepo. Dit is een regel VAN BUITENAF, op basis van een klasse op
   body die het script hieronder zet. */
body:has(.terra-film):not(.toon-aankondiging) .mazi-header__announce-wrap {
  max-height: 0;
}