/* ==========================================================================
   Albert Dros Gallery — print-site secties.
   Bouwt voort op mc-styles.css (masterclass) + themes.css (copper-lux-deeper).
   ========================================================================== */

:root{ --maxw-wide:1320px; }

/* ---------- nav: twee regels links, logo midden, koperen knop rechts ------- */
.nav .brand b{ color:var(--acc-text); font-weight:600; }

/* ---------- hero ---------------------------------------------------------- */
.hero-title{ text-align:center; }
.hero-title .l1{
  display:block; font-weight:200; letter-spacing:.34em;
  font-size:clamp(.95rem,1.9vw,1.45rem); color:var(--muted);
  text-transform:uppercase; margin-bottom:.55em; padding-left:.34em;
}
.hero-title .l2{
  display:block; font-weight:200; line-height:.98;
  font-size:clamp(2.9rem,8.4vw,7.2rem); letter-spacing:.055em;
  background:linear-gradient(180deg,#ffffff 0%,#d8d8dc 55%,#a9a9b0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-title .l3{
  display:block; font-weight:200; line-height:.98;
  font-size:clamp(2.9rem,8.4vw,7.2rem); letter-spacing:.055em;
  background:var(--title-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{
  max-width:640px; margin:1.9rem auto 0; text-align:center;
  color:var(--muted); font-size:clamp(.98rem,1.5vw,1.1rem); line-height:1.65;
}
.hero-sub b{ color:var(--text); font-weight:500; }
.hero-cta{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-top:2.1rem; }
.hero-facts{
  display:flex; gap:1.6rem; justify-content:center; flex-wrap:wrap;
  margin-top:2.2rem; color:var(--muted2); font-size:.84rem; letter-spacing:.04em;
}
.hero-facts b{ color:var(--acc-text-dim); font-weight:600; }


/* ---------- hero: kleurenfoto's, donker achter de tekst -------------------- */
/* De grid staat in kleur. Om de dunne letters daar rustig op te laten liggen
   ligt er een brede donkere wolk achter de hele tekstkolom, en krijgt elk
   los tekstelement daarbovenop nog zijn eigen ondergrond. De kleine regels
   onderin (gesigneerd / wereldwijd / op afspraak) zijn het kwetsbaarst,
   die krijgen een eigen zachte plaat. */
.hero .hero-grid{ --grid-op:.62; }
.hero .hph img{ filter:none; }              /* geen zwart-wit meer */
.hero .hph.lit img{ opacity:1; }

/* verloop over de hele hero, donkerder aan de randen */
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(11,11,12,.78) 0%, rgba(11,11,12,.50) 26%,
                              rgba(11,11,12,.50) 72%, rgba(11,11,12,.90) 100%);
}

/* brede wolk achter de hele tekstkolom, van de kicker tot onder de feitenregel */
.hero .wrap{ position:relative; }
.hero .wrap::before{
  content:""; position:absolute; z-index:-1;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(1500px,150%); height:170%;
  background:
    radial-gradient(46% 50% at 50% 50%, rgba(4,4,6,.99) 0%, rgba(4,4,6,.96) 52%,
                    rgba(4,4,6,.74) 76%, rgba(4,4,6,0) 100%),
    radial-gradient(72% 40% at 50% 50%, rgba(4,4,6,.86) 0%, rgba(4,4,6,.52) 60%,
                    rgba(4,4,6,0) 100%);
  filter:blur(34px);
  pointer-events:none;
}

/* strakker kussen direct achter de titel */
.hero-title{ position:relative; }
.hero-title::before{
  content:""; position:absolute; z-index:-1;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(1100px,118%); height:175%;
  background:radial-gradient(50% 50% at 50% 50%,
              rgba(2,2,4,.96) 0%, rgba(2,2,4,.78) 55%, rgba(2,2,4,0) 100%);
  filter:blur(24px);
  pointer-events:none;
}

/* de subtekst krijgt een eigen, ruime plaat */
.hero-sub{ position:relative; }
.hero-sub::before{
  content:""; position:absolute; z-index:-1;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(940px,138%); height:260%;
  background:radial-gradient(48% 50% at 50% 50%,
              rgba(2,2,4,.95) 0%, rgba(2,2,4,.72) 58%, rgba(2,2,4,0) 100%);
  filter:blur(22px);
  pointer-events:none;
}

/* De feitenregel bestaat uit losse korte stukjes met gaten ertussen; een
   enkele radiaal dekt de buitenste dan niet. Daarom krijgt elk stukje zijn
   eigen zachte donkere plaat, met wat lucht eromheen. */
.hero-facts{ position:relative; gap:1.1rem; }
.hero-facts span{
  position:relative;
  padding:.5rem .95rem;
  border-radius:999px;
  isolation:isolate;
}
.hero-facts span::before{
  content:""; position:absolute; inset:-2px -4px; z-index:-1;
  border-radius:inherit;
  background:rgba(3,3,5,.82);
  box-shadow:0 0 22px 14px rgba(3,3,5,.62);
  pointer-events:none;
}

/* ---------- hero-grid: acht rijen, veel trager ----------------------------- */
/* mc-styles.css zet vier rijen op 130-175s. Hier acht rijen op ruim het
   dubbele, zodat de beweging bijna onmerkbaar wordt en de titel rustig blijft. */
.hero-grid{ gap:8px; }
.hgrow:nth-child(1){ animation-duration:340s; }
.hgrow:nth-child(2){ animation-duration:395s; }
.hgrow:nth-child(3){ animation-duration:450s; }
.hgrow:nth-child(4){ animation-duration:370s; }
.hgrow:nth-child(5){ animation:drift-l 415s linear infinite; }
.hgrow:nth-child(6){ animation:drift-r 480s linear infinite; }
.hgrow:nth-child(7){ animation:drift-l 360s linear infinite; }
.hgrow:nth-child(8){ animation:drift-r 435s linear infinite; }

/* ---------- print-raster --------------------------------------------------- */
.pgrid{
  display:grid; gap:1.5rem 1.4rem;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  max-width:var(--maxw-wide); margin:0 auto;
  /* kaarten krijgen hun eigen hoogte; anders rekt de rij mee met de hoogste
     foto en staat er een leeg blok onder de liggende beelden. */
  align-items:start;
}
.pcard{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:var(--panel);
  transition:transform .5s cubic-bezier(.22,.61,.36,1), border-color .4s, box-shadow .5s;
}
.pcard:hover{
  transform:translateY(-5px);
  border-color:rgba(var(--acc-rgb),.42);
  box-shadow:0 18px 42px rgba(0,0,0,.5);
}
/* foto's houden hun eigen verhouding, nooit vierkant of verticaal gecropt */
.pcard .ph{ display:block; width:100%; background:#0e0e10; }
.pcard .ph img{
  display:block; width:100%; height:auto;
  transition:transform .8s cubic-bezier(.22,.61,.36,1);
}
.pcard:hover .ph img{ transform:scale(1.035); }
.pcard .meta{ display:block; padding:.95rem 1.05rem 1.15rem; }
.pcard .t{
  display:block;
  font-size:1.02rem; font-weight:400; letter-spacing:.012em; color:var(--text);
  margin:0 0 .34rem;
}
.pcard .p{
  display:flex; align-items:baseline; justify-content:space-between; gap:.9rem;
  font-size:.83rem; color:var(--muted2); letter-spacing:.05em;
}
/* de materialen staan er klein en rustig bij; de prijs houdt het accent */
.pcard .avail{
  font-size:.72rem; letter-spacing:.06em; text-transform:none; color:var(--muted2);
}
.pcard .p b{ color:var(--acc-text); font-weight:600; letter-spacing:.02em; text-transform:none; font-size:.95rem; }

/* verborgen rest + "view more" */
.pgrid .pcard.is-hidden{ display:none; }
.more-wrap{ text-align:center; margin-top:2.4rem; }
.more-count{ display:block; margin-top:.85rem; color:var(--muted2); font-size:.82rem; letter-spacing:.06em; }

/* ---------- galerie-stroken (boven/onder een tekstblok) -------------------- */
.gallery-band{ padding:0; background:var(--bg); }
/* twee stroken vlak onder elkaar: een sfeerimpressie van de galerie */
.strip{ display:block; width:100%; overflow:hidden; line-height:0; }
.strip + .strip{ margin-top:2px; }
.strip img{
  display:block; width:100%; height:auto;
  filter:saturate(.96) brightness(.94);
}
.band-mid{
  text-align:center; padding:clamp(3.2rem,6.5vw,5rem) 1.4rem clamp(1rem,2vw,1.6rem);
  max-width:900px; margin:0 auto;
}
.band-mid h2{
  font-weight:200; line-height:1.12; margin:0 0 1.1rem;
  font-size:clamp(1.85rem,4.2vw,3.1rem); letter-spacing:.02em;
}
.band-mid h2 em{ font-style:normal; color:var(--acc-text); }
.band-mid p{
  color:var(--muted); font-size:clamp(.98rem,1.5vw,1.09rem); line-height:1.7;
  max-width:620px; margin:0 auto;
}

/* ---------- drie beloftes -------------------------------------------------- */
.promise{
  display:grid; gap:1.3rem; grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  max-width:var(--maxw); margin:0 auto;
}
.pr{
  border:1px solid var(--line); border-radius:14px; background:var(--panel);
  padding:1.9rem 1.6rem 2rem; position:relative;
}
.pr .n{
  font-size:.74rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--acc-text-dim); font-weight:600; margin-bottom:.9rem;
}
.pr h3{ font-weight:400; font-size:1.18rem; margin:0 0 .6rem; color:var(--text); }
.pr p{ color:var(--muted); font-size:.95rem; line-height:1.65; margin:0; }

/* ---------- bezoek + formulier --------------------------------------------- */
.visit{
  display:grid; gap:2.6rem; grid-template-columns:1fr 1fr;
  max-width:var(--maxw); margin:0 auto; align-items:start;
}
@media(max-width:860px){ .visit{ grid-template-columns:1fr; } }
.visit .facts{ margin-top:1.9rem; border-top:1px solid var(--line); }
.visit .facts div{
  display:flex; gap:1.2rem; padding:.85rem 0; border-bottom:1px solid var(--line);
  font-size:.95rem;
}
.visit .facts dt{
  min-width:104px; color:var(--acc-text-dim); font-size:.74rem;
  letter-spacing:.2em; text-transform:uppercase; font-weight:600; padding-top:.18rem;
}
.visit .facts dd{ margin:0; color:var(--muted); }
.form{
  border:1px solid var(--line); border-radius:14px; background:var(--panel);
  padding:1.8rem 1.7rem 2rem;
}
.form h3{ font-weight:400; font-size:1.3rem; margin:0 0 1.3rem; }
.form label{
  display:block; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted2); margin:0 0 .45rem; font-weight:500;
}
.form .row{ margin-bottom:1.05rem; }
.form .two{ display:grid; gap:1rem; grid-template-columns:1fr 1fr; }
.form input, .form textarea{
  width:100%; background:rgba(255,255,255,.035); border:1px solid var(--line);
  border-radius:9px; padding:.72rem .85rem; color:var(--text);
  font:inherit; font-size:.95rem; transition:border-color .3s, background .3s;
}
.form input:focus, .form textarea:focus{
  outline:none; border-color:rgba(var(--acc-rgb),.55); background:rgba(255,255,255,.055);
}
.form textarea{ min-height:104px; resize:vertical; }
.form .btn{ width:100%; margin-top:.4rem; justify-content:center; }

/* ---------- lightbox -------------------------------------------------------- */
.lb{
  position:fixed; inset:0; z-index:120; display:none;
  background:rgba(6,6,7,.97);
  align-items:center; justify-content:center; padding:3.2rem 2rem 4.6rem;
}
.lb.open{ display:flex; }
.lb img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:4px; }
.lb .cap{
  position:absolute; left:0; right:0; bottom:1.5rem; text-align:center;
  color:var(--muted); font-size:.92rem; letter-spacing:.03em;
}
.lb .cap b{ color:var(--text); font-weight:400; }
.lb .cap a{ color:var(--acc-text); text-decoration:none; border-bottom:1px solid rgba(var(--acc-rgb),.4); }
.lb .x{
  position:absolute; top:1.2rem; right:1.5rem; width:42px; height:42px;
  border:1px solid var(--line); border-radius:50%; background:transparent;
  color:var(--text); font-size:1.35rem; cursor:pointer; line-height:1;
}
.lb .x:hover{ border-color:rgba(var(--acc-rgb),.5); }
.lb .nav-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border:1px solid var(--line); border-radius:50%;
  background:rgba(0,0,0,.4); color:var(--text); font-size:1.2rem; cursor:pointer;
}
.lb .prev{ left:1.4rem; } .lb .next{ right:1.4rem; }
.lb .nav-btn:hover{ border-color:rgba(var(--acc-rgb),.5); }
@media(max-width:640px){ .lb .nav-btn{ display:none; } }

/* ---------- filters op de galerie-pagina ----------------------------------- */
.filters{
  display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center;
  margin:0 auto 2.6rem; max-width:var(--maxw-wide);
}
.fbtn{
  font:inherit; font-size:.83rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); background:transparent; cursor:pointer;
  border:1px solid var(--line); border-radius:999px; padding:.6rem 1.15rem;
  transition:color .3s, border-color .3s, background .3s;
}
.fbtn:hover{ color:var(--text); border-color:rgba(var(--acc-rgb),.4); }
.fbtn.on{
  color:var(--acc-text); border-color:rgba(var(--acc-rgb),.6);
  background:rgba(var(--acc-rgb),.10);
}
.empty{ text-align:center; color:var(--muted2); padding:3rem 0; }

/* ---------- introsectie ----------------------------------------------------- */
.sec-intro{ padding-bottom:clamp(2.6rem,5vw,4rem); }
.sec-intro .sec-head{ max-width:720px; margin-bottom:0; }
.sec-intro .sec-head p + p{ margin-top:1rem; }



/* ---------- contactblok in plaats van het formulier ------------------------ */
.contact{
  border:1px solid var(--line); border-radius:14px; background:var(--panel);
  padding:2rem 1.8rem 2.1rem;
}
.contact h3{ font-weight:400; font-size:1.3rem; margin:0 0 1.1rem; color:var(--text); }
.contact p{ color:var(--muted); font-size:.98rem; line-height:1.7; margin:0 0 1rem; }
.contact .btn{ margin-top:.7rem; }
.contact .note{
  display:block; margin-top:1rem; font-size:.74rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted2);
}

/* ---------- nav: taalwissel naast de knop ---------------------------------- */
.nav .nav-right{
  justify-self:end; display:flex; align-items:center; gap:1.1rem;
}
/* Terug naar de voorpagina, in de balk naast de taalwissel. */
.navback{
  display:inline-flex; align-items:center; gap:.45rem; padding:.6rem 0;
  font-size:.78rem; letter-spacing:.16em; font-weight:500; text-transform:uppercase;
  color:var(--muted); text-decoration:none; transition:color .2s;
}
.navback .arr{ font-size:.95rem; letter-spacing:0; transition:transform .2s; }
.navback:hover{ color:var(--text); }
.navback:hover .arr{ transform:translateX(-3px); }

/* Naar de vragen onderaan de voorpagina. Zelfde letter als de rest van de balk. */
.navfaq{
  display:inline-flex; align-items:center; padding:.6rem 0;
  font-size:.78rem; letter-spacing:.16em; font-weight:500; text-transform:uppercase;
  color:var(--muted); text-decoration:none; transition:color .2s;
}
.navfaq:hover{ color:var(--text); }
.navfaq .kort{ display:none; }
.navback::after{
  content:""; width:1px; height:14px; margin-left:.7rem; background:var(--line);
}

.langsw a, .langsw .on{ display:inline-flex; align-items:center; padding:.6rem .25rem; }
.langsw{
  display:flex; align-items:center; gap:.5rem;
  font-size:.78rem; letter-spacing:.16em; font-weight:500;
}
.langsw .on{ color:var(--acc-text); }
.langsw a{
  color:var(--muted2); text-decoration:none; transition:color .25s;
}
.langsw a:hover{ color:var(--text); }
.langsw::before{ content:""; }
@media(max-width:640px){
  .nav .nav-right{ gap:.7rem; }
  .langsw{ font-size:.72rem; letter-spacing:.1em; }
  .navback{ font-size:.72rem; letter-spacing:.1em; }
  .navfaq{ font-size:.72rem; letter-spacing:.1em; }
  /* op een smal scherm past het hele woord er niet naast de terugknop */
  .navfaq .lang{ display:none; }
  .navfaq .kort{ display:inline; }
  .navback::after{ margin-left:.5rem; height:12px; }
}

/* ---------- variantkiezer -------------------------------------------------- */
/* Klik op een print opent dit paneel: grote foto links, materiaal- en
   maatkeuze rechts, met een live prijs. De knop gaat naar het juiste
   Shopify-product met de gekozen variant al voorgeselecteerd. */
.vp{
  position:fixed; inset:0; z-index:140; display:none;
  background:rgba(5,5,7,.95);
  align-items:center; justify-content:center; padding:2.2rem 1.4rem;
}
.vp.open{ display:flex; }
.vp-box{
  width:min(1080px,100%); max-height:100%; overflow:auto;
  display:grid; grid-template-columns:1.15fr .85fr; gap:0;
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
}
@media(max-width:820px){ .vp-box{ grid-template-columns:1fr; } }
.vp-ph{ background:#141416; display:flex; align-items:center; justify-content:center; }
.vp-ph img{ width:100%; height:auto; display:block; }
.vp-body{ padding:2rem 1.9rem 2.1rem; display:flex; flex-direction:column; }
.vp-body h3{
  font-weight:300; font-size:clamp(1.4rem,2.4vw,1.85rem); margin:0 0 .3rem; color:var(--text);
}
.vp-loc{
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--acc-text-dim); font-weight:600; margin-bottom:1.5rem;
}
.vp-group{ margin-bottom:1.35rem; }
.vp-group > span{
  display:block; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted2); margin-bottom:.6rem; font-weight:500;
}
.vp-opts{ display:flex; flex-wrap:wrap; gap:.5rem; }
.vp-opt{
  font:inherit; font-size:.86rem; cursor:pointer;
  color:var(--muted); background:transparent;
  border:1px solid var(--line); border-radius:9px; padding:.55rem .9rem;
  transition:color .25s, border-color .25s, background .25s;
}
.vp-opt:hover{ color:var(--text); border-color:rgba(var(--acc-rgb),.45); }
.vp-opt.on{
  color:var(--acc-text); border-color:rgba(var(--acc-rgb),.65);
  background:rgba(var(--acc-rgb),.12);
}
.vp-opt[disabled]{ opacity:.32; cursor:not-allowed; }
.vp-price{
  margin:.4rem 0 1.4rem; padding-top:1.2rem; border-top:1px solid var(--line);
  font-size:1.9rem; font-weight:300; color:var(--acc-text);
}
.vp-price small{ display:block; font-size:.74rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted2); margin-bottom:.35rem; }
.vp-cta{ margin-top:auto; }
.vp-cta .btn{ width:100%; justify-content:center; }
.vp-note{
  display:block; margin-top:.9rem; font-size:.78rem; color:var(--muted2); line-height:1.5;
}
.vp-x{
  position:absolute; top:1.1rem; right:1.3rem; width:42px; height:42px;
  border:1px solid var(--line); border-radius:50%; background:rgba(0,0,0,.4);
  color:var(--text); font-size:1.4rem; line-height:1; cursor:pointer;
}
.vp-x:hover{ border-color:rgba(var(--acc-rgb),.5); }

/* omschrijving onder de materiaalknoppen */
.vp-desc{
  margin:.9rem 0 0; font-size:.88rem; line-height:1.62; color:var(--muted);
}
.vp-note a{ color:var(--acc-text); text-decoration:none; border-bottom:1px solid rgba(var(--acc-rgb),.35); }
.vp-note a:hover{ border-bottom-color:var(--acc-text); }

/* ---------- uitgelicht werk boven Recent Favourites ------------------------ */
/* Eén print groot, met het verhaal ernaast en een link naar het blog.
   De hele kaart opent de variantkiezer; de blog-link doet dat niet. */
.feature{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(1.8rem,3.6vw,3.4rem); align-items:center;
  max-width:var(--maxw-wide); margin:0 auto clamp(3rem,6vw,4.6rem);
  text-decoration:none; color:inherit;
}
@media(max-width:860px){ .feature{ grid-template-columns:1fr; } }
.feature-ph{ display:block; line-height:0; }
.feature-ph img{
  display:block; width:100%; height:auto; border-radius:6px;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
  transition:transform .8s cubic-bezier(.22,.61,.36,1);
}
.feature:hover .feature-ph img{ transform:translateY(-4px); }
.feature-body{ display:block; }
.feature-sub{
  display:block; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--acc-text-dim); font-weight:600; margin-bottom:.85rem;
}
.feature-title{
  display:block; font-weight:200; line-height:1.08; color:var(--text);
  font-size:clamp(1.9rem,4vw,3rem); letter-spacing:.015em; margin-bottom:1.3rem;
}
.feature-p{
  display:block; color:var(--muted); font-size:1rem; line-height:1.72; margin-bottom:1rem;
}
.feature-p b{ color:var(--text); font-weight:500; }
.feature-link{
  /* eigen regel, maar het lijntje loopt alleen onder de tekst */
  display:block; width:fit-content; margin:.3rem 0 1.9rem; color:var(--acc-text);
  font-size:.95rem; border-bottom:1px solid rgba(var(--acc-rgb),.4);
  transition:border-color .25s;
}
.feature-link:hover{ border-bottom-color:var(--acc-text); }
.feature-cta{ display:inline-flex; width:fit-content; }

/* het beeld in de kiezer wisselt mee met het materiaal */
.vp-ph img{ transition:opacity .25s ease; }

/* De linkerkolom voegt zich naar het beeld: een portretmockup wordt smal en
   hoog, een landschapsmockup breed. Zo is er nooit een lege strook naast het
   beeld en scrolt het paneel niet. */
/* De fotokolom heeft een vaste breedte. Met `auto` haalde Safari de breedte uit
   de foto zelf en herrekende dat bij elke hover: dan werd de fotokolom 1010px
   en bleef er van de tekstkolom 68px over, dus zag je alleen nog de foto. */
.vp-box{ grid-template-columns:min(52vw,620px) minmax(0,1fr); max-height:min(92vh,980px); }
.vp-ph{ min-height:0; }
.vp-ph img{
  display:block; width:auto; height:auto;
  max-height:min(92vh,980px); max-width:min(52vw,620px);
}
@media(max-width:820px){
  .vp-box{ grid-template-columns:1fr; }
  .vp-ph img{ max-width:100%; max-height:60vh; margin:0 auto; }
}

/* ---------- draaibare 3D-weergave in de kiezer ------------------------------ */
/* Voor acryl en baklijst: een echt paneel met dikte dat je met de muis draait.
   De glans en de schaduw bewegen mee, zodat je het effect van het materiaal
   ziet. Papier blijft een vlak beeld. */
.v3d{
  position:relative; width:100%; height:100%; min-height:420px;
  display:flex; flex-direction:column;
  background:#141416;
  overflow:hidden; user-select:none; touch-action:none;
}
.v3d-stage{
  position:relative; flex:1 1 auto; min-height:0; overflow:hidden; cursor:grab;
  background:
    radial-gradient(75% 70% at 50% 45%, #2f2f31 0%, #1e1e20 70%, #161618 100%);
  background-size:cover; background-position:center;
  perspective:1600px; perspective-origin:50% 50%;
}
.v3d.dragging .v3d-stage{ cursor:grabbing; }
.v3d.room .v3d-stage{ cursor:default; }
/* vensterlicht rechtsonder, zoals bij een galeriemuur */
.v3d-stage::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(35deg, transparent 58%, rgba(255,255,255,.045) 60%, rgba(255,255,255,.045) 64%, transparent 66%,
                    transparent 71%, rgba(255,255,255,.04) 73%, rgba(255,255,255,.04) 77%, transparent 79%);
}
.v3d-panel{
  position:relative; transform-style:preserve-3d;
  will-change:transform; transition:transform .12s ease-out;
}
.v3d-face{ position:absolute; inset:0; backface-visibility:hidden; }
.v3d-front{
  background-size:cover; background-position:center;
  transform:translateZ(var(--t));
}
/* glans over het glas: verschuift met de draaihoek */
.v3d-front::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(45deg, transparent 0%, transparent calc(var(--g) - 14%),
                    rgba(255,255,255,.10) calc(var(--g) - 4%), rgba(255,255,255,.10) calc(var(--g) + 4%),
                    transparent calc(var(--g) + 14%), transparent calc(var(--g) + 22%),
                    rgba(255,255,255,.06) calc(var(--g) + 30%), transparent calc(var(--g) + 40%)),
    radial-gradient(60% 60% at 0% 0%, rgba(255,255,255,.07), transparent 70%);
  mix-blend-mode:screen;
}
/* de vier zijkanten: dikte van het paneel */
.v3d-side{ position:absolute; backface-visibility:hidden; }
.v3d-side.l{ left:0; top:0; width:var(--t2); height:100%; transform-origin:left center;  transform:rotateY(-90deg) translateZ(0); }
.v3d-side.r{ right:0; top:0; width:var(--t2); height:100%; transform-origin:right center; transform:rotateY(90deg) translateZ(0); }
.v3d-side.t{ left:0; top:0; width:100%; height:var(--t2); transform-origin:center top; transform:rotateX(90deg) translateZ(0); }
.v3d-side.b{ left:0; bottom:0; width:100%; height:var(--t2); transform-origin:center bottom; transform:rotateX(-90deg) translateZ(0); }
/* acryl: glazige laag met de foto erdoorheen, daarachter de zwarte dibondkern */
.v3d.acrylic .v3d-side{
  background:
    linear-gradient(to right, rgba(255,255,255,.55), rgba(255,255,255,.15) 55%, rgba(20,20,22,1) 62%, rgba(20,20,22,1) 100%);
  background-color:#9aa0a6;
}
.v3d.acrylic .v3d-side.l, .v3d.acrylic .v3d-side.r{
  background:
    linear-gradient(to right, rgba(255,255,255,.55), rgba(255,255,255,.12) 55%, #141416 62%, #141416 100%),
    var(--edge, #9aa0a6);
}
.v3d.acrylic .v3d-side.t, .v3d.acrylic .v3d-side.b{
  background:
    linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,.12) 55%, #141416 62%, #141416 100%),
    var(--edge, #9aa0a6);
}
/* een felle lichtlijn langs de voorste rand */
.v3d.acrylic .v3d-front{ box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 1px 0 0 rgba(255,255,255,.35); }
/* baklijst: matzwart hout, foto vlak verzonken met een smalle schaduwsleuf */
.v3d.framed{ --f1:#1a1a1a; --f2:#0c0c0c; --f3:#1c1c1c; --f4:#0b0b0b; --fface:#101010; --fbg:#0e0e0e; }
/* donker eiken: warm, donkerbruin hout in plaats van matzwart */
.v3d.framed.oak{ --f1:#46342b; --f2:#241a15; --f3:#4b382e; --f4:#221813; --fface:#382a22; --fbg:#2c201a; }
.v3d.framed .v3d-side{ background:linear-gradient(to right,var(--f1),var(--f2)); }
.v3d.framed .v3d-side.t, .v3d.framed .v3d-side.b{ background:linear-gradient(to bottom,var(--f3),var(--f4)); }
.v3d.framed .v3d-front{
  background-color:var(--fbg,#0e0e0e);
  background-size:calc(100% - 2 * var(--fw)) calc(100% - 2 * var(--fw));
  background-repeat:no-repeat; background-position:center;
  box-shadow: inset 0 0 0 var(--fw) var(--fface,#101010),
              inset 0 0 0 calc(var(--fw) + 1px) rgba(0,0,0,.9),
              inset 0 0 calc(var(--fw) * .9) calc(var(--fw) + 2px) rgba(0,0,0,.55);
}
.v3d.framed .v3d-front::after{
  /* mat Hahnemuehle-papier: geen glans, wel een fijne, zachte korrelstructuur */
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .55 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size:160px 160px;
  mix-blend-mode:overlay; opacity:.22;
}
.v3d.framed .v3d-front{
  box-shadow: inset 0 0 0 var(--fw) var(--fface,#101010),
              inset 0 0 0 calc(var(--fw) + 1px) rgba(0,0,0,.9),
              inset 0 0 calc(var(--fw) * .9) calc(var(--fw) + 2px) rgba(0,0,0,.55);
}
.v3d.room .v3d-hint{ display:none; }
/* schaduw op de muur, schuift mee met de draaihoek */
.v3d-shadow{
  position:absolute; inset:0; border-radius:2px; pointer-events:none;
  background:rgba(0,0,0,.65); filter:blur(28px);
  transform:translate3d(var(--sx), var(--sy), -1px) scale(.98);
}
.v3d-hint{
  position:absolute; left:50%; bottom:1rem; transform:translateX(-50%);
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.45); pointer-events:none; white-space:nowrap;
  transition:opacity .4s;
}
.v3d.touched .v3d-hint{ opacity:0; }
/* het kader van de 3D-weergave vult de linkerkolom */
.vp-ph{ display:flex; align-items:stretch; justify-content:center; }
/* De 3D-weergave mag de hele hoogte vullen, een gewone mockup nooit: die werd
   door align-items:stretch verticaal uitgerekt en zag er vierkant uit. */
.vp-ph > img{ align-self:center; }
.vp-ph .v3d{ width:min(52vw,620px); height:min(92vh,980px); min-height:520px; }
/* Een liggende print hangt op een breder, lager stuk muur; anders zou de lijst
   in het staande vlak worden afgesneden. */
.vp-ph .v3d.land{ height:min(72vh,720px); min-height:420px; }
@media(max-width:820px){ .vp-ph .v3d{ width:100%; height:60vh; min-height:380px; } }

/* podium binnen het 3D-kader: in kamer-modus de kamerfoto als achtergrond */
.v3d-panel{ position:absolute; }
.v3d.room .v3d-stage{ background-color:#202022; }
/* in de kamer: geen perspectief en geen draaiing, dus de zijkanten blijven
   onzichtbaar en er verschijnt geen lichte rand boven of onder het paneel */
.v3d.room .v3d-stage{ perspective:none; }
.v3d.room .v3d-side{ display:none; }
.v3d.room .v3d-shadow{ background:rgba(0,0,0,.45); filter:blur(16px); }
.v3d.room .v3d-stage::before{ display:none; }
/* miniaturen van de weergaven, onderin het kader */
.v3d-thumbs{
  flex:0 0 auto; display:flex; gap:.55rem; justify-content:center;
  padding:.7rem .8rem; background:#141416; border-top:1px solid rgba(255,255,255,.06);
}
.v3d-thumb{
  padding:0; border:2px solid rgba(255,255,255,.18); border-radius:8px;
  background:#1a1a1c; cursor:pointer; overflow:hidden; width:84px; height:60px;
  transition:border-color .25s, transform .25s;
}
.v3d-thumb:hover{ border-color:rgba(255,255,255,.45); transform:translateY(-2px); }
.v3d-thumb.on{ border-color:var(--acc-text); }
.v3d-mini{ position:relative; display:block; width:100%; height:100%; overflow:hidden; }
.v3d-mini-wall{ background:radial-gradient(80% 80% at 50% 45%, #333336, #1c1c1e); }
.v3d-mini-wall img{
  position:absolute; left:50%; top:50%; max-width:78%; max-height:84%;
  transform:translate(-50%,-50%) perspective(300px) rotateY(14deg);
  box-shadow:4px 6px 12px rgba(0,0,0,.6);
}
.v3d-mini-room{ background-size:cover; background-position:center; }
/* de muur-mockup vult het knopje helemaal: geen randje, lijst groter in beeld */
.v3d-mini-still{ background-size:cover; background-position:center; background-repeat:no-repeat; background-color:#3a3a3d; }
.v3d-mini-room img{ position:absolute; box-shadow:2px 3px 6px rgba(0,0,0,.45); }
.v3d.room .v3d-hint{ display:none; }


/* kamer: geen glinsterlijn op de voorrand, en een donkere ondergrond achter
   de foto zodat een eventuele halve pixel nooit licht oplicht */
.v3d-front{ background-color:#101012; }
.v3d.room .v3d-front{ box-shadow:none; }
.v3d.room .v3d-front::after{ opacity:.5; }

/* detail: close-up van de hoek; de zijkanten worden dik en duidelijk */

.v3d.detail .v3d-shadow{ display:none; }
.v3d-mini-detail{ background:radial-gradient(80% 80% at 40% 40%, #333336, #1c1c1e); }
.v3d-mini-detail img{
  position:absolute; left:34%; top:30%; width:150%;
  transform-origin:0 0; transform:perspective(220px) rotateY(30deg) rotateX(12deg);
  box-shadow:-6px 0 0 rgba(255,255,255,.35);
}
/* stilstaande mockup in plaats van 3D (baklijst aan de muur) */
.v3d-photo{ position:absolute; inset:0; background-size:cover; background-position:center; }
.v3d.photo .v3d-panel, .v3d.photo .v3d-hint{ display:none; }
.v3d.photo .v3d-stage{ cursor:default; }

/* ---------- schaduw in de kamer: dicht tegen de muur ---------------------- */
/* Geen brede zwevende vlek meer. Een strakke contactschaduw vlak onder en
   naast het paneel, plus een korte zachte val. De lamp staat rechts, dus de
   schaduw valt iets naar links. Acryl hangt op afstandhouders (2 cm) en krijgt
   een fractie meer ruimte dan de baklijst, die vlak tegen de muur hangt. */
.v3d.room .v3d-shadow{ display:none; }
.v3d.room.framed .v3d-front{
  box-shadow:
    -1px 2px 3px rgba(0,0,0,.42),
    -2px 6px 10px rgba(0,0,0,.28),
    -3px 12px 22px rgba(0,0,0,.14);
}
.v3d.room.acrylic .v3d-front{
  box-shadow:
    -1px 3px 4px rgba(0,0,0,.36),
    -3px 9px 14px rgba(0,0,0,.26),
    -4px 18px 30px rgba(0,0,0,.14);
}

/* ---------- het paneel past altijd op het scherm ---------------------------- */
/* De tekstkolom (baklijst heeft de langste omschrijving) mag het paneel niet
   hoger maken dan het scherm, anders zakt de miniaturenstrook onder de rand.
   Daarom scrolt de tekstkolom zelf, en blijft het beeld met de miniaturen
   altijd volledig zichtbaar. */
.vp-box{ overflow:hidden; }
.vp-body{ max-height:min(92vh,980px); overflow:auto; min-height:0; }
.vp-ph .v3d{ height:min(92vh,980px); }
@media(max-width:820px){
  .vp-box{ overflow:auto; }
  .vp-body{ max-height:none; overflow:visible; }
}

/* ---------- strak: geen ronde hoeken ---------------------------------------- */
/* Albert wil het strak. Foto's, kaarten, panelen, miniaturen, keuzeknopjes en
   invoervelden krijgen rechte hoeken. Alleen de grote koperen actieknoppen
   (.btn) houden hun vorm, die horen bij de masterclass-stijl. */
.pcard, .pcard .ph img, .feature-ph img, .pr, .contact, .form,
.form input, .form textarea, .vp-box, .vp-ph img, .v3d-thumb, .v3d-mini,
.vp-opt, .fbtn, .hph, .hph img, .v3d-shadow, .v3d-photo, .v3d-panel,
.v3d-front, .strip img, .lb img{ border-radius:0 !important; }

/* Lege notitieregel neemt geen ruimte in (checkout heeft geen bijschrift). */
.vp-note:empty{display:none}

/* Onder de koopknop: de kassa draait op het domein van de webshop. */
.vp-shop{
  display:block; margin-top:.8rem; font-size:.74rem; color:var(--muted2); line-height:1.5;
}
.vp-shop:empty{display:none}

/* Onder elke prijs staat dat er wereldwijd verstuurd wordt. */
.vp-ship{
  display:block; margin-top:.45rem; font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted2);
}

/* Brochure-blok onder het mailadres in de bezoeksectie. */
.contact .brochure{
  margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--line);
}
.contact .brochure h4{
  margin:0 0 .5rem; font-weight:400; font-size:1.02rem; letter-spacing:.02em; color:var(--acc-text);
}
.contact .brochure p{ margin:0 0 1rem; }

/* ---------- de materialen: drieluik met foto, tekst en een detailbeeld ----- */
.mats{
  display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  max-width:var(--maxw); margin:0 auto;
}
.matc{
  display:flex; flex-direction:column;
  border:1px solid var(--line); background:var(--panel); overflow:hidden;
}
.matc-ph{ display:block; line-height:0; background:#0e0e10; }
.matc-ph img{ display:block; width:100%; height:auto; }
.matc-body{ padding:1.5rem 1.5rem 1.6rem; flex:1; display:flex; flex-direction:column; }
.matc-body h3{ margin:0 0 .2rem; font-weight:400; font-size:1.2rem; color:var(--text); }
.matc-sub{
  display:block; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--acc-text-dim); font-weight:600; margin-bottom:.9rem;
}
.matc-body p{ margin:0; color:var(--muted); line-height:1.7; font-size:.95rem; }
/* De opsomming staat onderaan het blok, zodat de drie blokken op dezelfde
   hoogte uitlijnen ongeacht de lengte van de tekst. */
.matc-specs{ margin:1.6rem 0 0; padding-top:.2rem; }
.matc-body > .matc-specs{ margin-top:auto; }
.matc-specs > div{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.5rem 0; border-top:1px solid var(--line2,rgba(255,255,255,.07));
  font-size:.85rem;
}
.matc-specs dt{ color:var(--muted2); letter-spacing:.04em; }
.matc-specs dd{ margin:0; color:var(--text); text-align:right; }
.mats-foot{
  max-width:720px; margin:2.4rem auto 0; text-align:center;
  color:var(--muted2); font-size:.95rem; line-height:1.7;
  /* verdeelt de regels gelijkmatig, zodat er nooit één woord onderaan valt */
  text-wrap:balance;
}

/* Materiaaltekst in de kiezer: alinea's met accent op de kernwoorden. */
.vp-desc p{ margin:0 0 .7rem; }
.vp-desc p:last-child{ margin-bottom:0; }
.vp-desc b, .matc-body b{ font-weight:500; color:var(--text); }
.matc-body p + p{ margin-top:.75rem; }

/* ---------- keuze van de lijstkleur ------------------------------------- */
.vp-swatch{ display:inline-flex; align-items:center; gap:.5rem; }
.vp-swatch i{
  width:.85rem; height:.85rem; display:inline-block; flex:none;
  border:1px solid rgba(255,255,255,.28);
}
.vp-swatch.sw-black i{ background:linear-gradient(135deg,#232323,#0b0b0b); }
.vp-swatch.sw-oak i{ background:linear-gradient(135deg,#5a4437,#2a1e18); }

/* Koppen en losse regels netjes verdelen over de regels. */
.sec-head p{ text-wrap:balance; }
.sec-head p + p{ margin-top:1rem; }


.sec-head p a{ color:var(--acc-text); text-decoration:none; border-bottom:1px solid rgba(var(--acc-rgb),.35); }
.sec-head p a:hover{ border-bottom-color:var(--acc-text); }

/* Tweede, rustige route onder de koopknop: een mail met de print erin. */
.vp-ask{
  display:block; margin-top:.85rem; text-align:center;
  font-size:.82rem; letter-spacing:.04em; color:var(--muted2);
  text-decoration:none; border-bottom:1px solid transparent; width:fit-content;
  margin-left:auto; margin-right:auto; padding-bottom:1px;
  transition:color .25s, border-color .25s;
}
.vp-ask:hover{ color:var(--acc-text); border-bottom-color:rgba(var(--acc-rgb),.5); }

/* Op een telefoon moeten de taalknop, het logo en de voetlink groot genoeg zijn
   om met een duim te raken; visueel verandert er niets. */
.langsw a, .langsw .on{ padding:.6rem .75rem; margin:-.6rem -.4rem; }
.langsw{ gap:.15rem; }
.nav .brand{ padding:.4rem 0; }
footer a{ padding:.45rem .2rem; display:inline-block; }

/* ---------- meer over dit materiaal ------------------------------------- */
.vp-meer{
  display:inline-block; margin-top:.85rem; padding:0; border:0; background:none;
  font:inherit; font-size:.8rem; letter-spacing:.04em; color:var(--acc-text-dim);
  cursor:pointer; border-bottom:1px solid rgba(var(--acc-rgb),.35);
  transition:color .25s, border-color .25s;
}
.vp-meer:hover{ color:var(--acc-text); border-bottom-color:rgba(var(--acc-rgb),.7); }

.matvenster{
  position:fixed; inset:0; z-index:160; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(6,6,7,.90);
}
.matvenster.open{ display:flex; }
.matvenster-box{ position:relative; width:min(420px,100%); max-height:90vh; overflow:auto; }
.matvenster .matc{ background:var(--panel); }
.matvenster .vp-x{
  position:absolute; top:-15px; right:-15px; z-index:2;
  width:38px; height:38px; font-size:1.2rem;
  background:#141416; border-color:rgba(255,255,255,.3);
  box-shadow:0 4px 14px rgba(0,0,0,.6);
}
@media(max-width:520px){
  .matvenster{ padding:16px; }
  .matvenster .vp-x{ top:-12px; right:-12px; }
}


/* ---------- vragen en antwoorden ------------------------------------------- */
/* Uitklappers zonder javascript: <details> doet het werk. Dicht is de standaard,
   zodat je in een oogopslag ziet welke vragen er zijn. */
/* de balk blijft staan, dus de sectie moet er net onder uitkomen */
#faq{ scroll-margin-top:90px; }
.faq{ max-width:820px; margin:0 auto; }
.faq details{ border-top:1px solid var(--line); }
.faq details:last-child{ border-bottom:1px solid var(--line); }
.faq summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.2rem;
  padding:1.15rem .2rem; cursor:pointer; list-style:none;
  font-size:clamp(1rem,1.6vw,1.12rem); font-weight:400; color:var(--text);
  transition:color .2s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--acc-text); }
.faq-t{ position:relative; flex:0 0 14px; height:14px; margin-top:.45rem; }
.faq-t::before, .faq-t::after{
  content:""; position:absolute; inset:0; margin:auto; background:var(--acc-text);
  transition:transform .25s, opacity .25s;
}
.faq-t::before{ width:14px; height:1px; }
.faq-t::after{ width:1px; height:14px; }
.faq details[open] .faq-t::after{ transform:rotate(90deg); opacity:0; }
.faq details[open] summary{ color:var(--acc-text); }
.faq-a{ padding:0 2.4rem 1.35rem .2rem; color:var(--muted); line-height:1.75; }
.faq-a p{ margin:0; }
.faq-a b{ color:var(--text); font-weight:500; }
.faq-a a{ color:var(--acc-text); text-decoration:none; border-bottom:1px solid rgba(var(--acc-rgb),.35); }
.faq-a a:hover{ border-bottom-color:var(--acc-text); }
@media (max-width:640px){
  .faq summary{ padding:1rem .1rem; }
  .faq-a{ padding:0 1.6rem 1.2rem .1rem; }
}