/* Bestelpagina in rust-stijl (2026-10-31).
   Het formulier, de galerij en het upsell-paneel houden hun eigen klassen,
   want het afrekenscript en js/galerij.js, plakknop.js en adres-aanvullen.js
   zoeken ze op. Dit bestand geeft die klassen de rust-tokens.
   Deel 1: de oude kleur- en maatvariabelen, gekoppeld aan rust.
   Deel 2: de benodigde regels uit css/deluxe.css (automatisch overgenomen).
   Deel 3: rust-afwerking. */
:root{
  --gold:#7A6040;--gold-soft:#B39A78;--gold-tint:#D8C9B0;--gold-deep:#141313;
  --cream:#F9F7F3;--cream-soft:#F9F7F3;--ink:#141313;--ink-soft:#3A3835;--ink-muted:#6B675F;
  --white:#fff;--line:#D8C9B0;
  --font-display:"Jost",system-ui,sans-serif;--font-body:"Karla",system-ui,sans-serif;
  --size-h3:1.3rem;--size-body:1.0625rem;--size-small:.875rem;
  --container:1200px;--container-narrow:760px;
  --space-section:clamp(4.5rem,9vw,7.5rem);--space-block:clamp(2rem,4vw,3.5rem);
  --radius:4px;--radius-pill:4px;--ease:cubic-bezier(.22,1,.36,1);
}
.container{max-width: var(--container); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem);}
.container--narrow{max-width: var(--container-narrow); margin: 0 auto;}
.btn{display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 14px 28px; box-sizing: border-box;
  font-family: var(--font-body); font-weight: 700; font-size: 1.05rem;
  border-radius: var(--radius-pill); text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; background: none;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;}
.btn--gold{background: var(--gold); color: var(--white);}
.btn--gold:hover{background: var(--gold-deep); transform: translateY(-1px);}
.btn--ghost{background: transparent; color: var(--ink); border-color: var(--ink);}
.btn--ghost:hover{background: var(--ink); color: var(--white);}
.coupon{margin: 0 0 1.25rem;}
.coupon__label{display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.4rem;}
.coupon__rij{display: flex; gap: 0.5rem;}
.order-details .coupon__rij input{flex: 1 1 auto; min-width: 0; margin-top: 0; text-transform: uppercase;}
.order-details .coupon__knop{flex: 0 0 auto; width: auto; margin-top: 0; min-height: 44px; padding: 0 1rem;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: 0.9rem; font-weight: 700; color: var(--ink); cursor: pointer;}
.order-details .coupon__knop:hover{border-color: var(--gold); color: var(--gold-deep);}
.order-details .coupon__knop[disabled]{opacity: 0.55; cursor: default;}
.coupon__melding{margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--ink-muted); min-height: 1.2em;}
.coupon__melding.is-gelukt{color: var(--gold-deep); font-weight: 700;}
.coupon__melding.is-fout{color: #B23A3A;}
.coupon-regel{margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--gold-deep); font-weight: 700;}
.btn--flow{background: linear-gradient(115deg, #C9A876 0%, var(--gold) 40%, var(--gold-deep) 70%, #C9A876 100%);
  background-size: 220% 100%;
  animation: btn-flow 6s ease-in-out infinite alternate;
  
  min-height: 44px; padding: 10px 42px; font-size: 1rem;}
.btn--flow:hover{background-size: 220% 100%;}
@media (prefers-reduced-motion: reduce){.btn--flow{animation: none;}
}#hero .btn--ghost{color: var(--gold); border-color: var(--gold);}
#hero .btn--ghost:hover{background: var(--gold); color: var(--white);}
.hero-panel{position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 320ms ease;}
.hero-panel.is-open{opacity: 1; visibility: visible; pointer-events: auto;}
.hero-panel__backdrop{position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 85% 0%, rgba(122,96,64,0.55), rgba(20,19,19,0.92) 60%);}
.hero-panel__glow{position: absolute; inset: -20%;
  background:
    radial-gradient(38% 32% at 20% 25%, rgba(216,201,176,0.35), transparent 70%),
    radial-gradient(30% 26% at 80% 70%, rgba(154,125,85,0.4), transparent 70%);
  filter: blur(60px);
  animation: heroGlowDrift 14s ease-in-out infinite alternate;}
.hero-panel__card{position: relative; width: min(960px, 92vw); max-height: 88vh; overflow-y: auto;
  background: rgba(20,19,19,0.55); backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius); color: var(--white);
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  transform: translateY(24px) scale(0.97); opacity: 0;
  transition: transform 320ms cubic-bezier(0.16,1,0.3,1), opacity 320ms ease;}
.hero-panel.is-open .hero-panel__card{transform: translateY(0) scale(1); opacity: 1;}
.hero-panel__close{position: absolute; top: 1.25rem; right: 1.25rem; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,0.12); color: var(--white); font-size: 1.3rem; line-height: 1;}
.hero-panel__close:hover{background: rgba(255,255,255,0.22);}
.hero-panel__info{padding: clamp(2rem, 4vw, 3rem);}
.hero-panel__info h2{color: var(--white); font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 0.6em;}
.hero-panel__stats{list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 0.9rem;}
.hero-panel__stats li{font-size: 0.98rem; color: rgba(255,255,255,0.88); line-height: 1.5;}
.hero-panel__stats strong{color: var(--gold-tint); font-family: var(--font-display); margin-right: 0.5rem; white-space: nowrap;}
.hero-panel__quote{border-left: 3px solid var(--gold); padding-left: 1.1rem; margin: 0;
  font-family: var(--font-display); font-size: 1.05rem; line-height: 1.5; color: var(--white);}
.hero-panel__quote cite{display: block; margin-top: 0.6rem; font-family: var(--font-body); font-style: normal; font-size: 0.9rem; color: rgba(255,255,255,0.65);}
.hero-panel__cta{background: rgba(255,255,255,0.08); border-left: 1px solid rgba(255,255,255,0.12);
  padding: clamp(2rem, 4vw, 3rem); display: flex; flex-direction: column; justify-content: center; gap: 1.1rem;}
.hero-panel__price{font-family: var(--font-display); font-size: 2.2rem; color: var(--white);}
.hero-panel__price span{font-family: var(--font-body); font-size: 0.95rem; color: rgba(255,255,255,0.65); display: block; margin-top: 0.2rem;}
.hero-panel__cta .btn--gold{text-align: center;}
.hero-panel__ghost-link{text-align: center; color: rgba(255,255,255,0.75); font-size: 0.9rem; text-decoration: underline; text-underline-offset: 3px;}
.hero-panel__ghost-link:hover{color: var(--white);}
@media (max-width: 720px){.hero-panel__card{grid-template-columns: 1fr;}
.hero-panel__cta{border-left: none; border-top: 1px solid rgba(255,255,255,0.12);}
}.container--narrow h3{margin-top: 1.6em;}
.container--narrow p + p{margin-top: 1.2em;}
.container--narrow p{max-width: none;}
.assurance{margin: 1.4rem 0 0; padding: 1.1rem 1.25rem; border-radius: var(--radius);
  background: var(--cream-soft); border: 1px solid rgba(20,19,19,0.06);}
.assurance__list{list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.45rem 1.25rem;}
.assurance__item{position: relative; padding-left: 1.5rem; font-size: 0.95rem; color: var(--ink-soft);}
.assurance__item::before{content: "\2713"; position: absolute; left: 0; top: 0; color: var(--gold); font-weight: 700;}
.assurance__quote{margin: 0.9rem 0 0; padding-top: 0.9rem; border-top: 1px solid rgba(20,19,19,0.08); font-size: var(--size-small); color: var(--ink-muted); font-style: italic;}
.assurance__quote cite{font-style: normal; font-weight: 700;}
@media (min-width: 901px){.assurance__list{grid-template-columns: 1fr 1fr;}
}.betaalmethodes{display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; margin: 0.7rem 0 0; padding: 0;}
.betaalmethodes li{margin: 0; padding: 0; line-height: 0;}
.betaalmethodes img{display: block; width: 38px; height: auto;}
body.is-bestelstap .buybox .voorraad-regel,.voorraad-regel{margin: 0.8rem 0 0; text-align: center; font-size: 0.85rem; line-height: 1.5; color: var(--ink-soft);}
.voorraad-stip{display: inline-block; width: 9px; height: 9px; margin-right: 0.45em; border-radius: 50%; background: #2fb35a; vertical-align: 0.05em;}
.zekerheden{display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; list-style: none; margin: 1rem 0 0; padding: 0; text-align: center;}
.zekerheden li{display: flex; flex-direction: column; align-items: center; gap: 0.35rem; margin: 0; padding: 0; font-size: 0.8rem; line-height: 1.3; color: var(--ink-soft);}
.zekerheden svg{color: var(--ink);}
.tp-badge{display: flex; width: fit-content; line-height: 1; flex-wrap: wrap; align-items: center; gap: 0.4em; margin: 0 0 0.7rem; padding: 0.3rem 0.6rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); font-size: 0.8rem; font-weight: 600; text-decoration: none;}
.tp-badge:hover{border-color: #fbbc04;}
.g-logo{flex: none;}
.tp-badge__aantal{font-weight: 400; text-decoration: underline; text-underline-offset: 2px;}
body.is-bestelstap .tp-badge{display: none;}
.productinfo{margin: 1.4rem 0 0; border-top: 1px solid var(--line);}
.productinfo details{border-bottom: 1px solid var(--line);}
.productinfo summary{display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 0; cursor: pointer; list-style: none; font-weight: 600; font-size: 0.95rem; color: var(--ink);}
.productinfo summary::-webkit-details-marker{display: none;}
.productinfo summary::after{content: "+"; font-size: 1.2rem; font-weight: 400; line-height: 1;}
.productinfo details[open] summary::after{content: "\2212";}
.productinfo__inhoud{padding: 0 0 1rem; font-size: 0.9rem; color: var(--ink-soft);}
.productinfo__inhoud p{margin: 0 0 0.6rem;}
.productinfo__inhoud ul{margin: 0; padding-left: 1.1rem;}
.productinfo__inhoud li{margin: 0 0 0.35rem;}
.productinfo__inhoud table{width: 100%; border-collapse: collapse;}
.productinfo__inhoud th,.productinfo__inhoud td{padding: 0.45rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top;}
.productinfo__inhoud th{width: 38%; padding-right: 0.8rem; font-weight: 600; color: var(--ink);}
.productinfo__inhoud tr:last-child th,.productinfo__inhoud tr:last-child td{border-bottom: 0;}
body.is-bestelstap .productinfo{display: none;}
.tp-balk__kop .tp-badge{margin: 0; padding: 0; border: 0; background: none; font-size: 0.9rem; gap: 0.5em;}
.tp-balk__kop .tp-badge:hover .tp-badge__aantal{color: var(--gold);}
.gallery__info > h1{margin-bottom: 0.5rem;}
.koopkop__eyebrow{display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem;}
body.is-bestelstap .koopkop__eyebrow{display: none !important;}
@media (min-width: 901px){.gallery__media{position: sticky; top: 5.5rem;}
}.koopkop__onder{font-size: 1.1rem; line-height: 1.5; color: var(--ink); margin: 0.9rem 0 0.8rem; max-width: 36em;}
.koopkop__voordelen{list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0.45rem;}
.koopkop__voordelen li{display: flex; align-items: flex-start; gap: 0.55em; line-height: 1.4; color: var(--ink-soft);}
.koopkop__voordelen svg{flex: none; margin-top: 0.15em; color: var(--gold);}
body.is-bestelstap .koopkop__onder,body.is-bestelstap .koopkop__voordelen{display: none !important;}
.buybox__keuze.koopkeuze{display: block;}
.koopkeuze__blokken{margin-top: 0;}
.koopkeuze__blokken .aantalkeuze__knop{min-height: 64px; font-weight: 700; font-size: 1rem;}
.koopkeuze__blokken .aantalkeuze__knop span{font-weight: 400; font-size: 0.9rem;}
.koopkeuze__meer{margin-top: 0.6rem; font-size: 0.85rem;}
.koopkeuze__meer-kop{cursor: pointer; color: var(--ink-soft); text-decoration: underline; list-style: none; display: inline-block;}
.koopkeuze__meer-kop::-webkit-details-marker{display: none;}
.koopkeuze__meer label{display: block; max-width: 140px; margin-top: 0.5rem; font-weight: 700;}
.gallery__main{touch-action: pan-y;}
.gallery__main [hidden]{display: none !important;}
.gallery__video{width: 100%; height: 100%; object-fit: contain; display: block; background: var(--white);}
.gallery__thumb--video{position: relative;}
.gallery__speel{position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,0.55);}
.gallery__speel::after{content: ""; position: absolute; left: 10px; top: 7px; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent #fff;}
.plakknop{display: none;}
@media (max-width: 759px){.plakknop{display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
    background: rgba(255,255,255,0.96);
    border-top: 1px solid rgba(20,19,19,0.1);
    box-shadow: 0 -6px 20px rgba(20,19,19,0.08);
    transform: translateY(110%); transition: transform 0.22s ease;}
.plakknop.is-zichtbaar{transform: translateY(0);}
.plakknop__knop{width: 100%; justify-content: center;}
}@media (prefers-reduced-motion: reduce){.plakknop{transition: none;}
}@media print{.plakknop{display: none !important;}
}@keyframes btn-flow{ from { background-position: 0% 50%; } to { background-position: 100% 50%; } }@keyframes heroGlowDrift{
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(3%, -4%) scale(1.08); }
}
/* Deel 3: rust-afwerking */
.gallery{padding-top:clamp(2.5rem,5vw,4rem)!important}
.gallery h1{font-size:clamp(2.1rem,4vw,3.2rem)}
.gallery__price{font-family:var(--font-kop)!important;font-weight:300;font-size:2rem!important}
.btn{font-family:var(--font-kop);font-weight:500;font-size:.8rem;letter-spacing:.17em;text-transform:uppercase;border-radius:0;min-height:52px}
.btn--gold{background:var(--accent);color:#fff}.btn--gold:hover{background:var(--accent-diep);transform:none}
.buybox{background:var(--porselein);border:1px solid var(--lijn);border-radius:0}
.buybox .zekerheden{display:flex;flex-wrap:wrap;gap:10px 22px;margin:18px 0 0;color:var(--tekst);font-size:.9rem}
.buybox .zekerheden li:before{content:none}
.buybox .zekerheden li{display:flex;align-items:center;gap:8px}
.buybox .zekerheden svg{color:var(--accent);flex:0 0 auto}
.aantalkeuze__knop{border-radius:0;min-height:52px;color:var(--inkt)}
.aantalkeuze__knop.is-actief{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.aantalkeuze__korting{color:var(--accent)!important}
.order-details input,.order-details select,.buybox select,.coupon__rij input{font-size:16px!important;border-radius:0!important;border:1px solid #B9AE9C!important;min-height:48px;background:#fff;color:var(--inkt)}
.order-details input:focus,.order-details select:focus,.coupon__rij input:focus{outline:2px solid var(--accent);outline-offset:1px}
.order-details label{font-family:var(--font-tekst);font-weight:700;color:var(--inkt)}
.coupon__knop{border-radius:0!important;min-height:48px}
.bestelkaart,.gallery__main,.gallery__thumb{border-radius:0!important}
.gallery__thumb.is-active{border-color:var(--accent)!important}
.koopkop__eyebrow{display:block;font-family:var(--font-kop);font-weight:500;font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.koopkop__voordelen svg{color:var(--accent)}
.productinfo summary{font-family:var(--font-kop);font-weight:400;color:var(--inkt)}
.hero-panel__card{border-radius:0}
.hero-panel .btn--gold{background:#fff;color:var(--inkt)}.hero-panel .btn--gold:hover{background:var(--zand)}
.autofill-hint{color:var(--accent)}
.optional-hint{color:var(--grijs)}
.specs{width:100%;border-collapse:collapse;font-size:.98rem}
.specs th,.specs td{text-align:left;vertical-align:top;padding:14px 0;border-bottom:1px solid var(--lijn)}
.specs th{font-family:var(--font-kop);font-weight:500;color:var(--inkt);padding-right:24px;width:34%}
@media (max-width:620px){.specs th,.specs td{display:block;width:100%;padding:8px 0}.specs th{border-bottom:0;padding-top:16px}}
@media (min-width:821px){#klantreviews .reviewkaarten{grid-template-columns:repeat(2,minmax(0,1fr));max-width:880px}}
#upsell-panel .upsell-panel__beeld{border-radius:0}