/* ============ HERO V2 (okt 2026) — houtoven + gevel met ingang via doorgang ============ */
@font-face{font-family:"Literata";font-weight:500;font-display:swap;src:url(/assets/hero/fonts/literata-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Literata";font-weight:600;font-display:swap;src:url(/assets/hero/fonts/literata-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Literata";font-weight:700;font-display:swap;src:url(/assets/hero/fonts/literata-latin-700-normal.woff2) format("woff2")}
:root{--serif:"Literata",Georgia,"Times New Roman",serif;--hv-cream:#f6f1ea;--hv-ink:#2a211c;--hv-green:#1f6b33}

/* header in serif zoals mockup */
.topnav{gap:30px}
.topnav a{font-family:var(--serif);font-weight:500;font-size:1.02rem;color:#fff}
.cart-btn{font-family:var(--serif);font-weight:600;font-size:1rem}

.hero.hero--v2{position:relative;padding:0;min-height:680px;background:#140c08;color:#fff;overflow:hidden}
.hero--v2 .hv-pizza{position:absolute;bottom:0;left:-20%;width:76%;aspect-ratio:1617/972;background:url(/assets/hero/pizza-oven.webp) 50% 50%/cover no-repeat;
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 28%),linear-gradient(90deg,#000 78%,transparent 100%);-webkit-mask-composite:source-in;
  mask:linear-gradient(180deg,transparent 0,#000 28%),linear-gradient(90deg,#000 78%,transparent 100%);mask-composite:intersect}
.hero--v2::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(12,7,4,.55) 0%,rgba(12,7,4,.25) 30%,rgba(12,7,4,0) 45%)}
.hero--v2 .hv-gevel{position:absolute;top:0;right:0;bottom:0;width:52%;z-index:1;background:url(/assets/hero/gevel-nl.webp) 100% 100%/cover no-repeat;
  -webkit-mask:url(/assets/hero/gevel-penseel.png) 0 0/100% 100% no-repeat;mask:url(/assets/hero/gevel-penseel.png) 0 0/100% 100% no-repeat}
html[lang="fr"] .hero--v2 .hv-gevel,html[lang="fr"] .hero--v2 .hv-gevel-m{background-image:url(/assets/hero/gevel-fr.webp)}
html[lang="en"] .hero--v2 .hv-gevel,html[lang="en"] .hero--v2 .hv-gevel-m{background-image:url(/assets/hero/gevel-en.webp)}
html[lang="de"] .hero--v2 .hv-gevel,html[lang="de"] .hero--v2 .hv-gevel-m{background-image:url(/assets/hero/gevel-de.webp)}

.hero--v2 .hv-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:78px 20px 104px;display:grid;grid-template-columns:minmax(0,1fr) 340px minmax(0,.4fr);gap:30px;align-items:start}
.hero--v2 .hv-kicker{display:block;font-weight:800;font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;margin:0 0 8px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.hero--v2 h1{font-family:var(--serif);font-weight:600;font-size:clamp(3rem,5.6vw,5.4rem);line-height:1;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero--v2 .hv-tricolor{display:block;width:260px;height:4px;margin:20px 0 26px;background:linear-gradient(90deg,#2f8a3f 0 33.3%,#fff 33.3% 66.6%,#d0312d 66.6%)}
.hero--v2 p.lede{margin:0 0 44px;max-width:520px;font-size:1.08rem;line-height:1.75;font-weight:500;color:rgba(255,255,255,.95);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.hero--v2 .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin:0}
.hero--v2 .btn{font-family:var(--serif);font-weight:600;font-size:1rem;padding:13px 20px;gap:9px}
.hero--v2 .btn svg{width:22px;height:22px}
.hero--v2 .btn-primary{background:var(--tomato);border-color:var(--tomato);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.hero--v2 .btn-ghost{background:rgba(0,0,0,.25);border-color:#fff;color:#fff}

.hero--v2 .hero-card{background:rgba(246,241,234,.97);color:var(--hv-ink);border:0;border-radius:16px;padding:16px 24px;box-shadow:0 18px 40px rgba(0,0,0,.35);gap:0}
.hero--v2 .hero-card-row{gap:14px;padding:12px 0;border-bottom:1px solid rgba(42,33,28,.13);font-size:.92rem}
.hero--v2 .hero-card-row:last-child{border-bottom:0}
.hero--v2 .hero-card-row>svg{width:22px;height:22px;color:var(--tomato);margin-top:1px}
.hero--v2 .hv-label{display:block;font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--tomato);margin:1px 0 5px}
.hero--v2 .hv-addr{font-family:var(--serif);font-size:1.08rem;line-height:1.4;color:var(--hv-ink)}
.hero--v2 .hv-entry{display:flex;gap:6px;align-items:flex-start;margin-top:8px;font-size:.84rem;font-weight:800;line-height:1.35;color:var(--hv-green)}
.hero--v2 .hv-entry svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--hv-green)}
.hero--v2 a.hv-tel{font-family:var(--serif);font-size:1.08rem;color:var(--hv-ink);text-decoration:none}
.hero--v2 .google-rating{font-size:.82rem;flex-wrap:nowrap;white-space:nowrap}
.hero--v2 .google-rating .stars{color:#e3a91d;font-size:1rem}
.hero--v2 .google-rating a{color:var(--hv-ink);font-weight:600}
.hero--v2 .status-pill.open{background:var(--basil-soft);color:var(--basil)}
.hero--v2 .status-pill.closed{background:rgba(42,33,28,.08);color:var(--text-muted)}
.hero--v2 .hours-table{grid-template-columns:1fr 1fr;gap:4px 14px;font-size:.88rem}
.hero--v2 .hours-table .day{color:var(--hv-ink)}
.hero--v2 .hours-table span{color:var(--hv-ink)}
.hero--v2 .hours-table .today{color:var(--hv-ink);font-weight:800}

.hero--v2 .hv-tear{position:absolute;left:0;right:0;bottom:-1px;height:110px;z-index:4;pointer-events:none;background:url(/assets/hero/rand-penseel.png) 0 100%/1650px 110px repeat-x}
.hero--v2 .hv-gevel-m{display:none}
/* stap 1 sluit aan op de beige rand */
.hero--v2 + .step-section{background:var(--hv-cream);border-bottom:0}
.hero--v2 + .step-section .step-num{background:var(--tomato);color:#fff;font-family:var(--serif);font-weight:500;width:54px;height:54px;font-size:1.4rem}
.hero--v2 + .step-section .step-head h2{font-family:var(--serif);font-weight:600;font-size:1.7rem}

@media (max-width:1100px){
  .hero.hero--v2{min-height:0}
  .hero--v2 .hv-gevel{display:none}
  .hero--v2 .hv-inner{grid-template-columns:minmax(0,1fr) 330px;padding:60px 20px 0}
  .hero--v2 .hv-inner>*{min-width:0}
  .hero--v2 .hv-pizza{top:0;bottom:auto;left:-25%;width:150%;-webkit-mask:linear-gradient(180deg,#000 70%,transparent);mask:linear-gradient(180deg,#000 70%,transparent)}
  .hero--v2::before{background:linear-gradient(180deg,rgba(12,7,4,.6),rgba(12,7,4,.35) 40%,rgba(12,7,4,.1))}
  .hero--v2 .hv-gevel-m{display:block;grid-column:1/-1;margin:16px -20px 0;aspect-ratio:1412/1114;background:url(/assets/hero/gevel-nl.webp) 50% 50%/cover no-repeat}
  .topnav{gap:20px}
}
@media (max-width:760px){
  .hero--v2 .hv-inner{grid-template-columns:minmax(0,1fr);padding:40px 16px 0;gap:28px}
  .hero--v2 .hv-gevel-m{margin:0 -16px}
  .hero--v2 .hv-kicker{font-size:.7rem;letter-spacing:.2em}
  .hero--v2 .hv-tricolor{width:190px;margin:14px 0 18px}
  .hero--v2 p.lede{font-size:1rem;margin-bottom:26px}
  .hero--v2 .btn{width:100%;justify-content:center}
  .hero--v2 .hv-tear{height:70px;background-size:1050px 70px}
  .hero--v2 + .step-section .step-head h2{font-size:1.4rem}
}
@media (max-width:760px) and (max-resolution:2dppx){
  .hero--v2 .hv-gevel-m{background-image:url(/assets/hero/gevel-nl-800.webp)}
  html[lang="fr"] .hero--v2 .hv-gevel-m{background-image:url(/assets/hero/gevel-fr-800.webp)}
  html[lang="en"] .hero--v2 .hv-gevel-m{background-image:url(/assets/hero/gevel-en-800.webp)}
  html[lang="de"] .hero--v2 .hv-gevel-m{background-image:url(/assets/hero/gevel-de-800.webp)}
}
.hero--v2 .hero-card-row>svg.hv-g{width:22px;height:22px}
.hero--v2 .google-rating a{white-space:nowrap}