/* ============================================================
   UMI Salon — WooCommerce native component styles
   Styled overrides voor alle standaard WC outputs zodat het er
   uitziet als ons design (zonder template files te overschrijven).
============================================================ */

/* ---------- FORMS (billing, shipping, account, login) ---------- */
.woocommerce form .form-row{
  display:flex;flex-direction:column;gap:6px;margin-bottom:14px;
}
.woocommerce form .form-row label{
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:500;margin-bottom:0;
}
.woocommerce form .form-row .required{color:var(--error);text-decoration:none}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container--default .select2-selection--single{
  background:var(--card);border:1px solid var(--line);
  padding:14px 18px;border-radius:14px;
  font-size:16px;color:var(--ink);height:auto;line-height:1.4;
  width:100%;font-family:inherit;outline:none;transition:border-color .2s,box-shadow .2s;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce .select2-container--default.select2-container--focus .select2-selection--single{
  border-color:var(--ink);box-shadow:0 0 0 3px rgba(31,27,24,.06);
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{
  padding:0;line-height:1.4;color:var(--ink);
}
.woocommerce .select2-container .select2-selection--single{height:54px}
.woocommerce .select2-dropdown{
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
}
.woocommerce form .form-row-first,
.woocommerce form .form-row-last,
.woocommerce-page form .form-row-first,
.woocommerce-page form .form-row-last{
  width:calc(50% - 7px);float:none;display:inline-block;vertical-align:top;
}
.woocommerce form .form-row-first{margin-right:14px}
.woocommerce form .form-row-wide{width:100%;clear:both}
.woocommerce-form__label-for-checkbox{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  font-size:.86rem;letter-spacing:0;text-transform:none;font-weight:400;
}
.woocommerce-form__input-checkbox{accent-color:var(--ink);width:17px;height:17px;margin:0}

/* ---------- BUTTONS ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page button.button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--ink);color:#fff !important;
  padding:14px 26px;border-radius:999px;border:none;
  min-height:50px;line-height:1.1;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  transition:all .25s;cursor:pointer;text-decoration:none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-page button.button:hover{background:#3C342D}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt{background:var(--ink);color:#fff !important}

/* "Place order" CTA bigger */
.woocommerce #place_order{
  width:100%;padding:18px 32px;font-size:.8rem;margin-top:14px;
}

/* ---------- TABLES (cart, checkout review, order details) ---------- */
.woocommerce table.shop_table{
  border:none;border-radius:18px;background:var(--card);
  overflow:hidden;margin-bottom:18px;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
  padding:14px 18px;border-top:1px solid var(--line-soft);
  vertical-align:middle;
}
.woocommerce table.shop_table thead th{
  background:var(--bg-soft);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:500;
}
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td{
  background:var(--bg-soft);font-weight:500;
}
.woocommerce table.shop_table tfoot tr.order-total th,
.woocommerce table.shop_table tfoot tr.order-total td{
  font-size:1.05rem;letter-spacing:.02em;
}
.woocommerce table.shop_table .product-thumbnail img{
  width:60px;height:auto;border-radius:10px;
}
.woocommerce table.shop_table .product-name a{
  color:var(--ink);font-weight:500;
}
.woocommerce table.shop_table .product-remove a.remove{
  width:24px;height:24px;border-radius:50%;
  background:var(--bg-soft);color:var(--ink) !important;
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;text-decoration:none;
}
.woocommerce table.shop_table .product-remove a.remove:hover{
  background:var(--error);color:#fff !important;
}

/* ---------- CART TOTALS ---------- */
.woocommerce .cart_totals{
  background:transparent;border:none;padding:0;
}
.woocommerce .cart_totals h2{
  font-size:1.05rem;letter-spacing:.04em;margin-bottom:18px;
}
.woocommerce .cart_totals table.shop_table{
  background:transparent;
}
.woocommerce .cart_totals table.shop_table{width:100%;table-layout:auto}
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td{
  background:transparent;border-top:1px solid var(--line-soft);
  padding:12px 0;vertical-align:top;
}
/* Label links met ruimte, waarde rechts uitgelijnd — voorkomt dat
   "Verzending" tegen de waardetekst plakt. */
.woocommerce .cart_totals table.shop_table th{
  text-align:left;font-weight:500;white-space:nowrap;
  padding-right:20px;width:40%;
}
.woocommerce .cart_totals table.shop_table td{text-align:right}
.woocommerce .cart_totals table.shop_table td .woocommerce-shipping-destination,
.woocommerce .cart_totals table.shop_table td p{margin:6px 0 0;font-size:.8rem;color:var(--ink-soft);line-height:1.5}
.woocommerce .cart_totals .shipping-calculator-button{display:inline-block;margin-top:6px}
.woocommerce .wc-proceed-to-checkout{padding:18px 0 0}

/* ---------- COUPON FORM ---------- */
.woocommerce-cart .coupon{
  display:flex;gap:8px;align-items:center;
}
.woocommerce-cart .coupon input.input-text{
  padding:11px 14px;font-size:16px;flex:1;max-width:240px;
}

/* ---------- CHECKOUT REVIEW + PAYMENT ---------- */
.woocommerce-checkout-review-order-table{margin-bottom:20px}
.woocommerce-checkout-review-order .cart_item .product-name{
  font-size:.86rem;font-weight:500;line-height:1.45;
}
.woocommerce-checkout-review-order .cart_item .product-name .product-quantity{
  color:var(--ink-soft);font-weight:400;margin-left:4px;
}
/* Bedrag op één regel, de "(incl. btw)" rustig eronder i.p.v. lelijk afbreken. */
.woocommerce-checkout-review-order-table .woocommerce-Price-amount{white-space:nowrap;font-weight:500}
.woocommerce-checkout-review-order-table .woocommerce-price-suffix{
  display:block;font-size:.7rem;color:var(--ink-mute);font-weight:400;margin-top:2px;white-space:nowrap;
}
/* Geef de bedrag-kolom genoeg ruimte zodat niets meer afbreekt. */
.woocommerce-checkout-review-order-table th.product-name,
.woocommerce-checkout-review-order-table td.product-name{width:62%}
.woocommerce-checkout-review-order-table th.product-total,
.woocommerce-checkout-review-order-table td.product-total{width:38%;text-align:right;white-space:nowrap}
/* Rustigere totaal-rijen: wit met hairlines i.p.v. zware beige vlakken; alleen
   het eindtotaal subtiel uitgelicht. (.woocommerce-prefix voor genoeg specificity
   om de basis-.shop_table tfoot-achtergrond te overrulen.) */
.woocommerce table.shop_table.woocommerce-checkout-review-order-table tfoot th,
.woocommerce table.shop_table.woocommerce-checkout-review-order-table tfoot td{
  background:transparent;border-top:1px solid var(--line-soft);
}
.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{
  background:var(--bg-soft);
}
.woocommerce-checkout-review-order-table tfoot .woocommerce-shipping-destination,
.woocommerce-checkout-review-order-table tfoot .woocommerce-shipping-methods,
.woocommerce-checkout-review-order-table tfoot td small{
  font-weight:400;font-size:.8rem;color:var(--ink-soft);line-height:1.5;
}
.woocommerce-checkout .woocommerce-checkout-payment{
  background:transparent;border:none;border-radius:0;padding:0;
}
.woocommerce-checkout #payment ul.payment_methods{
  background:transparent;border:none;padding:0;margin:0;
}
.woocommerce-checkout #payment ul.payment_methods li{
  background:var(--bg-soft);border-radius:14px;padding:16px;
  margin-bottom:8px;list-style:none;
}
.woocommerce-checkout #payment ul.payment_methods li label{
  font-weight:500;cursor:pointer;
}
.woocommerce-checkout #payment ul.payment_methods li .payment_box{
  background:var(--card);border-radius:10px;padding:14px;margin-top:10px;
}
.woocommerce-checkout #payment ul.payment_methods li .payment_box::before{
  display:none; /* hide the WC arrow */
}
.woocommerce-checkout #payment div.form-row.place-order{
  padding:18px 0 0;background:transparent;
}

/* ---------- MY ACCOUNT NAVIGATION ---------- */
.woocommerce-MyAccount-navigation{margin:0;padding:0}
.woocommerce-MyAccount-navigation ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:2px;
}
.woocommerce-MyAccount-navigation ul li a{
  display:block;padding:12px 18px;border-radius:12px;
  font-size:.86rem;letter-spacing:.06em;color:var(--ink);text-decoration:none;
  transition:background .2s;
}
.woocommerce-MyAccount-navigation ul li a:hover{background:var(--bg-soft)}
.woocommerce-MyAccount-navigation ul li.is-active a{
  background:var(--ink);color:#fff;
}
.woocommerce-MyAccount-content{padding:0}

/* ---------- MY ACCOUNT ORDERS TABLE ---------- */
.woocommerce-orders-table__row{background:var(--bg-soft) !important}
.woocommerce-orders-table .button{padding:8px 16px;font-size:.66rem;min-height:auto}

/* ---------- WC MESSAGES (info, success, error) ----------
   Bewust GÉÉN WooCommerce-look: geen oranje balk-links, geen rare iconen.
   Een rustige, op het thema afgestemde melding-kaart met een nette status-stip. */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews{
  position:relative;
  border-radius:16px;border:1px solid var(--line-soft);border-left:1px solid var(--line-soft);
  padding:16px 20px 16px 46px;background:var(--card);
  font-size:.9rem;line-height:1.55;margin:0 0 20px;
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  letter-spacing:0;text-transform:none;color:var(--ink);
}
.woocommerce-info > li,
.woocommerce-message > li,
.woocommerce-error > li{list-style:none;margin:0;flex:1;min-width:0}
/* Status-stip i.p.v. de WC-balk. */
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before{
  content:"";display:block;position:absolute;left:20px;top:50%;transform:translateY(-50%);
  width:10px;height:10px;border-radius:50%;background:var(--ink);
}
.woocommerce-info{background:var(--bg-soft)}
.woocommerce-info::before{background:var(--ink)}
.woocommerce-message{background:var(--success-soft);border-color:color-mix(in srgb,var(--success) 22%,transparent)}
.woocommerce-message::before{background:var(--success)}
.woocommerce-error{background:var(--error-soft);border-color:color-mix(in srgb,var(--error) 25%,transparent)}
.woocommerce-error::before{background:var(--error)}
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button{
  padding:8px 16px;font-size:.7rem;margin-left:auto;min-height:auto;flex:0 0 auto;
}

/* Points & Rewards (en andere) cart-notices: zelfde rustige kaart als de overige
   meldingen, en NIET meer full-bleed — begrensd tot de inhoudsbreedte van de site. */
.woocommerce-cart-notice{
  box-sizing:border-box;position:relative;list-style:none;
  border-radius:16px;border:1px solid var(--line-soft);background:var(--bg-soft);
  color:var(--ink);padding:14px 20px;margin:0 0 16px;
  font-size:.9rem;line-height:1.55;letter-spacing:0;text-transform:none;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.woocommerce-cart-notice > li{list-style:none;margin:0}
.woocommerce-cart-notice .button{
  padding:8px 16px;font-size:.7rem;margin-left:auto;min-height:auto;flex:0 0 auto;
}
/* Wanneer de notice los boven de cart hangt (direct kind van .woocommerce) → centreren op site-breedte. */
.woocommerce > .woocommerce-cart-notice{max-width:1144px;margin-left:auto;margin-right:auto}

/* ---------- QUANTITY INPUT ---------- */
.woocommerce .quantity{display:inline-flex;align-items:center;background:var(--bg-soft);border-radius:999px;padding:6px 4px;min-height:50px}
.woocommerce .quantity input.qty{
  width:48px;background:transparent;border:none;text-align:center;
  font-size:16px;color:var(--ink);outline:none;min-height:44px;
}
/* In de add-to-cart-rij even hoog als de knop (58px) voor strakke uitlijning. */
.woocommerce div.product form.cart .quantity{min-height:58px}

/* ---------- LOGIN / REGISTER FORMS ---------- */
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword{
  background:var(--card);border-radius:18px;padding:28px;
  border:1px solid var(--line-soft);max-width:480px;margin:0 auto;
}
.woocommerce-form-login__rememberme{
  display:flex;align-items:center;gap:8px;margin:8px 0;
  font-size:.86rem;text-transform:none;letter-spacing:0;
}
.woocommerce-LostPassword{margin-top:14px;font-size:.84rem}
.woocommerce-LostPassword a{color:var(--ink);text-decoration:underline}

/* ---------- PRODUCT TABS (single product) ---------- */
.woocommerce div.product .woocommerce-tabs ul.tabs{
  display:flex;gap:28px;border:none;border-bottom:1px solid var(--line);
  margin-bottom:24px;padding:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent;border:none;border-radius:0;margin:0;padding:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before{display:none !important}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  padding:14px 0;font-size:.86rem;letter-spacing:.06em;
  color:var(--ink-soft);font-weight:500;text-transform:none;text-decoration:none;
  border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-block;
  transition:all .2s;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color:var(--ink);border-color:var(--ink);
}
.woocommerce div.product .woocommerce-tabs .panel{
  padding:20px 0;margin:0;
  font-size:.94rem;line-height:1.6;color:var(--ink-soft);
}
.woocommerce div.product .woocommerce-tabs .panel h2{
  font-size:1.2rem;margin-bottom:14px;
}

/* ============================================================
   SINGLE PRODUCT — native WooCommerce layout in mockup-stijl
   WC rendert: div.product > div.images (gallery) + div.summary (info).
   We zetten dat in een 2-koloms grid (galerij ~46% + info), en
   wrappen het in een .pdp-card-achtige witte kaart.
============================================================ */

/* Witte productkaart-container — exact mockup-waarden (product.html .pdp-card). */
.pdp-card{
  background:var(--white,#fff);border-radius:var(--r-xl,44px);
  padding:50px 50px 40px;margin-top:24px;
}
@media(max-width:760px){
  .pdp-card{padding:28px 22px;border-radius:var(--r-lg,30px)}
}

/* De native WC product-wrapper als 2-koloms grid.
   minmax(0,..) op beide kolommen voorkomt dat een kolom (bv. de gallery vóór
   flexslider-init) breder wordt dan zijn cel en overflow veroorzaakt. */
.woocommerce div.product,
.pdp-card .woocommerce div.product,
.pdp{
  display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);gap:44px;
  align-items:flex-start;position:relative;max-width:100%;
  /* KRITIEK: div.product draagt de class "product" → de mockup-card-stijl
     (.product{background:--card-beige;padding;radius;cursor}) lekt erop en gaf
     een beige tussenlaag (wit → bruin → wit). Alle card-chrome resetten. */
  background:transparent;border:none;border-radius:0;padding:0;margin:0;
  cursor:auto;box-shadow:none;
}
.woocommerce div.product:hover,.pdp:hover{transform:none;background:transparent;box-shadow:none}

/* Galerij links — laat WC de gallery/flexslider doen, wij stylen wrapper.
   Defensief: gallery + kolom mogen nooit breder worden dan de grid-cel,
   zodat er vóór flexslider-init geen horizontale overflow ontstaat. */
.woocommerce div.product div.images,
.woocommerce div.product div.woocommerce-product-gallery{
  width:100% !important;max-width:100%;min-width:0;margin:0;float:none;
  /* GEEN eigen kader/achtergrond — anders ontstaat frame-in-frame met .pdp-card. */
  background:transparent;border-radius:0;overflow:visible;
}
/* GEEN max-width op de slides-ul: flexslider zet width:800% (alle slides naast
   elkaar) en .flex-viewport clipt. max-width:100% brak dat → slides overlapten
   en wisselen deed niets zichtbaar. */
.woocommerce div.product div.woocommerce-product-gallery
  .woocommerce-product-gallery__wrapper{margin:0;max-width:none}
.woocommerce div.product div.woocommerce-product-gallery .flex-viewport{
  overflow:hidden;border-radius:var(--r-lg,28px);
}
.woocommerce div.product div.woocommerce-product-gallery
  .woocommerce-product-gallery__image{
  max-width:100%;background:transparent;border-radius:0;overflow:visible;
}
.woocommerce div.product div.woocommerce-product-gallery
  .woocommerce-product-gallery__image a img,
.woocommerce div.product div.images img{
  border-radius:var(--r-lg,28px);display:block;
}
/* Zoom-trigger / placeholder netjes.
   z-index:2 (i.p.v. WC-default 99): div.product maakt geen stacking-context,
   waardoor de 99 op root-niveau bóven de header (z-index 60) en het mega-menu
   uitkwam — het vergrootglas bleef dan over het opengeklapte menu hangen. */
.woocommerce div.product
  .woocommerce-product-gallery .woocommerce-product-gallery__trigger{
  background:var(--card);border-radius:50%;width:40px;height:40px;
  top:14px;right:14px;box-shadow:var(--shadow-sm);z-index:2 !important;
}
/* ---------- GALERIJ: referentie-stijl — thumbnails LINKS + groot hoofdbeeld ----
   GEEN beige paneel meer. Kleine afgeronde thumbnails in een verticale kolom
   links, één groot hoofdbeeld rechts met een dunne hairline-rand en zachte
   hoeken — precies zoals de referentie-productpagina. */
/* Zacht LICHTGRIJS studiopaneel (géén warm beige) met afgeronde hoeken, net als
   de referentie. Thumbnails als witte tegels in een kolom links; groot hoofdbeeld
   rechts dat vrij op het paneel "zweeft" (geen harde rand). */
.woocommerce div.product div.woocommerce-product-gallery{
  background:linear-gradient(135deg,#F1EEE8 0%,#E8DFD0 100%);
  border:none;border-radius:var(--r-xl,32px);padding:clamp(20px,2.6vw,34px);
  display:flex;flex-direction:row-reverse;gap:18px;align-items:flex-start;
}
.woocommerce div.product div.woocommerce-product-gallery .flex-viewport{
  flex:1 1 auto;min-width:0;border-radius:var(--r-lg,20px);overflow:hidden;align-self:center;
}
.woocommerce div.product div.woocommerce-product-gallery .woocommerce-product-gallery__wrapper{margin:0;max-width:none}
.woocommerce div.product div.woocommerce-product-gallery .woocommerce-product-gallery__image{max-width:100%}
.woocommerce div.product div.woocommerce-product-gallery .woocommerce-product-gallery__image a img,
.woocommerce div.product div.images img{
  display:block;width:100%;height:auto;background:#F1EEE8;border-radius:var(--r-lg,20px);
}
/* Product zonder eigen foto: placeholder past zich aan het paneel aan. */
.woocommerce div.product div.woocommerce-product-gallery--without-images .woocommerce-product-gallery__image--placeholder img{
  border-radius:var(--r-lg,20px);
}
/* Thumbnails: verticale kolom links, kleine witte afgeronde tegels met zachte schaduw. */
.woocommerce div.product div.images .flex-control-thumbs{
  display:flex;flex-direction:column;flex-wrap:nowrap;gap:12px;
  margin:0;padding:0;width:66px;flex:0 0 66px;list-style:none;
}
.woocommerce div.product div.images .flex-control-thumbs li{width:66px;margin:0;list-style:none;float:none}
/* Méér dan 4 thumbnails → kolom wordt scrolbaar met fade onderaan, zodat de
   galerij nooit oneindig lang wordt. (:has telt 5e tegel = >4 afbeeldingen.) */
.woocommerce div.product div.images .flex-control-thumbs:has(li:nth-child(5)){
  max-height:330px;overflow-y:auto;overflow-x:hidden;padding-right:6px;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 80%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 80%,transparent 100%);
  scrollbar-width:thin;scrollbar-color:var(--ink-soft) transparent;
}
.woocommerce div.product div.images .flex-control-thumbs:has(li:nth-child(5))::-webkit-scrollbar{width:5px}
.woocommerce div.product div.images .flex-control-thumbs:has(li:nth-child(5))::-webkit-scrollbar-thumb{background:var(--ink-soft);border-radius:3px}
/* Witte tegels met hairline-rand (geen schaduw — past bij de kalme, lijn-gebaseerde stijl). */
.woocommerce div.product div.images .flex-control-thumbs li img{
  border-radius:14px;background:#fff;cursor:pointer;padding:6px;
  border:1px solid var(--line-soft);transition:border-color .18s ease;
}
.woocommerce div.product div.images .flex-control-thumbs li img:hover{border-color:var(--taupe)}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active{border-color:var(--ink)}
@media(max-width:600px){
  .woocommerce div.product div.woocommerce-product-gallery{flex-direction:column;align-items:stretch}
  .woocommerce div.product div.images .flex-control-thumbs{flex-direction:row;flex-wrap:wrap;width:auto;flex:0 0 auto}
  .woocommerce div.product div.images .flex-control-thumbs li{width:58px}
}

/* Info-kolom rechts (native .summary / .entry-summary) — mockup .info:
   verticale stack met consistente gap (product.html .info{gap:14px}). */
.woocommerce div.product div.summary,
.woocommerce div.product .entry-summary,
.woocommerce div.product div.summary.info{
  width:100% !important;margin:0;float:none;padding-top:10px;
  display:flex;flex-direction:column;gap:6px;
  /* GEEN kader om titel/prijs/beschrijving — alles vrij op de witte kaart. */
  border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;padding-left:0;padding-right:0;
}
.woocommerce div.product .summary .product_title,
.woocommerce div.product div.summary h1.product_title{
  font-size:clamp(1.7rem,2.5vw,2.3rem);letter-spacing:-.01em;
  margin:0 0 14px;line-height:1.12;
  /* Kalme, leesbare titel in zinskapitalen i.p.v. schreeuwerig all-caps. */
  text-transform:none;font-weight:500;
}
.woocommerce div.product .woocommerce-product-rating{margin:0 0 12px}
.woocommerce div.product .summary > p.price,
.woocommerce div.product .summary span.price{
  font-size:1.7rem;font-weight:400;letter-spacing:.02em;
  color:var(--ink);margin:6px 0 4px;
}
.woocommerce div.product .woocommerce-product-details__short-description{
  font-size:.94rem;color:var(--ink-soft);line-height:1.65;
  margin:14px 0 6px;
}
.woocommerce div.product .woocommerce-product-details__short-description p{
  margin-bottom:10px;
}
/* Voorraad-indicator */
.woocommerce div.product .stock{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  margin:8px 0;font-weight:500;
}
.woocommerce div.product .stock.in-stock{color:var(--success)}
.woocommerce div.product .stock.out-of-stock{color:var(--error)}
.woocommerce div.product .product_meta{
  font-size:.78rem;color:var(--ink-soft);margin-top:18px;
  padding-top:16px;border-top:1px solid var(--line-soft);
  letter-spacing:0;text-transform:none;line-height:1.8;
}
.woocommerce div.product .product_meta > span{display:block}
.woocommerce div.product .product_meta a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- ADD-TO-CART + CART FORM (single product) ---------- */
/* qty + knop op één rij, gelijke hoogte (align-items:stretch). */
.woocommerce div.product form.cart{
  margin:20px 0 0;display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;
}
.woocommerce div.product form.cart .quantity{margin:0;display:inline-flex;align-items:center}
/* De hoofd add-to-cart knop = .btn .btn-primary stijl, even hoog als .btn-large */
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink);color:#fff !important;
  padding:18px 36px;border-radius:999px;border:none;
  min-height:58px;line-height:1.1;
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  flex:1;min-width:200px;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product .single_add_to_cart_button:hover{
  background:#3C342D; /* geen lift/schaduw — rustig */
}

/* ---------- VARIATIONS (color/size dropdowns) ---------- */
/* De variations_form moet de volledige breedte van de info-kolom pakken
   zodat selects + add-to-cart netjes onder elkaar/naast elkaar staan. */
.woocommerce div.product form.variations_form.cart{
  display:block;width:100%;margin-top:18px;
}
.woocommerce div.product form.cart table.variations{
  border:none;background:transparent;margin:0 0 14px;width:100%;
}
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr{
  display:block;width:100%;
}
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th{
  border:none;padding:0 0 6px;display:block;width:100%;text-align:left;
}
.woocommerce div.product form.cart .variations tr + tr td.label{padding-top:14px}
.woocommerce div.product form.cart .variations label{
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:500;
}
.woocommerce div.product form.cart .variations td.value select{
  width:100%;margin:0;
}
.woocommerce div.product form.cart .reset_variations{
  font-size:.72rem;color:var(--ink-soft);text-decoration:underline;
  display:inline-block;margin-top:8px;
}
.woocommerce div.product .woocommerce-variation-price .price{
  font-size:1.5rem;font-weight:400;margin:6px 0;
}
.woocommerce div.product .woocommerce-variation-add-to-cart{
  display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin-top:14px;
}

/* ---------- PDP TRUST-LIST + STRIP (mockup-stijl) ---------- */
.trust-list{
  display:flex;flex-direction:column;gap:9px;background:var(--card-soft);
  border-radius:var(--r,18px);padding:16px 18px;margin-top:16px;
}
.trust-list .it{display:flex;align-items:center;gap:10px;font-size:.82rem;letter-spacing:0;text-transform:none}
.trust-list .it svg{color:var(--ink-soft);flex-shrink:0}
.trust-list .it strong{font-weight:500}

.pdp-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:30px 0 0;
}
@media(max-width:760px){.pdp-strip{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.pdp-strip{grid-template-columns:1fr}}

/* ---------- ATTRIBUTE / SPECS TABLE (specificaties) ---------- */
.woocommerce table.shop_attributes,
.woocommerce-product-attributes{
  border:none;background:transparent;margin:0;
}
.woocommerce table.shop_attributes th,
.woocommerce-product-attributes th,
.woocommerce table.shop_attributes td,
.woocommerce-product-attributes td{
  border:none;padding:11px 0;font-size:.88rem;
  background-image:radial-gradient(circle,var(--line-dot) 1px,transparent 1px);
  background-position:bottom;background-size:6px 1px;background-repeat:repeat-x;
}
.woocommerce table.shop_attributes th,
.woocommerce-product-attributes th{
  color:var(--ink-soft);font-weight:500;letter-spacing:.02em;
  text-transform:none;width:42%;
}
.woocommerce table.shop_attributes td,
.woocommerce-product-attributes td{color:var(--ink);font-style:normal}
.woocommerce table.shop_attributes td p,
.woocommerce-product-attributes td p{margin:0}
.woocommerce table.shop_attributes tr:last-child th,
.woocommerce table.shop_attributes tr:last-child td,
.woocommerce-product-attributes tr:last-child th,
.woocommerce-product-attributes tr:last-child td{background:none}

/* ---------- GENERIEKE SPECS-SECTIE (custom meta loop, template) ---------- */
.umi-specs{margin:0}
.umi-specs .spec-row{
  display:grid;grid-template-columns:1fr auto;gap:14px;align-items:baseline;
  padding:11px 0;font-size:.88rem;
  background-image:radial-gradient(circle,var(--line-dot) 1px,transparent 1px);
  background-position:bottom;background-size:6px 1px;background-repeat:repeat-x;
}
.umi-specs .spec-row:last-child{background:none}
.umi-specs .spec-row .k{color:var(--ink-soft);letter-spacing:.02em}
.umi-specs .spec-row .v{color:var(--ink);text-align:right;letter-spacing:.02em}

/* ---------- RELATED / UPSELLS ---------- */
/* In de PDP rendert related binnen de mockup .seen-grid sectie (umi-seen),
   dus daar GEEN border-top/margin; alleen als fallback elders. */
.woocommerce .related,
.woocommerce .upsells{
  margin-top:54px;padding-top:40px;border-top:1px solid var(--line);clear:both;
}
.umi-seen .woocommerce .related,
.umi-seen .seen-grid-wrap .related{
  margin-top:0;padding-top:0;border-top:none;
}
/* De native "Related products" kop verbergen: de mockup-sectie heeft al een
   .seen-head met titel "Anderen bekeken". */
.umi-seen .related > h2,
.umi-seen .upsells > h2{display:none}
.woocommerce .related > h2,
.woocommerce .upsells > h2{
  font-size:clamp(1.3rem,2.6vw,2.1rem);font-weight:400;letter-spacing:-.005em;text-transform:none;margin-bottom:24px;
}
/* "Anderen bekeken" / related products = mockup .seen-grid: 4 koloms cards. */
.woocommerce .related ul.products,
.woocommerce .upsells ul.products{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;
  list-style:none;margin:0;padding:0;
}
.woocommerce .related ul.products li.product,
.woocommerce .upsells ul.products li.product{margin:0;width:auto;float:none}
@media(max-width:980px){
  .woocommerce .related ul.products,
  .woocommerce .upsells ul.products{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .woocommerce .related ul.products,
  .woocommerce .upsells ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================
   PDP MOCKUP-SECTIES — exacte waarden uit product.html
   (.detail-grid, .desc-tabs/native tabs, .pdp-strip, .seen-grid,
   .rev-summary, .faq-wrap). Houdt de live PDP 1-op-1 met de mockup.
============================================================ */

/* ---------- DETAIL GRID (beschrijving/specs links | kenmerken rechts) ---------- */
.detail-grid{
  display:grid;grid-template-columns:1.4fr 1fr;gap:50px;
  margin-top:48px;padding-top:0;border-top:none; /* geen scheidingslijn meer */
}
@media(max-width:900px){.detail-grid{grid-template-columns:1fr;gap:30px}}
/* Geen specs? Dan geen lege "Kenmerken"-kolom: beschrijving krijgt volle breedte. */
.detail-grid--single{grid-template-columns:1fr}
.detail-grid .desc-block h2{margin-bottom:18px;font-size:1.6rem}

/* Native WC tabs binnen .desc-block in mockup .desc-tabs-stijl. De wrapper
   .pdp-tabs-wrap reset de grid zodat de tabs vol-breedte stromen. */
/* .pdp-tabs-wrap draagt class "product" → de mockup product-card-stijl
   (.product{background:--card-beige;radius;padding;cursor:pointer}) lekt erop
   en gaf een beige "vak-in-vak". Reset alle card-chrome hier. */
.detail-grid .pdp-tabs-wrap{
  display:block;width:100%;background:transparent;border:none;
  border-radius:0;padding:0;margin:0;cursor:auto;box-shadow:none;
}
.detail-grid .pdp-tabs-wrap:hover{transform:none;background:transparent;box-shadow:none}
.detail-grid .pdp-tabs-wrap .woocommerce-tabs{margin:0}
.detail-grid .pdp-tabs-wrap .woocommerce-tabs ul.tabs{
  display:flex;gap:38px;flex-wrap:wrap;border:none; /* geen lijn onder de tabs */
  padding:0;margin:0 0 26px;
  list-style:none; /* zonder .woocommerce-wrapper kwamen er li-bullets (•) terug */
}
.detail-grid .pdp-tabs-wrap .woocommerce-tabs ul.tabs li{list-style:none}
.detail-grid .pdp-tabs-wrap .woocommerce-tabs ul.tabs::before{display:none}
.detail-grid .pdp-tabs-wrap .woocommerce-tabs ul.tabs li{
  background:transparent;border:none;border-radius:0;margin:0;padding:0;
}
.detail-grid .pdp-tabs-wrap .woocommerce-tabs ul.tabs li::after,
.detail-grid .pdp-tabs-wrap .woocommerce-tabs ul.tabs li::before{display:none !important}
.detail-grid .pdp-tabs-wrap .woocommerce-tabs ul.tabs li a{
  font-size:clamp(1.3rem,2.6vw,2.1rem);letter-spacing:-.005em;text-transform:none;
  color:var(--ink-mute);font-weight:400;line-height:1.1;padding:0;text-decoration:none;
  position:relative;transition:color .2s,opacity .2s;
}
.detail-grid .pdp-tabs-wrap .woocommerce-tabs ul.tabs li a:hover{color:var(--ink)}
.detail-grid .pdp-tabs-wrap .woocommerce-tabs ul.tabs li.active a{color:var(--ink)}
.detail-grid .pdp-tabs-wrap .woocommerce-tabs ul.tabs li.active a::after{
  content:'';position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--ink);border-radius:2px;
}
/* KRITIEK: het actieve tab-panel MOET zichtbaar zijn — geen permanente
   opacity:0. WC toont alleen het actieve panel (rest display:none via JS). */
.detail-grid .pdp-tabs-wrap .woocommerce-tabs .panel{
  padding:0;margin:0;background:transparent;border:none;border-radius:0;box-shadow:none;
  opacity:1 !important;visibility:visible !important;
  font-size:.95rem;line-height:1.75;color:var(--ink-soft);max-width:68ch;
}
.detail-grid .pdp-tabs-wrap .woocommerce-tabs .panel h2{
  font-size:1.2rem;margin-bottom:14px;color:var(--ink);
}
.detail-grid .pdp-tabs-wrap .woocommerce-tabs .panel p{margin-bottom:14px}

/* Kenmerken-blok staat nu ONDER de tabs in de hoofdkolom (referentie-stijl). */
.detail-grid .desc-block .features-block{margin-top:44px;max-width:68ch}
.detail-grid .desc-block .features-block h3{margin-bottom:16px;font-size:1.2rem;font-weight:500;letter-spacing:0}

/* Zijkolom: alleen het advies-kaartje (Kenmerken is verplaatst). */
.detail-grid .features{display:flex;flex-direction:column;gap:26px;position:sticky;top:96px}
.detail-grid .features h3{margin-bottom:16px;letter-spacing:.02em;font-size:1.05rem}
.detail-grid .features .feature-list{display:flex;flex-direction:column;gap:0}
.detail-grid .pdp-help{
  background:var(--card-soft);border:1px solid var(--line-soft);
  border-radius:var(--r-lg,24px);padding:24px;
}
.detail-grid .pdp-help h3{margin-bottom:8px}
.detail-grid .pdp-help p{font-size:.88rem;line-height:1.6;color:var(--ink-soft);margin:0 0 16px}
.detail-grid .pdp-help__phone{
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;
  font-size:.9rem;color:var(--ink);text-decoration:none;font-weight:500;
}
.detail-grid .pdp-help__phone:hover{color:var(--accent,#8a6d4b)}
@media(max-width:900px){.detail-grid .features{position:static}}
/* Compacte kenmerken-lijst (géén tabel — voorkomt dubbele-tabel-indruk) */
.feature-items{list-style:none;margin:0;padding:0}
.feature-items li{
  display:flex;flex-direction:column;gap:4px;
  padding:13px 0;border-bottom:1px solid var(--line-soft);
}
.feature-items li:last-child{border-bottom:none}
.feature-items .fl-label{
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600;
}
.feature-items .fl-value{font-size:.92rem;color:var(--ink);text-align:left;line-height:1.5}

/* ---------- PDP TRUST STRIP (4 items) ---------- */
.pdp-strip .ps{
  background:var(--card-soft);border-radius:var(--r,20px);
  padding:18px 20px;display:flex;flex-direction:column;gap:4px;
}
.pdp-strip .ps .ic{
  width:36px;height:36px;border-radius:50%;background:var(--white,#fff);
  display:flex;align-items:center;justify-content:center;margin-bottom:8px;
}
.pdp-strip .ps .t{font-size:.86rem;font-weight:400;letter-spacing:.01em}
.pdp-strip .ps .s{font-size:.76rem;color:var(--ink-soft)}

/* ---------- SEEN-HEAD (sectiekop met eyebrow + titel + knop) ---------- */
.seen-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:24px;flex-wrap:wrap;gap:14px;
}
.seen-head h2{font-size:clamp(1.6rem,2.6vw,2.4rem)}

/* ---------- REVIEWS (native WC reviews in mockup-card) ---------- */
.umi-reviews .rev-summary-wrap{
  background:var(--card-soft);border-radius:var(--r,20px);padding:24px;
}
.umi-reviews #reviews #comments h2{font-size:1.2rem;margin-bottom:14px}
.umi-reviews #reviews ol.commentlist{margin:0;padding:0;list-style:none}
.umi-reviews #reviews ol.commentlist li .comment-text{
  background:var(--white,#fff);border-radius:var(--r,20px);padding:18px 22px;margin:0 0 12px;border:none;
}
.umi-reviews .star-rating::before,
.umi-reviews .star-rating span::before{color:var(--ink)}

/* ---------- FAQ accordion — één bron van waarheid (rustige, strakke kaarten) ---------- */
.faq-wrap{display:flex;flex-direction:column;gap:10px;max-width:760px;margin:0 auto}
.faq-wrap .faq-item{
  background:var(--white,#fff);border:1px solid var(--line-soft);
  border-radius:16px;overflow:hidden;transition:border-color .2s ease;
}
.faq-wrap .faq-item.open{border-color:var(--line,#dcd3c4)}
.faq-wrap .faq-q{
  width:100%;padding:18px 24px;display:flex;justify-content:space-between;align-items:center;gap:18px;
  font-size:.95rem;letter-spacing:0;text-align:left;text-transform:none;font-weight:500;line-height:1.4;
  background:none;border:none;cursor:pointer;color:var(--ink);font-family:inherit;
}
.faq-wrap .faq-q .ic{
  width:28px;height:28px;border-radius:50%;background:var(--card-soft);
  display:flex;align-items:center;justify-content:center;transition:all .25s;font-size:1rem;flex-shrink:0;line-height:1;
}
.faq-wrap .faq-item.open .ic{transform:rotate(45deg);background:var(--ink);color:#fff}
.faq-wrap .faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;padding:0 24px}
.faq-wrap .faq-item.open .faq-a{max-height:440px;padding:0 24px 20px}
.faq-wrap .faq-a p{font-size:.9rem;color:var(--ink-soft);line-height:1.7;margin:0}

/* ---------- PDP RESPONSIVE: galerij + info onder elkaar ---------- */
@media(max-width:900px){
  .woocommerce div.product,
  .pdp-card .woocommerce div.product,
  .pdp{grid-template-columns:1fr;gap:24px}
  .pdp-card{padding:28px 22px;border-radius:var(--r-lg,28px)}
}
@media(max-width:560px){
  .woocommerce div.product form.cart .button,
  .woocommerce div.product .single_add_to_cart_button{
    width:100%;flex:1 0 100%;
  }
}

/* ---------- WC NOTICES (top of page after add-to-cart etc.) ---------- */
.woocommerce-notices-wrapper{max-width:1440px;margin:14px auto;padding:0 28px}

/* ---------- BREADCRUMBS ---------- */
.woocommerce-breadcrumb{
  padding:18px 0 0;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);
}
.woocommerce-breadcrumb a{color:var(--ink-soft);text-decoration:none}
.woocommerce-breadcrumb a:hover{color:var(--ink)}

/* ---------- RATING STARS ---------- */
.woocommerce .star-rating{
  font-size:1rem;letter-spacing:2px;
}
.woocommerce .star-rating::before,
.woocommerce .star-rating span::before{color:var(--ink)}

/* ---------- PRICE ---------- */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-size:1.05rem;color:var(--ink);font-weight:400;
}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins{
  background:transparent;text-decoration:none;font-weight:500;
}
.woocommerce del{opacity:.85;font-size:.85em}

/* ---------- PAGINATION ---------- */
.woocommerce nav.woocommerce-pagination ul{border:none;display:flex;gap:6px;justify-content:center}
.woocommerce nav.woocommerce-pagination ul li{border:none;display:block}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  width:44px;height:44px;border-radius:50%;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--card);font-size:.82rem;
}
.woocommerce nav.woocommerce-pagination ul li span.current{
  background:var(--ink);color:#fff;
}
.woocommerce nav.woocommerce-pagination ul li a:hover{background:var(--bg-soft)}

/* ---------- ADDRESSES (My account) ---------- */
.woocommerce-Address,
.woocommerce-MyAccount-content address{
  background:var(--bg-soft);border-radius:14px;padding:18px;
  font-size:.86rem;line-height:1.6;
}

/* ---------- ORDER RECEIVED / THANK YOU ---------- */
.woocommerce-order-received .woocommerce-thankyou-order-received{
  font-size:1.4rem;font-weight:500;letter-spacing:-.005em;
  margin-bottom:14px;text-align:center;
}
.woocommerce-order-overview{
  display:flex;flex-wrap:wrap;gap:14px;background:var(--bg-soft);
  border-radius:14px;padding:18px;margin:18px 0;list-style:none;
}
.woocommerce-order-overview li{
  flex:1;min-width:140px;font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);
}
.woocommerce-order-overview li strong{
  display:block;margin-top:4px;color:var(--ink);font-size:.94rem;
  font-weight:500;text-transform:none;letter-spacing:0;
}

/* ---------- MOBILE TWEAKS ---------- */
@media(max-width:600px){
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last{width:100%;float:none;margin-right:0}
  .woocommerce table.shop_table th,
  .woocommerce table.shop_table td{padding:10px}
  .woocommerce .cart_totals{padding-top:18px}
}

/* ---------- HIDDEN: WC PageBuilder elements that conflict ---------- */
body.woocommerce-cart .woocommerce > .woocommerce-cart-form{margin:0}
body.woocommerce-checkout .woocommerce > form.checkout{margin:0}

/* ============================================================
   CART — 2-koloms layout (tabel links, totalen rechts) in mockup-stijl
============================================================ */
/* BELANGRIJK: GEEN grid op .woocommerce zelf. cart.php heeft z'n EIGEN layout
   (.wrap-narrow > .split-2). Een grid hier reserveerde een lege 380px-kolom
   rechts → de hele winkelwagen werd 420px naar links geduwd ("verdeling slecht").
   .woocommerce is nu een simpele block-container; .wrap-narrow centreert zelf. */
.woocommerce-cart .woocommerce{display:block}
.woocommerce-cart .woocommerce-cart-form{min-width:0}
.woocommerce-cart .cart-collaterals{
  grid-column:2;width:100%;float:none;margin:0;
}
.woocommerce-cart .cart-collaterals .cross-sells{width:100%;margin:0;float:none}
.woocommerce-cart .cart-collaterals .cart_totals{
  width:100%;float:none;background:var(--card);border:1px solid var(--line-soft);
  border-radius:var(--r-lg,28px);padding:28px;position:sticky;top:96px;
}
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table{
  border-radius:0;background:transparent;margin:0;
}
@media(max-width:980px){
  .woocommerce-cart .woocommerce{grid-template-columns:1fr;gap:26px}
  .woocommerce-cart .woocommerce-cart-form,
  .woocommerce-cart .cart-collaterals{grid-column:1}
  .woocommerce-cart .cart-collaterals .cart_totals{position:static}
}
/* Cart-tabel responsive: stack op mobiel */
@media(max-width:600px){
  .woocommerce-cart table.cart thead{display:none}
  .woocommerce-cart table.cart tbody tr{
    display:grid;grid-template-columns:64px 1fr;gap:8px 14px;
    padding:14px 0;border-top:1px solid var(--line-soft);
  }
  .woocommerce-cart table.cart tbody td{
    border:none;padding:2px 0;display:flex;align-items:center;
  }
  .woocommerce-cart table.cart tbody td.product-thumbnail{grid-row:span 3}
  .woocommerce-cart table.cart tbody td.product-remove{
    position:absolute;right:0;
  }
}

/* ============================================================
   CHECKOUT — 2-koloms layout (billing links, order review rechts)
============================================================ */
/* Login-/couponbalken: compact en rustig i.p.v. zware volle-breedte notices. */
.checkout-toggles{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.checkout-toggles .woocommerce-form-login-toggle,
.checkout-toggles .woocommerce-form-coupon-toggle{flex:1 1 280px;margin:0}
.checkout-toggles .woocommerce-info{
  margin:0;padding:13px 18px;font-size:.85rem;background:var(--card-soft);
  border:1px solid var(--line-soft);border-radius:14px;box-shadow:none;
  display:flex;align-items:center;gap:8px;
}
.checkout-toggles .woocommerce-info::before{position:static;transform:none;width:7px;height:7px;background:var(--accent,#8a6d4b)}
.checkout-toggles .woocommerce-info a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.checkout-toggles .woocommerce-form-login,
.checkout-toggles .checkout_coupon{flex:1 1 100%;margin-top:4px}

.woocommerce-checkout form.checkout.woocommerce-checkout{
  display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:40px;align-items:start;
}
.woocommerce-checkout #customer_details{grid-column:1;min-width:0;width:auto;float:none}
.woocommerce-checkout #order_review_heading{grid-column:2;margin:0 0 14px}
.woocommerce-checkout #order_review{
  grid-column:2;width:100%;float:none;
  background:var(--card);border:1px solid var(--line-soft);
  border-radius:var(--r-lg,28px);padding:28px;position:sticky;top:96px;
}
/* In ons template zit #order_review al binnen .summary (de kaart). Voorkom
   het dubbele vlak: binnen .summary geen eigen achtergrond/rand/padding. */
.summary #order_review,
.summary .woocommerce-checkout-review-order{
  background:transparent;border:none;border-radius:0;padding:0;position:static;
}
.woocommerce-checkout #order_review table.shop_table{
  background:transparent;border-radius:0;margin-bottom:14px;
}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2{width:100%;float:none}
@media(max-width:980px){
  .woocommerce-checkout form.checkout.woocommerce-checkout{
    grid-template-columns:1fr;gap:26px;
  }
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review{grid-column:1}
  .woocommerce-checkout #order_review{position:static}
}

/* ---- Coupon/waardebon in de besteloverzicht-kolom: compact + subtiel ---- */
.summary .woocommerce-form-coupon-toggle{margin:0 0 14px}
.summary .woocommerce-form-coupon-toggle .woocommerce-info{
  margin:0;padding:11px 14px;font-size:.8rem;line-height:1.4;background:var(--card-soft);
  border:1px solid var(--line-soft);border-radius:12px;box-shadow:none;
  display:flex;align-items:center;gap:8px;color:var(--ink-soft);
}
.summary .woocommerce-form-coupon-toggle .woocommerce-info::before{position:static;transform:none;width:6px;height:6px;background:var(--sage);flex:0 0 auto}
.summary .woocommerce-form-coupon-toggle .woocommerce-info a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.summary form.checkout_coupon{
  margin:0 0 16px;padding:14px;background:var(--card-soft);
  border:1px solid var(--line-soft);border-radius:14px;
}
.summary form.checkout_coupon p:first-child{display:none}
.summary form.checkout_coupon .form-row{margin:0 0 8px;padding:0;width:100%}
.summary form.checkout_coupon .input-text{width:100%;margin:0}
.summary form.checkout_coupon .button{width:100%;margin:0}

/* ============================================================
   CHECKOUT — betaalmethoden (strak, kaart-stijl)
============================================================ */
.woocommerce-checkout #payment,
.woocommerce-checkout #order_review #payment{background:transparent;border:0;border-radius:0;padding:0}
.woocommerce-checkout #payment ul.wc_payment_methods{
  list-style:none;margin:18px 0 16px;padding:0;border:0;
}
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method{
  border:1px solid var(--line-soft);border-radius:14px;background:var(--card);
  margin:0 0 10px;padding:0;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;
}
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method:hover{border-color:var(--sage)}
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method > label{
  display:flex;align-items:center;gap:11px;margin:0;padding:15px 16px;
  font-size:.92rem;font-weight:500;color:var(--ink);cursor:pointer;line-height:1.3;
}
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method > label img{
  margin:0 0 0 auto;max-height:26px;width:auto;display:inline-block;
}
.woocommerce-checkout #payment ul.wc_payment_methods input[type="radio"]{
  margin:0 1px 0 0;accent-color:var(--ink);width:18px;height:18px;flex:0 0 auto;
}
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method:has(input[type="radio"]:checked){
  border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);
}
.woocommerce-checkout #payment .payment_box{
  background:var(--bg-soft);margin:0;padding:15px 16px;border:0;border-top:1px solid var(--line-soft);
  border-radius:0;font-size:.85rem;line-height:1.55;color:var(--ink-soft);box-shadow:none;
}
.woocommerce-checkout #payment .payment_box::before{display:none}
.woocommerce-checkout #payment .woocommerce-privacy-policy-text{font-size:.78rem;color:var(--ink-mute);margin:6px 0 14px}
.woocommerce-checkout #payment .form-row.place-order{padding:0;margin:0}
.woocommerce-checkout #payment #place_order{width:100%;margin-top:6px}

/* YITH punten-balk (cart/checkout): één strakke, gecentreerde regel i.p.v. een
   rommelig over de volle breedte uitgesmeerd blok. */
.ywpar-cart-points-message,
.ywpar-cart-points-message_container{
  display:block;text-align:center;background:var(--sage-soft);
  border:1px solid var(--sage);border-radius:14px;
  padding:12px 18px;margin:0 0 18px;font-size:.9rem;line-height:1.5;color:var(--ink);
}
.ywpar-cart-points-message *{
  display:inline !important;width:auto !important;float:none !important;
  background:none !important;border:0 !important;margin:0 2px !important;padding:0 !important;
  vertical-align:middle;font-size:inherit;
}
.ywpar-cart-points-message strong,
.ywpar-cart-points-message b{font-weight:700;color:var(--ink)}
.ywpar-cart-points-message img,
.ywpar-cart-points-message svg{max-height:20px;width:auto;display:inline-block !important}

/* ============================================================
   MY ACCOUNT — 2-koloms layout (nav links, content rechts)
============================================================ */
.woocommerce-account .woocommerce-MyAccount-navigation{
  background:var(--card);border:1px solid var(--line-soft);
  border-radius:var(--r-lg,28px);padding:18px;
}
.woocommerce-account .woocommerce-account .woocommerce{
  display:block;
}
.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation{
  float:none;width:26%;
}
.woocommerce-account .woocommerce > .woocommerce-MyAccount-content{
  float:none;width:70%;
}
/* De custom my-account.php levert zelf de 2-koloms layout via .account-grid
   (account.css). De .woocommerce-wrapper mag dus géén eigen grid forceren —
   anders perst hij de hero/inhoud samen tot een smalle kolom. */
.woocommerce-account .woocommerce{
  display:block;
}
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{width:auto !important;float:none}

/* ============================================================
   ARCHIVE / SHOP — native WC grid (fallback wanneer geen custom loop)
   Zorgt dat ook standaard .woocommerce ul.products een net grid is.
============================================================ */
.woocommerce ul.products,
.woocommerce-page ul.products{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  list-style:none;margin:0;padding:0;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  margin:0 !important;width:auto !important;float:none;
}
.woocommerce ul.products li.product::before{display:none}
/* WC voegt een clearfix ::before/::after toe op ul.products. Op een CSS-grid
   worden die pseudo-elementen GRID-ITEMS → ze pakken de eerste/laatste cel,
   waardoor de eerste productkaart "verdwijnt" en de rij scheef loopt. */
.woocommerce ul.products::before,
.woocommerce ul.products::after{display:none !important;content:none !important}
/* WC's eigen breedte-berekening uitschakelen op alle kolomvarianten */
.woocommerce ul.products li.first,
.woocommerce ul.products li.last{clear:none}
@media(max-width:1100px){
  .woocommerce ul.products,
  .woocommerce-page ul.products{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .woocommerce ul.products,
  .woocommerce-page ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}

/* ============================================================
   Native WC product-loop kaart — EXACT mockup (index.html/styles.css)
   Structuur: li.product > .product-img + .product-body(.foot)
============================================================ */
.woocommerce ul.products li.product{
  background:var(--beige);border-radius:var(--r-lg,28px);
  padding:22px;display:flex;flex-direction:column;gap:14px;
  transition:background-color .25s,border-color .25s;
  text-align:left;position:relative;border:1px solid transparent;
}
.woocommerce ul.products li.product:hover{
  background:var(--card-soft);border-color:var(--line-soft);
}

/* Afbeelding-wrapper */
.woocommerce ul.products li.product .product-img{
  aspect-ratio:1/1;border-radius:var(--r,18px);overflow:hidden;
  background:var(--card-soft);position:relative;
}
.woocommerce ul.products li.product:hover .product-img{background:var(--beige)}
.woocommerce ul.products li.product .product-img .product-link{display:block;width:100%;height:100%}
.woocommerce ul.products li.product .product-img img{
  width:100%;height:100%;object-fit:contain;margin:0;
  border-radius:0;padding:7%;box-sizing:border-box;
}

/* Badge linksboven (eigen markup + WC .onsale fallback) */
.woocommerce ul.products li.product .product-tag,
.woocommerce ul.products li.product .onsale{
  position:absolute;top:12px;left:12px;margin:0;z-index:2;
  background:rgba(255,255,255,.82);color:var(--ink);min-height:auto;min-width:auto;
  -webkit-backdrop-filter:blur(10px) saturate(1.25);backdrop-filter:blur(10px) saturate(1.25);
  border:1px solid rgba(255,255,255,.55);
  font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;font-weight:600;line-height:1;
}
.woocommerce ul.products li.product .product-tag.sale,
.woocommerce ul.products li.product .onsale{background:#9E4F38;color:#fff;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.woocommerce ul.products li.product .product-tag.new{background:var(--sage);color:var(--ink);border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;display:inline-flex;align-items:center;gap:5px}
.woocommerce ul.products li.product .product-tag.new::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}

/* Favoriet rechtsboven */
.woocommerce ul.products li.product .fav{
  position:absolute;top:12px;right:12px;z-index:2;
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--ink);
  display:flex;align-items:center;justify-content:center;transition:all .2s;
}
.woocommerce ul.products li.product .fav:hover{background:#fff;transform:scale(1.1)}
.woocommerce ul.products li.product .fav.on svg{fill:var(--ink)}

/* Variatie-indicator (pdots) */
.woocommerce ul.products li.product .pdots{
  position:absolute;bottom:12px;left:12px;display:flex;gap:5px;z-index:2;
}
.woocommerce ul.products li.product .pdots span{
  width:7px;height:7px;border-radius:50%;background:rgba(31,27,24,.18);
}
.woocommerce ul.products li.product .pdots span.on{background:var(--ink)}

/* Body — flex-kolom zodat .product-foot onderaan uitlijnt */
.woocommerce ul.products li.product .product-body{
  display:flex;flex-direction:column;gap:6px;flex:1 1 auto;min-width:0;
}
.woocommerce ul.products li.product .product-brand{
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
}
.woocommerce ul.products li.product .product-name,
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:.88rem;color:var(--ink);line-height:1.4;font-weight:400;
  padding:0;margin:0;text-transform:none;letter-spacing:0;
  overflow-wrap:break-word;word-break:break-word;hyphens:auto;min-width:0;
  /* Gelijke kaarten: titel altijd 2 regels hoog (volledige titel op de PDP). */
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.5em;
}
.woocommerce ul.products li.product .product-name a{color:inherit;text-decoration:none}
.woocommerce ul.products li.product .product-name a:hover{text-decoration:underline;text-underline-offset:3px}
.woocommerce ul.products li.product .product-meta{
  font-size:.74rem;color:var(--ink-mute);text-transform:none;letter-spacing:0;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.1em;
}

/* Foot — prijs links, ronde icoonknop rechts */
.woocommerce ul.products li.product .product-foot{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:auto;padding-top:8px;gap:12px;
}
.woocommerce ul.products li.product .price{
  font-size:1rem;letter-spacing:.02em;font-weight:400;color:var(--ink);margin:0;
}
.woocommerce ul.products li.product .price del{opacity:1}
.woocommerce ul.products li.product .price del .amount,
.woocommerce ul.products li.product .price del{
  font-size:.78rem;color:var(--ink-mute);text-decoration:line-through;margin-right:6px;
}
.woocommerce ul.products li.product .price ins{text-decoration:none}
.woocommerce ul.products li.product .price--quote{font-size:.84rem;color:var(--ink-soft)}

/* DE ronde plus-knop — overschrijft WC .button volledig.
   !important op color/background omdat .woocommerce a.button color:#fff !important
   forceert (anders wit icoon op witte cirkel = onzichtbaar). */
.woocommerce ul.products li.product .add-btn,
.woocommerce ul.products li.product a.button.add-btn{
  width:44px;height:44px;min-width:44px;max-width:44px;
  min-height:44px;max-height:44px;flex:0 0 44px;
  padding:0;margin:0;
  border-radius:50%;border:none;
  background:var(--card) !important;color:var(--ink) !important;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:0;line-height:0;letter-spacing:0;
  transition:all .25s;overflow:hidden;box-sizing:border-box;
}
.woocommerce ul.products li.product .add-btn svg{display:block;stroke:currentColor}
.woocommerce ul.products li.product .add-btn:hover{background:var(--ink) !important;color:#fff !important}
.woocommerce ul.products li.product .add-btn.ajax_add_to_cart:hover{transform:rotate(90deg)}
.woocommerce ul.products li.product .add-btn.loading{opacity:.6;pointer-events:none}
.woocommerce ul.products li.product .add-btn.added{background:var(--sage) !important;color:var(--ink) !important;transform:none}
/* "Bekijk winkelwagen"-link die WC na AJAX toevoegt — verbergen in de kaart */
.woocommerce ul.products li.product .added_to_cart{display:none !important}

/* ============================================================
   Algemene productgrid — voor [products] shortcode (homepage,
   gerelateerd, etc.). WC rendert <ul class="products columns-N">.
   .shop-main heeft een eigen 3-koloms grid hierboven.
============================================================ */
/* display:grid op de columns-klassen zelf (specificiteit 0,2,1) zodat de
   WooCommerce-plugin-CSS (.woocommerce ul.products, 0,1,1) niet wint. */
.woocommerce ul.products,
.woocommerce ul.products.columns-1,
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5,
.woocommerce ul.products.columns-6{
  list-style:none;margin:0;padding:0;float:none;
  display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr));
}
.woocommerce ul.products.columns-1{grid-template-columns:1fr}
.woocommerce ul.products.columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.woocommerce ul.products.columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.woocommerce ul.products.columns-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.woocommerce ul.products.columns-6{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:1000px){.woocommerce ul.products[class*="columns-"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.woocommerce ul.products[class*="columns-"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

/* ============================================================
   Homepage categorie-TABS — panelen met 4 producten per categorie.
   JS wisselt .is-active; alleen actief paneel zichtbaar.
============================================================ */
.cat-panels{position:relative}
.cat-panel{display:none}
.cat-panel.is-active{display:block;animation:umiFadeTab .35s ease}
@keyframes umiFadeTab{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cat-tabs .cat-tab{background:none;border:none;cursor:pointer;font-family:inherit}

/* ============================================================
   UMI SHOP ENHANCED PLUGIN — design integration
   Maps de plugin's klassen naar onze design tokens zodat het
   automatisch in onze stijl rendert zonder plugin-CSS te wijzigen.
============================================================ */
.umi-shop-wrap{
  --umi-primary: var(--ink);
  --umi-accent: var(--sage);
  --umi-bg: var(--bg-soft);
  --umi-card-bg: var(--card);
  --umi-text: var(--ink);
  --umi-text-soft: var(--ink-soft);
  --umi-line: var(--line);
  --umi-radius: 28px;
  --umi-card-radius: 20px;
  --umi-input-radius: 14px;
}

/* Card style matching ours */
.umi-shop-wrap .umi-card{
  background:var(--beige);border-radius:28px;padding:22px;
  transition:transform .3s,background .25s;
}
.umi-shop-wrap .umi-card:hover{background:var(--card-soft)}
.umi-shop-wrap .umi-card-imgwrap{background:var(--card-soft);border-radius:18px;overflow:hidden;aspect-ratio:1/1}
.umi-shop-wrap .umi-card-imgwrap img{mix-blend-mode:normal}
.umi-shop-wrap .umi-card-title{font-size:.88rem;color:var(--ink);font-weight:400;line-height:1.4}
.umi-shop-wrap .umi-card-price{font-size:1rem;color:var(--ink);font-weight:400}

/* Filter sidebar styling */
.umi-shop-wrap .umi-shop-filters{
  background:var(--card);border-radius:28px;padding:24px;
}
.umi-shop-wrap .umi-filter-header h3{
  font-size:.86rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
}
.umi-shop-wrap .umi-filter-block h4{
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);font-weight:500;margin-bottom:12px;
}
.umi-shop-wrap .umi-checklist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.umi-shop-wrap .umi-checklist label{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.86rem;color:var(--ink-soft);cursor:pointer;
  padding:4px 0;text-transform:none;letter-spacing:0;
}
.umi-shop-wrap .umi-checklist label:hover{color:var(--ink)}
.umi-shop-wrap .umi-checklist label input{margin-right:8px;accent-color:var(--ink)}
.umi-shop-wrap .umi-checklist em{font-style:normal;font-size:.72rem;color:var(--ink-mute)}

/* Filter trigger button (mobile) */
.umi-shop-wrap .umi-filter-trigger{
  background:var(--ink);color:#fff;border-radius:999px;
  padding:12px 22px;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;
}
.umi-shop-wrap .umi-filter-close{
  background:var(--bg-soft);border:none;border-radius:50%;
  width:36px;height:36px;font-size:1.5rem;cursor:pointer;
}
.umi-shop-wrap .umi-reset-filters{
  background:transparent;border:none;color:var(--ink-soft);
  text-decoration:underline;font-size:.72rem;letter-spacing:.04em;cursor:pointer;
}

/* Sort + count toolbar */
.umi-shop-wrap .umi-shop-toolbar{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line-soft);
  flex-wrap:wrap;gap:14px;
}
.umi-shop-wrap .umi-result-count{font-size:.78rem;color:var(--ink-soft);letter-spacing:.04em}
.umi-shop-wrap .umi-sort select{
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:8px 14px;font-size:.86rem;color:var(--ink);
}

/* Price slider */
.umi-shop-wrap .umi-price-slider .umi-price-track{
  background:var(--bg-soft);height:6px;border-radius:3px;position:relative;
}
.umi-shop-wrap .umi-price-slider .umi-price-range{
  background:var(--ink);height:100%;border-radius:3px;
}
.umi-shop-wrap .umi-price-inputs{display:flex;gap:8px;margin-top:14px}
.umi-shop-wrap .umi-price-inputs input{
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:8px 12px;width:100%;font-size:.84rem;
}

/* Badges (plugin custom taxonomy) */
.umi-shop-wrap .umi-badge{
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;font-weight:500;
}

/* Pagination from plugin */
.umi-shop-wrap .umi-pagination button{
  background:var(--card);color:var(--ink);
  border-radius:50%;width:38px;height:38px;
  display:inline-flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;font-size:.82rem;
}
.umi-shop-wrap .umi-pagination button.active{
  background:var(--ink);color:#fff;
}

/* =========================================================================
   UMI — Shop archief: grid, filters & toolbar (v1.3.1)
   Laadt alleen op WooCommerce-pagina's. Vult de styling aan voor de markup
   uit archive-product.php + inc/shop-helpers.php.
   ========================================================================= */

/* Productgrid — WooCommerce rendert <ul class="products prod-grid three">.
   Exacte mockup-waarden: .prod-grid.three = repeat(3,1fr), gap 14px
   (zie assets/styles.css in de mockup). */
.shop-main ul.products,
.shop-main .prod-grid,
.shop-main .prod-grid.three{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
}
.shop-main ul.products li.product{margin:0;width:auto;float:none}
/* .product erft de mockup-kaartstijl uit main.css; hier alleen min-width:0
   zodat lange productnamen de grid niet oprekken (geen overflow). */
.shop-main .product{min-width:0}
.shop-main{min-width:0}

/* Toolbar boven de producten (aantal + sorteren) */
.shop-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:20px;
}
.shop-toolbar .woocommerce-result-count{margin:0;color:var(--ink-soft,#5B5147);font-size:.9rem}
.shop-toolbar .woocommerce-ordering{margin:0}
.shop-toolbar select{
  padding:10px 14px;border:1px solid var(--line,#e4dccd);border-radius:10px;
  background:var(--card,#fff);color:var(--ink,#1A1814);font-size:.9rem;
}

/* Filterkolom — exacte mockup-waarden (zie assets/styles.css mockup) */
.filters{
  background:var(--card,#fff);border-radius:var(--r-lg,18px);padding:24px;
  border:1px solid var(--line-soft,#e4dccd);position:sticky;top:96px;align-self:start;
}
.filters .filter-head,
.filters .panel-h{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:0;padding-bottom:14px;border-bottom:1px solid var(--line-soft,#e4dccd);
}
.filters .filter-head h3{margin:0;font-size:.86rem;letter-spacing:.18em}
.filters .filter-reset{font-size:.8rem;color:var(--ink-soft,#5B5147);text-decoration:underline}
.filter-group{padding:14px 0;margin-bottom:0;border-bottom:1px solid var(--line-soft,#e4dccd)}
.filter-group:last-child{border-bottom:none}
.filter-group h4{
  margin:0 0 12px;font-size:.78rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;
}
.filter-options{display:flex;flex-direction:column;gap:8px;font-size:.84rem}
.filter-options label{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 0;min-height:44px;cursor:pointer;color:var(--ink-soft,#5B5147);
  transition:color .2s;text-transform:none;letter-spacing:0;
}
.filter-options label:hover{color:var(--ink,#1A1814)}
.filter-options label span{display:flex;align-items:center;gap:0}
.filter-options label input{margin-right:10px;accent-color:var(--ink,#1A1814)}
.filter-options input[type="checkbox"]{accent-color:var(--ink,#1A1814)}
.filter-options .cnt,
.filter-group .cnt{font-size:.72rem;color:var(--ink-mute,#8a8275)}
.filter-color-swatches{display:flex;flex-wrap:wrap;gap:8px}
.filter-swatch{
  width:26px;height:26px;border-radius:50%;display:inline-block;
  border:1px solid rgba(0,0,0,.12);
}
.filter-price-form .field-row{display:flex;gap:8px}
.filter-price-form .input{width:100%}

/* Promo-zijbalk rechts */
.shop-sidebar{display:flex;flex-direction:column;gap:14px;align-self:start}

/* Responsive — volgt de mockup-breakpoints (assets/styles.css):
   prod-grid.three -> 2 koloms <=1000px; .split-3 klapt naar 1 kolom <=900px. */
@media(max-width:1000px){
  .shop-main ul.products,
  .shop-main .prod-grid,
  .shop-main .prod-grid.three{grid-template-columns:repeat(2,1fr)}
}
/* De FILTERS-knop is alleen voor mobiel: op desktop staat het filterpaneel
   vast in de zijbalk, dus daar verbergen we de knop (anders doet hij ogenschijnlijk niets). */
.shop-filter-toggle{display:none}
@media(max-width:900px){
  /* .split-3 klapt naar 1 kolom (zie main.css); filters + promo onder producten */
  .split-3,.split-3[data-layout]{grid-template-columns:1fr !important}
  .filters{position:static;top:auto}
  .shop-sidebar{flex-direction:row;flex-wrap:wrap}
  .shop-sidebar > *{flex:1;min-width:240px}

  /* Toon de knop en maak het paneel inklapbaar (dicht tot je op FILTERS klikt). */
  .shop-filter-toggle{display:inline-flex}
  #shopFilters.filters{display:none}
  #shopFilters.filters.is-open{display:block}
}
@media(max-width:520px){
  .shop-main ul.products,
  .shop-main .prod-grid,
  .shop-main .prod-grid.three{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .shop-sidebar{flex-direction:column}
}

/* ============================================================
   LOGIN — commercieel split-screen (links sfeerbeeld, rechts form)
============================================================ */
.account-login-screen{padding:0}
/* Op de uitgelogde account-pagina laadt WC form-login.php direct in .woocommerce,
   die normaal een 240px+1fr account-grid is. Voor het login-scherm uitschakelen
   zodat de split de volledige breedte krijgt. */
.woocommerce-account .woocommerce:has(.login-split){display:block;gap:0}
.login-split{
  display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 220px);
  background:var(--card);border-radius:var(--r-lg,28px);overflow:hidden;
  margin:0 auto;max-width:1200px;
}
/* Links: sfeerbeeld */
.login-visual{
  position:relative;background-size:cover;background-position:center;
  display:flex;align-items:flex-end;padding:48px;color:#fff;min-height:420px;
}
.login-visual__inner{max-width:440px}
.login-visual__inner h2{
  color:#fff;font-size:clamp(1.6rem,2.4vw,2.4rem);line-height:1.15;
  letter-spacing:-.01em;margin:10px 0 14px;
}
.login-visual__inner p{color:rgba(255,255,255,.88);font-size:.95rem;line-height:1.6;margin-bottom:22px}
.login-usps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.login-usps li{
  display:flex;align-items:center;gap:10px;
  font-size:.9rem;color:#fff;letter-spacing:.01em;
}
.login-usps li svg{flex-shrink:0;color:var(--sage)}

/* Rechts: formulieren */
.login-forms{
  display:flex;flex-direction:column;justify-content:center;
  padding:56px clamp(28px,5vw,72px);max-width:640px;width:100%;margin:0 auto;
}
.login-tabs{display:flex;gap:4px;background:var(--bg-soft);border-radius:14px;padding:5px;margin-bottom:30px}
.login-tab{
  flex:1;border:none;background:transparent;cursor:pointer;font-family:inherit;
  padding:11px 16px;border-radius:10px;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:500;color:var(--ink-soft);transition:all .2s;
}
.login-tab.is-active{background:var(--card);color:var(--ink);box-shadow:0 1px 4px rgba(31,27,24,.06)}
.login-pane{display:none}
.login-pane.is-active{display:block;animation:umiFadeTab .3s ease}
.login-pane__head{margin-bottom:24px}
.login-pane__head h1{font-size:clamp(1.5rem,2.2vw,2rem);margin-bottom:8px;letter-spacing:-.01em}
.login-pane__head p{color:var(--ink-soft);font-size:.92rem}
.login-forms .woocommerce-form-row{margin-bottom:16px}
.login-forms label{
  display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:500;margin-bottom:6px;
}
.login-forms .required{color:var(--error);text-decoration:none}
.login-forms input[type=text],
.login-forms input[type=email],
.login-forms input[type=password]{
  width:100%;background:var(--card);border:1px solid var(--line);
  padding:14px 18px;border-radius:14px;font-size:16px;color:var(--ink);
  font-family:inherit;outline:none;transition:border-color .2s,box-shadow .2s;
}
.login-forms input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(31,27,24,.06)}
.login-row-between{
  display:flex;justify-content:space-between;align-items:center;
  gap:14px;margin:6px 0 22px;flex-wrap:wrap;
}
.login-row-between .woocommerce-form__label-for-checkbox{
  display:flex;align-items:center;gap:8px;margin:0;font-size:.86rem;
  letter-spacing:0;text-transform:none;color:var(--ink);cursor:pointer;
}
.login-row-between input[type=checkbox]{accent-color:var(--ink);width:16px;height:16px;margin:0}
.login-lost{font-size:.84rem;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px}
.login-lost:hover{color:var(--ink)}
.login-switch{margin-top:20px;color:var(--ink-soft);text-align:center}
.login-switch a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-weight:500}

@media(max-width:860px){
  .login-split{grid-template-columns:1fr;min-height:0}
  .login-visual{min-height:240px;padding:32px}
  .login-forms{padding:40px 24px}
}

/* ============================================================
   BUNDLE — "Vaak samen gekocht" (mockup product.html .bundle)
============================================================ */
.bundle{
  background:var(--card-soft);border-radius:var(--r-lg,28px);
  padding:30px;margin-top:20px;
}
.bundle h3{margin-bottom:18px;letter-spacing:.08em;font-size:1.05rem}
.bundle-row{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap}
.bundle-item{
  display:flex;align-items:center;gap:14px;background:var(--card);
  border:1px solid transparent;border-radius:var(--r,18px);padding:14px;
  flex:1;min-width:230px;cursor:pointer;transition:border-color .2s,opacity .2s;
}
.bundle-item:hover{border-color:var(--line)}
.bundle-item.is-off{opacity:.55}
.bundle-item .thumb-mini{
  width:50px;height:50px;border-radius:12px;overflow:hidden;
  background:var(--card-soft);flex-shrink:0;
}
.bundle-item .thumb-mini img{width:100%;height:100%;object-fit:cover}
.bundle-item .b-n{font-size:.82rem;line-height:1.3}
.bundle-item .b-p{font-size:.74rem;color:var(--ink-soft);margin-top:2px}
.bundle-item input[type=checkbox]{accent-color:var(--ink);width:17px;height:17px;cursor:pointer;flex-shrink:0}
.bundle-total{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft);
  flex-wrap:wrap;gap:14px;font-weight:500;
}
.bundle-total .b-price{font-size:1.3rem;letter-spacing:.02em;font-weight:400}
.bundle-total .b-old{font-size:.84rem;color:var(--ink-mute);text-decoration:line-through;margin-left:8px}
.bundle-total .btn{flex-shrink:0}

/* ============================================================
   CART DRAWER — slide-in "toegevoegd aan winkelwagen" (vervangt WC-meldingen)
============================================================ */
/* Cart-lade-CSS is verplaatst naar main.css (globaal geladen op elke pagina). */


/* Verberg de WC "bekijk winkelwagen"-link die naast ajax-knoppen verschijnt */
.added_to_cart.wc-forward{display:none !important}

/* Variatie-keuze highlight wanneer iemand toevoegt zonder optie te kiezen */
@keyframes umiFlash{0%,100%{box-shadow:0 0 0 0 rgba(138,109,75,0)}40%{box-shadow:0 0 0 4px rgba(138,109,75,.25)}}
.variations.umi-flash{animation:umiFlash .55s ease 2;border-radius:12px}

/* ============================================================
   PDP — KALME/EDITORIALE VERFIJNING (inspiratie: rustige case-study layout)
   Meer witruimte, lichtere blokken, slash-eyebrows, zachtere randen.
============================================================ */
/* Meer lucht tussen de productblokken */
.pdp-card{padding:56px 56px 48px}
@media(max-width:760px){.pdp-card{padding:26px 20px}}
.detail-grid{margin-top:64px;padding-top:48px}
.umi-seen{padding:84px 0 0;margin-bottom:56px}
.umi-reviews{padding:72px 0 0;margin-top:8px}
.umi-faq{padding:72px 0 90px;margin-top:56px;border-top:1px solid var(--line-soft)}
.umi-faq > .wrap-narrow,.umi-faq > .wrap{padding-top:64px}
/* Ademruimte tussen de "Anderen bekeken"-kaarten en de reviews-eyebrow.
   De reviews-sectie zet inline padding-top:0 (in single-product.php), dus de
   ruimte komt via margin-bottom op .umi-seen (geen inline override) + een kleine
   margin-top op .umi-reviews. Op mobiel iets compacter. */
@media(max-width:760px){
  .umi-seen{margin-bottom:36px}
  .umi-reviews{margin-top:4px}
}

/* Slash-eyebrow ('// titel') verwijderd op verzoek — strak sage-label i.p.v. een
   herhaald teken. (eyebrow-kleur staat centraal in .eyebrow in main.css) */

/* Rustigere trust-strip: licht, luchtig, hairline i.p.v. vlak */
.pdp-strip{margin-top:46px;gap:14px}
.pdp-strip .ps{
  background:transparent;border:1px solid var(--line-soft);border-radius:var(--r,18px);
  padding:22px;gap:6px;
}
.pdp-strip .ps .ic{background:var(--bg-soft)}

/* Kalmere sectiekoppen: meer ruimte, lichtere lijn */
.seen-head{margin-bottom:34px}
.detail-grid{border-top-color:var(--line-soft)}

/* (FAQ-styling staat nu volledig in het FAQ-blok hierboven — geen losse override meer
   zodat er geen twee regelsets met elkaar vechten.) */
.faq-wrap .faq-item.open .faq-a{padding:0 24px 22px}

/* ============================================================
   SHOP — rustiger & ruimer (meer UX/UI), referentie-stijl
============================================================ */
/* Producten véél meer ademruimte: 2 kolommen (filters + producten). De promo's
   staan als rustige strook ONDER de producten i.p.v. een vaak-lege derde kolom
   die het grid indrukte. Ruimere tussenruimtes tegen het "krappe" gevoel. */
body.woocommerce-shop .split-3,
body.post-type-archive-product .split-3,
body.tax-product_cat .split-3{
  grid-template-columns:250px minmax(0,1fr);gap:44px 48px;
}
body.woocommerce-shop .shop-sidebar,
body.post-type-archive-product .shop-sidebar,
body.tax-product_cat .shop-sidebar{
  grid-column:1 / -1;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:4px;
}
body.woocommerce-shop .shop-sidebar > *,
body.post-type-archive-product .shop-sidebar > *,
body.tax-product_cat .shop-sidebar > *{margin-top:0 !important}
/* Meer lucht tussen de productkaarten (overschrijft de .columns-N gap). */
body.woocommerce-shop .shop-main ul.products,
body.post-type-archive-product .shop-main ul.products,
body.tax-product_cat .shop-main ul.products{gap:34px 30px !important}
@media(max-width:1200px){
  body.woocommerce-shop .split-3,
  body.post-type-archive-product .split-3,
  body.tax-product_cat .split-3{grid-template-columns:220px minmax(0,1fr);gap:32px 34px}
}
@media(max-width:900px){
  body.woocommerce-shop .split-3,
  body.post-type-archive-product .split-3,
  body.tax-product_cat .split-3{grid-template-columns:1fr}
}
/* Kalme filterkaart: lichter, geen drukke randen op elke groep */
.filters{background:var(--card);border-color:var(--line-soft);padding:22px}
.filter-group{border-bottom-color:var(--line-soft)}
.filter-group h4{letter-spacing:.14em;font-size:.7rem;color:var(--ink-soft)}
/* Rustige swatch-hover (geen schaal/schaduw) */
.filter-swatch{transition:box-shadow .15s}
.filter-swatch:hover{transform:none;box-shadow:0 0 0 2px var(--line)}
.filter-swatch.is-active{box-shadow:0 0 0 2px var(--ink)}
/* Toolbar rustiger en luchtiger */
.shop-toolbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:0 0 22px;margin-bottom:26px;border-bottom:1px solid var(--line-soft);
}
.shop-toolbar .woocommerce-ordering select{
  border:1px solid var(--line);border-radius:999px;padding:9px 16px;background:var(--card);
  font-size:.82rem;cursor:pointer;
}
/* Productgrid: ruimere kaarten op de shop */
.shop-main ul.products,
.shop-main .prod-grid.three{gap:18px}

/* ============================================================
   REFERENTIE-FINISH: witte kaarten, dotted-leader specs, kalme grote tabs
============================================================ */
/* Productkaarten WIT (referentie), met licht-grijs beeldvlak — site-breed */
.product,
.woocommerce ul.products li.product{
  background:var(--card) !important;border:1px solid var(--line-soft);
}
.product:hover,
.woocommerce ul.products li.product:hover{
  background:var(--card) !important;border-color:var(--line);
}
.product-img,
.woocommerce ul.products li.product .product-img{background:#F1EEE8}

/* Kenmerken/Features als dotted-leader lijst (label …… waarde) */
.feature-items li{
  flex-direction:row;align-items:baseline;gap:0;padding:10px 0;border-bottom:none;
  flex-wrap:wrap;
}
.feature-items .fl-label{
  order:1;flex:0 0 auto;white-space:nowrap;
  font-size:.84rem;letter-spacing:0;text-transform:none;font-weight:400;color:var(--ink-soft);
}
.feature-items li::after{
  content:"";order:2;flex:1 1 auto;align-self:flex-end;
  border-bottom:1px dotted var(--line-dot);margin:0 7px 5px;min-width:14px;
}
.feature-items .fl-value{
  order:3;flex:0 0 auto;text-align:right;font-size:.84rem;color:var(--ink);line-height:1.5;
}

/* Tabs net zo groot als de categorie-tabs op de homepage (.cat-tab): grote,
   rustige typografische koppen, kleur/opacity i.p.v. een lijn. */
.detail-grid .pdp-tabs-wrap .woocommerce-tabs ul.tabs{
  border-bottom:none;gap:40px;padding-bottom:2px;margin-bottom:30px;
  flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none; /* één regel, net als homepage-categorieën */
}
.detail-grid .pdp-tabs-wrap .woocommerce-tabs ul.tabs::-webkit-scrollbar{display:none}
.detail-grid .pdp-tabs-wrap .woocommerce-tabs ul.tabs li{flex:0 0 auto;white-space:nowrap}
.detail-grid .pdp-tabs-wrap .woocommerce-tabs ul.tabs li a{
  font-size:clamp(1.3rem,2.6vw,2.1rem);color:var(--ink-mute);letter-spacing:-.005em;
  font-weight:400;opacity:.6;line-height:1.1;
}
.detail-grid .pdp-tabs-wrap .woocommerce-tabs ul.tabs li a:hover{color:var(--ink);opacity:1}
.detail-grid .pdp-tabs-wrap .woocommerce-tabs ul.tabs li.active a{color:var(--ink);opacity:1;font-weight:400}
.detail-grid .pdp-tabs-wrap .woocommerce-tabs ul.tabs li.active a::after{display:none}

/* ============================================================
   UI-AUDIT FIXES (Blissful-referentie) — geconsolideerd
============================================================ */

/* #6 Lange filterlijsten niet eindeloos hoog → scrollbaar, kalmere shopkolom */
.filters .filter-options{max-height:230px;overflow-y:auto;overflow-x:hidden;padding-right:4px}
.filters .filter-options::-webkit-scrollbar{width:6px}
.filters .filter-options::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}

/* #8 Reviewformulier in dezelfde zachte stijl als de rest (geen kale defaults) */
#reviews #respond input[type="text"],
#reviews #respond input[type="email"],
#reviews #respond textarea{
  width:100%;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:14px 18px;font-family:inherit;font-size:.95rem;
  color:var(--ink);transition:border-color .2s,box-shadow .2s;outline:none;
}
#reviews #respond input[type="text"]:focus,
#reviews #respond input[type="email"]:focus,
#reviews #respond textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(31,27,24,.06)}
#reviews #respond label{display:block;font-size:.8rem;color:var(--ink-soft);margin:14px 0 6px}
#reviews #respond .stars a{color:var(--ink)}

/* #9 Mobiele specs ("Kenmerken") niet buiten beeld; waarde onder label */
@media(max-width:600px){
  .feature-items li{flex-direction:column;align-items:flex-start;gap:2px}
  .feature-items li::after{display:none}
  .feature-items .fl-value{text-align:left;flex:1 1 100%;min-width:0;overflow-wrap:anywhere}
}

/* #13 Cart: verberg de dubbele WooCommerce-checkoutknop (eigen knop blijft) */
.woocommerce-cart .wc-proceed-to-checkout{display:none}

/* #15/#36 Checkout: order-notes hoger + alleen verticaal resizen (geen sleephandle) */
.woocommerce form .form-row textarea,
#order_comments{min-height:110px;resize:vertical}

/* #19 PDP-beschrijving: subkoppen krijgen lucht i.p.v. vastplakken */
.detail-grid .desc-block .panel h3,
.detail-grid .desc-block .panel h4,
.detail-grid .desc-block .panel h5,
.desc-block h3,.desc-block h4,.desc-block h5{
  font-size:1.05rem;color:var(--ink);margin:28px 0 8px;line-height:1.4;
}

/* #23 Cart: meerregelige verzendtekst links uitlijnen (alleen bedragen rechts) */
.woocommerce .cart_totals table.shop_table td p,
.woocommerce .cart_totals .woocommerce-shipping-destination,
.woocommerce .cart_totals .shipping-calculator-button{text-align:left}

/* #24 Account-meldingen niet breder dan de kaart */
.account-login-screen .woocommerce-notices-wrapper{max-width:1200px;margin:0 auto 18px;padding:0}

/* #1 Login-tab actief zonder slagschaduw */
.login-tab.is-active{box-shadow:none}

/* ============================================================
   A11Y-AUDIT FIXES (UX/toegankelijkheid sweep) — CSS-only
   Focus-rings op custom controls, tabulaire cijfers, secundaire
   tap-targets en mobiele leesbaarheid. (Contrast + primaire 44px
   targets zijn in-place hierboven gefixt.)
============================================================ */
/* Ronde controls: zichtbare focus-ring + herstel cirkelvorm
   (globale *:focus-visible zet border-radius:4px → ronde knop werd hoekig). */
.woocommerce ul.products li.product .add-btn:focus-visible,
.woocommerce ul.products li.product .fav:focus-visible,
.umi-drawer__close:focus-visible,
.umi-reco__add:focus-visible,
.woocommerce table.shop_table .product-remove a.remove:focus-visible,
.woocommerce nav.woocommerce-pagination ul li a:focus-visible{
  outline:2px solid var(--ink);outline-offset:2px;border-radius:50%;
}
.login-tab:focus-visible,
.faq-wrap .faq-q:focus-visible{
  outline:2px solid var(--ink);outline-offset:2px;border-radius:10px;
}

/* Prijzen/totalen: tabulaire cijfers tegen kolom-jitter */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce .cart_totals .amount,
.woocommerce-checkout-review-order-table .amount,
.bundle-total .b-price{font-variant-numeric:tabular-nums}

/* Productnaam leesbaar op kleine schermen (>=15px) */
@media(max-width:520px){
  .woocommerce ul.products li.product .product-name,
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:.95rem}
}

/* Secundaire tap-targets richting toegankelijk formaat */
.woocommerce table.shop_table .product-remove a.remove{width:32px;height:32px}
.umi-reco__add{width:40px;height:40px}
.umi-shop-wrap .umi-pagination button{width:44px;height:44px}
.umi-shop-wrap .umi-filter-close{width:44px;height:44px}

/* Inklapbare filtergroepen (JS voegt .filter-toggle + .is-collapsed toe).
   Houdt het filterpaneel kort; chevron geeft open/dicht aan. */
.filters .filter-group > h4.filter-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0;min-height:44px;cursor:pointer;-webkit-user-select:none;user-select:none;
}
.filters .filter-group > h4.filter-toggle::after{
  content:"";flex:0 0 auto;width:8px;height:8px;margin-left:auto;
  border-right:1.5px solid var(--ink-soft);border-bottom:1.5px solid var(--ink-soft);
  transform:rotate(45deg);transition:transform .2s ease;
}
.filters .filter-group:not(.is-collapsed) > h4.filter-toggle::after{transform:rotate(-135deg)}
.filters .filter-group.is-collapsed > :not(h4){display:none}
.filters .filter-group > h4.filter-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}

/* ============================================================
   PDP BUY-BOX VERRIJKING (4-expert synthese) — trust & conversie
============================================================ */
/* Prijs dominanter + rustige incl.-btw-regel eronder */
.woocommerce div.product .summary > p.price,
.woocommerce div.product .summary span.price{
  font-size:1.4rem;font-weight:600;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;margin:8px 0 2px;
}
.umi-price-incl{
  font-size:.82rem;color:var(--ink-soft);margin:0 0 4px;font-variant-numeric:tabular-nums;
}
/* Concrete levertijd-belofte boven de knop */
.umi-delivery{
  display:flex;align-items:center;gap:8px;margin:10px 0 0;
  font-size:.84rem;line-height:1.4;color:var(--ink);
}
.umi-delivery svg{color:var(--success);flex:0 0 auto}
/* Lage-voorraad (alleen bij echt beheerde, lage voorraad) */
.woocommerce div.product .stock.low-stock{color:#8a5a1a;font-weight:500}
/* Geruststelling + betaalmethoden direct onder de add-to-cart-knop */
.buy-reassure{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.buy-reassure__seal{
  display:flex;align-items:center;gap:9px;background:var(--sage-soft);color:var(--ink);
  border-radius:12px;padding:11px 14px;font-size:.84rem;line-height:1.35;
}
.buy-reassure__seal svg{color:var(--success);flex:0 0 auto}
.buy-reassure__pay{
  display:flex;flex-wrap:wrap;gap:7px;align-items:center;
  color:var(--ink-soft);font-size:.74rem;letter-spacing:.04em;padding:0 2px;
}
/* Indicatief zakelijk lease-bedrag */
.umi-lease{
  display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap;
  padding:12px 14px;border:1px solid var(--line-soft);border-radius:14px;
  color:var(--ink);text-decoration:none;transition:border-color .2s ease,background .2s ease;
}
.umi-lease:hover{border-color:var(--sage);background:var(--card-soft)}
.umi-lease svg{color:var(--ink-soft);flex:0 0 auto}
.umi-lease__txt{font-size:.9rem}
.umi-lease__note{margin-left:auto;color:var(--ink-soft);font-size:.72rem;white-space:nowrap}
/* Trust-list & strip: hairline-definitie + sage icoon-accent */
.trust-list{border:1px solid var(--line-soft)}
.pdp-strip .ps .ic{background:var(--sage-soft)}
/* PDP quantity stepper (− [n] +) */
.woocommerce div.product form.cart .quantity{gap:2px}
.umi-qty-btn{
  width:40px;height:44px;min-width:40px;border:none;background:transparent;color:var(--ink);
  font-size:1.25rem;line-height:1;cursor:pointer;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;transition:background .15s ease;
}
.umi-qty-btn:hover{background:var(--card)}
.umi-qty-btn:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.woocommerce div.product form.cart .quantity input.qty{width:40px}
/* Variatie-foutmelding (inline, persistent) — duidelijker dan alleen een toast */
.umi-var-error{
  margin:4px 0 14px;padding:10px 14px;border-radius:12px;
  background:var(--error-soft);color:var(--error);font-size:.84rem;line-height:1.4;
  border:1px solid color-mix(in srgb, var(--error) 28%, transparent);
}
.umi-var-error[hidden]{display:none}
/* Reviews: minder lucht tussen "Reviews"-kop en het beoordelingen-paneel */
.umi-reviews .seen-head{margin-bottom:14px}

/* PDP "wauw"-laag: eyebrow boven de titel, een krachtige lead-zin en scanbare
   highlights — bouwt verlangen i.p.v. een grijze muur beschrijving. */
.pdp-eyebrow{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600;margin:0 0 10px;
}
.woocommerce div.product .summary .woocommerce-product-details__short-description p:first-child{
  font-size:1.05rem;color:var(--ink);line-height:1.6;
}
.pdp-highlights{list-style:none;margin:14px 0 2px;padding:0;display:flex;flex-direction:column;gap:9px}
.pdp-highlights li{display:flex;align-items:flex-start;gap:9px;font-size:.9rem;color:var(--ink);line-height:1.4}
.pdp-highlights svg{color:var(--success);flex:0 0 auto;margin-top:2px}
.pdp-highlights strong{font-weight:500}
/* PDP sale-badge: on-brand pill (de ronde WC-default werd niet gestyled omdat de
   pill-CSS alleen op ul.products stond). Toont nu de korting (−X%) op de galerij. */
.woocommerce div.product .onsale,
.woocommerce div.product span.onsale,
.woocommerce div.product .product-tag.sale{
  position:absolute;top:18px;left:18px;right:auto;z-index:3;margin:0;
  min-width:0;min-height:0;width:auto;height:auto;
  background:#9E4F38;color:#fff;border:none;border-radius:999px;
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  padding:7px 13px;line-height:1;-webkit-backdrop-filter:none;backdrop-filter:none;
}
/* Subcategorie-links op categorie-archief (SEO interne links + navigatie) */
.subcat-links{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.subcat-link{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font-size:.84rem;text-decoration:none;
  transition:border-color .2s ease,background .2s ease;
}
.subcat-link:hover{border-color:var(--sage);background:var(--card-soft)}
.subcat-link__n{font-size:.72rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}

/* ===========================================================================
   FLY-TO-CART — een 'bolletje' animeert van de toevoegknop naar het
   winkelwagen-icoon in de header (vervangt de lade-popup bij toevoegen).
   =========================================================================== */
.umi-fly-dot{
	position:fixed;left:0;top:0;z-index:9999;
	width:16px;height:16px;border-radius:50%;
	background:var(--sage,#B8C7B4);
	border:1px solid rgba(26,24,20,.18);
	box-shadow:0 6px 16px rgba(26,24,20,.22);
	transform:translate(-50%,-50%);
	pointer-events:none;will-change:transform,opacity;
}
@keyframes umiCartBump{
	0%{transform:scale(1)}
	28%{transform:scale(1.32)}
	55%{transform:scale(.9)}
	100%{transform:scale(1)}
}
[data-cart-link].umi-cart-bump svg,
[data-cart-link].umi-cart-bump .cart-count{
	animation:umiCartBump .6s cubic-bezier(.34,1.56,.64,1);
}
@media (prefers-reduced-motion: reduce){
	[data-cart-link].umi-cart-bump svg,
	[data-cart-link].umi-cart-bump .cart-count{animation:none}
	.umi-fly-dot{display:none}
}

/* ============================================================
   PDP PRIJS-BLOK — herontwerp: heldere hiërarchie, meer contrast,
   aantrekkelijke besparingsindicator. (eyebrow → titel → prijs-unit)
============================================================ */
/* Eyebrow met sage-accentstreep voor een 'designed' aanhef */
.pdp-eyebrow{
	color:var(--success);font-weight:600;margin:0 0 12px;letter-spacing:.2em;
}

/* Prijsblok — compact, verfijnd. GEEN flex-order (dat liet bij prijsranges de
   '–' vooraan springen). Geldt ook voor de variatieprijs van variabele
   producten. */
.woocommerce div.product .summary > p.price,
.woocommerce div.product .summary p.price,
.woocommerce div.product .woocommerce-variation-price .price{
	display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 9px;margin:10px 0 2px;
	font-size:1.4rem;font-weight:600;color:var(--ink);letter-spacing:-.01em;
	font-variant-numeric:tabular-nums;line-height:1.25;
}
/* Range-separator (de losse streep tussen 'van–tot') — gedempt, nooit vooraan */
.woocommerce div.product .summary p.price > span[aria-hidden="true"]:not(.woocommerce-Price-amount),
.woocommerce div.product .woocommerce-variation-price .price > span[aria-hidden="true"]:not(.woocommerce-Price-amount){
	color:var(--ink-mute);font-weight:400;padding:0 1px;
}
/* Oude prijs — klein, gedempt, doorgestreept */
.woocommerce div.product .summary p.price del,
.woocommerce div.product .woocommerce-variation-price .price del{
	font-size:.9rem;font-weight:400;opacity:1;color:var(--ink-mute);text-decoration:line-through;
}
.woocommerce div.product .summary p.price del *,
.woocommerce div.product .woocommerce-variation-price .price del *{ font-size:inherit;color:inherit; }
/* Huidige / sale-prijs — verfijnde, compacte ink-pil */
.woocommerce div.product .summary p.price ins,
.woocommerce div.product .woocommerce-variation-price .price ins{
	text-decoration:none;display:inline-flex;align-items:center;
	background:var(--ink);color:#fff;border-radius:999px;padding:5px 14px;
	font-size:1.12rem;font-weight:600;line-height:1.1;
}
.woocommerce div.product .summary p.price ins *,
.woocommerce div.product .woocommerce-variation-price .price ins *{ color:#fff; }
/* (excl. btw) — klein, gedempt, inline naast de prijs */
.woocommerce div.product .summary p.price .woocommerce-price-suffix,
.woocommerce div.product .woocommerce-variation-price .price .woocommerce-price-suffix{
	font-size:.72rem;font-weight:400;letter-spacing:0;color:var(--ink-mute);align-self:center;
}

/* Besparing — aantrekkelijke accentpill onder de prijs */
.umi-savings{
	display:inline-flex;align-items:center;gap:10px;margin:4px 0 2px;
	font-size:.86rem;color:var(--ink);
}
.umi-savings__pct{
	background:#9E4F38;color:#fff;border-radius:999px;padding:3px 11px;
	font-size:.78rem;font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums;
}
.umi-savings__amt{color:var(--ink-soft);font-variant-numeric:tabular-nums}

/* incl. btw — klein, gedempt, direct onder de prijs */
.umi-price-incl{font-size:.82rem;color:var(--ink-mute);margin:0 0 2px}

/* ============================================================
   PDP ASSURANCE — één verfijnde kaart i.p.v. losse gekleurde
   blokken: 3 unieke garanties + veilig-betalen-zone. Geen
   dubbele "garantie/retour", premium uitstraling.
============================================================ */
.umi-assurance{
	margin-top:16px;border:1px solid var(--line-soft);border-radius:16px;
	background:var(--card,#fff);overflow:hidden;
}
.umi-assurance__list{list-style:none;margin:0;padding:4px 0}
.umi-assurance__list li{display:flex;align-items:center;gap:13px;padding:12px 18px}
.umi-assurance__list li + li{border-top:1px solid var(--line-soft)}
.umi-assurance__ic{
	flex:0 0 auto;width:36px;height:36px;border-radius:50%;
	background:var(--sage-soft);color:var(--success);
	display:flex;align-items:center;justify-content:center;
}
.umi-assurance__txt{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.umi-assurance__txt strong{font-weight:600;font-size:.9rem;color:var(--ink)}
.umi-assurance__txt em{font-style:normal;font-size:.78rem;color:var(--ink-soft);margin-top:1px}

.umi-assurance__pay{
	display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;
	padding:13px 18px;border-top:1px solid var(--line-soft);background:var(--card-soft);
}
.umi-assurance__pay-label{
	display:inline-flex;align-items:center;gap:7px;
	font-size:.78rem;font-weight:600;letter-spacing:.01em;color:var(--ink);
}
.umi-assurance__pay-label svg{color:var(--success);flex:0 0 auto}
.umi-assurance__marks{display:flex;flex-wrap:wrap;gap:6px}
.pay-mark{
	font-size:.66rem;letter-spacing:.04em;font-weight:600;color:var(--ink-soft);
	background:#fff;border:1px solid var(--line);border-radius:6px;padding:4px 8px;line-height:1;
	white-space:nowrap;
}

/* Advies-CTA's (offerte/demo) met rustige aanhef i.p.v. losse knoppen */
.umi-advice{margin-top:18px}
.umi-advice__lead{font-size:.82rem;color:var(--ink-soft);margin:0 0 10px}
.umi-advice .b2b-ctas .btn{flex:1;min-width:150px}

/* ===== PDP "Advies nodig?" als vol-breedte band onder beschrijving/FAQ ===== */
/* (stond eerder als krappe zijkolom die de tabkoppen verdrukte) */
.pdp-help--band{
	display:flex;align-items:center;justify-content:space-between;gap:22px 40px;flex-wrap:wrap;
	margin-top:40px;padding:30px 34px;
	background:var(--sage-soft);border:1px solid rgba(156,174,150,.45);
	border-radius:var(--r-lg,28px);
}
.pdp-help--band .pdp-help__txt{flex:1 1 320px;min-width:0}
.pdp-help--band h3{margin:0 0 6px;font-size:1.25rem;font-weight:500;color:var(--ink)}
.pdp-help--band p{margin:0;color:var(--ink-soft);line-height:1.6;max-width:62ch}
.pdp-help--band .pdp-help__cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pdp-help--band .pdp-help__phone{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-weight:500;white-space:nowrap}
.pdp-help--band .pdp-help__phone svg{color:var(--ink-soft)}
@media(max-width:680px){
	.pdp-help--band{padding:24px 22px;gap:16px}
	.pdp-help--band .pdp-help__cta{width:100%}
	.pdp-help--band .pdp-help__cta .btn{flex:1 1 auto;text-align:center;justify-content:center}
}

/* ===== PDP zwevend advies-element (rechtsonder) — minder twijfel bij koper ===== */
.pdp-fab{
	position:fixed; right:24px; bottom:24px; z-index:9985;
	width:280px; max-width:calc(100vw - 32px);
	background:var(--card); border:1px solid var(--line-soft);
	border-radius:18px; padding:18px 18px 16px;
	box-shadow:0 14px 40px rgba(26,24,20,.16);
	transition:transform .3s ease, opacity .3s ease, bottom .25s ease;
}
.pdp-fab.is-raised{ bottom:88px; }
.pdp-fab.is-dismissed{ transform:translateY(150%); opacity:0; pointer-events:none; }
.pdp-fab__close{
	position:absolute; top:8px; right:8px; width:30px; height:30px; border:none; cursor:pointer;
	background:transparent; color:var(--ink-soft); border-radius:50%;
	display:flex; align-items:center; justify-content:center; transition:background .2s ease;
}
.pdp-fab__close:hover{ background:var(--card-soft); color:var(--ink); }
.pdp-fab__title{ font-size:1.02rem; font-weight:600; color:var(--ink); padding-right:24px; }
.pdp-fab__text{ font-size:.84rem; color:var(--ink-soft); line-height:1.5; margin:6px 0 14px; }
.pdp-fab__ask{
	display:inline-flex; align-items:center; gap:8px; justify-content:center; width:100%;
	background:var(--ink); color:#fff; text-decoration:none; border-radius:999px;
	padding:12px 18px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
	transition:background .2s ease;
}
.pdp-fab__ask:hover{ background:#3C342D; }
.pdp-fab__tel{
	display:flex; align-items:center; justify-content:center; gap:8px; margin-top:10px;
	color:var(--ink); text-decoration:none; font-size:.86rem; font-weight:500;
}
.pdp-fab__tel svg{ color:var(--ink-soft); }
.pdp-fab__ask{ border:none; cursor:pointer; font-family:inherit; }

/* FAB — drie toestanden: intro / inline vraagformulier / bevestiging */
.pdp-fab__form,
.pdp-fab__done{ display:none; }
.pdp-fab.is-asking .pdp-fab__intro{ display:none; }
.pdp-fab.is-asking .pdp-fab__form{ display:block; }
.pdp-fab.is-asked .pdp-fab__intro,
.pdp-fab.is-asked .pdp-fab__form{ display:none; }
.pdp-fab.is-asked .pdp-fab__done{ display:block; }

.pdp-fab__form textarea,
.pdp-fab__form input[type="email"]{
	width:100%; border:1px solid var(--line-soft); border-radius:12px;
	padding:10px 12px; font-family:inherit; font-size:.9rem; color:var(--ink);
	background:#fff; margin-top:8px; resize:vertical;
}
.pdp-fab__form textarea:focus,
.pdp-fab__form input[type="email"]:focus{ outline:2px solid var(--sage); outline-offset:1px; border-color:var(--sage); }
.pdp-fab__actions{ display:flex; gap:8px; align-items:stretch; margin-top:10px; }
.pdp-fab__back{
	flex:0 0 auto; width:46px; border:1px solid var(--line-soft); background:#fff; color:var(--ink-soft);
	border-radius:12px; cursor:pointer; font-size:1.05rem; transition:background .2s ease;
}
.pdp-fab__back:hover{ background:var(--card-soft); color:var(--ink); }
.pdp-fab__send{
	flex:1; border:none; cursor:pointer; font-family:inherit;
	background:var(--ink); color:#fff; border-radius:999px; padding:12px 16px;
	font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
	transition:background .2s ease;
}
.pdp-fab__send:hover{ background:#3C342D; }
.pdp-fab__send:disabled{ opacity:.65; cursor:default; }
.pdp-fab__tiny{ font-size:.7rem; color:var(--ink-mute); margin:9px 0 0; line-height:1.4; }
.pdp-fab__err{
	font-size:.8rem; color:var(--error); background:var(--error-soft);
	border-radius:10px; padding:8px 10px; margin:0 0 8px;
}
.pdp-fab__done{
	position:relative; background:var(--sage-soft); color:var(--ink);
	border-radius:12px; padding:14px 14px 14px 46px; font-size:.9rem; line-height:1.5; font-weight:500;
}
.pdp-fab__done::before{
	content:""; position:absolute; left:14px; top:13px; width:22px; height:22px;
	background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='12' fill='%234A6B47'/><path d='M17 8l-7 7-3-3' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}

@media(max-width:768px){
	.pdp-fab{ display:none; }
	/* Op mobiel verschijnt het advies-element alleen wanneer de bezoeker een
	   vraag stelt — als nette bottom-sheet, zodat hij op de productpagina blijft. */
	.pdp-fab.is-asking,
	.pdp-fab.is-asked{
		display:block; position:fixed; left:12px; right:12px; bottom:12px;
		width:auto; max-width:none; z-index:9999;
	}
}
@media (prefers-reduced-motion: reduce){ .pdp-fab{ transition:none; } }

/* ---------- Gratis-verzending balk: klein-pakket-uitleg ----------
   De basisstijl van .shipping-bar staat in main.css. Hier alleen de
   aanvullende toestanden: de informatieve variant (wagen met enkel
   meubels/bedden) en de extra toelichtingsregel. */
.shipping-bar .ship-note{
	color:var(--ink-soft);
	line-height:1.5;
	margin-top:2px;
}
.shipping-bar .ship-note-info{
	margin-top:6px;
	padding-top:6px;
	border-top:1px solid color-mix(in srgb,var(--ink-soft) 18%,transparent);
}
/* Wagen bevat uitsluitend niet-meewerkende artikelen (meubels/bedden):
   geen voortgangsbalk, maar een rustige neutrale mededeling. */
.shipping-bar.shipping-bar-info{
	background:var(--paper, #f5f2ec);
}
.shipping-bar.shipping-bar-info .lbl{
	font-weight:600;
}
.shipping-bar.shipping-bar-info .lbl span{
	color:var(--ink);
}

/* ===== Bezorgvoorwaarde-melding (grote artikelen) ===== */
.umi-delivery-note td{
  font-size:.82rem;color:var(--ink-soft);line-height:1.45;padding-top:12px!important;
}
.umi-delivery-note td span{display:inline}
.umi-delivery-note__ic{flex:0 0 auto;vertical-align:-3px;margin-right:7px;color:var(--ink-soft)}
.umi-delivery-note--pdp{
  display:flex;gap:9px;align-items:flex-start;margin:14px 0 0;padding:11px 14px;
  background:var(--bg-soft);border-radius:12px;
  font-size:.84rem;color:var(--ink-soft);line-height:1.45;
}
.umi-delivery-note--pdp .umi-delivery-note__ic{margin-right:0;margin-top:1px}

/* ===== Verfijnde typografie in de PDP-beschrijving (chiquer) ===== */
.detail-grid .pdp-tabs-wrap .woocommerce-tabs .panel > :first-child{margin-top:0}
.detail-grid .pdp-tabs-wrap .woocommerce-tabs .panel h3,
.detail-grid .pdp-tabs-wrap .woocommerce-tabs .panel h4{
  color:var(--ink);font-weight:600;letter-spacing:-.005em;
  font-size:1.08rem;line-height:1.3;margin:32px 0 12px;
}
.detail-grid .pdp-tabs-wrap .woocommerce-tabs .panel ul,
.detail-grid .pdp-tabs-wrap .woocommerce-tabs .panel ol{
  margin:0 0 22px;padding:0;list-style:none;
}
.detail-grid .pdp-tabs-wrap .woocommerce-tabs .panel ul li,
.detail-grid .pdp-tabs-wrap .woocommerce-tabs .panel ol li{
  position:relative;padding-left:24px;margin:0 0 10px;line-height:1.65;
}
.detail-grid .pdp-tabs-wrap .woocommerce-tabs .panel ul li::before{
  content:"";position:absolute;left:3px;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--sage-dark);
}
.detail-grid .pdp-tabs-wrap .woocommerce-tabs .panel ol{counter-reset:umi-li}
.detail-grid .pdp-tabs-wrap .woocommerce-tabs .panel ol li{counter-increment:umi-li}
.detail-grid .pdp-tabs-wrap .woocommerce-tabs .panel ol li::before{
  content:counter(umi-li);position:absolute;left:0;top:.02em;
  font-variant-numeric:tabular-nums;color:var(--sage-dark);font-weight:600;font-size:.9em;
}
.detail-grid .pdp-tabs-wrap .woocommerce-tabs .panel li:last-child{margin-bottom:0}
.detail-grid .pdp-tabs-wrap .woocommerce-tabs .panel strong{color:var(--ink);font-weight:600}
.detail-grid .pdp-tabs-wrap .woocommerce-tabs .panel li > ul,
.detail-grid .pdp-tabs-wrap .woocommerce-tabs .panel li > ol{margin:10px 0 0}

/* ===== Shop-filter: actieve-filter chips + "toon meer" (overzichtelijker) ===== */
.filters .filter-active{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid var(--line-soft);
}
.filters .filter-active__label{
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);font-weight:600;margin-right:2px;
}
.filters .filter-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;
  padding:5px 9px 5px 12px;font-family:inherit;font-size:.78rem;color:var(--ink);
  cursor:pointer;line-height:1.2;transition:border-color .15s ease,background .15s ease;
}
.filters .filter-chip:hover{border-color:var(--ink)}
.filters .filter-chip svg{width:13px;height:13px;color:var(--ink-soft);flex:0 0 auto}
.filters .filter-chip:hover svg{color:var(--ink)}
.filters .filter-chip--clear{
  background:none;border:none;color:var(--ink-soft);cursor:pointer;font-family:inherit;
  font-size:.76rem;text-decoration:underline;text-underline-offset:2px;padding:5px 4px;
}
.filters .filter-chip--clear:hover{color:var(--ink)}

.filters .filter-opt-hidden{display:none !important}
.filters .filter-options.is-expanded > label.filter-opt-hidden{display:flex !important}
.filters .filter-more{
  margin-top:8px;background:none;border:none;padding:2px 0;cursor:pointer;font-family:inherit;
  font-size:.78rem;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;
}
.filters .filter-more:hover{color:var(--ink)}