/* ==========================================================================
   Productpagina — twee kaarten naast elkaar
   ========================================================================== */

.bbd-product { background: transparent; }



.bbd-product-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: var(--bbd-s5);
  align-items: start;
}

/* De titel staat in de markup los van de kaarten (zie
   woocommerce/content-single-product.php). Op desktop zetten we hem terug
   boven de linkerkaart; de bestelkaart loopt rechts over beide rijen door,
   zodat hij op dezelfde hoogte begint als de titel. */
.bbd-product-raster > .bbd-titel      { grid-column: 1; grid-row: 1; margin-bottom: 0; }
.bbd-product-raster > .bbd-kaart--info      { grid-column: 1; grid-row: 2; }
.bbd-product-raster > .bbd-kaart--bestellen { grid-column: 2; grid-row: 1 / span 2; }

.bbd-kaart {
  background: var(--bbd-paper);
  border: 1px solid var(--bbd-line);
  border-radius: 10px;
  padding: var(--bbd-s6);
}

/* ---------- linkerkaart ---------- */

/* Iets kleiner dan de standaard H1 van 56 px: op deze pagina staat er veel
   naast en onder, dus de titel hoeft niet het hele scherm te vullen. */
.bbd-titel {
  margin: 0 0 var(--bbd-s4);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08;
}

/* Past op één regel in de bestelkaart van 466 px. */
.bbd-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bbd-ok-bg); color: var(--bbd-ok);
  font-size: 11px; line-height: 1.35; font-weight: 600;
  padding: 5px 10px; border-radius: 999px;
  margin: 0 0 var(--bbd-s5);
}
.bbd-badge .bbd-icoon { width: 12px; height: 12px; }

/* Vaste hoogte. De renders lopen van 1200×530 tot 1200×900; zonder vaste
   verhouding schuift de hele pagina bij het wisselen van maat. */
.bbd-foto {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 2;
  margin: var(--bbd-s4) 0 var(--bbd-s5);
}
.bbd-foto::before {
  content: ""; position: absolute; inset: 6% -6% 14% 26%;
  /* Stond op --bbd-groen, maar die paletplek hield al dezelfde donkere waarde
     als --bbd-ink en is inmiddels de kleur van de menubalk. Hier gaat het om
     een zachte schaduw achter de foto, dus --bbd-ink is wat het altijd al was. */
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bbd-ink) 16%, transparent), transparent 72%);
  border-radius: 50%; z-index: 0;
}
.bbd-foto-img {
  position: relative; z-index: 1;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain; display: block;
}

.bbd-punten, .bbd-vertrouwen {
  list-style: none; margin: 0; padding: var(--bbd-s5) 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bbd-s4);
  border-top: 1px solid var(--bbd-line);
}
.bbd-punten li, .bbd-vertrouwen li {
  display: flex; gap: var(--bbd-s3); align-items: flex-start;
  font-size: var(--bbd-t-s); color: var(--bbd-tekst); line-height: 1.45; margin: 0;
}
.bbd-punten .bbd-icoon, .bbd-vertrouwen .bbd-icoon {
  color: var(--bbd-orange); flex: none; margin-top: 1px;
}
.bbd-punten { border-top: 0; padding-top: 0; }
.bbd-vertrouwen { margin-top: var(--bbd-s5); }
.bbd-vertrouwen b { display: block; color: var(--bbd-ink); font-size: var(--bbd-t-m); }
.bbd-vertrouwen span { display: block; font-size: var(--bbd-t-xs); }

.bbd-watmag {
  display: flex; gap: var(--bbd-s3); align-items: flex-start;
  background: var(--bbd-ok-bg); border-radius: 8px;
  padding: var(--bbd-s4) var(--bbd-s5); margin-top: var(--bbd-s5);
}
.bbd-watmag .bbd-icoon { color: var(--bbd-ok); flex: none; margin-top: 2px; }
.bbd-watmag b { display: block; font-size: var(--bbd-t-l); margin-bottom: 4px; color: var(--bbd-ink); }
.bbd-watmag p { margin: 0 0 var(--bbd-s2); font-size: var(--bbd-t-m); color: var(--bbd-tekst); }
.bbd-watmag a { font-size: var(--bbd-t-m); font-weight: 700; color: var(--bbd-ok); text-decoration: underline; }

/* ---------- rechterkaart ---------- */

.bbd-kaart--bestellen { padding: 0; border: 0; background: transparent; }
.bbd-bestel-sticky {
  background: var(--bbd-paper); border: 1px solid var(--bbd-line);
  border-radius: 10px; padding: var(--bbd-s5);
  position: sticky; top: var(--bbd-s5);
}
.bbd-bestel-kop { margin: 0 0 var(--bbd-s5); font-size: var(--bbd-t-xl); }

/* WooCommerce-formulier inpassen */
.bbd-bestel-sticky .variations { margin: 0; }
.bbd-bestel-sticky .variations tbody,
.bbd-bestel-sticky .variations tr,
.bbd-bestel-sticky .variations td,
.bbd-bestel-sticky .variations th { display: block; width: 100%; padding: 0; border: 0; background: none; }
.bbd-bestel-sticky .variations .label label {
  font-size: var(--bbd-t-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bbd-tekst);
  font-family: var(--bbd-font); margin-bottom: 6px; display: block;
}
.bbd-bestel-sticky select {
  width: 100%; padding: 12px 13px; font-size: var(--bbd-t-m); font-weight: 600;
  border: 1.5px solid var(--bbd-line); border-radius: var(--bbd-radius);
  background-color: var(--bbd-paper); color: var(--bbd-ink);
}
.bbd-maattabel-link { margin: 0 0 -22px; text-align: right; position: relative; z-index: 1; }
.bbd-maattabel-link a {
  font-size: var(--bbd-t-xs); font-weight: 700; color: var(--bbd-orange-t); text-decoration: none;
}
.bbd-maattabel-link a:hover { text-decoration: underline; }
.bbd-bestel-sticky .reset_variations { display: none; }

/* Maatinformatie. Vaste minimumhoogte: bij een maat die niet op een
   parkeervak past komt er een regel bij, en dan zou alles eronder verspringen. */
.bbd-maatinfo { margin: var(--bbd-s4) 0; min-height: 112px; }
.bbd-maatinfo.is-leeg::before {
  content: "Kies eerst een kuubmaat";
  display: flex; align-items: center; justify-content: center;
  height: 112px; border: 1.5px dashed var(--bbd-line); border-radius: 8px;
  font-size: var(--bbd-t-s); color: var(--bbd-tekst);
}
.bbd-maat {
  display: flex; gap: var(--bbd-s3); align-items: flex-start;
  background: var(--bbd-ok-bg); border-radius: 8px; padding: var(--bbd-s4);
  min-height: 112px;
}
.bbd-maat[hidden] { display: none; }
.bbd-maat > .bbd-icoon { color: var(--bbd-ok); flex: none; margin-top: 1px; }
.bbd-maat b { display: block; font-size: var(--bbd-t-m); color: var(--bbd-ink); }
.bbd-maat-afmeting {
  display: block; font-family: var(--bbd-font-data); font-size: var(--bbd-t-xs);
  color: var(--bbd-tekst); margin-top: 2px;
}
.bbd-maat-vak {
  display: flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: 11px; line-height: 1.4; font-weight: 600;
}
.bbd-maat-vak .bbd-icoon { width: 13px; height: 13px; }
.bbd-maat-vak.is-ja { color: var(--bbd-ok); }
.bbd-maat-vak.is-let-op { color: var(--bbd-let-op); }

/* Gewichtsregel, alleen bij de maten vanaf 12 m³ (zie productpagina.php). Een
   nuchtere notitie onderin het maatblokje, met een scheidingslijntje erboven. */
.bbd-maat-gewicht {
  display: flex; align-items: flex-start; gap: 6px;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,.09);
  font-size: 11px; line-height: 1.45; color: var(--bbd-tekst);
}
.bbd-maat-gewicht .bbd-icoon { flex: none; color: var(--bbd-let-op); margin-top: 1px; }

/* Waar mag de container staan — opent een klein venster, zodat de bezoeker
   op de productpagina blijft */
.bbd-vergunning-knop {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: none; border: 1px solid var(--bbd-line);
  border-radius: var(--bbd-radius); cursor: pointer;
  padding: 8px 11px;
  margin: calc(var(--bbd-s4) * -1 + 4px) 0 var(--bbd-s5);
  font-family: var(--bbd-font); font-size: 12px; font-weight: 600;
  color: var(--bbd-tekst); text-align: left;
}
.bbd-vergunning-knop[hidden] { display: none; }
.bbd-vergunning-knop::after {
  content: "→"; margin-left: auto; color: var(--bbd-orange-t); font-size: 13px;
}
.bbd-vergunning-knop:hover { color: var(--bbd-ink); border-color: var(--bbd-orange); }
.bbd-vergunning-knop .bbd-icoon { color: var(--bbd-let-op); }

/* Het venster zelf */
.bbd-venster {
  width: min(440px, calc(100vw - 32px));
  border: 0; border-radius: 10px; padding: 0;
  box-shadow: 0 24px 60px -20px rgba(31, 37, 43, .45);
  color: var(--bbd-ink);
}
.bbd-venster::backdrop { background: rgba(31, 37, 43, .55); }
.bbd-venster-kop {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--bbd-s3); padding: var(--bbd-s4) var(--bbd-s5);
  border-bottom: 1px solid var(--bbd-line); background: var(--bbd-concrete);
  border-radius: 10px 10px 0 0;
}
.bbd-venster-kop h3 { margin: 0; font-size: var(--bbd-t-l); }
.bbd-venster-sluit {
  background: none; border: 0; cursor: pointer; line-height: 1;
  font-size: 26px; color: var(--bbd-tekst); padding: 0 4px;
}
.bbd-venster-sluit:hover { color: var(--bbd-ink); }
.bbd-venster-inhoud { padding: var(--bbd-s5); }
.bbd-venster-inhoud p { font-size: var(--bbd-t-m); line-height: 1.6; margin: 0 0 var(--bbd-s3); }
.bbd-venster-let-op {
  display: flex; gap: var(--bbd-s2); align-items: flex-start;
  background: var(--bbd-let-op-bg); border-radius: var(--bbd-radius);
  padding: var(--bbd-s3); font-size: var(--bbd-t-s) !important; color: #4B4034;
}
.bbd-venster-let-op .bbd-icoon { color: var(--bbd-let-op); flex: none; margin-top: 2px; }
/* Slotregel van het vergunningvenster: een terzijde, geen oproep. Klein en
   rustig, zodat het de bestelling niet in de weg zit. */
.bbd-venster-meer {
  margin-bottom: 0 !important;
  font-size: var(--bbd-t-s) !important;
  color: var(--bbd-grey);
}
.bbd-venster-meer a { font-weight: 700; color: var(--bbd-orange-t); }

/* Bestelbalk voor smalle schermen */
.bbd-mobielbalk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--bbd-s3); padding: 10px 16px;
  background: var(--bbd-paper); border-top: 1px solid var(--bbd-line);
  box-shadow: 0 -6px 20px -12px rgba(31, 37, 43, .4);
}
.bbd-mobielbalk[hidden] { display: none; }
.bbd-mobielbalk-info { min-width: 0; }
.bbd-mobielbalk-naam {
  display: block; font-size: var(--bbd-t-xs); color: var(--bbd-tekst);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bbd-mobielbalk-prijs {
  display: block; font-family: var(--bbd-font-kop); font-size: 19px;
  font-weight: 700; color: var(--bbd-ink); line-height: 1.2;
}
.bbd-mobielbalk-prijs .price { font-size: inherit; }
/* "vanaf" hoort bij het bedrag maar mag er niet mee wedijveren: kleiner en
   lichter, zodat het oog op het getal blijft. */
.bbd-mobielbalk-vanaf {
  font-family: var(--bbd-font); font-size: var(--bbd-t-xs);
  font-weight: 400; color: var(--bbd-tekst);
}
.bbd-mobielbalk .bbd-knop { padding: 11px 18px; font-size: 14px; }

/* De pagina houdt onderaan ruimte vrij zodat de balk niets afdekt. */
body.single-product { padding-bottom: var(--bbd-balk-hoogte, 0px); }

@media (min-width: 961px) {
  .bbd-mobielbalk { display: none !important; }
  body.single-product { padding-bottom: 0; }
}

/* Leverdag en ophaaldag */
.bbd-datums { margin: var(--bbd-s4) 0; }
.bbd-datums-kop {
  font-size: var(--bbd-t-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bbd-tekst); margin: 0 0 var(--bbd-s2);
}
.bbd-datum-veld { margin-bottom: var(--bbd-s3); }
.bbd-datum-veld label {
  display: block; font-size: var(--bbd-t-s); font-weight: 600;
  color: var(--bbd-ink); margin-bottom: 4px;
}
.bbd-datum-veld input[type="date"] {
  width: 100%; padding: 11px 13px; font-size: var(--bbd-t-m); font-weight: 600;
  font-family: var(--bbd-font);
  border: 1.5px solid var(--bbd-line); border-radius: var(--bbd-radius);
  background: var(--bbd-paper); color: var(--bbd-ink);
}
.bbd-datum-veld input[type="date"]:focus-visible { border-color: var(--bbd-orange); }
.bbd-datums-uitleg {
  font-size: var(--bbd-t-xs); line-height: 1.5; color: var(--bbd-tekst);
  margin: 0; min-height: 34px;
}
.bbd-datums-uitleg.is-aangepast {
  color: var(--bbd-let-op); font-weight: 600;
  background: var(--bbd-let-op-bg); border-radius: var(--bbd-radius);
  padding: 8px 10px;
}

/* Prijs en knop */
.bbd-bestel-sticky .woocommerce-variation-price { margin: var(--bbd-s4) 0; }
.bbd-bestel-sticky .woocommerce-variation-price .price {
  font-family: var(--bbd-font-kop); font-size: 34px; font-weight: 700;
  color: var(--bbd-ink); letter-spacing: -.02em;
}
/* "incl. btw" komt uit de WooCommerce-instelling Prijsweergave-achtervoegsel,
   niet uit CSS. Zo staat het ook in de winkelwagen, op de factuur en in de
   e-mails, en kan het gekopieerd en voorgelezen worden. */
.bbd-bestel-sticky .woocommerce-variation-price .price small,
.bbd-bestel-sticky .woocommerce-variation-price .woocommerce-price-suffix {
  font-family: var(--bbd-font); font-size: 13px; font-weight: 400;
  color: var(--bbd-tekst); letter-spacing: 0;
}
.bbd-bestel-sticky .quantity { display: none; }
.bbd-bestel-sticky .single_add_to_cart_button {
  width: 100%; padding: 15px; font-size: 16px;
}

.bbd-redenen { margin-top: var(--bbd-s5); }
.bbd-redenen b { display: block; font-size: var(--bbd-t-m); margin-bottom: var(--bbd-s2); }
.bbd-redenen ul { list-style: none; margin: 0; padding: 0; }
.bbd-redenen li {
  display: flex; gap: var(--bbd-s2); align-items: flex-start;
  font-size: var(--bbd-t-s); color: var(--bbd-tekst); margin-bottom: 5px;
}
.bbd-redenen .bbd-icoon { color: var(--bbd-ok); flex: none; margin-top: 2px; }

.bbd-betaalmethoden {
  display: flex; flex-wrap: wrap; gap: var(--bbd-s2);
  list-style: none; margin: var(--bbd-s4) 0 0; padding: var(--bbd-s4) 0 0;
  border-top: 1px solid var(--bbd-line);
}
.bbd-betaalmethoden li { margin: 0; }
.bbd-betaalmethoden img {
  display: block; height: 26px; width: auto;
  border: 1px solid var(--bbd-line); border-radius: 4px;
  background: #fff; padding: 2px 4px;
}

/* ---------- wat mag erin, onder de kaarten ---------- */

.bbd-acceptatie {
  border: 1px solid var(--bbd-line); border-radius: 10px;
  background: var(--bbd-paper); overflow: hidden; margin: var(--bbd-s5) 0 0;
}
.bbd-acceptatie-kop {
  background: var(--bbd-concrete); border-bottom: 1px solid var(--bbd-line);
  padding: var(--bbd-s4) var(--bbd-s5);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--bbd-s4); flex-wrap: wrap;
}
.bbd-acceptatie-kop h2 { margin: 0; font-size: var(--bbd-t-xl); }
.bbd-acceptatie-kop a {
  font-size: var(--bbd-t-s); font-weight: 700; color: var(--bbd-orange-t);
  text-decoration: none; white-space: nowrap;
}
.bbd-acceptatie-kop a:hover { text-decoration: underline; }
.bbd-acceptatie-kolommen {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--bbd-s5);
  padding: var(--bbd-s5);
}
.bbd-kolom h3 {
  display: flex; align-items: center; gap: var(--bbd-s2);
  font-family: var(--bbd-font); font-size: var(--bbd-t-s);
  letter-spacing: .07em; text-transform: uppercase; font-weight: 700;
  margin: 0 0 var(--bbd-s3);
}
.bbd-kolom--wel h3  { color: var(--bbd-ok); }
.bbd-kolom--niet h3 { color: var(--bbd-fout); }
.bbd-kolom ul { margin: 0; padding-left: 18px; font-size: var(--bbd-t-m); color: var(--bbd-tekst); }
.bbd-kolom li { margin-bottom: 4px; }

.bbd-let-op, .bbd-belading {
  display: flex; gap: var(--bbd-s3); align-items: flex-start;
  padding: var(--bbd-s4) var(--bbd-s5);
  border-top: 1px solid var(--bbd-line);
  background: var(--bbd-let-op-bg);
  font-size: var(--bbd-t-m); line-height: 1.55; color: #4B4034;
  margin: 0;
}
.bbd-let-op .bbd-icoon, .bbd-belading .bbd-icoon { color: var(--bbd-let-op); flex: none; margin-top: 2px; }
.bbd-belading b { display: block; color: var(--bbd-ink); margin-bottom: 2px; }

/* ---------- hulpbalk ---------- */

.bbd-hulp {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--bbd-s5); flex-wrap: wrap;
  background: var(--bbd-paper); border: 1px solid var(--bbd-line);
  border-radius: 10px; padding: var(--bbd-s5) var(--bbd-s6);
  margin: var(--bbd-s5) 0 var(--bbd-s7);
}
.bbd-hulp-tekst { display: flex; gap: var(--bbd-s4); align-items: center; }
.bbd-hulp-tekst .bbd-icoon { color: var(--bbd-orange); flex: none; }
.bbd-hulp-tekst b { display: block; font-size: var(--bbd-t-l); letter-spacing: -.015em; }
.bbd-hulp-tekst span { font-size: var(--bbd-t-m); color: var(--bbd-tekst); }
.bbd-hulp-contact { display: flex; align-items: center; gap: var(--bbd-s5); }
.bbd-hulp-contact a:first-child { text-decoration: none; }
.bbd-hulp-contact b { display: block; font-size: var(--bbd-t-l); color: var(--bbd-ink); }
.bbd-hulp-contact span { font-size: var(--bbd-t-xs); color: var(--bbd-tekst); }
.bbd-knop {
  background: var(--bbd-orange); color: #fff; text-decoration: none;
  padding: 13px 22px; border-radius: var(--bbd-radius);
  font-family: var(--bbd-font-kop); font-weight: 600; font-size: 15px;
  letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
}
.bbd-knop:hover { background: var(--bbd-orange-d); color: #fff; }

/* ---------- smaller scherm ---------- */

/* Tablet en mobiel. Breekpunt 1024 px, gelijk aan dat van Kadence — de
   donkere ondergrond in huisstijl.css schakelt op dezelfde breedte, anders
   krijg je een strook waarin de kleur al om is maar de kolommen nog niet. */
@media (max-width: 1024px) {
  .bbd-product-raster {
    display: flex;
    flex-direction: column;
    gap: var(--bbd-s5);
  }
  .bbd-bestel-sticky { position: static; }

  /* Volgorde: titel, bestellen, dan pas foto en uitleg. Het bestelblok stond
     hiervoor onder ruim 1100 px aan tekst en beeld; nu begint het direct
     onder de titel. */
  .bbd-product-raster > .bbd-titel            { order: 1; color: #fff; }
  .bbd-product-raster > .bbd-kaart--bestellen { order: 2; }
  .bbd-product-raster > .bbd-kaart--info      { order: 3; }

  /* De bestelkaart is zelf geen kaart — het witte vlak zit op
     .bbd-bestel-sticky. Twee klassen omdat de regel voor ≤620 px anders
     alsnog padding terugzet en de inhoud 16 px laat inspringen. */
  .bbd-kaart.bbd-kaart--bestellen { padding: 0; }
}
@media (max-width: 700px) {
  .bbd-acceptatie-kolommen { grid-template-columns: 1fr; gap: var(--bbd-s4); }
}
@media (max-width: 620px) {
  .bbd-kaart { padding: var(--bbd-s5) var(--bbd-s4); }
  .bbd-punten, .bbd-vertrouwen { grid-template-columns: 1fr; gap: var(--bbd-s3); }
  .bbd-hulp { flex-direction: column; align-items: flex-start; }
  .bbd-hulp-contact { width: 100%; justify-content: space-between; }
}