/* ============================================================
   DP Pâtisserie — WooCommerce & µBakery in de huisstijl.

   Wordt alleen geladen als WooCommerce actief is (zie functions.php).
   Dit bestand vervangt wat µBakery's eigen "CSS optimalisatie" doet voor
   Twenty Twenty-Five — zet die optie daar dus UIT, anders vechten ze.

   Alles hieronder hangt aan de tokens uit stijl.css, zodat de bestelpagina,
   de winkelwagen en het afrekenen dezelfde crème/brons-wereld dragen als
   de rest van de site.
   ============================================================ */

.dpp-inhoud{max-width:74ch}
.dpp-inhoud.dpp-woo{max-width:none}
.dpp-inhoud h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin:2.2rem 0 .9rem}
.dpp-inhoud h3{margin:1.7rem 0 .6rem}
.dpp-inhoud ul,.dpp-inhoud ol{padding-left:1.15rem}
.dpp-inhoud li{margin-bottom:.4rem}
.dpp-inhoud img{border-radius:14px}

/* ---------- knoppen ---------- */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--inkt);color:var(--papier);
  border:1.5px solid transparent;border-radius:999px;
  padding:.78rem 1.5rem;font-family:'Tekst',sans-serif;font-weight:700;font-size:.95rem;
  line-height:1.2;text-decoration:none;cursor:pointer;
  box-shadow:0 10px 22px -14px rgba(62,39,23,.8);
  transition:transform .2s ease,box-shadow .25s ease,background .25s ease}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wc-block-components-button:hover{background:var(--inkt);transform:translateY(-2px);color:var(--papier)}
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt{background:var(--brons-tekst);color:#fff}
.woocommerce .button.alt:hover{background:#6f4a1e;color:#fff}
.woocommerce a.button.wc-backward{background:transparent;border-color:var(--brons);color:var(--inkt);box-shadow:none}

/* ---------- meldingen ---------- */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews,
.wc-block-components-notice-banner{
  background:var(--wit);border:1px solid var(--brons-flauw);border-left:4px solid var(--brons);
  border-radius:14px;padding:1rem 1.2rem;margin:0 0 1.5rem;color:var(--inkt-2);
  box-shadow:var(--schaduw-zacht);list-style:none}
.woocommerce-error{border-left-color:var(--framboos)}
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{content:none}
.woocommerce-message .button,.woocommerce-info .button{margin-left:.8rem}

/* ---------- productlijst (winkel + bakdag-bestelpagina) ---------- */
.woocommerce ul.products{display:grid;gap:clamp(1rem,1.8vw,1.6rem);margin:0;padding:0;list-style:none;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none}
.woocommerce ul.products li.product{
  background:var(--wit);border:1px solid var(--brons-flauw);border-radius:var(--rond);
  overflow:hidden;box-shadow:var(--schaduw-zacht);margin:0;padding:0;width:auto;float:none;
  display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease}
.woocommerce ul.products li.product:hover{transform:translateY(-4px);box-shadow:var(--schaduw)}
.woocommerce ul.products li.product a img{margin:0;border-radius:0;width:100%;aspect-ratio:4/3;object-fit:cover}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:'Kop',Georgia,serif;font-size:1.16rem;font-weight:700;line-height:1.18;
  color:var(--inkt);padding:1rem 1.15rem .3rem;margin:0}
.woocommerce ul.products li.product .price{
  color:var(--brons-tekst);font-family:'Tekst',sans-serif;font-weight:700;font-size:1rem;
  padding:0 1.15rem;margin:0 0 .2rem;display:block}
.woocommerce ul.products li.product .price del{color:var(--inkt-3);font-weight:400;margin-right:.4rem}
.woocommerce ul.products li.product .button{margin:auto 1.15rem 1.2rem;align-self:flex-start}
.woocommerce ul.products li.product .onsale{
  background:var(--framboos);color:#fff;border-radius:999px;padding:.2rem .7rem;
  font-size:.74rem;font-weight:700;letter-spacing:.04em;min-height:0;min-width:0;line-height:1.6;top:.7rem;right:.7rem;margin:0}

/* µBakery zet bij een uitverkocht product de voorraad op nul */
.woocommerce ul.products li.product.outofstock{opacity:.62}
.woocommerce .stock.out-of-stock{color:var(--framboos);font-weight:700;padding:0 1.15rem}
.woocommerce .stock.in-stock{color:var(--pistache);padding:0 1.15rem;font-weight:700}

/* ---------- aantalveld ----------
   Dit is wat µBakery's eigen optimalisatie voor Twenty Twenty-Five doet:
   een fatsoenlijk aantal-veld in plaats van een vinkje. ---------- */
.woocommerce .quantity{display:inline-flex;align-items:center;margin:0 .6rem 0 0}
.woocommerce .quantity input.qty,
.woocommerce input[type="number"]{
  width:5.2rem;height:2.9rem;text-align:center;
  background:var(--papier);border:1.5px solid var(--brons-flauw);border-radius:999px;
  font-family:'Tekst',sans-serif;font-weight:700;font-size:1rem;color:var(--inkt)}
.woocommerce .quantity input.qty:focus,
.woocommerce input:focus,.woocommerce select:focus,.woocommerce textarea:focus{
  outline:2px solid var(--brons);outline-offset:2px;border-color:var(--brons)}

/* ---------- formuliervelden ---------- */
.woocommerce form .form-row{margin:0 0 1.1rem;padding:0;display:block}
.woocommerce form .form-row label{display:block;font-weight:700;font-size:.9rem;color:var(--inkt);margin-bottom:.35rem}
.woocommerce form .form-row .required{color:var(--framboos);text-decoration:none}
.woocommerce input.input-text,.woocommerce textarea,.woocommerce select,
.woocommerce-page input.input-text,.woocommerce .select2-container .select2-selection--single{
  width:100%;background:var(--wit);border:1.5px solid var(--brons-flauw);border-radius:12px;
  padding:.72rem .95rem;font-family:'Tekst',sans-serif;font-size:1rem;color:var(--inkt);
  min-height:2.9rem;line-height:1.4}
.woocommerce textarea{min-height:7rem;border-radius:14px}

/* ---------- tabellen: winkelwagen, afrekenen, afhaallijst ---------- */
.woocommerce table.shop_table{
  border:1px solid var(--brons-flauw);border-radius:var(--rond);border-collapse:separate;
  border-spacing:0;overflow:hidden;background:var(--wit);width:100%;margin:0 0 1.8rem}
.woocommerce table.shop_table th{
  background:var(--papier-2);font-family:'Tekst',sans-serif;font-weight:700;font-size:.82rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--inkt-2);
  padding:.9rem 1rem;text-align:left;border:0}
.woocommerce table.shop_table td{padding:1rem;border:0;border-top:1px solid rgba(169,121,60,.16);color:var(--inkt-2);vertical-align:middle}
.woocommerce table.shop_table td.product-name a{color:var(--inkt);font-weight:700;text-decoration:none}
.woocommerce table.shop_table td.product-name a:hover{text-decoration:underline}
.woocommerce table.shop_table img{width:64px;border-radius:10px}
.woocommerce table.shop_table .order-total td,.woocommerce table.shop_table .order-total th{
  background:var(--papier-2);font-weight:700;color:var(--inkt);font-size:1.02rem}
.woocommerce .cart_totals h2,.woocommerce-checkout h3{font-family:'Kop',Georgia,serif}
.woocommerce a.remove{color:var(--framboos)!important;font-size:1.3rem;line-height:1;
  width:26px;height:26px;border-radius:50%;text-align:center}
.woocommerce a.remove:hover{background:var(--framboos)!important;color:#fff!important}

/* ---------- bedragen ---------- */
.woocommerce .amount,.woocommerce .price{font-variant-numeric:tabular-nums}
.woocommerce .woocommerce-Price-amount{color:inherit}

/* ---------- productpagina ---------- */
.woocommerce div.product .product_title{font-family:'Kop',Georgia,serif;font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.08}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--brons-tekst);font-size:1.4rem;font-weight:700}
.woocommerce div.product .woocommerce-product-gallery img{border-radius:var(--rond)}
.woocommerce div.product form.cart{margin:1.4rem 0;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 1.2rem;border:0;display:flex;gap:.5rem;flex-wrap:wrap}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{border:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:var(--papier-2);border:1px solid var(--brons-flauw);border-radius:999px;margin:0;padding:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{content:none;border:0;box-shadow:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{padding:.5rem 1.1rem;font-weight:700;color:var(--inkt-2);text-decoration:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--inkt)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--papier)}

/* ---------- afhalen: adresvelden verdwijnen bij "alleen naam en e-mail" ---------- */
.woocommerce-shipping-fields{margin-top:1.4rem}
.woocommerce-checkout #payment{background:var(--wit);border:1px solid var(--brons-flauw);border-radius:var(--rond);padding:1.3rem}
.woocommerce-checkout #payment ul.payment_methods{border:0;padding:0;margin:0 0 1rem}
.woocommerce-checkout #payment div.payment_box{background:var(--papier-2);border-radius:12px;color:var(--inkt-2)}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:var(--papier-2)}

/* ---------- winkelwagenteller in de kop ---------- */
.dpp-tas{position:relative;display:inline-flex;align-items:center}
.dpp-tas-aantal{
  position:absolute;top:-6px;right:-8px;min-width:19px;height:19px;padding:0 5px;
  background:var(--framboos);color:#fff;border-radius:999px;
  font-size:.7rem;font-weight:700;display:grid;place-items:center;line-height:1}

/* ---------- mobiel ---------- */
@media (max-width:620px){
  .woocommerce table.shop_table th{display:none}
  .woocommerce table.shop_table td{display:block;border-top:0;padding:.45rem 1rem}
  .woocommerce table.shop_table tr{display:block;border-top:1px solid rgba(169,121,60,.16);padding:.7rem 0}
  .woocommerce table.shop_table td::before{content:attr(data-title) ": ";font-weight:700;color:var(--inkt)}
  .woocommerce table.shop_table td.product-remove::before,
  .woocommerce table.shop_table td.product-thumbnail::before{content:none}
  .woocommerce div.product form.cart{gap:.8rem}
}