/* ============================ PAGINALAYOUT =================================
   Alleen op .single-product; nooit globaal op .pb-main. De pagina is één
   smalle leescontainer; de hero en content-kolommen sturen zelf hun eigen
   2-koloms grid. We neutraliseren pb-common's per-sectie breedte/padding. */
.single-product .pb-main{
  max-width:1160px; margin-inline:auto; padding:8px 24px 64px;
}
.single-product .pb-main > *{ min-width:0 } /* grid-children mogen krimpen */
.single-product .pb-main > section,
.single-product .pb-main > .section{
  max-width:none; margin:0; padding-left:0; padding-right:0;
}

/* ---------- Terug-naar-shop knop (boven de hero) ---------- */
.pb-main .back-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 15px 8px 12px; margin:0 0 4px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  box-shadow:var(--shadow2);
  font-family:Manrope,system-ui,sans-serif; font-size:12.5px; font-weight:850;
  letter-spacing:-.01em; line-height:1; color:var(--brown);
  text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.pb-main .back-link::before{
  content:"\2039"; font-size:18px; line-height:1; font-weight:700; color:var(--accent);
  transition:transform .15s ease;
}
.pb-main .back-link:hover{
  background:var(--cream); border-color:#d9c2b2; color:var(--dark);
  box-shadow:0 10px 20px rgba(77,51,34,.14);
}
.pb-main .back-link:hover::before{ transform:translateX(-3px) }
.pb-main .back-link:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* Kleine, vierkante product-badge (galerij "Patty tip" + workshop "Workshop").
   Overschrijft pb-common's pil-label — alleen op de productpagina. */
.single-product .pb-main .label{
  text-transform:uppercase; letter-spacing:.08em; gap:5px;
  font-size:8px; font-weight:800; padding:3px 6px; border-radius:10px;
}

/* ============================ HERO (galerij | info) =======================
   Kolom 1 = galerij, kolom 2 = koopkolom (sticky) van 360px. */
.pb-main .product-hero{
  display:grid; grid-template-columns:1fr 360px; gap:56px;
  align-items:start; padding:28px 0 8px;
}
.pb-main .product-info{
  position:sticky; top:96px; align-self:start; padding:0;
}

/* ---------- Galerij: native Woo-galerij (pb-gallery.js) ----------
   pb-gallery.js bouwt .pb-gallery-main (grote foto) + .pb-gallery-thumbs
   (strip). Label + hart liggen als overlay op de hoofdfoto. */
.pb-main .product-gallery{ position:relative; padding:0 }
.pb-main .product-gallery > .label.fill{ position:absolute; top:10px; left:10px; z-index:3 }
.pb-main .fav-btn{
  position:absolute; top:10px; right:10px; z-index:3;
  width:36px; height:36px; display:grid; place-items:center;
  border-radius:50%; background:#fff; color:var(--dark);
  font-size:22px; line-height:1; box-shadow:0 5px 14px rgba(77,51,34,.15);
  border:0; cursor:pointer;
}
.pb-main .pb-gallery{ position:relative }
.pb-main .pb-gallery .woocommerce-product-gallery{ opacity:1 !important; margin:0 }

/* hoofdfoto */
.pb-main .pb-gallery-main{
  position:relative; min-height:460px; background:#f5f0eb;
  border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow2);
  overflow:hidden; display:grid; place-items:center; padding:26px;
}
.pb-main .pb-gallery-main img{
  width:86%; max-width:100%; max-height:400px; object-fit:contain; display:block;
}
/* thumbnail-strip */
.pb-main .pb-gallery-thumbs{
  display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; padding:0;
}
.pb-main .pb-gallery-thumb{
  flex:0 0 72px; width:72px; height:72px; padding:6px;
  background:#f5f0eb; border:1px solid var(--line); border-radius:var(--r);
  display:grid; place-items:center; cursor:pointer; transition:border-color .15s ease;
}
.pb-main .pb-gallery-thumb img{ max-width:100%; max-height:100%; object-fit:contain; display:block }
.pb-main .pb-gallery-thumb:hover{ border-color:var(--accent) }
.pb-main .pb-gallery-thumb.active{ border:2px solid var(--accent); padding:5px }
/* fallback vóór de JS draait: toon alleen de eerste foto */
.pb-main .pb-gallery:not([data-pb-ready]) .woocommerce-product-gallery__wrapper{ margin:0; padding:0; list-style:none }
.pb-main .pb-gallery:not([data-pb-ready]) .woocommerce-product-gallery__image:not(:first-child){ display:none }
.pb-main .pb-gallery:not([data-pb-ready]) .woocommerce-product-gallery__image img{ width:100%; height:auto; display:block }
.pb-main .pb-gallery .woocommerce-product-gallery__trigger{ display:none }

/* ---------- Titel + eyebrow ---------- */
.pb-main .product-info h1{
  font-family:Fraunces,serif; line-height:1.04; font-weight:700;
  letter-spacing:-.03em; color:var(--brown); margin:0 0 12px;
}
.pb-main .product-info .eyebrow{ margin-bottom:8px }

/* ---------- Rating-regel (native Product Rating) ---------- */
.pb-main .star-rating{
  position:relative; display:inline-block; overflow:hidden;
  width:5.4em; height:1em; line-height:1; vertical-align:middle;
  font-family:Arial,Helvetica,sans-serif; font-size:13px; letter-spacing:.02em;
}
.pb-main .star-rating::before{ content:"\2605\2605\2605\2605\2605"; position:absolute; top:0; left:0; color:#d9c7ba }
.pb-main .star-rating span{ position:absolute; top:0; left:0; overflow:hidden; padding-top:1.5em; white-space:nowrap }
.pb-main .star-rating span::before{ content:"\2605\2605\2605\2605\2605"; position:absolute; top:0; left:0; color:#a96548 }
.pb-main .pb-rating .woocommerce-product-rating{
  display:flex; align-items:center; gap:8px; margin:0 0 14px;
  font-size:12px; color:var(--muted); font-weight:800;
}
.pb-main .pb-rating .woocommerce-review-link{
  color:var(--brown); text-decoration:underline;
  text-decoration-color:var(--accent); text-underline-offset:2px;
}
.pb-main .pb-rating .woocommerce-review-link .count{ font-weight:900 }

/* ---------- Lead + prijs + voorraad ---------- */
.pb-main .product-lead{ font-size:15px; line-height:1.6; color:#5b4c42; margin:0 0 20px }
.pb-main .price-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:0 0 18px }
.pb-main .product-price-big{
  font-family:Manrope,system-ui,sans-serif; font-size:30px; font-weight:900;
  letter-spacing:-.03em; color:var(--dark);
}
.pb-main .product-price-big .amount{ font-weight:900 }
.pb-main .product-price-big del{ opacity:.45; font-weight:700; font-size:.62em; margin-right:8px }
.pb-main .product-price-big ins{ text-decoration:none; background:none }

/* voorraad-badge (shortcode [pb_stock]) */
.pb-main .stock-label{ display:inline-flex }
.pb-main .pb-stock{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:900; padding:6px 8px; border-radius:var(--r); white-space:nowrap;
}
.pb-main .pb-stock::before{ content:""; width:7px; height:7px; border-radius:50% }
.pb-main .pb-stock.in-stock{ background:#e8efe4; color:#5d6b52 }
.pb-main .pb-stock.in-stock::before{ background:var(--green) }
.pb-main .pb-stock.low-stock{ background:#f6e9d4; color:#8a5a1c }
.pb-main .pb-stock.low-stock::before{ background:#c98a2c }
.pb-main .pb-stock.out-of-stock{ background:#f6dcd7; color:#a12f22 }
.pb-main .pb-stock.out-of-stock::before{ background:#c0432f }
.pb-main .screen-reader-text{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Maatkeuze (statisch/decoratief) ----------
   Op desktop rustig, zonder omkaderd vlak (zoals responsive.css @1025px). */
.pb-main .variant-box{ margin:0 0 20px; max-width:260px; background:none; border:0; padding:0 }
.pb-main .variant-box label{
  display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--brown); font-weight:900; margin-bottom:7px;
}
.pb-main .variant-options{ display:flex; gap:7px; flex-wrap:wrap }
.pb-main .variant-options span{
  display:inline-flex; align-items:center; min-height:32px; padding:0 10px; cursor:pointer;
  border:1px solid var(--line); background:#fffaf5; color:var(--brown);
  border-radius:var(--r); font-size:12px; font-weight:850;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.pb-main .variant-options span:hover{ border-color:var(--accent) }
.pb-main .variant-options span.active{ background:var(--brown); color:#fff; border-color:var(--brown) }

/* ---------- Winkelmand: native Add-to-Cart (form.cart) + −/+ stepper ---------- */
.pb-main .cart-panel{ margin-top:0 }
.pb-main .cart-panel .pb-atc > p.stock{ display:none }
.pb-main .cart-panel form.cart{
  display:grid; grid-template-columns:92px 1fr; align-items:center; gap:10px; margin:0;
}
.pb-main .cart-panel .quantity{
  display:flex; align-items:center; width:100%; height:44px; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
}
.pb-main .cart-panel .quantity .action{ display:none } /* native Bricks −/+ uit */
.pb-main .cart-panel .quantity input.qty{
  order:2; flex:1 1 auto; width:100%; min-width:0; height:44px;
  border:0; background:none; text-align:center;
  font-family:Manrope,system-ui,sans-serif; font-size:14px; font-weight:900; color:var(--dark);
  -moz-appearance:textfield; appearance:textfield;
}
.pb-main .cart-panel .quantity input.qty::-webkit-outer-spin-button,
.pb-main .cart-panel .quantity input.qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.pb-main .cart-panel .quantity .pb-qty-dec{ order:1 }
.pb-main .cart-panel .quantity .pb-qty-inc{ order:3 }
.pb-main .cart-panel .quantity .pb-qty-dec,
.pb-main .cart-panel .quantity .pb-qty-inc{
  flex:0 0 30px; height:44px; background:none; border:0; cursor:pointer;
  color:var(--brown); font-size:20px; font-weight:800; line-height:1;
  display:grid; place-items:center; transition:background .12s ease;
}
.pb-main .cart-panel .quantity .pb-qty-dec:hover,
.pb-main .cart-panel .quantity .pb-qty-inc:hover{ background:#f3ece5 }
.pb-main .cart-panel .single_add_to_cart_button,
.pb-main .cart-panel button.single_add_to_cart_button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; height:44px; margin:0; padding:0 16px;
  background:linear-gradient(135deg,var(--accent),#a96548); color:#fff; border:0;
  border-radius:var(--r); box-shadow:0 9px 18px rgba(111,72,49,.18);
  font-family:Manrope,system-ui,sans-serif; font-size:13px; font-weight:800; line-height:1;
  letter-spacing:-.01em; text-transform:none; cursor:pointer;
}
.pb-main .cart-panel .single_add_to_cart_button:hover{ background:#b96a47 }
.pb-main .cart-panel .single_add_to_cart_button.loading{ opacity:.7 }
.pb-main .added_to_cart{ display:none }

/* ---------- Bezorg-/vertrouwensblok ---------- */
.pb-main .delivery-list{ display:grid; gap:13px; margin-top:22px }
.pb-main .delivery-item{
  display:grid; grid-template-columns:25px 1fr; gap:8px; align-items:start;
  color:var(--brown); font-size:12px; font-weight:850;
}
.pb-main .delivery-item svg{ width:22px; height:22px; color:var(--accent); stroke-width:1.7 }
.pb-main .delivery-item .di-ico{
  font-size:18px; line-height:1; color:var(--accent); text-align:center;
}
.pb-main .delivery-item .di-text{ display:block }
.pb-main .delivery-item .di-sub{
  display:block; color:var(--muted); font-size:11px; line-height:1.3; font-weight:700; margin-top:1px;
}
.pb-main .delivery-item:empty{ display:none }

/* ============================ CONTENT (hoofd | zijbalk) ====================
   Hoofdkolom (waarom + voordelen + workshop) naast een sticky kenmerken-
   zijbalk (spec-card). */
.pb-main .product-columns{
  display:grid; grid-template-columns:1fr 360px; gap:64px;
  align-items:start; padding:40px 0 8px;
}
.pb-main .product-main-col{ display:flex; flex-direction:column; gap:32px }
.pb-main .product-side-col{ position:sticky; top:96px }

/* ---------- Tekst-secties (clean) ---------- */
.pb-main .product-section.clean{ border:0; padding:0 }
.pb-main .product-section.clean h2,
.pb-main .product-section.clean .brxe-heading{
  font-family:Fraunces,serif; font-size:22px; line-height:1.1; font-weight:700;
  letter-spacing:-.01em; color:var(--brown); margin:0 0 12px;
}
.pb-main .product-section.clean p{ font-size:15px; line-height:1.6; color:#67584f; margin:0 0 10px }

/* voordelen — 2 kolommen op desktop */
.pb-main .benefit-list.clean{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px 20px;
}
.pb-main .benefit-list.clean li{
  display:grid; grid-template-columns:22px 1fr; gap:8px;
  font-size:13px; line-height:1.4; color:#67584f;
}
.pb-main .benefit-list.clean li::before{
  content:"\2713"; width:20px; height:20px; display:grid; place-items:center;
  background:var(--cream); color:var(--accent); border-radius:50%; font-weight:900; font-size:12px;
}

/* ---------- Workshop-kruisverkoopkaart ----------
   Foto links, tekst rechts. De foto is een leeg Bricks image-slot (.wimg):
   geen gehotlinkte URL — de gebruiker kiest zelf de workshopfoto in Bricks. */
.pb-main .workshop-card{
  position:relative;
  display:flex; flex-direction:row; align-items:stretch; margin:24px 0 0;
  background:#fff8f1; border:1px solid var(--line); border-radius:12px;
  overflow:hidden; box-shadow:var(--shadow2); text-decoration:none;
  transition:box-shadow .15s ease, transform .15s ease;
}
/* de hele kaart klikbaar zonder een blok-in-anchor: een uitgerekte link
   die de kaart bedekt (Bricks-vriendelijk, geen genest anchor-blok). */
.pb-main .workshop-stretch{ position:absolute; inset:0; z-index:2; font-size:0; text-indent:-9999px; overflow:hidden }
.pb-main .workshop-card:hover{ box-shadow:var(--shadow); transform:translateY(-1px) }
.pb-main .workshop-card .wimg,
.pb-main .workshop-card img{
  flex:0 0 220px; width:220px; height:auto; min-height:150px;
  object-fit:cover; display:block; background:#efe0d3;
}
.pb-main .workshop-card-body{
  flex:1; display:flex; flex-direction:column; justify-content:center; padding:22px 26px;
}
.pb-main .workshop-card-body .label{ margin-bottom:9px; align-self:flex-start }
.pb-main .workshop-card-body h3{
  font-family:Fraunces,serif; font-size:19px; font-weight:700; color:var(--brown);
  margin:0 0 6px; letter-spacing:-.01em;
}
.pb-main .workshop-card-body p{ font-size:13.5px; line-height:1.5; color:#5b4c42; margin:0 0 12px }
.pb-main .workshop-card-cta{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:850; color:var(--accent);
}
.pb-main .workshop-card-cta svg{ width:14px; height:14px; stroke-width:2.2 }
.pb-main .workshop-card-cta::after{ content:"\203A"; font-size:15px; line-height:1 }

/* ---------- Kenmerken (spec-card, zijbalk) ----------
   Ondersteunt zowel de echte <table>-opbouw (tr/th/td, zoals in
   product-detail.html) als de div-variant (.spec-row/.spec-k/.spec-v).
   In de zijbalk gestapeld: label boven waarde. */
.pb-main .spec-card h3{
  font-family:Manrope,system-ui,sans-serif; font-size:13px; font-weight:850;
  text-transform:uppercase; letter-spacing:.08em; color:var(--accent); margin:0 0 10px;
}
.pb-main .spec-card .spec-table.clean{ width:100%; border:0; margin:0 }
/* echte table-variant (tr/th/td) */
.pb-main .spec-table.clean{ width:100%; border-collapse:collapse; margin:0 }
.pb-main .spec-table.clean tr{ display:block; padding:12px 0; border-bottom:1px solid var(--line) }
.pb-main .spec-table.clean tr:first-child{ border-top:1px solid var(--line) }
.pb-main .spec-table.clean th,
.pb-main .spec-table.clean td{ display:block; width:auto; padding:0; text-align:left }
.pb-main .spec-table.clean th{
  color:#987b65; text-transform:uppercase; letter-spacing:.08em; font-size:10px; font-weight:900;
}
.pb-main .spec-table.clean td{ margin-top:4px; color:var(--brown); font-weight:800; font-size:14px }
/* div-rij variant (fallback) — zelfde gestapelde look */
.pb-main .spec-table .spec-row{ display:block; padding:12px 0; border-bottom:1px solid var(--line) }
.pb-main .spec-table .spec-row:first-child{ border-top:1px solid var(--line) }
.pb-main .spec-table .spec-k{
  display:block; color:#987b65; text-transform:uppercase; letter-spacing:.08em; font-size:10px; font-weight:900;
}
.pb-main .spec-table .spec-v{ display:block; margin-top:4px; color:var(--brown); font-weight:800; font-size:14px }
.pb-main .spec-table .spec-row:empty{ display:none }

/* ============================ REVIEWS =====================================
   section-head (titel + "Schrijf een review") → review-summary (avg) →
   native Product Reviews (kaartenlijst + formulier). */
.pb-main .pb-reviews-section h2,
.pb-main .pb-reviews-section .brxe-heading{
  font-family:Fraunces,serif; font-size:22px; line-height:1.1; font-weight:700;
  color:var(--brown); margin:0;
}
.pb-main .pb-reviews-section .section-head{ margin-bottom:16px }

/* samenvatting (gemiddelde + totaal) — [pb_rating_summary] of statisch */
.pb-main .review-summary{ display:flex; align-items:center; gap:14px; margin:0 0 16px }
.pb-main .review-summary:empty{ display:none } /* [pb_rating_summary] leeg → geen loze ruimte */
.pb-main .review-summary .avg{
  font-family:Fraunces,serif; font-size:38px; font-weight:700; color:var(--brown); line-height:1;
}
.pb-main .review-summary .stars{ color:#a96548; letter-spacing:.02em; font-size:15px }
.pb-main .review-summary small{ display:block; color:var(--muted); font-size:11.5px; font-weight:700; margin-top:2px }

/* native reviews-lijst als kaarten-grid */
.pb-main .pb-reviews .woocommerce-Reviews-title{ display:none }
.pb-main .pb-reviews .commentlist,
.pb-main .pb-reviews ol.commentlist{
  list-style:none; padding:0; margin:0 0 20px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
}
.pb-main .pb-reviews .commentlist li.review{ margin:0 }
.pb-main .pb-reviews .comment_container{
  background:#fff8f1; border:1px solid var(--line); box-shadow:var(--shadow2);
  border-radius:10px; padding:16px; display:block;
}
.pb-main .pb-reviews .avatar{ display:none }
.pb-main .pb-reviews .comment-text .star-rating{ margin:0 0 6px }
.pb-main .pb-reviews .meta{ font-size:11px; color:var(--muted); margin:2px 0 6px }
.pb-main .pb-reviews .woocommerce-review__author{ font-weight:900; color:var(--brown); font-style:normal; font-size:13px }
.pb-main .pb-reviews .woocommerce-review__dash,
.pb-main .pb-reviews .woocommerce-review__published-date{ color:var(--muted); font-weight:700; font-size:11px }
.pb-main .pb-reviews .description p,
.pb-main .pb-reviews .comment-text > p:not(.meta){ font-size:14px; line-height:1.5; color:#67584f; margin:0 }
/* review-formulier */
.pb-main .pb-reviews #reply-title,
.pb-main .pb-reviews .comment-reply-title{ font-family:Fraunces,serif; font-size:18px; color:var(--brown); margin:6px 0 14px; display:block }
.pb-main .pb-reviews .must-log-in{ font-size:13px; color:var(--muted) }
.pb-main .pb-reviews .must-log-in a{ color:var(--accent); font-weight:800 }
.pb-main .pb-reviews .comment-form label{ display:block; font-size:12px; font-weight:800; color:var(--brown); margin:10px 0 4px }
.pb-main .pb-reviews .comment-form input[type=text],
.pb-main .pb-reviews .comment-form input[type=email],
.pb-main .pb-reviews .comment-form textarea{
  width:100%; border:1px solid var(--line); border-radius:var(--r); background:var(--paper);
  padding:10px 12px; font:inherit; color:var(--dark);
}
.pb-main .pb-reviews .comment-form-rating .stars a{ color:#a96548; font-size:20px; text-decoration:none }
.pb-main .pb-reviews .form-submit input#submit,
.pb-main .pb-reviews input#submit{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; margin-top:12px; padding:0 20px;
  background:linear-gradient(135deg,var(--accent),#a96548); color:#fff; border:0; border-radius:var(--r);
  font-family:Manrope,system-ui,sans-serif; font-size:14px; font-weight:800; cursor:pointer;
}
.pb-main .pb-reviews input#submit:hover{ background:#b96a47 }

/* ============================ RELEVANTE PRODUCTEN =========================
   Dit blok schreef de tegel hier helemaal opnieuw: foto 118px hoog, titel in
   Manrope, kaart met 8px padding. Daardoor stond onder een productpagina een
   duidelijk andere tegel dan op /must-haves/ en op een categoriepagina.
   De kaart komt nu uit pb-product-tegel.css (die vertaalt ook de
   WooCommerce-opmaak: li.product, .woocommerce-loop-product__title, a.button).
   Hier blijft alleen de indeling van het raster staan. */
.pb-main .pb-related .related.products{ margin:0; padding:0 }
.pb-main .pb-related .related.products > h2{ display:none } /* eigen section-head al aanwezig */
.pb-main .pb-related ul.products{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  margin:0; padding:0; list-style:none;
}

/* ============================ WOO-MELDINGEN (toast) ======================= */
.single-product #brx-content > .woocommerce-notices-wrapper,
.single-product .woocommerce-notices-wrapper{
  position:fixed !important; top:80px; left:50% !important; right:auto !important;
  transform:translateX(-50%) !important; float:none !important; clear:both;
  z-index:200; display:flex; flex-direction:column; gap:10px;
  width:auto !important; max-width:min(560px,calc(100vw - 32px));
  margin:0 !important; padding:0; align-items:stretch; pointer-events:none;
  transition:opacity .35s ease;
}
.single-product .woocommerce-notices-wrapper:empty{ display:none }
.single-product .woocommerce-notices-wrapper.pb-toast-hide{ opacity:0 }
.single-product .woocommerce-notices-wrapper > *{
  pointer-events:auto; margin:0; list-style:none;
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px;
  padding:13px 16px; border-radius:10px;
  background:#e8efe4; color:#4b5a41; border:1px solid #cfe0c4;
  box-shadow:0 14px 32px rgba(77,51,34,.18);
  font-family:Manrope,system-ui,sans-serif; font-size:13.5px; font-weight:750; line-height:1.35;
}
.single-product .woocommerce-notices-wrapper .woocommerce-info{ background:#f6ecdd; color:#7a5a2c; border-color:#ecd9bd }
.single-product .woocommerce-notices-wrapper .woocommerce-error{ background:#f6dcd7; color:#9a2f22; border-color:#ecc3bb }
.single-product .woocommerce-notices-wrapper .button{
  order:2; margin-left:auto;
  display:inline-flex; align-items:center; height:34px; padding:0 14px;
  background:var(--brown); color:#fff; border:0; border-radius:10px;
  font-size:12px; font-weight:800; text-decoration:none; white-space:nowrap; cursor:pointer;
}
.single-product .woocommerce-notices-wrapper .button:hover{ background:var(--brown2) }

/* ============================ STICKY KOOPBALK — ALLEEN MOBIEL ============= */
.pb-main .sticky-buy{ display:none }
/* LET OP het directe-kindteken. Dit was `> div span` en dat raakte niet
   alleen de productnaam maar ook het prijsbedrag: WooCommerce zet dat in een
   <span class="woocommerce-Price-amount"> binnen de <strong>. De balk toonde
   daardoor alleen een knop, met links een leeg vlak. */
.pb-main .sticky-buy > div > span{ display:block; font-size:11px; font-weight:800; color:var(--muted) }
.pb-main .sticky-buy > div strong{ display:block; font-family:Manrope,system-ui,sans-serif; font-size:19px; font-weight:900; color:var(--dark) }
.pb-main .sticky-buy > div strong del{ display:none }
.pb-main .sticky-buy .cta{ height:40px; white-space:nowrap }

/* ============================ RESPONSIVE =================================
   ≤1024px: hero + content klappen naar één kolom (de exacte mobiele
   ontwerp-volgorde) en de sticky koopbalk verschijnt boven de bottom-nav. */
@media (max-width:1024px){
  .single-product .pb-main{ max-width:none; padding:0 0 40px }
  .pb-main .product-hero,
  .pb-main .product-columns{ display:block; padding:0 }

  /* galerij + info: ontwerp-padding en niet sticky */
  .pb-main .product-info{ position:static; top:auto; padding:10px 18px 16px }
  .pb-main .product-gallery{ padding:14px 18px 8px }
  .pb-main .pb-gallery-main{ min-height:286px; padding:18px }
  .pb-main .pb-gallery-main img{ max-height:250px }
  .pb-main .pb-gallery-thumb{ flex-basis:62px; width:62px; height:62px }

  .pb-main .product-info h1{ line-height:.96; letter-spacing:-.03em; margin:0 0 9px }
  .pb-main .product-lead{ font-size:14px; line-height:1.55; color:#67584f; margin:0 0 14px }
  .pb-main .price-row{ margin:0 0 10px }
  .pb-main .product-price-big{ font-size:31px }

  /* maatkeuze terug als omkaderd vlak (mobiel ontwerp) */
  .pb-main .variant-box{
    max-width:none; margin:12px 0; padding:12px;
    background:var(--cream); border:1px solid var(--line); border-radius:10px;
  }
  .pb-main .cart-panel{ margin-top:12px }
  .pb-main .delivery-list{ margin-top:14px; gap:8px }

  /* content-secties: ontwerp-padding, geen 2-koloms grid meer */
  .pb-main .product-main-col{ display:block }
  .pb-main .product-section.clean{ padding:20px 18px }
  .pb-main .product-section.clean + .product-section.clean{ padding-top:4px }
  .pb-main .product-section.clean h2,
  .pb-main .product-section.clean .brxe-heading{ font-family:Manrope,system-ui,sans-serif; font-size:20px; font-weight:900 }
  .pb-main .product-section.clean p{ font-size:14px }
  .pb-main .benefit-list.clean{ grid-template-columns:1fr }
  .pb-main .product-side-col{ position:static; top:auto; margin-top:0; padding:0 18px 20px }

  /* workshop-kaart: gestapeld (foto boven) */
  .pb-main .workshop-card{ flex-direction:column }
  .pb-main .workshop-card .wimg,
  .pb-main .workshop-card img{ flex:none; width:100%; height:150px }
  .pb-main .workshop-card-body{ padding:14px 16px 16px }

  /* reviews + related: horizontaal scrollen (mobiel ontwerp) */
  .pb-main .pb-reviews-section .section-head{ padding:0 }
  .pb-main .pb-reviews .commentlist,
  .pb-main .pb-reviews ol.commentlist{
    grid-template-columns:none; display:flex; gap:10px; overflow-x:auto; padding:0 0 2px;
    scrollbar-width:none;
  }
  .pb-main .pb-reviews .commentlist::-webkit-scrollbar{ display:none }
  .pb-main .pb-reviews .commentlist li.review{ flex:0 0 230px }
  .pb-main .pb-related ul.products{
    display:flex; grid-template-columns:none; gap:14px; overflow-x:auto; padding:0 0 18px;
    scrollbar-width:none;
    /* Zonder dit zijn de kaarten in deze swipe-rij zo hoog als hun eigen
       inhoud, en dan eindigt de kaart met een titel van drie regels lager dan
       die ernaast - met de prijs en het winkelmandknopje op verschillende
       hoogtes. Op desktop is dit een grid en rekken de items van zichzelf; in
       een flex-rij moet je het zeggen. */
    align-items:stretch;
  }
  .pb-main .pb-related ul.products::-webkit-scrollbar{ display:none }

  /* de koopbalk staat verderop in dit bestand, in zijn eigen blok */
}
@media (max-width:767px){
}

html.pb-lb-lock{ overflow:hidden }

/* ============================ LIGHTBOX ===================================
   Fullscreen foto-viewer (pb-gallery.js, aan <body> gehangen — niet onder
   .pb-main gescoped). z-index boven header/menu/melding. */
.pb-main .pb-gallery-main.pb-zoomable{ cursor:zoom-in }
.pb-main .pb-gallery-main.pb-zoomable::after{
  content:""; position:absolute; bottom:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c4d38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center/16px 16px no-repeat;
  box-shadow:0 5px 14px rgba(77,51,34,.15);
  opacity:0; transform:translateY(4px); transition:opacity .15s ease, transform .15s ease;
  pointer-events:none;
}
.pb-main .pb-gallery-main.pb-zoomable:hover::after,
.pb-main .pb-gallery-main.pb-zoomable:focus-visible::after{ opacity:1; transform:none }

.pb-lb{
  position:fixed; inset:0; z-index:3000; display:none;
  flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(14px,3vw,40px); font-family:Manrope,system-ui,sans-serif;
}
.pb-lb.open{ display:flex }
.pb-lb-backdrop{
  position:absolute; inset:0; background:rgba(38,27,20,.9);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:pb-lb-fade .2s ease;
}
@keyframes pb-lb-fade{ from{opacity:0} to{opacity:1} }
.pb-lb-panel{
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:14px;
  width:100%; max-width:min(940px,100%); max-height:100%;
}
.pb-lb-stage{
  margin:0; flex:1 1 auto; min-height:0; width:100%;
  display:flex; align-items:center; justify-content:center;
  animation:pb-lb-pop .22s cubic-bezier(.2,.8,.25,1);
}
@keyframes pb-lb-pop{ from{opacity:0; transform:scale(.96)} to{opacity:1; transform:none} }
.pb-lb-img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block;
  background:var(--cream); border-radius:12px; padding:18px; box-shadow:0 30px 60px rgba(0,0,0,.4);
}
.pb-lb-close, .pb-lb-nav{
  position:absolute; z-index:2; display:grid; place-items:center;
  background:#fff; color:var(--dark); border:0; border-radius:50%;
  box-shadow:0 8px 20px rgba(0,0,0,.3); cursor:pointer; line-height:1;
  transition:background .15s ease, transform .15s ease;
}
.pb-lb-close{ top:16px; right:16px; width:44px; height:44px; font-size:26px }
.pb-lb-nav{ top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:30px; font-weight:700 }
.pb-lb-prev{ left:16px } .pb-lb-next{ right:16px }
.pb-lb-close:hover, .pb-lb-nav:hover{ background:var(--cream) }
.pb-lb-prev:hover{ transform:translateY(-50%) translateX(-3px) }
.pb-lb-next:hover{ transform:translateY(-50%) translateX(3px) }
.pb-lb-close:focus-visible, .pb-lb-nav:focus-visible, .pb-lb-thumb:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.pb-lb [hidden]{ display:none !important }
.pb-lb-count{
  flex:0 0 auto; color:#fff; font-size:12px; font-weight:800; letter-spacing:.04em;
  background:rgba(0,0,0,.32); padding:5px 12px; border-radius:var(--r-pill);
}
.pb-lb-thumbs{
  flex:0 0 auto; display:flex; gap:8px; max-width:100%; padding:2px; overflow-x:auto; scrollbar-width:none;
}
.pb-lb-thumbs::-webkit-scrollbar{ display:none }
.pb-lb-thumb{
  flex:0 0 54px; width:54px; height:54px; padding:5px; cursor:pointer;
  background:var(--cream); border:2px solid transparent; border-radius:10px;
  opacity:.55; transition:opacity .15s ease, border-color .15s ease;
}
.pb-lb-thumb img{ width:100%; height:100%; object-fit:contain; display:block }
.pb-lb-thumb:hover{ opacity:1 }
.pb-lb-thumb.active{ opacity:1; border-color:var(--accent) }
@media (max-width:767px){
  .pb-lb-close{ width:40px; height:40px; font-size:24px; top:12px; right:12px }
  .pb-lb-nav{ width:40px; height:40px; font-size:26px }
  .pb-lb-prev{ left:8px } .pb-lb-next{ right:8px }
  .pb-lb-img{ padding:12px; border-radius:12px }
  .pb-lb-thumb{ flex-basis:46px; width:46px; height:46px }
}
@media (hover:none){
  .pb-main .pb-gallery-main.pb-zoomable::after{ opacity:1; transform:none }
}
/* ==========================================================================
   MOBIEL — de koopbalk onderin
   --------------------------------------------------------------------------
   Drie dingen waren mis.

   1. Er stond niets in de balk behalve de knop. De regel die de productnaam
      verborg was `.sticky-buy > div span` en die raakte ook het bedrag:
      WooCommerce zet de prijs in een <span class="woocommerce-Price-amount">
      binnen de <strong>. Nu een direct-kindteken (`> div > span`), zodat
      alleen de naam wordt gestuurd - en die tonen we juist weer.

   2. De balk was bruin, net als de footer. Zodra je onderaan de pagina kwam
      liep hij in de footer over en zag je niet meer waar het een ophield en
      het ander begon. Hij is nu wit en vormt samen met de onderbalk een wit
      blok, duidelijk los van de bruine footer.

   3. Hij stond op `position:sticky` binnen .pb-main. Onderaan de pagina laat
      een sticky element los en schuift het met de inhoud mee omhoog - het
      wandelde dus over de relevante producten heen. Nu `fixed`: hij blijft
      tegen de onderbalk staan zolang je op de productpagina bent.

   De productnaam staat op een eigen regel met een afkapping; hij mag de prijs
   niet meer naar een tweede regel duwen (dat was de reden dat hij ooit is
   weggehaald - toen stonden "€" en het bedrag los onder elkaar).
   ========================================================================== */
@media (max-width: 1024px) {
  .pb-main .sticky-buy {
    display: grid;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 78px;              /* de hoogte van de onderbalk: er strak tegenaan */
    z-index: 40;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 10px var(--pb-edge);
    background: #fff;
    border: 0;
    border-top: 1px solid #eee2d8;
    border-radius: 0;
    box-shadow: 0 -8px 22px rgba(77, 51, 34, .10);
  }

  .pb-main .sticky-buy > div { min-width: 0 }

  /* De naam: één regel, met puntjes als hij niet past. */
  .pb-main .sticky-buy > div > span {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 2px;
    color: var(--muted);
    font-family: Manrope, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -.01em;
  }

  .pb-main .sticky-buy > div strong {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--brown, #6c4d38);
    font-family: Fraunces, Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    /* Nooit afbreken tussen euroteken en bedrag. */
    white-space: nowrap;
  }
  /* Een doorgestreepte oude prijs mag mee, kleiner en gedempt. */
  .pb-main .sticky-buy > div strong del {
    display: inline;
    color: var(--muted);
    font-size: 15px;
    font-weight: 400;
  }
  .pb-main .sticky-buy > div strong ins {
    text-decoration: none;
    color: var(--brown, #6c4d38);
  }

  .pb-main .sticky-buy .cta {
    height: 44px;              /* onder 44px neemt mistikken merkbaar toe */
    min-width: 148px;
    padding: 0 18px;
    font-size: 13px;
    background: var(--accent, #c97a55);
    color: #fff;
    border: 0;
    box-shadow: 0 8px 18px rgba(111, 72, 49, .18);
  }

  /* De balk staat nu vast en neemt geen ruimte meer in de pagina in; die
     ruimte houden we onderaan zelf vrij, anders valt het laatste stuk van de
     pagina erachter. */
  .single-product .pb-main { padding-bottom: 76px }
}