/* ============================================================
   SHOP — tourpagina en checkout.

   Additief bovenop style.css en variant-v2-extra.css, net als die
   laatste additief is bovenop style.css. Alleen nieuwe classes,
   en het leunt op de bestaande --v2-* variabelen, dus het donkere
   thema doet vanzelf mee.
   ============================================================ */

/* De nav staat fixed en heeft op deze pagina's geen donkere hero om
   overheen te liggen. Net als .page-hero maakt de eerste sectie hier dus
   zelf ruimte — anders schuift de inhoud eronder, op mobiel het ergst
   (de balk is daar bijna 100px hoog). */
.page-body > main.v2-section,
.page-body > main > .v2-section{ padding-top:9rem; }

/* In de v4-popup blijft de inhoud volledig bruikbaar, zonder een tweede
   navigatie en footer binnen het venster. Direct bezochte pagina's behouden
   hun normale kop en voettekst. */
html[data-embed="true"] .page-body > #nav,
html[data-embed="true"] .page-body > footer{ display:none; }
html[data-embed="true"] .page-body > main.v2-section,
html[data-embed="true"] .page-body > main > .v2-section{ padding-top:2.25rem; }
html[data-embed="true"] .checkout-back{ display:none; }


/* ══ TOURPAGINA ═══════════════════════════════════════════════ */

.shop-tour{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:3.5rem;
  align-items:start;
}
.shop-tour-visual{ position:sticky; top:7rem; text-align:center; }
.shop-tour-body .v2-headline{ margin:.2rem 0 1.4rem; }

.shop-status-note{
  margin-top:2rem; padding:1.1rem 1.3rem;
  border:1px solid var(--v2-parch-dk); border-radius:10px;
  font-family:'Cormorant Garamond',serif; font-size:1.12rem;
  color:var(--v2-ink-soft); background:rgba(197,160,89,.06);
}

@media (max-width:860px){
  .shop-tour{ grid-template-columns:1fr; gap:2.2rem; }
  .shop-tour-visual{ position:static; }
}


/* ══ CHECKOUT ═════════════════════════════════════════════════ */

/* De kassa-nav heeft geen menu, dus hij mag smaller. */
.page-nav--checkout{ justify-content:space-between; }

/* ── Stappenrij ──────────────────────────────────────────── */
.checkout-steps{
  list-style:none; margin:0 0 3rem; padding:0;
  display:flex; justify-content:center; align-items:center; gap:1rem;
  flex-wrap:wrap;
}
.checkout-steps li{
  display:flex; align-items:center; gap:.6rem;
  font-family:'Cinzel',serif; font-size:.72rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--v2-ink-soft); opacity:.5;
}
.checkout-steps li + li::before{
  content:""; width:2.4rem; height:1px; background:var(--v2-parch-dk); margin-right:.4rem;
}
.checkout-steps li span{
  display:grid; place-items:center; width:1.9rem; height:1.9rem; border-radius:50%;
  border:1.5px solid var(--v2-parch-dk); font-size:.78rem;
}
.checkout-steps li.is-done{ opacity:.85; }
.checkout-steps li.is-done span{
  background:var(--v2-gold-dp); border-color:var(--v2-gold-dp); color:var(--v2-cream);
}
.checkout-steps li.is-current{ opacity:1; color:var(--v2-ink); }
.checkout-steps li.is-current span{ border-color:var(--v2-gold-dp); color:var(--v2-gold-dp); }

/* Op de bevestiging is de hele reeks afgelopen. Vinkjes in plaats van
   cijfers, want een cijfer nodigt uit tot "en nu stap 3 nog". */
.checkout-steps--klaar li{ opacity:1; }
.checkout-steps--klaar li span{ font-size:0; }
.checkout-steps--klaar li span::after{
  content:"\2713"; font-size:.85rem; line-height:1;
}

/* ── Twee kolommen ───────────────────────────────────────── */
.checkout-grid{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:3rem; align-items:start;
}
#checkout-body[hidden], #checkout-unavailable[hidden] { display: none; }
.checkout-form .v2-headline{ margin:0 0 1.8rem; }
.checkout-intro{ max-width:40rem; margin:-.7rem 0 2rem; }

/* ── Velden ──────────────────────────────────────────────── */
.field{ margin-bottom:1.5rem; }
.field label{
  display:block; margin-bottom:.45rem;
  font-family:'Cinzel',serif; font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--v2-ink);
}
.field-optional{ text-transform:none; letter-spacing:0; opacity:.55; font-family:'Lora',serif; }
.field input[type="email"],
.field select,
.field textarea{
  width:100%; padding:.85rem 1rem;
  font-family:'Lora',serif; font-size:1rem; color:var(--v2-ink);
  background:var(--v2-cream);
  border:1.5px solid var(--v2-parch-dk); border-radius:8px;
}
.field textarea{ resize:vertical; min-height:5rem; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--v2-gold-dp);
  box-shadow:0 0 0 3px rgba(197,160,89,.18);
}
.field input:user-invalid{ border-color:#a33b2b; }
.field-help{
  margin:.5rem 0 0; font-family:'Cormorant Garamond',serif;
  font-size:1rem; color:var(--v2-ink-soft); opacity:.85;
}

.gift-fields{
  padding:1.3rem 1.3rem .2rem; margin-bottom:1.5rem;
  border:1px solid var(--v2-parch-dk); border-radius:10px;
  background:rgba(197,160,89,.05);
}

/* ── Vinkjes ─────────────────────────────────────────────── */
.check{
  display:flex; align-items:flex-start; gap:.75rem;
  font-family:'Cormorant Garamond',serif; font-size:1.08rem; line-height:1.5;
  color:var(--v2-ink); cursor:pointer;
  text-transform:none; letter-spacing:0;
}
.field--check{ margin-bottom:1.5rem; }
.check input[type="checkbox"]{
  flex:none; width:1.15rem; height:1.15rem; margin-top:.2rem;
  accent-color:var(--v2-gold-dp); cursor:pointer;
}
.check a{ color:var(--v2-gold-dp); text-decoration:underline; }

.consent{
  border:1px solid var(--v2-parch-dk); border-radius:10px;
  padding:1.2rem 1.4rem; margin:0 0 1.8rem;
}
.check--waiver span{ font-size:1rem; color:var(--v2-ink-soft); }
.consent-note{
  margin:.9rem 0 0; padding-left:1.9rem;
  font-family:'Cormorant Garamond',serif; font-size:.98rem;
  color:var(--v2-ink-soft); opacity:.8;
}

/* ── Knop en status ──────────────────────────────────────── */
.checkout-submit{ width:100%; justify-content:center; padding:1rem; font-size:.85rem; }
.checkout-submit:disabled{ opacity:.4; cursor:not-allowed; }
.checkout-submit:disabled:hover{ background:var(--v2-gold); border-color:var(--v2-gold); }

.checkout-status{
  margin:1rem 0 0; padding:.85rem 1rem; border-radius:8px;
  font-family:'Cormorant Garamond',serif; font-size:1.03rem;
  background:rgba(197,160,89,.1); color:var(--v2-ink);
}
.checkout-status.is-error{ background:rgba(163,59,43,.1); color:#a33b2b; }
.checkout-status.is-pending{ background:rgba(58,63,86,.08); color:var(--v2-ink-soft); }

.checkout-methods{
  margin:1rem 0 0; text-align:center;
  font-family:'Cormorant Garamond',serif; font-size:1.02rem;
  color:var(--v2-ink-soft);
}
.checkout-smallprint{
  margin:1.4rem 0 0; font-family:'Cormorant Garamond',serif;
  font-size:1rem; color:var(--v2-ink-soft); opacity:.8;
}

/* ── Samenvatting ────────────────────────────────────────── */
.checkout-summary{
  position:sticky; top:7rem;
  padding:1.7rem; border:1px solid var(--v2-parch-dk); border-radius:12px;
  background:var(--v2-parch);
}
.checkout-summary-heading{
  margin:0 0 1.2rem; font-family:'Cinzel',serif; font-size:.74rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--v2-ink);
}
.summary-tour{ display:flex; gap:1rem; align-items:flex-start; }
.summary-tour img{
  width:96px; height:72px; object-fit:cover; border-radius:6px; flex:none;
}
.summary-eyebrow{
  margin:0; font-family:'Cinzel',serif; font-size:.62rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--v2-gold-dp);
}
.summary-title{
  margin:.25rem 0 .2rem; font-family:'Lora',serif; font-size:1.25rem; color:var(--v2-ink);
}
.summary-meta{
  margin:0; font-family:'Cormorant Garamond',serif; font-size:.98rem;
  color:var(--v2-ink-soft); opacity:.85;
}

.summary-lines{ margin:1.5rem 0 0; padding:1.2rem 0 0; border-top:1px solid var(--v2-parch-dk); }
.summary-lines div{ display:flex; justify-content:space-between; gap:1rem; margin-bottom:.55rem; }
.summary-lines dt, .summary-lines dd{
  margin:0; font-family:'Cormorant Garamond',serif; font-size:1.05rem; color:var(--v2-ink);
}
.summary-lines .is-zero dt, .summary-lines .is-zero dd{ color:var(--v2-ink-soft); opacity:.75; }

.summary-total{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  margin:1rem 0 0; padding-top:1rem; border-top:1px solid var(--v2-parch-dk);
  font-family:'Lora',serif; color:var(--v2-ink);
}
.summary-total em{
  font-style:normal; font-family:'Cormorant Garamond',serif;
  font-size:.92rem; opacity:.7; margin-left:.35rem;
}
.summary-total strong{ font-size:1.55rem; font-weight:600; }

.summary-usps{
  list-style:none; margin:1.5rem 0 0; padding:1.2rem 0 0;
  border-top:1px solid var(--v2-parch-dk);
}
.summary-usps li{
  position:relative; padding-left:1.4rem; margin-bottom:.5rem;
  font-family:'Cormorant Garamond',serif; font-size:1.02rem; color:var(--v2-ink-soft);
}
.summary-usps li::before{
  content:"✓"; position:absolute; left:0; color:var(--v2-gold-dp); font-size:.9rem;
}

@media (max-width:860px){
  /* Op mobiel eerst zien wat je koopt, dan pas het formulier. */
  .checkout-grid{ grid-template-columns:1fr; gap:2rem; }
  .checkout-summary{ position:static; order:-1; }
  .checkout-steps{ gap:.5rem; margin-bottom:2rem; }
  .checkout-steps li em{ display:none; }
  .checkout-steps li.is-current em{ display:inline; }
  .checkout-steps li + li::before{ width:1.4rem; }
}

/* ══ BEVESTIGING ══════════════════════════════════════════════ */

/* De toegang staat op het scherm zelf, niet alleen in de mail. Dit blok
   is daarom het zwaarste element van de pagina. */
.toegang{
  margin:2.5rem 0 0; padding:2rem 1.6rem; text-align:center;
  border:1px solid var(--v2-parch-dk); border-radius:14px;
  background:var(--v2-parch);
}
.toegang-label{
  margin:0 0 .7rem; font-family:'Cinzel',serif; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--v2-ink-soft);
}
.toegang-code{
  margin:0 0 1.2rem;
  font-family:'Lora',serif; font-weight:600;
  font-size:clamp(1.8rem,6vw,2.6rem); letter-spacing:.08em;
  color:var(--v2-ink); word-break:break-all;
}
.toegang-kopieer{ font-size:.72rem; }

.toegang-qr{ margin:2rem 0 0; }
.toegang-qr #bev-qr{
  display:inline-block; width:min(190px,55vw); padding:.8rem;
  background:#fff; border-radius:10px; border:1px solid var(--v2-parch-dk);
}
.toegang-qr #bev-qr svg{ display:block; width:100%; height:auto; }
.toegang-qr-bij, .toegang-mail{
  margin:.9rem auto 0; max-width:30rem;
  font-family:'Cormorant Garamond',serif; font-size:1.02rem;
  color:var(--v2-ink-soft);
}
.toegang-open{ margin:1.8rem 0 0; }
.toegang-mail{ margin-top:1.4rem; opacity:.85; }

.bev-stappen{ margin-top:3.5rem; }

/* Checkout en bevestiging hebben een uitgeklede footer zonder de kolommen
   waar .footer-link aan hangt — die links vallen daardoor terug op de
   standaard browserstijl (blauw, onderstreept). */
.footer-bottom .footer-copyright a{
  color:var(--v2-gold); text-decoration:none;
  border-bottom:1px solid rgba(197,160,89,.35);
}
.footer-bottom .footer-copyright a:hover{ border-bottom-color:var(--v2-gold); }

@media (max-width:860px){
  .toegang{ padding:1.6rem 1.1rem; }
}

[data-theme="dark"] .toegang{ background:#18213c; }


/* ══ JURIDISCHE PAGINA'S ══════════════════════════════════════ */

.legal h1{ margin:.6rem 0 .3rem; }
.legal h2{
  margin:2.4rem 0 .7rem; font-family:'Lora',serif; font-size:1.3rem;
  font-weight:600; color:var(--v2-ink);
}
.legal p{
  margin:0 0 1rem; font-family:'Cormorant Garamond',serif;
  font-size:1.15rem; line-height:1.65; color:var(--v2-ink-soft);
}
.legal a{ color:var(--v2-gold-dp); text-decoration:underline; }
.legal-meta{
  font-family:'Cinzel',serif !important; font-size:.7rem !important;
  letter-spacing:.13em; text-transform:uppercase; opacity:.6;
}
/* Zolang deze vlag er staat is de tekst niet vastgesteld. Weghalen is
   een besluit, geen opmaakkeuze. */
.legal-flag{
  padding:.9rem 1.1rem; margin:0 0 2rem !important; border-radius:8px;
  border:1px solid rgba(163,59,43,.35); background:rgba(163,59,43,.08);
  color:#a33b2b !important; font-size:1.02rem !important;
}
.legal-todo{ color:#a33b2b; font-style:italic; }
.legal-back{ margin-top:3rem; }
/* Genummerde leden (5.1, 5.2) en opsommingen, zoals in de voorwaarden. */
.legal-nr{
  font-family:'Cinzel',serif; font-size:.78rem; letter-spacing:.06em;
  color:var(--v2-gold-dp); margin-right:.45rem;
}
.legal ul{ margin:-.4rem 0 1rem; padding-left:1.4rem; }
.legal li{
  font-family:'Cormorant Garamond',serif; font-size:1.15rem;
  line-height:1.6; color:var(--v2-ink-soft); margin:.15rem 0;
}

/* ── Donker thema ────────────────────────────────────────── */
[data-theme="dark"] .field input[type="email"],
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea{ background:#18213c; color:var(--v2-ink); }
[data-theme="dark"] .checkout-summary{ background:#18213c; }
[data-theme="dark"] .checkout-status{ background:rgba(197,160,89,.14); }

/* Alternatief voor de open-in-app-knop op een laptop. Daar is die knop een
   doodlopende weg: de app bestaat niet op een computer. */
.toegang-desktop{
  margin:1.6rem auto 0; max-width:30rem;
  font-family:'Cormorant Garamond',serif; font-size:1.05rem;
  color:var(--v2-ink-soft);
}

/* ══ CODE INWISSELEN ══════════════════════════════════════════ */

.inwissel-form{
  display:flex; gap:.7rem; margin:2.5rem auto 0; max-width:32rem; flex-wrap:wrap;
}
.inwissel-form input{
  flex:1; min-width:12rem; padding:.95rem 1.1rem;
  font-family:'Lora',serif; font-size:1.15rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--v2-ink); background:var(--v2-cream);
  border:1.5px solid var(--v2-parch-dk); border-radius:8px;
}
.inwissel-form input:focus{
  outline:none; border-color:var(--v2-gold-dp);
  box-shadow:0 0 0 3px rgba(197,160,89,.18);
}
.inwissel-form button{ flex:none; }
.inwissel-hulp{
  margin:2.5rem auto 0; max-width:32rem; text-align:center;
  font-family:'Cormorant Garamond',serif; font-size:1.02rem; color:var(--v2-ink-soft);
}
.inwissel-hulp a{ color:var(--v2-gold-dp); }
#inwissel-fout{ max-width:32rem; margin-left:auto; margin-right:auto; text-align:center; }

[data-theme="dark"] .inwissel-form input{ background:#18213c; }

/* ══ CADEAU ═══════════════════════════════════════════════════ */

.cad-stappen{ margin:3rem 0 0; }
.cad-kader{
  margin:2.8rem 0 0; padding:1.4rem 1.6rem;
  border:1px solid var(--v2-parch-dk); border-radius:10px;
  background:rgba(197,160,89,.06);
}
.cad-kader-kop{
  margin:0 0 .5rem; font-family:'Cinzel',serif; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--v2-ink);
}
.cad-kader p{
  margin:0; font-family:'Cormorant Garamond',serif; font-size:1.08rem;
  color:var(--v2-ink-soft);
}
.cad-klein{
  margin:1.6rem auto 0; max-width:34rem; text-align:center;
  font-family:'Cormorant Garamond',serif; font-size:1rem;
  color:var(--v2-ink-soft); opacity:.85;
}

/* ── Overdracht: /tour/{slug}?code=XXXX ──────────────────── */
/* Waar de QR van het bevestigingsscherm op uitkomt als de app de link niet
   onderschept. Geen verkooppagina — wie hier komt heeft net betaald. */
.ovd{ padding:1rem 0 2rem; }
.ovd-code{
  margin:2rem auto; padding:1.6rem 1.2rem; max-width:24rem;
  background:var(--v2-parch); border:1px solid var(--v2-parch-dk);
  border-radius:14px;
}
.ovd-code-label{
  font-family:'Cinzel',serif; font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--v2-gold-dp); margin:0 0 .7rem;
}
.ovd-code-waarde{
  font-family:'Cinzel',serif; font-size:1.9rem; font-weight:600;
  letter-spacing:.06em; color:var(--v2-ink); margin:0;
}
/* De groepscode uit de QR van een tijdgids: zes losse tekens om over te
   typen, dus met ruimte ertussen (ronde 2 R15, besluit 20). */
.ovd-code-waarde--groep{ font-size:2.2rem; letter-spacing:.3em; padding-left:.3em; }
.ovd-uitleg{
  font-family:'EB Garamond',serif; font-size:1.08rem; line-height:1.6;
  color:var(--v2-ink); opacity:.82; max-width:32rem; margin:0 auto 1.6rem;
}
.ovd-knoppen{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
.ovd-klein{
  font-family:'EB Garamond',serif; font-style:italic; font-size:.95rem;
  color:var(--v2-ink); opacity:.62; margin:1.6rem auto 0; max-width:30rem;
}


/* Kopieerknop op de overdrachtspagina. Klein gehouden: de code eronder is
   het onderwerp, de knop is de hulp. */
.ovd-kopieer {
  margin-top: 0.75rem;
  font-size: 0.72rem;
  padding: 0.5rem 1.1rem;
}