/* Laconic preview, richting 4: blauwdruk vanmunster.nl (opbouw, ritme, typografie-gevoel,
   kleurgebruik) met Laconic-content en het originele Laconic-logo.
   Display: Italiana (vrij alternatief voor Cosmetic Regular). Tekst: Jost (vrij alternatief
   voor Sofia Pro). Navy #242640, goud #B09050, creme #F6F4EE, gebroken wit #FDFBF5.
   Pill-knoppen met gouden rand, kaarten 10px. Eigen code, geen assets van de referentie. */
:root {
  --navy: #242640;
  --goud: #b09050;
  --goud-licht: #d3b379;
  --creme: #f6f4ee;
  --gebroken: #fdfbf5;
  --wit: #ffffff;
  --grijs: #7c7c7c;
  --font-display: "Bodoni Moda", "Italiana", Georgia, serif;
  --font-tekst: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { font-family: var(--font-tekst); font-weight: 300; font-size: 19px; line-height: 1.45; color: var(--navy); background: var(--gebroken); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wrap { width: min(1320px, 90vw); margin: 0 auto; }
.center { text-align: center; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: 0.005em; font-variation-settings: "opsz" 96; }
h1 { font-size: clamp(3.2rem, 9.6vw, 8.6rem); line-height: 1.02; color: var(--wit); }
.h1-regel { display: block; }
.h1-inspring { text-indent: min(30vw, 420px); }
h2 { font-size: clamp(2rem, 4.2vw, 3.75rem); }
h3 { font-size: clamp(1.8rem, 3.4vw, 3.1rem); }
h5 { font-family: var(--font-display); font-weight: 500; font-size: 1.7rem; color: var(--goud); }
.subtitel { font-size: 0.95rem; font-weight: 300; letter-spacing: 0.32em; text-transform: uppercase; color: var(--goud); }
.subtitel-licht { color: rgba(255, 255, 255, 0.85); }
.intro-alinea { max-width: 620px; margin: 0 auto 60px; }

/* kruisicoon als sectiemarkering (tegenhanger van hun druppel) */
.icoon-kruis { display: block; width: 46px; height: 62px; margin: 22px auto 28px; position: relative; }
.icoon-kruis::before, .icoon-kruis::after { content: ""; position: absolute; background: var(--goud); }
.icoon-kruis::before { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); }
.icoon-kruis::after { top: 34%; left: 0; width: 100%; height: 1.5px; }
.icoon-kruis-licht::before, .icoon-kruis-licht::after { background: var(--wit); }
.split .icoon-kruis { margin-left: 0; }

/* knoppen: pill met gouden rand */
.knop { display: inline-flex; align-items: center; gap: 12px; padding: 17px 38px; border: 2px solid var(--goud); border-radius: 35px; font-family: var(--font-tekst); font-weight: 600; font-size: 1rem; color: var(--navy); background: transparent; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.knop svg { width: 15px; height: 15px; stroke-width: 2.2; }
.knop:hover { background: var(--goud); color: var(--wit); }
.knop-licht { color: var(--wit); }
.knop-licht:hover { background: var(--goud); border-color: var(--goud); color: var(--wit); }
.knoppen { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 30px; }
.knoppen-center { justify-content: center; margin-top: 0; }
.knop-vol { background: var(--goud); color: var(--wit); }
.knop-vol:hover { background: var(--goud-licht); border-color: var(--goud-licht); }
.knop-klein { padding: 11px 22px; font-size: 0.9rem; }
:focus-visible { outline: 2px solid var(--goud); outline-offset: 3px; }

/* header: transparant over de hero, navy bij scrollen */
.kop { position: fixed; top: 0; left: 0; right: 0; z-index: 50; color: var(--wit); transition: background-color 0.3s ease, box-shadow 0.3s ease; }
.kop.gescrold, .kop.menu-open { background: var(--navy); box-shadow: 0 6px 30px rgba(36, 38, 64, 0.25); }
.kop-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; height: 110px; }
.logo { flex: 0 0 auto; }
.logo img { display: block; height: auto; width: 192px; max-width: 100%; object-fit: contain; }
.voet img.voet-logo { width: 183px; height: auto; object-fit: contain; }
@keyframes laconic-menu-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes laconic-hero-in { from { opacity: .5; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .home .hero-inner { animation: laconic-hero-in .65s ease-out both; }
  .burger span { transition: transform .22s ease; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .prod .prod-beeld img { transition: transform .45s ease; }
  .prod:hover .prod-beeld img { transform: scale(1.035); }
  .prod-beeld { overflow: hidden; }
  .knop, .pil-vol { transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease; }
  .knop:hover, .pil-vol:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(36,38,64,.12); }
}
@media (max-width: 1100px) {
  body.nav-open { overflow: hidden; }
  .kop.menu-open { top: 0 !important; }
  .nav-open .usp-balk { visibility: hidden; }
  .kop .mobielmenu.open { display: flex; flex-direction: column; padding: 22px 6vw 30px; height: calc(100dvh - 84px); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; animation: laconic-menu-in .24s ease-out; }
  .menu-intro span { font-size: .65rem; letter-spacing: .18em; color: var(--goud-licht); }
  .menu-intro p { font-size: 1.55rem; color: white; margin: 8px 0 20px; }
  .kop .mobielmenu a { padding: 13px 0; font-size: 1.1rem; flex-shrink: 0; }
  .kop .mobielmenu > a:not(.menu-shop)::after { content: '↗'; float: right; color: var(--goud-licht); font-size: .9rem; }
  .kop .mobielmenu .menu-shop { padding: 15px 18px; background: var(--goud); color: white; border-radius: 5px; display: flex; justify-content: space-between; margin: 0 0 14px; font-weight: 500; }
  .menu-service { margin-top: 22px; padding-top: 16px; color: rgba(255,255,255,.75); font-size: .8rem; }
  .kop .menu-service a { display: block; border: 0; font-size: .9rem; }
  .burger[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
  .burger[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
}
@media (max-width: 600px) {
  .kop .kop-inner { gap: 12px; }
  .kop .logo img { width: 148px; height: auto; }
  .kop .kop-acties { gap: 8px; flex: 0 0 auto; }
  .kop-acties > .pil-vol { display: none; }
  .kop .burger, .kop .pil-icoon { width: 44px; min-width: 44px; }
}
@media (prefers-reduced-motion: reduce) { .kop .mobielmenu.open { animation: none; } }
.hoofdnav { display: flex; gap: 22px; font-size: 1rem; font-weight: 300; }
.hoofdnav a { padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color 0.2s ease, color 0.2s ease; }
.hoofdnav a:hover { border-color: var(--goud-licht); }
.kop-acties { display: flex; align-items: center; gap: 12px; }
.pil { display: inline-flex; align-items: center; justify-content: center; height: 50px; border-radius: 35px; border: 2px solid var(--goud); font-weight: 600; font-size: 0.95rem; transition: background-color 0.25s ease, color 0.25s ease; }
.pil-vol { padding: 0 26px; background: var(--goud); color: var(--wit); }
.pil-vol:hover { background: var(--goud-licht); border-color: var(--goud-licht); }
.pil-icoon { width: 50px; color: var(--wit); }
.pil-icoon:hover { background: var(--goud); }
.burger { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; flex-direction: column; justify-content: center; gap: 7px; align-items: center; }
.burger span { display: block; width: 26px; height: 2px; background: var(--goud); }
.mobielmenu { display: none; }

/* hero */
.hero { position: relative; min-height: 100vh; background: var(--navy); overflow: hidden; display: flex; align-items: flex-end; }
.hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 65%; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--navy) 0%, rgba(36, 38, 64, 0) 26%); z-index: 1; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(180deg, rgba(253, 251, 245, 0) 0%, rgba(253, 251, 245, 0.55) 55%, var(--gebroken) 100%); z-index: 1; }
.hero-inner { position: relative; z-index: 2; padding: 0 0 18vh; }
.hero-merk { font-size: clamp(1.4rem, 2.8vw, 2.5rem); font-weight: 300; color: var(--wit); margin-bottom: -0.9em; padding-left: 4px; }
.intro-tekst p { margin-top: 18px; max-width: 46ch; }

/* intro: kruisvormig beeld + statement (hun druppel) */
.intro { padding: 30px 0 110px; }
.intro-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; }
.vorm { position: relative; aspect-ratio: 1 / 1; max-width: 460px; width: 100%; }
.vorm img { width: 100%; height: 100%; object-fit: cover; }
.vorm-kruis img { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M39 0h22v37h39v22H61v41H39V59H0V37h39z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M39 0h22v37h39v22H61v41H39V59H0V37h39z'/%3E%3C/svg%3E") center / contain no-repeat; }
.vorm-kruis::after { content: ""; position: absolute; inset: 6%; border: 1.5px solid var(--goud); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M39 0h22v37h39v22H61v41H39V59H0V37h39z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M39 0h22v37h39v22H61v41H39V59H0V37h39z'/%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; opacity: 0.9; }
.vorm-klein { max-width: 380px; }
.intro-tekst h2 { max-width: 14ch; }

/* blokken */
.blok { padding: 130px 0; }
.blok-creme { background: var(--creme); }
.blok-wit { background: var(--gebroken); }
.blok-navy { background: var(--navy); color: var(--wit); }
.blok .center h2 { margin-bottom: 50px; }

/* kaarten met beeld en tekst eroverheen */
.kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: center; }
.kaart { position: relative; display: block; border-radius: 10px; overflow: hidden; min-height: 560px; background: var(--navy); color: var(--wit); }
.kaart img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: transform 0.6s ease, opacity 0.4s ease; }
.kaart:hover img { transform: scale(1.04); opacity: 0.7; }
.kaart::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36, 38, 64, 0.1) 0%, rgba(36, 38, 64, 0.72) 100%); }
.kaart-body { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 30px 24px 44px; }
.kaart-body h3 { color: var(--wit); }
.kaart-body p { margin: 14px 0 26px; font-size: 0.98rem; color: rgba(255, 255, 255, 0.9); max-width: 30ch; }
.kaart-body .knop { padding: 13px 28px; font-size: 0.9rem; }

/* symbolen (hun merkenstrook) */
.symbolen { display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; margin: 0 auto 56px; }
.symbool { display: grid; justify-items: center; gap: 8px; width: 190px; color: var(--navy); transition: color 0.2s ease; }
.symbool:hover { color: var(--goud); }
.symbool svg { width: 64px; height: 64px; stroke-width: 1.3; color: var(--navy); opacity: 0.85; }
.symbool b { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; margin-top: 8px; }
.symbool span { font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--goud); }

/* full-bleed beeld met navy overlay */
.fullbleed { position: relative; min-height: 880px; display: flex; align-items: center; color: var(--wit); overflow: hidden; }
.fullbleed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.fullbleed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36, 38, 64, 0.55), rgba(36, 38, 64, 0.7)); }
.fullbleed-inner { position: relative; z-index: 1; }
.fullbleed h2 { color: var(--wit); margin-bottom: 44px; }

/* split navy */
.split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 80px; align-items: center; }
.split h2 { color: var(--wit); margin-bottom: 26px; }
.split-alinea { color: rgba(255, 255, 255, 0.85); margin-bottom: 36px; max-width: 52ch; }
.split-beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }

/* uitleg symbolen */
.uitleg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.uitleg-grid h3 { font-size: 2rem; margin-bottom: 12px; }
.uitleg-grid p { font-size: 1rem; color: var(--navy); opacity: 0.85; }

/* cta */
.cta { padding: 110px 0 140px; }
.cta-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 60px; align-items: center; }
.cta-tekst h2 { margin-bottom: 36px; max-width: 18ch; }

/* footer navy */
.voet { background: var(--navy); color: var(--wit); padding: 110px 0 40px; }
.voet-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.3fr; gap: 50px; }
.voet-logo { height: 40px; width: auto; margin-bottom: 30px; }
.voet h5 { margin-bottom: 14px; }
.voet h5 + h5 { margin-top: 30px; }
.social { display: flex; gap: 12px; }
.social a { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; color: var(--wit); transition: background-color 0.2s ease, border-color 0.2s ease; }
.social a:hover { background: var(--goud); border-color: var(--goud); }
.voet li { padding: 5px 0; font-size: 1rem; }
.voet li a:hover { color: var(--goud-licht); }
.voet-adres { font-size: 1rem; line-height: 1.5; margin-bottom: 22px; }
.voet-adres b { font-weight: 600; }
.voet-adres a { color: var(--goud-licht); }
.voet-onder { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 80px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); }
.voet-onder span { margin-left: auto; }

/* kruimelpad */
.kruimels { background: var(--gebroken); font-size: 0.85rem; padding: 14px 0; border-bottom: 1px solid rgba(36, 38, 64, 0.08); }
.kruimels ol { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.kruimels li + li::before { content: "/"; color: var(--goud); margin-right: 10px; }
.kruimels a:hover { color: var(--goud); }
body.licht-kop main { padding-top: 0; }

/* subhero (subpagina's) */
.subhero { position: relative; min-height: 560px; background: var(--navy); color: var(--wit); display: flex; align-items: flex-end; overflow: hidden; padding-top: 110px; }
.subhero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; opacity: 0.55; }
.subhero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--navy) 0%, rgba(36, 38, 64, 0.2) 45%, rgba(36, 38, 64, 0.75) 100%); }
.subhero-inner { position: relative; z-index: 1; padding: 60px 0 70px; max-width: 900px; }
.subhero h1 { font-size: clamp(2.6rem, 6vw, 5.4rem); margin: 14px 0 18px; }
.subhero-tekst { font-size: 1.15rem; color: rgba(255, 255, 255, 0.88); max-width: 60ch; }

/* productkaarten (categorie + home) */
.prod-grid { display: grid; gap: 30px; }
.prod-grid-3 { grid-template-columns: repeat(3, 1fr); }
.prod { background: var(--wit); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(36, 38, 64, 0.06); }
.prod-beeld { display: block; background: #2b2a35; }
.prod-beeld img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 0.6s ease; }
.prod:hover .prod-beeld img { transform: scale(1.03); }
.prod-leeg { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: var(--creme); color: var(--goud); font-size: 0.85rem; letter-spacing: 0.3em; text-transform: uppercase; }
.prod-body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 8px; flex: 1; text-align: left; }
.prod-body h3, .prod-body h2 { font-size: 1.7rem; }
.prod-body p { font-size: 0.98rem; opacity: 0.85; flex: 1; }
.prod-voet { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; padding-top: 16px; border-top: 1px solid rgba(36, 38, 64, 0.1); }
.prijs { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; }
.prod-binnenkort { opacity: 0.9; }

/* tekstblokken */
.tekstblok { max-width: 820px; margin: 0 auto; }
.tekstblok h2 { font-size: clamp(1.9rem, 3.2vw, 2.8rem); margin: 0 0 18px; }
.tekstblok h2 + p, .tekstblok h3 + p { margin-top: 0; }
.tekstblok h3 { font-size: 1.6rem; margin: 40px 0 12px; }
.tekstblok p { margin-bottom: 20px; }
.tekstblok p + h2 { margin-top: 48px; }
.tekstblok a { color: var(--goud); text-decoration: underline; text-decoration-color: rgba(176, 144, 80, 0.5); text-underline-offset: 3px; }
.tekstblok a:hover { text-decoration-color: var(--goud); }

/* faq */
.faq { max-width: 820px; margin: 0 auto; }
.faq details { border-top: 1px solid rgba(36, 38, 64, 0.14); }
.faq details:last-of-type { border-bottom: 1px solid rgba(36, 38, 64, 0.14); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; font-family: var(--font-display); font-weight: 500; font-size: 1.45rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: var(--goud); font-family: var(--font-tekst); font-weight: 300; font-size: 1.6rem; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 0 24px; max-width: 62ch; }
.blok .center h2 { margin-bottom: 50px; }

/* productpagina */
.product-top { padding: 150px 0 90px; background: var(--gebroken); }
.product-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: start; }
.product-galerij { display: grid; gap: 16px; }
.product-galerij img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; }
.product-info { position: sticky; top: 130px; }
.product-info h1 { color: var(--navy); font-size: clamp(2.2rem, 3.6vw, 3.4rem); margin: 10px 0 18px; }
.product-prijs { font-family: var(--font-display); font-weight: 500; font-size: 2.2rem; }
.product-prijs small { display: block; font-family: var(--font-tekst); font-weight: 300; font-size: 0.9rem; color: var(--grijs); margin-top: 4px; }
.product-kort { margin: 22px 0 28px; max-width: 50ch; }
.koop { display: grid; gap: 14px; padding: 26px; border: 1px solid rgba(36, 38, 64, 0.12); border-radius: 10px; background: var(--wit); }
.koop label { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 0.95rem; }
.koop label.check { justify-content: flex-start; }
.koop input[type=number], .koop select { width: 110px; padding: 10px 12px; border: 1px solid rgba(36, 38, 64, 0.2); border-radius: 6px; font: inherit; font-size: 1rem; background: var(--wit); }
.koop .knop { justify-content: center; }
.zeker { margin-top: 28px; display: grid; gap: 8px; font-size: 0.95rem; }
.zeker li::before { content: "\2726"; color: var(--goud); margin-right: 10px; font-size: 0.8rem; }
.product-details { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: start; }
.product-details h2 { font-size: 2.2rem; margin-bottom: 18px; }
.product-details p { margin-bottom: 16px; }
.product-details a { color: var(--goud); text-decoration: underline; text-underline-offset: 3px; }
.specs { width: 100%; border-collapse: collapse; background: var(--wit); border-radius: 10px; overflow: hidden; font-size: 0.98rem; }
.specs th, .specs td { text-align: left; padding: 14px 18px; border-bottom: 1px solid rgba(36, 38, 64, 0.08); vertical-align: top; }
.specs th { font-weight: 500; width: 38%; color: var(--goud); }

/* contactformulier */
.contactformulier { margin-top: 40px; padding: 30px; background: var(--wit); border-radius: 10px; }
.contactformulier h3 { margin: 0 0 18px; }
.contactformulier form { display: grid; gap: 14px; }
.contactformulier label { display: grid; gap: 6px; font-size: 0.95rem; }
.contactformulier input, .contactformulier textarea { padding: 12px 14px; border: 1px solid rgba(36, 38, 64, 0.2); border-radius: 6px; font: inherit; font-size: 1rem; }
.contactformulier .knop { justify-self: start; }
.klein { font-size: 0.85rem; color: var(--grijs); }

/* responsive */
@media (max-width: 1100px) {
  .hoofdnav { display: none; }
  .burger { display: flex; }
  .kop-inner { height: 84px; }
  .mobielmenu.open { display: grid; background: var(--navy); border-top: 1px solid rgba(255, 255, 255, 0.15); }
  .mobielmenu a { padding: 16px 5vw; border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: var(--wit); font-size: 1.1rem; font-weight: 300; }
  .h1-inspring { text-indent: min(22vw, 200px); }
  .kaarten { grid-template-columns: 1fr; }
  .prod-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .product-grid, .product-details { grid-template-columns: 1fr; gap: 40px; }
  .product-info { position: static; }
  .kaart { min-height: 420px; }
  .uitleg-grid { grid-template-columns: 1fr 1fr; }
  .voet-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .hero { min-height: 88vh; }
  .hero-inner { padding-bottom: 14vh; }
  .h1-inspring { text-indent: 24vw; }
  .hero-merk { font-size: 1.25rem; margin-bottom: -0.6em; }
  .intro { padding: 10px 0 80px; }
  .intro-grid, .cta-grid, .split { grid-template-columns: 1fr; gap: 40px; }
  .vorm { max-width: 320px; margin: 0 auto; }
  .intro-tekst h2 { max-width: none; }
  .blok { padding: 90px 0; }
  .symbolen { gap: 30px; }
  .symbool { width: 140px; }
  .fullbleed { min-height: 640px; }
  .uitleg-grid { grid-template-columns: 1fr; gap: 30px; }
  .voet-grid { grid-template-columns: 1fr; gap: 36px; }
  .prod-grid-3 { grid-template-columns: 1fr; }
  .subhero { min-height: 460px; }
  .product-top { padding-top: 110px; }
  .voet-onder span { margin-left: 0; }
  .knop { padding: 15px 28px; font-size: 0.95rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   WooCommerce
   De winkel, de productpagina, de winkelwagen, het afrekenen en het account
   in dezelfde vormgeving als de rest van de site. Producten krijgen via het
   thema de klasse .prod, dus de kaartopmaak hierboven geldt ook in de winkel.
   ══════════════════════════════════════════════════════════════════════════ */

.winkel-kop { min-height: 360px; }
.woocommerce-cart .winkel-kop,
.woocommerce-checkout .winkel-kop { min-height: 290px; }
.woocommerce-cart .winkel-kop .subhero-inner,
.woocommerce-checkout .winkel-kop .subhero-inner { padding-bottom: 44px; }
.winkel-inhoud { padding: 70px 0 110px; }
.winkel-inhoud > .wrap > .woocommerce-notices-wrapper:empty { display: none; }

/* ── overzicht ───────────────────────────────────────────────────────────── */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin: 0 0 50px; padding: 0; list-style: none; }
.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
.woocommerce ul.products li.product { width: auto; margin: 0; float: none; text-align: left; }
.woocommerce ul.products li.product::before, .woocommerce ul.products li.product::after { content: none; }
.prod-badge { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 7px 14px; border-radius: 30px; background: var(--goud); color: var(--wit); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; }
.prod-badge-uit { background: var(--navy); }
.prod-beeld { position: relative; }
.prod .prijs del { opacity: 0.5; margin-right: 8px; font-size: 0.85em; }
.prod .prijs ins { text-decoration: none; }
.prod-voet { flex-wrap: wrap; gap: 12px; }
.prod-voet .added_to_cart { font-size: 0.85rem; color: var(--goud); text-decoration: underline; text-underline-offset: 3px; }

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { display: inline-block; margin: 0 0 34px; font-size: 0.95rem; color: var(--grijs); }
.woocommerce .woocommerce-ordering { float: right; }
.woocommerce .woocommerce-ordering select,
.woocommerce-page select, .woocommerce select { font-family: var(--font-tekst); font-weight: 300; font-size: 0.95rem; color: var(--navy); background: var(--wit); border: 1px solid rgba(36, 38, 64, 0.16); border-radius: 30px; padding: 10px 18px; }

.woocommerce nav.woocommerce-pagination ul { display: flex; justify-content: center; gap: 8px; border: 0; margin: 20px 0 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 14px; border: 1px solid rgba(36, 38, 64, 0.14); border-radius: 30px; background: var(--wit); color: var(--navy); font-size: 0.95rem; }
.woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--goud); border-color: var(--goud); color: var(--wit); }

/* ── productpagina ───────────────────────────────────────────────────────── */
.woocommerce div.product { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 60px; align-items: start; }
.woocommerce div.product div.images { margin: 0; width: auto; float: none; }
.woocommerce div.product div.images img { border-radius: 10px; }
.woocommerce div.product div.images .flex-control-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
.woocommerce div.product div.images .flex-control-thumbs li { width: auto; float: none; margin: 0; }
.woocommerce div.product div.summary { margin: 0; width: auto; float: none; }
.woocommerce div.product .product_title { font-size: clamp(2.1rem, 3.6vw, 3.2rem); margin: 0 0 12px; }
.woocommerce div.product p.price, .woocommerce div.product span.price { font-family: var(--font-display); font-size: 2rem; color: var(--goud); margin: 0 0 22px; }
.woocommerce div.product p.price del { opacity: 0.45; font-size: 0.6em; }
.woocommerce div.product p.price ins { text-decoration: none; }
.woocommerce div.product .woocommerce-product-details__short-description { font-size: 1.05rem; margin-bottom: 26px; }
.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 26px; }
.woocommerce div.product form.cart .variations { width: 100%; border-collapse: collapse; }
.woocommerce div.product form.cart .variations th, .woocommerce div.product form.cart .variations td { padding: 8px 0; text-align: left; vertical-align: middle; }
.woocommerce div.product form.cart .variations label { font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grijs); }
.woocommerce .quantity .qty { width: 84px; height: 56px; padding: 0 12px; border: 1px solid rgba(36, 38, 64, 0.18); border-radius: 30px; background: var(--wit); font-family: var(--font-tekst); font-size: 1rem; color: var(--navy); text-align: center; }
.woocommerce div.product form.cart .button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce #respond input#submit {
  display: inline-flex; align-items: center; gap: 12px; padding: 17px 38px; border: 2px solid var(--goud); border-radius: 35px;
  font-family: var(--font-tekst); font-weight: 600; font-size: 1rem; line-height: 1; color: var(--navy); background: transparent;
  text-transform: none; letter-spacing: 0; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover { background: var(--goud); border-color: var(--goud); color: var(--wit); }
.woocommerce div.product form.cart .button, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { background: var(--goud); color: var(--wit); }
.woocommerce div.product form.cart .button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--goud-licht); border-color: var(--goud-licht); }
.woocommerce .button.knop-klein, .woocommerce a.button.knop-klein { padding: 11px 22px; font-size: 0.9rem; }
.woocommerce a.button.loading::after, .woocommerce button.button.loading::after { margin-left: 6px; }

.product-zeker { margin: 0 0 26px; padding: 22px 26px; border-radius: 10px; background: var(--creme); display: grid; gap: 10px; }
.product-zeker li { position: relative; padding-left: 26px; font-size: 0.97rem; }
.product-zeker li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 12px; height: 2px; background: var(--goud); }

.woocommerce div.product .product_meta { font-size: 0.9rem; color: var(--grijs); border-top: 1px solid rgba(36, 38, 64, 0.12); padding-top: 18px; }
.woocommerce div.product .product_meta > span { display: block; margin-bottom: 6px; }
.woocommerce div.product .product_meta a { color: var(--goud); }

.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; margin-top: 30px; }
.woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; padding: 0; border-bottom: 1px solid rgba(36, 38, 64, 0.12); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; border: 0; background: none; border-radius: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { display: block; padding: 14px 24px; font-family: var(--font-tekst); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grijs); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--navy); box-shadow: inset 0 -2px 0 var(--goud); }
.woocommerce div.product .woocommerce-tabs .panel { max-width: 820px; }
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 1.8rem; margin-bottom: 14px; }
.woocommerce table.shop_attributes th { width: 220px; text-align: left; font-weight: 500; }
.woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td { padding: 12px 0; border-bottom: 1px solid rgba(36, 38, 64, 0.1); font-style: normal; }

.woocommerce .related.products, .woocommerce .upsells.products { grid-column: 1 / -1; margin-top: 70px; }
.woocommerce .related.products > h2, .woocommerce .upsells.products > h2 { font-size: clamp(1.9rem, 3.2vw, 2.8rem); margin-bottom: 34px; }

/* ── winkelwagen en afrekenen ────────────────────────────────────────────── */
.woocommerce table.shop_table { border: 0; border-radius: 10px; background: var(--wit); border-collapse: collapse; overflow: hidden; box-shadow: 0 10px 40px rgba(36, 38, 64, 0.06); }
.woocommerce table.shop_table th { font-family: var(--font-tekst); font-weight: 500; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grijs); padding: 18px 20px; border-bottom: 1px solid rgba(36, 38, 64, 0.1); }
.woocommerce table.shop_table td { padding: 20px; border-top: 1px solid rgba(36, 38, 64, 0.08); }
.woocommerce table.shop_table img { width: 80px; border-radius: 8px; }
.woocommerce-cart .cart-collaterals .cart_totals { width: 100%; max-width: 460px; float: right; }
.woocommerce-cart .cart-collaterals .cart_totals h2 { font-size: 1.8rem; margin-bottom: 16px; }
.woocommerce .cart-collaterals .cross-sells { width: 100%; }
.woocommerce #coupon_code { height: 52px; padding: 0 20px; border: 1px solid rgba(36, 38, 64, 0.18); border-radius: 30px; }

.woocommerce form .form-row { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; }
.woocommerce form .form-row label { font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grijs); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text, .select2-container--default .select2-selection--single {
  width: 100%; min-height: 54px; padding: 14px 20px; border: 1px solid rgba(36, 38, 64, 0.18); border-radius: 10px; background: var(--wit);
  font-family: var(--font-tekst); font-weight: 300; font-size: 1rem; color: var(--navy);
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { outline: 2px solid var(--goud); outline-offset: 1px; }
.select2-container--default .select2-selection--single { display: flex; align-items: center; }
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 14px; right: 12px; }
.woocommerce-checkout #customer_details { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 840px; margin: 0 auto; }
.woocommerce-checkout h3, .woocommerce-checkout #order_review_heading { font-size: 1.7rem; margin: 0 0 18px; }
.woocommerce-checkout #order_review_heading { max-width: 840px; margin: 34px auto 18px; padding-top: 34px; border-top: 1px solid rgba(36, 38, 64, 0.12); }
.woocommerce-checkout #order_review { max-width: 840px; margin: 0 auto; padding: 30px; border-radius: 12px; background: var(--creme); box-shadow: 0 14px 46px rgba(36, 38, 64, 0.07); }
.woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods { border: 0; padding: 0 0 18px; }
.woocommerce-checkout #payment div.form-row { padding: 0; }
.woocommerce-checkout #payment #place_order { width: 100%; justify-content: center; }

.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments {
  border-top: 0; border-left: 3px solid var(--goud); border-radius: 10px; background: var(--creme); color: var(--navy);
  padding: 18px 24px; margin: 0 0 26px; font-size: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
}
.woocommerce-error { border-left-color: #a4443a; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { content: none; }
.woocommerce-message .button, .woocommerce-info .button { margin-left: auto; }

/* ── account ─────────────────────────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-navigation { width: 26%; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { display: grid; gap: 4px; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 12px 18px; border-radius: 30px; font-size: 0.98rem; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a, .woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--creme); color: var(--navy); }
.woocommerce-account .woocommerce-MyAccount-content { width: 70%; }

/* ── kop: winkelwagenteller ──────────────────────────────────────────────── */
.pil-icoon { position: relative; }
.wagen-teller { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 12px; background: var(--goud); color: var(--wit); font-size: 0.75rem; line-height: 22px; text-align: center; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; padding: 12px 20px; background: var(--wit); color: var(--navy); border-radius: 30px; }
.zoekform { display: flex; gap: 10px; flex-wrap: wrap; }
.zoekform input[type="search"] { min-height: 54px; padding: 0 20px; border: 1px solid rgba(36, 38, 64, 0.18); border-radius: 30px; font-family: var(--font-tekst); font-size: 1rem; }
.paginering { margin-top: 40px; text-align: center; }

@media (max-width: 1100px) {
  .woocommerce ul.products, .woocommerce ul.products.columns-3 { grid-template-columns: repeat(2, 1fr); }
  .woocommerce div.product { grid-template-columns: 1fr; gap: 36px; }
  .woocommerce-checkout #customer_details { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 700px) {
  .woocommerce ul.products, .woocommerce ul.products.columns-3, .woocommerce ul.products.columns-2 { grid-template-columns: 1fr; }
  .winkel-inhoud { padding: 46px 0 70px; }
  .woocommerce .woocommerce-ordering { float: none; display: block; }
  .woocommerce-cart .cart-collaterals .cart_totals { float: none; max-width: none; }
  .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { width: 100%; }
  .woocommerce table.shop_table img { width: 56px; }
}

/* Koppen buiten de donkere hero's staan op navy; h1 is standaard wit voor de hero. */
.winkel-inhoud h1, .winkel-inhoud h2, .winkel-inhoud h3,
.woocommerce div.product .product_title,
.tekstblok h1, .prod-body h1 { color: var(--navy); }

/* Begrens alleen de galerij. De bewegende FlexSlider-wrapper moet zichtbaar
   blijven, anders wordt iedere afbeelding na de eerste afgeknipt. */
.woocommerce div.product div.images { max-width: 100%; overflow: hidden; }
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper { max-width: none; overflow: visible; }
.woocommerce div.product div.images .flex-control-thumbs { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 8px; scroll-snap-type: x proximity; }
.woocommerce div.product div.images .flex-control-thumbs li { flex: 0 0 86px; scroll-snap-align: start; }
.woocommerce div.product div.images .woocommerce-product-gallery__trigger { z-index: 3; }
img.emoji { display: inline; width: 1em; height: 1em; }

/* Pagina's zonder donkere hero (productpagina): ruimte voor de vaste kop. */
body.geen-hero main { padding-top: 104px; }
body.geen-hero .kruimels { border-top: 1px solid rgba(36, 38, 64, 0.08); }

/* Op aanraakschermen is de zoomlaag van WooCommerce niet bruikbaar en liep hij buiten beeld. */
@media (max-width: 900px) {
  .woocommerce div.product div.images img.zoomImg { display: none !important; }
}

/* Afrekenen: voornaam en achternaam naast elkaar, veldbreedte volgt de kolom. */
.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; float: none; }
.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.woocommerce-billing-fields__field-wrapper > .form-row-wide, .woocommerce-shipping-fields__field-wrapper > .form-row-wide,
.woocommerce-billing-fields__field-wrapper > #billing_address_1_field, .woocommerce-billing-fields__field-wrapper > #billing_address_2_field { grid-column: 1 / -1; }
@media (max-width: 700px) { .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; } }

/* ── USP-balk: lopende voordelen boven de kop (alleen startpagina) ────────── */
.usp-balk { position: fixed; top: 0; left: 0; right: 0; z-index: 55; height: 44px; display: flex; align-items: center;
  background: var(--navy); border-bottom: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden;
  transition: transform 0.35s ease; }
.usp-spoor { display: flex; width: max-content; animation: usp-loop 42s linear infinite; }
.usp-reeks { display: flex; align-items: center; flex: 0 0 auto; }
.usp { display: inline-flex; align-items: center; gap: 12px; padding: 0 34px; white-space: nowrap;
  font-family: var(--font-tekst); font-weight: 300; font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9); }
.usp i { display: block; width: 9px; height: 13px; position: relative; flex: 0 0 auto; }
.usp i::before, .usp i::after { content: ""; position: absolute; background: var(--goud); }
.usp i::before { left: 3.5px; top: 0; width: 2px; height: 13px; }
.usp i::after { left: 0; top: 4px; width: 9px; height: 2px; }
.usp-balk:hover .usp-spoor { animation-play-state: paused; }
@keyframes usp-loop { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .usp-spoor { animation: none; }
  .usp-balk { justify-content: center; }
  .usp-reeks + .usp-reeks { display: none; }
}

/* De kop schuift onder de balk; bij scrollen verdwijnt de balk en plakt de kop bovenaan. */
body.heeft-uspbalk .kop { top: 44px; }
body.heeft-uspbalk.is-gescrold .kop { top: 0; }
body.heeft-uspbalk.is-gescrold .usp-balk { transform: translateY(-100%); }

@media (max-width: 700px) {
  .usp-balk { height: 38px; }
  .usp { padding: 0 22px; font-size: 0.74rem; letter-spacing: 0.16em; }
  body.heeft-uspbalk .kop { top: 38px; }
  .usp-spoor { animation-duration: 30s; }
}

/* Uitleg en vragen onder een categorieoverzicht. */
.cat-uitleg .cat-tekst { max-width: 760px; margin: 0 auto 48px; }
.cat-uitleg .cat-tekst h2 { margin: 0 0 14px; }
.cat-uitleg .cat-tekst h3 { margin: 30px 0 10px; }
.cat-uitleg .cat-tekst p { margin: 0 0 14px; }
.cat-uitleg .center h2 { margin-bottom: 22px; }
.cat-uitleg .cat-tekst a { color: var(--goud); text-decoration: underline; text-decoration-color: rgba(176, 144, 80, 0.5); text-underline-offset: 3px; }

/* Betaalmethoden bij het afrekenen: Mollie levert een eigen opmaak mee die
   niet bij de winkel past. Hier trekken we die naar de huisstijl. */
.woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods { padding: 0; margin: 0; border-bottom: 1px solid rgba(36, 38, 64, 0.12); }
.woocommerce-checkout #payment ul.payment_methods li { display: block; padding: 0; border-top: 1px solid rgba(36, 38, 64, 0.12); list-style: none; }
.woocommerce-checkout #payment ul.payment_methods li:first-child { border-top: 0; }
.woocommerce-checkout #payment ul.payment_methods li > input[type="radio"] { float: left; margin: 20px 12px 0 0; }
.woocommerce-checkout #payment ul.payment_methods li > label { display: flex; align-items: center; gap: 12px; margin: 0; padding: 16px 0; font-size: 1rem; cursor: pointer; }
.woocommerce-checkout #payment ul.payment_methods li > label img { max-height: 24px; width: auto; margin: 0 0 0 auto; }
.woocommerce-checkout #payment div.payment_box { position: relative; background: #fff; color: inherit; margin: 0 0 16px; padding: 16px; border: 1px solid rgba(36, 38, 64, 0.12); border-radius: 0; font-size: 0.95rem; }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment div.payment_box p { margin: 0 0 10px; }
.woocommerce-checkout #payment div.payment_box select,
.woocommerce-checkout #payment div.payment_box input { width: 100%; max-width: 340px; padding: 10px 12px; border: 1px solid rgba(36, 38, 64, 0.25); border-radius: 6px; font: inherit; background: #fff; }
.woocommerce-checkout #payment .place-order { padding: 24px 0 0; }
.woocommerce-privacy-policy-text { font-size: 0.9rem; color: rgba(36, 38, 64, 0.75); }
.betaal-zeker { margin: 18px 0 0; padding: 14px 16px; border-radius: 8px; background: #fff; color: rgba(36, 38, 64, 0.78); font-size: 0.9rem; line-height: 1.5; }

/* Feitelijke vertrouwenssignalen tussen de transactiekop en het formulier. */
.transactie-zeker { background: var(--creme); border-bottom: 1px solid rgba(36, 38, 64, 0.08); }
.transactie-zeker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.transactie-zeker-grid > div { display: flex; align-items: center; gap: 12px; min-height: 88px; padding: 18px 26px; border-left: 1px solid rgba(36, 38, 64, 0.1); }
.transactie-zeker-grid > div:first-child { border-left: 0; }
.transactie-zeker i { position: relative; width: 22px; height: 26px; flex: 0 0 22px; }
.transactie-zeker i::before, .transactie-zeker i::after { content: ""; position: absolute; background: var(--goud); }
.transactie-zeker i::before { width: 3px; height: 26px; left: 9px; top: 0; }
.transactie-zeker i::after { width: 22px; height: 3px; left: 0; top: 8px; }
.transactie-zeker span { display: grid; line-height: 1.25; }
.transactie-zeker strong { font-size: 0.98rem; font-weight: 500; }
.transactie-zeker small { color: var(--grijs); font-size: 0.82rem; }

/* Betaal- en verzendbadges. Alleen de methoden die de winkel echt aanbiedt. */
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.badges-lijst { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.badges-lijst li { display: flex; }
.badges-lijst img { display: block; height: 30px; width: auto; background: #fff; border-radius: 4px; padding: 3px 6px; }

.badges-voet { padding: 28px 0 4px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.badges-voet .badges-kop,
.badges-voet .badges-verzending { font-size: 0.85rem; color: rgba(255, 255, 255, 0.75); letter-spacing: 0.02em; }
.badges-voet .badges-verzending { margin-left: auto; }

.badges-product { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(36, 38, 64, 0.12); }
.badges-product .badges-lijst img { border: 1px solid rgba(36, 38, 64, 0.1); }
.badges-product .badges-verzending { font-size: 0.85rem; color: rgba(36, 38, 64, 0.7); }

@media (max-width: 700px) {
  .badges-voet .badges-verzending { margin-left: 0; }
}

/* ============================================================
   WooCommerce op kleine schermen.
   WooCommerce levert een eigen mobiel stijlblad mee dat halve
   breedtes en floats oplegt. In een rooster geeft dat halve
   kaarten en lege halve rijen. Hier zetten we dat recht.
   ============================================================ */

/* De twee kolommen van het afrekenen liggen in een rooster; WooCommerce zet er
   daarnaast nog een breedte en een float op, waardoor ze tot een derde krompen. */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
  width: auto !important;
  float: none !important;
  padding: 0;
  grid-row: auto;
}
.woocommerce-checkout .col2-set .col-1 { grid-column: 1 !important; }
.woocommerce-checkout .col2-set .col-2 { grid-column: 1 !important; margin-top: 12px; }

@media (max-width: 900px) {
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2 { grid-column: 1 !important; grid-row: auto; }
}

/* Productoverzicht: kaarten vullen hun kolom, altijd. */
.woocommerce ul.products li.product,
ul.products li.product {
  width: auto !important;
  max-width: none;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
}

/* Afrekenen: de velden liggen in een rooster van zes kolommen, zodat
   straat, nummer en toevoeging op één regel passen. */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0 14px;
}
.woocommerce form .form-row {
  width: auto !important;
  float: none !important;
  clear: none !important;
  margin: 0 0 16px;
  grid-column: span 6;
  min-width: 0;
}
.woocommerce form .form-row-first { grid-column: span 3; }
.woocommerce form .form-row-last { grid-column: span 3; }
#billing_street_name_field, #shipping_street_name_field { grid-column: span 4; }
#billing_house_number_field, #shipping_house_number_field,
#billing_house_number_suffix_field, #shipping_house_number_suffix_field { grid-column: span 1; }
#billing_postcode_field, #shipping_postcode_field { grid-column: span 2; }
#billing_city_field, #shipping_city_field { grid-column: span 4; }

.woocommerce form .form-row label { display: block; margin-bottom: 6px; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form .form-row .select2-container { width: 100%; }

@media (max-width: 700px) {
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-additional-fields__field-wrapper { gap: 0 10px; }
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last { grid-column: span 6; }
  #billing_postcode_field, #shipping_postcode_field { grid-column: span 3; }
  #billing_city_field, #shipping_city_field { grid-column: span 3; }
  #billing_street_name_field, #shipping_street_name_field { grid-column: span 3; }
  #billing_house_number_field, #shipping_house_number_field { grid-column: span 2; }

  .woocommerce-cart .winkel-kop,
  .woocommerce-checkout .winkel-kop { min-height: 220px; padding-top: 84px; }
  .woocommerce-cart .winkel-kop .subhero-inner,
  .woocommerce-checkout .winkel-kop .subhero-inner { padding: 28px 0 34px; }
  .woocommerce-cart .winkel-kop h1,
  .woocommerce-checkout .winkel-kop h1 { font-size: 2.75rem; }
  .transactie-zeker-grid { grid-template-columns: repeat(2, 1fr); }
  .transactie-zeker-grid > div { min-height: 76px; padding: 14px 12px; border-bottom: 1px solid rgba(36, 38, 64, 0.1); }
  .transactie-zeker-grid > div:nth-child(odd) { border-left: 0; }
  .transactie-zeker strong { font-size: 0.88rem; }
  .transactie-zeker small { font-size: 0.76rem; }
  .woocommerce-checkout #order_review { padding: 20px 16px; }

  /* Besteloverzicht en totalen: geen tabelkolommen die tegen elkaar drukken. */
  .woocommerce table.shop_table_responsive tr,
  .woocommerce-page table.shop_table_responsive tr { display: block; }
  .woocommerce table.shop_table_responsive td { display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .woocommerce table.shop_table_responsive td::before { text-align: left; font-weight: 500; }
}

/* ── Contactformulier ────────────────────────────────────────────────────── */
.laconic-contactformulier { max-width: 560px; }
.laconic-contactformulier label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--navy); }
.laconic-contactformulier input[type="text"],
.laconic-contactformulier input[type="email"],
.laconic-contactformulier textarea { width: 100%; padding: 13px 16px; border: 1px solid rgba(36,38,64,.25); border-radius: 10px; font-family: var(--font-tekst); font-size: 1rem; color: var(--navy); background: var(--wit); }
.laconic-contactformulier input:focus,
.laconic-contactformulier textarea:focus { outline: 2px solid var(--goud); outline-offset: 1px; border-color: var(--goud); }
.laconic-contactformulier p { margin: 0 0 18px; }
.cf-website-veld { position: absolute !important; left: -9999px !important; height: 0; overflow: hidden; }
.contact-melding { max-width: 560px; padding: 14px 18px; border-radius: 10px; font-weight: 600; }
.contact-melding-ok { background: #eef6ee; color: #1e5c2e; }
.contact-melding-fout { background: #fbeeee; color: #8a2323; }

/* ── Hero-video ──────────────────────────────────────────────────────────── */
.hero-video { object-position: 55% 65%; }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }