/* ==========================================================================
   Hippe Zeeuw · laag 7 — productpagina (PDP)
   Geport uit master-concept/css/pdp.css. Laadt ALLEEN op is_product()
   (zie inc/hz-enqueue.php), dus deze regels raken de homepage nooit.

   Afwijkingen van het concept staan per blok in commentaar. Kort:
   Woo levert eigen markup voor de galerij, de waardering, de prijs en het
   aantalveld, dus daar is de selector omgepunt. Omdat dit bestand ná
   woocommerce.css laadt, winnen deze regels bij gelijke specificiteit.
   ========================================================================== */

/* ------------------------------------------------------------- kruimels */
/* Concept: .crumbs / .crumbs i. Onze breadcrumb komt uit
   hz_breadcrumb_args() in inc/hz-woo-hooks.php en heet .hz-crumbs, met
   <span class="hz-crumb-sep"> als scheidingsteken. */
.hz-crumbs{
  padding-block:20px 4px;
  font-size:.75rem;
  color:var(--ink-3);
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
}
.hz-crumbs a{ transition:color .2s var(--ease); }
.hz-crumbs a:hover{ color:var(--stone-dk); }
.hz-crumb-sep{ font-style:normal; opacity:.45; }

/* ------------------------------------------------------------ pdp shell */
.pdp{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(28px,4vw,74px);
  align-items:start;
  padding-block:clamp(18px,2.4vw,34px) clamp(60px,7vw,104px);
}

/* --------------------------------------------------------------- galerij
   Concept had .gal__main (grote foto) + .gal__more (raster van de rest).
   Woo rendert in plaats daarvan één .woocommerce-product-gallery__wrapper
   met daarin per foto een .woocommerce-product-gallery__image (en bij een
   product zonder foto één ...__image--placeholder). Zelfde beeld, andere
   haakjes: het raster staat nu op de wrapper en de eerste foto pakt beide
   kolommen. Weggelaten: .gal__flag (de sale-flash is in hz-woo-hooks.php
   van zijn hook gehaald), .gal__zoom en .gal__dots (geen markup).

   AfterBuild 7: dit werkt alleen zolang flexslider er niet overheen gaat.
   Daarom staat 'wc-product-gallery-slider' bewust NIET aan in
   hz_woo_support(); zoom en lightbox wél. */
.gal{ position:relative; }
.gal .woocommerce-product-gallery__wrapper{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(8px,1vw,14px);
}
/* AfterBuild-klant 7 — 2/3, gelijk aan de bronfoto's, zodat object-fit niets
   meer hoeft weg te snijden. */
.gal .woocommerce-product-gallery__wrapper > *{
  position:relative;
  aspect-ratio:2/3;
  overflow:hidden;
  background:var(--paper-2);
  display:block;
  padding:0;
}
.gal .woocommerce-product-gallery__wrapper > *:first-child{
  grid-column:1 / -1;
  cursor:zoom-in;
}
.gal .woocommerce-product-gallery__wrapper a{ display:block; width:100%; height:100%; }
.gal .woocommerce-product-gallery__wrapper img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.gal .woocommerce-product-gallery__wrapper > *:hover img{ transform:scale(1.035); }

/* --------------------------------------------------------------- koopvak */
.buy{
  position:sticky;
  top:calc(var(--hdr-h) + 22px);
}
.buy__kick{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.buy__kick a{
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#fff;
  background:var(--stone);
  padding:6px 12px;
  border-radius:999px;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.buy__kick a:hover{ background:var(--ink); color:var(--paper); }
.buy__kick span{
  font-size:.6875rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.buy h1{
  font-size:clamp(2.1rem,3.3vw,3.05rem);
  line-height:1.03;
  margin-bottom:14px;
}

/* Concept: .buy__stars met eigen <svg>-sterren. Woo rendert
   .woocommerce-product-rating met .star-rating en een reviewlink; de
   sterren zelf komen uit Woo's eigen stylesheet en die staat uit. De
   layoutregels zijn overgenomen, de svg-regels zijn weggelaten. */
.woocommerce-product-rating{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:22px;
  font-size:.8125rem;
  color:var(--ink-2);
}
.woocommerce-product-rating .woocommerce-review-link{
  text-decoration:none;
  border-bottom:1px solid var(--line);
}
.woocommerce-product-rating:hover .woocommerce-review-link{ border-color:var(--ink); }

/* Concept: .buy__price b / s / em. Woo zet er een <p class="price"> in met
   .woocommerce-Price-amount, en bij een aanbieding <del>/<ins>. */
.buy__price{
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
}
.buy__price .price{
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
  margin:0;
}
.buy__price .price .amount{
  font-family:var(--ff-display);
  font-size:2.1rem;
  font-weight:400;
  line-height:1;
  color:var(--brick);
}
.buy__price .price ins{ text-decoration:none; }
.buy__price .price del{ text-decoration-thickness:1px; }
.buy__price .price del .amount{ color:var(--ink-3); font-size:1rem; }
.buy__vat{ font-size:.75rem; color:var(--ink-3); margin-top:12px; }

/* korte omschrijving — Woo's eigen wrapper, in het concept een kale <p> */
.woocommerce-product-details__short-description{
  margin-top:20px;
  font-size:.9375rem;
  color:var(--ink-2);
  line-height:1.72;
}

/* ----------------------------------------------------------------- opties
   AfterBuild 6. De <select> van WooCommerce blijft in de DOM staan (zijn
   eigen add-to-cart-variation.js hangt eraan) maar wordt onzichtbaar
   gemaakt; de knoppen eronder sturen hem aan vanuit assets/js/pdp.js.
   Zie woocommerce/single-product/add-to-cart/variable.php. */
.opt{ padding-top:24px; }
.opt__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  margin-bottom:13px;
}
.opt__head h2,
.opt__head strong{
  font-family:var(--ff-sans);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
}
.opt__head span{ font-size:.8125rem; color:var(--ink-2); }
.opt__head button{
  font-size:.75rem;
  color:var(--ink-2);
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.opt__head button:hover{ color:var(--ink); border-color:var(--ink); }

/* de echte select — onzichtbaar, maar wel focusbaar voor screenreaders */
.hz-var-select{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.swatch{
  width:56px;
  display:block;
  padding:0;
  cursor:pointer;
}
.swatch span{
  display:block;
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--paper-2);
  border:1px solid transparent;
  outline:1px solid var(--line-2);
  outline-offset:0;
  transition:outline-color .25s var(--ease), outline-offset .25s var(--ease);
}
.swatch img{ width:100%; height:100%; object-fit:cover; }
.swatch small{
  display:block;
  margin-top:7px;
  font-size:.625rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
  text-align:center;
}
.swatch:hover span{ outline-color:var(--stone); }
.swatch.is-on span{ outline:1px solid var(--ink); outline-offset:3px; }
.swatch.is-on small{ color:var(--ink); }
/* uitverkochte kleur: wel klikbaar (Woo mag zelf zeggen dat het niet kan),
   maar visueel gedempt met een streep. */
.swatch.is-out span{ opacity:.4; }
.swatch.is-out small{ text-decoration:line-through; text-decoration-thickness:1px; }

.sizes{ display:flex; gap:9px; flex-wrap:wrap; }
.size{
  min-width:78px;
  padding:13px 18px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:.8125rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.size:hover{ border-color:var(--ink); }
.size.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.size.is-out{
  color:var(--ink-3);
  border-style:dashed;
  cursor:not-allowed;
  text-decoration:line-through;
  text-decoration-thickness:1px;
}
.size.is-out:hover{ border-color:var(--line); }
.opt__err{
  margin-top:11px;
  font-size:.75rem;
  color:var(--brick);
  display:none;
}
.opt__err.is-on{ display:block; }

/* de "Wissen"-link die Woo zelf aan/uit zet */
.hz-reset{
  display:inline-block;
  margin-top:12px;
  font-size:.75rem;
  color:var(--ink-3);
  border-bottom:1px solid var(--line);
}
.hz-reset:hover{ color:var(--ink); border-color:var(--ink); }

/* Woo's variatie-samenvatting: prijs herhalen we niet (staat al bovenaan),
   de voorraadmelding wél. */
.single_variation_wrap .woocommerce-variation-price{ display:none; }
.single_variation_wrap .woocommerce-variation-availability{
  margin-top:16px;
  font-size:.8125rem;
  color:var(--ink-2);
}
.single_variation_wrap .woocommerce-variation-description{
  margin-top:12px;
  font-size:.875rem;
  color:var(--ink-2);
}

/* ------------------------------------------------- aantal + koopknoppen
   Concept: .qty met ± knoppen. Woo rendert div.quantity met een
   <input type="number">. Zelfde pil, ander binnenwerk. */
.buy__actions{
  display:flex;
  gap:10px;
  align-items:stretch;
  margin-top:28px;
  flex-wrap:wrap;
}
.buy__actions .quantity,
.qty{
  display:flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:999px;
  padding:0 6px;
  flex:none;
}
.buy__actions .quantity .screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.buy__actions .quantity input[type="number"]{
  width:64px;
  height:52px;
  border:0;
  background:none;
  text-align:center;
  font-size:.9375rem;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  -moz-appearance:textfield;
}
.buy__actions .quantity input[type="number"]:focus{ outline:none; }
.buy__actions .quantity input[type="number"]::-webkit-outer-spin-button,
.buy__actions .quantity input[type="number"]::-webkit-inner-spin-button{ opacity:.35; }
.qty button{
  width:40px; height:52px;
  display:grid;
  place-items:center;
  color:var(--ink-2);
  transition:color .2s var(--ease);
}
.qty button:hover{ color:var(--ink); }
.qty span{ min-width:26px; text-align:center; font-size:.9375rem; font-variant-numeric:tabular-nums; }

.buy__add{
  flex:1 1 220px;
  padding:17px 28px;
  border:0;
  border-radius:999px;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--ff-sans);
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:center;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.7em;
  transition:background .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease);
}
.buy__add:hover{ background:var(--stone); color:#fff; }
.buy__add.is-done{ background:var(--stone-dk); color:#fff; }
.buy__add.is-busy{ opacity:.6; pointer-events:none; }
.buy__add[disabled],
.buy__add:disabled{ opacity:.4; cursor:not-allowed; }
.buy__add:hover[disabled]{ background:var(--ink); color:var(--paper); }

/* Woo verbergt/toont het hele blok bij een variabel product */
.woocommerce-variation-add-to-cart-disabled .buy__add{ opacity:.4; pointer-events:none; }

.buy__fav{
  width:54px;
  border:1px solid var(--line);
  border-radius:999px;
  background:none;
  cursor:pointer;
  display:grid;
  place-items:center;
  flex:none;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.buy__fav svg{ width:19px; height:19px; stroke:var(--ink); stroke-width:1.4; fill:none; }
.buy__fav:hover{ border-color:var(--ink); }
.buy__fav.is-on svg{ fill:var(--brick); stroke:var(--brick); }

/* ----------------------------------------------------- betalen + service */
.buy__pay{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:16px;
  flex-wrap:wrap;
  font-size:.6875rem;
  color:var(--ink-3);
}
.buy__pay i{
  font-style:normal;
  border:1px solid var(--line);
  border-radius:4px;
  padding:3px 8px;
  color:var(--ink-2);
  letter-spacing:.05em;
}

.buy__service{
  margin-top:26px;
  border-top:1px solid var(--line);
  padding-top:20px;
  display:grid;
  gap:13px;
  list-style:none;
  padding-left:0;
}
.buy__service li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:.8125rem;
  color:var(--ink-2);
  line-height:1.5;
}
.buy__service svg{
  width:17px; height:17px;
  stroke:var(--stone-dk);
  stroke-width:1.35;
  fill:none;
  flex:none;
  margin-top:2px;
}
.buy__service b{ color:var(--ink); font-weight:600; }

/* De productmeta (sku/categorieën) van Woo hoort visueel bij het staartje
   van het koopvak, niet bij de USP's. */
.buy .product_meta{
  margin-top:22px;
  font-size:.75rem;
  color:var(--ink-3);
  display:grid;
  gap:6px;
}
.buy .product_meta a{ color:var(--ink-2); border-bottom:1px solid var(--line); }
.buy .product_meta a:hover{ color:var(--ink); border-color:var(--ink); }

/* ------------------------------------------------------------- accordeon */
.acc{ margin-top:30px; border-top:1px solid var(--line); }
.acc__item{ border-bottom:1px solid var(--line); }
.acc__btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:19px 0;
  background:none;
  border:0;
  cursor:pointer;
  color:var(--ink);
  text-align:left;
  font-family:var(--ff-sans);
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.acc__btn i{
  position:relative;
  width:13px; height:13px;
  flex:none;
}
.acc__btn i::before,
.acc__btn i::after{
  content:"";
  position:absolute;
  background:var(--ink);
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.acc__btn i::before{ left:0; top:6px; width:13px; height:1px; }
.acc__btn i::after{ left:6px; top:0; width:1px; height:13px; }
.acc__item.is-open .acc__btn i::after{ transform:scaleY(0); opacity:0; }
.acc__panel{
  overflow:hidden;
  max-height:0;
  transition:max-height .5s var(--ease);
}
/* Zonder JS (of vóór pdp.js de echte hoogte meet) blijft een open blok
   toch leesbaar: de klasse alleen is al genoeg. */
.acc__item.is-open .acc__panel{ max-height:2400px; }
.acc__inner{ padding-bottom:24px; font-size:.9375rem; color:var(--ink-2); line-height:1.72; }
.acc__inner p{ margin-bottom:.9em; }
.acc__inner p:last-child{ margin-bottom:0; }
.acc__inner ul{ margin:0; padding-left:0; list-style:none; }
.acc__inner ul li{
  padding:9px 0;
  border-top:1px solid var(--line-2);
  display:flex;
  justify-content:space-between;
  gap:18px;
  font-size:.875rem;
}
.acc__inner ul li span:first-child{ color:var(--ink-3); }

/* ------------------------------------------------------- de complete set */
.set-sec{ background:var(--paper-2); }
.set{
  display:grid;
  grid-template-columns:1fr auto 1fr auto minmax(230px,.85fr);
  align-items:center;
  gap:clamp(14px,2vw,30px);
}
.set__item{ display:block; }
/* AfterBuild-klant 7 — zelfde verhouding als de productkaart. */
.set__item figure{
  margin:0;
  aspect-ratio:2/3;
  overflow:hidden;
  background:var(--paper-3);
}
.set__item img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.set__item:hover img{ transform:scale(1.045); }
.set__item h3{ font-size:1.15rem; margin-top:14px; }
.set__item p{ font-size:.875rem; color:var(--ink-2); margin-top:4px; }
.set__item p s{ color:var(--ink-3); font-size:.8125rem; margin-left:6px; }
.set__plus{
  font-family:var(--ff-display);
  font-size:2rem;
  color:var(--ink-3);
  text-align:center;
  align-self:center;
  padding-bottom:44px;
}
.set__box{
  background:var(--paper);
  padding:clamp(24px,2.6vw,34px);
  border:1px solid var(--line);
}
.set__box h3{ font-size:1.5rem; margin-bottom:10px; }
.set__box p{ font-size:.875rem; color:var(--ink-2); }
.set__tot{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:18px 0 20px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.set__tot b{ font-family:var(--ff-display); font-size:1.9rem; font-weight:400; line-height:1; }
.set__tot b .amount{ font-family:inherit; font-size:inherit; font-weight:inherit; }
.set__tot s{ color:var(--ink-3); font-size:.9375rem; }
.set__btn{ width:100%; flex:none; }

/* ------------------------------------------------------------ detailband */
.detail{ background:var(--paper); }
.detail__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(30px,4.5vw,80px);
  align-items:center;
}
.detail__media{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(10px,1.4vw,18px);
  align-items:end;
}
/* Heeft het product maar één foto, dan geen halflege kolom. */
.detail__media:has(figure:only-child){ grid-template-columns:1fr; }
.detail__media figure{ margin:0; overflow:hidden; }
.detail__media figure:first-child{
  aspect-ratio:3/4;
  border-radius:999px 999px 5px 5px;
}
.detail__media figure:last-child{
  aspect-ratio:1;
  border-radius:5px;
}
.detail__media figure:only-child{ aspect-ratio:3/4; border-radius:999px 999px 5px 5px; }
.detail__media img{ width:100%; height:100%; object-fit:cover; }
.detail__body h2{ margin:16px 0 20px; }
.detail__list{ margin-top:28px; border-top:1px solid var(--line); padding-left:0; list-style:none; }
.detail__list li{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
.detail__list b{
  font-family:var(--ff-display);
  font-size:1.1rem;
  font-weight:400;
  color:var(--stone-dk);
  flex:none;
  width:26px;
}
.detail__list span{ font-size:.9375rem; color:var(--ink-2); line-height:1.6; }
.detail__list strong{ color:var(--ink); font-weight:600; display:block; }
.detail__cta{ margin-top:26px; }

/* ------------------------------------------------------ reviews op de pdp */
.prev__grid{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:clamp(28px,4vw,64px);
  align-items:start;
}
.prev__empty{ font-size:.9375rem; color:var(--ink-2); }
.prev__score{
  background:var(--paper-2);
  padding:clamp(26px,3vw,38px);
  text-align:center;
}
.prev__score b{
  font-family:var(--ff-display);
  font-size:clamp(3.2rem,5vw,4.2rem);
  line-height:.92;
  display:block;
}
.prev__score .s{ display:flex; justify-content:center; gap:3px; margin:14px 0 8px; }
.prev__score svg{ width:15px; height:15px; fill:var(--paper-3); stroke:none; }
.prev__score svg.is-on{ fill:var(--stone-dk); }
.prev__score small{ font-size:.75rem; color:var(--ink-3); letter-spacing:.05em; }
.prev__bars{ margin-top:24px; text-align:left; display:grid; gap:12px; }
.prev__bar span{ font-size:.6875rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); }
.prev__bar i{
  display:block;
  height:3px;
  background:var(--paper-3);
  margin-top:7px;
  position:relative;
}
.prev__bar i::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:var(--w,90%);
  background:var(--stone-dk);
}
.prev__list{ display:grid; gap:0; }
.prev__item{
  padding:26px 0;
  border-bottom:1px solid var(--line);
}
.prev__item:first-child{ padding-top:0; }
.prev__meta{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.prev__meta .s{ display:flex; gap:2px; }
.prev__meta svg{ width:12px; height:12px; fill:var(--paper-3); stroke:none; }
.prev__meta svg.is-on{ fill:var(--stone-dk); }
.prev__meta cite{
  font-style:normal;
  font-size:.75rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.prev__item blockquote{
  margin:0;
  font-family:var(--ff-display);
  font-size:1.28rem;
  line-height:1.4;
  font-style:italic;
}
.prev__item p{ margin-top:10px; font-size:.8125rem; color:var(--ink-3); }

/* --------------------------------------------------------- plakbalk (cta) */
.stickybar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:90;
  background:var(--paper);
  border-top:1px solid var(--line);
  box-shadow:0 -12px 40px -30px rgba(34,31,27,.6);
  transform:translateY(102%);
  transition:transform .45s var(--ease);
}
.stickybar.is-on{ transform:none; }
.stickybar__in{
  display:flex;
  align-items:center;
  gap:18px;
  padding-block:12px;
}
.stickybar figure{ margin:0; width:46px; height:60px; overflow:hidden; flex:none; background:var(--paper-2); }
.stickybar figure img{ width:100%; height:100%; object-fit:cover; }
.stickybar__txt{ min-width:0; flex:1 1 auto; }
.stickybar__txt b{ font-family:var(--ff-display); font-weight:400; font-size:1.1rem; display:block; line-height:1.2; }
.stickybar__txt span{ font-size:.8125rem; color:var(--ink-2); }
.stickybar__txt span s{ color:var(--ink-3); margin-left:6px; font-size:.75rem; }
.stickybar__sizes{ display:flex; gap:7px; }
.stickybar__sizes:empty{ display:none; }
.stickybar__sizes .size{ min-width:62px; padding:10px 14px; font-size:.75rem; }
.stickybar .buy__add{ flex:0 0 auto; padding:14px 30px; }

/* ----------------------------------------------------------- responsive */
@media (max-width:1180px){
  .set{ grid-template-columns:1fr auto 1fr; }
  .set__box{ grid-column:1 / -1; }
  .prev__grid{ grid-template-columns:1fr; }
}

@media (max-width:1024px){
  /* AfterBuild-klant 8 — minmax(0,1fr) i.p.v. 1fr, plus min-width:0 op de
     kolommen: een grid-item mag anders niet smaller worden dan zijn
     min-content, en dan duwt het koopvak de hele pagina breder dan het
     scherm. */
  .pdp{ grid-template-columns:minmax(0,1fr); gap:34px; }
  .pdp > *{ min-width:0; }
  .buy{ position:static; }
  .detail__grid{ grid-template-columns:1fr; }
  .stickybar__sizes{ display:none; }

  /* concept: .gal__main verbergen en .gal__more als snap-carrousel.
     Bij ons doet de wrapper zelf beide rollen. */
  .gal{ margin-inline:calc(var(--gutter) * -1); }
  .gal .woocommerce-product-gallery__wrapper{
    grid-auto-flow:column;
    grid-auto-columns:82%;
    grid-template-columns:none;
    gap:8px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    padding-inline:var(--gutter);
  }
  .gal .woocommerce-product-gallery__wrapper::-webkit-scrollbar{ display:none; }
  .gal .woocommerce-product-gallery__wrapper > *{ scroll-snap-align:center; }
  .gal .woocommerce-product-gallery__wrapper > *:first-child{ grid-column:auto; }
}

@media (max-width:680px){
  .set{ grid-template-columns:1fr; }
  .set__plus{ padding:0; }
  .detail__media{ grid-template-columns:1fr; }
  .detail__media figure:last-child{ display:none; }
  /* AfterBuild-klant 8 — stond op nowrap, terwijl mobile-fixes.css de
     koopknop op min-width:100% zet. pdp.css laadt ná mobile-fixes.css, dus
     nowrap won en de rij (aantal + knop + hartje) kon niet afbreken: het
     koopvak werd 388px breed bij een scherm van 390px met 18px marge, en
     daarmee werd het hele document te breed. Nu breekt de rij netjes af:
     aantal + hartje op regel 1, de koopknop op volle breedte eronder. */
  .buy__actions{ flex-wrap:wrap; }
  .buy__actions .quantity{ order:1; flex:0 0 auto; }
  .buy__fav{ order:1; }
  .buy__add{ order:2; flex:1 1 100%; padding-inline:16px; }
  .buy__actions .quantity input[type="number"]{ width:46px; }
  .stickybar figure{ display:none; }
  .stickybar__txt span{ display:block; }
  .swatch{ width:50px; }
}