/* ==========================================================================
   shop-flow.css — LAATSTE laag van de shopflow: PDP add-to-cart + USP-vak,
   WAPF productopties, side cart opties, winkelwagen- en afrekenpagina.

   Waarom dit bestand bestaat:
   WooCommerce levert eigen CSS mee met hoge(re) specificiteit dan de
   themalagen — o.a. `:where(...) .woocommerce button.button.alt` (paars),
   `table.shop_table` (rand + 5px radius) en `.wc-proceed-to-checkout
   a.checkout-button` (font-size 1.25em / padding 1em). Die worden hier
   centraal rechtgezet met het bestaande palet uit global.css. Geen nieuwe
   kleuren: alles via --brand / --soft / --secondary / --line / --radius.

   Alle selectors zijn opzettelijk `body`-geprefixt waar ze een Woo-regel
   moeten verslaan; verwijder die prefix niet "voor de netheid".
   Bump LZ_VERSION bij elke wijziging.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. WooCommerce design-tokens omzetten naar het thema (paars → branding).
      Woo zet deze op :root (0,1,0); `:root:root` (0,2,0) wint, ongeacht
      laadvolgorde.
   ----------------------------------------------------------------------- */
:root:root{
  --woocommerce:var(--brand);
  --wc-primary:var(--brand);
  --wc-primary-text:var(--brand-contrast);
  --wc-secondary:var(--soft);
  --wc-secondary-text:var(--brand);
  --wc-highlight:var(--brand);
  --wc-highligh-text:var(--brand-contrast);
  --wc-form-border-color:var(--secondary);
  --wc-form-border-radius:0;
}

/* --------------------------------------------------------------------------
   1. ÉÉN knopstijl voor de hele shopflow — verslaat Woo's `.button.alt`
      (paars) overal: PDP, winkelwagen, afrekenen, order-pay, notices.
   ----------------------------------------------------------------------- */
body .woocommerce button.button.alt,
body .woocommerce a.button.alt,
body .woocommerce input.button.alt,
body .woocommerce button.button.alt.disabled,
body .woocommerce a.button.alt.disabled,
body .woocommerce input.button.alt.disabled,
body .woocommerce button.button.alt:disabled,
body .woocommerce button.button.alt:disabled[disabled],
body .woocommerce input.button.alt:disabled,
body .woocommerce input.button.alt:disabled[disabled],
body .woocommerce #place_order,
body .woocommerce .wc-proceed-to-checkout a.checkout-button,
body .woocommerce .wc-proceed-to-checkout a.checkout-button.alt,
body .lz-atc button.single_add_to_cart_button,
body .wc-block-components-button:not(.is-link){
  background:var(--brand);
  background-color:var(--brand);
  background-image:none;
  color:var(--brand-contrast);
  border:1px solid var(--brand);
  border-radius:0;
  box-shadow:none;
  text-shadow:none;
  font-family:var(--font-body);
  font-size:11.5px;
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
  line-height:1;
  padding:17px 34px;
  text-decoration:none;
  cursor:pointer;
  transition:.45s var(--ease);
}
body .woocommerce button.button.alt:hover,
body .woocommerce a.button.alt:hover,
body .woocommerce input.button.alt:hover,
body .woocommerce #place_order:hover,
body .woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
body .lz-atc button.single_add_to_cart_button:hover,
body .wc-block-components-button:not(.is-link):hover{
  background:transparent;
  background-color:transparent;
  color:var(--brand);
  border-color:var(--brand);
}
/* uitgeschakeld blijft bruin, maar duidelijk inactief */
body .woocommerce button.button.alt.disabled,
body .woocommerce button.button.alt:disabled,
body .woocommerce button.button.alt:disabled[disabled],
body .lz-atc button.single_add_to_cart_button.disabled,
body .lz-atc button.single_add_to_cart_button:disabled{
  opacity:.4;cursor:not-allowed;background:var(--brand);color:var(--brand-contrast);
}

/* secundaire knoppen (Winkelwagen bijwerken, Kortingscode toepassen) —
   bewust alleen op winkelwagen + afrekenen, zodat de knoppen op de shop-,
   account- en productpagina's exact blijven zoals ze waren. */
body.woocommerce-cart .woocommerce button.button:not(.alt),
body.woocommerce-cart .woocommerce input.button:not(.alt),
body.woocommerce-checkout .woocommerce button.button:not(.alt),
body.woocommerce-checkout .woocommerce input.button:not(.alt){
  background:transparent;color:var(--brand);border:1px solid var(--brand);border-radius:0;
  font-family:var(--font-body);font-size:11.5px;font-weight:400;letter-spacing:.22em;
  text-transform:uppercase;line-height:1;padding:17px 28px;cursor:pointer;transition:.45s var(--ease);
}
body.woocommerce-cart .woocommerce button.button:not(.alt):hover,
body.woocommerce-cart .woocommerce input.button:not(.alt):hover,
body.woocommerce-checkout .woocommerce button.button:not(.alt):hover,
body.woocommerce-checkout .woocommerce input.button:not(.alt):hover{
  background:var(--brand);color:var(--brand-contrast);
}
body.woocommerce-cart .woocommerce button.button:disabled,
body.woocommerce-cart .woocommerce input.button:disabled{opacity:.4;cursor:not-allowed}

/* --------------------------------------------------------------------------
   2. PDP — add-to-cart knop op volle breedte + USP's in een rustig vak.
   ----------------------------------------------------------------------- */
.lz-atc button.single_add_to_cart_button,
.lz-atc .single_add_to_cart_button{
  flex:1 1 auto;min-width:0;min-height:52px;
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
}

/* USP-vak onder de knop: achtergrond iets donkerder dan de pagina (--soft
   t.o.v. --bg), zachte afronding, geen harde rand. */
.product-usps{
  display:flex;flex-direction:column;gap:14px;
  margin-top:26px;padding:22px 24px;
  background:var(--soft);border:0;border-radius:8px;
}
.product-usp{
  display:flex;align-items:flex-start;gap:12px;
  font-size:13px;line-height:1.5;color:var(--text-soft);
}
.product-usp svg{width:16px;height:16px;color:var(--brand);flex:none;margin-top:3px}
.product-usp strong{font-weight:500;color:var(--text)}

@media(max-width:560px){
  .product-usps{padding:18px;gap:12px;margin-top:22px}
  .product-usp{font-size:12.5px}
}

/* --------------------------------------------------------------------------
   3. WAPF — Advanced Product Fields in de themastyling.
      Veldtypes op deze site: text · textarea · text-swatch · image-swatch ·
      file (Dropzone). Metrics gelijk aan de afrekenvelden.
   ----------------------------------------------------------------------- */

/* De velden worden door WAPF binnen form.cart gezet. Bij een eenvoudig
   product staat die form op `flex-direction:row`; zonder deze regel wordt
   het hele optieblok platgeknepen naast aantal + knop. */
.lz-atc form.cart{flex-wrap:wrap}
.lz-atc form.cart > .wapf{flex:1 0 100%;width:100%;order:-1}

.lz-atc .wapf{width:100%}
.lz-atc .wapf-wrapper{width:100%;margin:0 -6px 2px}
.lz-atc .wapf-field-group,
.lz-atc .wapf-section{display:flex;flex-wrap:wrap;width:100%}
.lz-atc .wapf-field-container{padding:0 6px 22px;box-sizing:border-box}
.lz-atc .wapf-field-container:last-child{padding-bottom:4px}

/* labels */
.lz-atc .wapf-field-label{display:flex;align-items:center;margin-bottom:10px}
.lz-atc .label-above .wapf-field-label{margin-bottom:10px}
.lz-atc .wapf-field-label label{
  margin:0;font-family:var(--font-body);font-size:11px;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text);line-height:1.3;
}
/* verplicht-sterretje (WAPF zet alleen .wapf-required op de container) */
.lz-atc .wapf-field-container.wapf-required > .wapf-field-label label > span::after{
  content:" *";color:var(--brand);letter-spacing:0;font-size:13px;line-height:1;
}

/* helptekst */
.lz-atc .wapf-field-description{
  font-size:12px;line-height:1.6;color:var(--text-soft);opacity:1;margin-top:8px;
}
.lz-atc .wapf-tt-wrap{color:var(--text-light);margin-left:7px;cursor:help}
.lz-atc .wapf-tt-wrap svg{width:14px;height:14px}
body .wapf-ttp{
  background:var(--brand);color:var(--brand-contrast);
  font-family:var(--font-body);font-size:12px;line-height:1.5;border-radius:var(--radius);
}
body .wapf-ttp::after{background:var(--brand)}

/* invoervelden */
.lz-atc .wapf-field-input input[type=text]:not([data-is-file]),
.lz-atc .wapf-field-input input[type=email],
.lz-atc .wapf-field-input input[type=url],
.lz-atc .wapf-field-input input[type=tel],
.lz-atc .wapf-field-input input[type=number],
.lz-atc .wapf-field-input input[type=date],
.lz-atc .wapf-field-input textarea{
  width:100%;box-sizing:border-box;
  border:1px solid var(--secondary);border-radius:0;background:#fff;
  padding:12px 14px;min-height:48px;
  font-family:var(--font-body);font-size:14px;font-weight:300;color:var(--brand);line-height:1.5;
  -webkit-appearance:none;appearance:none;
  transition:border-color .3s var(--ease);
}
.lz-atc .wapf-field-input select{
  width:100%;box-sizing:border-box;
  border:1px solid var(--secondary);border-radius:0;background:#fff;
  padding:12px 14px;min-height:48px;
  font-family:var(--font-body);font-size:14px;color:var(--brand);
  transition:border-color .3s var(--ease);
}
.lz-atc .wapf-field-input textarea{min-height:110px;resize:vertical;line-height:1.6}
.lz-atc .wapf-field-input input:focus,
.lz-atc .wapf-field-input textarea:focus,
.lz-atc .wapf-field-input select:focus{outline:none;border-color:var(--brand)}
.lz-atc .wapf-field-input input::placeholder,
.lz-atc .wapf-field-input textarea::placeholder{color:var(--text-light);opacity:1}

/* losse checkbox / radio (niet-swatch) */
.lz-atc .wapf-field-input input[type=checkbox],
.lz-atc .wapf-field-input input[type=radio]{
  float:none;margin:0 8px 0 0;accent-color:var(--brand);width:auto;min-height:0;
}
.lz-atc .wapf-field-input ul{list-style:none;margin:0;padding:0}
.lz-atc .wapf-field-input ul li{display:flex;align-items:center;font-size:14px;margin-bottom:8px}

/* ---- tekst-swatches (bv. "Type: Tekst / Logo", "Lettertype") ---- */
.lz-atc .wapf-swatch-wrapper{display:flex;flex-wrap:wrap;gap:10px}
.lz-atc .wapf-swatch{cursor:pointer;position:relative;box-sizing:border-box}
.lz-atc .wapf-swatch--text{
  margin:0;padding:12px 18px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--secondary);border-radius:0;background:#fff;
  font-family:var(--font-body);font-size:12px;font-weight:400;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-soft);line-height:1;
  transition:.3s var(--ease);
}
.lz-atc .wapf-swatch--text:hover{border-color:var(--brand);color:var(--brand)}
.lz-atc .wapf-swatch.wapf-swatch--text.wapf-checked{
  border-color:var(--brand);background:var(--brand);color:var(--brand-contrast);
}

/* ---- kleur/afbeelding-swatches (bv. "Kleur sticker", 10 kleuren) ---- */
.lz-atc .wapf-image-swatch-wrapper{grid-gap:12px;gap:12px}
.lz-atc .wapf-swatch--image{
  width:100%;margin:0;padding:6px;
  border:1px solid var(--secondary);border-radius:var(--radius);background:#fff;
  text-align:center;transition:.25s var(--ease);
}
.lz-atc .wapf-swatch--image img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;vertical-align:bottom}
.lz-atc .wapf-swatch--image:hover{border-color:var(--accent)}
.lz-atc .wapf-swatch.wapf-swatch--image.wapf-checked{
  border-color:var(--brand);box-shadow:0 0 0 1px var(--brand);
}
/* duidelijke 'geselecteerd'-stand: vinkje rechtsboven */
.lz-atc .wapf-swatch.wapf-swatch--image.wapf-checked::after{
  content:"";position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;
  background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px 10px no-repeat;
  box-shadow:0 0 0 2px var(--bg);
}
.lz-atc .wapf-swatch-label{padding:7px 2px 1px;font-size:11px;line-height:1.3;color:var(--text-soft)}
.lz-atc .wapf-swatch.wapf-checked .wapf-swatch-label{color:var(--brand)}
/* kleurblok-swatches (type 'color'), mocht dat type later gebruikt worden */
.lz-atc .wapf-swatch--color{margin:0}
.lz-atc .wapf-swatch--color .wapf-color{border-radius:50%;border:1px solid var(--line)}
.lz-atc .wapf-swatch--color.wapf-checked .wapf-color{border:3px solid #fff;box-shadow:0 0 0 2px var(--brand)}

/* ---- bestandsupload (Dropzone) ---- */
.lz-atc .wapf-field-file .dzone{
  border:1px dashed var(--secondary);border-radius:var(--radius);background:#fff;
  padding:26px 18px;text-align:center;cursor:pointer;transition:.3s var(--ease);
}
.lz-atc .wapf-field-file .dzone:hover{border-color:var(--brand);background:var(--soft)}
.lz-atc .wapf-field-file .dz-message{margin:0;font-size:13px;color:var(--text-soft);line-height:1.6}
.lz-atc .wapf-field-file .dz-message span{color:var(--brand);text-decoration:underline}
.lz-atc .wapf-field-file .dz-preview{
  margin-top:12px;padding:10px 12px;background:var(--soft);
  border-radius:var(--radius);font-size:12.5px;color:var(--text);
}
.lz-atc .wapf-field-file .dz-filename{overflow-wrap:anywhere}
.lz-atc .wapf-field-file .dz-progress{background:var(--secondary)}
.lz-atc .wapf-field-file .dz-upload{background:var(--brand)}
.lz-atc .wapf-field-file .dz-remove{cursor:pointer;color:var(--text-light);transition:.3s}
.lz-atc .wapf-field-file .dz-remove:hover{color:#b3261e}
.lz-atc .wapf-dz-error{font-size:12px;color:#b3261e;margin-top:8px}

/* prijsopslag bij een optie */
.lz-atc .wapf-price-label,
.lz-atc .wapf_price_label{font-size:12px;color:var(--text-soft)}

@media(max-width:560px){
  .lz-atc .wapf-swatch--text{padding:11px 14px;font-size:11.5px}
  .lz-atc .wapf-image-swatch-wrapper{grid-gap:10px;gap:10px}
}

/* --------------------------------------------------------------------------
   4. SIDE CART — gekozen productopties onder de productregel.
      inc/side-cart.php rendert nu de <dl class="variation"> variant, zodat
      het er exact zo uitziet als op de winkelwagenpagina.
   ----------------------------------------------------------------------- */
.lz-cart-item{grid-template-columns:70px minmax(0,1fr) auto}
.lz-cart-item > div{min-width:0}
.lz-cart-item__name{overflow-wrap:anywhere}
.lz-cart-item__meta{font-size:11.5px;color:var(--text-light);margin-bottom:8px;min-width:0}
.lz-cart-item__meta dl.variation{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 6px;margin:0;
}
.lz-cart-item__meta dl.variation dt{
  float:none;clear:none;margin:0;padding:0;font-weight:400;color:var(--text-light);
}
.lz-cart-item__meta dl.variation dd{
  float:none;margin:0;padding:0;min-width:0;color:var(--text-soft);overflow-wrap:anywhere;
}
.lz-cart-item__meta dl.variation dd p{margin:0;line-height:1.5}
.lz-cart-item__meta p{margin:0}

/* --------------------------------------------------------------------------
   5. WINKELWAGENPAGINA — rand weg, nette padding, normale prijsgroottes,
      desktop: producten links / totalen rechts.
   ----------------------------------------------------------------------- */

/* De PDP-regel `.product-price{font-size:26px;font-family:var(--font-head)}`
   uit shortcodes.css lekt in `td.product-price` van de klassieke tabel.
   Hier teruggezet naar normale bodytekst. */
body.woocommerce-cart .woocommerce table.shop_table th.product-price,
body.woocommerce-cart .woocommerce table.shop_table td.product-price,
body.woocommerce-cart .woocommerce table.shop_table td.product-subtotal,
body.woocommerce-checkout .woocommerce table.shop_table td.product-price{
  font-family:var(--font-body);font-size:14px;font-weight:300;color:var(--text);
}
body.woocommerce-cart .woocommerce table.shop_table th.product-price{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft);
}
body.woocommerce-cart .woocommerce table.shop_table td.product-subtotal{
  font-weight:500;color:var(--brand);white-space:nowrap;
}

/* tabel: geen kader, geen 5px radius, geen -1px marge (alles van Woo) */
body.woocommerce-cart .woocommerce table.shop_table{
  width:100%;border:0;border-radius:0;border-collapse:collapse;border-spacing:0;
  margin:0 0 26px;background:transparent;
}
body.woocommerce-cart .woocommerce table.shop_table th{
  font-family:var(--font-body);font-size:11px;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-soft);
  padding:0 14px 14px;text-align:left;border:0;border-bottom:1px solid var(--line);
}
body.woocommerce-cart .woocommerce table.shop_table td{
  padding:20px 14px;border:0;border-bottom:1px solid var(--line);
  vertical-align:middle;color:var(--text);font-size:14px;
}
body.woocommerce-cart .woocommerce table.shop_table th:first-child,
body.woocommerce-cart .woocommerce table.shop_table td:first-child{padding-left:0}
body.woocommerce-cart .woocommerce table.shop_table th:last-child,
body.woocommerce-cart .woocommerce table.shop_table td:last-child{padding-right:0;text-align:right}

/* productafbeelding (Woo forceert 32px) */
body.woocommerce-cart .woocommerce table.cart td.product-thumbnail{width:86px}
body.woocommerce-cart .woocommerce table.cart img{
  width:76px;height:auto;border-radius:var(--radius);
}
body.woocommerce-cart .woocommerce table.cart td.product-name{font-size:14px;line-height:1.5}
body.woocommerce-cart .woocommerce table.cart td.product-name a{color:var(--brand);font-weight:500;text-decoration:none}
body.woocommerce-cart .woocommerce table.cart td.product-name a:hover{text-decoration:underline}

/* gekozen productopties in de regel */
body.woocommerce-cart .woocommerce table.cart td.product-name dl.variation{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 6px;
  margin:7px 0 0;font-size:12px;line-height:1.5;color:var(--text-soft);
}
body.woocommerce-cart .woocommerce table.cart td.product-name dl.variation dt{
  float:none;clear:none;margin:0;padding:0;font-weight:400;color:var(--text-light);
}
body.woocommerce-cart .woocommerce table.cart td.product-name dl.variation dd{
  float:none;margin:0;padding:0;min-width:0;overflow-wrap:anywhere;
}
body.woocommerce-cart .woocommerce table.cart td.product-name dl.variation dd p{margin:0}

/* verwijderkruisje: Woo zet color:red!important */
body.woocommerce-cart .woocommerce td.product-remove{width:28px}
body.woocommerce-cart .woocommerce a.remove{
  display:grid;place-items:center;width:22px;height:22px;
  font-size:19px;line-height:1;font-weight:300;border-radius:50%;
  color:var(--text-light)!important;background:transparent!important;text-decoration:none;
}
body.woocommerce-cart .woocommerce a.remove:hover{
  color:#b3261e!important;background:transparent!important;
}

/* aantal-stepper in de tabel */
body.woocommerce-cart .woocommerce td.product-quantity .quantity{
  display:inline-flex;align-items:center;border:1px solid var(--secondary);
}
body.woocommerce-cart .woocommerce td.product-quantity input.qty{
  width:62px;height:44px;text-align:center;border:0;background:transparent;
  font-family:var(--font-body);font-size:14px;color:var(--brand);
}

/* rij met kortingscode + bijwerken */
body.woocommerce-cart .woocommerce table.cart td.actions{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding:22px 0 0;border-bottom:0;text-align:left;
}
body.woocommerce-cart .woocommerce table.cart td.actions .coupon{
  float:none!important;display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:0;margin:0;
}
body.woocommerce-cart .woocommerce table.cart td.actions .coupon label{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft);margin:0;
}
body.woocommerce-cart .woocommerce table.cart td.actions .coupon input.input-text{
  width:230px;max-width:100%;box-sizing:border-box;
  border:1px solid var(--secondary);border-radius:0;background:#fff;
  padding:12px 14px;min-height:48px;
  font-family:var(--font-body);font-size:14px;font-weight:300;color:var(--brand);
}
body.woocommerce-cart .woocommerce table.cart td.actions .coupon input.input-text:focus{outline:none;border-color:var(--brand)}
body.woocommerce-cart .woocommerce table.cart td.actions .coupon .button{float:none!important;width:auto;display:inline-flex;align-items:center}
body.woocommerce-cart .woocommerce table.cart td.actions > button[name=update_cart],
body.woocommerce-cart .woocommerce table.cart td.actions > input[name=update_cart]{
  float:none!important;margin:0 0 0 auto;width:auto;
}
body.woocommerce-cart .woocommerce .coupon-error-notice{
  width:100%;float:none;font-size:12px;color:#b3261e;margin:0;
}

/* totalenblok */
body.woocommerce-cart .cart-collaterals{display:block;gap:0}
body.woocommerce-cart .cart-collaterals .cross-sells,
body.woocommerce-cart .cart-collaterals .cart_totals{
  width:100%!important;float:none!important;text-align:left;
}
body.woocommerce-cart .cart-collaterals .cross-sells{margin-top:30px}
body.woocommerce-cart .cart_totals{
  background:var(--soft);border:0;border-radius:8px;padding:28px!important;
}
body.woocommerce-cart .cart_totals h2{
  font-family:var(--font-head);font-size:24px;font-weight:300;margin:0 0 18px;
}
body.woocommerce-cart .cart_totals table.shop_table{
  width:100%;border:0;border-radius:0;margin:0;background:transparent;
}
body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td{
  padding:12px 0;border:0;border-bottom:1px solid var(--line);
  font-family:var(--font-body);font-size:14px;font-weight:300;color:var(--text);
  vertical-align:top;background:transparent;
}
body.woocommerce-cart .cart_totals table.shop_table th{
  width:46%;font-size:12px;letter-spacing:.08em;text-transform:none;color:var(--text-soft);
}
body.woocommerce-cart .cart_totals table.shop_table td{text-align:right}
body.woocommerce-cart .cart_totals table.shop_table tr:last-child th,
body.woocommerce-cart .cart_totals table.shop_table tr:last-child td{border-bottom:0}
body.woocommerce-cart .cart_totals tr.order-total th{font-size:12px;color:var(--text)}
body.woocommerce-cart .cart_totals tr.order-total td{font-family:var(--font-head);font-size:22px;color:var(--brand)}
body.woocommerce-cart .cart_totals tr.order-total td strong{font-weight:400}
body.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
body.woocommerce-cart .cart_totals .wc-shipping-methods,
body.woocommerce-cart .cart_totals #shipping_method{
  font-size:13px;color:var(--text-soft);list-style:none;margin:0;padding:0;
}
body.woocommerce-cart .cart_totals #shipping_method li{margin-bottom:6px}
body.woocommerce-cart .cart_totals .shipping-calculator-button{color:var(--brand);text-decoration:underline;font-size:13px}
body.woocommerce-cart .cart_totals .wc-proceed-to-checkout{padding:20px 0 0}
body.woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;min-width:100%;margin:0;text-align:center;
}

/* lege winkelwagen */
body.woocommerce-cart .wc-empty-cart-message,
body.woocommerce-cart .cart-empty{font-size:16px;color:var(--text-soft);margin-bottom:24px}
body.woocommerce-cart .wc-empty-cart-message .cart-empty{margin:0}
body.woocommerce-cart .return-to-shop{margin:0}

/* DESKTOP: producten links, totalen rechts.
   :has() houdt de lege-winkelwagenweergave intact (geen .cart-collaterals). */
@media(min-width:901px){
  body.woocommerce-cart .lz-headless .woocommerce:has(> .cart-collaterals){
    display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:50px;align-items:start;
  }
  body.woocommerce-cart .lz-headless .woocommerce > .woocommerce-notices-wrapper{grid-column:1/-1}
  body.woocommerce-cart .lz-headless .woocommerce > form.woocommerce-cart-form{grid-column:1;grid-row:2;min-width:0;margin:0}
  body.woocommerce-cart .lz-headless .woocommerce > .cart-collaterals{grid-column:2;grid-row:2;min-width:0}
}

/* MOBIEL: Woo's shop_table_responsive maakt er blokken van — rustig houden */
@media(max-width:768px){
  body.woocommerce-cart .woocommerce table.shop_table_responsive tr:nth-child(2n) td{background-color:transparent}
  body.woocommerce-cart .woocommerce table.shop_table_responsive tr.cart_item{
    display:block;padding:18px 0;border-bottom:1px solid var(--line);
  }
  body.woocommerce-cart .woocommerce table.shop_table_responsive tr.cart_item td{
    padding:3px 0;border:0;font-size:14px;
  }
  body.woocommerce-cart .woocommerce table.shop_table_responsive tr td::before{
    font-weight:400;font-size:12px;letter-spacing:.04em;color:var(--text-soft);
  }
  /* afbeelding wél tonen op mobiel (Woo verbergt hem) */
  body.woocommerce-cart .woocommerce table.cart .product-thumbnail{display:block;text-align:left!important}
  body.woocommerce-cart .woocommerce table.shop_table_responsive tr td.product-thumbnail::before{display:none}
  body.woocommerce-cart .woocommerce table.cart td.product-name{text-align:left!important;padding-top:8px!important}
  body.woocommerce-cart .woocommerce table.cart td.product-remove{text-align:right!important}
  body.woocommerce-cart .woocommerce table.cart td.actions{padding:20px 0 0}
  body.woocommerce-cart .woocommerce table.cart td.actions .coupon{width:100%}
  body.woocommerce-cart .woocommerce table.cart td.actions .coupon input.input-text{flex:1 1 auto;width:auto}
  body.woocommerce-cart .woocommerce table.cart td.actions > button[name=update_cart],
  body.woocommerce-cart .woocommerce table.cart td.actions > input[name=update_cart]{width:100%;margin-left:0}
  body.woocommerce-cart .cart_totals{padding:22px!important}
}

/* --------------------------------------------------------------------------
   6. AFREKENPAGINA — kolommen naast elkaar op desktop, randen weg,
      nette padding/typografie in 'Je bestelling'.
   ----------------------------------------------------------------------- */

/* inlog- en kortingscode-uitklappers */
body.woocommerce-checkout .woocommerce .woocommerce-form-login-toggle,
body.woocommerce-checkout .woocommerce .woocommerce-form-coupon-toggle{margin:0 0 20px}
body.woocommerce-checkout .woocommerce .woocommerce-form-login-toggle .woocommerce-info,
body.woocommerce-checkout .woocommerce .woocommerce-form-coupon-toggle .woocommerce-info{
  background:var(--soft);border:0;border-top:0;padding:14px 18px;margin:0;
  font-size:14px;border-radius:var(--radius);
}

/* waardebon/kortingscode — rand + 5px radius van Woo eraf */
body.woocommerce-checkout .woocommerce form.checkout_coupon{
  border:0!important;border-radius:0;background:transparent;padding:0;margin:0 0 28px;
}
body.woocommerce-checkout .woocommerce form.checkout_coupon > p:first-child{
  font-size:14px;color:var(--text-soft);margin:0 0 12px;
}
body.woocommerce-checkout .woocommerce form.checkout_coupon .form-row{
  display:inline-block;vertical-align:top;width:auto;float:none;margin:0 10px 10px 0;padding:0;
}
body.woocommerce-checkout .woocommerce form.checkout_coupon .form-row input.input-text{width:230px;max-width:100%}
body.woocommerce-checkout .woocommerce form.checkout_coupon .clear{display:none}

/* inlogformulier boven de checkout */
body.woocommerce-checkout .woocommerce form.login{
  border:0;border-radius:8px;background:var(--soft);padding:26px;margin:0 0 28px;
}

/* kopjes */
body.woocommerce-checkout .lz-headless h3{font-family:var(--font-head);font-size:22px;font-weight:300;margin:0 0 18px}
body.woocommerce-checkout .lz-headless #order_review_heading{margin:0 0 16px}

/* linkerkolom: factuur- en verzendgegevens netjes onder elkaar */
body.woocommerce-checkout .lz-headless #customer_details.col2-set{
  display:grid;grid-template-columns:minmax(0,1fr);gap:0;width:100%!important;float:none!important;
}
body.woocommerce-checkout .lz-headless #customer_details .col-1,
body.woocommerce-checkout .lz-headless #customer_details .col-2{width:100%!important;float:none!important;min-width:0}
body.woocommerce-checkout .lz-headless #customer_details .woocommerce-shipping-fields,
body.woocommerce-checkout .lz-headless #customer_details .woocommerce-additional-fields{margin-top:28px}
body.woocommerce-checkout .lz-headless #customer_details .woocommerce-additional-fields h3{font-size:18px}

/* 'Je bestelling' */
body.woocommerce-checkout .lz-headless #order_review{
  background:var(--soft);border:0;border-radius:8px;padding:28px;margin:0;
  width:100%!important;float:none!important;
}
body.woocommerce-checkout #order_review table.shop_table{
  width:100%;border:0!important;border-radius:0;border-collapse:collapse;border-spacing:0;
  margin:0 0 4px;background:transparent;
}
body.woocommerce-checkout #order_review table.shop_table th,
body.woocommerce-checkout #order_review table.shop_table td{
  padding:12px 0;border:0;border-bottom:1px solid var(--line);background:transparent;
  font-family:var(--font-body);font-size:14px;font-weight:300;color:var(--text);vertical-align:top;
}
body.woocommerce-checkout #order_review table.shop_table thead th{
  padding:0 0 12px;font-size:11px;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-soft);
}
body.woocommerce-checkout #order_review table.shop_table td:last-child,
body.woocommerce-checkout #order_review table.shop_table th:last-child{text-align:right}
body.woocommerce-checkout #order_review table.shop_table td.product-name{line-height:1.5;padding-right:12px}
body.woocommerce-checkout #order_review table.shop_table td.product-name strong.product-quantity{
  font-weight:400;color:var(--text-soft);font-size:13px;
}
body.woocommerce-checkout #order_review table.shop_table td.product-name dl.variation{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 6px;
  margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--text-soft);
}
body.woocommerce-checkout #order_review table.shop_table td.product-name dl.variation dt{
  float:none;clear:none;margin:0;font-weight:400;color:var(--text-light);
}
body.woocommerce-checkout #order_review table.shop_table td.product-name dl.variation dd{
  float:none;margin:0;min-width:0;overflow-wrap:anywhere;
}
body.woocommerce-checkout #order_review table.shop_table td.product-name dl.variation dd p{margin:0}
body.woocommerce-checkout #order_review table.shop_table tr.order-total th,
body.woocommerce-checkout #order_review table.shop_table tr.order-total td{border-bottom:0;padding-bottom:0}
body.woocommerce-checkout #order_review table.shop_table tr.order-total th{font-size:12px;color:var(--text)}
body.woocommerce-checkout #order_review table.shop_table tr.order-total td{
  font-family:var(--font-head);font-size:22px;color:var(--brand);
}
body.woocommerce-checkout #order_review table.shop_table tr.order-total td strong{font-weight:400}
body.woocommerce-checkout #order_review #shipping_method{list-style:none;margin:0;padding:0;text-align:right}
body.woocommerce-checkout #order_review #shipping_method li{margin-bottom:6px;font-size:13.5px}
body.woocommerce-checkout #order_review #shipping_method label{display:inline;font-size:13.5px;color:var(--text)}
body.woocommerce-checkout #order_review .woocommerce-info{
  background:#fff;border:0;border-top:0;padding:14px 16px;font-size:13px;border-radius:var(--radius);
}

/* betaalmethoden: grijze doos + randen van Woo eraf */
body.woocommerce-checkout #payment,
body.woocommerce-checkout .woocommerce #payment{
  background:transparent;border:0;border-radius:0;padding:0;margin-top:22px;
}
body.woocommerce-checkout #payment ul.payment_methods{
  border:0!important;border-bottom:0!important;padding:0;margin:0;list-style:none;text-align:left;
}
body.woocommerce-checkout #payment ul.payment_methods li{
  list-style:none;margin:0 0 12px;padding:0;font-size:14px;line-height:1.5;
}
body.woocommerce-checkout #payment ul.payment_methods li > label{
  display:inline;font-size:14px;color:var(--text);cursor:pointer;
}
body.woocommerce-checkout #payment ul.payment_methods li input[type=radio]{
  float:none;margin:0 8px 0 0;accent-color:var(--brand);
}
body.woocommerce-checkout #payment ul.payment_methods li img{
  display:inline-block;vertical-align:middle;max-height:24px;width:auto;margin:0 0 0 8px;border-radius:2px;
}
body.woocommerce-checkout #payment div.payment_box{
  background:#fff;border:0;border-radius:var(--radius);
  padding:14px 16px;margin:10px 0 0;font-size:13px;line-height:1.6;color:var(--text-soft);
}
body.woocommerce-checkout #payment div.payment_box::before,
body.woocommerce-checkout #payment div.payment_box::after{display:none!important;content:none!important}
body.woocommerce-checkout #payment div.payment_box p:last-child{margin-bottom:0}
body.woocommerce-checkout #payment div.form-row{padding:0}
body.woocommerce-checkout #payment .place-order{padding:18px 0 0;margin:0}
body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper{font-size:12.5px;color:var(--text-soft);line-height:1.6}
body.woocommerce-checkout #payment .woocommerce-privacy-policy-text p{font-size:12.5px;color:var(--text-soft);line-height:1.6;margin-bottom:10px}
body.woocommerce-checkout #payment #place_order{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;min-width:100%;float:none;margin:0;box-sizing:border-box;
}

/* Woo's order-attribution element is een lege container met hidden inputs;
   als grid-item zou het een extra (lege) rij + gap opleveren. */
body.woocommerce-checkout .lz-headless form.checkout > wc-order-attribution-inputs{display:none}

/* DESKTOP: gegevens links, besteloverzicht rechts */
@media(min-width:901px){
  body.woocommerce-checkout .lz-headless form.checkout.woocommerce-checkout{
    display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:50px;align-items:start;margin:0;
  }
  body.woocommerce-checkout .lz-headless form.checkout.woocommerce-checkout > *{grid-column:1/-1;min-width:0}
  body.woocommerce-checkout .lz-headless form.checkout.woocommerce-checkout > #customer_details{
    grid-column:1;grid-row:1/span 2;
  }
  body.woocommerce-checkout .lz-headless form.checkout.woocommerce-checkout > #order_review_heading{
    grid-column:2;grid-row:1;
  }
  body.woocommerce-checkout .lz-headless form.checkout.woocommerce-checkout > #order_review{
    grid-column:2;grid-row:2;
  }
}
@media(max-width:900px){
  body.woocommerce-checkout .lz-headless #order_review_heading{margin-top:34px}
}
@media(max-width:560px){
  body.woocommerce-checkout .lz-headless #order_review{padding:22px}
  body.woocommerce-checkout .woocommerce form.checkout_coupon .form-row{display:block;margin-right:0}
  body.woocommerce-checkout .woocommerce form.checkout_coupon .form-row input.input-text{width:100%}
  body.woocommerce-checkout .woocommerce form.checkout_coupon .form-row .button{width:100%}
  /* Woo's calc(50% - 8px) wordt te smal op kleine schermen */
  body.woocommerce-checkout .lz-headless .form-row-first,
  body.woocommerce-checkout .lz-headless .form-row-last{width:100%;display:block}
}


/* --------------------------------------------------------------------------
   11. PDP — "Toevoegen aan winkelwagen" definitief in de huisstijlkleur.

   OORZAAK (gemeten op de live bouwsite, 2026-10-03):
   WooCommerce 10.7 zet paars via
     .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
       button.button.alt { background-color:#7f54b3 }
   Die selector matcht omdat de class `woocommerce` op <body> zelf staat;
   specificiteit (0,3,1) -- :where() telt niet mee.
   Onze eigen regels hierboven verloren daarvan:
     - `body .woocommerce button.button.alt` (0,3,2) matchte HELEMAAL NIET,
       want onze headless single-product template rendert geen
       `div.woocommerce`-wrapper; die class bestaat op de PDP alleen op <body>.
     - `body .lz-atc button.single_add_to_cart_button` (0,2,2) matchte wel,
       maar verliest op classes (2 < 3) -- laadorde helpt dan niet.
   Vandaar hieronder: selectors die op <body> aanhaken + !important.
   Kleur is hardgecodeerd #3d3632 = var(--brand) = exact de kleur van het
   "NIEUW"-label (.gallery-badge) op de productafbeelding.
   ----------------------------------------------------------------------- */
body.woocommerce button.single_add_to_cart_button,
body.woocommerce button.single_add_to_cart_button.button.alt,
body.woocommerce .lz-atc button.single_add_to_cart_button,
body.woocommerce form.cart button.single_add_to_cart_button,
body .lz-atc button.single_add_to_cart_button,
body button.single_add_to_cart_button.button.alt,
body .single_add_to_cart_button.button.alt{
  background:#3d3632 !important;
  background-color:#3d3632 !important;
  background-image:none !important;
  color:#ffffff !important;
  border:1px solid #3d3632 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  opacity:1;
}

/* hover: omgekeerd (transparant met bruine tekst), nooit paars */
body.woocommerce button.single_add_to_cart_button:hover,
body.woocommerce button.single_add_to_cart_button.button.alt:hover,
body.woocommerce .lz-atc button.single_add_to_cart_button:hover,
body .lz-atc button.single_add_to_cart_button:hover,
body button.single_add_to_cart_button.button.alt:hover,
body .single_add_to_cart_button.button.alt:hover{
  background:transparent !important;
  background-color:transparent !important;
  color:#3d3632 !important;
  border-color:#3d3632 !important;
}

/* focus zonder hover + actief: bruin blijven, met zichtbare focusring */
body.woocommerce button.single_add_to_cart_button:focus:not(:hover),
body.woocommerce button.single_add_to_cart_button:active,
body .lz-atc button.single_add_to_cart_button:focus:not(:hover),
body .lz-atc button.single_add_to_cart_button:active,
body button.single_add_to_cart_button.button.alt:focus:not(:hover),
body button.single_add_to_cart_button.button.alt:active{
  background:#3d3632 !important;
  background-color:#3d3632 !important;
  color:#ffffff !important;
  border-color:#3d3632 !important;
}
body button.single_add_to_cart_button:focus-visible{
  outline:2px solid #3d3632 !important;
  outline-offset:3px;
}

/* disabled / uitverkocht: bruin maar duidelijk inactief -- staat als laatste
   zodat het de hover- en focusregels hierboven verslaat */
body.woocommerce button.single_add_to_cart_button.disabled,
body.woocommerce button.single_add_to_cart_button:disabled,
body.woocommerce button.single_add_to_cart_button:disabled[disabled],
body.woocommerce button.single_add_to_cart_button.disabled:hover,
body.woocommerce button.single_add_to_cart_button:disabled:hover,
body.woocommerce button.single_add_to_cart_button:disabled[disabled]:hover,
body .lz-atc button.single_add_to_cart_button.disabled,
body .lz-atc button.single_add_to_cart_button:disabled,
body .lz-atc button.single_add_to_cart_button.disabled:hover,
body .lz-atc button.single_add_to_cart_button:disabled:hover,
body button.single_add_to_cart_button.button.alt.disabled,
body button.single_add_to_cart_button.button.alt:disabled,
body button.single_add_to_cart_button.button.alt.disabled:hover,
body button.single_add_to_cart_button.button.alt:disabled:hover{
  background:#3d3632 !important;
  background-color:#3d3632 !important;
  color:#ffffff !important;
  border-color:#3d3632 !important;
  opacity:.4 !important;
  cursor:not-allowed !important;
}