/* Landingspagina's met layout-landing (sinds 2 okt 2026, eerste: /droomband).
   Alleen deze pagina's laden dit bestand; alles hangt onder .lp- of .lp-body.
   Kleuren uit tokens.css, plus één eigen nachtblauw-plum voor het stappenplan.
   LET OP: nooit de padding-shorthand op een element met .container (zie het
   gutter-vangnet in app.css); hier overal padding-block. */

.lp-body { background: var(--cream); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lp { --lp-night: #2E1D2B; --lp-night-2: #3B2638; overflow-x: clip; }

/* ---------- Kale header ---------- */
.lp-top { background: var(--surface); border-bottom: var(--line-h); position: sticky; top: 0; z-index: 40; }
.lp-top__bar { display: flex; align-items: center; justify-content: space-between; min-height: 60px; }
.lp-top .brand { color: var(--plum); }
.lp-top__cart { position: relative; display: inline-flex; padding: 4px; color: var(--plum); }
.lp-top__cart:hover { color: var(--terracotta); }

/* ---------- Typografie ---------- */
.lp-eyebrow { margin: 0 0 10px; font: 700 var(--step--1)/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--terracotta); }
.lp-eyebrow--light { color: var(--promo); }
.lp-h1 { margin: 0 0 14px; font: 600 clamp(2rem, 7vw, 3.1rem)/1.05 var(--font-display); color: var(--plum); letter-spacing: -.01em; }
.lp-h2 { margin: 0; font: 600 var(--step-3)/1.12 var(--font-display); color: var(--plum); }
.lp-lede { margin: 0 0 18px; font-size: 1.06rem; line-height: 1.6; color: var(--ink); max-width: 56ch; }
.lp-head { text-align: center; margin-bottom: clamp(24px, 4vw, 40px); }
.lp-head--left { text-align: left; margin-bottom: 20px; }

/* Sterretjes: puur decoratief, radiale stipjes. */
.lp-stars { position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(2px 2px at 12% 18%, var(--gold) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 28% 72%, var(--gold) 50%, transparent 52%),
    radial-gradient(2px 2px at 78% 12%, var(--gold) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 90% 58%, var(--gold) 50%, transparent 52%),
    radial-gradient(2.5px 2.5px at 62% 88%, var(--gold) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 46% 8%, var(--gold) 50%, transparent 52%); }

/* ---------- Koopblok ---------- */
.lp-hero { position: relative; background:
    radial-gradient(60% 70% at 15% 0%, var(--plum-wash) 0%, transparent 70%),
    radial-gradient(50% 60% at 100% 100%, var(--terracotta-wash) 0%, transparent 70%),
    var(--cream); padding-block: clamp(20px, 4vw, 56px) clamp(32px, 5vw, 64px); }
.lp-hero__grid { position: relative; display: grid; gap: clamp(22px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) { .lp-hero__grid { grid-template-columns: 1.05fr 1fr; } }

.lp-stage { min-width: 0; }
@media (min-width: 900px) { .lp-stage { position: sticky; top: 84px; } }
.lp-stage__main { position: relative; background: #fff; isolation: isolate; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 1; }
/* Absoluut in het vierkant: Safari op iOS rondde de hoogte van de strook af en liet
   dan een wit randje van het vak onder de foto zien. */
.lp-stage__track { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lp-stage__track::-webkit-scrollbar { display: none; }
.lp-stage__track:focus-visible { outline: 2px solid var(--plum); outline-offset: -4px; }
.lp-stage__slide { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; display: block; scroll-snap-align: center; scroll-snap-stop: always; }
.lp-stage__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: none; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: var(--shadow); color: var(--plum); cursor: pointer; }
.lp-stage__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lp-stage__nav--prev { left: 10px; }
.lp-stage__nav--next { right: 10px; }
@media (min-width: 900px), (hover: hover) and (pointer: fine) { .lp-stage__nav { display: grid; } }
.lp-stage__count { position: absolute; right: 12px; bottom: 12px; background: rgba(43,29,46,.72); color: #fff; font: 700 12px/1 var(--font-body); padding: 6px 10px; border-radius: var(--radius-pill); pointer-events: none; }
.lp-stage__tag { position: absolute; left: 14px; top: 14px; background: var(--plum); color: #fff; font: 700 12px/1 var(--font-body); padding: 7px 11px; border-radius: var(--radius-pill); letter-spacing: .04em; }
.lp-stage__thumbs { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.lp-stage__thumbs::-webkit-scrollbar { display: none; }
.lp-stage__thumb { flex: none; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm); overflow: hidden; background: #fff; cursor: pointer; }
.lp-stage__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-stage__thumb.is-on { border-color: var(--plum); }

.lp-buy { min-width: 0; }
.lp-price { margin: 0 0 18px; }
.lp-price .price { font: 600 2rem/1 var(--font-display); color: var(--terracotta); }

.lp-pick { margin-bottom: 18px; }
.lp-pick__label { margin: 0 0 10px; color: var(--muted); }
.lp-pick__label strong { color: var(--plum); }
.lp-pick__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 420px) { .lp-pick__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } }
.lp-pick__opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 2px 6px; background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer; color: var(--ink); font: 600 11.5px/1.15 var(--font-body); transition: border-color .15s, transform .15s; min-width: 0; }
.lp-pick__opt img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 10px; background: #fff; }
.lp-pick__opt span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-pick__opt:hover { border-color: var(--plum-soft); transform: translateY(-1px); }
.lp-pick__opt.is-on { border-color: var(--plum); box-shadow: 0 0 0 2px var(--plum-wash); }
.lp-pick__opt[disabled] { opacity: .4; cursor: not-allowed; }

.lp-order { display: flex; flex-direction: column; gap: calc(var(--space) * 2); }
.lp-duo { margin: 0; font-size: var(--step--1); color: var(--muted); text-align: center; }

/* ---------- Feitenstrook ---------- */
.lp-facts { background: var(--plum); color: #fff; }
.lp-facts__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; padding-block: 16px; text-align: center; font-size: .92rem; }
.lp-facts__row b { display: block; font: 600 1.15rem/1.2 var(--font-display); color: var(--promo); }
@media (min-width: 760px) { .lp-facts__row { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Secties ---------- */
.lp-section { padding-block: clamp(48px, 7vw, 88px); }
.lp-section--wash { background: var(--cream-deep); }
.lp-narrow { max-width: 860px; }

.lp-why { display: grid; gap: 18px; }
@media (min-width: 640px) { .lp-why { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .lp-why { grid-template-columns: repeat(4, 1fr); } }
.lp-why__card { background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.lp-why__card img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center; display: block; background: #fff; }
.lp-why__card > div { padding: 18px 20px 22px; }
.lp-why__card h3 { margin: 0 0 6px; font: 600 1.2rem/1.2 var(--font-display); color: var(--plum); }
.lp-why__card p { margin: 0; color: var(--muted); line-height: 1.55; }

/* ---------- Stappenplan (nacht) ---------- */
.lp-night { position: relative; background: linear-gradient(180deg, var(--lp-night) 0%, var(--lp-night-2) 100%); color: #F4ECE6; padding-block: clamp(52px, 7vw, 92px); }
.lp-night .lp-h2 { color: #fff; }
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; position: relative; }
@media (min-width: 860px) { .lp-steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.lp-steps li { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius-lg); padding: 24px 22px; }
.lp-steps__n { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--promo); color: var(--promo-ink); font: 700 1.2rem/1 var(--font-display); margin-bottom: 14px; }
.lp-steps h3 { margin: 0 0 6px; font: 600 1.25rem/1.2 var(--font-display); color: #fff; }
.lp-steps p { margin: 0; line-height: 1.6; color: rgba(244, 236, 230, .82); }

/* ---------- Alle dieren ---------- */
.lp-zoo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 760px) { .lp-zoo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.lp-zoo__card { background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.lp-zoo__card img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.lp-zoo__pick { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.lp-zoo__pick:focus-visible { outline: 3px solid var(--plum); outline-offset: -3px; }
.lp-zoo__pick:disabled { cursor: default; }
.lp-zoo__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px 14px; border-top: var(--line-h); }
.lp-zoo__foot h3 { margin: 0; font: 600 1.05rem/1.2 var(--font-display); color: var(--plum); }
.lp-zoo__foot .price { font-weight: 700; color: var(--terracotta); font-size: .95rem; }
.lp-zoo__btn { padding: 11px; flex: none; }
.lp-zoo__btn .icon { width: 20px; height: 20px; stroke: #fff; }
.lp-zoo__btn span { display: none; }
@media (min-width: 1040px) { .lp-zoo__btn { padding: 11px 18px; font-size: .92rem; } .lp-zoo__btn span { display: inline; } }

/* ---------- Vergelijking ---------- */
.lp-compare { overflow-x: auto; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.lp-compare table { width: 100%; border-collapse: collapse; min-width: 520px; }
.lp-compare th, .lp-compare td { padding: 14px 12px; border-bottom: var(--line-h); text-align: center; vertical-align: middle; }
.lp-compare tbody tr:last-child th, .lp-compare tbody tr:last-child td { border-bottom: 0; }
.lp-compare thead th { font: 700 .82rem/1.25 var(--font-body); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.lp-compare tbody th { text-align: left; font-weight: 600; color: var(--ink); font-size: .95rem; }
.lp-compare .is-us { background: var(--plum-wash); }
.lp-compare thead .is-us { background: var(--plum); color: #fff; border-radius: var(--radius) var(--radius) 0 0; font: 600 1rem/1.2 var(--font-display); text-transform: none; letter-spacing: 0; }
.lp-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.lp-mark svg { width: 16px; height: 16px; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lp-mark--yes { background: var(--sage); }
.lp-mark--yes svg { stroke: #fff; }
.lp-mark--no { background: #F4E4E0; }
.lp-mark--no svg { stroke: #B5523A; }
.lp-mark--half { background: var(--cream-deep); }
.lp-mark--half svg { stroke: var(--muted); }

/* ---------- Specificaties + FAQ ---------- */
.lp-split { display: grid; gap: 44px; }
@media (min-width: 900px) { .lp-split { grid-template-columns: 1fr 1.3fr; gap: 64px; } }
.lp-specs { margin: 0; background: var(--surface); border-radius: var(--radius-lg); padding: 6px 20px; box-shadow: var(--shadow-sm); }
.lp-specs div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding-block: 12px; border-bottom: var(--line-h); }
.lp-specs div:last-child { border-bottom: 0; }
.lp-specs dt { font-weight: 700; color: var(--plum); }
.lp-specs dd { margin: 0; color: var(--ink); }
.lp-faq details { background: var(--surface); border-radius: var(--radius); margin-bottom: 10px; box-shadow: var(--shadow-sm); }
.lp-faq summary { cursor: pointer; list-style: none; padding: 16px 48px 16px 18px; font-weight: 700; color: var(--plum); position: relative; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 400 1.5rem/1 var(--font-body); color: var(--terracotta); }
.lp-faq details[open] summary::after { content: '\2212'; }
.lp-faq p { margin: 0; padding: 0 18px 18px; line-height: 1.6; color: var(--muted); }
.lp-faq p a { display: block; margin-top: 8px; color: var(--terracotta); font-weight: 600; }

/* ---------- Slot ---------- */
.lp-close { background: var(--cream-deep); padding-block: 0 clamp(48px, 7vw, 80px); }
.lp-close__inner { display: grid; gap: 24px; align-items: center; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; padding: 0; }
.lp-close__inner img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; display: block; }
.lp-close__inner > div { padding: 0 24px 28px; }
.lp-close__inner p { color: var(--muted); margin: 10px 0 20px; }
@media (min-width: 760px) {
  .lp-close__inner { grid-template-columns: 340px 1fr; }
  .lp-close__inner > div { padding: 28px 40px 28px 0; }
}

/* ---------- Sticky koopbalk (alleen telefoon) ---------- */
.lp-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; align-items: center; gap: 10px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: var(--line-h); box-shadow: 0 -10px 30px -18px rgba(74, 44, 64, .5); transform: translateY(110%); transition: transform .25s var(--ease, ease); }
.lp-sticky.is-on { transform: none; }
.lp-sticky img { width: 44px; height: 44px; border-radius: 10px; object-fit: contain; background: #fff; border: var(--line-h); flex: none; }
.lp-sticky__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.lp-sticky__txt strong { color: var(--plum); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-sticky__txt .price { color: var(--terracotta); font-weight: 700; font-size: .9rem; }
.lp-sticky .btn { padding: 13px 18px; font-size: .95rem; flex: none; }
@media (min-width: 900px) { .lp-sticky { display: none; } }
@media (max-width: 899px) { .lp-body .site-footer { padding-bottom: 76px; } }