/* Velvet Cakes by Ank - variant 2.
   Deze variant volgt het voorbeeld dat Ank zelf met ChatGPT maakte zo dicht
   mogelijk: rozenhout en creme, schriftletters, hartjes, een gesplitste
   opener met haar eigen foto en daaronder de rij soorten. */
:root{
  --creme:#FCF6F2;
  --creme-2:#F8EDE7;
  --nude:#EFDED6;
  --rose:#BE8C84;          /* knoppen en accentletters */
  --rose-diep:#A4746D;
  --rose-licht:#E2A3A4;    /* schriftletters en hartjes */
  --ink:#4A3830;
  --muted:#80675E;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --script:"Parisienne",cursive;
  --maxw:1240px;
  --koph:96px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--creme);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;line-height:1.1}
p{margin:0 0 1em}
a{color:inherit}

.schrift{font-family:var(--script);color:var(--rose-licht);line-height:1.15}
.hartje{color:var(--rose-licht);font-size:1.1em}
.bovenregel{
  font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--rose);margin:0 0 1rem;
}

/* ---------- knoppen ---------- */
.knop{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--sans);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;padding:1.05rem 2.1rem;border-radius:100px;
  transition:background .25s,color .25s,transform .2s;
}
.knop i{font-style:normal;transition:transform .25s}
.knop:hover i{transform:translateX(4px)}
.knop-vol{background:var(--rose);color:#fff}
.knop-vol:hover{background:var(--rose-diep)}

/* ---------- kop ---------- */
.kop{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:2rem;
  padding:.5rem clamp(1rem,3vw,2.6rem);
  background:rgba(252,246,242,.94);backdrop-filter:blur(10px);
}
.merk{flex:none;margin-right:auto}
.merk img{width:86px;height:86px;border-radius:50%;object-fit:cover}
.menu{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.2rem)}
.menu a{
  text-decoration:none;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);opacity:.8;padding-bottom:3px;border-bottom:1px solid transparent;
}
.menu a:hover{opacity:1}
.menu a.is-nu{opacity:1;border-bottom-color:var(--rose)}
.kop-rechts{display:flex;align-items:center;gap:.9rem}
.sociaal{
  width:34px;height:34px;flex:none;border-radius:50%;
  display:grid;place-items:center;background:var(--creme-2);
  transition:background .2s;
}
.sociaal:hover{background:var(--nude)}
.sociaal svg{width:16px;height:16px;fill:var(--rose-diep)}
.kop-cta{padding:.85rem 1.6rem;font-size:.68rem}
.menu-knop{display:none;background:none;border:0;padding:.5rem;cursor:pointer}
.menu-knop span{display:block;width:24px;height:1px;background:var(--ink);margin:5px 0;transition:.25s}

/* ---------- hero ---------- */
.hero{
  display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);
  align-items:stretch;background:linear-gradient(120deg,#FDF8F5,#F7E9E3 70%,#F3DED8);
  /* de opener past op een scherm: hoger dan dit en de tekstkolom houdt
     alleen maar lege creme onder zich over */
  min-height:min(calc(100svh - var(--koph)),720px);
}
.hero-tekst{
  padding:clamp(2.2rem,4vw,3.4rem) clamp(1.4rem,4vw,4rem);
  display:flex;flex-direction:column;justify-content:center;text-align:center;
  align-items:center;
}
.hero-tekst h1{
  font-size:clamp(2.5rem,4.4vw,3.7rem);letter-spacing:.06em;text-transform:uppercase;
  color:#3F302A;
}
.schrift-groot{
  font-size:clamp(2rem,3.6vw,2.9rem);margin:.1rem 0 1.1rem;
}
.hero-lead{max-width:34ch;color:var(--muted);font-size:.98rem;margin-bottom:1.7rem}
.regel-hart{margin:1.5rem 0 .4rem;font-size:1.25rem}
.streepregel{
  display:flex;align-items:center;gap:1rem;margin:0;
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--rose-diep);
}
.streepregel i{display:block;width:clamp(28px,6vw,70px);height:1px;background:rgba(190,140,132,.5)}

.hero-foto{position:relative;overflow:hidden;min-height:clamp(340px,52vh,560px)}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:52% 26%}
.hero-schrift{
  position:absolute;right:clamp(1rem,3vw,3rem);top:clamp(1.5rem,6vw,4rem);
  margin:0;font-size:clamp(1.9rem,3.4vw,3rem);text-align:center;
  color:#fff;text-shadow:0 2px 18px rgba(96,58,52,.45);
}
.hartje-zwevend{position:absolute;font-size:clamp(1.2rem,2vw,1.8rem);color:rgba(255,255,255,.85)}
.hartje-zwevend.h1{right:clamp(4rem,10vw,9rem);top:clamp(.6rem,3vw,2rem)}
.hartje-zwevend.h2{right:clamp(1rem,3vw,3rem);top:clamp(7rem,16vw,11rem)}

/* ---------- waarden ---------- */
.waarden{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(2.2rem,4vw,3.4rem) clamp(1.2rem,4vw,3rem);
}
.waarde{display:flex;align-items:center;gap:.9rem;justify-content:center}
.waarde svg{
  width:34px;height:34px;flex:none;
  fill:none;stroke:var(--rose);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
.waarde span{font-size:.92rem;color:var(--ink)}

/* ---------- assortiment ---------- */
.assortiment{background:var(--creme-2);padding:clamp(2.5rem,5vw,4rem) clamp(1.2rem,4vw,3rem)}
.soorten{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(1rem,2vw,1.8rem);
}
.soort{text-decoration:none;text-align:center;display:block}
.soort img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 38%}
.soort h3{font-size:1.5rem;margin:1.1rem 0 .5rem}
.meer{
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--rose-diep);
  display:inline-flex;gap:.45rem;
}
.meer i{font-style:normal;transition:transform .25s}
.soort:hover .meer i{transform:translateX(4px)}
.soort:hover img{opacity:.92}

/* ---------- assortimentspagina ---------- */
/* De kop van een losse soortpagina is dezelfde gesplitste opener als op de
   homepage, alleen lager: er staat hier een galerij onder die je wilt zien. */
.hero-blad{min-height:min(calc(78svh - var(--koph)),580px)}
.hero-blad .hero-tekst{text-align:left;align-items:flex-start}
.hero-blad .hero-lead{max-width:40ch}
.hero-blad .hero-foto img{object-position:50% 40%}
.knop-lijn{border:1px solid rgba(190,140,132,.55);color:var(--rose-diep)}
.knop-lijn:hover{background:var(--nude)}
.hero-knoppen{display:flex;flex-wrap:wrap;gap:.7rem}
.kruimel{
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 1.2rem;
}
.kruimel a{text-decoration:none;color:var(--muted)}
.kruimel a:hover{color:var(--rose-diep)}
.kruimel b{font-weight:400;color:var(--rose-diep)}
.kruimel span{margin:0 .3rem;color:var(--rose-licht)}

.kenmerken{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,3rem);
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(2.4rem,4.5vw,3.6rem) clamp(1.2rem,4vw,3rem);
}
.kenmerk{border-top:1px solid rgba(190,140,132,.28);padding-top:1.1rem}
.kenmerk h3{font-size:1.35rem;margin-bottom:.5rem}
.kenmerk p{color:var(--muted);font-size:.94rem;margin:0}

.groep{padding:clamp(2.2rem,4.5vw,3.6rem) clamp(1.2rem,4vw,3rem)}
.groep-gevuld{background:var(--creme-2)}
.groep-kop{max-width:var(--maxw);margin:0 auto clamp(1.4rem,3vw,2.2rem)}
.groep-kop h2{font-size:clamp(1.9rem,3.2vw,2.6rem)}
.groep-kop p{color:var(--muted);max-width:60ch;margin:0}
.groep-kop .lijntje{margin:1rem 0 1.1rem}

.galerij{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.6rem,1.4vw,1.2rem);
}
/* met twee of drie fotos ziet een vierkolomsraster er kaal uit */
.galerij:has(.tegel:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
.galerij:has(.tegel:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
.tegel{margin:0;position:relative;cursor:zoom-in;overflow:hidden;background:var(--nude)}
.tegel img{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  transition:transform .5s ease;
}
.tegel:hover img,.tegel:focus-visible img{transform:scale(1.04)}
.tegel:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
.tegel figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:1.6rem .8rem .7rem;font-size:.78rem;color:#fff;
  background:linear-gradient(transparent,rgba(58,36,30,.7));
  opacity:0;transition:opacity .3s ease;
}
.tegel:hover figcaption,.tegel:focus-visible figcaption{opacity:1}
.galerijnoot{
  text-align:center;font-size:.76rem;letter-spacing:.06em;color:var(--muted);
  margin:0;padding:1.6rem 1rem 0;
}

.verwant{padding:clamp(2.4rem,5vw,4rem) clamp(1.2rem,4vw,3rem)}
.verwant .bovenregel{text-align:center}
.verwant .soorten{grid-template-columns:repeat(4,1fr)}
/* de homepage laat de vijfde soort over de volle breedte lopen; hier staan er
   vier, dus die uitzondering moet er weer af */
.verwant .soort:last-child{grid-column:auto}
.verwant .soort:last-child img{aspect-ratio:4/5}

/* ---------- grote fotoweergave ---------- */
/* Achtergrond helemaal dicht: met een doorzichtig vlak schemerde de galerij
   eronder tijdens het vegen door de foto heen. */
.lightbox{position:fixed;inset:0;z-index:60;background:#2A1A18}
.lightbox[hidden]{display:none}
.lb-track{
  position:absolute;inset:0;display:flex;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.lb-track::-webkit-scrollbar{display:none}
.lb-slide{
  flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(2.6rem,7vh,4rem) clamp(.5rem,4vw,4.5rem) clamp(3.6rem,9vh,5rem);
  opacity:.35;transition:opacity .3s ease;
}
.lb-slide.is-nu{opacity:1}
.lb-slide img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;margin:auto;box-shadow:0 18px 50px rgba(0,0,0,.45);
}
/* nog niet geladen dia laat niets zien in plaats van een regel alt-tekst */
.lb-slide img:not([src]){visibility:hidden}
.lb-bar{
  position:absolute;left:0;right:0;bottom:0;padding:.9rem 1rem 1.3rem;
  text-align:center;pointer-events:none;
  background:linear-gradient(transparent,rgba(42,26,24,.75) 40%);
}
#lb-caption{color:rgba(252,246,242,.88);font-size:.85rem;letter-spacing:.06em;margin:0}
.lb-teller{
  margin:.45rem 0 0;font-size:.68rem;letter-spacing:.18em;
  color:rgba(252,246,242,.45);font-variant-numeric:tabular-nums;
}
.lightbox button{
  background:none;border:0;color:#FCF6F2;cursor:pointer;
  font-size:2.5rem;line-height:1;opacity:.6;transition:opacity .2s;padding:.5rem 1rem;
}
.lightbox button:hover{opacity:1}
.lb-close{position:absolute;top:.6rem;right:1rem;font-size:2.2rem;z-index:2}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);z-index:2}
.lb-prev{left:.2rem}
.lb-next{right:.2rem}
/* pagina eronder staat stil zolang de grote weergave open is */
html.lb-open,body.lb-vast{overflow:hidden}
body.lb-vast .dock{opacity:0;pointer-events:none}

/* ---------- over mij ---------- */
.over{
  position:relative;background:var(--nude);
  display:grid;grid-template-columns:minmax(0,42fr) minmax(0,33fr) minmax(0,25fr);
  align-items:center;gap:clamp(1.5rem,4vw,3.5rem);
  padding:clamp(2.5rem,5vw,4.5rem) clamp(1.4rem,5vw,4.5rem);
}
.over-tekst h2{font-size:clamp(2.2rem,3.6vw,3rem)}
.lijntje{display:block;width:58px;height:1px;background:var(--rose);margin:1.1rem 0 1.5rem}
.over-tekst p{color:var(--muted);max-width:46ch}
.over-onder{display:flex;align-items:center;gap:1.8rem;flex-wrap:wrap;margin-top:1.6rem}
.handtekening{font-size:2.2rem;margin:0}
.over-foto img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.over-schrift{
  margin:0;font-size:clamp(1.6rem,2.6vw,2.4rem);text-align:center;color:var(--rose-licht);
}

/* ---------- strook ---------- */
.strook{display:grid;grid-template-columns:repeat(5,1fr)}
.strook img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}

/* ---------- oproep ---------- */
.oproep{
  background:var(--creme-2);
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1.4rem;
  padding:clamp(2.2rem,4vw,3.2rem) clamp(1.2rem,4vw,3rem);
}
.oproep .schrift{font-size:clamp(1.5rem,2.6vw,2.2rem);margin:0;text-align:center}
.oproep .hartje{font-size:1.5rem}

/* ---------- aanvraag ---------- */
.aanvraag{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(3rem,6vw,5.5rem) clamp(1.2rem,4vw,3rem);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4rem);align-items:start;
}
.aanvraag h2{font-size:clamp(2rem,3.4vw,2.8rem);margin-bottom:1rem}
.aanvraag-lead{color:var(--muted)}
.direct{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:center;margin-top:1.6rem}
.direct a{color:var(--rose-diep);text-decoration:none;border-bottom:1px solid rgba(190,140,132,.5)}
.direct span{color:var(--rose-licht)}
.aanvraag form{
  display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;
  background:#fff;padding:clamp(1.4rem,3.5vw,2.4rem);
}
.veld{display:flex;flex-direction:column;gap:.4rem}
.veld-breed{grid-column:1/-1}
.veld label{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.veld input,.veld select,.veld textarea{
  font-family:var(--sans);font-size:1rem;font-weight:300;color:var(--ink);
  border:0;border-bottom:1px solid rgba(74,56,48,.18);background:none;
  padding:.55rem .2rem;resize:vertical;
}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:none;border-color:var(--rose)}
.veld input[type=file]{font-size:.85rem;border:0;padding-left:0}
.aanvraag form .knop{grid-column:1/-1;justify-self:start;border:0;cursor:pointer}
.vormnoot{grid-column:1/-1;margin:0;font-size:.76rem;color:var(--muted)}

/* ---------- voet ---------- */
.voet{
  background:var(--creme-2);
  padding:clamp(2.5rem,5vw,4rem) clamp(1.2rem,4vw,3rem) 2rem;
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1.5rem,4vw,3rem);
  align-items:center;
}
.voet-merk{display:flex;align-items:center;gap:1rem}
.voet-merk img{width:92px;height:92px;border-radius:50%}
.voet-merk .schrift{font-size:2rem;margin:0}
.voet-gegevens{font-size:.92rem;color:var(--muted);text-align:center}
.voet-gegevens p{margin:.2rem 0}
.voet-gegevens a{color:var(--rose-diep);text-decoration:none}
.voet-volg{text-align:center}
.voet-volg p{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 .6rem}
.voet-iconen{display:flex;gap:.6rem;justify-content:center}
.voet-slot{
  grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:1rem;
  margin:2rem 0 0;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--rose-diep);
}
.voet-slot i{display:block;width:clamp(30px,10vw,120px);height:1px;background:rgba(190,140,132,.45)}

/* ---------- meelopende knoppen ---------- */
.dock{
  position:fixed;right:clamp(1rem,3vw,2.2rem);bottom:clamp(1rem,3vw,2.2rem);
  z-index:50;display:flex;align-items:center;gap:.7rem;
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
}
.dock.is-uit{opacity:1;transform:none;pointer-events:auto}
.dock a{text-decoration:none;display:grid;place-items:center}
.dock-wa{
  width:54px;height:54px;flex:none;border-radius:50%;background:#25D366;
  box-shadow:0 10px 28px rgba(74,56,48,.25);transition:transform .2s;
}
.dock-wa:hover{transform:translateY(-2px)}
.dock-wa svg{width:27px;height:27px;fill:#fff;display:block}
.dock-cta{
  background:var(--rose);color:#fff;
  padding:1rem 1.7rem;border-radius:100px;
  font-family:var(--sans);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  box-shadow:0 10px 30px rgba(164,116,109,.35);transition:.25s;
}
.dock-cta:hover{background:var(--rose-diep)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .menu{gap:1rem}
  .menu a{font-size:.68rem;letter-spacing:.1em}
  .merk img{width:72px;height:72px}
  .waarden{grid-template-columns:repeat(2,1fr);gap:1rem 1.5rem}
  .soorten{grid-template-columns:repeat(3,1fr)}
  .over{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:2rem}
  .over-schrift{grid-column:1/-1}
  .verwant .soorten{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:860px){
  .kop{padding:.4rem 1rem;gap:.8rem}
  .merk img{width:62px;height:62px}
  .menu{
    position:absolute;top:100%;left:0;right:0;
    display:none;flex-direction:column;align-items:flex-start;gap:1.3rem;
    background:var(--creme);padding:1.8rem 1.4rem;
    box-shadow:0 18px 30px rgba(74,56,48,.12);
  }
  .kop.is-open .menu{display:flex}
  .menu-knop{display:block;order:3}
  .kop-cta{display:none}
  .kop-rechts{gap:.5rem;margin-left:auto}
  .hero{grid-template-columns:1fr}
  .hero-foto{order:-1;min-height:min(54vh,420px)}
  .hero-tekst{padding-top:2.5rem}
  .strook{grid-template-columns:repeat(3,1fr)}
  .strook img:nth-child(4),.strook img:nth-child(5){display:none}
  .aanvraag{grid-template-columns:1fr}
  .voet{grid-template-columns:1fr;justify-items:center;text-align:center}
  .voet-merk{flex-direction:column;gap:.6rem}
  .hero-blad{min-height:0}
  .hero-blad .hero-foto{min-height:min(46vh,360px)}
  .kenmerken{grid-template-columns:1fr;gap:1.4rem}
  .galerij,.galerij:has(.tegel:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
  .verwant .soorten{grid-template-columns:repeat(2,1fr)}
  /* op de telefoon veeg je door de fotos, dan zijn de pijlen alleen maar in de weg */
  .lb-prev,.lb-next{display:none}
  .lb-slide{flex-basis:88%;padding-left:.3rem;padding-right:.3rem}
}
@media (max-width:620px){
  body{font-size:16px}
  .soorten{grid-template-columns:repeat(2,1fr);gap:.8rem}
  .soort:last-child{grid-column:1/-1}
  .soort:last-child img{aspect-ratio:16/9}
  .waarden{grid-template-columns:1fr;gap:.8rem;padding-top:2rem}
  .waarde{justify-content:flex-start}
  .over{grid-template-columns:1fr;padding-top:2.5rem}
  .over-foto{max-width:320px}
  .strook{grid-template-columns:repeat(2,1fr)}
  .strook img:nth-child(3){display:none}
  .aanvraag form{grid-template-columns:1fr}
  .galerij,
  .galerij:has(.tegel:nth-child(3):last-child),
  .galerij:has(.tegel:nth-child(2):last-child){grid-template-columns:repeat(2,1fr);gap:.5rem}
  /* zonder aanwijsapparaat komt het bijschrift nooit tevoorschijn, dus laat het staan */
  .tegel figcaption{opacity:1;font-size:.72rem;padding:1.4rem .6rem .55rem}
  .hero-blad .hero-tekst{padding-top:2rem}
  .hero-knoppen .knop{padding:.95rem 1.5rem}
  .dock{left:.8rem;right:.8rem;bottom:.8rem;gap:.6rem}
  .dock-wa{width:50px;height:50px}
  .dock-cta{flex:1;padding:.95rem 1rem;font-size:.7rem;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}