/* =========================================================================
   KASSABA — WooCommerce: technische basis.
   Site-eigen bestand (assets/css/kassaba*.css), niet whitelisted, overleeft
   `wp salesfision update`. Ingeladen door includes/site-woocommerce.php.

   Dit bestand doet BEWUST maar twee dingen. De volledige shop-vormgeving
   (archief, productdetail, mand, checkout) is apart werk en hoort niet hier.
   ========================================================================= */

/* ---- 1. De contentwrapper van de engine-module -------------------------
   salesfision-woocommerce.php vervangt de WooCommerce-wrappers door
   <div class="sfwc-main max-w-7xl mx-auto px-4 py-12">. Dat zijn Tailwind-
   utilities, en Kassaba laadt bewust geen Tailwind (includes/site-assets.php
   dequeue't sf-tailwind; assets/css/tailwind.css bestaat hier niet). Zonder
   deze regel is elke shop-pagina full-bleed: geen maximumbreedte, geen
   centrering, geen padding. Zelfde maten als de rest van de site, zodat de
   winkel in dezelfde kolom staat als de blokpagina's.
   ------------------------------------------------------------------------ */
.sfwc-main {
  max-width: var(--maxw, 1280px);
  margin-inline: auto;
  padding-inline: var(--gutter, clamp(1.2rem, 5vw, 5rem));
  /* De Kassaba-header is fixed en 84px hoog (--header-h). Een symmetrische
     padding-block van 5rem kwam daar precies op uit, waardoor de eerste regel
     tegen de header aan plakte in plaats van eronder te beginnen. Bovenaan dus
     de headerhoogte PLUS lucht; onderaan alleen lucht. */
  padding-top: calc(var(--header-h, 84px) + clamp(1rem, 3vw, 2.5rem));
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
}

/* ---- 2. Designtokens naar het Kassaba-palet ----------------------------
   De CSS van de engine-module (includes/salesfision-woocommerce/assets/css/
   frontend.css) hangt volledig op --sf-color-* en --sf-font-*. Die komen uit
   includes/customizer.php met de generieke blueprint-defaults, en de
   theme-mods zijn hier leeg: gemeten op /shop/ was --sf-color-primary
   #2563eb en --sf-font-heading Inter. Knoppen, sale-badges en sterren in de
   winkel worden daarmee blauw op een lime/licht thema.

   Waarom hier en niet als theme-mod: theme-mods leven in de DB en reizen
   niet mee naar .dev of productie. Git doet dat wel. Zet de theme-mods
   daarnaast als je de admin-preview ook goed wil hebben.
   ------------------------------------------------------------------------ */
body.woocommerce,
body.woocommerce-page,
body.post-type-archive-product,
body.single-product,
body.tax-product_cat,
body.tax-product_tag {
  --sf-color-primary: #4F7F12;   /* --lime    */
  --sf-color-secondary: #33520A; /* --lime-dk */
  --sf-color-accent: #2F7A3C;    /* --leaf    */
  --sf-font-heading: 'Cormorant Garamond', Georgia, serif;
  --sf-font-body: 'Jost', system-ui, sans-serif;
}

/* ---- 3. De productgrid ------------------------------------------------
   WooCommerce styleert ul.products li.product zelf met float + een procentuele
   width (22,05% bij vier kolommen). Dat vecht met de grid van .product-grid: de
   kaarten werden ~78px breed en de derde viel buiten beeld. De <ul>/<li> blijven
   staan (geldige markup, en de eigen add-to-cart-knop van WooCommerce blijft
   werken); alleen die float-layout gaat eraf.
   ---------------------------------------------------------------------- */
.woocommerce ul.products.product-grid,
ul.products.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products.product-grid > li.product,
ul.products.product-grid > li.product {
  float: none;
  width: auto;
  margin: 0;
  clear: none;
}
/* De ::before/::after clearfix van WooCommerce op de lijst zou grid-cellen maken. */
.woocommerce ul.products.product-grid::before,
.woocommerce ul.products.product-grid::after { content: none; display: none; }

/* Let op de selector: de basisregel hierboven is `.woocommerce ul.products.product-grid`
   en dat zijn twee klassen plus een element. Een media query voegt GEEN specificiteit
   toe, dus een enkelvoudige `ul.products.product-grid` hierbinnen verliest en de grid
   bleef op smal drie kolommen staan — met horizontale overflow tot gevolg. Dezelfde
   selector dus, en niet korter. */
@media (max-width: 900px) {
  .woocommerce ul.products.product-grid,
  ul.products.product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .woocommerce ul.products.product-grid,
  ul.products.product-grid { grid-template-columns: 1fr; }
  /* Eén kaart per rij: de foto hoeft dan niet 4/5 hoog te zijn. */
  .product-grid > li.product .product-card__media { aspect-ratio: 4 / 3; }
}

/* ---- 4. De intro boven de grid --------------------------------------- */
/* De ruimte boven de intro komt van .sfwc-main; hier alleen de afstand naar de
   grid. Zonder deze margin eindigde de intro exact waar de eerste kaart begon:
   gemeten stond de verzendregel op y=434 en de bovenkant van de kaarten ook. */
.shop-intro { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.shop-intro .lead { max-width: 56ch; }
.shop-intro__verzending {
  margin-top: 1rem;
  font-size: var(--fs-sm);
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.shop-intro__verzending .woocommerce-Price-amount { color: var(--gold); font-weight: 500; }

/* ---- 5. Kaartdetails --------------------------------------------------
   LES: WooCommerce styleert `.woocommerce ul.products li.product` — twee klassen plus
   een element. Elke regel hieronder moet die specificiteit dus MINSTENS evenaren,
   anders verliest hij ongeacht de laadorde. Dat ging hier drie keer mis: de grid
   (float/width), de media queries, en de padding van de kaart. Gemeten was de padding
   van de kaart `0px 0px 16px` terwijl .product-card 1,2rem voorschrijft — vandaar dat
   de foto en alle tekst tegen de kaartrand plakten.
   ---------------------------------------------------------------------- */
.woocommerce ul.products.product-grid > li.product,
ul.products.product-grid > li.product {
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
}

/* De bronfoto's zijn vierkant (2048x2048). Met de 4/5 van de homepage bleef er
   onderin een strook leeg lime staan; 1/1 sluit precies aan op het beeld. */
.woocommerce ul.products.product-grid > li.product .product-card__media,
ul.products.product-grid > li.product .product-card__media {
  aspect-ratio: 1 / 1;
  margin-bottom: 1rem;
}

/* WooCommerce zet eigen marges op de titel, de prijs en de knop; die vochten met het
   ritme van de kaart. Hier één keer platgelegd en daarna zelf opgebouwd. */
.woocommerce ul.products.product-grid > li.product .ptype,
ul.products.product-grid > li.product .ptype { margin: 0 0 .3rem; }

.woocommerce ul.products.product-grid > li.product h3,
ul.products.product-grid > li.product h3 {
  margin: 0 0 .35rem;
  padding: 0;
  font-size: 1.35rem;
  line-height: 1.2;
}

.woocommerce ul.products.product-grid > li.product .pmeta,
ul.products.product-grid > li.product .pmeta { margin: 0 0 1.1rem; }

/* Voet onderaan de kaart, ongeacht hoe lang de titel is. */
.woocommerce ul.products.product-grid > li.product .product-card__foot,
ul.products.product-grid > li.product .product-card__foot {
  margin-top: auto;
  padding-top: .9rem;
  gap: .8rem;
}

.woocommerce ul.products.product-grid > li.product .price,
ul.products.product-grid > li.product .price {
  margin: 0;
  font-size: 1.05rem;
  font-family: var(--f-body);
  color: var(--gold);
}
.woocommerce ul.products.product-grid > li.product .price del { opacity: .55; margin-right: .4rem; }
.woocommerce ul.products.product-grid > li.product .price ins { text-decoration: none; }

/* De add-to-cart van WooCommerce als compacte Kassaba-knop. Bewust de eigen knop van
   WooCommerce: die draagt de AJAX-toevoegen en de cart-fragments. */
.woocommerce ul.products.product-grid > li.product .button,
ul.products.product-grid > li.product .button {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  color: #14120D;
  background: var(--grad-gold);
  border: 0;
  border-radius: 999px;
  padding: .6rem 1.15rem;
  line-height: 1.2;
  white-space: nowrap;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.woocommerce ul.products.product-grid > li.product .button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}
/* De "Bekijk winkelwagen"-link die WooCommerce na een AJAX-toevoeging in de kaart
   plakt: weg. Het zijpaneel schuift nu open en de teller in de header springt op 1,
   dus die link zei hetzelfde nog een derde keer en brak het kaartritme. */
.woocommerce ul.products.product-grid > li.product .added_to_cart,
ul.products.product-grid > li.product .added_to_cart { display: none; }

/* ---- 6. Header op de winkel-routes -----------------------------------
   De header staat in zijn niet-gescrolde staat op crème tekst, omdat elke
   blokpagina met een donkere foto-hero begint. De winkel begint met een lichte
   pagina, dus daar was de navigatie crème-op-wit en dus onleesbaar. Op deze
   routes meteen de donkere, "gescrolde" kleuren.
   ---------------------------------------------------------------------- */
body.woocommerce .header:not(.is-scrolled),
body.woocommerce-page .header:not(.is-scrolled) {
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-bottom-color: var(--line);
}
body.woocommerce .header:not(.is-scrolled) .brand span,
body.woocommerce .header:not(.is-scrolled) .brand b,
body.woocommerce-page .header:not(.is-scrolled) .brand span,
body.woocommerce-page .header:not(.is-scrolled) .brand b { color: var(--ink); }
body.woocommerce .header:not(.is-scrolled) .nav__links a,
body.woocommerce-page .header:not(.is-scrolled) .nav__links a { color: var(--ink-soft); }
body.woocommerce .header:not(.is-scrolled) .nav__links a:hover,
body.woocommerce .header:not(.is-scrolled) .nav__links a.is-active,
body.woocommerce-page .header:not(.is-scrolled) .nav__links a:hover,
body.woocommerce-page .header:not(.is-scrolled) .nav__links a.is-active { color: var(--gold); }
body.woocommerce .header:not(.is-scrolled) .cart-btn,
body.woocommerce-page .header:not(.is-scrolled) .cart-btn { color: var(--ink); }
body.woocommerce .header:not(.is-scrolled) .burger span,
body.woocommerce-page .header:not(.is-scrolled) .burger span { background: var(--gold); }

/* ---- 7. Ruimte onder de vaste header --------------------------------
   De Kassaba-header is fixed. Het productarchief loste dat op met de padding van
   .sfwc-main, maar winkelwagen, afrekenen en account zijn gewone pagina's zonder
   die wrapper (woocommerce_before_main_content vuurt daar niet). Hun eerste regel
   verdween daardoor achter de header. Dus op alle winkel-routes ruimte bovenaan,
   en een leesbare kolombreedte voor de pagina's die geen archief zijn.
   ---------------------------------------------------------------------- */
body.woocommerce main#content,
body.woocommerce-page main#content {
  padding-top: calc(var(--header-h) + clamp(1rem, 3vw, 2.5rem));
}
/* Het archief zet zijn eigen ruimte via .sfwc-main + het kruimelpad. */
body.post-type-archive-product main#content,
body.tax-product_cat main#content,
body.tax-product_tag main#content,
body.single-product main#content {
  padding-top: 0;
}
/* Winkelwagen, afrekenen en account lopen via page.php, en die wrapt de content in
   <div class="max-w-4xl mx-auto px-4 py-12"> — weer Tailwind-utilities die dit thema
   niet laadt, dus die wrapper was full-bleed en de kop stond tegen de linkerrand.
   Op structuur gemikt en niet op die klassenamen, want die horen bij de blueprint. */
body.woocommerce-cart main#content > div,
body.woocommerce-checkout main#content > div,
body.woocommerce-account main#content > div {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-bottom: clamp(3rem, 7vw, 5rem);
}
/* De kop van die pagina's krijgt Tailwind-tekstklassen mee; hier de eigen typografie. */
body.woocommerce-cart main#content h1,
body.woocommerce-checkout main#content h1,
body.woocommerce-account main#content h1 {
  font-family: var(--f-display);
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 300;
  color: var(--ink);
  margin-bottom: clamp(1.2rem, 3vw, 2rem);
}

/* ---- 8. Kruimelpad --------------------------------------------------- */
/* WooCommerce zet zelf `.woocommerce .woocommerce-breadcrumb { padding: 0 }` — twee
   klassen, dus dat verslaat een enkele klasse ongeacht de laadorde. Vandaar hier ook
   twee klassen. De padding-top die hier stond compenseerde de vaste header; dat doet
   .sfwc-main nu, dus die is eruit. */
body.woocommerce .woocommerce-breadcrumb,
body.woocommerce-page .woocommerce-breadcrumb {
  /* Geen eigen max-width of gutter: het kruimelpad staat al IN .sfwc-main, en die
     levert beide. Met een eigen gutter erbij stond het 72px verder ingesprongen dan
     de kaarten. */
  margin: 0 0 clamp(1.5rem, 3vw, 2.2rem);
  padding: 0;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
body.woocommerce .woocommerce-breadcrumb a { color: var(--gold); }

/* ---- 9. Zoeken en filteren -------------------------------------------
   Zit tussen de intro en de grid, en vult daarmee ook de ruimte die daar eerst
   leeg was. Zelfde kolombreedte als de rest van het archief.
   ---------------------------------------------------------------------- */
.shop-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.4rem;
  margin-bottom: clamp(1.5rem, 3.5vw, 2.4rem);
  padding-bottom: clamp(1rem, 2.5vw, 1.5rem);
  border-bottom: 1px solid var(--line);
}
.shop-tools__zoek { position: relative; flex: 1 1 260px; max-width: 340px; }
.shop-tools__icoon {
  position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--ink-mute); pointer-events: none;
}
.shop-tools__zoek input[type="search"] {
  width: 100%;
  padding: .7rem 1rem .7rem 2.5rem;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 999px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .3s var(--ease);
}
.shop-tools__zoek input[type="search"]:focus {
  outline: none;
  border-color: var(--gold);
}
.shop-tools__zoek input[type="search"]::placeholder { color: var(--ink-mute); }

.shop-tools__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.shop-chip {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .45rem 1rem;
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.shop-chip:hover { color: var(--gold); border-color: var(--glass-line); }
.shop-chip.is-actief {
  color: #14120D;
  background: var(--grad-gold);
  border-color: transparent;
}
.shop-tools__telling {
  margin: 0 0 0 auto;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.shop-leeg {
  margin: 0 0 clamp(2rem, 5vw, 3rem);
  font-size: var(--fs-lg);
  font-family: var(--f-display);
  font-style: italic;
  color: var(--ink-soft);
}
@media (max-width: 600px) {
  .shop-tools__zoek { flex: 1 1 100%; max-width: none; }
  .shop-tools__telling { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   WINKELMAND-PANEEL (zijpaneel rechts) + teller in de header
   Deze regels gelden site-breed, want de knop staat in elke header. Daarom
   laadt includes/site-woocommerce.php dit bestand overal waar WooCommerce
   actief is, en niet alleen op de winkel-routes.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---- Teller op het mandje ---------------------------------------------
   GEEN eigen styling hier. assets/css/kassaba.css regel 193-199 heeft de badge al
   volledig: positie, maat, lime vulling, `transform: scale(0)` als startstand, de
   klasse `.is-visible` om hem tevoorschijn te laten komen en een `bump`-animatie.
   Dat was alleen nooit aangesloten — er was geen code die .is-visible zette, dus de
   badge stond altijd op scale(0) en was onzichtbaar. Nu zet de header-render die
   klasse bij een aantal > 0, en de fragment-callback in site-cart-drawer.php houdt
   hem bij. Een tweede .cart-badge-regel hier zou alleen maar met die vechten.
   ---------------------------------------------------------------------- */

/* ---- Het paneel ------------------------------------------------------- */
.kassaba-drawer__achtergrond {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(20, 18, 13, .38);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .32s var(--ease);
}
.kassaba-drawer__achtergrond.is-open { opacity: 1; }

.kassaba-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 310;
  width: min(420px, 100vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-left: 1px solid var(--line);
  box-shadow: -24px 0 60px -30px rgba(20, 18, 13, .35);
  transform: translateX(100%);
  transition: transform .38s var(--ease);
  overflow: hidden;
}
.kassaba-drawer.is-open { transform: translateX(0); }
.kassaba-drawer.is-bezig { opacity: .6; pointer-events: none; }
html.is-drawer-open { overflow: hidden; }

.kassaba-drawer__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem var(--gutter-drawer, 1.6rem);
  border-bottom: 1px solid var(--line);
}
.kassaba-drawer__kop h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--ink);
}
.kassaba-drawer__sluit {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
  background: transparent;
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.kassaba-drawer__sluit svg { width: 15px; height: 15px; }
.kassaba-drawer__sluit:hover { color: var(--gold); border-color: var(--glass-line); }

.kassaba-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 1.4rem var(--gutter-drawer, 1.6rem) 1.8rem;
}

/* Lege staat */
.kassaba-drawer__leeg { text-align: center; padding: 2.5rem 0 1rem; }
.kassaba-drawer__leeg-icoon { display: block; color: var(--ink-mute); margin-bottom: 1rem; }
.kassaba-drawer__leeg-icoon svg { width: 30px; height: 30px; margin: 0 auto; }
.kassaba-drawer__leeg-kop {
  font-family: var(--f-display);
  font-size: 1.35rem;
  color: var(--ink);
  margin: 0 0 .35rem;
}
.kassaba-drawer__leeg-tekst { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0 0 1.6rem; }

/* Knoppen */
.kassaba-drawer__knop {
  display: block;
  text-align: center;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: #14120D;
  background: var(--grad-gold);
  border-radius: 999px;
  padding: .8rem 1.4rem;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.kassaba-drawer__knop:hover { transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.kassaba-drawer__link {
  display: block;
  text-align: center;
  margin-top: .8rem;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.kassaba-drawer__link:hover { color: var(--gold); }

/* De mini-cart van WooCommerce binnen het paneel.
   Let op de markup: WooCommerce zet de <img> BINNEN de titel-link en geeft hem
   `float: right`, dus de foto stond rechts van de naam. De link wordt hier een
   flexrij (de img is het eerste kind, dus die komt links) en de float gaat eraf.
   De regel eronder is een grid van twee kolommen: links naam + aantal, rechts het
   kruisje. */
.kassaba-drawer ul.cart_list { margin: 0; padding: 0; list-style: none; }
.kassaba-drawer ul.cart_list li.mini_cart_item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .25rem .8rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--line);
}
.kassaba-drawer ul.cart_list li.mini_cart_item a:not(.remove) {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: .85rem;
  font-family: var(--f-display);
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--ink);
}
.kassaba-drawer ul.cart_list li.mini_cart_item a:not(.remove):hover { color: var(--gold); }
.kassaba-drawer ul.cart_list li.mini_cart_item img {
  float: none;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  object-fit: contain;
  border-radius: var(--radius);
  background: linear-gradient(160deg, #C6F24A 0%, #A3E635 52%, #84CC16 100%);
  padding: 4px;
  margin: 0;
}
.kassaba-drawer ul.cart_list li.mini_cart_item .quantity {
  grid-column: 1;
  grid-row: 2;
  padding-left: calc(54px + .85rem);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
/* WooCommerce zet `.woocommerce a.remove { color: red !important }`, dus hier ook
   !important - anders blijft het kruisje schreeuwend rood in een lime paneel. */
.kassaba-drawer ul.cart_list li.mini_cart_item a.remove {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  color: var(--ink-mute) !important;
  border-radius: 50%;
  transition: color .3s var(--ease), background .3s var(--ease);
}
.kassaba-drawer ul.cart_list li.mini_cart_item a.remove:hover {
  color: #8A1F1F !important;
  background: rgba(20, 18, 13, .06);
}
.kassaba-drawer .woocommerce-mini-cart__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 1.2rem 0 1.1rem;
  padding-top: .2rem;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.kassaba-drawer .woocommerce-mini-cart__total strong { font-weight: 500; }
.kassaba-drawer .woocommerce-mini-cart__total .amount {
  font-family: var(--f-display);
  font-size: 1.5rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold);
}
.kassaba-drawer .woocommerce-mini-cart__buttons { display: block; margin: 0; }

/* ---- Voortgang naar gratis verzending ---------------------------------
   De drempel komt uit de verzendinstelling zelf (min_amount van de zone die bij
   het bezorgadres hoort), dus er staat nergens een hardgecodeerd bedrag. Het
   balkje wordt via de WooCommerce-fragments meeververst en beweegt dus mee zodra
   je iets toevoegt of verwijdert.
   ---------------------------------------------------------------------- */
.kassaba-freeship {
  margin: 0 0 1.2rem;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--glass);
}
.kassaba-freeship__tekst {
  margin: 0 0 .6rem;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.kassaba-freeship.is-gehaald .kassaba-freeship__tekst {
  color: var(--gold);
  font-weight: 500;
}
.kassaba-freeship__baan {
  height: 5px;
  border-radius: 999px;
  background: rgba(20, 18, 13, .10);
  overflow: hidden;
}
.kassaba-freeship__vulling {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--grad-gold);
  transition: width .5s var(--ease);
}

@media (max-width: 480px) {
  .kassaba-drawer { width: 100vw; }
}

/* ---- Aantalkiezer op de kaart ----------------------------------------
   Staat naast de knop in de kaartvoet. Bij drie elementen op één rij (prijs,
   stepper, knop) wordt het krap onder ~340px kaartbreedte; daar gaat de voet naar
   twee regels.
   ---------------------------------------------------------------------- */
.woocommerce ul.products.product-grid > li.product .product-card__foot,
ul.products.product-grid > li.product .product-card__foot {
  flex-wrap: wrap;
}
.product-card__koop { display: flex; align-items: center; gap: .55rem; }

.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--glass);
}
.qty-stepper__knop {
  width: 28px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.qty-stepper__knop:hover:not(:disabled) { color: var(--gold); background: rgba(20,18,13,.04); }
.qty-stepper__knop:disabled { opacity: .3; cursor: default; }

.qty-stepper__veld {
  width: 30px;
  height: 30px;
  padding: 0;
  text-align: center;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-inline: 1px solid var(--line);
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty-stepper__veld::-webkit-outer-spin-button,
.qty-stepper__veld::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper__veld:focus { outline: none; background: rgba(79,127,18,.06); }

/* Onder deze kaartbreedte past prijs + stepper + knop niet meer op één regel. */
@media (max-width: 1080px) and (min-width: 901px) {
  .woocommerce ul.products.product-grid > li.product .product-card__foot,
  ul.products.product-grid > li.product .product-card__foot { row-gap: .7rem; }
  .product-card__koop { width: 100%; justify-content: space-between; }
}
@media (max-width: 700px) {
  .product-card__koop { width: 100%; justify-content: space-between; }
}

/* ---- Aantal per regel in het paneel ---------------------------------- */
.kassaba-drawer__aantal {
  display: flex !important;
  align-items: center;
  gap: .6rem;
  padding-left: calc(54px + .85rem);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.kassaba-drawer__aantal .qty-stepper { background: transparent; }
.kassaba-drawer__aantal .qty-stepper__waarde {
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--ink);
  border-inline: 1px solid var(--line);
}
.kassaba-drawer__aantal .qty-stepper__knop { height: 28px; }
.kassaba-drawer__stuksprijs { white-space: nowrap; }

/* ---- 10. De productpagina ---------------------------------------------
   Deze sectie voegt geen nieuwe vormgeving toe: ze hangt `div.product` aan het
   bespoke vocabulaire dat al in kassaba.css staat (.product-detail,
   .product-stage, .product-info, .spec-row, .qty). Zie includes/site-product.php
   voor waarom.

   SPECIFICITEIT — dezelfde les als bij de grid, hier opnieuw: WooCommerce
   styleert met `.woocommerce div.product div.summary` (klasse + element, drie
   niveaus diep). Elke regel hieronder moet dat MINSTENS evenaren, anders
   verliest hij ongeacht de laadorde. Vandaar de lange selectoren; dat is geen
   overdaad maar de ondergrens.
   ---------------------------------------------------------------------- */

/* De pagina als geheel: dezelfde twee kolommen als .product-detail. */
.woocommerce div.product,
.woocommerce-page div.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* WooCommerce laat de galerij en de samenvatting naast elkaar FLOATEN op 48%.
   In een grid geeft dat een kolom die nog eens 48% van zijn eigen spoor wordt.

   DE ID-VAL, en de reden dat deze selector zo lang is. WooCommerce declareert:
     .woocommerce #content div.product div.summary,
     .woocommerce div.product div.summary, ...  { float: right; width: 48% }
   Specificiteit geldt per losse selector, niet per lijst. Die eerste bevat
   `#content` — en page.php van de blueprint rendert `<main id="content">`, dus
   hij matcht hier. Eén id verslaat elk aantal klassen, dus een selector met
   alleen klassen verliest ongeacht de laadorde.

   Gemeten met een DOM-probe: het spoor was 511,8px maar div.summary kwam uit op
   float=right en width=245,7px — exact 48% van dat spoor. Gevolg: de halve
   kolom stond leeg en "VERZENDGEWICHT 0,55 KG" viel over twee regels. Daarom
   hieronder dezelfde vier varianten als WooCommerce zelf, met .entry-summary
   erbij als extra klasse. Dit geldt binnen div.product ook voor div.images,
   div.thumbnails, .woocommerce-tabs en `#reviews .comment img`. */
.woocommerce #content div.product div.summary.entry-summary,
.woocommerce div.product div.summary.entry-summary,
.woocommerce-page #content div.product div.summary.entry-summary,
.woocommerce-page div.product div.summary.entry-summary {
  float: none;
  clear: none;
  width: auto;
  margin: 0;
  /* NAAMBOTSING, en de belangrijkste regel van deze sectie. kassaba.css heeft
     een `.summary` voor het bestelpaneel van de winkelwagen: sticky, rand,
     glass-achtergrond, backdrop-filter, eigen padding. WooCommerce noemt de
     rechterkolom van de productpagina óók `summary`, dus die kolom stond hier
     als een zwevende kaart in plaats van als vrije tekstkolom — precies de
     "past niet bij de rest"-indruk. Alles wat dat paneel zet, hier terug. */
  position: static;
  top: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Het fotopodium vult zijn kolom. .product-stage uit kassaba.css levert de
   3/4-verhouding en de rand.

   WAT HIER OVERSCHREVEN WORDT, en waarom: dat podium is ontworpen voor het
   oorspronkelijke DONKERE thema, met een lime gloed van 8% op een donkere
   ondergrond. Na de omslag naar licht (zie de token-sectie in kassaba.css) is
   dezelfde gloed op wit vrijwel onzichtbaar: gemeten leest het podium als een
   bijna-witte doos met een klein flesje erin. Precies daar viel de pagina uit de
   toon, want de kaarten op /shop/ en de homepage zetten de fles op een VOL lime
   vlak met een witte gloed erachter.

   Dus hier dezelfde behandeling als .product-card__media, alleen groter: zelfde
   verloop, zelfde witte gloed onder het midden zodat het licht uit de romp van
   de fles lijkt te komen, en dezelfde drop-shadow. Zo is de productpagina
   herkenbaar dezelfde familie als de etalage ervoor. */
.woocommerce div.product .product-stage {
  width: auto;
  margin: 0;
  float: none;
  overflow: hidden;
  background: linear-gradient(160deg, #C6F24A 0%, #A3E635 52%, #84CC16 100%);
  border-color: transparent;
}
/* De gloed ACHTER de fles: z-index 0, de foto krijgt z-index 1, de badge 2. */
.woocommerce div.product .product-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(34% 30% at 50% 55%,
    rgba(255,255,255,.98) 0%,
    rgba(255,255,255,.66) 32%,
    rgba(255,255,255,.22) 64%,
    rgba(255,255,255,0)   100%);
}
.woocommerce div.product .product-stage .product-stage__bottle {
  position: relative;
  z-index: 1;
  max-height: 84%;
  max-width: 84%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 30px rgba(20,18,13,.26));
}

/* ---- De rechterkolom -------------------------------------------------- */
.woocommerce div.product .summary.entry-summary .kicker { margin-bottom: .9rem; }

.woocommerce div.product .summary.entry-summary h1.product_title {
  clear: none;
  margin: 0;
  padding: 0;
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  font-weight: 300;
  line-height: 1.04;
  color: var(--ink);
}
/* Het formaat achter het kastlijntje: lichter en cursief, zodat de merknaam de
   kop blijft en het formaat een onderregel wordt in plaats van evenveel gewicht
   te krijgen. */
.woocommerce div.product .summary.entry-summary h1.product_title .kassaba-pdp__formaat {
  display: block;
  margin-top: .2rem;
  font-size: .48em;
  font-style: italic;
  color: var(--ink-soft);
  letter-spacing: .01em;
}

.woocommerce div.product .summary.entry-summary .kassaba-pdp__kort {
  margin: .9rem 0 0;
}

/* De prijs: het formaat uit het ontwerp (.product-info > .price), met de
   btw-regel als kleine tweede regel eronder. */
.woocommerce div.product .summary.entry-summary p.price {
  display: block;
  margin: 1.4rem 0 0;
  font-family: var(--f-display);
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--gold);
}
.woocommerce div.product .summary.entry-summary p.price small {
  display: block;
  margin-top: .35rem;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.woocommerce div.product .summary.entry-summary p.price del { opacity: .5; }
.woocommerce div.product .summary.entry-summary p.price ins { text-decoration: none; }

/* De specregel met de randen boven en onder, zoals .product-info .spec-row. */
.woocommerce div.product .summary.entry-summary .spec-row {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.3rem 0;
  margin: 1.8rem 0;
  gap: clamp(1.2rem, 3vw, 2.4rem);
}
.woocommerce div.product .summary.entry-summary .spec b { font-size: 1.5rem; }

/* ---- Koopblok --------------------------------------------------------- */
.woocommerce div.product form.cart {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  margin: 0;
}
.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after { content: none; display: none; }

/* .qty is de wrapper die site-product.php om het veld van WooCommerce zet. Het
   veld blijft van WooCommerce (voorraadgrens, `quantity`-post); alleen de
   knoppen komen erbij. div.quantity valt met display:contents weg als laag,
   zodat knop / veld / knop echt drie flex-kinderen van .qty zijn. */
.woocommerce div.product form.cart div.quantity {
  display: contents;
  float: none;
  margin: 0;
}
.woocommerce div.product form.cart .qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--glass);
  float: none;
}
.woocommerce div.product form.cart .qty > button {
  width: 44px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-body);
  font-size: 1.2rem;
  line-height: 1;
  color: var(--gold);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background .25s var(--ease);
}
.woocommerce div.product form.cart .qty > button:hover:not(:disabled) { background: var(--glass-2); }
.woocommerce div.product form.cart .qty > button:disabled { opacity: .3; cursor: default; }
.woocommerce div.product form.cart .qty input.kassaba-qty__veld,
.woocommerce div.product form.cart input.kassaba-qty__veld {
  width: 52px;
  height: 46px;
  padding: 0;
  text-align: center;
  font-family: var(--f-body);
  font-size: var(--fs-md);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-inline: 1px solid var(--line);
  border-radius: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
.woocommerce div.product form.cart input.kassaba-qty__veld::-webkit-outer-spin-button,
.woocommerce div.product form.cart input.kassaba-qty__veld::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.woocommerce div.product form.cart input.kassaba-qty__veld:focus {
  outline: none;
  background: rgba(79,127,18,.06);
}
/* WooCommerce verstopt het label voor schermlezers met .screen-reader-text; die
   klasse komt uit de blueprint-CSS die hier niet laadt, dus zelf wegzetten in
   plaats van display:none — anders verdwijnt hij ook voor de schermlezer. */
.woocommerce div.product form.cart .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* De koopknop als .btn.btn--solid. Moet `.woocommerce button.button.alt`
   verslaan, vandaar de extra niveaus. */
.woocommerce div.product form.cart button.button,
.woocommerce div.product form.cart button.button.alt,
.woocommerce div.product form.cart .single_add_to_cart_button {
  float: none;
  margin: 0;
  padding: .95rem 2rem;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  color: #120E03;
  background: var(--grad-gold);
  border: 1px solid transparent;
  border-radius: 999px;
  box-shadow: 0 10px 30px -10px rgba(163,230,53,.5);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  /* Zonder nowrap brak "Toevoegen aan winkelwagen" binnen de pil over twee
     regels zodra de kolom krap werd; met flex-wrap op form.cart zakt de knop
     dan liever hele naar de volgende regel. */
  white-space: nowrap;
}
.woocommerce div.product form.cart button.button.alt:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
  background: var(--grad-gold);
}
.woocommerce div.product form.cart button.button.alt:disabled {
  opacity: .35;
  transform: none;
  box-shadow: none;
}

/* De beloften onder de knop: geen bullets, een lime streepje ervoor. */
.woocommerce div.product .summary.entry-summary .kassaba-pdp__beloften {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}
.woocommerce div.product .summary.entry-summary .kassaba-pdp__beloften li {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.woocommerce div.product .summary.entry-summary .kassaba-pdp__beloften li::before {
  content: '';
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1px;
  background: var(--grad-gold-text);
  transform: translateY(-.32em);
}
.woocommerce div.product .summary.entry-summary .kassaba-pdp__beloften .amount { color: var(--gold); }

.woocommerce div.product .summary.entry-summary .kassaba-pdp__artikel {
  margin: 1.6rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---- De secties onder het koopblok ------------------------------------
   Deze staan als kinderen van `div.product` in de DOM, dus ze moeten over
   beide kolommen lopen. Ritme uit .section, ingekort omdat .sfwc-main zelf al
   ruimte onderaan zet. */
.woocommerce div.product .kassaba-pdp__sectie,
.woocommerce div.product section.related {
  grid-column: 1 / -1;
  padding-top: clamp(3.2rem, 7vw, 5.5rem);
  border-top: 1px solid var(--line);
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}
.woocommerce div.product .kassaba-pdp__sectie .section-head { margin-bottom: clamp(1.8rem, 3vw, 2.4rem); }
.woocommerce div.product .kassaba-pdp__sectie .section-head h2 {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 300;
}

.woocommerce div.product .kassaba-pdp__prose {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}
.woocommerce div.product .kassaba-pdp__prose p {
  font-size: var(--fs-lg);
  line-height: 1.6;
  font-weight: 300;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}
.woocommerce div.product .kassaba-pdp__prose .tembe-divider { margin: 2.2rem auto; }
.woocommerce div.product .kassaba-pdp__cta { margin: 0; }

/* ---- Gerelateerde producten ------------------------------------------- */
.woocommerce div.product section.related > h2 {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 300;
  text-align: center;
  margin: 0 0 clamp(1.8rem, 3vw, 2.4rem);
  color: var(--ink);
}
/* Met drie producten in de catalogus toont een productpagina ALTIJD precies twee
   gerelateerde kaarten. In de vaste drie kolommen van .product-grid bleef de
   derde kolom dus altijd leeg, en dat las als een ontbrekende kaart.
   auto-fit klapt lege sporen weg: twee kaarten worden twee kolommen, drie worden
   drie, en op smal zakt het van zichzelf naar één. De max-width houdt de kaarten
   bij twee stuks op etalageformaat in plaats van ze op te blazen. */
.woocommerce div.product section.related ul.products.product-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  max-width: 860px;
  margin-inline: auto;
}
/* Zelfde maatverkleining als [data-related] in kassaba.css: vierkante foto en
   een kleinere titel, want deze kaarten zijn een naschrift en geen etalage. */
.woocommerce div.product section.related ul.products.product-grid > li.product .product-card__media { aspect-ratio: 1; }
.woocommerce div.product section.related ul.products.product-grid > li.product h3 { font-size: 1.2rem; }

/* ---- Reviews ----------------------------------------------------------
   De review-template van WooCommerce brengt een WP-reactieformulier mee. De
   veldstijl komt uit .field in kassaba.css; hier alleen toegepast op de
   klassen die WooCommerce gebruikt.
   ---------------------------------------------------------------------- */
.woocommerce div.product .kassaba-pdp__reviews { max-width: 720px; margin-inline: auto; }
.woocommerce div.product #reviews #comments > h2 { display: none; }
.woocommerce div.product #reviews .woocommerce-noreviews {
  text-align: center;
  font-size: var(--fs-md);
  color: var(--ink-mute);
  margin: 0 0 2rem;
}
.woocommerce div.product #reviews ol.commentlist { padding: 0; margin: 0 0 2.4rem; list-style: none; }
.woocommerce div.product #reviews ol.commentlist li { margin: 0 0 1.2rem; }
.woocommerce div.product #reviews ol.commentlist li .comment_container {
  display: flex;
  gap: 1.1rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--glass);
}
.woocommerce #content div.product #reviews ol.commentlist li img.avatar,
.woocommerce div.product #reviews ol.commentlist li img.avatar {
  position: static;
  width: 48px; height: 48px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
}
.woocommerce div.product #reviews ol.commentlist li .comment-text { margin: 0; padding: 0; border: 0; }
.woocommerce div.product #reviews ol.commentlist li .comment-text p.meta {
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.woocommerce div.product #reviews .star-rating span { color: var(--gold); }

.woocommerce div.product #review_form_wrapper .comment-reply-title {
  display: block;
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 1rem;
}
.woocommerce div.product #review_form_wrapper .comment-form { display: grid; gap: 1.1rem; }
.woocommerce div.product #review_form_wrapper .comment-form p { margin: 0; }
.woocommerce div.product #review_form_wrapper .comment-form label {
  display: block;
  margin-bottom: .4rem;
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.woocommerce div.product #review_form_wrapper .comment-form input[type="text"],
.woocommerce div.product #review_form_wrapper .comment-form input[type="email"],
.woocommerce div.product #review_form_wrapper .comment-form textarea,
.woocommerce div.product #review_form_wrapper .comment-form select {
  width: 100%;
  padding: .9rem 1.1rem;
  font-family: var(--f-body);
  font-size: var(--fs-md);
  color: var(--ink);
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .25s var(--ease);
}
.woocommerce div.product #review_form_wrapper .comment-form input:focus,
.woocommerce div.product #review_form_wrapper .comment-form textarea:focus,
.woocommerce div.product #review_form_wrapper .comment-form select:focus {
  outline: none;
  border-color: var(--gold);
}
.woocommerce div.product #review_form_wrapper .comment-form textarea { min-height: 140px; resize: vertical; }
.woocommerce div.product #review_form_wrapper .comment-form .comment-notes,
.woocommerce div.product #review_form_wrapper .comment-form .comment-form-cookies-consent label {
  font-size: var(--fs-sm);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-mute);
}
.woocommerce div.product #review_form_wrapper .comment-form-cookies-consent { display: flex; align-items: center; gap: .6rem; }
.woocommerce div.product #review_form_wrapper .comment-form-cookies-consent input { width: auto; }
.woocommerce div.product #review_form_wrapper .comment-form-cookies-consent label { margin: 0; }
.woocommerce div.product #review_form_wrapper .comment-form .required { color: var(--gold); }
.woocommerce div.product #review_form_wrapper .form-submit input#submit,
.woocommerce div.product #reviews #respond input#submit {
  justify-self: start;
  width: auto;
  padding: .95rem 2rem;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(20,18,13,.022);
  border: 1px solid rgba(163,230,53,.35);
  border-radius: 999px;
  transition: color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.woocommerce div.product #reviews #respond input#submit:hover {
  color: var(--gold);
  border-color: var(--gold);
  transform: translateY(-2px);
}

/* ---- Eén kolom -------------------------------------------------------- */
@media (max-width: 900px) {
  .woocommerce div.product,
  .woocommerce-page div.product { grid-template-columns: minmax(0, 1fr); }
  .woocommerce div.product .summary.entry-summary h1.product_title { font-size: clamp(2.1rem, 8vw, 2.8rem); }
  .woocommerce div.product .summary.entry-summary .spec-row { gap: 1.2rem 2rem; }
  .woocommerce div.product form.cart { gap: .7rem; }
  .woocommerce div.product form.cart button.button.alt,
  .woocommerce div.product form.cart .single_add_to_cart_button { flex: 1 1 auto; }
}
@media (max-width: 560px) {
  /* Vier specs op een smalle kolom brak als 3 + 1: de laatste stond alleen op
     een tweede regel. Een 2x2-raster leest rustiger dan een weduwe. */
  .woocommerce div.product .summary.entry-summary .spec-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
  }
  .woocommerce div.product .kassaba-pdp__prose p { font-size: var(--fs-md); }
  .woocommerce div.product #reviews ol.commentlist li .comment_container { flex-direction: column; padding: 1.2rem; }
}
/* Onder deze breedte past "Toevoegen aan winkelwagen" met nowrap niet meer naast
   de gutters. Dan liever twee regels binnen de pil dan een knop die buiten het
   scherm valt: horizontale overflow is de ergere van de twee. */
@media (max-width: 420px) {
  .woocommerce div.product form.cart button.button.alt,
  .woocommerce div.product form.cart .single_add_to_cart_button {
    white-space: normal;
    letter-spacing: .1em;
    padding-inline: 1.2rem;
  }
}

/* =========================================================================
   11. Winkelwagen, afrekenen en account
   -------------------------------------------------------------------------
   Deze drie pagina's draaien op de KLASSIEKE shortcodes ([woocommerce_cart],
   [woocommerce_checkout], [woocommerce_my_account]) en niet op de blok-
   varianten die WooCommerce standaard neerzet. Die blokken renderen in React
   en tekenen hun eigen velden, tabellen en knoppen; themastyling gaat er
   grotendeels langs. Gemeten voor de omzetting: /winkelwagen/ was 293 KB en
   geen enkele regel hieronder raakte de inhoud.

   De omzetting zelf staat in tools/woo-basis.php sectie 7 — die leeft in de
   database, dus na een `down -v` of op een verse omgeving moet dat script
   opnieuw draaien. Zelfde keuze als bij superstubborn.

   LET OP bij het aanpassen: WooCommerce styleert met selectors als
   `.woocommerce table.shop_table td` (klasse + element + element). Elke regel
   hieronder moet die specificiteit minstens evenaren, anders verliest hij
   ongeacht de laadorde. Dat is de reden dat de selectors lang zijn.
   ========================================================================= */

/* ---- 11.1 De contentkolom ----------------------------------------------
   page.php zet de inhoud in <div class="prose prose-lg max-w-none">, en
   kassaba.css geeft .prose een max-width van 740px. Voor een lopende tekst is
   dat precies goed, maar de winkelwagentabel met de totalen ernaast en het
   afrekenformulier met twee kolommen hebben de hele kolom nodig. Gemeten stond
   alles in een 740px-kolom midden in 1280px, met een lege strook links.
   `max-w-none` had dit moeten doen, maar dat is een Tailwind-utility en die
   laadt hier niet.
   ------------------------------------------------------------------------ */
body.woocommerce-cart main#content .prose,
body.woocommerce-checkout main#content .prose,
body.woocommerce-account main#content .prose {
  max-width: none;
}

/* ---- 11.2 Knoppen -------------------------------------------------------
   Eén pilvorm voor de hele winkel, gelijk aan .btn in kassaba.css en aan de
   koopknop op de productpagina. WooCommerce zet zijn eigen achtergrond op
   `.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce
   button.button, .woocommerce input.button` — vier selectors van gelijke
   specificiteit, dus die lijst wordt hier één op één gespiegeld.
   ------------------------------------------------------------------------ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  padding: .95rem 1.9rem;
  border-radius: 999px;
  border: 1px solid rgba(79,127,18,.35);
  background: rgba(20,18,13,.022);
  color: var(--ink);
  white-space: nowrap;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              border-color .35s, color .35s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: rgba(20,18,13,.022);
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}

/* De hoofdactie per pagina: doorgaan naar afrekenen, bestelling plaatsen.
   WooCommerce hangt daar `.alt` aan. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  background: var(--grad-gold);
  color: #120E03;
  border-color: transparent;
  box-shadow: 0 10px 30px -10px rgba(163,230,53,.5);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
  background: var(--grad-gold);
  color: #120E03;
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}
/* "Update winkelwagen" staat uit tot je een aantal wijzigt. Woo geeft hem dan
   alleen `disabled`; zonder deze regel bleef hij als volwaardige knop lezen. */
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce input.button:disabled {
  opacity: .32;
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
}

/* ---- 11.3 Meldingen -----------------------------------------------------
   De groene balk "… is toegevoegd aan je winkelwagen" en zijn broertjes. Woo
   zet er een dikke gekleurde rand bovenop en een grijs vlak; dat vecht met de
   rust van de rest van de site.
   ------------------------------------------------------------------------ */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-error {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 1.6rem;
  padding: 1rem 1.4rem;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--ink);
  background: rgba(79,127,18,.06);
  border: 1px solid rgba(79,127,18,.22);
  border-top-width: 1px;         /* Woo zet hier 3px in een accentkleur. */
  border-radius: 14px;
  list-style: none;
}
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-error {
  background: rgba(176,38,38,.05);
  border-color: rgba(176,38,38,.25);
}
/* Woo tekent het vinkje/uitroepteken als ::before met een eigen font. Laten
   staan, maar in de accentkleur en zonder de absolute positionering die bij
   het oude blokmodel hoorde. */
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before,
.woocommerce-page .woocommerce-message::before,
.woocommerce-page .woocommerce-info::before,
.woocommerce-page .woocommerce-error::before {
  position: static;
  color: var(--gold);
}
.woocommerce .woocommerce-error::before,
.woocommerce-page .woocommerce-error::before { color: #B02626; }
/* De knop in de melding ("Bekijk winkelwagen") mag de regel niet domineren. */
.woocommerce .woocommerce-message a.button,
.woocommerce-page .woocommerce-message a.button {
  margin-left: auto;
  padding: .7rem 1.4rem;
}

/* ---- 11.4 Invoervelden --------------------------------------------------
   WooCommerce tekent zijn velden via eigen custom properties in plaats van via
   gewone declaraties. Die op de body zetten is minder werk en breekt minder
   dan een gevecht met `.woocommerce form .form-row .input-text`. Zelfde truc
   als bij superstubborn.
   ------------------------------------------------------------------------ */
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account {
  --wc-form-color-background: #FFFFFF;
  --wc-form-color-text: var(--ink);
  --wc-form-color-border: var(--line);
  --wc-form-border-radius: 12px;
  --wc-form-border-width: 1px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select {
  width: 100%;
  padding: .85rem 1rem;
  font-family: var(--f-body);
  font-size: var(--fs-md);
  line-height: 1.4;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: none;
  transition: border-color .25s, box-shadow .25s;
}
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row textarea { min-height: 110px; resize: vertical; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-page form .form-row input.input-text:focus,
.woocommerce-page form .form-row textarea:focus,
.woocommerce-page form .form-row select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(79,127,18,.12);
}
.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
  display: block;
  margin-bottom: .4rem;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  letter-spacing: .03em;
  color: var(--ink-soft);
}
.woocommerce form .form-row .required,
.woocommerce-page form .form-row .required {
  color: var(--gold);
  text-decoration: none;
  border: 0;
}
/* Woo legt de twee helften naast elkaar met floats en procenten. Grid doet dat
   zonder clearfix, en `.form-row-wide` vult beide kolommen. */
.woocommerce form .woocommerce-billing-fields__field-wrapper,
.woocommerce form .woocommerce-shipping-fields__field-wrapper,
.woocommerce-page form .woocommerce-billing-fields__field-wrapper,
.woocommerce-page form .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.1rem;
}
.woocommerce form .form-row,
.woocommerce-page form .form-row {
  float: none;
  width: auto;
  margin: 0 0 1.1rem;
  padding: 0;
}
.woocommerce form .form-row-wide,
.woocommerce form .form-row.notes,
.woocommerce-page form .form-row-wide,
.woocommerce-page form .form-row.notes { grid-column: 1 / -1; }
/* Postcode en plaats horen naast elkaar; Woo geeft ze allebei `form-row-wide`,
   dus op id mikken. */
.woocommerce form #billing_postcode_field,
.woocommerce form #billing_city_field,
.woocommerce form #shipping_postcode_field,
.woocommerce form #shipping_city_field { grid-column: auto; }
.woocommerce form .form-row .clear,
.woocommerce-page form .form-row .clear { display: none; }

/* =========================================================================
   12. De winkelwagen
   ========================================================================= */

/* De floats van woocommerce-layout.css uit, op ELKE breedte — niet alleen in
   de tweekolomsindeling hieronder.
   GEMETEN PROBLEEM: tussen 769px en 980px greep de grid nog niet en de
   mobiele CSS van Woo niet meer. Daar bleef `.cart-collaterals` op
   `float:right; width:48%` staan, zonder clearfix eromheen: de totalenkolom
   liep dwars over de footer heen.
   En één laag dieper hetzelfde: `.cart_totals` is óók 48%, van zijn ouder.
   In een kolom van 350px werd dat 168px, waar "Doorgaan naar afrekenen" niet
   meer in paste — de tekst liep buiten de pil. */
body.woocommerce-cart .woocommerce .cart-collaterals,
body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals {
  float: none;
  width: auto;
}
/* Gestapeld (onder 981px) hoort er lucht tussen de actierij van de tabel en de
   kop "Totalen winkelwagen"; in de tweekolomsindeling staan ze naast elkaar en
   is die marge juist verkeerd. */
@media (max-width: 980px) {
  body.woocommerce-cart .woocommerce .cart-collaterals { margin-top: clamp(2rem, 5vw, 3rem); }
}

/* Tabel links, totalen rechts. Woo doet dit met floats (`.cart-collaterals`
   op float:right, 48%), wat naast de tabel een lege strook liet en de totalen
   pas ver onder de tabel liet beginnen. Grid negeert die floats. */
@media (min-width: 981px) {
  body.woocommerce-cart .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    align-items: start;
    gap: clamp(2rem, 4vw, 3.5rem);
  }
  /* De meldingen lopen over de volle breedte, boven beide kolommen. */
  body.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
  body.woocommerce-cart .woocommerce > .cart-collaterals {
    position: sticky;
    /* Onder de vaste header blijven hangen bij het scrollen. */
    top: calc(var(--header-h, 84px) + 1.5rem);
  }
}
body.woocommerce-cart .woocommerce .cart-collaterals::before,
body.woocommerce-cart .woocommerce .cart-collaterals::after { content: none; display: none; }

/* ---- De regels ---------------------------------------------------------- */
.woocommerce table.shop_table.cart {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  font-family: var(--f-body);
  /* GEMETEN PROBLEEM: met de automatische tabelindeling verdeelde de browser de
     overruimte van 730px volstrekt ongelijk — de (lege) verwijderkolom werd
     439px breed, de thumbnailkolom 13px en de productnaam 76px, waardoor
     "Kwakio — fles 33 cl" over drie regels brak. De thumbnail kromp mee naar
     13px, want `img { max-width: 100% }` uit kassaba.css klemt hem op de cel.
     Een width op de td alleen hielp niet; auto-layout mag die negeren zodra de
     eerste rij overbepaald is. Met table-layout:fixed bepalen de breedtes in de
     thead de kolommen, en die staan hieronder. */
  table-layout: fixed;
}
.woocommerce table.shop_table.cart thead th.product-remove { width: 40px; }
.woocommerce table.shop_table.cart thead th.product-thumbnail { width: 96px; }
.woocommerce table.shop_table.cart thead th.product-name { width: auto; }
.woocommerce table.shop_table.cart thead th.product-price { width: 104px; }
.woocommerce table.shop_table.cart thead th.product-quantity { width: 104px; }
.woocommerce table.shop_table.cart thead th.product-subtotal { width: 116px; }
.woocommerce table.shop_table.cart thead th {
  padding: 0 0 .9rem;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: left;
  background: transparent;
  border-bottom: 1px solid var(--line);
}
.woocommerce table.shop_table.cart thead th.product-price,
.woocommerce table.shop_table.cart thead th.product-quantity,
.woocommerce table.shop_table.cart thead th.product-subtotal { text-align: right; }
.woocommerce table.shop_table.cart tbody td {
  padding: 1.4rem .6rem;
  vertical-align: middle;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.woocommerce table.shop_table.cart tbody td.product-price,
.woocommerce table.shop_table.cart tbody td.product-quantity,
.woocommerce table.shop_table.cart tbody td.product-subtotal { text-align: right; }
.woocommerce table.shop_table.cart tbody td.product-remove { width: 2.4rem; padding-left: 0; }
.woocommerce table.shop_table.cart tbody td.product-thumbnail { width: 92px; }
/* Woo geeft de thumbnail 32px. Op een bierfles is dat niet te zien. */
.woocommerce table.shop_table.cart tbody td.product-thumbnail img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  background: var(--glass);
  border-radius: 12px;
  padding: .4rem;
}
.woocommerce table.shop_table.cart tbody td.product-name a {
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  color: var(--ink);
  transition: color .3s;
}
.woocommerce table.shop_table.cart tbody td.product-name a:hover { color: var(--gold); }
.woocommerce table.shop_table.cart tbody td.product-subtotal .woocommerce-Price-amount {
  font-weight: 500;
  color: var(--ink);
}
/* De × om een regel te verwijderen. Woo zet daar `color: red !important` op;
   dat is de enige plek in dit bestand waar !important nodig is. */
.woocommerce table.shop_table.cart td.product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ink-mute) !important;
  background: transparent;
  border-radius: 999px;
  transition: background .25s, color .25s;
}
.woocommerce table.shop_table.cart td.product-remove a.remove:hover {
  color: #B02626 !important;
  background: rgba(176,38,38,.08);
}
/* Het aantalveld in de rij: dezelfde pil als op de productpagina, zonder de
   plus/min-knoppen (die komen daar uit site-product.php). */
.woocommerce table.shop_table.cart td.product-quantity div.quantity {
  display: inline-flex;
  float: none;
  margin: 0;
}
.woocommerce table.shop_table.cart td.product-quantity input.qty {
  width: 66px;
  height: 44px;
  padding: 0;
  text-align: center;
  font-family: var(--f-body);
  font-size: var(--fs-md);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.woocommerce table.shop_table.cart td.product-quantity input.qty:focus {
  outline: none;
  border-color: var(--gold);
}

/* ---- De actierij: waardebon en bijwerken ------------------------------- */
.woocommerce table.shop_table.cart td.actions {
  padding: 1.4rem 0 0;
  border-bottom: 0;
  text-align: left;
}
.woocommerce table.shop_table.cart td.actions .coupon {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  float: none;
  padding: 0;
  vertical-align: middle;
}
.woocommerce table.shop_table.cart td.actions .coupon::before,
.woocommerce table.shop_table.cart td.actions .coupon::after { content: none; display: none; }
/* Het veld was op 100px afgeknipt ("Waardebc"); een code past daar niet in. */
.woocommerce table.shop_table.cart td.actions .coupon input#coupon_code {
  width: auto;
  min-width: 180px;
  flex: 0 1 220px;
  height: 46px;
  padding: 0 1.1rem;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.woocommerce table.shop_table.cart td.actions .coupon input#coupon_code:focus {
  outline: none;
  border-color: var(--gold);
}
/* GEMETEN PROBLEEM: hier stond `display: flex` op de cel. Een <td> met een
   ander display dan table-cell valt uit de tabelindeling, en daarmee vervalt
   ook zijn colspan="6" — de actierij werd 40px breed, de breedte van de eerste
   kolom. De cel blijft dus een gewone table-cell; de indeling komt van een
   inline-flex om de waardebon en de eigen float van WooCommerce op de knop. */
.woocommerce table.shop_table.cart td.actions > button.button {
  float: right;
  margin-left: 1rem;
}

/* ---- De totalen --------------------------------------------------------- */
.woocommerce .cart_totals > h2,
.woocommerce-page .cart_totals > h2 {
  margin: 0 0 1rem;
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink);
  text-transform: none;
}
.woocommerce .cart_totals table.shop_table {
  width: 100%;
  margin: 0;
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  border-collapse: collapse;
  background: var(--bg-2);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
}
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
  padding: .7rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  vertical-align: top;
  font-weight: 400;
  color: var(--ink-soft);
}
.woocommerce .cart_totals table.shop_table th { width: 40%; text-align: left; }
.woocommerce .cart_totals table.shop_table td { text-align: right; color: var(--ink); }
.woocommerce .cart_totals table.shop_table tr.order-total th,
.woocommerce .cart_totals table.shop_table tr.order-total td {
  border-bottom: 0;
  padding-top: 1rem;
  font-size: var(--fs-lg);
  color: var(--ink);
}
.woocommerce .cart_totals table.shop_table tr.order-total td strong { font-weight: 500; }
.woocommerce .cart_totals table.shop_table tr.order-total .includes_tax {
  display: block;
  margin-top: .2rem;
  font-size: var(--fs-xs);
  color: var(--ink-mute);
}
.woocommerce .cart_totals ul#shipping_method,
.woocommerce .cart_totals ul.woocommerce-shipping-methods {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
}
.woocommerce .cart_totals .woocommerce-shipping-destination,
.woocommerce .cart_totals .woocommerce-shipping-calculator {
  margin: .5rem 0 0;
  font-size: var(--fs-xs);
  color: var(--ink-mute);
}
.woocommerce .wc-proceed-to-checkout { padding: 1.2rem 0 0; }
.woocommerce .wc-proceed-to-checkout a.checkout-button {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 1.1rem 1.6rem;
  font-size: var(--fs-sm);
}

/* =========================================================================
   13. Afrekenen
   ========================================================================= */

/* Gegevens links, bestelling plus betalen rechts. Woo zet `.col-1` en `.col-2`
   naast elkaar op 47% en gooit het besteloverzicht eronder over de volle
   breedte; de rechterkolom bleef daardoor grotendeels leeg. */
@media (min-width: 981px) {
  body.woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    align-items: start;
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }
  body.woocommerce-checkout form.checkout > #customer_details { grid-column: 1; grid-row: 1 / span 3; }
  body.woocommerce-checkout form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
  body.woocommerce-checkout form.checkout > #order_review { grid-column: 2; grid-row: 2; }
  /* Het betaalblok hoort onder het overzicht, in dezelfde kolom. */
  body.woocommerce-checkout form.checkout > #order_review #payment { margin-top: 1.2rem; }
}
/* Facturatie en verzending onder elkaar in de linkerkolom. Naast elkaar op
   47% werd elk veld een smalle strook zodra de kolom zelf al 60% was. */
body.woocommerce-checkout form.checkout #customer_details .col-1,
body.woocommerce-checkout form.checkout #customer_details .col-2 {
  float: none;
  width: auto;
}
body.woocommerce-checkout form.checkout #customer_details .col-2 { margin-top: 1.5rem; }
body.woocommerce-checkout form.checkout #customer_details.col2-set::before,
body.woocommerce-checkout form.checkout #customer_details.col2-set::after { content: none; display: none; }

body.woocommerce-checkout form.checkout h3,
body.woocommerce-checkout form.checkout #order_review_heading {
  margin: 0 0 1.1rem;
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 500;
  color: var(--ink);
  text-transform: none;
}
body.woocommerce-checkout form.checkout h3#ship-to-different-address {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--ink-soft);
}
body.woocommerce-checkout form.checkout h3#ship-to-different-address label {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  cursor: pointer;
}

/* ---- Het besteloverzicht ------------------------------------------------ */
.woocommerce #order_review,
.woocommerce-page #order_review {
  padding: 1.4rem 1.5rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.woocommerce table.shop_table.woocommerce-checkout-review-order-table {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  border-collapse: collapse;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
}
.woocommerce table.shop_table.woocommerce-checkout-review-order-table thead th {
  padding: 0 0 .7rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: transparent;
  border-bottom: 1px solid var(--line);
}
.woocommerce table.shop_table.woocommerce-checkout-review-order-table th,
.woocommerce table.shop_table.woocommerce-checkout-review-order-table td {
  padding: .7rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font-weight: 400;
}
.woocommerce table.shop_table.woocommerce-checkout-review-order-table td { text-align: right; color: var(--ink); }
.woocommerce table.shop_table.woocommerce-checkout-review-order-table th { text-align: left; }
.woocommerce table.shop_table.woocommerce-checkout-review-order-table tr.cart_item td.product-name,
.woocommerce table.shop_table.woocommerce-checkout-review-order-table tr.cart_item th.product-name { text-align: left; }
.woocommerce table.shop_table.woocommerce-checkout-review-order-table .product-quantity {
  color: var(--ink-mute);
  font-weight: 400;
}
.woocommerce table.shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce table.shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
  border-bottom: 0;
  padding-top: 1rem;
  font-size: var(--fs-lg);
  color: var(--ink);
}
.woocommerce table.shop_table.woocommerce-checkout-review-order-table .includes_tax {
  display: block;
  margin-top: .2rem;
  font-size: var(--fs-xs);
  color: var(--ink-mute);
}
.woocommerce #order_review ul#shipping_method {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
}

/* ---- Betalen ------------------------------------------------------------ */
.woocommerce #payment,
.woocommerce-page #payment {
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.woocommerce #payment ul.payment_methods,
.woocommerce-page #payment ul.payment_methods {
  margin: 0;
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--line);
  list-style: none;
}
.woocommerce #payment div.form-row.place-order,
.woocommerce-page #payment div.form-row.place-order {
  margin: 0;
  padding: 1.2rem 0 0;
}
.woocommerce #payment .woocommerce-privacy-policy-text p,
.woocommerce-page #payment .woocommerce-privacy-policy-text p {
  margin: 0 0 1rem;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-mute);
}
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
  display: flex;
  justify-content: center;
  float: none;
  width: 100%;
  margin: 0;
  padding: 1.1rem 1.6rem;
  font-size: var(--fs-sm);
}
/* Het waardebon-uitklapje boven het formulier. */
.woocommerce form.checkout_coupon {
  margin: 0 0 1.6rem;
  padding: 1.2rem 1.4rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.woocommerce form.checkout_coupon .form-row-first,
.woocommerce form.checkout_coupon .form-row-last { width: auto; float: none; }
@media (min-width: 601px) {
  .woocommerce form.checkout_coupon {
    display: flex;
    align-items: center;
    gap: .8rem;
  }
  .woocommerce form.checkout_coupon .form-row { margin-bottom: 0; }
  .woocommerce form.checkout_coupon .form-row-first { flex: 0 1 260px; }
}

/* =========================================================================
   14. Mijn account
   ========================================================================= */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  border-bottom: 1px solid var(--line);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: inline-block;
  padding: .6rem 0;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  letter-spacing: .04em;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  transition: color .3s, border-color .3s;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  max-width: 460px;
  margin: 0;
  padding: 1.6rem 1.7rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 18px;
}

/* =========================================================================
   15. Smal scherm
   -------------------------------------------------------------------------
   WooCommerce heeft hiervoor woocommerce-smallscreen.css: onder 768px wordt
   elke rij van een `.shop_table_responsive` een blokje met het kolomkopje als
   ::before uit `data-title`. Dat mechanisme blijft staan — het werkt en het is
   toegankelijk. Alleen de opmaak komt hier vandaan.
   ========================================================================= */
@media (max-width: 768px) {
  .woocommerce table.shop_table_responsive.cart,
  .woocommerce table.shop_table_responsive.cart tbody { display: block; }
  .woocommerce table.shop_table_responsive.cart tbody tr.cart_item {
    display: block;
    margin-bottom: 1rem;
    padding: .4rem .9rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
  }
  .woocommerce table.shop_table_responsive.cart tbody tr td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem 0;
    text-align: right;
    border-bottom: 1px solid var(--line);
  }
  .woocommerce table.shop_table_responsive.cart tbody tr td:last-child { border-bottom: 0; }
  .woocommerce table.shop_table_responsive.cart tbody tr td::before {
    font-family: var(--f-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-mute);
  }
  /* Woo verbergt de productfoto op smal scherm. Bij drie bieren die alleen in
     formaat verschillen is juist die foto het snelste onderscheid.
     LET OP DE `#content`: woocommerce-smallscreen.css verbergt hem met
     `.woocommerce-page #content table.cart .product-thumbnail{display:none}`.
     Daar zit een ID in, en een ID wint van elk aantal klassen — zonder
     `#content` in onze eigen selector bleef de foto weg, hoe specifiek de rest
     ook was. header.php zet `<main id="content">`, dus die haak is er. */
  body.woocommerce-cart #content table.shop_table_responsive.cart tbody td.product-thumbnail {
    display: flex;
    justify-content: flex-start;
    width: auto;
  }
  .woocommerce table.shop_table_responsive.cart tbody td.product-thumbnail::before { content: none; }
  .woocommerce table.shop_table_responsive.cart tbody td.product-thumbnail img { width: 64px; height: 64px; }
  .woocommerce table.shop_table_responsive.cart tbody td.product-remove {
    justify-content: flex-end;
    padding-top: .4rem;
    border-bottom: 0;
  }
  .woocommerce table.shop_table_responsive.cart tbody td.product-remove::before { content: none; }
  .woocommerce table.shop_table_responsive.cart td.actions {
    display: block;
    padding: 0;
    border: 0;
  }
  /* De waardebonregel was inline-flex (desktop) en kromp daardoor om zijn
     inhoud; op smal scherm horen veld en knop de volle breedte te vullen. */
  .woocommerce table.shop_table_responsive.cart td.actions .coupon {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  .woocommerce table.shop_table_responsive.cart td.actions .coupon input#coupon_code { flex: 1 1 100%; }
  .woocommerce table.shop_table_responsive.cart td.actions .coupon button.button { width: 100%; }
  .woocommerce table.shop_table_responsive.cart td.actions > button.button {
    width: 100%;
    margin: .7rem 0 0;
  }
  /* De kop van de tabel is op smal scherm dubbelop: elke cel heeft zijn eigen
     label uit data-title. */
  .woocommerce table.shop_table_responsive.cart thead { display: none; }

  /* De totalen blijven een gewone tabel op smal scherm: twee kolommen van
     "Subtotaal / € 26,00" passen prima. Het label uit `data-title` dat Woo er
     als ::before bij zet is dan dubbelop — er stond letterlijk
     "Subtotaal  Subtotaal: € 26,00". */
  .woocommerce .cart_totals table.shop_table th,
  .woocommerce .cart_totals table.shop_table td { display: table-cell; }
  .woocommerce .cart_totals table.shop_table tr td::before,
  .woocommerce-page .cart_totals table.shop_table tr td::before { content: none; }
  .woocommerce #order_review,
  .woocommerce-page #order_review { padding: 1.1rem 1.1rem; }
  .woocommerce form .woocommerce-billing-fields__field-wrapper,
  .woocommerce form .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-page form .woocommerce-billing-fields__field-wrapper,
  .woocommerce-page form .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: 1fr;
  }
  .woocommerce .woocommerce-message a.button,
  .woocommerce-page .woocommerce-message a.button {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
}

/* ---- 16. Naslepertjes uit de visuele controle --------------------------
   Drie dingen die pas op het scherm opvielen, na de meting van de indeling.
   ------------------------------------------------------------------------ */

/* Het land-keuzeveld hield een donkere rand terwijl de tekstvelden de zachte
   lijn van het thema kregen. WooCommerce styleert `.woocommerce form .form-row
   select` met dezelfde specificiteit als de regel in sectie 11.4; bij gelijke
   specificiteit wint de laatst geladen stylesheet, en dat is hier niet altijd
   de onze. Met `body.` ervoor is de uitkomst niet meer van de laadorde
   afhankelijk. */
body.woocommerce-cart form .form-row select,
body.woocommerce-checkout form .form-row select,
body.woocommerce-account form .form-row select {
  border: 1px solid var(--line);
  border-radius: 12px;
  background-color: #fff;
}
body.woocommerce-cart form .form-row select:focus,
body.woocommerce-checkout form .form-row select:focus,
body.woocommerce-account form .form-row select:focus {
  border-color: var(--gold);
}

/* In de totalen stonden de toelichtingen onder "Verzending" rechts uitgelijnd.
   Op een kolom van 350px levert dat een rafelige linkerrand over drie regels;
   bedragen horen rechts, lopende tekst links. */
.woocommerce .cart_totals .woocommerce-shipping-destination,
.woocommerce .cart_totals .woocommerce-shipping-calculator,
.woocommerce .cart_totals .shipping-calculator-button {
  text-align: left;
}
.woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals td {
  text-align: right;
}
.woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals td p,
.woocommerce .cart_totals table.shop_table tr.woocommerce-shipping-totals td .woocommerce-shipping-destination {
  margin-top: .4rem;
  text-align: left;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-mute);
}

/* De knop "Update winkelwagen" staat uit tot je een aantal wijzigt. Met alleen
   opacity .32 op een lichte pil was het verschil met de actieve knop ernaast
   nauwelijks te zien; een vlakke grijze pil leest eenduidiger als "nu niet". */
.woocommerce table.shop_table.cart td.actions > button.button:disabled {
  background: var(--glass-2);
  border-color: transparent;
  color: var(--ink-mute);
  opacity: 1;
  box-shadow: none;
}

/* ---- 17. Smal scherm: de regels van WooCommerce mét een ID --------------
   woocommerce-smallscreen.css beschermt een handvol regels met `#content`
   (header.php zet `<main id="content">`). Een ID wint van elk aantal klassen,
   dus deze zijn met klassen alleen niet te overschrijven. Dat gold voor de
   productfoto in de winkelwagen — die staat in sectie 15 — en voor de twee
   hieronder. Alles wat hier staat, staat hier omdat het gemeten is, niet
   omdat het mooier leek.
   ------------------------------------------------------------------------ */
@media (max-width: 768px) {
  /* `.woocommerce #content table.cart td.actions .coupon .button, … input
     { width: 48% }`. Twee blokjes van 48% naast elkaar is op 390px te krap
     voor "Waardebon toepassen"; onder elkaar en allebei vol leest beter. */
  body.woocommerce-cart #content table.cart td.actions .coupon .input-text,
  body.woocommerce-cart #content table.cart td.actions .coupon input,
  body.woocommerce-cart #content table.cart td.actions .coupon .button {
    width: 100%;
    float: none;
  }
  body.woocommerce-cart #content table.cart td.actions .coupon .button { margin-top: .6rem; }
  /* De clearfix die Woo als ::before/::after op .coupon zet maakt met
     display:flex twee lege flex-kinderen, en dus een gat boven het veld. */
  body.woocommerce-cart #content table.cart td.actions .coupon::before,
  body.woocommerce-cart #content table.cart td.actions .coupon::after {
    content: none;
    display: none;
  }
  /* Het kruisje om een regel te verwijderen hoort rechtsboven in de kaart, aan
     dezelfde kant als de bedragen. */
  body.woocommerce-cart #content table.shop_table_responsive.cart tbody td.product-remove {
    display: flex;
    justify-content: flex-end;
    /* GEMETEN: de cel bleef 38px breed — de `width: 2.4rem` uit sectie 12, die
       op het brede scherm de kolom smal houdt. Binnen een kaart die de volle
       351px is, had justify-content daardoor niets om mee uit te lijnen en
       stond het kruisje links. */
    width: auto;
  }
  /* Woo zet om-en-om een grijs vlak achter de rijen
     (`tr:nth-child(2n) td { background-color: rgba(0,0,0,.025) }`). In de
     kaarten van de winkelwagen en in de totalen gaf dat halve grijze blokken
     zonder betekenis. */
  .woocommerce table.shop_table_responsive tr:nth-child(2n) td,
  .woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
    background-color: transparent;
  }
}