/* ============================================================================
                          ♛  P I N B A L L   P A L A C E

   Maatwerk-stylesheet voor flipperkast.nl — Flipperkasten & amusements-
   automaten, sinds 1998. Handgeschreven design-tokens + componenten; geen
   utility-framework, geen page-builder. Forest green + warm cream, Lora /
   Raleway / JetBrains Mono, alles op 4.5:1-contrast en prefers-reduced-motion.

   © 2026 Pinball Palace Groothandel BV — alle rechten voorbehouden.
   Deze build is eigendom van Pinball Palace en niet vrij te hergebruiken.
   ============================================================================ */

:root {
  --bg: #bedcdb;
  --ink: #1d1d1b;
  --black: #000000;
  --ink-soft: #5b5b58;
  --green: #627b47;
  --green-dark: #4e6438;
  --green-tint: #e7ebe3;
  --green-tint2: #e8ebe4;
  --green-faint: rgba(98, 123, 71, 0.12);
  --teal-tint: #e8f2f2;
  --sage-card: #dee4da;
  --orange: #e17521;
  --orange-hover: #f28538;
  --peach: #f6d9c3;
  --white: #ffffff;
  --offwhite: #f9f8f7;
  --line: #ece8e7;
  --line-soft: #e6e2e0;
  --gold: #f0b323;
  --yellow-soft: #f8e7a6;
  --amber: #c8901a;
  --font-sans: "Manrope", Helvetica, Arial, sans-serif;
  --font-display: "Poppins", "Manrope", sans-serif;
  /* Bedragen: merk-eigen Manrope met tabulaire cijfers i.p.v. systeem-monospace */
  --font-mono: "Manrope", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--black);
  font-family: var(--font-sans), Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 900; line-height: 1.15; color: var(--black); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
ul { margin: 0; padding: 0; list-style: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

.home-canvas { background: #fff; }

.ps-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.ps-section { padding: 56px 0; }
.ps-section__title { font-weight: 900; font-size: 32px; line-height: 1.2; letter-spacing: 0.2px; }
.ps-section__intro { margin-top: 14px; max-width: 70ch; font-size: 16px; line-height: 1.6; color: var(--ink); }

.ps-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 45px; padding: 0 24px; border-radius: 0;
  font-family: var(--font-sans); font-weight: 500; font-size: 14px;
  text-transform: uppercase; letter-spacing: 3px;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap;
}
.ps-btn--primary { background: var(--orange); color: #fff; }
.ps-btn--primary:hover { background: var(--orange-hover); }
.ps-btn--green { background: var(--green); color: #fff; }
.ps-btn--green:hover { background: var(--green-dark); }
.ps-btn--outline { background: transparent; border: 1px solid var(--ink); color: var(--ink); }
.ps-btn--outline:hover { background: var(--ink); color: #fff; }
.ps-btn--block { width: 100%; }

.ps-eyebrow { display: inline-block; color: var(--green); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; margin-bottom: 8px; }
.ps-stars { color: var(--gold); letter-spacing: 1px; }

.ps-scroller {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px;
}
.ps-scroller::-webkit-scrollbar { display: none; }
.ps-scroller > * { scroll-snap-align: start; flex: 0 0 auto; }

.ps-card { background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; transition: box-shadow 0.18s, transform 0.18s; }
.ps-card:hover { box-shadow: 0 16px 34px rgba(29, 29, 27, 0.1); transform: translateY(-3px); }
.ps-card__media { aspect-ratio: 1 / 1; background: var(--offwhite); display: flex; align-items: center; justify-content: center; padding: 18px; }
.ps-card__media img { max-width: 100%; max-height: 100%; object-fit: contain; }

@media (max-width: 900px) { .ps-section__title { font-size: 26px; } }
@media (max-width: 560px) {
  .ps-wrap { padding: 0 16px; }
  .ps-section { padding: 40px 0; }
  .ps-section__title { font-size: 23px; }
}

/* ---------- Header ---------- */
.ps-head { position: sticky; top: 0; z-index: 100; }
.ps-uspbar { background: var(--yellow-soft, #f8e7a6); color: var(--ink); font-size: 13px; }
.ps-uspbar__track { display: flex; align-items: center; justify-content: center; gap: 18px; height: 38px; padding: 0 24px; overflow: hidden; }
.ps-uspbar__item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-weight: 700; letter-spacing: 0.1px; }
.ps-uspbar__sep { width: 5px; height: 5px; border-radius: 50%; background: rgba(29, 29, 27, 0.22); flex-shrink: 0; }
.ps-uspbar__star { color: var(--amber, #c8901a); }

.ps-head__main { background: #fff; border-bottom: 1px solid var(--line); }
.ps-head__row { display: flex; align-items: center; gap: 28px; height: 84px; }
.ps-logo { display: inline-flex; align-items: center; }
.ps-logo img { height: 66px; width: auto; display: block; }

.ps-nav { display: flex; gap: 22px; align-self: stretch; }
.ps-nav__item { position: relative; display: flex; align-items: center; }
.ps-nav__link { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; font-size: 15px; color: var(--ink); padding: 6px 0; transition: color 0.15s; cursor: pointer; }
.ps-nav__item:hover .ps-nav__link { color: var(--green); }
.ps-nav__drop {
  position: absolute; top: 100%; left: -12px; min-width: 296px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 20px 44px rgba(29, 29, 27, 0.16); padding: 10px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.16s, transform 0.16s, visibility 0.16s; z-index: 60;
}
.ps-nav__col { display: flex; flex-direction: column; }
.ps-nav__drop--wide {
  position: absolute; top: 100%; left: -12px; right: auto; width: auto;
  min-width: 640px; max-width: 720px; padding: 14px;
  max-height: calc(100vh - 150px); overflow-y: auto;
}
.ps-nav__drop--wide .ps-wrap { max-width: none; padding: 0; margin: 0; }
.ps-nav__mega { display: block; columns: 2; column-gap: 26px; }
.ps-nav__mega-head { column-span: all; margin-bottom: 8px; display: flex; flex-direction: column; }
.ps-nav__mega .ps-nav__row { break-inside: avoid; }
.ps-nav__mega-eyebrow { color: var(--green); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; }
.ps-nav__mega-title { font-family: var(--font-display), sans-serif; font-weight: 800; font-size: 19px; color: var(--ink); margin-top: 3px; }
.ps-nav__item:hover .ps-nav__drop { opacity: 1; visibility: visible; transform: translateY(0); }
.ps-nav__row { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: 12px; transition: background 0.12s; }
.ps-nav__row:hover { background: var(--green-faint); }
.ps-nav__row-ic { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; background: var(--green-faint); color: var(--green); display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s, color 0.12s; }
.ps-nav__row:hover .ps-nav__row-ic { background: var(--green); color: #fff; }
.ps-nav__row-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ps-nav__row-label { font-size: 14.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.ps-nav__row-desc { font-size: 12.5px; color: var(--ink-soft); margin-top: 1px; white-space: nowrap; }
.ps-nav__row-arr { color: var(--line-soft); flex-shrink: 0; transition: color 0.12s, transform 0.12s; }
.ps-nav__row:hover .ps-nav__row-arr { color: var(--green); transform: translateX(2px); }
.ps-head__spacer { margin-left: auto; }

.ps-search { display: flex; align-items: center; gap: 8px; background: var(--offwhite); border: 1px solid var(--line); padding: 0 14px; height: 42px; width: 230px; color: var(--ink-soft); }
.ps-search input { border: 0; background: none; outline: none; width: 100%; font-family: inherit; font-size: 14px; color: var(--ink); }
.ps-head__icons { display: flex; align-items: center; gap: 14px; color: var(--ink); }
.ps-head__icons button, .ps-head__icons a { display: inline-flex; color: var(--ink); }
.ps-head__icons button:hover, .ps-head__icons a:hover { color: var(--green); }
.ps-cart { position: relative; }
.ps-cart__count { position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; background: var(--orange); color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }

.ps-catstrip { background: #fff; border-bottom: 1px solid var(--line); }
.ps-catstrip__row { display: flex; align-items: center; justify-content: center; gap: 26px; height: 44px; }
.ps-catstrip__link { font-size: 13px; font-weight: 500; color: var(--ink-soft); text-transform: none; transition: color 0.15s; white-space: nowrap; }
.ps-catstrip__link:hover { color: var(--green); }

@media (max-width: 1080px) {
  .ps-nav { display: none; }
  .ps-search { width: 180px; }
}
@media (max-width: 720px) {
  /* USP-balk als horizontale ticker op mobiel (alle items zichtbaar, scrollend)
     i.p.v. statisch met verborgen items. JS dupliceert de inhoud voor een
     naadloze loop en zet .is-marquee. */
  .ps-uspbar { overflow: hidden; }
  .ps-uspbar__track.is-marquee {
    justify-content: flex-start; flex-wrap: nowrap; width: max-content;
    overflow: visible; animation: uspMarquee 26s linear infinite;
  }
  .ps-uspbar__track.is-marquee .ps-uspbar__item { font-weight: 700; }
  .ps-catstrip { display: none; }
  .ps-search { display: none; }
  /* Logo gecentreerd tussen hamburger (links) en iconen (rechts), groter en
     licht uitstekend onder de balk (badge-look met schaduw). */
  .ps-head__main { overflow: visible; }
  .ps-head__row { position: relative; height: 62px; gap: 14px; padding-left: 12px; padding-right: 12px; }
  .ps-logo { font-size: 22px; position: absolute; left: 50%; top: 7px; transform: translateX(-50%); z-index: 3; }
  .ps-logo img { height: 66px; filter: drop-shadow(0 6px 11px rgba(0, 0, 0, 0.20)); }
  /* gecentreerd logo laat ruimte aan de zijkanten: hamburger + iconen groter en
     dichter naar de randen voor balans */
  .ps-burger { width: 46px; height: 46px; }
  .ps-burger span { width: 27px; height: 2.5px; }
  .ps-head__icons { gap: 20px; }
  .ps-head__icons svg { width: 27px; height: 27px; }
  .ps-cart__count { top: -7px; right: -9px; min-width: 17px; height: 17px; font-size: 10px; }
}

/* ---------- PressButton ---------- */
.pbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 26px; border-radius: 12px;
  border: 2px solid var(--ink);
  font-family: var(--font-sans), sans-serif; font-weight: 800; font-size: 15px;
  letter-spacing: 0.2px; white-space: nowrap; cursor: pointer;
  box-shadow: 5px 5px 0 var(--ink);
  transform-origin: center;
  transition: transform 0.07s ease-out, box-shadow 0.1s ease-out, background 0.15s, color 0.15s;
  will-change: transform;
}
.pbtn:hover { box-shadow: 6px 6px 0 var(--ink); }
.pbtn.is-pressed { box-shadow: 2px 2px 0 var(--ink); }
.pbtn__ic { display: inline-flex; align-items: center; }
.pbtn--solid { background: var(--orange); color: #fff; }
.pbtn--solid:hover { background: var(--orange-hover); }
.pbtn--green { background: var(--green); color: #fff; }
.pbtn--green:hover { background: var(--green-dark); }
.pbtn--white { background: #fff; color: var(--ink); }
.pbtn--white:hover { background: #fff; }
@media (prefers-reduced-motion: reduce) {
  .pbtn { transition: box-shadow 0.1s, background 0.15s; }
  .pbtn.is-pressed { transform: none !important; }
}

/* ---------- VideoHero ---------- */
.vh { position: relative; height: 72vh; min-height: 480px; max-height: 720px; overflow: hidden; background: #15201e; }
.vh__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.vh__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vh__bg iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100vw; height: 56.25vw; min-height: 72vh; min-width: 128vh;
  border: 0; pointer-events: none;
}
.vh__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(18, 28, 26, 0.86) 0%, rgba(18, 28, 26, 0.55) 42%, rgba(18, 28, 26, 0.12) 100%),
    linear-gradient(0deg, rgba(18, 28, 26, 0.45) 0%, rgba(18, 28, 26, 0) 40%);
}
.vh__inner { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; }
.vh__content { max-width: 640px; color: #fff; }
.vh__eyebrow {
  display: inline-block; padding: 7px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px;
  backdrop-filter: blur(4px);
}
.vh__title { margin-top: 18px; color: #fff; font-size: 58px; line-height: 1.04; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
.vh__intro { margin-top: 16px; max-width: 50ch; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.3); }
.vh__cta { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .vh { height: auto; min-height: 0; max-height: none; background: var(--ink); }
  /* video als nette 16:9 (was uitvergroot/gecropt door de desktop-cover-maat
     min-width:128vh); poster + iframe vullen het 16:9-kader, hele beeld zichtbaar */
  .vh__bg { position: relative; height: auto; aspect-ratio: 16 / 9; width: 100%; }
  .vh__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .vh__bg iframe {
    position: absolute; inset: 0; top: 0; left: 0;
    width: 100%; height: 100%; min-width: 0; min-height: 0; transform: none;
  }
  .vh__overlay { display: none; }
  .vh__inner { padding-top: 24px; padding-bottom: 30px; }
  .vh__title { font-size: 30px; }
  .vh__intro { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .vh__bg iframe { display: none; }
  .vh { background: linear-gradient(135deg, #243a36, #15201e); }
}

/* ---------- HomeHero ---------- */
.hh { background: #fff; padding: 28px 0 16px; }
.hh__grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 22px; }
.hh__hero {
  position: relative; overflow: hidden; border-radius: 26px; min-height: 520px; padding: 52px 56px;
  background: linear-gradient(135deg, #cfe6e4 0%, var(--bg) 55%, #aecfce 100%);
  display: flex; align-items: center;
}
.hh__hero::before { content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%; background: rgba(255, 255, 255, 0.26); top: -180px; left: -130px; }
.hh__hero-content { position: relative; z-index: 2; max-width: 56%; }
.hh__eyebrow { display: inline-block; color: var(--green); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; margin-bottom: 14px; }
.hh__title { font-size: 46px; line-height: 1.08; font-weight: 900; }
.hh__intro { margin-top: 16px; max-width: 42ch; font-size: 16px; line-height: 1.6; color: var(--ink); }
.hh__cta { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }
.hh__hero-img {
  position: absolute; z-index: 1; right: 44px; bottom: 30px; height: 80%; width: auto; object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.28));
  animation: hhFloat 3.8s ease-in-out infinite;
}
@keyframes hhFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.hh__side { display: grid; grid-template-rows: repeat(3, 1fr); gap: 22px; }
.hh__promo { position: relative; overflow: hidden; border-radius: 22px; padding: 24px 26px; display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: transform 0.18s, box-shadow 0.18s; }
.hh__promo:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(29,29,27,0.10); }
.hh__promo-text { position: relative; z-index: 1; }
.hh__promo-title { font-size: 22px; font-weight: 900; }
.hh__promo-sub { margin-top: 4px; font-size: 14px; color: var(--ink-soft); }
.hh__promo-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--green); }
.hh__promo:hover .hh__promo-link { color: var(--green-dark); }
.hh__promo-img { height: 100px; width: 100px; object-fit: contain; flex-shrink: 0; mix-blend-mode: multiply; }
@media (max-width: 1080px) {
  .hh__grid { grid-template-columns: 1fr; }
  .hh__side { grid-template-columns: repeat(3, 1fr); grid-template-rows: none; }
}
@media (max-width: 760px) {
  .hh__hero { min-height: 0; padding: 36px 28px; }
  .hh__hero-content { max-width: 100%; }
  .hh__title { font-size: 32px; }
  .hh__hero-img { display: none; }
  .hh__side { grid-template-columns: 1fr; }
  /* promo-kaarten waren karig: kast-afbeelding groter + iets meer ruimte */
  .hh__promo { padding: 22px 24px; }
  .hh__promo-img { height: 124px; width: 124px; }
  .hh__promo-title { font-size: 24px; }
}

/* ---------- ProductCard ---------- */
/* WooCommerce wikkelt elke kaart in <li class="pc-li">; localhost heeft die wrapper niet
   (de .pc is daar zelf het grid-item en stretcht vanzelf). Daarom hier de li tot flex maken
   en de .pc laten vullen -> kaarten in dezelfde rij krijgen gelijke hoogte (bodems uitgelijnd),
   zonder min-height of margin-hacks (content blijft bovenaan, net als localhost). */
.pc-li { display: flex !important; }
/* Filters en paginering verbergen kaarten met deze klasse. Een inline
   display:none verloor het van de !important hierboven, waardoor paginering
   en filters wel telden maar niets verborgen. */
.pc-li[hidden], .pc-li.is-hidden, .cat__banner-li.is-hidden { display: none !important; }
.pc-li > .pc { flex: 1; }
.pc { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.18s, transform 0.18s; }
.pc:hover { box-shadow: 0 16px 34px rgba(29, 29, 27, 0.10); transform: translateY(-3px); }
.pc__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
/* Hogere specificiteit dan WooCommerce's `.woocommerce ul.products li.product a img`
   (height:auto), anders rendert de kast op natuurlijke hoogte en kapt de vierkante
   kaart (overflow:hidden) de poten af. object-fit:contain toont de hele afbeelding. */
.pc__media img,
.woocommerce ul.products li.product a .pc__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10px; mix-blend-mode: multiply; transform: scale(var(--imgz, 1)); transform-origin: center center; }
.pc__tag { position: absolute; top: 12px; left: 12px; background: var(--green); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 10px; border-radius: 999px; }
.pc__body { padding: 16px 18px 18px; display: flex; flex-direction: column; }
.pc__brand { font-size: 12px; color: var(--ink-soft); }
/* naam boven, prijs op eigen regel eronder -> lange titels wikkelen niet meer lelijk
   naast de prijs. Naam geclamped op 2 regels voor een strak, uniform raster. */
.pc__row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pc__name { font-size: 18px; font-weight: 800; line-height: 1.28; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.28em); }
.pc__price { font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 900; font-size: 21px; color: var(--ink); white-space: nowrap; letter-spacing: -0.015em; }
.pc__specs { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 18px; }
.pc__spec { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); }
.pc__spec svg { color: var(--green); flex-shrink: 0; }

/* ---------- HomeFeatured ---------- */
.hf { background: #fff; }
.hf__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.hf__all { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--green); white-space: nowrap; }
.hf__all:hover { color: var(--green-dark); }
.hf__grid { margin-top: 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1080px) { .hf__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .hf__grid { grid-template-columns: 1fr 1fr; gap: 14px; } }
@media (max-width: 420px) { .hf__grid { grid-template-columns: 1fr; } }

/* ---------- HomePromos ---------- */
.hp { background: #fff; }
.hp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.hp__card { position: relative; overflow: hidden; background: linear-gradient(135deg, #6e8852 0%, var(--green) 60%, #546d3d 100%); color: #fff; border-radius: 26px; padding: 40px 42px; box-shadow: 0 18px 40px rgba(29, 29, 27, 0.12); }
.hp__card::after { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.10); bottom: -90px; right: -50px; }
.hp__eyebrow { color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; }
.hp__title { color: #fff; font-size: 26px; margin-top: 10px; max-width: 16ch; }
.hp__body { margin-top: 12px; color: rgba(255,255,255,0.9); line-height: 1.55; font-size: 15px; max-width: 42ch; }
.hp__cta { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; margin-top: 22px; font-weight: 700; color: #fff; }
.hp__cta:hover { color: var(--gold); }
@media (max-width: 760px) { .hp__grid { grid-template-columns: 1fr; } .hp__card { padding: 32px 28px; } }

/* ---------- NatureSection ---------- */
.nat__band { background: var(--green-tint); padding: 56px 0; }
.nat__title { text-align: center; }
.nat__intro { max-width: 60ch; margin: 12px auto 0; text-align: center; color: var(--ink); }
.nat__row { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.nat__point { display: flex; flex-direction: column; align-items: center; text-align: center; }
.nat__circle { width: 64px; height: 64px; border-radius: 999px; background: var(--green); color: var(--white); display: inline-flex; align-items: center; justify-content: center; }
.nat__text { font-size: 15px; line-height: 1.5; max-width: 30ch; margin: 14px auto 0; text-align: center; color: var(--ink); }
@media (max-width: 760px) { .nat__row { grid-template-columns: 1fr; } }

/* ---------- ReviewsSection ---------- */
.rv__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rv__title { margin: 0; }
.rv__arrows { display: flex; gap: 10px; }
.rv__arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.2s ease; }
.rv__arrow:hover { border-color: var(--green); }
.rv__scroller { margin-top: 24px; }
.rv__card { flex: 0 0 340px; background: #fff; border: 1px solid var(--line); border-radius: 0; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.rv__stars { display: flex; gap: 2px; }
.rv__text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.rv__author { margin-top: auto; font-style: normal; font-weight: 700; color: var(--ink-soft); font-size: 14px; }
.rv__all { display: block; width: fit-content; margin: 28px auto 0; }
/* Google-review-knop: nette pill met G-logo i.p.v. kale outline-knop */
.rv__all--google { display: inline-flex; align-items: center; gap: 10px; margin: 28px auto 0; padding: 12px 22px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-weight: 600; font-size: 14.5px; text-decoration: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); transition: box-shadow 0.15s ease, border-color 0.15s ease; }
.rv__all--google:hover { border-color: #c9d3c0; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10); }
.rv__all--google .rv__g { flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .rv__all--google { transition: none; } }
@media (max-width: 700px) { .rv__arrows { display: none; } }
@media (max-width: 560px) { .rv__card { flex: 0 0 280px; } }
@media (prefers-reduced-motion: reduce) { .rv__arrow { transition: none; } }

/* ---------- SeoSection / Newsletter promo ---------- */
.promo { padding: 48px 0 56px; }
.promo__inner {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #6e8852 0%, var(--green) 52%, #546d3d 100%);
  border-radius: 30px; display: grid; grid-template-columns: 320px 1fr; gap: 54px;
  align-items: center; padding: 52px 60px; box-shadow: 0 26px 54px rgba(29, 29, 27, 0.16);
}
.promo__inner::before { content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); top: -140px; right: -90px; }
.promo__inner::after { content: ""; position: absolute; width: 210px; height: 210px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.09); bottom: -100px; right: 280px; }
.promo__media { position: relative; }
.promo__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.32)); animation: promoFloat 3.4s ease-in-out infinite; }
@keyframes promoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.promo__content { position: relative; z-index: 1; color: #fff; }
.promo__eyebrow { display: inline-block; color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; margin-bottom: 12px; }
.promo__title { color: #fff; font-size: 32px; line-height: 1.12; font-weight: 900; }
.promo__intro { color: rgba(255, 255, 255, 0.88); margin-top: 12px; max-width: 46ch; line-height: 1.55; font-size: 15px; }
.promo__form { display: flex; margin-top: 26px; max-width: 460px; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14); }
.promo__form input { flex: 1; min-width: 0; height: 54px; border: 0; padding: 0 18px; background: #fff; color: var(--ink); font-family: inherit; font-size: 15px; }
.promo__form input::placeholder { color: #9a948c; }
.promo__submit { flex-shrink: 0; height: 54px; padding: 0 26px; border: 0; cursor: pointer; background: var(--orange); color: #fff; font-family: inherit; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; transition: background 0.15s; }
.promo__submit:hover { background: var(--orange-hover); }
.promo__bullets { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 30px; max-width: 480px; }
.promo__bullets li { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: #fff; }
.promo__bullets li svg { color: var(--gold); flex-shrink: 0; }
@media (max-width: 820px) {
  .promo__inner { grid-template-columns: 1fr; gap: 30px; padding: 36px 32px; text-align: center; }
  .promo__media img { max-width: 230px; margin: 0 auto; }
  .promo__intro { margin-left: auto; margin-right: auto; }
  .promo__form { margin-left: auto; margin-right: auto; }
  .promo__bullets { margin-left: auto; margin-right: auto; text-align: left; justify-content: center; }
  .promo__inner::after { display: none; }
}
@media (max-width: 460px) { .promo__bullets { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.ft__footer { background: var(--green-tint); color: var(--ink-soft); padding: 56px 0 28px; margin-top: 0; border-top: 1px solid var(--line); }
.ft__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
/* hoogte met !important + specifieke selector: op WooCommerce-pagina's (categorie/PDP)
   zet WC's globale `img { height:auto }` het logo anders op natuurlijke grootte,
   waardoor de footer-logo daar groter was dan op de homepage. Nu overal gelijk. */
.ft__footer .ft__logo { height: 84px !important; width: auto !important; display: block; }
.ft__tagline { margin: 10px 0 0; font-size: 14px; color: var(--ink-soft); }
.ft__socials { margin-top: 18px; display: flex; gap: 12px; }
.ft__social { width: 36px; height: 36px; border: 1px solid rgba(29, 29, 27, 0.18); border-radius: 999px; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.ft__social:hover { background: var(--green); border-color: var(--green); color: #fff; }
.ft__heading { margin: 0; color: var(--ink); font-size: 15px; font-weight: 700; }
.ft__list { list-style: none; margin: 10px 0 0; padding: 0; }
.ft__link { color: var(--ink-soft); font-size: 14px; line-height: 2; text-decoration: none; transition: color 0.15s ease; }
.ft__link:hover { color: var(--ink); }
.ft__newsletter { margin-top: 36px; }
.ft__form { margin-top: 12px; display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.ft__input { flex: 1; max-width: 320px; height: 45px; padding: 0 14px; background: #fff; border: 1px solid rgba(29, 29, 27, 0.18); border-radius: 0; color: var(--ink); }
.ft__input::placeholder { color: var(--ink-soft); }
.ft__bottom { border-top: 1px solid rgba(29, 29, 27, 0.12); margin-top: 36px; padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--ink-soft); }
@media (max-width: 760px) {
  /* compacter + linkkolommen naast elkaar (Klantenservice | Pinball Palace) */
  .ft__footer { padding: 34px 0 22px; }
  .ft__grid { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .ft__brand { grid-column: 1 / -1; }
  .ft__footer .ft__logo { height: 56px !important; }
  .ft__tagline { margin-top: 8px; }
  .ft__socials { margin-top: 14px; }
  .ft__list { margin-top: 8px; }
  .ft__link { line-height: 1.85; }
  .ft__newsletter { margin-top: 26px; }
  .ft__bottom { margin-top: 26px; padding-top: 16px; }
}
@media (max-width: 560px) { .ft__bottom { flex-direction: column; gap: 8px; } }

/* ===========================================================
   WooCommerce — shop / PDP / winkelwagen / mobiel menu
   © Pinball Palace Groothandel BV
   =========================================================== */

/* Mobiel hamburger + drawer */
.ps-burger { display: none; flex-direction: column; gap: 5px; width: 42px; height: 42px; align-items: center; justify-content: center; }
.ps-burger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }
@media (max-width: 1080px) { .ps-burger { display: inline-flex; } }
.ps-drawer { position: fixed; inset: 0; z-index: 200; background: rgba(20, 28, 26, 0.5); }
.ps-drawer[hidden] { display: none; }
.ps-drawer__panel { position: absolute; top: 0; left: 0; height: 100%; width: min(86vw, 360px); background: #fff; padding: 18px 20px; overflow-y: auto; box-shadow: 0 0 40px rgba(0, 0, 0, 0.2); }
.ps-drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ps-drawer__brand { font-weight: 800; }
.ps-drawer__close { font-size: 28px; line-height: 1; color: var(--ink); background: none; border: 0; cursor: pointer; }
.ps-drawer__group { border-top: 1px solid var(--line); padding: 12px 0; }
.ps-drawer__link { font-weight: 700; font-size: 16px; color: var(--ink); }
.ps-drawer__link:hover { color: var(--green); }
.ps-drawer__sub { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.ps-drawer__sub a { display: block; padding: 6px 0 6px 10px; font-size: 14px; color: var(--ink-soft); }
.ps-drawer__sub a:hover { color: var(--green); }

/* Shop-archief + grid */
.shop { padding: 32px 0 64px; }
.shop__head { margin-bottom: 22px; }
.pdp__crumb { font-size: 13px; color: var(--ink-soft); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pdp__crumb a:hover { color: var(--green); }
.shop__title { margin-top: 10px; }
.shop__intro { margin-top: 10px; max-width: 70ch; color: var(--ink); line-height: 1.6; }
.shop__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0; color: var(--ink-soft); font-size: 14px; }
.shop__bar .woocommerce-ordering select { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; }
.woocommerce ul.products, ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.woocommerce ul.products li.product, ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; padding: 0 !important; }
.woocommerce ul.products li.product::before { display: none !important; }
@media (max-width: 1080px) { .woocommerce ul.products, ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .woocommerce ul.products, ul.products { grid-template-columns: 1fr 1fr; gap: 14px; } }
@media (max-width: 420px) { .woocommerce ul.products, ul.products { grid-template-columns: 1fr; } }
.shop__empty { padding: 40px 0; color: var(--ink-soft); }
.woocommerce nav.woocommerce-pagination { margin-top: 32px; text-align: center; }
.woocommerce nav.woocommerce-pagination ul { display: inline-flex; gap: 6px; border: 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 { border: 1px solid var(--line); padding: 8px 14px; border-radius: 8px; min-width: 0; }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--green); color: #fff; border-color: var(--green); }

/* PDP */
.pdp { padding: 24px 0 64px; }
.pdp__grid { margin-top: 18px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: start; }
.pdp__gallery img { border-radius: 18px; }
.pdp__brand { font-size: 13px; color: var(--ink-soft); }
.pdp__title { font-size: 40px; line-height: 1.1; margin-top: 4px; }
.pdp__price { font-family: var(--font-display), sans-serif; font-weight: 900; font-size: 28px; margin-top: 14px; color: var(--ink); }
.pdp__price del { color: var(--ink-soft); font-weight: 600; font-size: 20px; margin-right: 8px; }
.pdp__price ins { text-decoration: none; }
.pdp__short { margin-top: 16px; color: var(--ink); line-height: 1.6; max-width: 52ch; }
.pdp__cart { margin-top: 22px; }
.woocommerce div.product form.cart { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; margin: 0; }
.woocommerce div.product form.cart .quantity input.qty { height: 54px; width: 74px; border: 2px solid var(--ink); border-radius: 12px; text-align: center; font-weight: 700; font-family: inherit; }
.woocommerce div.product form.cart .button,
.woocommerce a.button.add_to_cart_button,
.single_add_to_cart_button, .pdp__quote {
  display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 26px;
  border: 2px solid var(--ink); border-radius: 12px; background: var(--orange); color: #fff;
  font-family: var(--font-sans), sans-serif; font-weight: 800; font-size: 15px; letter-spacing: 0.2px;
  text-transform: none; box-shadow: 5px 5px 0 var(--ink); transition: background 0.15s, box-shadow 0.1s;
}
.woocommerce div.product form.cart .button:hover, .single_add_to_cart_button:hover, .pdp__quote:hover { background: var(--orange-hover); box-shadow: 6px 6px 0 var(--ink); }

.ph__alt { margin-top: 16px; display: flex; gap: 12px; flex-wrap: wrap; }
.ph__altbtn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border: 1px solid var(--green); color: var(--green); border-radius: 12px; font-weight: 700; font-size: 14px; transition: background 0.15s, color 0.15s; }
.ph__altbtn:hover { background: var(--green); color: #fff; }
.ph__moreinfo { margin-top: 14px; display: inline-block; background: none; border: 0; padding: 0; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 14px; }
.ph__moreinfo:hover { color: var(--green); }
.pdp__meta { margin-top: 24px; border-top: 1px solid var(--line); display: flex; flex-direction: column; }
.pdp__meta li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pdp__meta li span { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); }
.pdp__meta li strong { color: var(--ink); text-align: right; }
.pdp__desc { margin-top: 48px; }
.pdp__desc-body { margin-top: 14px; max-width: 80ch; color: var(--ink); line-height: 1.7; }
.related > h2, .upsells > h2 { font-family: var(--font-display), sans-serif; font-weight: 900; font-size: 26px; margin: 48px 0 18px; }
@media (max-width: 900px) { .pdp__grid { grid-template-columns: 1fr; gap: 26px; } .pdp__title { font-size: 30px; } }

/* PDP info-modal */
.ph__modal { position: fixed; inset: 0; z-index: 300; background: rgba(20, 28, 26, 0.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.ph__modal[hidden] { display: none; }
.ph__modal-card { position: relative; width: min(520px, 100%); background: #fff; border-radius: 20px; padding: 32px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3); }
.ph__modal-x { position: absolute; top: 14px; right: 16px; font-size: 26px; line-height: 1; color: var(--ink-soft); background: none; border: 0; cursor: pointer; }
.ph__modal-x:hover { color: var(--ink); }
.ph__modal-title { font-size: 22px; }
.ph__modal-intro { margin-top: 8px; color: var(--ink-soft); font-size: 14px; }
.ph__form { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.ph__form-row { display: flex; gap: 12px; }
.ph__form input, .ph__form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 14px; background: var(--offwhite); color: var(--ink); }
.ph__form textarea { resize: vertical; }
.ph__sent { padding: 20px 0; font-weight: 600; color: var(--green); }

/* WooCommerce notices/cart/checkout — basis in stijl */
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-top-color: var(--green); background: var(--offwhite); border-radius: 10px; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--green); }
.woocommerce .cart .button, .woocommerce .checkout button.button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button {
  background: var(--green); color: #fff; border-radius: 10px; font-weight: 700; text-transform: none; letter-spacing: 0.2px;
}
.woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--green-dark); }
.woocommerce-breadcrumb { display: none; }

/* ===========================================================
   Content-pagina's (ContentPage 1:1) + contact + verkoop-overzicht
   =========================================================== */
.cp { padding-bottom: 24px; }
.cp-crumb-wrap { padding-top: 22px; }
.cp-crumb { font-size: 13px; color: var(--ink-soft); display: flex; gap: 6px; flex-wrap: wrap; }
.cp-crumb a:hover { color: var(--green); }
.cp-crumb__sep { margin: 0 4px; color: var(--line-soft); }

.cp-hero-sec { padding: 16px 0 8px; }
.cp-hero { position: relative; overflow: hidden; border-radius: 28px; min-height: 380px; padding: 52px 60px; display: flex; align-items: center; box-shadow: 0 22px 48px rgba(29, 29, 27, 0.10); }
.cp-hero::before { content: ""; position: absolute; width: 440px; height: 440px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); top: -170px; left: -120px; }
.cp-hero__content { position: relative; z-index: 2; max-width: 58%; }
.cp-hero--noimg { min-height: 0; }
.cp-hero--noimg .cp-hero__content { max-width: 720px; }
.cp-hero__eyebrow { display: inline-block; color: var(--green); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; margin-bottom: 14px; }
.cp-hero__title { font-size: 44px; line-height: 1.08; }
.cp-hero__intro { margin-top: 16px; max-width: 52ch; font-size: 16px; line-height: 1.6; color: var(--ink); }
.cp-hero__cta { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }
/* max-height klemt de hero-afbeelding ook als WooCommerce's archief-CSS de height:78%
   overschrijft naar auto (arcade rendert in WC-archiefcontext, /verkoop/arcade). */
.cp-hero__img { position: absolute; z-index: 1; right: 48px; bottom: 28px; height: 78%; max-height: 350px; width: auto; object-fit: contain; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.26)); }
.cp-hero__img--blend { mix-blend-mode: multiply; filter: none; }

.cp-lead__inner { max-width: 760px; margin: 0 auto; text-align: center; }
.cp-lead__title { font-size: 32px; }
.cp-lead__body { margin-top: 14px; font-size: 16.5px; line-height: 1.7; color: var(--ink); }
.cp-lead__cta { margin-top: 24px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.cp-feat__grid { margin-top: 28px; display: grid; gap: 20px; }
.cp-feat__grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.cp-feat__grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.cp-feat__grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.cp-feat__card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px; transition: box-shadow 0.18s, transform 0.18s; }
.cp-feat__card:hover { box-shadow: 0 16px 34px rgba(29, 29, 27, 0.08); transform: translateY(-3px); }
.cp-feat__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--green-faint); color: var(--green); margin-bottom: 16px; }
.cp-feat__title { font-size: 19px; }
.cp-feat__body { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }

.cp-split__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.cp-split__inner--rev .cp-split__media { order: 2; }
.cp-split__media { border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--green-tint); display: flex; align-items: center; justify-content: center; }
.cp-split__img { width: 100%; height: 100%; object-fit: contain; padding: 22px; }
.cp-split__img--blend { mix-blend-mode: multiply; }
.cp-split__img--photo { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.cp-split__title { font-size: 30px; margin-top: 6px; }
.cp-split__body { margin-top: 12px; font-size: 16px; line-height: 1.65; color: var(--ink); }
.cp-split__bullets { margin-top: 18px; display: grid; gap: 11px; }
.cp-split__bullets li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink); }
.cp-split__bullets li svg { color: var(--green); flex-shrink: 0; }
.cp-split__cta { margin-top: 24px; }

.cp-steps__grid { margin-top: 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cp-steps__card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px 22px; }
.cp-steps__num { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; background: var(--green); color: #fff; font-family: var(--font-display), sans-serif; font-weight: 800; font-size: 17px; margin-bottom: 14px; }
.cp-steps__title { font-size: 18px; }
.cp-steps__body { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }

.cp-stats-sec { padding: 8px 0 16px; }
.cp-stats { background: var(--green-tint); border-radius: 22px; padding: 30px 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cp-stat { text-align: center; }
.cp-stat__value { display: block; font-family: var(--font-display), sans-serif; font-weight: 900; font-size: 34px; color: var(--green-dark); line-height: 1; }
.cp-stat__label { display: block; margin-top: 8px; font-size: 13.5px; color: var(--ink-soft); }

.cp-ctaband__inner { position: relative; overflow: hidden; border-radius: 28px; background: linear-gradient(135deg, #6e8852 0%, var(--green) 58%, #546d3d 100%); color: #fff; padding: 44px 52px; display: flex; align-items: center; justify-content: space-between; gap: 30px; box-shadow: 0 20px 44px rgba(29, 29, 27, 0.14); }
.cp-ctaband__inner::after { content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.10); bottom: -120px; right: 160px; }
.cp-ctaband__text { position: relative; z-index: 1; max-width: 60ch; }
.cp-ctaband__title { color: #fff; font-size: 28px; }
.cp-ctaband__body { margin-top: 10px; color: rgba(255, 255, 255, 0.9); font-size: 16px; line-height: 1.55; }
.cp-ctaband__btn { margin-top: 22px; }
.cp-ctaband__img { position: relative; z-index: 1; height: 180px; width: auto; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 16px 18px rgba(0,0,0,0.3)); }

.cp-faq__wrap { max-width: 820px; }
.cp-faq__list { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.cp-faq__item { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 4px 20px; }
.cp-faq__q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; font-family: var(--font-display), sans-serif; font-weight: 700; font-size: 16.5px; color: var(--ink); }
.cp-faq__q::-webkit-details-marker { display: none; }
.cp-faq__chev { color: var(--ink-soft); flex-shrink: 0; transition: transform 0.2s; }
.cp-faq__item[open] .cp-faq__chev { transform: rotate(180deg); }
.cp-faq__a { margin: 0 0 18px; font-size: 15px; line-height: 1.65; color: var(--ink-soft); max-width: 70ch; }

@media (max-width: 980px) {
  .cp-hero__content { max-width: 100%; }
  .cp-hero__img { display: none; }
  .cp-hero__title { font-size: 34px; }
  .cp-feat__grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
  .cp-steps__grid { grid-template-columns: repeat(2, 1fr); }
  .cp-split__inner { grid-template-columns: 1fr; gap: 26px; }
  .cp-split__inner--rev .cp-split__media { order: 0; }
  .cp-ctaband__img { display: none; }
}
@media (max-width: 620px) {
  .cp-hero { padding: 38px 26px; min-height: 0; }
  .cp-feat__grid[data-cols="2"], .cp-feat__grid[data-cols="3"], .cp-feat__grid[data-cols="4"] { grid-template-columns: 1fr; }
  .cp-steps__grid { grid-template-columns: 1fr; }
  .cp-stats { grid-template-columns: 1fr 1fr; }
  .cp-ctaband__inner { padding: 32px 28px; }
}

/* Verkoop-overzicht 1:1 met VerkoopOverview.tsx */
.vk { padding-bottom: 32px; }
.vk-crumb-wrap { padding-top: 22px; }
.vk-crumb { font-size: 13px; color: var(--ink-soft); display: flex; gap: 6px; }
.vk-crumb a:hover { color: var(--green); }
.vk-crumb__sep { margin: 0 4px; color: var(--line-soft); }
.vk-head-sec { padding: 18px 0 4px; }
.vk-title { font-size: 40px; margin-top: 4px; }
.vk-intro { margin-top: 12px; max-width: 75ch; font-size: 16.5px; line-height: 1.65; color: var(--ink); }
.vk-grid-sec { padding-top: 30px; }
.vk-top { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.vk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vk-tile { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s; }
.vk-tile:hover { box-shadow: 0 16px 34px rgba(29, 29, 27, 0.09); transform: translateY(-3px); border-color: var(--green-tint); }
.vk-tile__ic { width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; background: var(--green-faint); color: var(--green); display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; }
.vk-tile:hover .vk-tile__ic { background: var(--green); color: #fff; }
.vk-tile__txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.vk-tile__label { font-family: var(--font-display), sans-serif; font-weight: 800; font-size: 18px; color: var(--ink); }
.vk-tile__desc { font-size: 13.5px; color: var(--ink-soft); margin-top: 2px; }
.vk-tile__arr { color: var(--line-soft); flex-shrink: 0; transition: color 0.15s, transform 0.15s; }
.vk-tile:hover .vk-tile__arr { color: var(--green); transform: translateX(3px); }
@media (max-width: 900px) { .vk-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .vk-title { font-size: 30px; } .vk-grid { grid-template-columns: 1fr; } }

/* Contact */
.ct-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: start; margin-top: 8px; }
.ct-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 28px; }
.ct-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ct-item:last-child { border-bottom: 0; }
.ct-item__ic { width: 42px; height: 42px; border-radius: 12px; background: var(--green-faint); color: var(--green); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ct-item__l { font-size: 13px; color: var(--ink-soft); }
.ct-item__v { font-weight: 600; color: var(--ink); }
.ct-form { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.ct-form__row { display: flex; gap: 14px; }
.ct-form input, .ct-form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 14px; background: var(--offwhite); color: var(--ink); }
.ct-form textarea { resize: vertical; }
@media (max-width: 820px) { .ct-grid { grid-template-columns: 1fr; gap: 24px; } .ct-form__row { flex-direction: column; } }

/* Skip-link (toegankelijkheid) */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--green); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; font-weight: 700; }
.skip-link:focus { left: 0; }

/* Juridische pagina's */
.lg-wrap { max-width: 820px; }
.lg-title { font-size: 38px; }
.lg-updated { margin-top: 8px; font-size: 13px; color: var(--ink-soft); }
.lg-intro { margin-top: 18px; font-size: 16.5px; line-height: 1.7; color: var(--ink); }
.lg-sec { margin-top: 30px; }
.lg-h { font-size: 22px; }
.lg-p { margin-top: 12px; font-size: 15.5px; line-height: 1.7; color: var(--ink); }
@media (max-width: 620px) { .lg-title { font-size: 28px; } }

/* Footer juridische links */
.ft__legal { display: flex; gap: 16px; flex-wrap: wrap; }
.ft__legal a { color: var(--ink-soft); font-size: 13px; }
.ft__legal a:hover { color: var(--ink); }

/* ===========================================================
   CategoryView 1:1 — filter-sidebar, pills, chips, banner
   =========================================================== */
.cat { padding: 28px 0 40px; }
.cat__crumb { font-size: 13px; color: var(--ink-soft); display: flex; gap: 6px; flex-wrap: wrap; }
.cat__crumb a:hover { color: var(--green); }
.cat__crumb-sep { margin: 0 4px; color: var(--line-soft); }
.cat__head { margin-top: 16px; }
.cat__title { font-size: 40px; font-weight: 900; }
.cat__intro { margin-top: 12px; max-width: 80ch; font-size: 16px; line-height: 1.6; color: var(--ink); }
.cat__more { color: var(--green); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; font-size: 15px; padding: 0; background: none; border: 0; cursor: pointer; }
.cat__more:hover { color: var(--green-dark); }
.cat__pills { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.cat__pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 14px; font-weight: 600; color: var(--ink); transition: border-color 0.15s, background 0.15s, color 0.15s; cursor: pointer; }
.cat__pill svg { color: var(--green); transition: color 0.15s; }
.cat__pill:hover { border-color: var(--green); background: var(--green-faint); }
.cat__pill--on { background: var(--green); border-color: var(--green); color: #fff; }
.cat__pill--on svg { color: #fff; }
.cat__pill--on:hover { background: var(--green-dark); border-color: var(--green-dark); }
.cat__layout { margin-top: 26px; display: grid; grid-template-columns: 256px 1fr; gap: 32px; align-items: start; }
.cat__filters { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 8px 20px 16px; position: sticky; top: 160px; box-shadow: 0 10px 30px rgba(29, 29, 27, 0.05); }
.cat__filters-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 4px; border-bottom: 1px solid var(--line); }
.cat__filters-title { font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 900; font-size: 17px; }
.cat__clear { font-size: 13px; font-weight: 600; color: var(--green); text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; cursor: pointer; }
.cat__clear:hover { color: var(--green-dark); }
.cat__filter { padding: 14px 0; border-bottom: 1px solid var(--line); }
.cat__filter:last-child { border-bottom: 0; }
.cat__filter-head { width: 100%; display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 14px; color: var(--ink); background: none; padding: 0; border: 0; cursor: pointer; }
.cat__filter-label { display: inline-flex; align-items: center; gap: 6px; }
.cat__info { display: inline-flex; color: var(--ink-soft); cursor: help; }
.cat__chev { color: var(--ink-soft); transition: transform 0.18s; }
.cat__chev--up { transform: rotate(180deg); }
.cat__opts { margin-top: 13px; display: flex; flex-direction: column; gap: 11px; }
.cat__opt { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; padding: 6px 9px; margin: 0 -9px; border-radius: 11px; transition: background 0.12s; }
.cat__opt:hover { background: var(--green-faint); }
.cat__opt input { appearance: none; -webkit-appearance: none; width: 19px; height: 19px; margin-top: 1px; border: 1.5px solid var(--line-soft); border-radius: 6px; background: #fff; cursor: pointer; flex-shrink: 0; position: relative; transition: background 0.15s, border-color 0.15s; }
.cat__opt input:hover { border-color: var(--green); }
.cat__opt input:checked { background: var(--green); border-color: var(--green); }
.cat__opt input:checked::after { content: ""; position: absolute; left: 6px; top: 2.5px; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cat__opt-body { display: flex; flex-direction: column; line-height: 1.25; }
.cat__opt-label { font-size: 14px; color: var(--ink); }
.cat__opt-count { color: var(--ink-soft); }
.cat__opt-sub { font-size: 12px; color: var(--ink-soft); margin-top: 1px; }
.cat__opt:hover .cat__opt-label { color: var(--green); }
.cat__opt--on .cat__opt-label { color: var(--green); font-weight: 700; }
.cat__opt--off { cursor: not-allowed; opacity: 0.4; }
.cat__opt--off input { cursor: not-allowed; }
.cat__opt--off:hover .cat__opt-label { color: var(--ink); }
.cat__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.cat__count { font-size: 14.5px; color: var(--ink-soft); }
.cat__count strong { color: var(--ink); font-weight: 700; }
.cat__count-of { color: var(--ink-soft); }
.cat__sort { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-soft); }
.cat__sort-lbl { font-weight: 600; white-space: nowrap; }
.cat__sort-sel { position: relative; display: inline-flex; align-items: center; }
.cat__sort-sel select { font-family: var(--font-sans), sans-serif; font-size: 14px; font-weight: 600; color: var(--ink); border: 1px solid var(--line); background: #fff; padding: 9px 38px 9px 14px; border-radius: 999px; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; transition: border-color 0.15s, box-shadow 0.15s; }
.cat__sort-sel select:hover { border-color: var(--green); }
.cat__sort-sel select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-faint); }
.cat__sort-chev { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-soft); }
.cat__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 20px; }
.cat__chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--green-faint); color: var(--green-dark); font-size: 13px; font-weight: 600; transition: background 0.15s; border: 0; cursor: pointer; }
.cat__chip:hover { background: rgba(98, 123, 71, 0.2); }
.cat__chip-x { font-size: 16px; line-height: 1; }
.cat__chips-clear { font-size: 13px; font-weight: 600; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; cursor: pointer; }
.cat__chips-clear:hover { color: var(--ink); }
ul.products.cat__grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px; margin: 0; padding: 0; list-style: none; }
.cat__grid .cat__banner-li { grid-column: 1 / -1; width: auto !important; }
.cat__empty { border: 1px dashed var(--line-soft); border-radius: 18px; padding: 48px 24px; text-align: center; background: var(--offwhite); }
.cat__empty-title { font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 900; font-size: 20px; color: var(--ink); }
.cat__empty-sub { margin-top: 6px; color: var(--ink-soft); }
.cat__empty .ps-btn { margin-top: 18px; }
.cat__banner { grid-column: 1 / -1; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-radius: 22px; padding: 30px 38px; background: linear-gradient(135deg, #6e8852 0%, var(--green) 58%, #546d3d 100%); color: #fff; box-shadow: 0 16px 36px rgba(29, 29, 27, 0.12); }
.cat__banner::after { content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.10); top: -90px; right: 220px; }
.cat__banner-text { position: relative; z-index: 1; max-width: 60ch; }
.cat__banner-eyebrow { color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; }
.cat__banner-title { color: #fff; font-size: 24px; margin-top: 8px; }
.cat__banner-body { margin-top: 8px; color: rgba(255,255,255,0.9); line-height: 1.5; font-size: 15px; }
.cat__banner-cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-weight: 700; color: #fff; }
.cat__banner:hover .cat__banner-cta { color: var(--gold); }
.cat__banner-img { position: relative; z-index: 1; height: 150px; width: auto; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 14px 16px rgba(0,0,0,0.28)); }
@media (max-width: 1080px) { ul.products.cat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 820px) { .cat__layout { grid-template-columns: 1fr; } .cat__filters { position: static; } .cat__banner-img { display: none; } }
@media (max-width: 560px) { .cat__title { font-size: 30px; } ul.products.cat__grid { grid-template-columns: 1fr !important; } .cat__banner { padding: 24px 26px; } }

/* Banner-afbeelding forceren tegen WooCommerce-img-regels in */
.cat__grid .cat__banner-img { height: 150px !important; width: auto !important; max-width: 42% !important; }

/* Advies-rij in de categorie-grid: 3 groene kaarten op een rij (desktop) */
.cat__advies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cat__advies-card { display: flex; flex-direction: column; position: relative; overflow: hidden; border-radius: 20px; padding: 26px 26px 24px; text-decoration: none; color: #fff; background: linear-gradient(135deg, #6e8852 0%, var(--green) 58%, #546d3d 100%); box-shadow: 0 14px 30px rgba(40,55,25,0.16); transition: transform 0.15s, box-shadow 0.15s; }
.cat__advies-card::after { content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.10); top: -80px; right: -40px; pointer-events: none; }
.cat__advies-card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(40,55,25,0.22); }
.cat__advies-eyebrow { display: inline-flex; align-items: center; gap: 7px; position: relative; z-index: 1; color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 11.5px; margin-bottom: 12px; }
.cat__advies-eyebrow svg { color: var(--gold); }
.cat__advies-title { position: relative; z-index: 1; font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 800; font-size: 19px; line-height: 1.2; margin: 0 0 10px; color: #fff; }
.cat__advies-body { position: relative; z-index: 1; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.9); margin: 0 0 18px; flex: 1; }
.cat__advies-cta { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; font-weight: 700; font-size: 14.5px; color: #fff; }
.cat__advies-card:hover .cat__advies-cta { gap: 11px; color: var(--gold); }
@media (max-width: 1080px) { .cat__advies { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .cat__advies { grid-template-columns: 1fr; } }

/* Client-side paginering */
.cat__pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.cat__page { min-width: 42px; height: 42px; padding: 0 13px; border: 1px solid var(--line); background: #fff; border-radius: 11px; font-family: var(--font-sans), sans-serif; font-weight: 600; font-size: 15px; color: var(--ink); cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; }
.cat__page:hover:not(:disabled) { border-color: var(--green); color: var(--green); }
.cat__page.is-current { background: var(--green); border-color: var(--green); color: #fff; }
.cat__page:disabled { opacity: 0.4; cursor: default; }

/* ===========================================================
   PDP — ProductHero + ContentSection + FaqSection (1:1)
   =========================================================== */
[hidden] { display: none !important; }

.ph { padding: 22px 0 8px; }
.ph__crumb { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 14px; color: var(--ink); margin-bottom: 16px; }
.ph__crumb a { color: inherit; }
.ph__crumb a:hover { color: var(--green); }
.ph__crumb-sep { color: var(--line-soft); }
.ph__crumb [aria-current="page"] { color: var(--ink-soft); }
.ph__grid { display: grid; grid-template-columns: 78px minmax(0, 1fr) 392px; gap: 22px; align-items: start; }
.ph__grid--noithumbs { grid-template-columns: minmax(0, 1fr) 392px; }
.ph__thumbs { display: flex; flex-direction: column; gap: 12px; align-items: center; position: sticky; top: 170px; }
.ph__thumb { position: relative; width: 80px; height: 98px; background: #fff; border: 3px solid #fff; padding: 4px; overflow: hidden; transition: border-color 0.15s; border-radius: 12px; box-shadow: 0 4px 12px rgba(29, 29, 27, 0.07); cursor: pointer; }
.ph__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ph__thumb:hover { border-color: #c9d3c0; }
.ph__thumb.is-active { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.ph__stage { position: sticky; top: 170px; background: #fff; border: 8px solid #fff; aspect-ratio: 1 / 1.18; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 22px; box-shadow: 0 12px 30px rgba(29, 29, 27, 0.08); }
.ph__stage img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
/* Podium volgt de vorm van de foto: liggende producten (air hockey, pooltafels,
   voetbaltafels) stonden anders in een staand vak met de helft leeg. */
.ph__stage--sq { aspect-ratio: 1 / 1; }
.ph__stage--land { aspect-ratio: 3 / 2; }
.ph__nophoto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--ink-soft); font-size: 15px; }
.ph__nophoto svg { color: #b9c2b1; }
.pc__nophoto { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--ink-soft); font-size: 12.5px; }
.pc__nophoto svg { color: rgba(29, 29, 27, 0.28); }
.ph__buy { display: flex; flex-direction: column; }
.ph__sup { font-size: 15px; color: var(--ink); margin: 0 0 2px; }
.ph__name { font-size: 40px; line-height: 1.04; font-weight: 900; margin-bottom: 18px; }
.ph__step { background: rgba(255, 255, 255, 0.42); padding: 18px 20px; margin-bottom: 14px; border-radius: 20px; border: 5px solid #fff; box-shadow: 0 8px 24px rgba(29, 29, 27, 0.06); }
.ph__stephead { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.ph__no { width: 20px; height: 20px; border-radius: 10px; background: var(--green); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ph__steplabel { font-weight: 700; font-size: 16px; }
.ph__help { color: var(--ink-soft); display: inline-flex; }
.ph__sizerow { width: 100%; display: flex; align-items: center; justify-content: space-between; background: var(--teal-tint); border: 1px solid #cfe0e0; padding: 14px 16px; font-size: 15px; color: var(--ink); border-radius: 12px; }
.ph__stock { background: #3f7d52; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.4px; }
.ph__models { gap: 12px; }
.ph__model { display: flex; flex-direction: column; align-items: center; gap: 5px; width: auto; min-width: 108px; padding: 8px; border: 1px solid var(--line); background: #fff; transition: border-color 0.15s; border-radius: 12px; cursor: pointer; }
.ph__model:hover { border-color: #c9d3c0; }
.ph__model.is-active { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
a.ph__model { text-decoration: none; color: var(--ink); }
a.ph__model.is-active { cursor: default; }
.ph__models--links .ph__modelname { color: var(--ink); }
.ph__modelimg { width: 100%; height: 90px; display: flex; align-items: center; justify-content: center; background: var(--offwhite); border-radius: 8px; overflow: hidden; }
.ph__modelimg img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ph__modelname { font-weight: 700; font-size: 13px; text-align: center; line-height: 1.15; white-space: nowrap; }
.ph__modelprice { font-family: var(--font-sans); font-weight: 600; font-size: 12px; color: var(--green); white-space: nowrap; }
/* uitvoering-kaarten: compact, een regel, alleen de actieve btw-variant
   (de kleine tweede prijs maakte de kaarten ongelijk van hoogte) */
.ph__modelprice .ppvat { display: inline; }
.ph__modelprice .ppvat__exc { display: none; }
html.pp-vat-excl .ph__modelprice .ppvat__inc { display: none; }
html.pp-vat-excl .ph__modelprice .ppvat__exc { display: inline; font-size: inherit; font-weight: inherit; opacity: 1; letter-spacing: inherit; white-space: nowrap; }
.ph__modelprice .ppvat__exc::after { content: " excl. btw"; font-size: 0.85em; font-weight: 600; opacity: 0.75; }
.ph__modelblurb { margin: 10px 0 0; font-size: 13px; color: var(--ink-soft); }
.ph__info { padding: 22px 24px; }
.ph__info-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: none; border: 0; cursor: pointer; }
.ph__info-title { font-weight: 700; font-size: 17px; color: var(--ink); }
.ph__info-toggle { color: var(--green); display: inline-flex; }
.ph__info-body { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.ph__info-body p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.ph__whitebox { background: #fff; padding: 22px; margin-top: 4px; border-radius: 20px; border: 5px solid #fff; box-shadow: 0 8px 24px rgba(29, 29, 27, 0.06); }
.ph__qty { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.ph__qtylabel { font-weight: 600; font-size: 15px; color: var(--ink); }
.ph__qtybox { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.ph__qtybtn { width: 42px; height: 44px; border: 0; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink); }
.ph__qtybtn:hover { background: var(--green-faint); }
.ph__qtyinput { width: 72px; height: 44px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; font-size: 16px; font-family: inherit; color: var(--ink); -moz-appearance: textfield; appearance: textfield; }
.ph__qtyinput::-webkit-outer-spin-button, .ph__qtyinput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ph__total { margin: 0 0 14px; }
.ph__totalrow { width: 100%; display: flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; }
.ph__totallabel { font-weight: 700; font-size: 17px; }
.ph__totalamt { margin-left: auto; font-weight: 700; font-size: 24px; font-family: var(--font-sans); }
.ph__totalamt .woocommerce-Price-amount { font-weight: 700; }
.ph__totalchev { color: var(--ink); display: inline-flex; }
.ph__cta { margin-bottom: 12px; }
.ph__wooform { display: none; }
.ph__alt { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.ph__altbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 12px; border: 1.5px solid var(--green); color: var(--green); font-weight: 700; font-size: 14px; background: #fff; transition: background 0.15s, color 0.15s; }
.ph__altbtn:hover { background: var(--green); color: #fff; }
.ph__altbtn svg { flex-shrink: 0; }
.ph__moreinfo { display: block; width: 100%; text-align: center; margin-bottom: 18px; background: none; border: 0; cursor: pointer; font-size: 14px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; transition: color 0.15s; }
.ph__moreinfo:hover { color: var(--green); }
.ph__modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ph__modal-overlay { position: absolute; inset: 0; background: rgba(18, 28, 26, 0.55); }
.ph__modal-card { position: relative; z-index: 1; width: 100%; max-width: 480px; background: #fff; border-radius: 22px; padding: 30px; max-height: 90vh; overflow-y: auto; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.32); }
.ph__modal-x { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 999px; background: var(--offwhite); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; border: 0; cursor: pointer; }
.ph__modal-x:hover { background: var(--line); }
.ph__modal-title { font-size: 23px; margin-top: 8px; }
.ph__modal-sub { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.ph__form { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.ph__form2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ph__field { display: flex; flex-direction: column; gap: 5px; }
.ph__field > span { font-size: 13px; font-weight: 600; color: var(--ink); }
.ph__field input, .ph__field textarea { font-family: inherit; font-size: 15px; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; background: var(--offwhite); transition: border-color 0.15s, background 0.15s; }
.ph__field input:focus, .ph__field textarea:focus { outline: none; border-color: var(--green); background: #fff; }
.ph__field textarea { resize: vertical; }
.ph__sent { padding: 20px 0; font-weight: 600; color: var(--green); text-align: center; }
.ph__usps { display: flex; flex-direction: column; gap: 14px; }
.ph__usps li { display: flex; gap: 12px; font-size: 14px; line-height: 1.45; color: var(--ink); }
.ph__usps li svg { color: var(--green); flex-shrink: 0; margin-top: 1px; }
@media (max-width: 1080px) {
  .ph__grid, .ph__grid--noithumbs { grid-template-columns: 70px minmax(0,1fr); }
  .ph__buy { grid-column: 1 / -1; margin-top: 24px; }
  .ph__stage, .ph__thumbs { position: static; }
  .ph__name { font-size: 34px; }
}
@media (max-width: 560px) {
  .ph__grid, .ph__grid--noithumbs { grid-template-columns: 1fr; }
  /* grote foto eerst, kleine thumbnails als nette horizontale rij eronder */
  .ph__stage { order: 1; }
  .ph__thumbs {
    order: 2; flex-direction: row; flex-wrap: nowrap; justify-content: center;
    gap: 10px; margin-top: 14px; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 2px;
  }
  .ph__thumbs::-webkit-scrollbar { display: none; }
  .ph__thumb { flex: 0 0 auto; scroll-snap-align: center; width: 72px; height: 88px; }
  .ph__buy { order: 3; }
  .ph__name { font-size: 32px; }
}

/* ContentSection */
.cs__root { padding-top: 8px; padding-bottom: 8px; }
.cs__twijfel { background: var(--green-tint); border-radius: 18px; padding: 22px 26px 20px; max-width: 640px; margin: 0 auto 40px; border: 5px solid #fff; box-shadow: 0 8px 24px rgba(29, 29, 27, 0.05); }
.cs__twijfel-title { font-weight: 700; font-size: 18px; color: var(--ink); margin: 0 0 10px; }
.cs__twijfel-p { font-size: 14.5px; line-height: 1.6; color: var(--ink); margin: 0 0 14px; }
.cs__twijfel-link { color: var(--green); text-decoration: underline; }
.cs__twijfel-link:hover { color: var(--green-dark); }
.cs__twijfel-intro { font-size: 14.5px; line-height: 1.6; color: var(--ink); margin: 0 0 4px; }
.cs__twijfel-copy { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); font-style: italic; margin: 0; }
.cs__about { margin-bottom: 36px; text-align: center; }
.cs__about-body { max-width: 70ch; line-height: 1.65; color: var(--ink); margin: 14px auto 0; font-size: 15px; text-align: left; }
.cs__grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 24px; align-items: start; margin-bottom: 24px; }
.cs__spec-card { background: var(--white); border: 1px solid var(--line); padding: 24px 26px; }
.cs__spec-heading { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.cs__spec-list { list-style: none; margin: 0; padding: 0; }
.cs__spec-row { display: flex; align-items: center; gap: 14px; padding: 9px 0; }
.cs__spec-icon { flex: 0 0 auto; color: var(--green); }
.cs__spec-text { font-size: 15px; color: var(--ink); line-height: 1.4; }
.cs__spec-value { font-weight: 700; }
.cs__spec-unit { font-weight: 400; color: var(--ink-soft); font-size: 14px; }
.cs__care { background: var(--white); border: 1px solid var(--line); }
.cs__care-header { background: var(--green-tint); padding: 18px 22px; display: flex; align-items: center; gap: 12px; }
.cs__care-title { font-size: 17px; font-weight: 700; color: var(--ink); }
.cs__care-intro { font-size: 14px; color: var(--ink-soft); padding: 0 22px 14px; margin: 14px 0 0; background: var(--white); }
.cs__acc-row { border-top: 1px solid var(--line); }
.cs__acc-btn { width: 100%; background: none; border: 0; padding: 16px 22px; display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left; font-family: var(--font-sans); }
.cs__acc-icon { flex: 0 0 auto; color: var(--green); }
.cs__acc-title { flex: 1 1 auto; font-size: 16px; font-weight: 700; color: var(--ink); }
.cs__acc-chev { flex: 0 0 auto; color: var(--ink); transition: transform 0.25s ease; }
.cs__acc-chev--open { transform: rotate(180deg); }
.cs__acc-panel { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.cs__acc-panel--open { max-height: 600px; }
.cs__acc-body { font-size: 14px; color: var(--ink-soft); line-height: 1.55; padding: 0 22px 18px 56px; margin: 0; }
.cs__care-link { border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; padding: 16px 22px; color: var(--green); font-weight: 700; font-size: 14.5px; text-decoration: none; }
.cs__care-link:hover { color: var(--green-dark); }
.cs__care-link-arrow { flex: 0 0 auto; color: currentColor; }
@media (max-width: 860px) { .cs__grid { grid-template-columns: 1fr; } }

/* FaqSection */
.faq__title { text-align: center; }
.faq__intro { text-align: center; margin: 14px auto 0; max-width: 60ch; }
.faq__list { max-width: 800px; margin: 30px auto 0; }
.faq__item { background: #fff; border: 1px solid var(--line); margin-bottom: 12px; }
.faq__q { position: relative; width: 100%; text-align: left; padding: 20px 56px 20px 22px; font-size: 16px; font-weight: 700; color: var(--ink); background: transparent; border: 0; cursor: pointer; font-family: var(--font-sans); line-height: 1.4; }
.faq__icon { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; }
.faq__answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq__answer--open { max-height: 400px; }
.faq__a { margin: 0; padding: 0 22px 22px; color: var(--ink-soft); line-height: 1.6; }

/* PDP video's (BundleSection) + uitvoeringen (AccessoriesSection) */
.vid__grid { margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
/* Duo (productvideo + Enzo Knol): twee liggende video's naast elkaar. */
.vid__grid--duo { grid-template-columns: 1fr 1.32fr; align-items: center; max-width: 980px; }
/* Duo met een STAANDE zelf-gehoste mp4 (9:16, ACE is 720x1280): één rij met
   beide kaders exact even hoog; smal telefoonkader + 16:9 ernaast,
   bovenkanten uitgelijnd, bijschriften op één lijn. */
.vid__grid--duo:has(.vid__frame--self) { display: flex; justify-content: center; align-items: flex-start; gap: 22px; max-width: 1040px; margin-left: auto; margin-right: auto; }
.vid__grid--duo:has(.vid__frame--self) .vid__card { flex: 0 0 auto; min-width: 0; }
.vid__grid--duo:has(.vid__frame--self) .vid__frame { height: 420px; width: auto; }
.vid__card { margin: 0; }
.vid__frame { position: relative; aspect-ratio: 16 / 9; border: 8px solid #fff; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 12px 30px rgba(29, 29, 27, 0.1); }
.vid__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.vid__frame--self { aspect-ratio: 9 / 16; }
.vid__frame--self video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.vid__cap { margin-top: 12px; font-weight: 600; font-size: 14.5px; color: var(--ink); }
@media (max-width: 860px) {
  .vid__grid { grid-template-columns: 1fr; gap: 18px; max-width: 540px; margin-left: auto; margin-right: auto; }
  .vid__grid--duo:has(.vid__frame--self) { flex-direction: column; align-items: center; }
  .vid__grid--duo:has(.vid__frame--self) .vid__frame { height: auto; width: 100%; }
  .vid__grid--duo:has(.vid__frame--self) .vid__frame--self { width: auto; height: min(72vh, 480px); }
}
.mdl__grid { margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mdl__card { background: transparent; border: 1px solid rgba(29, 29, 27, 0.12); border-radius: 18px; box-shadow: 0 6px 18px rgba(29, 29, 27, 0.06); padding: 16px 14px 22px; text-align: center; }
.mdl__media { aspect-ratio: 1 / 1; background: transparent; border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 18px; }
.mdl__media img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.mdl__name { margin: 16px 0 0; font-size: 20px; }
.mdl__price { margin: 4px 0 0; font-size: 16px; font-weight: 700; color: var(--green); }
.mdl__blurb { margin: 8px 16px 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }
.mdl__video { margin: 34px auto 0; max-width: 860px; }
.mdl__frame { position: relative; aspect-ratio: 16 / 9; border: 8px solid #fff; border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 16px 36px rgba(29, 29, 27, 0.12); }
.mdl__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 760px) { .mdl__grid { grid-template-columns: 1fr; gap: 18px; max-width: 420px; margin-left: auto; margin-right: auto; } }

/* WooCommerce clearfix-pseudo's worden grid-items → lege cellen; uitzetten */
.woocommerce ul.products::before, .woocommerce ul.products::after,
ul.products::before, ul.products::after { content: none !important; display: none !important; }

/* RelatedSection "Andere flipperkasten" 1:1 met localhost (rel__card scroller) */
.rel__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.rel__arrows { display: flex; gap: 10px; }
.rel__arrow { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.15s; }
.rel__arrow:hover { border-color: var(--green); }
.rel__scroller { gap: 16px; padding-bottom: 4px; }
/* Zelfde kaartopbouw als op de categoriepagina's: merk klein, naam prominent,
   prijs incl./excl. btw. */
.rel__card { flex: 0 0 238px; display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--white); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; }
.rel__card:hover { border-color: #c9d3c0; box-shadow: 0 10px 24px rgba(29, 29, 27, 0.07); }
/* zelfde inkadering als de categoriekaart (.pc__media): absoluut gepositioneerde
   img binnen een echt vierkant, anders blaast een portret-afbeelding via
   height:100% + min-height:auto de mediahoogte op en steekt het beeld uit de kaart. */
.rel__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.rel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10px; mix-blend-mode: multiply; }
.rel__body { padding: 13px 14px 15px; display: flex; flex-direction: column; flex: 1; }
.rel__brand { font-size: 12px; color: var(--ink-soft); min-height: 16px; }
.rel__name { margin: 3px 0 0; font-size: 16px; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.3em); }
.rel__price { margin-top: 10px; font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 900; font-size: 18px; color: var(--ink); letter-spacing: -0.015em; }
.rel__price .ppvat { column-gap: 0.45em; }
.rel__dims { margin-top: 10px; display: flex; gap: 8px; }
.rel__chip { display: inline-flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, 0.5); border: 1px solid var(--line-soft); padding: 3px 8px; font-size: 12px; color: var(--ink-soft); }
@media (max-width: 700px) { .rel__arrows { display: none; } }
@media (max-width: 560px) { .rel__card { flex: 0 0 200px; } }

/* ===========================================================
   Winkelwagen (/winkelwagen/) — classic WooCommerce cart, brand-stijl
   =========================================================== */
/* Alle bedragen (winkelwagen, mini-cart, afrekenen, bevestiging) tabulair uitlijnen */
.shop_table .product-price, .shop_table .product-subtotal, .cart_totals td,
.cartx__lineamt, .cartx__summono, .cartx__cross-price,
.woocommerce-mini-cart__total .amount, .mcart__rowline, .mcart__subamt,
.woocommerce-checkout #order_review td, .woocommerce-order ul.woocommerce-order-overview li strong,
.wl-count, .wl-card__price, .tx__ordernr strong {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -0.01em;
}
.woocommerce-cart .entry-header, .woocommerce-cart .page-title { display: none; }
.woocommerce-cart .woocommerce { max-width: 1120px; margin: 0 auto; padding: 40px 24px 64px; }
.woocommerce-cart h1.ph__pagetitle, .pp-cart-title { font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 900; font-size: 32px; color: var(--ink); margin: 0 0 24px; }
.woocommerce-cart .woocommerce-cart-form { display: block; }
table.shop_table.cart { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
table.shop_table.cart thead th { text-align: left; font-family: var(--font-sans), sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--green-tint); }
table.shop_table.cart td { padding: 18px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--ink); }
table.shop_table.cart tr:last-child td { border-bottom: 0; }
.shop_table .product-thumbnail img { width: 72px; height: 72px; object-fit: contain; border-radius: 10px; background: var(--green-tint); padding: 6px; }
.shop_table .product-name a { color: var(--ink); font-weight: 700; text-decoration: none; }
.shop_table .product-name a:hover { color: var(--green); }
.shop_table .product-price, .shop_table .product-subtotal { font-family: var(--font-mono, monospace); font-weight: 600; }
.shop_table td.product-remove a.remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: var(--green-faint); color: var(--green) !important; font-size: 18px; line-height: 1; text-decoration: none; transition: background 0.15s, color 0.15s; }
.shop_table td.product-remove a.remove:hover { background: #e23b3b; color: #fff !important; }
.shop_table .quantity input.qty { width: 64px; height: 40px; text-align: center; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
.shop_table .actions { padding: 18px; background: var(--offwhite); }
.shop_table .actions .coupon { display: inline-flex; gap: 8px; }
.shop_table .actions .coupon #coupon_code { height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; min-width: 180px; }
.woocommerce-cart .button, .woocommerce-cart .wc-proceed-to-checkout .checkout-button { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border-radius: 999px; font-weight: 700; font-family: var(--font-sans), sans-serif; background: var(--green); color: #fff !important; border: 0; cursor: pointer; transition: background 0.15s; text-decoration: none; }
.woocommerce-cart .button:hover, .woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover { background: var(--green-dark); }
.woocommerce-cart .actions .button[name="update_cart"] { background: #fff; color: var(--ink) !important; border: 1px solid var(--line); margin-left: 8px; }
.woocommerce-cart .actions .button[name="update_cart"]:hover { border-color: var(--green); color: var(--green) !important; }
.cart-collaterals { display: flex; justify-content: flex-end; margin-top: 28px; }
.cart_totals { width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; box-shadow: 0 8px 24px rgba(29,29,27,0.05); }
.cart_totals h2 { font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 900; font-size: 20px; color: var(--ink); margin: 0 0 14px; }
.cart_totals table { width: 100%; }
.cart_totals th { text-align: left; font-weight: 600; color: var(--ink-soft); padding: 10px 0; border-top: 1px solid var(--line); }
.cart_totals td { text-align: right; font-family: var(--font-mono, monospace); font-weight: 700; padding: 10px 0; border-top: 1px solid var(--line); }
.cart_totals .order-total th, .cart_totals .order-total td { font-size: 18px; color: var(--ink); }
.wc-proceed-to-checkout { margin-top: 16px; }
.wc-proceed-to-checkout .checkout-button { width: 100%; height: 50px; font-size: 16px; }
.cart-empty.woocommerce-info { background: var(--green-tint); border: 1px solid var(--line); border-radius: 16px; padding: 28px; text-align: center; font-size: 17px; color: var(--ink); }
.woocommerce-cart .return-to-shop { text-align: center; margin-top: 20px; }
.woocommerce-cart .return-to-shop .button { background: var(--green); }
@media (max-width: 720px) { table.shop_table.cart thead { display: none; } .shop_table .product-thumbnail { display: none; } .cart-collaterals { justify-content: stretch; } .cart_totals { max-width: none; } }
/* checkout-knop forceren naar merkgroen (WooCommerce alt-default is paars) */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce a.button.alt.checkout-button { background: var(--green) !important; color: #fff !important; border: 0 !important; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: var(--green-dark) !important; }

/* ===========================================================
   Premium winkelwagen (custom cart.php)
   =========================================================== */
.cartx { display: grid; grid-template-columns: minmax(0,1fr) 384px; gap: 30px; align-items: start; max-width: 1160px; margin: 0 auto; padding: 30px 24px 80px; }
.cartx__items { display: flex; flex-direction: column; gap: 14px; }
.cartx__item { display: grid; grid-template-columns: 104px minmax(0,1fr) auto auto; gap: 20px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px 20px 16px 16px; transition: box-shadow 0.18s, transform 0.18s; }
.cartx__item:hover { box-shadow: 0 12px 28px rgba(29,29,27,0.07); }
.cartx__thumb { width: 104px; height: 104px; border-radius: 14px; background: var(--green-tint); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.cartx__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 10px; mix-blend-mode: multiply; }
.cartx__info { min-width: 0; }
.cartx__name { display: block; font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 800; font-size: 18px; line-height: 1.25; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.cartx__name:hover { color: var(--green); }
.cartx__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 7px 0 10px; font-size: 13px; color: var(--ink-soft); }
.cartx__cond { display: inline-flex; align-items: center; gap: 5px; }
.cartx__cond svg { color: var(--green); }
.cartx__remove { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-soft); text-decoration: none; background: none; border: 0; cursor: pointer; padding: 0; transition: color 0.15s; }
.cartx__remove:hover { color: #d2382f; }
.cartx__qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: #fff; height: 44px; }
.cartx__step { width: 40px; height: 100%; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--ink); cursor: pointer; transition: background 0.12s, color 0.12s; }
.cartx__step:hover { background: var(--green-faint); color: var(--green); }
.cartx__qtyinput { width: 42px; height: 100%; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; font-weight: 700; color: var(--ink); -moz-appearance: textfield; background: none; }
.cartx__qtyinput::-webkit-outer-spin-button, .cartx__qtyinput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cartx__line { text-align: right; min-width: 92px; }
.cartx__lineamt { display: block; font-family: var(--font-mono, monospace); font-weight: 800; font-size: 18px; color: var(--ink); white-space: nowrap; }
.cartx__each { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.cartx__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.cartx__coupon { display: inline-flex; gap: 8px; }
.cartx__couponinput { height: 46px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; min-width: 190px; background: #fff; color: var(--ink); }
.cartx__couponinput:focus { outline: none; border-color: var(--green); }
.cartx__couponbtn { height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 700; color: var(--ink); cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.cartx__couponbtn:hover { border-color: var(--green); color: var(--green); }
.cartx__continue { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink-soft); text-decoration: none; }
.cartx__continue:hover { color: var(--green); }
.cartx__continue svg { transition: transform 0.15s; }
.cartx__continue:hover svg { transform: translateX(-3px); }
.cartx__update { display: none; }

.cartx__summary { position: sticky; top: 110px; }
.cartx__summary-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 24px 24px 26px; box-shadow: 0 14px 36px rgba(29,29,27,0.06); }
.cartx__summary-title { font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 900; font-size: 22px; color: var(--ink); margin: 0 0 16px; }
.cartx__sumrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; font-size: 15px; color: var(--ink); border-top: 1px solid var(--line); }
.cartx__sumrow:first-of-type { border-top: 0; }
.cartx__summono { font-family: var(--font-mono, monospace); font-weight: 700; }
.cartx__free { color: var(--green); font-weight: 700; }
.cartx__sumrow--coupon { color: var(--green); }
.cartx__sumrow--total { margin-top: 4px; padding-top: 14px; border-top: 2px solid var(--ink); font-size: 18px; font-weight: 800; }
.cartx__sumrow--total .cartx__summono { font-size: 20px; }
.cartx__checkout { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 54px; margin-top: 18px; border-radius: 999px; background: var(--green); color: #fff; font-weight: 800; font-size: 16.5px; text-decoration: none; transition: background 0.15s, transform 0.15s; }
.cartx__checkout:hover { background: var(--green-dark); transform: translateY(-2px); }
.cartx__usps { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 13px; }
.cartx__usps li { display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.cartx__usps svg { color: var(--green); flex-shrink: 0; margin-top: 1px; }
.cartx__usps b { color: var(--ink); font-weight: 700; }
.cartx__pay { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.cartx__pay > span { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); font-weight: 700; }
.cartx__paymethods { margin-top: 6px; font-size: 13px; color: var(--ink-soft); }

/* lege staat */
.cartx-empty { max-width: 560px; margin: 0 auto; padding: 56px 24px 80px; text-align: center; }
.cartx-empty__icon { width: 78px; height: 78px; margin: 0 auto 20px; border-radius: 999px; background: var(--green-tint); display: flex; align-items: center; justify-content: center; color: var(--green); }
.cartx-empty__title { font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 900; font-size: 28px; color: var(--ink); margin: 0 0 10px; }
.cartx-empty__sub { color: var(--ink-soft); line-height: 1.6; margin: 0 auto 26px; max-width: 420px; }
.cartx-empty__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cartx-empty__usps { list-style: none; margin: 34px 0 0; padding: 0; display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.cartx-empty__usps li { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-soft); }
.cartx-empty__usps svg { color: var(--green); }

@media (max-width: 900px) {
  .cartx { grid-template-columns: 1fr; }
  .cartx__summary { position: static; }
}
@media (max-width: 560px) {
  .cartx__item { grid-template-columns: 76px minmax(0,1fr); grid-template-areas: "thumb info" "qty line"; gap: 12px 14px; }
  .cartx__thumb { grid-area: thumb; width: 76px; height: 76px; }
  .cartx__info { grid-area: info; }
  .cartx__qty { grid-area: qty; }
  .cartx__line { grid-area: line; text-align: right; align-self: center; }
}
/* winkelwagen-container: laat .cartx de breedte/padding bepalen */
.woocommerce-cart .woocommerce { max-width: 1160px !important; margin: 0 auto !important; padding: 6px 0 48px !important; }
.woocommerce-cart .woocommerce-message, .woocommerce-cart .woocommerce-info, .woocommerce-cart .woocommerce-error { margin: 0 24px 8px; }

/* Winkelwagen cross-sell: "Maak het compleet" */
.cartx__cross { margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line); }
.cartx__cross-title { font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 900; font-size: 21px; color: var(--ink); margin: 0; }
.cartx__cross-sub { margin: 4px 0 18px; font-size: 14px; color: var(--ink-soft); }
.cartx__cross-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cartx__cross-card { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; transition: box-shadow 0.15s; }
.cartx__cross-card:hover { box-shadow: 0 8px 20px rgba(29,29,27,0.06); }
.cartx__cross-thumb { width: 60px; height: 60px; flex-shrink: 0; border-radius: 11px; background: var(--green-tint); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cartx__cross-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 7px; mix-blend-mode: multiply; }
.cartx__cross-info { min-width: 0; flex: 1; }
.cartx__cross-name { display: block; font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cartx__cross-name:hover { color: var(--green); }
.cartx__cross-price { display: block; margin-top: 3px; font-family: var(--font-mono, monospace); font-weight: 700; font-size: 13.5px; color: var(--ink-soft); }
.cartx__cross-add { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--green); background: var(--green-faint); color: var(--green); font-weight: 700; font-size: 13.5px; text-decoration: none; transition: background 0.15s, color 0.15s; }
.cartx__cross-add:hover { background: var(--green); color: #fff; }
@media (max-width: 560px) { .cartx__cross-grid { grid-template-columns: 1fr; } }

.ph__cta.is-loading { opacity: 0.7; pointer-events: none; }

/* Mini-cart drawer */
.mcart { position: fixed; inset: 0; z-index: 1000; }
.mcart[hidden] { display: none; }
.mcart__overlay { position: absolute; inset: 0; background: rgba(29,29,27,0.42); opacity: 0; transition: opacity 0.3s; }
.mcart.is-open .mcart__overlay { opacity: 1; }
.mcart__panel { position: absolute; top: 0; right: 0; height: 100%; width: 400px; max-width: 92vw; background: #fff; box-shadow: -16px 0 44px rgba(29,29,27,0.16); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.4,0,0.2,1); }
.mcart.is-open .mcart__panel { transform: translateX(0); }
.mcart__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.mcart__title { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 800; font-size: 18px; color: var(--ink); }
.mcart__title svg { color: var(--green); }
.mcart__x { width: 36px; height: 36px; border: 0; background: var(--green-tint); border-radius: 999px; font-size: 22px; line-height: 1; color: var(--ink); cursor: pointer; }
.mcart__x:hover { background: var(--green); color: #fff; }
.mcart__body { flex: 1; overflow-y: auto; padding: 8px 22px 22px; display: flex; flex-direction: column; }
.mcart__body .woocommerce-mini-cart__empty-message { padding: 40px 0; text-align: center; color: var(--ink-soft); }
ul.woocommerce-mini-cart.cart_list { list-style: none; margin: 0; padding: 0; }
ul.cart_list li { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); position: relative; }
ul.cart_list li img { width: 56px !important; height: 56px; object-fit: contain; background: var(--green-tint); border-radius: 10px; padding: 5px; float: none !important; margin: 0 !important; }
ul.cart_list li a:not(.remove) { color: var(--ink); font-weight: 700; font-size: 14px; text-decoration: none; line-height: 1.3; }
ul.cart_list li .quantity { display: block; font-size: 13px; color: var(--ink-soft); font-family: var(--font-mono, monospace); margin-top: 3px; }
ul.cart_list li a.remove { position: static; width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 999px; background: var(--green-faint); color: var(--green) !important; font-size: 15px; }
.woocommerce-mini-cart__total { display: flex; align-items: center; justify-content: space-between; padding: 18px 0 4px; font-size: 16px; font-weight: 800; color: var(--ink); }
.woocommerce-mini-cart__total .amount { font-family: var(--font-mono, monospace); }
.woocommerce-mini-cart__buttons { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 0; padding: 0; }
.woocommerce-mini-cart__buttons a { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 999px; font-weight: 800; text-decoration: none; }
.woocommerce-mini-cart__buttons a.checkout { background: var(--green); color: #fff; order: 1; }
.woocommerce-mini-cart__buttons a.checkout:hover { background: var(--green-dark); }
.woocommerce-mini-cart__buttons a:not(.checkout) { border: 1px solid var(--line); color: var(--ink); order: 2; }

/* Afrekenen (/afrekenen/) — brand-stijl, twee koloms */
.woocommerce-checkout .woocommerce { max-width: 1160px !important; margin: 0 auto !important; padding: 8px 24px 56px !important; }
.woocommerce-checkout form.checkout { display: grid; grid-template-columns: minmax(0,1fr) 420px; gap: 32px; align-items: start; }
.woocommerce-checkout #customer_details { min-width: 0; }
.woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { grid-column: 2; }
.woocommerce-checkout #order_review_heading { margin: 0 0 12px; font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 900; font-size: 22px; }
.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }
.woocommerce-checkout h3 { font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 800; font-size: 19px; color: var(--ink); margin: 0 0 14px; }
.woocommerce-checkout .form-row { margin: 0 0 14px; }
.woocommerce-checkout label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.woocommerce-checkout input.input-text, .woocommerce-checkout textarea, .woocommerce-checkout select, .woocommerce-checkout .select2-selection { border: 1px solid var(--line) !important; border-radius: 11px !important; min-height: 46px; padding: 10px 14px !important; background: #fff; }
.woocommerce-checkout #order_review { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; box-shadow: 0 12px 32px rgba(29,29,27,0.06); position: sticky; top: 100px; }
.woocommerce-checkout table.shop_table { border: 0; }
.woocommerce-checkout table.shop_table th, .woocommerce-checkout table.shop_table td { padding: 10px 0; border-top: 1px solid var(--line); }
.woocommerce-checkout #payment { background: var(--offwhite); border-radius: 14px; padding: 6px 16px; margin-top: 12px; }
.woocommerce-checkout #place_order { width: 100%; height: 54px; border-radius: 999px !important; background: var(--green) !important; color: #fff !important; font-weight: 800 !important; font-size: 16.5px !important; margin-top: 10px; }
.woocommerce-checkout #place_order:hover { background: var(--green-dark) !important; }
@media (max-width: 900px) { .woocommerce-checkout form.checkout { grid-template-columns: 1fr; } .woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { grid-column: 1; } .woocommerce-checkout #order_review { position: static; } }

/* Premium mini-cart (custom mini-cart.php) */
.mcart__list { list-style: none; margin: 4px 0 0; padding: 0; }
.mcart__row { display: grid; grid-template-columns: 60px minmax(0,1fr) auto; gap: 13px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); }
.mcart__rowthumb { width: 60px; height: 60px; flex-shrink: 0; border-radius: 12px; background: var(--green-tint); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mcart__rowthumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; mix-blend-mode: multiply; }
.mcart__rowinfo { min-width: 0; }
.mcart__rowname { display: block; font-weight: 700; font-size: 14.5px; line-height: 1.3; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mcart__rowname:hover { color: var(--green); }
.mcart__qtyrow { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.mcart__qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: #fff; height: 34px; flex-shrink: 0; }
.mcart__qstep { width: 30px; height: 100%; border: 0; background: none; font-size: 17px; line-height: 1; color: var(--ink); cursor: pointer; transition: background 0.12s, color 0.12s; }
.mcart__qstep:hover:not(:disabled) { background: var(--green-faint); color: var(--green); }
.mcart__qstep:disabled { opacity: 0.35; cursor: default; }
.mcart__qval { width: 34px; height: 100%; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; font-weight: 700; font-size: 13px; color: var(--ink); background: none; -moz-appearance: textfield; appearance: textfield; }
.mcart__qval::-webkit-outer-spin-button, .mcart__qval::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mcart__each { font-size: 13px; color: var(--ink-soft); font-family: var(--font-mono, monospace); font-variant-numeric: tabular-nums; }
.mcart__rowend { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.mcart__rowline { font-family: var(--font-mono, monospace); font-weight: 800; font-size: 14.5px; color: var(--ink); white-space: nowrap; }
.mcart__rowremove { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: var(--green-faint); color: var(--green) !important; transition: background 0.15s, color 0.15s; }
.mcart__rowremove:hover { background: #d2382f; color: #fff !important; }
.mcart__foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.mcart__sub { display: flex; align-items: center; justify-content: space-between; font-size: 17px; font-weight: 800; color: var(--ink); }
.mcart__subamt { font-family: var(--font-mono, monospace); }
.mcart__ship { display: flex; align-items: center; gap: 8px; margin: 12px 0 16px; font-size: 13px; color: var(--ink-soft); background: var(--green-tint); border-radius: 12px; padding: 11px 13px; }
.mcart__ship svg { color: var(--green); flex-shrink: 0; }
.mcart__checkout { display: flex; align-items: center; justify-content: center; gap: 9px; height: 52px; border-radius: 999px; background: var(--green); color: #fff !important; font-weight: 800; font-size: 16px; text-decoration: none; transition: background 0.15s, transform 0.15s; }
.mcart__checkout:hover { background: var(--green-dark); transform: translateY(-1px); }
.mcart__viewcart { display: flex; align-items: center; justify-content: center; height: 48px; margin-top: 10px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink) !important; font-weight: 700; text-decoration: none; }
.mcart__viewcart:hover { border-color: var(--green); color: var(--green) !important; }
.mcart__empty { text-align: center; padding: 48px 10px; margin: auto 0; }
.mcart__empty-ic { width: 70px; height: 70px; margin: 0 auto 16px; border-radius: 999px; background: var(--green-tint); display: flex; align-items: center; justify-content: center; color: var(--green); }
.mcart__empty-t { font-weight: 700; color: var(--ink); margin: 0 0 18px; }

/* ===== Afrekenen — polish ===== */
.woocommerce-checkout h3#order_review_heading { display: none; }
.woocommerce-checkout .woocommerce-billing-fields h3, .woocommerce-checkout #customer_details h3 { font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 900; font-size: 20px; margin: 0 0 16px; }
.woocommerce-checkout .woocommerce-billing-fields, .woocommerce-checkout .woocommerce-additional-fields, .woocommerce-checkout .woocommerce-account-fields { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px 26px; margin-bottom: 18px; }
.woocommerce-checkout .form-row { margin: 0 0 16px; display: flex; flex-direction: column; }
.woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last { width: 100%; }
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.woocommerce-checkout .form-row-wide, .woocommerce-checkout #billing_country_field, .woocommerce-checkout #billing_address_1_field, .woocommerce-checkout #billing_company_field, .woocommerce-checkout #billing_email_field { grid-column: 1 / -1; }
.woocommerce-checkout label { margin-bottom: 6px; }
.woocommerce-checkout .required { color: var(--green); }
.woocommerce-checkout input.input-text, .woocommerce-checkout textarea, .woocommerce-checkout .select2-container .select2-selection--single { border: 1px solid var(--line) !important; border-radius: 11px !important; min-height: 48px !important; line-height: 46px; padding: 0 14px !important; background: #fff; font-size: 15px; box-shadow: none !important; }
.woocommerce-checkout input.input-text:focus, .woocommerce-checkout textarea:focus { outline: none; border-color: var(--green) !important; }
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; }
.woocommerce-checkout #order_review { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; box-shadow: 0 14px 36px rgba(29,29,27,0.06); position: sticky; top: 100px; }
.woocommerce-checkout #order_review::before { content: "Bestelling"; display: block; font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 900; font-size: 20px; color: var(--ink); margin-bottom: 14px; }
.woocommerce-checkout #order_review table.shop_table { border: 0; width: 100%; }
.woocommerce-checkout #order_review th, .woocommerce-checkout #order_review td { padding: 11px 0; border-top: 1px solid var(--line); text-align: left; font-size: 14.5px; }
.woocommerce-checkout #order_review td { text-align: right; font-family: var(--font-mono, monospace); }
.woocommerce-checkout #order_review .cart_item .product-name { font-family: var(--font-sans), sans-serif; font-weight: 600; color: var(--ink); }
.woocommerce-checkout #order_review .order-total th, .woocommerce-checkout #order_review .order-total td { font-size: 17px; font-weight: 800; border-top: 2px solid var(--ink); }
.woocommerce-checkout #payment { background: var(--offwhite); border-radius: 14px; padding: 4px 18px 10px; margin-top: 14px; }
.woocommerce-checkout #payment ul.payment_methods { border: 0; padding: 12px 0; }
.woocommerce-checkout #payment .place-order { padding: 8px 0 4px; }
.woocommerce-checkout .woocommerce-info, .woocommerce-checkout .woocommerce-error, .woocommerce-checkout .woocommerce-NoticeGroup { border-radius: 14px; border: 1px solid var(--line); background: var(--green-tint); color: var(--ink); padding: 14px 18px; list-style: none; }
.woocommerce-checkout .woocommerce-error { background: #fdeceb; border-color: #f3c6c2; }
/* verzend-rij: toon vriendelijke gratis-melding */
.woocommerce-checkout #order_review .woocommerce-shipping-totals.shipping td { text-align: right; }

/* ===== Bedankt / order-received ===== */
.woocommerce-order { max-width: 760px; margin: 0 auto; padding: 20px 24px 70px; }
.woocommerce-order .woocommerce-notice--success, .woocommerce-thankyou-order-received { background: var(--green-tint); border: 1px solid var(--line); border-radius: 18px; padding: 28px; text-align: center; font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 800; font-size: 22px; color: var(--ink); margin-bottom: 22px; }
.woocommerce-order ul.woocommerce-order-overview { list-style: none; margin: 0 0 24px; padding: 18px 22px; display: flex; flex-wrap: wrap; gap: 18px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.woocommerce-order ul.woocommerce-order-overview li { border: 0 !important; padding: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); font-weight: 700; }
.woocommerce-order ul.woocommerce-order-overview li strong { display: block; margin-top: 4px; font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--ink); font-family: var(--font-mono, monospace); }
.woocommerce-order h2 { font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 900; font-size: 20px; margin: 26px 0 14px; }
.woocommerce-order table.woocommerce-table { width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 16px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.woocommerce-order table.woocommerce-table th, .woocommerce-order table.woocommerce-table td { padding: 13px 18px; border-bottom: 1px solid var(--line); text-align: left; }
.woocommerce-order address { font-style: normal; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 20px; line-height: 1.6; }

/* ===== Afrekenen — labels & knop fix ===== */
.woocommerce-checkout .form-row { position: relative; }
.woocommerce-checkout .form-row label { display: block !important; position: static !important; float: none !important; margin: 0 0 7px !important; padding: 0 !important; font-size: 13px !important; font-weight: 600 !important; color: var(--ink) !important; line-height: 1.3 !important; background: none !important; }
.woocommerce-checkout .woocommerce-input-wrapper { display: block; width: 100%; }
.woocommerce-checkout .select2-container { width: 100% !important; }
.woocommerce-checkout .select2-container--default .select2-selection--single { height: 48px !important; border: 1px solid var(--line) !important; border-radius: 11px !important; }
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 46px !important; padding-left: 14px !important; color: var(--ink) !important; }
.woocommerce-checkout select { height: 48px; border: 1px solid var(--line); border-radius: 11px; padding: 0 14px; background: #fff; width: 100%; }
.woocommerce-checkout input.input-text { line-height: normal !important; }
.woocommerce #place_order, .woocommerce-checkout #place_order, .woocommerce-checkout button#place_order { background: var(--green) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; height: 54px; font-weight: 800 !important; font-size: 16.5px !important; width: 100%; box-shadow: none !important; }
.woocommerce #place_order:hover { background: var(--green-dark) !important; }
.woocommerce-checkout .woocommerce-privacy-policy-text { font-size: 12.5px; color: var(--ink-soft); }

/* Afrekenen — country-label overlap + groene bestelknop (definitief) */
.woocommerce-checkout #billing_country_field, .woocommerce-checkout #shipping_country_field, .woocommerce-checkout #billing_state_field { display: flex; flex-direction: column; }
.woocommerce-checkout #billing_country_field > label, .woocommerce-checkout #shipping_country_field > label { order: -1; margin-bottom: 7px !important; }
.woocommerce-checkout #select2-billing_country-container, .woocommerce-checkout #select2-shipping_country-container { line-height: 46px !important; }
.woocommerce button.button.alt#place_order, .woocommerce #payment #place_order, .woocommerce-page #place_order { background-color: var(--green) !important; color: #fff !important; border: 0 !important; }
.woocommerce button.button.alt#place_order:hover { background-color: var(--green-dark) !important; }

/* Afrekenen — ordervak: tekst in sans, alleen bedragen in mono */
.woocommerce-checkout #order_review td, .woocommerce-checkout #order_review th { font-family: var(--font-sans), sans-serif !important; }
.woocommerce-checkout #order_review td .amount, .woocommerce-checkout #order_review .order-total .amount { font-family: var(--font-mono, monospace) !important; font-weight: 800; }
.woocommerce-checkout #order_review .woocommerce-shipping-totals.shipping td { font-size: 13.5px; font-weight: 700; color: var(--green); line-height: 1.4; }
.woocommerce-checkout #order_review .cart_item td.product-name { font-weight: 600; }
.woocommerce-checkout #order_review .cart_item td.product-total .amount { font-weight: 700; }

/* Afrekenen — dedicated polish (formulier + rechterkant) */
.woocommerce-checkout .woocommerce-billing-fields h3 { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.woocommerce-checkout .form-row { margin-bottom: 15px; }
.woocommerce-checkout input.input-text::placeholder, .woocommerce-checkout textarea::placeholder { color: #b8b5b2; }
.woocommerce-checkout abbr.required { color: var(--green); text-decoration: none; }
/* betaalmethodes */
.woocommerce-checkout ul.payment_methods { list-style: none; margin: 0; padding: 6px 0 0; border: 0; }
.woocommerce-checkout ul.payment_methods li { padding: 4px 0; }
.woocommerce-checkout ul.payment_methods li label { font-weight: 700; color: var(--ink); padding-left: 6px; }
.woocommerce-checkout .payment_box { background: var(--green-tint) !important; border-radius: 12px !important; padding: 13px 15px !important; margin: 10px 0 4px !important; font-size: 13.5px; line-height: 1.5; color: var(--ink) !important; }
.woocommerce-checkout .payment_box::before, .woocommerce-checkout .payment_box::after { display: none !important; }
.woocommerce-checkout .payment_box p { margin: 0; }
.woocommerce-checkout .woocommerce-privacy-policy-text { margin: 14px 0 6px; }
.woocommerce-checkout .woocommerce-privacy-policy-text p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.woocommerce-checkout .woocommerce-privacy-policy-text a { color: var(--green); text-decoration: underline; }
/* ordervak header */
.woocommerce-checkout #order_review table.shop_table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); font-weight: 700; padding-bottom: 8px; }
.woocommerce-checkout #order_review .cart_item td { padding: 14px 0; }
.woocommerce-checkout #payment { margin-top: 16px; }

/* Besteloverzicht productfoto */
/* (.pp-corev-opmaak verviel met de eigen review-order.php; zie .cox hierboven) */

/* ===================== Mijn account (WooCommerce) ===================== */
/* container voor de accountpagina: zonder deze regel liep de navigatiekolom
   buiten de pagina (de oude regel sneuvelde bij het opruimen) */
.woocommerce-account .home-canvas .woocommerce { max-width: 1280px; margin: 0 auto; padding: 0 24px 44px; }
@media (max-width: 560px) { .woocommerce-account .home-canvas .woocommerce { padding: 0 16px 32px; } }

/* Account-opmaak staat nu volledig bij de eigen myaccount-templates
   (zie ".acc" / ".accwrap" verderop). De oude losse login- en
   navigatieregels hierboven zijn vervallen; ze zetten het formulier in een
   tweede kaartje binnen de kaart. */
.woocommerce-account .woocommerce > h2:first-child { display: none; }
.woocommerce-MyAccount-content p { color: var(--ink); line-height: 1.6; }
.woocommerce-MyAccount-content a:not(.button):not(.ps-btn):not(.accdash__tile):not(.accdash__orderlink) { color: var(--green); font-weight: 600; }

/* ===================== Verlanglijst ===================== */
.pc-li { position: relative; }
.pc__wish { position: absolute; top: 12px; right: 12px; z-index: 3; width: 38px; height: 38px; border-radius: 999px; border: 0;
  background: rgba(255,255,255,0.92); color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 2px 8px rgba(29,29,27,0.12); transition: color 0.15s, background 0.15s, transform 0.12s; }
.pc__wish:hover { color: #e23b3b; background: #fff; transform: scale(1.08); }
.pc__wish.is-on { color: #e23b3b; }
.pc__wish.is-on svg { fill: #e23b3b; }
.wl-wrap { max-width: 1180px; }
.wl-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 26px; }
.wl-title { font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 800; font-size: 30px; margin: 6px 0 8px; }
.wl-intro { color: var(--ink-soft); max-width: 60ch; margin: 0; }
.wl-count { font-family: var(--font-mono, monospace); font-weight: 700; color: var(--green); white-space: nowrap; }
.wl-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
.wl-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.18s, transform 0.18s; }
.wl-card:hover { box-shadow: 0 16px 34px rgba(29,29,27,0.10); transform: translateY(-3px); }
.wl-card__remove { position: absolute; top: 10px; right: 10px; z-index: 2; width: 30px; height: 30px; border-radius: 999px; border: 0; background: rgba(255,255,255,0.92); color: var(--ink-soft); font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(29,29,27,0.12); transition: background 0.15s, color 0.15s; }
.wl-card__remove:hover { background: #e23b3b; color: #fff; }
/* hele kast in beeld: staande render in een wat hoger vlak, contain zodat er
   niets wordt afgesneden */
.wl-card__media { display: block; aspect-ratio: 4 / 5; background: var(--green-tint); }
.wl-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 16px; mix-blend-mode: multiply; }
.wl-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.wl-card__name { font-weight: 700; color: var(--ink); text-decoration: none; line-height: 1.3; }
.wl-card__name:hover { color: var(--green); }
.wl-card__price { font-family: var(--font-mono, monospace); font-weight: 700; color: var(--ink); }
/* zelfde dubbele btw-weergave als op de productkaarten */
.wl-card__price .ppvat { column-gap: 0.45em; }
.wl-card__price .askprice { font-family: var(--font-sans), sans-serif; font-weight: 700; color: var(--green); }
.wl-card__btn { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; height: 42px; border-radius: 999px; background: var(--green-faint); color: var(--green); font-weight: 700; font-size: 14px; text-decoration: none; transition: background 0.15s, color 0.15s; }
.wl-card__btn:hover { background: var(--green); color: #fff; }
.wl-empty { text-align: center; max-width: 460px; margin: 30px auto 10px; }
.wl-empty__ic { display: inline-flex; width: 72px; height: 72px; border-radius: 999px; background: var(--green-faint); color: var(--green); align-items: center; justify-content: center; margin-bottom: 8px; }
.wl-empty__t { font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 800; font-size: 22px; margin: 8px 0; }
.wl-empty__p { color: var(--ink-soft); margin-bottom: 18px; }
@media (max-width: 1000px) { .wl-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 720px) { .wl-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .wl-head { flex-direction: column; align-items: flex-start; } }

/* ===================== Nieuwsbrief ===================== */
.nl-wrap { max-width: 760px; }
.nl-form { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px 28px; box-shadow: 0 12px 32px rgba(29,29,27,0.06); }
.nl-form__label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 8px; color: var(--ink); }
.nl-form__row { display: flex; gap: 10px; }
.nl-form__row input { flex: 1; height: 50px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; font-size: 15px; font-family: var(--font-sans), sans-serif; color: var(--ink); }
.nl-form__row input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-faint); }
.nl-form__row .ps-btn { height: 50px; white-space: nowrap; }
.nl-form__small { margin: 12px 0 0; font-size: 13px; color: var(--ink-soft); }
.nl-form__small a { color: var(--green); }
.nl-perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
.nl-perk { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.nl-perk__ic { display: inline-flex; width: 42px; height: 42px; border-radius: 12px; background: var(--green-faint); color: var(--green); align-items: center; justify-content: center; margin-bottom: 10px; }
.nl-perk__t { font-weight: 700; font-size: 15.5px; margin: 0 0 6px; }
.nl-perk__p { color: var(--ink-soft); font-size: 14px; margin: 0; line-height: 1.5; }
@media (max-width: 720px) { .nl-perks { grid-template-columns: 1fr; } .nl-form__row { flex-direction: column; } .nl-form__row .ps-btn { width: 100%; } }

/* ===================== Info-aanvraag modal (hartje verlanglijst) ===================== */
.lead { position: fixed; inset: 0; z-index: 1200; }
.lead[hidden] { display: none; }
.lead__overlay { position: absolute; inset: 0; background: rgba(29,29,27,0.45); opacity: 0; transition: opacity 0.2s; }
.lead.is-open .lead__overlay { opacity: 1; }
.lead__panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%); width: min(440px, calc(100vw - 32px));
  background: #fff; border-radius: 20px; padding: 26px 26px 24px; box-shadow: 0 30px 80px rgba(29,29,27,0.28);
  opacity: 0; transition: opacity 0.2s, transform 0.2s; }
.lead.is-open .lead__panel { opacity: 1; transform: translate(-50%, -50%); }
.lead__x { position: absolute; top: 12px; right: 16px; border: 0; background: transparent; font-size: 26px; line-height: 1; color: var(--ink-soft); cursor: pointer; }
.lead__x:hover { color: var(--ink); }
.lead__head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; padding-right: 28px; }
.lead__thumb { flex-shrink: 0; width: 62px; height: 62px; border-radius: 12px; background: var(--green-tint); border: 1px solid rgba(98,123,71,0.16); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lead__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; mix-blend-mode: multiply; }
.lead__saved { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: 0.04em; }
.lead__saved svg { fill: var(--green); }
.lead__title { font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 800; font-size: 18.5px; margin: 4px 0 0; line-height: 1.22; }
.lead__txt { color: var(--ink-soft); font-size: 14px; line-height: 1.55; margin: 0 0 18px; }
.lead__form { display: flex; flex-direction: column; gap: 10px; }
.lead__form input { height: 48px; padding: 0 15px; border: 1px solid var(--line); border-radius: 12px; font-size: 15px; font-family: var(--font-sans), sans-serif; color: var(--ink); }
.lead__form input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-faint); }
.lead__form .ps-btn { height: 48px; justify-content: center; }
.lead__err { color: #c0392b; font-size: 13.5px; margin: 8px 0 0; }
.lead__skip { display: block; margin: 12px auto 0; background: transparent; border: 0; color: var(--ink-soft); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: underline; }
.lead__skip:hover { color: var(--ink); }
.lead__priv { font-size: 12px; color: var(--ink-soft); margin: 14px 0 0; text-align: center; }
.lead__priv a { color: var(--green); }
.lead__done { text-align: center; padding: 6px 0 2px; }
.lead__done-ic { display: inline-flex; width: 60px; height: 60px; border-radius: 999px; background: var(--green-faint); color: var(--green); align-items: center; justify-content: center; margin-bottom: 10px; }
.lead__done-t { font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 800; font-size: 20px; margin: 4px 0 8px; }
.lead__done-p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; margin: 0 0 18px; }
.lead__done .ps-btn { min-width: 140px; }
@media (prefers-reduced-motion: reduce) { .lead__overlay, .lead__panel { transition: none; } }

/* ===================== 404 ===================== */
.nf__hero { position: relative; overflow: hidden; border-radius: 28px; padding: clamp(30px, 4.5vw, 60px); display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 36px; align-items: center; background: radial-gradient(130% 150% at 0% 0%, #7d975c 0%, var(--green) 46%, #41552d 100%); color: #fff; box-shadow: 0 30px 70px rgba(40,55,25,0.22); }
.nf__eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.16); color: #fff; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; padding: 7px 14px; border-radius: 999px; }
.nf__eyebrow svg { stroke: #fff; }
.nf__title { font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 900; font-size: clamp(34px, 5vw, 54px); line-height: 1.04; margin: 18px 0 14px; color: #fff; letter-spacing: -0.02em; }
.nf__text { color: rgba(255,255,255,0.9); font-size: 16.5px; line-height: 1.6; max-width: 42ch; margin: 0 0 26px; }
.nf__search { position: relative; display: flex; gap: 10px; max-width: 440px; margin: 0 0 22px; }
.nf__search-ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; z-index: 1; }
.nf__search input { flex: 1; height: 52px; padding: 0 16px 0 44px; border: 0; border-radius: 999px; font-size: 15px; font-family: var(--font-sans), sans-serif; color: var(--ink); background: #fff; min-width: 0; }
.nf__search input:focus { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,0.55); }
.nf__search button { height: 52px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; font-size: 14.5px; cursor: pointer; white-space: nowrap; transition: background 0.15s; }
.nf__search button:hover { background: #000; }
.nf__links { display: flex; flex-wrap: wrap; gap: 12px; }
.nf__btn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 700; font-size: 14.5px; text-decoration: none; transition: transform 0.12s, background 0.15s; }
.nf__btn--white { background: #fff; color: var(--green-dark); }
.nf__btn--white:hover { transform: translateY(-2px); }
.nf__btn--ghost { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.42); }
.nf__btn--ghost:hover { background: rgba(255,255,255,0.22); }
.nf__hero-art { position: relative; min-height: 320px; display: flex; align-items: center; justify-content: center; }
.nf__bignum { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 900; font-size: clamp(180px, 26vw, 330px); line-height: 1; color: rgba(255,255,255,0.13); z-index: 0; letter-spacing: -0.04em; user-select: none; }
.nf__hero-art img { position: relative; z-index: 1; max-height: 380px; max-width: 88%; object-fit: contain; filter: drop-shadow(0 26px 44px rgba(15,25,8,0.5)); }
.nf__suggest { margin-top: 54px; }
.nf__suggest-title { font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 800; font-size: 22px; margin: 0 0 24px; text-align: center; }
.nl-success { font-weight: 700; font-size: 15px; margin: 6px 0 0; }
@media (max-width: 900px) {
  .nf__hero { grid-template-columns: 1fr; text-align: center; padding: 34px 24px 38px; }
  .nf__hero-art { order: -1; min-height: 220px; }
  .nf__bignum { font-size: 190px; }
  .nf__eyebrow, .nf__title, .nf__text { margin-left: auto; margin-right: auto; }
  .nf__search { max-width: 100%; }
  .nf__links { justify-content: center; }
}
@media (max-width: 520px) { .nf__search { flex-direction: column; } .nf__search button { width: 100%; } .nf__search-ic { top: 26px; } }

/* =====================================================================
   MOBILE UX PASS (20 juni) — swipe-carousels, filter-drawer, compact
   2-koloms grid, vol-brede checkout-velden, swipebare PDP-galerij.
   Bewust achteraan zodat het eerdere regels overschrijft (source-order).
   ===================================================================== */

/* --- Homepage "Populaire flipperkasten": horizontale swipe-carousel --- */
@media (max-width: 760px) {
  .hf__grid {
    display: flex !important; grid-template-columns: none !important;
    gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 24px -20px 0; padding: 4px 20px 12px; scroll-padding-left: 20px;
  }
  .hf__grid::-webkit-scrollbar { display: none; }
  .hf__grid > .pc { flex: 0 0 74%; scroll-snap-align: start; }
  .hf__head { align-items: center; }
}
@media (max-width: 420px) { .hf__grid > .pc { flex: 0 0 82%; } }

/* --- Categorie: compact 2-koloms grid op mobiel (was 1-koloms) --- */
@media (max-width: 560px) {
  ul.products.cat__grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px !important; }
  .cat__grid .cat__banner-li { grid-column: 1 / -1; }
  ul.products .pc__body, .cat__grid .pc__body { padding: 12px 13px 14px; }
  ul.products .pc__brand, .cat__grid .pc__brand { font-size: 11px; }
  ul.products .pc__name, .cat__grid .pc__name { font-size: 14.5px; line-height: 1.3; min-height: calc(2 * 1.3em); }
  ul.products .pc__price, .cat__grid .pc__price { font-size: 16px; }
  ul.products .pc__specs, .cat__grid .pc__specs { margin-top: 11px; padding-top: 10px; gap: 10px; flex-wrap: wrap; }
  ul.products .pc__spec, .cat__grid .pc__spec { font-size: 11px; gap: 4px; }
}

/* --- Quick-filter pills: horizontaal swipen i.p.v. wrappen op mobiel --- */
@media (max-width: 760px) {
  .cat__pills {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; margin-left: -20px; margin-right: -20px;
    padding: 0 20px 4px; scroll-snap-type: x proximity;
  }
  .cat__pills::-webkit-scrollbar { display: none; }
  .cat__pill { flex: 0 0 auto; scroll-snap-align: start; min-height: 42px; }
}

/* --- Categorie filter-drawer op mobiel --- */
.cat__filtertoggle, .cat__filtersclose, .cat__filtersdone, .cat__filteroverlay { display: none; }
@media (max-width: 820px) {
  .cat__bar { flex-wrap: wrap; gap: 12px; }
  .cat__count { order: 3; width: 100%; font-size: 13px; }
  .cat__filtertoggle {
    display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; min-height: 44px;
    border: 1px solid var(--line); border-radius: 999px; background: #fff;
    font-weight: 700; font-size: 14px; color: var(--ink); cursor: pointer;
  }
  .cat__filtertoggle svg { color: var(--green); }
  .cat__filtertoggle .cat__filtercount {
    background: var(--green); color: #fff; font-size: 11px; min-width: 18px; height: 18px;
    border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
  }
  .cat__filteroverlay {
    display: block; position: fixed; inset: 0; background: rgba(20,20,18,.45);
    opacity: 0; visibility: hidden; transition: opacity .25s ease; z-index: 1200;
  }
  .cat.is-filters-open .cat__filteroverlay { opacity: 1; visibility: visible; }
  .cat__filters {
    position: fixed !important; top: 0; left: 0; bottom: 0; width: 88%; max-width: 360px;
    margin: 0; border-radius: 0 20px 20px 0; transform: translateX(-104%);
    transition: transform .3s ease; z-index: 1201; overflow-y: auto;
    padding: 8px 20px 90px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
  }
  .cat.is-filters-open .cat__filters { transform: translateX(0); }
  .cat__filters-head { position: sticky; top: 0; background: #fff; z-index: 2; padding-top: 16px; }
  .cat__filtersclose {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; color: var(--ink);
  }
  .cat__filtersdone {
    display: block; position: sticky; bottom: 0; margin: 18px -20px -90px;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line);
  }
  .cat__filtersdone .ps-btn { width: 100%; }
}

/* --- Checkout: invoervelden altijd vol-breed (voor/achternaam waren te smal:
   de .form-row stond op display:flex/float en kromp naar ~64px binnen de
   grid-track). Forceer de rijen tot vol-brede blokken + velden 100%. --- */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper > .form-row,
.woocommerce-checkout #customer_details .form-row {
  display: block !important; width: 100% !important; float: none !important; min-width: 0;
}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .woocommerce-input-wrapper,
.woocommerce-checkout .select2-container { width: 100% !important; box-sizing: border-box; }
@media (max-width: 560px) {
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr !important; }
}

/* --- PDP: hoofdafbeelding swipebaar op mobiel + scroll-hint --- */
@media (max-width: 900px) {
  .ph__stage { touch-action: pan-y; }
  .ph__models { scroll-padding-left: 4px; }
}

/* --- Algemene mobiele tap-target/comfort --- */
@media (max-width: 760px) {
  .ps-scroller { scroll-padding-left: 0; }
}

/* --- Nieuwsbrief-promo (homepage/categorie): knop niet gedrongen tegen het
   veld op mobiel; stapelen tot vol-breed veld + vol-brede knop --- */
@media (max-width: 560px) {
  .promo__form {
    flex-direction: column; gap: 10px; max-width: 100%;
    overflow: visible; box-shadow: none; border-radius: 0;
  }
  /* flex:none -> anders collapse't het veld in de kolom naar ~21px en matcht
     het niet met de knop. Veld en knop nu identiek 56px hoog + zelfde radius. */
  .promo__form input { flex: none; width: 100%; height: 56px; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,.14); }
  .promo__submit { flex: none; width: 100%; height: 56px; border-radius: 12px; letter-spacing: 1.5px; padding: 0 22px; }
}

/* USP-ticker keyframe (mobiel) — content is verdubbeld in JS, dus -50% loopt naadloos */
@keyframes uspMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Hamburger groter op mobiel — achteraan zodat het de basis .ps-burger span
   (width:22px, die later in de bron staat) overschrijft */
@media (max-width: 720px) {
  .ps-burger { width: 46px; height: 46px; gap: 6px; }
  .ps-burger span { width: 28px; height: 2.5px; }
}

/* ===== PDP/promo mobiele verfijning (20 juni) ===== */

/* Totaalprijs: zelfde donkere kleur als de rest (was blauw door iOS
   telefoon-detectie; meta telephone=no + expliciete kleur) */
.ph__totalrow, .ph__totallabel, .ph__totalamt, .ph__totalamt * { color: var(--ink) !important; }
.ph__totalchev { color: var(--ink); }

/* Videoblokken leuker/beter: caption als gecentreerd pill-label met play-icoon,
   frame met subtiele hover-lift */
.vid__card { display: flex; flex-direction: column; align-items: center; }
.vid__frame { width: 100%; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.vid__card:hover .vid__frame { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(29, 29, 27, 0.16); }
.vid__cap {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 15px; font-weight: 700; font-size: 13.5px; color: var(--ink);
  box-shadow: 0 4px 12px rgba(29, 29, 27, 0.06);
}
.vid__cap svg { color: var(--green); flex-shrink: 0; }

/* "Andere flipperkasten": gebruiken nu transparante PNG's (witte achtergrond
   server-side weggeknipt) i.p.v. mix-blend-mode -> geen wit randje op iOS,
   machine zweeft schoon op de sectie-tint, geen blend nodig. */

/* Nieuwsbrief-promo compacter op mobiel */
@media (max-width: 560px) {
  .promo { padding: 30px 0 34px; }
  .promo__inner { padding: 26px 20px; gap: 16px; }
  .promo__media img { aspect-ratio: auto; max-height: 190px; width: auto; margin: 0 auto; animation: none; }
  .promo__title { font-size: 25px; line-height: 1.14; }
  .promo__intro { font-size: 14px; margin-top: 8px; }
  .promo__bullets { margin-top: 18px; gap: 8px 24px; }
}

/* ===== Productkaart-badges in de body (20 juni) =====
   Badges (Nieuw/Limited/Bestseller) stonden half over de machine op de foto;
   nu opaak in de body boven het merk, met kleur per type. */
.pc__badge {
  align-self: flex-start; display: inline-flex; align-items: center;
  background: var(--green); color: #fff; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em; line-height: 1.4;
  padding: 3px 9px; border-radius: 999px; margin-bottom: 8px;
}
.pc__badge--limited, .pc__badge--limited-edition { background: var(--amber, #c8901a); }
.pc__badge--bestseller { background: var(--orange); }

/* "Bekijk hieronder meer flipperkasten" — alleen mobiel, onder het adviesblok */
.cat__morehint { display: none; }
@media (max-width: 760px) {
  .cat__morehint {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 16px 0 2px; font-weight: 700; font-size: 13.5px; color: var(--green-dark);
  }
  .cat__morehint svg { color: var(--green); }
}

/* Lange flipperkast-titels op mobiel: kleiner lettertype + tot 3 regels, zodat ook
   de allerlangste titel ("The Walking Dead Remastered Limited Edition") volledig
   wordt getoond en niet halverwege wordt afgekapt. !important + hoge specificiteit
   want WooCommerce's eigen .woocommerce ul.products li.product-regel zette 'm
   anders terug op 16px. */
@media (max-width: 560px) {
  .woocommerce ul.products.cat__grid li.product .pc__name,
  ul.products.cat__grid .pc__name,
  .cat__grid .pc__name {
    font-size: 12.5px !important; line-height: 1.3 !important; letter-spacing: -0.015em !important;
    min-height: calc(2 * 1.3em); -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    display: -webkit-box; overflow: hidden;
  }
}

/* ===== Bestelling ontvangen / bedankt — premium maatwerk (20 juni) ===== */
.woocommerce-order.tx { max-width: 820px; margin: 0 auto; padding: 26px 24px 80px; }
.tx__hero { text-align: center; background: linear-gradient(180deg, var(--green-tint) 0%, #fff 100%); border: 1px solid var(--line); border-radius: 26px; padding: 44px 32px 38px; margin-bottom: 26px; }
.tx__badge { width: 78px; height: 78px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.tx__badge--ok { background: var(--green); color: #fff; box-shadow: 0 10px 26px rgba(98, 123, 71, 0.34); }
.tx__badge--warn { background: var(--amber, #c8901a); color: #fff; }
.tx__eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; font-weight: 800; color: var(--green-dark); }
.tx__title { font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 900; font-size: 38px; line-height: 1.08; margin: 8px 0 0; color: var(--ink); }
.tx__sub { max-width: 52ch; margin: 14px auto 0; color: var(--ink-soft); font-size: 16px; line-height: 1.6; }
.tx__ordernr { display: inline-block; margin-top: 22px; padding: 9px 18px; background: #fff; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; color: var(--ink-soft); }
.tx__ordernr strong { color: var(--ink); font-family: var(--font-mono, monospace); }
.tx__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 24px 0 0; }

.tx__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 30px; }
.tx__step { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px 20px; }
.tx__step-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--green-tint); color: var(--green-dark); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.tx__step-title { font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 800; font-size: 16px; margin: 0 0 6px; color: var(--ink); }
.tx__step-body { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }

.tx__help { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; background: var(--green-tint); border: 1px solid var(--line); border-radius: 22px; padding: 26px 28px; margin-top: 30px; }
.tx__help-title { font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 900; font-size: 20px; margin: 0 0 6px; color: var(--ink); }
.tx__help-body { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; max-width: 46ch; }
.tx__help-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.tx__back { text-align: center; margin: 28px 0 0; }
.tx__back a { color: var(--green-dark); font-weight: 700; font-size: 14px; }

/* order-details + adressen netjes binnen .tx */
.tx h2 { font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 900; font-size: 19px; margin: 30px 0 14px; }
.tx .woocommerce-order-overview, .tx .woocommerce-customer-details address { border-radius: 16px; }
.tx table.woocommerce-table, .tx .woocommerce-table--order-details { border-radius: 16px; overflow: hidden; }

@media (max-width: 760px) {
  .tx__title { font-size: 30px; }
  .tx__steps { grid-template-columns: 1fr; gap: 12px; }
  .tx__help { flex-direction: column; align-items: flex-start; }
  .tx__help-actions { width: 100%; }
  .tx__help-actions .pbtn { flex: 1; }
}

/* Bedankt-pagina: dubbele pagina-titel weg (de hero heeft 'm al) */
.woocommerce-order-received h1:not(.tx__title) { display: none; }
.woocommerce-order-received .home-canvas > .ps-wrap > header:first-child:empty,
.woocommerce-order-received .cat__head:empty { display: none; }

/* ===== Bedankt-pagina: meer lucht + nettere order-details (20 juni) ===== */
.tx__steps { margin-bottom: 36px; }
.tx h2 { margin-top: 44px !important; margin-bottom: 16px !important; font-size: 20px; }
/* eerste sectie-titel (Bestelgegevens) niet té ver van de stappen */
.tx .woocommerce-order-details > h2:first-child,
.tx .woocommerce-order-details__title { margin-top: 8px !important; }
/* order-details tabel: ademende rijen + nette hoeken */
.tx table.woocommerce-table.shop_table,
.tx table.woocommerce-table--order-details { margin: 0 0 8px; }
.tx table.woocommerce-table th, .tx table.woocommerce-table td { padding: 15px 20px; }
.tx table.woocommerce-table tfoot th, .tx table.woocommerce-table tfoot td { font-weight: 700; }
/* adres-kaarten: los van elkaar, nette witte kaart, leesbare regelhoogte */
.tx .woocommerce-customer-details { margin-top: 8px; }
.tx .woocommerce-customer-details .woocommerce-column__title,
.tx .woocommerce-customer-details > h2 { margin-top: 40px !important; }
.tx .woocommerce-customer-details address,
.tx address { font-style: normal; line-height: 1.85; margin: 0; padding: 20px 22px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.tx .woocommerce-customer-details .woocommerce-customer-details--phone,
.tx .woocommerce-customer-details .woocommerce-customer-details--email { margin: 8px 0 0; display: flex; align-items: center; gap: 8px; }
/* Mollie betaal-notitie: nette kaart met lucht eromheen (i.p.v. plak-op-elkaar) */
.tx .woocommerce-order > p,
.tx .mollie-components,
.tx p.woocommerce-thankyou-order-received { margin: 14px 0 8px; }
.tx ul.woocommerce-order-overview { margin: 0 0 30px; padding: 22px 26px; gap: 26px; }
.tx ul.woocommerce-order-overview li { font-size: 12px; }
.tx ul.woocommerce-order-overview li strong { margin-top: 6px; font-size: 16px; }
@media (max-width: 760px) {
  .tx h2 { margin-top: 34px !important; }
  .tx table.woocommerce-table th, .tx table.woocommerce-table td { padding: 12px 14px; font-size: 14px; }
}

/* Mollie-betaalbevestiging op de bedankt-pagina — eigen nette kaart i.p.v. WooCommerce-infobox.
   (de woocommerce-info-klasse is server-side al vervangen door .tx__paynote in thankyou.php) */
.tx .tx__paynote {
  margin: 26px 0 0;
  padding: 16px 20px;
  background: #f4f7f1;
  border: 1px solid var(--line, #e3e7dd);
  border-left: 3px solid var(--green, #4b6b3a);
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink, #2c3327);
}
.tx .tx__paynote::before {
  content: "";
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--green, #4b6b3a) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2013l4%204L19%207'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.tx .tx__paynote p { margin: 0; }

/* ===== Cookiebanner (dedicated, met een knipoog) ===== */
.ck { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; padding: 14px; display: flex; justify-content: center; pointer-events: none; }
.ck__inner { pointer-events: auto; width: 100%; max-width: 880px; background: #fff; border: 1px solid var(--line, #e3e7dd); border-radius: 20px; box-shadow: 0 18px 44px rgba(31, 40, 28, 0.18); padding: 18px 22px; display: flex; align-items: center; gap: 18px; transform: translateY(18px); opacity: 0; transition: transform 0.42s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.42s; }
.ck.is-in .ck__inner { transform: none; opacity: 1; }
.ck__ic { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: var(--green-tint, #eef2e9); color: var(--green, #4b6b3a); display: inline-flex; align-items: center; justify-content: center; }
.ck__text { flex: 1 1 auto; min-width: 0; }
.ck__title { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: var(--ink, #2c3327); letter-spacing: -0.01em; }
.ck__body { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft, #5b6253); }
.ck__body a { color: var(--green, #4b6b3a); text-decoration: underline; }
.ck__actions { flex: 0 0 auto; display: flex; gap: 10px; }
.ck__btn { cursor: pointer; border-radius: 999px; font-size: 13.5px; font-weight: 700; padding: 11px 18px; border: 1px solid transparent; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.ck__btn--solid { background: var(--green, #4b6b3a); color: #fff; }
.ck__btn--solid:hover { background: #3c5730; }
.ck__btn--ghost { background: #fff; color: var(--ink, #2c3327); border-color: var(--line, #d7ddcf); }
.ck__btn--ghost:hover { background: #f4f7f1; }
@media (max-width: 720px) {
  .ck { padding: 10px; }
  .ck__inner { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 18px; }
  .ck__actions { width: 100%; }
  .ck__btn { flex: 1 1 0; padding: 12px 10px; text-align: center; }
  .ck__ic { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .ck__inner { transition: none; transform: none; opacity: 1; }
}

/* "Prijs op aanvraag" in de prijs-slot (op-aanvraag producten zonder verkoopprijs) */
.askprice { font-weight: 800; font-size: 0.9em; color: var(--green, #4b6b3a); white-space: nowrap; letter-spacing: -0.01em; }

/* ===== Kenmerken + specificaties op de PDP (o.a. WIK-machines) ===== */
.ksec__title { margin: 0 0 26px; }
.ksec__wrap { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; align-items: stretch; }
.ksec__card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px 28px; }
.ksec__card--specs { display: flex; flex-direction: column; }
.ksec__heading { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ksec__heading-ic { flex: 0 0 auto; color: var(--green); }
.ksec__list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 30px; }
.ksec__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.4; color: var(--ink); padding: 7px 0; break-inside: avoid; }
.ksec__list li svg { flex: 0 0 auto; margin-top: 1px; color: var(--green); }
.ksec__specs { margin: 0; }
.ksec__spec { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.ksec__spec:first-child { padding-top: 0; }
.ksec__spec dt { margin: 0; font-weight: 700; color: var(--ink); font-size: 14.5px; flex: 0 0 auto; }
.ksec__spec dd { margin: 0; font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; line-height: 1.55; color: var(--ink-soft); text-align: right; }
.ksec__note { display: flex; align-items: flex-start; gap: 8px; margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.ksec__note svg { flex: 0 0 auto; margin-top: 2px; color: var(--green); }
@media (max-width: 900px) {
  .ksec__wrap { grid-template-columns: 1fr; gap: 18px; }
  .ksec__list { columns: 1; }
}

/* PDP subtitel (tagline) onder de productnaam */
.ph__tagline { margin: 7px 0 2px; font-size: 16px; line-height: 1.45; color: var(--ink-soft, #5b6253); font-weight: 500; }
@media (max-width: 760px) { .ph__tagline { font-size: 14.5px; } }

/* ============================================================
   Legal: native content
   Juridische pagina's die via de gewone editor (post_content)
   worden gevuld, renderen kale h2/p/ul binnen .lg-wrap. Deze
   regels spiegelen .lg-h / .lg-p zodat native content er
   identiek uitziet. Gescoped op .lg-native zodat de bestaande
   fallback-weergave (.lg-updated/.lg-intro) onaangetast blijft.
   ============================================================ */
.lg-native h2 { margin-top: 30px; font-size: 22px; }
.lg-native h3 { margin-top: 24px; font-size: 18px; }
.lg-native p { margin-top: 12px; margin-bottom: 0; font-size: 15.5px; line-height: 1.7; color: var(--ink); }
.lg-native ul, .lg-native ol { margin-top: 12px; padding-left: 22px; font-size: 15.5px; line-height: 1.7; color: var(--ink); }
.lg-native ul { list-style: disc; }
.lg-native ol { list-style: decimal; }
.lg-native li { margin-top: 6px; }
.lg-native a { text-decoration: underline; }

/* ============================================================
   Btw-toggle: particulier (incl. btw) / zakelijk (excl. btw)
   Elke prijs wordt dubbel gerenderd (functions.php, wc_price-
   filter); html.pp-vat-excl bepaalt welke variant zichtbaar is.
   ============================================================ */
/* beide prijzen altijd zichtbaar: de actieve groot, de andere klein met label.
   Volgorde wisselt mee via flex-order; op smalle kaarten zakt de kleine prijs
   vanzelf naar een tweede regel (flex-wrap). */
.ppvat { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.5em; }
.ppvat__inc { order: 1; }
.ppvat__exc { order: 2; font-size: max(0.66em, 10.5px); font-weight: 600; opacity: 0.72; letter-spacing: 0.02em; white-space: nowrap; }
.ppvat__exc::after { content: " excl. btw"; }
html.pp-vat-excl .ppvat__exc { order: 1; font-size: inherit; font-weight: inherit; opacity: 1; letter-spacing: inherit; }
html.pp-vat-excl .ppvat__exc::after { content: " excl. btw"; font-size: 0.62em; font-weight: 600; opacity: 0.72; letter-spacing: 0.02em; }
html.pp-vat-excl .ppvat__inc { order: 2; font-size: max(0.66em, 10.5px); font-weight: 600; opacity: 0.72; letter-spacing: 0.02em; white-space: nowrap; }
html.pp-vat-excl .ppvat__inc::after { content: " incl. btw"; }

/* solo-variant voor plekken waar maar een bedrag past (bv. prijsfilter-labels):
   geen kleine tweede prijs en geen label, alleen het actieve bedrag */
.ppvatx__exc { display: none; }
html.pp-vat-excl .ppvatx__inc { display: none; }
html.pp-vat-excl .ppvatx__exc { display: inline; }

/* schakelaar in de header (desktop: iconenrij, mobiel: eigen balkje) */
.ps-vat { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--offwhite); overflow: hidden; flex-shrink: 0; }
.ps-head__icons .ps-vat__opt, .ps-vatbar .ps-vat__opt { border: 0; background: none; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1; color: var(--ink-soft); padding: 8px 12px; cursor: pointer; white-space: nowrap; border-radius: 999px; transition: background 0.15s ease, color 0.15s ease; }
.ps-head__icons .ps-vat__opt[aria-pressed="true"], .ps-head__icons .ps-vat__opt[aria-pressed="true"]:hover, .ps-vatbar .ps-vat__opt[aria-pressed="true"] { background: var(--green); color: var(--white); }
.ps-head__icons .ps-vat__opt[aria-pressed="false"]:hover, .ps-vatbar .ps-vat__opt[aria-pressed="false"]:hover { color: var(--green); }
.ps-vatbar { display: none; }
@media (max-width: 720px) {
  /* naast het gecentreerde badge-logo is geen ruimte: toggle in eigen balkje,
     met extra padding-top zodat het uitstekende logo (66px hoog) vrij blijft */
  .ps-head__icons .ps-vat { display: none; }
  .ps-vatbar { display: flex; justify-content: flex-end; padding: 14px 12px 8px; background: #fff; border-bottom: 1px solid var(--line); }
  .ps-vatbar .ps-vat__opt { padding: 7px 11px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .ps-vat__opt { transition: none; } }

/* ============================================================
   Opties-blok koopbox (accessoires meebestellen op flipper-PDP)
   ============================================================ */
.ph__opts { display: flex; flex-direction: column; gap: 8px; }
.ph__opt { display: flex; align-items: center; gap: 10px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; cursor: pointer; font-size: 14.5px; transition: border-color 0.15s ease; }
.ph__opt:hover { border-color: var(--green); }
.ph__opt:has(input:checked) { border-color: var(--green); background: var(--green-tint); }
.ph__opt input { width: 17px; height: 17px; accent-color: var(--green); cursor: pointer; flex-shrink: 0; }
.ph__opt-name { flex: 1; font-weight: 600; }
.ph__opt-price { font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ph__opt { transition: none; } }

/* ============================================================
   Bezorgkeuze in de winkelwagen (ophalen / bezorgen + installeren)
   ============================================================ */
.cartx__shiprow { padding: 12px 0; border-bottom: 1px solid var(--line); }
.cartx__shiplabel { display: block; font-size: 15px; margin-bottom: 8px; }
.cartx__shipopts { display: flex; flex-direction: column; gap: 4px; }
.cartx__shipopt { display: flex; align-items: baseline; gap: 9px; cursor: pointer; padding: 5px 0; font-size: 14.5px; line-height: 1.35; }
.cartx__shipopt input[type="radio"] { accent-color: var(--green); cursor: pointer; margin: 0; flex-shrink: 0; position: relative; top: 2px; }
.cartx__shipopt:has(input:checked) .cartx__shipopt-txt { font-weight: 600; }
.cartx__shipopt-txt .woocommerce-Price-amount, .cartx__shipopt-txt .amount { font-family: var(--font-mono, inherit); font-weight: 600; }

/* ============================================================
   Mini-winkelwagen: te smal voor de dubbele btw-prijzen (die liepen
   buiten het paneel). Hier alleen de actieve variant tonen, met een
   klein excl.-label in de zakelijke stand.
   ============================================================ */
.mcart .ppvat { display: inline; }
.mcart .ppvat__exc { display: none; }
html.pp-vat-excl .mcart .ppvat__inc { display: none; }
html.pp-vat-excl .mcart .ppvat__exc { display: inline; font-size: inherit; font-weight: inherit; opacity: 1; letter-spacing: inherit; }
html.pp-vat-excl .mcart .ppvat__exc::after { content: " excl."; font-size: 0.78em; font-weight: 600; opacity: 0.7; }
.mcart__rowline { white-space: normal; word-break: normal; }
.mcart__row { gap: 11px; }
.mcart__rowqty { line-height: 1.35; }

/* ============================================================
   Checkout: bestellingsoverzicht (eigen review-order.php)
   Zelfde kaartopmaak als de winkelwagen i.p.v. WooCommerce's
   kale shop_table met PRODUCT/SUBTOTAAL-koppen.
   ============================================================ */
.cox__items { list-style: none; margin: 0 0 4px; padding: 0; }
.cox__item { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 13px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }
.cox__thumb { position: relative; width: 54px; height: 54px; border-radius: 11px; background: var(--green-tint); display: flex; align-items: center; justify-content: center; overflow: visible; }
.cox__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 5px; mix-blend-mode: multiply; border-radius: 11px; }
.cox__qty { position: absolute; top: -7px; right: -7px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px; background: var(--green); color: #fff; font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cox__info { min-width: 0; }
.cox__name { display: block; font-weight: 700; font-size: 14.5px; line-height: 1.3; color: var(--ink); }
.cox__meta { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-soft); }
.cox__meta p { margin: 0; }
.cox__price { text-align: right; font-size: 14.5px; }
.cox__price .ppvat { justify-content: flex-end; }

.cox__rows { padding-top: 4px; }
.cox__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.cox__amt { text-align: right; }
.cox__amt .ppvat { justify-content: flex-end; }
.cox__row--total { border-bottom: 0; padding-top: 15px; font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 900; font-size: 19px; }

.cox__shiprow { padding: 12px 0; border-bottom: 1px solid var(--line); }
.cox__shiplabel { display: block; font-size: 15px; margin-bottom: 8px; }
.cox__shipopts { display: flex; flex-direction: column; gap: 4px; }
.cox__shipopt { display: flex; align-items: baseline; gap: 9px; cursor: pointer; padding: 5px 0; font-size: 14.5px; line-height: 1.35; }
.cox__shipopt input[type="radio"] { accent-color: var(--green); cursor: pointer; margin: 0; flex-shrink: 0; position: relative; top: 2px; }
.cox__shipopt:has(input:checked) .cox__shipopt-txt { font-weight: 600; }
.cox__shipopt-txt .woocommerce-Price-amount, .cox__shipopt-txt .amount { font-family: var(--font-mono, inherit); font-weight: 600; }

/* de dubbele btw-prijs compact houden in de smalle checkout-kolom */
.cox .ppvat { column-gap: 0.4em; }
.cox .ppvat__inc, .cox .ppvat__exc { line-height: 1.35; }

/* checkout: laatste afwerking linkerkolom + betaalblok */
/* velden zonder zichtbare input (bv. Staat/provincie bij NL) verbergen:
   WooCommerce rendert daar alleen een hidden input met losse label */
.woocommerce-checkout .form-row.address-field:has(> span.woocommerce-input-wrapper > input[type="hidden"]) { display: none !important; }
/* "Naar een ander adres versturen?" als nette keuzeregel i.p.v. losse checkbox */
.woocommerce-checkout #ship-to-different-address { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 14px 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; font-size: 15px; }
.woocommerce-checkout #ship-to-different-address label { display: flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; font-weight: 600; }
.woocommerce-checkout #ship-to-different-address input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--green); cursor: pointer; margin: 0; }
/* alle keuzerondjes en vinkjes in merkgroen (was browserblauw) */
.woocommerce-checkout input[type="radio"], .woocommerce-checkout input[type="checkbox"] { accent-color: var(--green); }
.woocommerce-checkout #payment ul.payment_methods li label { font-weight: 600; }
.woocommerce-checkout #payment .payment_box { border-radius: 12px; font-size: 14px; }


/* Mobiel: grid-items hebben standaard min-width:auto, waardoor de kolom
   meegroeit met de breedste inhoud (de PDP-koopbox duwde de kolom naar 402px
   in een 358px brede wrap, zodat rechts inhoud buiten beeld viel). */
@media (max-width: 900px) {
  .ph__grid > *, .ph__buy > * { min-width: 0; }
}

/* De edge-to-edge carousel op de homepage bloedde 20px uit, terwijl .ps-wrap
   onder 560px nog maar 16px padding heeft: dat gaf 4px horizontale ruimte. */
@media (max-width: 560px) {
  .hf__grid { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; scroll-padding-left: 16px; }
}

/* zelfde bleed-correctie voor de filter-pills op de categoriepagina */
@media (max-width: 560px) {
  .cat__pills { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; scroll-padding-left: 16px; }
}

/* account/verlanglijst: vinkjes en keuzerondjes in merkgroen, net als op de
   checkout (waren nog standaard browserblauw, o.a. "Onthouden" bij inloggen) */
.woocommerce-account input[type="checkbox"], .woocommerce-account input[type="radio"],
.woocommerce input[type="checkbox"], .woocommerce input[type="radio"] { accent-color: var(--green); }
.woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.woocommerce-form-login__rememberme input[type="checkbox"] { width: 16px; height: 16px; margin: 0; cursor: pointer; }

/* ============================================================
   Mijn account: inlogpagina + dashboard (eigen myaccount-templates)
   ============================================================ */
.woocommerce-account .home-canvas .woocommerce { max-width: 1160px; padding: 0 0 12px; }
.acc-head { padding: 40px 0 4px; }
.acc-head__title { font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 900; font-size: 34px; margin: 4px 0 0; }

/* ---- uitgelogd: inloggen + voordelen ---- */
.acc { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; padding: 40px 0 20px; }
.acc__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.acc__card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 32px 34px 34px; box-shadow: 0 14px 36px rgba(29, 29, 27, 0.06); }
.acc__title { font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 900; font-size: 30px; margin: 6px 0 8px; }
.acc__title--sm { font-size: 21px; margin-top: 0; }
.acc__lead { color: var(--ink-soft); font-size: 15px; line-height: 1.6; margin: 0 0 22px; max-width: 46ch; }
.acc__form .form-row { margin: 0 0 16px; }
.acc__form label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 7px; color: var(--ink); }
.acc__form label .required { color: #c0392b; text-decoration: none; }
.acc__form .input-text { width: 100%; height: 48px; padding: 0 15px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font-size: 15px; font-family: var(--font-sans), sans-serif; }
.acc__form .input-text:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-faint); }
.acc__formfoot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 2px 0 20px; }
.acc__formfoot .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.acc__formfoot input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--green); margin: 0; cursor: pointer; }
.acc__lost { font-size: 14px; color: var(--green); text-decoration: underline; }
.acc__submit { height: 52px; font-size: 15.5px; }
.acc__hint { font-size: 13.5px; color: var(--ink-soft); margin: -4px 0 16px; }

.acc__side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 100px; }
.acc__panel { background: var(--green-tint); border-radius: 20px; padding: 26px 26px 24px; }
.acc__paneltitle { font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 800; font-size: 19px; margin: 0 0 18px; }
.acc__usps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.acc__usps li { display: flex; gap: 12px; align-items: flex-start; }
.acc__usps li svg { flex-shrink: 0; color: var(--green); margin-top: 2px; }
.acc__usps span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--ink-soft); line-height: 1.45; }
.acc__usps strong { color: var(--ink); font-size: 14.5px; }
.acc__note { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(29, 29, 27, 0.1); font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
.acc__help { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 22px 24px; }
.acc__helptitle { display: block; font-weight: 700; font-size: 15.5px; margin-bottom: 6px; }
.acc__help p { margin: 0 0 14px; font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.acc__helpbtns { display: flex; flex-wrap: wrap; gap: 10px; }
.acc__helpbtn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; transition: border-color 0.15s, color 0.15s; }
.acc__helpbtn:hover { border-color: var(--green); color: var(--green); }
.acc__helpbtn svg { color: var(--green); }

/* ---- ingelogd: navigatie + inhoud ---- */
.accwrap { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 26px; align-items: start; padding: 22px 0 24px; }
.accnav { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px; box-shadow: 0 12px 32px rgba(29, 29, 27, 0.05); position: sticky; top: 100px; }
.accnav__who { display: flex; align-items: center; gap: 12px; padding: 6px 8px 16px; border-bottom: 1px solid var(--line); margin-bottom: 12px; min-width: 0; }
.accnav__hello { white-space: nowrap; }
.accnav__avatar { width: 42px; height: 42px; border-radius: 999px; background: var(--green-tint); color: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.accnav__whotxt { display: flex; flex-direction: column; min-width: 0; }
.accnav__hello { font-size: 12.5px; color: var(--ink-soft); }
.accnav__name { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accnav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.accnav__list a { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 11px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 600; transition: background 0.15s, color 0.15s; }
.accnav__list a:hover { background: var(--offwhite); color: var(--green); }
.accnav__ic { color: var(--ink-soft); display: inline-flex; flex-shrink: 0; }
.accnav__arr { margin-left: auto; color: var(--line); flex-shrink: 0; }
.accnav__list li.is-active a, .accnav__list li.woocommerce-MyAccount-navigation-link--dashboard.is-active a { background: var(--green); color: #fff; }
.accnav__list li.is-active .accnav__ic, .accnav__list li.is-active .accnav__arr { color: #fff; }
.accnav__list li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--ink-soft); }
.accnav__list li.woocommerce-MyAccount-navigation-link--customer-logout a:hover { color: #c0392b; background: rgba(192, 57, 43, 0.06); }

.acccontent { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 30px 32px; box-shadow: 0 12px 32px rgba(29, 29, 27, 0.05); min-width: 0; }
.acccontent > p:first-child { margin-top: 0; }

/* dashboard */
.accdash__title { font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 900; font-size: 26px; margin: 0 0 8px; }
.accdash__lead { color: var(--ink-soft); font-size: 15px; line-height: 1.6; margin: 0 0 24px; }
.accdash__last { border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; margin-bottom: 22px; background: var(--offwhite); }
.accdash__lasthead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.accdash__status { font-size: 12.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; background: var(--green-tint); color: var(--green-dark); }
.accdash__status--completed { background: var(--green); color: #fff; }
.accdash__status--cancelled, .accdash__status--failed { background: rgba(192, 57, 43, 0.1); color: #c0392b; }
.accdash__lastbody { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.accdash__ordernr { display: block; font-size: 16px; }
.accdash__orderdate { font-size: 13.5px; color: var(--ink-soft); }
.accdash__ordertot { font-family: var(--font-mono, monospace); font-weight: 800; font-size: 17px; }
.accdash__orderlink { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--green); text-decoration: none; }
.accdash__orderlink:hover { text-decoration: underline; }

.accdash__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.accdash__tile { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: var(--ink); transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.accdash__tile:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(29, 29, 27, 0.07); }
.accdash__tileic { width: 40px; height: 40px; border-radius: 12px; background: var(--green-tint); color: var(--green); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.accdash__tile strong { font-size: 15.5px; }
.accdash__tile span:last-child { font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }

.accdash__help { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.accdash__help strong { display: block; font-size: 15.5px; margin-bottom: 3px; }
.accdash__help span { font-size: 14px; color: var(--ink-soft); }
.accdash__helpbtns { display: flex; gap: 10px; flex-wrap: wrap; }
/* knoppen in het hulpblok: leesbaar, geen kapitalen/brede spatiëring
   (een telefoonnummer wordt daar onleesbaar van) */
.accdash__helpbtns .ps-btn { height: 44px; padding: 0 20px; font-size: 14px; text-transform: none; letter-spacing: 0.01em; gap: 8px; }
.accdash__helpbtns .ps-btn--green { color: #fff !important; }
.accdash__helpbtns .ps-btn--outline svg { color: var(--green); }

/* WooCommerce-standaardonderdelen binnen de accountkaart */
.acccontent table.shop_table { width: 100%; border: 1px solid var(--line); border-radius: 14px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.acccontent table.shop_table th { background: var(--offwhite); font-size: 13px; text-transform: none; letter-spacing: 0; padding: 12px 14px; text-align: left; }
.acccontent table.shop_table td { padding: 14px; border-top: 1px solid var(--line); font-size: 14.5px; }
.acccontent .woocommerce-Message, .acccontent .woocommerce-info { background: var(--green-tint); border: 0; border-radius: 14px; padding: 16px 18px; font-size: 14.5px; color: var(--ink); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.acccontent .woocommerce-Message::before, .acccontent .woocommerce-info::before { display: none; }
.acccontent .button, .acccontent button.button { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border-radius: 999px; background: var(--green); color: #fff !important; border: 0; font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none; }
.acccontent .button:hover { background: var(--green-dark); }
.acccontent legend { font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 800; font-size: 17px; margin-bottom: 8px; }
.acccontent fieldset { border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin: 20px 0 0; }
.acccontent .form-row { margin-bottom: 16px; }
.acccontent label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.acccontent input[type="text"], .acccontent input[type="email"], .acccontent input[type="password"], .acccontent input[type="tel"], .acccontent select {
  width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 11px; font-size: 15px; font-family: var(--font-sans), sans-serif; background: #fff; }
.acccontent input:focus, .acccontent select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-faint); }

@media (max-width: 900px) {
  .acc { grid-template-columns: 1fr; padding-top: 26px; }
  .acc__side { position: static; }
  .accwrap { grid-template-columns: 1fr; }
  .accnav { position: static; }
  .acc__card { padding: 26px 22px 28px; }
  .acccontent { padding: 24px 20px; }
  .accdash__tiles { grid-template-columns: 1fr; }
  .acc__title { font-size: 25px; }
  .acc-head__title { font-size: 27px; }
}

/* WooCommerce's eigen stylesheet zet een rand + padding op form.login /
   form.register; onze inlogkaart is al een kaart, dus die weghalen. */
.woocommerce .acc__form.login, .woocommerce .acc__form.register,
.woocommerce-account form.woocommerce-form-login, .woocommerce-account form.woocommerce-form-register {
  border: 0 !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; max-width: none !important;
}

/* WooCommerce's eigen stylesheet zet float+percentagebreedte op de
   accountnavigatie en -inhoud; daardoor kromp de navigatiekaart tot 87px en
   viel hij buiten ons grid. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  float: none !important; width: auto !important; margin: 0 !important;
}

/* ---- Account-submodules: bestellingen, adressen, gegevens ---- */
.accsec { margin-bottom: 22px; }
.accsec__title { font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 900; font-size: 24px; margin: 0 0 6px; }
.accsec__lead { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; margin: 0; max-width: 60ch; }

/* bestellingen als kaarten */
.accorders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.accorder { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 16px; align-items: center; border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; transition: border-color 0.15s, box-shadow 0.15s; }
.accorder:hover { border-color: var(--green); box-shadow: 0 8px 20px rgba(29, 29, 27, 0.06); }
.accorder__thumb { width: 62px; height: 62px; border-radius: 12px; background: var(--green-tint); color: var(--green); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.accorder__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 5px; mix-blend-mode: multiply; }
.accorder__info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.accorder__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.accorder__nr { font-size: 15.5px; }
.accorder__meta { font-size: 13.5px; color: var(--ink-soft); }
.accorder__items { font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accorder__plus { color: var(--ink-soft); }
.accorder__end { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.accorder__tot { font-family: var(--font-mono, monospace); font-weight: 800; font-size: 16px; white-space: nowrap; }
.accorder__tot .ppvat { justify-content: flex-end; }
.accorder__btn { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 700; color: var(--green) !important; text-decoration: none; white-space: nowrap; }
.accorder__btn:hover { text-decoration: underline; }
.accpag { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; font-size: 14px; color: var(--ink-soft); }
.accpag__btn { padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; color: var(--ink) !important; text-decoration: none; }
.accpag__btn:hover { border-color: var(--green); color: var(--green) !important; }

/* lege staat */
.accempty { text-align: center; padding: 34px 24px 30px; border: 1px dashed var(--line); border-radius: 18px; }
.accempty__ic { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 999px; background: var(--green-tint); color: var(--green); display: flex; align-items: center; justify-content: center; }
.accempty__t { display: block; font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 800; font-size: 19px; margin-bottom: 8px; }
.accempty__p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; margin: 0 auto 20px; max-width: 46ch; }
.accempty__btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.accempty__btns .ps-btn { height: 46px; padding: 0 20px; font-size: 13px; }

/* adressen */
.accaddr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.accaddr__card { border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; }
.accaddr__card--leeg { border-style: dashed; }
.accaddr__head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.accaddr__ic { width: 38px; height: 38px; border-radius: 11px; background: var(--green-tint); color: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.accaddr__title { display: block; font-size: 15.5px; }
.accaddr__hint { display: block; font-size: 13px; color: var(--ink-soft); line-height: 1.45; margin-top: 2px; }
.accaddr__body { font-style: normal; font-size: 14.5px; line-height: 1.65; color: var(--ink); margin: 0 0 16px; flex: 1; }
.accaddr__none { color: var(--ink-soft); }
.accaddr__edit { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: var(--green) !important; text-decoration: none; }
.accaddr__edit:hover { text-decoration: underline; }

/* accountgegevens-formulier */
.accform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.accform .form-row { margin-bottom: 16px; }
.accform label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 7px; }
.accform label .required { color: #c0392b; text-decoration: none; }
.accform .input-text { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 11px; font-size: 15px; font-family: var(--font-sans), sans-serif; background: #fff; }
.accform .input-text:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-faint); }
.accform__hint { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 6px; line-height: 1.5; }
.accform__hint--top { margin: 0 0 14px; }
.accform__fs { border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px 6px; margin: 24px 0 0; background: var(--offwhite); }
.accform__fs legend { font-family: var(--font-display), var(--font-sans), sans-serif; font-weight: 800; font-size: 16.5px; padding: 0 8px; margin-left: -8px; }
.accform__foot { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.accform__save { height: 48px; padding: 0 26px; text-transform: none; letter-spacing: 0.01em; font-size: 14.5px; }

/* WooCommerce-adresformulier binnen de accountkaart */
.acccontent .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.acccontent .woocommerce-address-fields__field-wrapper .form-row-wide { grid-column: 1 / -1; }
.acccontent .woocommerce-address-fields .button { margin-top: 8px; text-transform: none; letter-spacing: 0.01em; }

@media (max-width: 760px) {
  .accorder { grid-template-columns: 52px minmax(0, 1fr); }
  .accorder__thumb { width: 52px; height: 52px; }
  .accorder__end { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .accaddr, .accform__grid, .acccontent .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr; }
}

/* ============================================================
   Verhuur voor bedrijven (/verhuur/voor-bedrijven)
   ============================================================ */
.pbtn--ghost { background: #fff; color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.pbtn--ghost:hover { background: var(--green-tint); }

.vb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 26px; align-items: stretch; }
.vb-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 2px solid var(--ink); border-radius: 16px; padding: 26px 22px; box-shadow: 5px 5px 0 var(--ink); }
.vb-card--featured { background: var(--green-tint); box-shadow: 7px 7px 0 var(--green-dark); }
.vb-card__badge { position: absolute; top: -13px; left: 22px; background: var(--orange, #e8734a); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 5px 12px; border-radius: 20px; text-transform: uppercase; }
.vb-card__naam { font-family: var(--font-head, inherit); font-size: 22px; font-weight: 800; color: var(--ink); }
.vb-card__tagline { color: var(--ink-soft); font-size: 14px; margin-top: 2px; }
.vb-card__prijs { display: flex; align-items: baseline; gap: 3px; margin: 16px 0 2px; }
.vb-card__euro { font-size: 22px; font-weight: 700; color: var(--green-dark); }
.vb-card__bedrag { font-size: 46px; font-weight: 800; line-height: 1; color: var(--ink); font-family: "JetBrains Mono", var(--font-head, monospace); }
.vb-card__per { font-size: 16px; color: var(--ink-soft); font-weight: 600; }
.vb-card__excl { font-size: 12px; color: var(--ink-soft); }
.vb-card__desc { font-size: 14px; line-height: 1.55; color: var(--ink); margin: 14px 0 4px; }
.vb-card__list { list-style: none; margin: 12px 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.vb-card__list li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; line-height: 1.4; color: var(--ink); }
.vb-card__list li svg { flex: 0 0 auto; margin-top: 2px; color: var(--green); }
.vb-card__btn { margin-top: auto; width: 100%; justify-content: center; }
.vb-note { margin-top: 22px; font-size: 14px; color: var(--ink-soft); max-width: 70ch; }

.vb-offerte { background: var(--cream, #faf5ec); border: 2px solid var(--ink); border-radius: 18px; padding: 30px; box-shadow: 6px 6px 0 var(--ink); }
.vb-offerte__head { margin-bottom: 18px; }
.vb-summary { background: #fff; border: 1.5px solid var(--ink); border-radius: 12px; padding: 14px 18px; margin-bottom: 20px; }
.vb-summary__label { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--green); font-weight: 700; }
.vb-summary__row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; }
.vb-summary__abo { font-size: 20px; font-weight: 800; color: var(--ink); }
.vb-summary__prijs { font-size: 18px; font-weight: 700; color: var(--green-dark); font-family: "JetBrains Mono", monospace; }
.vb-summary__terms { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 3px; }
.vb-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vb-form__field { display: flex; flex-direction: column; gap: 5px; }
.vb-form__field--full { grid-column: 1 / -1; }
.vb-form__field--split { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.vb-form__field--split > span { display: flex; flex-direction: column; gap: 5px; }
.vb-form label { font-size: 13px; font-weight: 600; color: var(--ink); }
.vb-form input, .vb-form select { font: inherit; font-size: 15px; padding: 11px 13px; border: 1.5px solid #cbc9c2; border-radius: 9px; background: #fff; color: var(--ink); width: 100%; }
.vb-form input:focus, .vb-form select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-faint); }
.vb-form input[readonly] { background: var(--green-tint); color: var(--ink-soft); cursor: default; }
.vb-form__hint { font-size: 12.5px; margin-top: 3px; min-height: 15px; }
.vb-form__hint.is-ok { color: var(--green); }
.vb-form__hint.is-bad { color: #b3261e; }
.vb-form__field--full { margin-bottom: 4px; }
.vb-form__sign { margin-top: 18px; padding-top: 18px; border-top: 1.5px dashed #cbc9c2; display: flex; flex-direction: column; gap: 14px; }
.vb-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--ink); font-weight: 500; cursor: pointer; }
.vb-check input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--green); cursor: pointer; }
.vb-check a { color: var(--green-dark); text-decoration: underline; }
.vb-form__submit { margin-top: 22px; width: 100%; justify-content: center; }
.vb-form__err { margin-top: 12px; color: #b3261e; font-size: 14px; font-weight: 600; background: #fdecea; border: 1px solid #f5c6c2; border-radius: 8px; padding: 10px 12px; }
.vb-success { text-align: center; padding: 20px 10px; }
.vb-success__ic { display: inline-flex; width: 66px; height: 66px; align-items: center; justify-content: center; border-radius: 50%; background: var(--green-tint); color: var(--green-dark); margin-bottom: 14px; }
.vb-success__t { font-size: 24px; font-weight: 800; color: var(--ink); }
.vb-success__p { max-width: 60ch; margin: 10px auto 0; color: var(--ink); line-height: 1.6; }

@media (max-width: 900px) { .vb-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .vb-form__grid { grid-template-columns: 1fr; }
  .vb-form__field--split { grid-template-columns: 1fr; }
  .vb-offerte { padding: 20px; }
}

/* Prijzenblok op de verhuurpagina's (mini-variant van de vb-card) */
.vb-grid--mini { margin-top: 20px; }
.vb-card--mini { text-decoration: none; transition: transform .12s, box-shadow .12s; }
.vb-card--mini:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.vb-card--mini .vb-card__prijs { margin-top: 14px; }
.vb-card__mini-link { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--green-dark); font-size: 14px; }
.vb-card__mini-link svg { transition: transform .12s; }
.vb-card--mini:hover .vb-card__mini-link svg { transform: translateX(3px); }

/* === Positieve inline-validatie: groen vinkje + groene rand bij correct veld === */
.pp-vld { position: relative; display: block; }
.pp-vld > input, .pp-vld > select, .pp-vld > textarea { width: 100%; box-sizing: border-box; }
.ct-form__row .pp-vld, .nl-form__row .pp-vld { flex: 1 1 0; min-width: 0; }
.pp-vld__ok {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--green);
  display: none; pointer-events: none; z-index: 2;
}
.pp-vld__ok svg { width: 100%; height: 100%; display: block; stroke: var(--green); }
.pp-vld > textarea + .pp-vld__ok { top: 16px; transform: none; }
.pp-vld > select + .pp-vld__ok { right: 34px; }
.pp-vld-ok { border-color: var(--green) !important; box-shadow: 0 0 0 2px var(--green) !important; padding-right: 42px !important; }
.pp-vld--ok .pp-vld__ok { display: block; }
/* Checkout: WooCommerce-inputstijl heeft hoge specificiteit; deze wint met element-selector */
.woocommerce-checkout .pp-vld > input.pp-vld-ok,
.woocommerce-checkout .pp-vld > select.pp-vld-ok,
.woocommerce-checkout .pp-vld > textarea.pp-vld-ok,
form.checkout .pp-vld > input.pp-vld-ok,
form.checkout .pp-vld > select.pp-vld-ok,
form.checkout .pp-vld > textarea.pp-vld-ok {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 2px var(--green) !important;
}

/* Offerte-akkoordpagina (/offerte-akkoord/<id>/<token>/) */
.oa { max-width: 640px; margin: 0 auto; }
.oa__title { font-family: var(--font-display), serif; font-size: clamp(26px, 4vw, 36px); line-height: 1.15; margin: 6px 0 14px; }
.oa__lead { color: var(--ink-soft); margin-bottom: 20px; }
.oa__card { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; margin-bottom: 22px; }
.oa__grid { display: grid; gap: 12px 24px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 0 0 6px; }
.oa__grid dt { font-size: 13px; color: var(--ink-soft); }
.oa__grid dd { margin: 2px 0 0; font-weight: 700; }
.oa__sub { font-size: 16px; font-weight: 800; margin: 18px 0 8px; }
.oa__vw { margin: 0; padding-left: 18px; color: var(--ink); display: grid; gap: 6px; font-size: 14px; }
.oa__form { display: block; }
.oa__fine { font-size: 12px; color: var(--ink-soft); margin-top: 10px; }
.oa__err { background: #fde8e6; border: 1px solid #f2b8b1; color: #8a2a20; border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; font-size: 14px; }
.oa__done { background: var(--green-tint); border: 1px solid #c9d3c0; border-radius: 16px; padding: 20px 24px; }
.oa__done .oa__sub { margin-top: 0; }