/* ============================================================
   20-10-2026 (ronde 5 CSS-opschoning, akkoord GW 20-10): hieronder staat de inhoud van dsw-reviews.css,
   ongewijzigd. Dat bestand laadde op de PDP direct VOOR dit bestand, onder dezelfde voorwaarde
   (header.phtml) - bovenaan invoegen houdt de cascade-volgorde exact gelijk en scheelt een verzoek.
   Het review-blok blijft een AFGEBAKEND deel: wijzig het hier, tussen deze kop en "EINDE REVIEWS".
   ============================================================ */
/* ============================================================
   dsw-reviews.css — het REVIEW-blok op de PDP (AW_AdvancedReviews).
   ------------------------------------------------------------
   Waarom een eigen bestand: dsw-pdp-redesign.css is 73 KB en append-only gegroeid (dezelfde
   selector staat er tot 9x in). Reviews zijn een afgebakend component met eigen markup uit een
   module — die hoort niet in die stapel. Zelfde aanpak als dsw-kaart.css.

   Voorgeschiedenis (16-7): het blok toonde "Er zijn nog geen reviews" terwijl de teller 11 zei.
   Twee gestapelde oorzaken, allebei migratie-gaten, niet de code:
     1. review_detail (0 rijen) + rating_option_vote (0 rijen) waren niet meegemigreerd. Elke
        review-query doet INNER JOIN review_detail -> 0 resultaten, ook Magento's eigen collectie.
     2. Zodra de data er was, knalde reviews.phtml:29 op Mage::helper('reviewcomment'): de modules
        Visualwebs_ReviewComment en Visualwebs_AdvancedRatings ontbraken (hun TABELLEN stonden er
        wel, incl. 182 rijen procon-data, en core_resource stond op 1.0.0 — alleen de code miste).
        In PHP 8 is "class not found" een Error, geen Exception, dus Magento's template-catch
        (catch (Exception)) ving 'm niet: geen reviews en geen foutmelding op de pagina.
   Beide opgelost; dit bestand doet alleen de vormgeving.

   MARKUP waar we op mikken (uit advancedreviews/ajax/reviews.phtml, niet aanpasbaar zonder de
   module te raken — op één verplaatste sluit-tag na):
     .review_container
       .ratings > table.ratings-table > tbody > tr > th + td > .starbar > span[style=width:N%]
                                                              + .rating-value
       .review > p.bold (titel) + p (tekst) + p (proscons) + .review-meta.reviewmeta
       .clearer
       .product-review-post*   (reacties)
       .product-review-footer  (Opmerking plaatsen + nuttig-stemmen)

   Tokens: bewust dezelfde als de rest van de redesign-laag (--r-*), met fallbacks zodat dit
   bestand ook standalone klopt.
   ============================================================ */

body.catalog-product-view {
  --rv-navy:   var(--r-dark, #2d2d5a);
  --rv-deep:   var(--r-deep, #25254a);
  --rv-text:   var(--r-text, #1d1d33);
  --rv-muted:  var(--r-muted, #6b6b86);
  --rv-line:   var(--r-border, #e8e6f0);
  --rv-soft:   var(--r-light, #f4f3f9);
  --rv-green:  var(--r-green, #3daa35);
  --rv-star:   #f5a623;             /* amber; contrast op wit = 2.2 maar het is een ICOON,
                                       de leesbare waarde staat als tekst in .rating-value */
  --rv-radius: 16px;
}

/* ---- de lijst-container ------------------------------------------------ */
body.catalog-product-view #advancereviews-filteredReviews {
  display: block;                    /* stond op inline-block: gaf een rare baseline-kier */
  margin: 4px 0 0;
}

/* ---- ÉÉN review = één kaart -------------------------------------------- */
body.catalog-product-view .review_container {
  position: relative;
  background: #fff;
  border: 1px solid var(--rv-line);
  border-radius: var(--rv-radius);
  padding: 22px 24px 18px;
  margin: 0 0 14px;
  box-shadow: 0 1px 2px rgba(35, 35, 80, .04);
  transition: box-shadow .16s ease, border-color .16s ease;
}
body.catalog-product-view .review_container:hover {
  border-color: #dcd9ea;
  box-shadow: 0 10px 26px rgba(35, 35, 80, .07);
}

/* Twee kolommen: links de scores, rechts het verhaal. Onder 900px onder elkaar.
   .ratings en .review waren floats (vandaar de .clearer); grid is hier eerlijker en
   houdt de scores op één hoogte met de tekst. */
body.catalog-product-view .review_container {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 0 30px;
  align-items: start;
}
body.catalog-product-view .review_container > .clearer { display: none; }   /* float-relict */
body.catalog-product-view .review_container .ratings { float: none !important; margin: 0; }
body.catalog-product-view .review_container .review  { float: none !important; margin: 0; min-width: 0; }

/* ---- de scorekolom ----------------------------------------------------- */
body.catalog-product-view .review_container .ratings-table {
  width: 100%; border: 0; margin: 0; background: var(--rv-soft);
  border-radius: 12px; padding: 12px 13px; border-collapse: separate; border-spacing: 0 7px;
}
body.catalog-product-view .review_container .ratings-table th {
  font-size: 12px; font-weight: 600; color: var(--rv-muted);
  text-align: left; padding: 0 8px 0 0; white-space: nowrap; border: 0; background: none;
  vertical-align: middle;
}
body.catalog-product-view .review_container .ratings-table td {
  padding: 0; border: 0; background: none; vertical-align: middle; white-space: nowrap;
}
/* de sterrenbalk komt uit de module: een span met een inner span op width:N% */
body.catalog-product-view .review_container .starbar { vertical-align: middle; }
body.catalog-product-view .review_container .rating-value {
  font-size: 11.5px; font-weight: 800; color: var(--rv-navy);
  margin-left: 7px; vertical-align: middle;
}

/* ---- het verhaal ------------------------------------------------------- */
body.catalog-product-view .review_container .review p.bold {
  font-size: 17px; font-weight: 800; color: var(--rv-navy);
  margin: 0 0 7px; line-height: 1.3; letter-spacing: -.01em;
}
body.catalog-product-view .review_container .review > p {
  font-size: 15px; line-height: 1.65; color: #3f3f5a; margin: 0 0 10px;
}
body.catalog-product-view .review_container .review > p:empty { display: none; }

/* ---- "Beoordeeld door R. op 6 juni 2026" ------------------------------- */
body.catalog-product-view .review_container .review-meta {
  font-size: 12.5px; color: var(--rv-muted); margin: 12px 0 0;
  padding: 10px 0 0; border-top: 1px solid var(--rv-line);
  display: flex; align-items: center; gap: 8px;
}
/* Het groene vinkje stond hier op ELKE review, met in de code de belofte "deze reviews komen
   uit een echte bestelling". Dat was niet waar: iedereen kan hier een review schrijven
   (allow_only_sold=0). Gemeten 6-8-2026: van 5.750 goedgekeurde reviews zijn er 176
   aantoonbaar aan een bestelling van dat product te koppelen. Het vinkje hoort dus bij die
   176 - nu als een label dat zegt wat het is, en alleen daar. Zie Dsw_Base_Helper_Reviewkoper. */
body.catalog-product-view .review_container .dsw-koper {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 2px;
  padding: 2px 9px 2px 6px; border-radius: 20px;
  background: rgba(61, 170, 53, .12); color: #237a1f;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
body.catalog-product-view .review_container .dsw-koper::before {
  content: "\2713"; flex: 0 0 auto;
  width: 15px; height: 15px; border-radius: 50%;
  background: #237a1f; color: #fff;
  font-size: 9px; font-weight: 900; line-height: 15px; text-align: center;
}

/* ---- reacties op een review -------------------------------------------- */
body.catalog-product-view .review_container .product-review-post {
  grid-column: 1 / -1;
  background: var(--rv-soft); border-left: 3px solid var(--rv-navy);
  border-radius: 0 10px 10px 0; padding: 11px 14px; margin: 12px 0 0;
}
body.catalog-product-view .review_container .product-review-post .post-date {
  font-size: 11.5px; color: var(--rv-muted); margin: 0 0 3px;
}
body.catalog-product-view .review_container .product-review-post .post-content {
  font-size: 14px; line-height: 1.6; color: #3f3f5a;
}

/* ---- footer van de kaart ----------------------------------------------- */
body.catalog-product-view .review_container .product-review-footer {
  grid-column: 1 / -1;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px;
  margin: 14px 0 0; padding: 11px 0 0; border-top: 1px solid var(--rv-line);
  font-size: 12.5px;
}
body.catalog-product-view .review_container .product-review-footer .floatleft { float: none !important; }
body.catalog-product-view .review_container .product-review-footer a {
  color: var(--rv-muted); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid transparent; transition: color .14s ease, border-color .14s ease;
}
body.catalog-product-view .review_container .product-review-footer a:hover {
  color: var(--rv-navy); border-bottom-color: var(--rv-navy);
}
body.catalog-product-view .review_container > .clearer + .clearer { display: none; }

/* ---- sorteren + pager --------------------------------------------------- */
body.catalog-product-view #advancereviews-sort-reviews,
body.catalog-product-view #advancereviews-pager-reviews {
  font-size: 13px; color: var(--rv-muted);
}
body.catalog-product-view #advancereviews-sort-reviews a,
body.catalog-product-view #advancereviews-pager-reviews a {
  color: var(--rv-navy); text-decoration: none; font-weight: 700;
}
body.catalog-product-view #advancereviews-pager-reviews a:hover { text-decoration: underline; }

/* ---- mobiel ------------------------------------------------------------- */
@media (max-width: 900px) {
  body.catalog-product-view .review_container {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px 0;
    padding: 18px 16px 15px;
  }
  /* Scores ONDER de tekst: op een telefoon lees je eerst het verhaal.
     LET OP: order moet op ELK grid-kind staan. Zonder een expliciete order valt een kind terug
     op 0 en springt het vóór alles met een hogere order — dat gebeurde met .product-review-footer:
     die stond boven de titel ("Opmerking plaatsen" als eerste regel van de kaart). Gemeten en
     gefixt 16-7. .review-meta staat er bewust NIET tussen: dat is een kind van .review, geen
     grid-kind van de kaart, dus order doet daar niets. */
  body.catalog-product-view .review_container .review               { order: 1; }
  body.catalog-product-view .review_container .ratings              { order: 2; }
  body.catalog-product-view .review_container .product-review-post  { order: 3; }
  body.catalog-product-view .review_container .product-review-footer{ order: 4; }
  body.catalog-product-view .review_container .ratings-table {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; padding: 11px 12px;
  }
  body.catalog-product-view .review_container .ratings-table tbody { display: contents; }
  body.catalog-product-view .review_container .ratings-table tr {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
  }
  body.catalog-product-view .review_container .review p.bold { font-size: 16px; }
}
@media (max-width: 560px) {
  body.catalog-product-view .review_container .ratings-table { grid-template-columns: 1fr; }
}

/* ============================================================
   TONEN / UITKLAPPEN (GW 6-8-2026)
   ------------------------------------------------------------
   De AW-toolbar (sorteren, "5 per pagina", paginanummers) is uit het blok gehaald - met de
   ~80 regels CSS die hem rechttrokken (staan in /data/web/backups-20260806-reviews/).
   Reden staat in advancedreviews/ajax/customerreviews.phtml: 63% van de producten met
   reviews heeft er precies EEN, 89% hooguit drie. Paginering rond een enkele review is
   chrome zonder werk. Nu: drie zichtbaar, de rest achter een knop die ter plekke uitklapt.
   ============================================================ */
.dsw-rvlist:not(.is-open) .review_container:nth-child(n+4){display:none}

.dsw-rv-meerbalk{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:2px 0 22px}
.dsw-rv-meer{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 20px;border:1.5px solid var(--r-border,#e8e6f0);border-radius:11px;
  background:#fff;color:var(--r-dark,#2d2d5a);
  font-family:inherit;font-size:14px;font-weight:700;line-height:1;cursor:pointer;
  transition:background .14s ease,border-color .14s ease,box-shadow .14s ease}
.dsw-rv-meer::after{
  content:"";width:8px;height:8px;flex:0 0 auto;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .18s ease}
.dsw-rv-meer[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
.dsw-rv-meer:hover{background:var(--r-panel,#f4f3f9);border-color:#c9c5dd;box-shadow:0 6px 18px rgba(35,35,80,.07)}
.dsw-rv-meer:focus-visible{outline:3px solid var(--r-dark,#2d2d5a);outline-offset:2px}
.dsw-rv-meerhint{font-size:13px;color:var(--r-muted,#6b6b86)}

/* Laatste zichtbare kaart vervaagt naar onderen zolang er nog meer achter zit: een
   randje "hier gaat het door" zonder dat je erop moet klikken om te weten dat het er is. */
.dsw-rvlist:not(.is-open) .review_container:nth-child(3){
  -webkit-mask-image:linear-gradient(#000 62%,rgba(0,0,0,.12));
          mask-image:linear-gradient(#000 62%,rgba(0,0,0,.12))}

@media (max-width:600px){
  .dsw-rv-meerbalk{margin:0 0 18px}
  .dsw-rv-meer{width:100%;justify-content:center}
  .dsw-rv-meerhint{display:none}
}


/* Huisfont afdwingen op de reviewtekst (25-7-2026).
   Oorzaak serif: de legacy-regel .content p{font:15px Roboto} (dsw-product.css)
   pinde titel + tekst op kale "Roboto" — die font is niet meer geladen, dus
   viel de browser terug op zijn default serif (Times). Nu expliciet de huisfont. */
.review_container .review p,
.review_container .review p.bold{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}

/* ============================================================
   FOTO'S VAN KLANTEN BIJ EEN REVIEW (GW 6-8-2026)
   ------------------------------------------------------------
   Markup uit advancedreviews/ajax/reviews.phtml: knoppen met een duimnagel, en onderaan de
   pagina een vergroting. Bewust knoppen en geen <a>: er is geen doel-URL, alleen een laag.
   ============================================================ */
body.catalog-product-view .dsw-rvfotos{
  display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:12px 0 2px}
body.catalog-product-view .dsw-rvfoto{
  padding:0;border:1px solid var(--rv-line,#e8e6f0);border-radius:10px;overflow:hidden;
  background:#fff;cursor:zoom-in;line-height:0;
  transition:border-color .14s ease,box-shadow .14s ease,transform .12s ease}
body.catalog-product-view .dsw-rvfoto img{
  display:block;width:86px;height:66px;object-fit:cover}
body.catalog-product-view .dsw-rvfoto:hover{
  border-color:#c9c5dd;box-shadow:0 8px 20px rgba(35,35,80,.12);transform:translateY(-1px)}
body.catalog-product-view .dsw-rvfoto:focus-visible{outline:3px solid var(--rv-navy,#2d2d5a);outline-offset:2px}
body.catalog-product-view .dsw-rvfotos-tx{
  font-size:12.5px;color:var(--rv-muted,#6b6b86);font-style:italic}

.dsw-rvfoto-groot{
  position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;
  padding:28px;background:rgba(20,20,45,.86);cursor:zoom-out}
.dsw-rvfoto-groot[hidden]{display:none}
.dsw-rvfoto-groot img{
  max-width:min(1100px,92vw);max-height:88vh;border-radius:12px;background:#fff;
  box-shadow:0 20px 60px rgba(0,0,0,.45)}
.dsw-rvfoto-x{
  position:absolute;top:18px;right:22px;width:42px;height:42px;
  border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;
  font-size:27px;line-height:1;cursor:pointer}
.dsw-rvfoto-x:hover{background:rgba(255,255,255,.28)}
@media (max-width:600px){
  body.catalog-product-view .dsw-rvfoto img{width:74px;height:58px}
  .dsw-rvfoto-groot{padding:12px}
}

/* ---- strip "zo staat hij bij klanten thuis" ----------------------------- */
/* Boven de lijst, want een foto van het apparaat in een echte keuken is het sterkste bewijs
   dat we hebben. Verschijnt pas vanaf twee foto's; bij één is het een herhaling. */
body.catalog-product-view .dsw-rvstrip{
  background:var(--rv-soft,#f4f3f9);border:1px solid var(--rv-line,#e8e6f0);border-radius:14px;
  padding:14px 16px;margin:0 0 18px}
body.catalog-product-view .dsw-rvstrip-kop{
  margin:0 0 10px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rv-muted,#6b6b86)}
body.catalog-product-view .dsw-rvstrip-beelden{display:flex;flex-wrap:wrap;gap:10px}
body.catalog-product-view .dsw-rvstrip .dsw-rvfoto img{width:104px;height:78px}
@media (max-width:600px){
  body.catalog-product-view .dsw-rvstrip{padding:12px}
  body.catalog-product-view .dsw-rvstrip .dsw-rvfoto img{width:84px;height:64px}
}

/* ======================= EINDE REVIEWS (was dsw-reviews.css) ======================= */

/* ============================================================
   dsw-pdp-redesign.css — ADDITIEVE reskin op de ECHTE M1 dsw PDP-DOM
   Getest tegen de live-DOM van /smeg-c9gmmbnlk2 (C9GMMBNLK2).
   Verandert GEEN html/template — puur CSS over de bestaande classes.
   Weghalen = exact de oude pagina terug (100% omkeerbaar).
   SCOPE: de LOOK (kleur, typografie, kaarten, schuifjes, groene
   voorraadkern, swatches, feature-cards, prijs, CTA). De HERINDELING
   (quickview als tabs vol-breedte onder de foto) hoort in de template.
   ============================================================ */
:root{
  --r-dark:#2d2d5a; --r-deep:#25254a; --r-light:#f4f3f9; --r-panel:#faf9fd;
  --r-green:#3daa35; --r-green-ink:#237a1f; --r-green-soft:#eaf6e8;
  --r-red:#c5302f; --r-red-dark:#a52625;
  --r-text:#1d1d33; --r-muted:#6b6b86; --r-faint:#6f6d88; --r-border:#e8e6f0;
  --r-radius:14px; --r-radius-lg:18px;
  --r-shadow:0 1px 3px rgba(35,35,80,.06),0 12px 30px rgba(35,35,80,.09);
  --r-font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

/* ---- basis ---- */
.product-view.product-essential{font-family:var(--r-font);color:var(--r-text)}
.product-essential #product_addtocart_form{}

/* ---- titel ---- */
.product-essential .product-name h1.item.name{
  font-weight:800 !important;color:var(--r-text) !important;}
.product-essential .product-subheading{}
.product-essential .reviewtekstmini .ratingtekstview{}

/* ---- galerij ---- */
.product-essential .product-image-gallery .gallery-image{
  border-radius:16px !important;background:#fff;border:1px solid var(--r-border)}
.product-essential .more-views .product-image-thumbs li a.thumb-link img{
  border-radius:10px !important;border:2px solid var(--r-border) !important;transition:.15s}
.product-essential .more-views .product-image-thumbs li a.thumb-link:hover img,
.product-essential .more-views .product-image-thumbs li a.thumb-link.active img{border-color:var(--r-dark) !important}
.product-essential .media-slider-arrow{background:#fff !important;border:1px solid var(--r-border) !important;box-shadow:var(--r-shadow)}

/* ---- vergroot-icoon: moderne ronde frosted-knop i.p.v. kale blauwe ⊕ (GW 16-7) ---- */
.product-essential .large-image-icon,
.product-view .large-image-icon{
  
  width:46px !important;height:46px !important;
  display:flex !important;align-items:center;justify-content:center;
  background:rgba(255,255,255,.82) !important;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  border:1px solid var(--r-border) !important;border-radius:50% !important;
  box-shadow:0 2px 8px rgba(35,35,80,.10),0 10px 26px rgba(35,35,80,.12) !important;
  font-size:0 !important;line-height:0 !important;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.product-essential .large-image-icon i.fa {
  color:var(--r-dark) !important;font-size:19px !important;line-height:1 !important;margin:0 !important}
.product-essential .large-image-icon:hover,
.product-view .large-image-icon:hover{
  transform:scale(1.08);background:#fff !important;
  box-shadow:0 4px 12px rgba(35,35,80,.16),0 14px 32px rgba(35,35,80,.18) !important}
/* Vergroot-icoon ALTIJD rechtsboven (GW 1-8): bij de media-slider-galerij stond het rechtsONDER
   en overlapte de keurmerk-badge (Best Getest). Hoge specificiteit + bottom:auto verslaat de
   slider-regel. Energielabel staat linksboven, dus rechtsboven is vrij. */
body.catalog-product-view .media-slider .large-image-icon,
body.catalog-product-view .product-view a.large-image-icon,
body.catalog-product-view .product-essential a.large-image-icon,
body.catalog-product-view a.large-image-icon{
  top:0 !important;bottom:auto !important;right:0 !important;left:auto !important}

/* ---- quickview = nette tab-balk (box) ---- */
.product-essential ul.quickview{
  border:1px solid var(--r-border) !important;border-radius:14px;
  }
.product-essential ul.quickview li a{}
.product-essential ul.quickview li a:hover{color:var(--r-deep) !important;text-decoration:underline}

/* ---- replacement swatches (Kleur: Mat zwart / Rvs) ---- */
.product-essential .replacement-swatches{}
.product-essential .bloglist-label,.product-essential .swatch-title-prefix{color:var(--r-dark);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:11px}
.product-essential #current-swatch-label-kleur{color:var(--r-text);font-weight:700}
.product-essential .replacement-swatches-list{list-style:none;padding:0;margin:10px 0 0}
.product-essential .replacement-swatches-list li.swatch{
  border:1.5px solid var(--r-border);border-radius:12px;padding:6px;transition:.15s;background:#fff}
.product-essential .replacement-swatches-list li.swatch:hover{border-color:#d3d0e4}
.product-essential .replacement-swatches-list li.swatch.current{border-color:var(--r-dark);box-shadow:0 0 0 1px var(--r-dark)}
.product-essential .replacement-swatches-list li.swatch img{border-radius:8px;background:var(--r-panel)}
.product-essential .replacementlabel{font-size:11.5px;font-weight:700;color:var(--r-text);margin:5px 0 0;text-align:center}

/* ---- SCHUIFJES: bezorgopties + aansluitmateriaal (options-list) ---- */
.product-essential .product-options .option dl{}
.product-essential .product-options .option dl dt label{
  font-size:12px !important;font-weight:800 !important;text-transform:uppercase;letter-spacing:.05em;color:var(--r-dark) !important}
.product-essential .options-list{list-style:none;}
.product-essential .options-list > li{
  border:1.5px solid var(--r-border);
  list-style:none;position:relative;transition:.15s;}
.product-essential .options-list > li input.product-custom-option{
  position:absolute !important;opacity:0 !important;width:0 !important;height:0 !important}
.product-essential .options-list > li .label{}
.product-essential .options-list > li .label label{
  display:block;position:relative;cursor:pointer;
  color:var(--r-text);line-height:1.4;min-height:28px}
.product-essential .options-list > li .label label::before{
  content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:50px;height:28px;border-radius:999px;background:#cfcddd;transition:.2s}
.product-essential .options-list > li .label label::after{
  content:"";position:absolute;right:25px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:.2s cubic-bezier(.3,1.4,.5,1)}
.product-essential .options-list > li input.product-custom-option:checked + .label label::before{background:var(--r-dark)}
.product-essential .options-list > li input.product-custom-option:checked + .label label::after{transform:translateY(-50%) translateX(22px)}
.product-essential .options-list > li:has(input:checked){border-color:var(--r-dark);background:var(--r-light)}
.product-essential .options-list .price-notice{}
.product-essential .options-list .price-notice .price{}
.product-essential .options-list small{color:var(--r-muted);}
.product-essential .options-list a.info{color:var(--r-text) !important}
/* rustiger (opzet-7): geen link-onderstreping op optie-titels/tooltips; subtekst op eigen regel; meer lucht */
.product-essential .options-list > li .label label,
.product-essential .options-list > li .label label a,
.product-essential .options-list a,
.product-essential .options-list a.info{text-decoration:none !important}
.product-essential .options-list > li{}
.product-essential .options-list > li .label small{display:block;margin-top:3px;font-size:12.5px;line-height:1.35;font-weight:500}
.product-essential .options-list > li:hover{border-color:#cfcbe6}

/* ---- GARANTIE-kaarten (content-veilig uit garantie_[merk]-secties; JS bouwt .dsw-rd-warr) ---- */
.dsw-rd-warr-lead{font-size:15px;line-height:1.6;margin:0 0 20px;}
.dsw-rd-warr-lead strong{color:var(--r-text);font-weight:800}
.dsw-rd-warr-row{display:grid;}
.dsw-rd-warr-card{background:#fbfbfe;border:1px solid var(--r-border);border-radius:16px;padding:22px 22px 20px}
.dsw-rd-warr-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#fff;border:1px solid var(--r-border);color:var(--r-dark);margin-bottom:13px}
.dsw-rd-warr-card h3{font-size:15.5px;font-weight:800;color:var(--r-text);margin:0 0 7px;line-height:1.25}
.dsw-rd-warr-body{font-size:13.5px;color:#54546e;line-height:1.55}
.dsw-rd-warr-body a{color:var(--r-dark);font-weight:700;text-decoration:none}
.dsw-rd-warr-body a:hover{text-decoration:underline}
@media(max-width:560px){.dsw-rd-warr-card{padding:18px}}

/* ---- Alternatieven "Bekijk product": thema-blauw -> redesign-donker ---- */
.product-essential .panel.upsells .button,
.product-essential .panel.upsells button.button{
  background:var(--r-dark) !important;border:0 !important;border-radius:11px !important;
  color:#fff !important;font-weight:700 !important;padding:12px 20px !important;box-shadow:none !important;
  font-family:var(--r-font);text-transform:none !important;letter-spacing:0}
.product-essential .panel.upsells .button:hover{background:var(--r-deep,#23234f) !important}
/* ---- Bijpassende producten: schone kaart-omranding (design-consistent) ---- */
.product-essential .panel.related li:has(a.product-image){
  }
.product-essential .panel.related li:has(a.product-image):hover{border-color:#cfcbe6;box-shadow:0 4px 14px rgba(35,35,80,.06)}

/* ---- Bezorgopties-POPUP vanaf de sticky-koopbalk (JS: .dsw-rd-optmodal) ---- */
body.dsw-rd-modal-open{overflow:hidden}
.dsw-rd-optmodal{position:fixed;inset:0;z-index:10000;display:flex;align-items:flex-end;justify-content:center}
.dsw-rd-optmodal[hidden]{display:none}
.dsw-rd-optmodal-back{position:absolute;inset:0;background:rgba(20,20,45,.5);animation:dsw-fade .2s ease}
.dsw-rd-optmodal-box{position:relative;background:#fff;width:100%;max-width:560px;max-height:88vh;display:flex;flex-direction:column;
  border-radius:22px 22px 0 0;box-shadow:0 -12px 44px rgba(20,20,45,.28);animation:dsw-slideup .28s cubic-bezier(.3,1,.4,1)}
.dsw-rd-optmodal-head{display:flex;align-items:center;gap:13px;padding:17px 20px;border-bottom:1px solid var(--r-border)}
.dsw-rd-optmodal-thumb{width:46px;height:46px;object-fit:contain;border:1px solid var(--r-border);border-radius:10px;padding:3px;background:#fff;flex:none}
.dsw-rd-optmodal-ttl{flex:1;min-width:0;line-height:1.3}
.dsw-rd-optmodal-ttl b{display:block;font-size:15px;color:var(--r-text);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsw-rd-optmodal-ttl span{font-size:12.5px;color:var(--r-muted)}
.dsw-rd-optmodal-x{background:var(--r-light,#f2f1f8);border-radius:50%;}
.dsw-rd-optmodal-x:hover{background:#e7e5f2}
.dsw-rd-optmodal-body{padding:18px 20px;overflow-y:auto;flex:1}
.dsw-rd-optmodal-body .dsw-rd-extras{margin:0}
.dsw-rd-optmodal-body .dsw-rd-extras-head{margin-bottom:12px}
.dsw-rd-optmodal-body .product-options{max-height:none !important;overflow:visible !important;height:auto !important}
/* Het mobiele koopvenster scrolt zelf, dus toon alle opties zonder afknip. */
@media(max-width:600px){
  .dsw-rd-optmodal-body #alloptions,.dsw-rd-optmodal-body #optionsoverlay{display:none !important}
  .dsw-rd-optmodal-body #product-options-wrapper{max-height:none !important;overflow:visible !important}
}
.dsw-rd-optmodal-foot{padding:14px 20px 18px;border-top:1px solid var(--r-border);background:#fff}
.dsw-rd-optmodal-add{width:100%;background:var(--r-red);color:#fff;border:0;border-radius:13px;padding:15px;font-weight:800;font-size:15.5px;cursor:pointer;font-family:var(--r-font)}
.dsw-rd-optmodal-add:hover{background:var(--r-red-dark,#b8242f)}
@keyframes dsw-fade{from{opacity:0}to{opacity:1}}
@keyframes dsw-slideup{from{transform:translateY(30px);opacity:.6}to{transform:translateY(0);opacity:1}}
@media(min-width:620px){
  .dsw-rd-optmodal{align-items:center}
  .dsw-rd-optmodal-box{border-radius:20px;max-height:82vh;animation:dsw-pop .24s cubic-bezier(.3,1.2,.4,1)}
}
@keyframes dsw-pop{from{transform:scale(.96);opacity:.5}to{transform:scale(1);opacity:1}}

/* ---- VOORRAAD / LEVERING = groene conversiekern ---- */
.product-essential .dsw_voorraadinfo{
  
  
  color:var(--r-text) !important;}
.product-essential .dsw_voorraadinfo strong{}
.product-essential .dsw_voorraadinfo a{color:var(--r-dark) !important;font-weight:700}
/* "Houd mij op de hoogte" bij een onbekende levertijd: een LINKJE onderin het groene blok, niet
   een tweede knop. Deze producten zijn bestelbaar - de winkelwagenknop blijft de hoofdweg, dit is
   de uitwijk voor wie wil wachten (GW 12-8-2026). De regel hierboven zet kleur en gewicht met
   !important op elke <a> in het blok, dus deze moet specifieker zijn EN ook !important dragen.
   Geen <br> ervoor: dsw-mobile.css r.779 gooit die binnen dit blok weg. */
.product-essential .dsw_voorraadinfo a.dsw-notify-link{
  display:block;margin:9px 0 0;padding-top:9px;border-top:1px solid #cfe8ca;
  color:var(--r-green-ink) !important;font-weight:700 !important;font-size:13.5px !important;
  text-decoration:underline;text-underline-offset:2px}
.product-essential .dsw_voorraadinfo a.dsw-notify-link:before{content:'\1F514';margin-right:6px;text-decoration:none;display:inline-block}
.product-essential .dsw_voorraadinfo a.dsw-notify-link:hover{color:#1b5c17 !important}

/* ---- voorraad per afwerking ----
   Bij een fornuis met beslaguitvoeringen staat de voorraad op EEN afwerking. Zonder dit lijstje
   beloofde het groene blok "morgen" bij elke keuze; gemeten 27-8-2026 op /steel-aq9s-5fi-rvs,
   waar 7 stuks chroom stonden en messing dezelfde belofte kreeg.
   Het blok verschijnt ALLEEN als er ergens voorraad is (zie voorraad.phtml) - anders zou het
   vier keer hetzelfde zeggen.
   Twee kolommen: de afwerking links, de stand rechts. De stand die telt krijgt het groene ink
   van dit blok; de rest blijft rustig, zodat het oog naar de leverbare gaat. */
.product-essential .dsw_voorraadinfo ul.dsw-beslagvoorraad{
  list-style:none;margin:9px 0 0;padding-top:9px;border-top:1px solid #cfe8ca;font-size:13.5px}
.product-essential .dsw_voorraadinfo ul.dsw-beslagvoorraad li{
  display:flex;justify-content:space-between;gap:12px;padding:2px 0;margin:0}
.product-essential .dsw_voorraadinfo ul.dsw-beslagvoorraad li:before{content:none}
.product-essential .dsw_voorraadinfo .dsw-bv-naam{color:var(--r-text)}
.product-essential .dsw_voorraadinfo .dsw-bv-ja .dsw-bv-stand{color:var(--r-green-ink);font-weight:800}
.product-essential .dsw_voorraadinfo .dsw-bv-nee .dsw-bv-naam,
.product-essential .dsw_voorraadinfo .dsw-bv-nee .dsw-bv-stand{opacity:.72}

/* ---- prijs ---- */
.product-essential .price-box .special-price .price,
.product-essential .price-box .price{
  }
.product-essential .price-box{margin:6px 0 12px !important}

/* ---- CTA rood, vol-breed ---- */
.product-essential .add-to-cart-buttons{}
.product-essential button.btn-cart,.product-essential button.btn-cart.conversie{
  width:100% !important;background:var(--r-red) !important;border:0 !important;border-radius:13px !important;
  padding:17px 20px !important;box-shadow:0 8px 22px rgba(197,48,47,.24) !important;transition:.15s;cursor:pointer}
.product-essential button.btn-cart:hover{background:var(--r-red-dark) !important}
.product-essential button.btn-cart span,.product-essential button.btn-cart span span{
  color:#fff !important;font-family:var(--r-font);font-size:16.5px !important;font-weight:800 !important;background:none !important;text-transform:none !important}
.product-essential .add-to-links{}
.product-essential .add-to-links a.link-compare{color:var(--r-dark) !important;font-weight:600;font-size:13.5px}

/* ---- USP-lijst ---- */
.product-essential .usps{
  border:1px solid var(--r-border);border-radius:var(--r-radius);background:var(--r-panel);
  padding:15px 18px !important;line-height:2 !important;font-size:13.5px;color:#3f3f5a;margin-top:16px}
.product-essential .usps strong{color:var(--r-text)}
.product-essential .usps .fa{color:var(--r-dark) !important;margin-right:9px;width:18px;text-align:center}
.product-essential .usps .fa-credit-card{color:var(--r-green) !important}

/* ---- bijpassend-mini + ervaring blokjes ---- */
.product-essential ul.viewblocks > li{border:1px solid var(--r-border) !important;border-radius:16px !important;background:#fff}
.product-essential ul.viewblocks .h3title{color:var(--r-text) !important;font-weight:800}
/* v65 (GW 16-7): "Bijpassende producten"-mini hier overbodig — staat al vol onderaan (prijzen + Bestel mee).
   Verbergen; beste review + assortiment-serie blijven als trust/merk-strip. Lege viewblocks → weg (geen loze gap). */
.product-essential ul.viewblocks > li.sep.related-mini{display:none !important}
.product-essential ul.viewblocks:not(:has(> li:not(.related-mini))){display:none !important}
/* v63: viewblocks (Bijpassende producten / assortiment-serie / eerste review) — COMPACTE
   kaart-grid: 2-3 kaarten naast elkaar, links uitgelijnd (niet meer zwevend/volle-breedte-spreiding).
   GW 16-7 "we moeten hier iets mee". Desktop-scoped zodat de mobiele scroll (thema) intact blijft. */
@media (min-width:1025px){
  .product-essential ul.viewblocks{
    flex-wrap:wrap;justify-content:flex-start !important;align-items:stretch;
    gap:20px !important;width:100% !important;max-width:100% !important;margin:26px 0 !important}
  .product-essential ul.viewblocks > li{
    flex:1 1 300px !important;max-width:520px !important;width:auto !important;margin:0 !important;
    padding:22px 24px !important;box-shadow:var(--r-shadow) !important;}
  .product-essential ul.viewblocks > li .h3title{margin:0 0 14px !important;font-size:17px !important}
  /* "Bijpassende producten": thumbnails in een compact 2-koloms mini-grid (zoals oude site) */
  .product-essential ul.viewblocks > li.related-mini{
    grid-template-columns:repeat(2,auto);justify-content:start;
    column-gap:34px;row-gap:18px;align-content:start}
  .product-essential ul.viewblocks > li.related-mini .h3title{grid-column:1 / -1}
  .product-essential ul.viewblocks > li.related-mini > div{margin:0 !important;width:auto !important;min-width:0 !important;text-align:center}
  .product-essential ul.viewblocks > li.related-mini > div a{
    display:flex !important;flex-direction:column;align-items:center;gap:8px;
    text-decoration:none !important;font-size:12px;font-weight:600;line-height:1.3;color:var(--r-muted) !important}
  .product-essential ul.viewblocks > li.related-mini > div a:hover{color:var(--r-dark) !important}
  .product-essential ul.viewblocks > li.related-mini > div img{
    width:82px !important;height:82px !important;max-width:82px !important;
    border:1px solid var(--r-border) !important;border-radius:12px;background:#fff;padding:6px;margin:0 !important;image-rendering:auto !important}
  /* ervaring-blok links uitlijnen (thema zette 'm rechts) */
  .product-essential ul.viewblocks .ervaringklant{text-align:left !important;margin-top:0 !important}
  .product-essential ul.viewblocks .reviewbubble{margin-top:6px}
  /* serie-kaart tekst + nette CTA-knop i.p.v. grijze pill; knop onderaan uitgelijnd */
  .product-essential ul.viewblocks > li{position:relative}
  .product-essential ul.viewblocks .ilink,
  .product-essential ul.viewblocks .flink{
    display:inline-flex !important;align-items:center;gap:6px;margin-top:14px !important;
    background:var(--r-panel) !important;border:1px solid var(--r-border) !important;color:var(--r-dark) !important;
    font-weight:700 !important;font-size:13px !important;padding:9px 15px !important;border-radius:10px !important;
    text-decoration:none !important;transition:.15s;align-self:flex-start}
  .product-essential ul.viewblocks .ilink:hover,
  .product-essential ul.viewblocks .flink:hover{background:var(--r-dark) !important;color:#fff !important;border-color:var(--r-dark) !important}
}

/* ---- PRODUCTKENMERKEN: ul.product-features -> kaart-grid ---- */
.panel.beschrijving ul.product-features{
  list-style:none;margin:24px 0 6px !important;padding:0 !important;
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.panel.beschrijving ul.product-features > li{
  border:1px solid var(--r-border);border-radius:16px;padding:22px 20px !important;margin:0 !important;
  list-style:none;font-size:13.5px;color:#54546e;line-height:1.5;transition:.2s}
.panel.beschrijving ul.product-features > li:hover{transform:translateY(-4px);box-shadow:var(--r-shadow);border-color:#ddd9ea}
.panel.beschrijving ul.product-features > li strong{
  display:block;font-size:15px;font-weight:800;margin-bottom:7px;line-height:1.3}
@media(max-width:1080px){.panel.beschrijving ul.product-features{}}
@media(max-width:560px){.panel.beschrijving ul.product-features{}}

/* ---- panels: rustige typografie + kaders ---- */
.panel.beschrijving,.panel,.garantie.panel,.panel.reviews,.related.panel{
  font-family:var(--r-font)}
.panel h2.kortebeschrijving,.panel .right h3,.panel > .right h3,.garantie.panel h3{
  color:var(--r-text) !important;font-weight:800 !important;letter-spacing:-.01em}
.panel.beschrijving .sdescview strong{color:var(--r-dark) !important}
.panel .specificaties .row{}
.panel .specificaties .row > div:last-child{color:var(--r-text) !important;}

/* ============================================================
   HERINDELING (werkt samen met dsw-pdp-redesign.js)
   ============================================================ */
.product-essential #product_addtocart_form{}

/* vol-breedte tab-balk: JS verplaatst ul.quickview hierheen */
.dsw-rd-tabs{}
.dsw-rd-tabs-in{padding:0 24px;scrollbar-width:none}
.dsw-rd-tabs-in::-webkit-scrollbar{display:none}
.dsw-rd-tabs ul.quickview{}
.dsw-rd-tabs ul.quickview li{}
.dsw-rd-tabs ul.quickview li a{}
.dsw-rd-tabs ul.quickview li a:hover{color:var(--r-dark) !important}
.dsw-rd-tabs ul.quickview li a.dsw-rd-active{}

/* content-secties (panels) op 1300 gecentreerd */
.col-main .panel,.col-main .viewblocks{}

/* beschrijving-inklap open (feature-cards zichtbaar), fade weg */
.product-essential #descoverlay,.product-essential #meerlezen,.panel.beschrijving .sdescoverlay{display:none !important}
.panel.beschrijving .sdescview{height:auto !important;}
/* leesmeer-inklap (Info van fabrikant): display/line-clamp los, INGEKLAPT met fade + eigen toggle */
.product-essential .leesmeer-container .leesmeer-inhoud,
.product-essential .leesmeer-container:not(.open) .leesmeer-inhoud{
  display:block !important;-webkit-line-clamp:unset !important;-webkit-box-orient:initial !important;
  width:auto !important;margin-left:0 !important;position:relative;
  height:auto !important;overflow:hidden !important}
.product-essential .leesmeer-container.dsw-open .leesmeer-inhoud{max-height:none !important;overflow:visible !important}
.product-essential .leesmeer-container .leesmeer-inhoud::after{
  content:"" !important;display:block !important;position:absolute;left:0;right:0;bottom:0;height:120px;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff);pointer-events:none}
.product-essential .leesmeer-container.dsw-open .leesmeer-inhoud::after{display:none !important}
/* GW 27-7: fade-out kleurt mee met de band (wit OF lila var(--r-light)) i.p.v. altijd wit */
.product-essential .leesmeer-container.dsw-band-alt .leesmeer-inhoud::after{background:linear-gradient(180deg,rgba(244,243,249,0),var(--r-light,#f4f3f9)) !important}
.product-essential .leesmeer-container .leesmeer-knop{display:none !important}
.product-essential .leesmeer-container .leesmeer-inhoud[hidden]{display:block !important}
/* GW 12-8-2026 ("de pdp pagina is nu veel te lang"): ALLEEN het fabrikantenblok klapt
   verder in, van 430 naar 240px - dezelfde hoogte die de telefoon al aanhoudt. De 430px
   hierboven blijft staan voor de andere leesmeer-containers (Bijpassende producten,
   Garantie); die zijn niet te lang. Wijzigt deze 240, wijzig dan ook de drempel in
   dsw-pdp-redesign.js 4c - die twee horen bij elkaar. */
@media (min-width:601px){
  .product-essential .leesmeer-container.infofabrikant .leesmeer-inhoud{max-height:240px !important}
  .product-essential .leesmeer-container.infofabrikant.dsw-open .leesmeer-inhoud{max-height:none !important}
}
.dsw-rd-morebtn{display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;background:#fff;border:1.5px solid var(--r-border);
  border-radius:12px;padding:12px 22px;font-weight:700;font-size:14px;color:var(--r-dark);cursor:pointer;font-family:var(--r-font);transition:.15s}
.dsw-rd-morebtn:hover{border-color:#c9c5dd;background:var(--r-panel)}
.dsw-rd-morebtn::after{content:"⌄";font-size:16px;line-height:1;margin-top:-3px}
.dsw-open ~ .dsw-rd-morebtn::after,.dsw-rd-morebtn.open::after{content:"⌃"}

/* ============================================================
   STAP 1 — galerij | koopblok als 2-koloms grid; koopblok = 1 kolom
   (template wikkelt img-box + product-shop in .dsw-rd-grid)
   ============================================================ */
.product-essential #product_addtocart_form{}
.dsw-rd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(430px,470px);gap:48px;max-width:1120px;margin:0 auto;align-items:start;padding:0 var(--cpad,24px)}
.dsw-rd-grid .product-img-box{float:none !important;width:auto !important;margin:0 !important;max-width:none !important}
.dsw-rd-grid .product-shop{display:block !important;float:none !important;width:auto !important;margin:0 !important;padding:0 !important;min-height:0 !important}
.dsw-rd-grid .product-shop *{float:none !important;position:static !important;clear:none !important}
.dsw-rd-grid .product-shop-third,.dsw-rd-grid .cart-desktop,.dsw-rd-grid .cart-wrapper,.dsw-rd-grid #wa-wrap{width:100% !important;max-width:none !important;margin:0 !important;padding:0 !important;display:block !important}
.dsw-rd-grid ul.quickview{display:none !important}          /* wordt vol-breedte tab-balk in stap 2 */
.dsw-rd-grid .buttonsandbrand{display:none}
/* titel bovenin het koopblok (template verplaatst .product-name hierheen) */
.dsw-rd-grid .product-shop .product-name{margin:0 0 4px}
.dsw-rd-grid .product-shop .product-name h1.item.name{font-size:26px !important;font-weight:800 !important;color:var(--r-text) !important;line-height:1.2}

/* ============================================================
   STAP 1b — grid DIRECT op de form: galerij links (spant),
   titel + product-shop + cart-desktop gestapeld in kolom 2
   ============================================================ */
.product-essential #product_addtocart_form{}
.product-essential #product_addtocart_form > .product-name{}
.product-essential #product_addtocart_form > .section,.product-essential #product_addtocart_form > .no-display,.buttonsandbrand{display:none !important}
.product-essential #product_addtocart_form > .product-img-box{}
.product-essential #product_addtocart_form > .product-shop{grid-column:2;grid-row:2;float:none !important;width:auto !important;margin:0 !important;padding:0 !important}
.product-essential #product_addtocart_form > .cart-desktop{grid-column:2;grid-row:3;float:none !important;width:auto !important;margin:0 !important;padding:0 !important}
.product-essential #product_addtocart_form .product-shop *,.product-essential #product_addtocart_form .cart-desktop *{float:none !important;clear:none !important}
.product-essential #product_addtocart_form .product-shop-third,.product-essential #product_addtocart_form #wa-wrap,.product-essential #product_addtocart_form .cart-wrapper{width:100% !important;max-width:none !important}
.product-essential #product_addtocart_form ul.quickview{display:none !important}

/* STAP 1c — auto-flow in kolom 2 (titel boven, dan shop, dan cart), galerij spant kolom 1 */
.product-essential #product_addtocart_form > .product-name{}
.product-essential #product_addtocart_form > .product-img-box{}
.product-essential #product_addtocart_form > .product-shop{grid-row:auto !important}
.product-essential #product_addtocart_form > .cart-desktop{grid-row:auto !important}

/* STAP 1 DEFINITIEF — JS wikkelt rechterkolom in .dsw-rd-buy; grid = galerij | koopblok (2 items) */
.product-essential #product_addtocart_form{display:grid !important;align-items:start}
.product-essential #product_addtocart_form > .product-img-box{float:none !important;width:auto !important;margin:0 !important;max-width:none !important}
.product-essential #product_addtocart_form > .dsw-rd-buy{display:block}
.product-essential #product_addtocart_form > .section,.product-essential #product_addtocart_form > .no-display{display:none !important}
.dsw-rd-buy,.dsw-rd-buy *{float:none !important;clear:none !important}
/* .product-shop staat hier bewust NIET meer bij: die wordt verderop onvoorwaardelijk verborgen
   (`.dsw-rd-buy .product-shop{display:none !important}`), dus een display:block hier was dood
   en misleidend — het suggereerde dat het blok zichtbaar zou zijn. (GW 16-7) */
.dsw-rd-buy .product-shop-third,.dsw-rd-buy #wa-wrap,.dsw-rd-buy .cart-wrapper{margin:0 !important;padding:0 !important;display:block !important;position:static !important}
/* Het oude cart-blok is een LEGE SCHIL: buildBuybox() heeft de koopknop eruit gehaald naar
   .dsw-rd-cta en de vergelijk-link naar de CTA-rij; wat resteert is 560x10px aan lege wrappers
   (#wa-wrap/.fixed/.product-options-bottom) + een verborgen qty-veld. GEMETEN op LG en SMEG:
   0 zichtbare tekst, geen knop, alleen `qty=1`.
   ⚠️ Daarom display:none op de WRAPPER en niet weggooien: een input in een display:none-blok
   wordt nog gewoon met de form meegestuurd, dus qty=1 blijft intact.
   Dit stond al als `cart.style.display='none'` in de JS, maar die inline-style verloor van de
   `display:block !important` die hierboven stond -> de JS-regel deed niets. (GW 16-7) */
.dsw-rd-buy .cart-desktop{display:none !important}
.dsw-rd-buy ul.quickview{display:none !important}
/* .fixed = grijs 12px-strookje bovenaan met leeg #bestel-anker -> neutraliseren, anker blijft in DOM.
   .fixed:has(#bestel) is race-vast (werkt ook als JS-rebuild .fixed kort buiten .dsw-rd-buy zet). */
#product_addtocart_form .fixed,.dsw-rd-buy .fixed,.fixed:has(#bestel){background:transparent !important;min-height:0 !important;height:auto !important;padding:0 !important;margin:0 !important;border:0 !important}
/* ⚠️ #wa-wrap DRAAGT ZELF de klasse `fixed` (gemeten 12-8-2026: `DIV#wa-wrap.fixed`), dus de
   neutralisatie hierboven dooft niet alleen het lege strookje maar de hele mededeling.
   GEMETEN op vijf onbestelbare PDP's - atag-hi26471sv, atag-ox6695c, fulgor-milano-ff48eg-fh48,
   etna-vw743nc, siemens-sn75ex13ce - stonden er per pagina 2 tot 3 tekstblokken op font-size 0px
   en hoogte 0: "Momenteel kunt u dit product niet bestellen. Neem contact met ons op" en
   "Dit artikel is uit het assortiment. Bekijk direct welke ... de opvolger is" - inclusief die
   opvolger-link. De klant las alleen de kop en verder niets.
   Dit is de tweede gedaante van de fout die op 11-8 met display:none is geraakt: toen stond de
   mededeling onzichtbaar in de DOM, nu stond ze er op nul pixels. Alleen het lege strookje mag
   stil zijn, de tekst niet. Specificiteit bewust hoger (2 id's) dan de regel hierboven. */
#product_addtocart_form #wa-wrap.fixed{font-size:15.5px !important;line-height:1.55 !important}
#product_addtocart_form #wa-wrap.fixed h3{font-size:19px !important;line-height:1.25 !important}

.dsw-rd-buy .product-name{margin:0 0 10px}
.dsw-rd-buy .product-name h1.item.name{font-size:26px !important;font-weight:800 !important;line-height:1.2}

/* swatches geforceerd zichtbaar in het koopblok (bundle klapt ze in via max-height) */
.dsw-rd-buy .replacement-swatches{}
.dsw-rd-buy .replacement-swatches-wrapper{}
.dsw-rd-buy .replacement-swatches-list{}

/* swatches: forceer normaal block met breedte (bundle-flex/positie-quirk)
   (`.dsw-rd-buy .product-shop{display:block...}` stond hier: DOOD — het blok wordt verderop
   onvoorwaardelijk verborgen. Weggehaald i.p.v. laten staan, GW 16-7.) */
.dsw-rd-buy .replacement-swatches{position:static !important;width:auto !important;max-width:none !important;max-height:none !important;overflow:visible !important;margin:0 0 16px !important;border:1px solid var(--r-border) !important;border-radius:12px !important;padding:12px 14px !important;background:#fff !important}
.dsw-rd-buy .replacement-swatches-wrapper{position:static !important;margin:0 !important;width:auto !important;display:block !important}
.dsw-rd-buy .replacement-swatches-list{display:flex !important;flex-wrap:wrap !important;overflow:visible !important;width:auto !important;gap:12px !important}
.dsw-rd-buy .replacement-swatches-list li.swatch{flex:0 0 auto !important;width:84px !important;display:block !important;}

/* ============================================================
   VOLLE BREEDTE (GW): grid vult de content; koopblok breder
   ============================================================ */
.product-essential #product_addtocart_form{padding:0 !important}
.product-view.product-essential{max-width:none !important}

/* schoon herbouwd swatch-blok (JS) */
.dsw-rd-buy .replacement-swatches{display:none !important}
.dsw-rd-swatches{margin:0 0 18px}
.dsw-rd-sw-label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--r-dark);margin-bottom:9px}
.dsw-rd-sw-label .cur{text-transform:none;letter-spacing:0;color:var(--r-text);font-weight:700}
.dsw-rd-sw-row{display:flex;gap:12px;flex-wrap:wrap}
.dsw-rd-sw{display:block;width:92px;border:1.5px solid var(--r-border);border-radius:12px;padding:6px;text-align:center;text-decoration:none;color:var(--r-text);transition:.15s}
.dsw-rd-sw:hover{border-color:#d3d0e4}
.dsw-rd-sw.current{border-color:var(--r-dark);box-shadow:0 0 0 1px var(--r-dark)}
.dsw-rd-sw img{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--r-panel);border-radius:8px;display:block}
.dsw-rd-sw span{display:block;font-size:11.5px;font-weight:700;margin-top:5px}

/* ============================================================
   GW: galerij houdt breedte, koopblok BREDER (rust) + tab-balk + sticky bar
   ============================================================ */
.product-essential #product_addtocart_form{}

/* vol-breedte tab-balk (JS verplaatst quickview) — duidelijk + goed zichtbaar */
.dsw-rd-tabs{clear:both;}
.dsw-rd-tabs-in{scrollbar-width:none}
.dsw-rd-tabs-in::-webkit-scrollbar{display:none}
.dsw-rd-tabs ul.quickview{list-style:none;margin:0 !important;padding:0 !important;border:0 !important;background:none !important;box-shadow:none !important;white-space:nowrap;}
.dsw-rd-tabs ul.quickview li{margin:0 !important;float:none !important;border:0 !important;background:none !important;display:block !important}
.dsw-rd-tabs ul.quickview li a{display:block;color:#3f3f5a !important;border-bottom:3px solid transparent;text-decoration:none !important;}
.dsw-rd-tabs ul.quickview li a:hover{color:var(--r-dark) !important;background:var(--r-light)}
.dsw-rd-tabs ul.quickview li a.dsw-rd-active{color:var(--r-dark) !important;border-bottom-color:var(--r-dark)}

/* ---- CHAT-WIDGET (Trengo) vs. de sticky koopbalk (GW 16-7) ----
   De chat hangt rechtsonder VÓÓR de balk en dekte de "In winkelwagen"-knop af:
   gemeten .TrengoWidgetLauncher__iframe = bottom:20px right:20px (60x60, z-index 2147483550)
   en .TrengoOnlineStatus__iframe (de "Hulp of advies nodig?"-teaser) = bottom:8px right:80px
   (300x80). De koopbalk is 73px hoog op bottom:0 → beide vielen erbovenop.
   Zolang de balk zichtbaar is (.show) schuiven we de chat 73px omhoog, met dezelfde .3s
   timing als de balk zelf. Zonder :has()-support verandert er niets (= huidige situatie). */
body:has(.dsw-rd-sticky.show) .TrengoWidgetLauncher__iframe{bottom:93px !important}
body:has(.dsw-rd-sticky.show) .TrengoOnlineStatus__iframe{bottom:81px !important}
.TrengoWidgetLauncher__iframe,.TrengoOnlineStatus__iframe{transition:bottom .3s ease}
/* de scroll-naar-boven-knop zit in dezelfde hoek */
body:has(.dsw-rd-sticky.show) #scrollup{bottom:95px !important;transition:bottom .3s ease}

/* sticky koopbalk onderin */
.dsw-rd-sticky{position:fixed;left:0;right:0;bottom:0;z-index:9998;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--r-border);box-shadow:0 -8px 30px rgba(35,35,80,.13);transform:translateY(110%);transition:transform .3s}
.dsw-rd-sticky.show{transform:translateY(0)}
.dsw-rd-sticky-in{display:flex;align-items:center;gap:18px;max-width:1560px;margin:0 auto;padding:11px 24px}
.dsw-rd-sticky .st-thumb{width:50px;height:50px;border:1px solid var(--r-border);border-radius:10px;padding:4px;flex:none;background:#fff}
.dsw-rd-sticky .st-thumb img{width:100%;height:100%;object-fit:contain}
.dsw-rd-sticky .st-t{font-weight:800;font-size:15px;color:var(--r-text);display:block}
.dsw-rd-sticky .st-badge{font-size:12px;font-weight:800;color:var(--r-green-ink);background:var(--r-green-soft);padding:2px 9px;border-radius:99px;display:inline-block;margin-top:3px}
.dsw-rd-sticky .st-sp{flex:1}
.dsw-rd-sticky .st-p{font-size:22px;font-weight:900;color:var(--r-text);white-space:nowrap}
.dsw-rd-sticky .st-cta{background:var(--r-red);color:#fff;border:0;border-radius:12px;padding:14px 30px;font-weight:800;font-size:15px;cursor:pointer;font-family:var(--r-font)}
.dsw-rd-sticky .st-cta:hover{background:var(--r-red-dark)}

/* ============================================================
   FINAL DESIGN — achtergrondkleur + rust (mockup opzet-7)
   Top (galerij+koopblok) op lila; content in een witte band.
   Route-gescoped geladen (alleen product/view) → body/main veilig.
   ============================================================ */
:root{--r-content:1300px;--r-cpad:28px}

/* content-gebied = lila; header/footer ongemoeid */
body.catalog-product-view .main-container.col1-layout{background:var(--r-light) !important}
body.catalog-product-view .main-container.col1-layout .main,
body.catalog-product-view .main-container.col1-layout .col-main{background:transparent !important}

/* breadcrumbs op lila: rustig, gecentreerd op contentbreedte */
body.catalog-product-view .breadcrumbs{max-width:var(--r-content);margin:0 auto !important;padding:16px var(--r-cpad) 4px !important;background:transparent !important;border:0 !important}
body.catalog-product-view .breadcrumbs ul{font-size:13px;color:var(--r-muted)}
body.catalog-product-view .breadcrumbs a{color:var(--r-muted) !important}

/* TOP: galerij + koopblok gecentreerd met lucht op de lila */
.product-essential #product_addtocart_form{
  
  }

/* galerij: schone witte kaart, rustige rand */
.product-essential #product_addtocart_form > .product-img-box{
  background:#fff;border:1px solid var(--r-border);border-radius:22px;padding:22px;box-shadow:var(--r-shadow)}
.product-essential .product-image-gallery .gallery-image{border:0 !important;box-shadow:none !important}
.product-essential .more-views{margin-top:14px !important}

/* koopblok: iets meer lucht tussen de blokken (rust) */
.dsw-rd-buy > *{margin-bottom:0}
.dsw-rd-buy .product-name{margin:0 0 14px}
.dsw-rd-buy .product-name h1.item.name{font-size:30px !important;letter-spacing:-.02em}
.dsw-rd-swatches{margin:0 0 20px}
.product-essential .product-options{}

/* TAB-BALK: vol-breedte witte strook (full-bleed), inhoud gecentreerd */
.dsw-rd-tabs{
  border-top:1px solid var(--r-border);border-bottom:1px solid var(--r-border);
  }
.dsw-rd-tabs-in{gap:2px;scrollbar-width:none}
.dsw-rd-tabs ul.quickview li a{}

/* CONTENT-BAND: witte volle-breedte band achter alle secties (full-bleed ::before) */
.col-main .panel,.col-main .viewblocks{position:relative;background:transparent !important;border:0 !important;
  margin:0 auto !important;padding:44px var(--r-cpad) !important;box-shadow:none !important}
.col-main .panel::before,.col-main .viewblocks::before{content:"";position:absolute;z-index:0;top:0;bottom:-1px;
  left:50%;margin-left:-50vw;width:100vw;background:#fff;border-bottom:1px solid var(--r-border)}
.col-main .panel > *,.col-main .viewblocks > *{position:relative;z-index:1}
.col-main .related.panel::before,.col-main .viewblocks:last-of-type::before{border-bottom:0}

/* sectiekoppen groot en rustig (mockup .blk h2) */
.col-main .panel h2,.col-main .panel > header h2,.col-main .panel .kortebeschrijving{
  font-weight:800 !important;color:var(--r-text) !important;}

/* feature-cards binnen de witte band: lila-getinte kaartjes zodat ze uit het wit komen */
.panel.beschrijving ul.product-features > li{background:var(--r-panel);}

/* algemene tekst-rust in de band */
.col-main .panel p,.col-main .panel li{color:#45455f}

/* ===== DIEPTE (zonder band-alternatie/rood accent — die splitsten koppen + verwarden) ===== */
.panel.beschrijving ul.product-features > li,.dsw-rd-warr-card{box-shadow:var(--r-shadow) !important}
/* DOWNLOADS: schone verticale kaarten (fix: titels liepen over de kaarten) */
/* GW 16-7: vaste kolom-breedte + links gepakt zodat 2 PDF's NIET ver uit elkaar staan (auto-fit-1fr rekte ze uit) */
.col-main .panel .downloadscroll{display:grid !important;overflow:visible;}
.col-main .panel .downloadscroll li{}
.col-main .panel .downloadscroll li a.universal-link{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  background:#fff;border:1px solid var(--r-border);border-radius:14px;padding:20px 18px 22px;box-shadow:var(--r-shadow);
  text-decoration:none !important;color:var(--r-text) !important;font-size:12.5px;font-weight:700;line-height:1.35;height:100%;transition:.15s}
.col-main .panel .downloadscroll li a.universal-link:hover{border-color:#cfcbe6;transform:translateY(-3px)}
/* GW 16-7: PDF-thumbnail meer ruimte -> breder + ruimer wit kader eromheen */
.col-main .panel .downloadscroll li a.universal-link img.image{width:100%;height:auto;background:#fff;padding:6px;border:1px solid var(--r-border);border-radius:10px;box-shadow:0 1px 4px rgba(35,35,80,.05)}

/* ===== v40 CLEANUP (GW-review) ===== */
/* BEZORGOPTIES: vlakke, rustige, UNIFORM WITTE kaarten (was: grijze .label-span binnen witte kaart = tweekleuren-strook) */
.product-essential .options-list > li{
  align-items:center !important}
.product-essential .options-list > li .label{flex:1 1 auto;width:100% !important}
.product-essential .options-list > li:has(input:checked){box-shadow:none !important}
.product-essential .options-list > li .label{background:transparent !important;background-color:transparent !important;margin:0 !important;padding:0 !important;display:block}
.product-essential .options-list > li .label label{font-size:14.5px !important;font-weight:600 !important;padding:0 66px 0 0 !important;margin:0 !important;}
/* BIJPASSENDE PRODUCTEN: grid met tussenruimte + gelijke hoogte (waren tegen elkaar + scheef) */
.product-essential .panel.related ul.relatedscroll{
  display:grid !important;grid-template-columns:repeat(auto-fill,minmax(176px,1fr)) !important;gap:16px !important;
  list-style:none;margin:14px 0 0 !important;padding:0 !important;overflow:visible !important}
.product-essential .panel.related ul.relatedscroll > li{
  width:auto !important;margin:0 !important;padding:16px 14px 14px !important;list-style:none;float:none !important;
  border:1px solid var(--r-border);border-radius:14px;background:#fff;box-shadow:var(--r-shadow);
  display:flex !important;flex-direction:column;transition:.15s}
.product-essential .panel.related ul.relatedscroll > li:hover{border-color:#cfcbe6;transform:translateY(-3px)}
/* MAATTEKENING: gewoon de tekening zelf ronde hoeken + schaduw (op de lila achtergrond);
   flex + gap zodat meerdere tekeningen netjes naast elkaar met tussenruimte staan */
.product-essential .panel.maattekening .maattekeningscroll{
  list-style:none;margin:14px 0 0;padding:0;display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
.product-essential .panel.maattekening .maattekeningscroll li{list-style:none;margin:0}
.product-essential .panel.maattekening .maattekeningscroll li a{display:block;line-height:0}
/* GW 16-7: maattekening altijd witte achtergrond + ruime padding (lucht rondom de tekening) */
.product-essential .panel.maattekening .maattekeningscroll img{
  display:block;max-width:min(100%,520px);height:auto;background:#fff;border-radius:16px;
  padding:28px;box-sizing:border-box;border:1px solid var(--r-border);box-shadow:var(--r-shadow)}

/* ===== v44 ===== */
/* grijze #f6f7f8 achter de opties weg -> witte kaarten op de schone (consistente) achtergrond */
.dsw-rd-extras .product-options,.dsw-rd-extras #product-options-wrapper{background:transparent !important;background-image:none !important}
/* (GW) background van het label zelf ook weg -> rustiger */
.product-view .option ul.options-list li span.label label{background:transparent !important;background-image:none !important}
/* BEZORGOPTIES strak zoals mockup: ÉÉN vloeiende lijst — sub-groep-koppen (BEZORGOPTIES/AANSLUITMATERIAAL) weg */
.dsw-rd-extras .product-options .option dl dt{display:none !important}
.dsw-rd-extras .product-options .option dl{margin:0 !important}
.dsw-rd-extras .product-options .option{}
/* alternerende band-achtergrond (spanning) — JS zet .dsw-band-alt op alleen de panels.
   ⛔ NIET vervangen door `:nth-child(even of .panel)` — GEPROBEERD EN GEMETEN (GW 16-7):
      - `element.matches('.col-main .panel:nth-child(even of .panel)')`  -> true
      - `CSS.supports('selector(:nth-child(even of .panel))')`           -> true
      - dezelfde selector als CSS-REGEL met `background:red !important`  -> schildert NIET
      - dezelfde regel met een gewone class                              -> schildert wel
   De style-engine past `of S` hier dus niet toe terwijl de selector-API én de support-check
   "ja" zeggen. Resultaat was: alle banden wit (ABABABABA -> AAAAAAAAA). Dit is het bewijs dat
   niet elke JS->CSS-omzetting winst is; deze JS-lus blijft. */
.col-main .panel.dsw-band-alt::before{background:var(--r-light) !important}
/* ALTERNATIEVEN: alle kaarten in EEN rij (auto-flow column) -> 5e wrapt niet meer eronder.
   Elk gelijk breed (1fr, min 190px); scrollt horizontaal alleen als het echt niet past. */
.product-essential .panel.upsells .right > .content{display:grid !important;grid-auto-flow:column !important;grid-auto-columns:minmax(190px,1fr) !important;grid-template-columns:none !important;gap:16px !important;align-items:stretch;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.product-essential .panel.upsells .content > .upsell{scroll-snap-align:start}
.product-essential .panel.upsells .content > .clearer{display:none !important}
.product-essential .panel.upsells .content > .upsell{float:none !important;width:auto !important;margin:0 !important;
  background:#fff;border:1px solid var(--r-border);border-radius:16px;padding:16px 14px;box-shadow:var(--r-shadow);min-width:0}
.product-essential .panel.upsells .content > .upsell .reason{
  font-weight:800 !important;font-size:11.5px !important;text-transform:uppercase;letter-spacing:.05em;color:var(--r-muted) !important;text-align:center;margin:0 0 12px !important}
.product-essential .panel.upsells .content > .upsell:nth-child(3){border-color:var(--r-dark) !important;box-shadow:0 0 0 1.5px var(--r-dark),var(--r-shadow) !important}
/* groene Levering/voorraad-blokken niet full-width/idioot breed */
.product-essential .panel.cta .dsw_voorraadinfo{max-width:440px !important}
.product-essential .dsw_voorraadinfo{max-width:100%}

/* ===== v47 zelf-review-fixes ===== */
/* blauwe thema-knoppen -> redesign-donker (Stel uw eigen vraag, Bekijk product…; NIET de rode CTA).
   v65: van `.col-main .panel` naar `.panel` verbreed — "Stel uw eigen vraag" zat buiten col-main en bleef blauw. */
.product-essential .panel button.button:not(.conversie):not(.btn-cart):not(.prijsaanvraagbutton),
.product-essential .panel a.button:not(.conversie):not(.btn-cart){
  background:var(--r-dark) !important;border:0 !important;border-radius:11px !important;
  font-weight:700 !important;text-transform:none !important;letter-spacing:0 !important;box-shadow:none !important}
.product-essential .panel button.button:not(.conversie):not(.btn-cart):not(.prijsaanvraagbutton):hover,
.product-essential .panel a.button:not(.conversie):not(.btn-cart):hover{background:var(--r-deep) !important}
/* ALTERNATIEVEN: top-uitgelijnd (geen lege bodems), naam consistente hoogte -> prijs lijnt uit; groene badge kleiner */
.product-essential .panel.upsells .right > .content{align-items:stretch !important}
.product-essential .panel.upsells .content > .upsell{padding-bottom:18px !important}
.product-essential .panel.upsells .upsell .upsell-title{
  min-height:44px !important;display:flex !important;align-items:center;justify-content:center;text-align:center;
  font-weight:700 !important;font-size:14.5px !important;margin:6px 0 8px !important}
/* groene voorraad-badge: van grote box -> compacte pill */
.product-essential .panel.upsells .upsell .voorraadstatus{background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important;margin:8px 0 !important;text-align:center}
.product-essential .panel.upsells .upsell .voorraadstatus .dsw_voorraadinfo{
  display:inline-flex !important;align-items:center;gap:6px;max-width:none !important;
  padding:5px 12px !important;font-size:12px !important;font-weight:700 !important;line-height:1.2;
  background:var(--r-green-soft,#eaf6e8) !important;border:1px solid #bfe3b8 !important;border-radius:999px !important;color:var(--r-green-ink,#2b8a26) !important}
/* cycle-slideshow op AUTO-hoogte: alleen de actieve slide relatief tonen -> kaart krimpt naar content, geen lege bodems */
.product-essential .panel.upsells .cycle-slideshow{height:auto !important;min-height:0 !important;position:relative !important}
.product-essential .panel.upsells .cycle-slideshow > .cycle-slide{position:relative !important;display:none !important;top:auto !important;left:auto !important;opacity:1 !important;visibility:visible !important;width:100% !important;height:auto !important;min-height:0 !important}
.product-essential .panel.upsells .cycle-slideshow > .cycle-slide.cycle-slide-active{display:block !important}

/* ============================================================
   v58: ALTERNATIEVEN — rijen gelijk uitlijnen + ▲▼-pijltjes terug (GW 16-7)
   Vaste zone-hoogtes bóven .differences -> spec-rijen starten op dezelfde y
   op elke kaart (huidig product 'gelijk getrokken' aan de rest).
   ============================================================ */
.product-essential .panel.upsells .content > .upsell{position:relative !important}
.product-essential .panel.upsells .upsell .img-container{
  height:196px !important;display:flex !important;align-items:center;justify-content:center;margin:2px auto 8px !important}
.product-essential .panel.upsells .upsell .img-container img,
.product-essential .panel.upsells .upsell img.upsellimages{
  max-height:190px !important;max-width:100% !important;width:auto !important;height:auto !important;object-fit:contain;margin:0 auto !important}
.product-essential .panel.upsells .upsell .upsell-title{min-height:44px !important}
.product-essential .panel.upsells .upsell .price-box{min-height:30px !important;margin:2px 0 8px !important;text-align:center}
.product-essential .panel.upsells .upsell .voorraadstatus{min-height:36px !important;display:flex !important;align-items:center;justify-content:center;margin:0 0 6px !important}
.product-essential .panel.upsells .upsell .review{min-height:26px !important;display:flex !important;align-items:center;justify-content:center;margin:0 0 10px !important}
.product-essential .panel.upsells .upsell .differences{margin-top:0 !important}
/* huidig-product (kaart 3) start 30px hoger + img-container 14px hoger dan de cycle-kolommen
   -> exact gelijk trekken zodat de spec-rijen op één lijn lopen (GW 16-7) */
.product-essential .panel.upsells .content > .upsell:nth-child(3) .cycle-slideshow{margin-top:30px !important}
.product-essential .panel.upsells .content > .upsell:nth-child(3) .img-container{height:196px !important;max-height:196px !important;overflow:hidden}

/* ▲▼-navigatiepijlen terug: ronde witte knoppen rechts (verticale carousel).
   GEEN display-override (thema toont/verbergt ze o.b.v. #slides) -> chevron via ::before absoluut gecentreerd. */
.product-essential .panel.upsells .upsell .nav.cycle-prev,
.product-essential .panel.upsells .upsell .nav.cycle-next{
  width:34px !important;height:34px !important;left:50% !important;right:auto !important;margin-left:-17px !important;
  opacity:1 !important;border-radius:50% !important;background:#fff !important;
  border:1px solid var(--r-border) !important;box-shadow:0 2px 8px rgba(35,35,80,.14) !important;
  z-index:6 !important;transition:.15s}
.product-essential .panel.upsells .upsell .nav.cycle-prev{top:38px !important;bottom:auto !important;transform:none !important}
.product-essential .panel.upsells .upsell .nav.cycle-next{bottom:14px !important;top:auto !important;transform:none !important}
.product-essential .panel.upsells .upsell .nav.cycle-prev::before,
.product-essential .panel.upsells .upsell .nav.cycle-next::before{
  content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;
  border:solid var(--r-dark);border-width:2.5px 2.5px 0 0}
.product-essential .panel.upsells .upsell .nav.cycle-prev::before{transform:translate(-50%,-30%) rotate(-45deg)}
.product-essential .panel.upsells .upsell .nav.cycle-next::before{transform:translate(-50%,-70%) rotate(135deg)}
.product-essential .panel.upsells .upsell .nav.cycle-prev:hover,
.product-essential .panel.upsells .upsell .nav.cycle-next:hover{background:var(--r-dark) !important}
.product-essential .panel.upsells .upsell .nav.cycle-prev:hover::before,
.product-essential .panel.upsells .upsell .nav.cycle-next:hover::before{border-color:#fff}

/* BIJPASSENDE: naam vaste hoogte zodat prijs + "Bestel mee" uitlijnen over de kaarten */
.product-essential .panel.related ul.relatedscroll > li a:not(.product-image){
  display:block;min-height:38px;font-size:13px;line-height:1.35;text-align:center;color:var(--r-text) !important}

/* WIST-U-DAT: zwevende oranje sprite-tooltip -> schone in-flow info-kaart (geen overlap met de tab-balk) */
.product-essential .wistudat{float:none !important;margin:0 0 18px !important;display:flex !important;align-items:center;gap:14px;
  max-width:560px;background:var(--r-light);border:1px solid var(--r-border);border-radius:14px;padding:14px 16px;
  color:#45455f;font-size:13.5px;line-height:1.5}
.product-essential .wistudat .productpage-wist-u-dat{flex:none}

/* ---- tab-balk: alle 10 links passend + gelijkmatig verdeeld ---- */
.dsw-rd-tabs-in{scrollbar-width:none}
.dsw-rd-tabs ul.quickview{display:flex !important;justify-content:space-between !important;gap:0 !important;width:100% !important}
.dsw-rd-tabs ul.quickview li a{padding:17px 11px !important;font-size:13.5px !important;font-weight:700 !important;white-space:nowrap}

/* ---- "Voeg toe aan vergelijker": subtiel i.p.v. zware blauwe balk ---- */
.dsw-rd-buy .add-to-links,.dsw-rd-buy ul.add-to-links{background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;margin:10px 0 0 !important;text-align:center;list-style:none}
.dsw-rd-buy .add-to-links li{background:none !important;border:0 !important;margin:0 !important;padding:0 !important;list-style:none}
/* Vergelijk-knop: COMPACT, op dezelfde rij als de CTA (GW 16-7).
   Deze selector (0,2,1) is bewust de ENIGE die 'm stylet: het thema zet
   `a.link-compare{width:100%;display:block}` in alle drie z'n media queries (dsw-product.css
   r930/940/950) en dat wint van een losse .dsw-rd-save (0,1,0). Daarom hier geankerd i.p.v.
   een tweede, zwakkere regel ernaast -- die vocht en verloor. */
.dsw-rd-buy .dsw-rd-cta a.link-compare{
  flex:0 0 auto;width:auto !important;
  display:inline-flex !important;align-items:center;justify-content:center;gap:7px;
  margin:0 !important;background:#fff !important;color:var(--r-dark) !important;
  border:1.5px solid var(--r-border) !important;border-radius:13px !important;box-shadow:none !important;
  padding:0 17px !important;font-weight:700 !important;font-size:14px !important;line-height:1.2 !important;
  text-align:center !important;text-decoration:none !important;white-space:nowrap;transition:.15s}
.dsw-rd-buy .dsw-rd-cta a.link-compare::before{content:"⇄";color:var(--r-muted);font-size:16px;font-weight:800;line-height:1}
.dsw-rd-buy .dsw-rd-cta a.link-compare:hover{border-color:#c9c5dd !important;background:var(--r-panel) !important}
.dsw-rd-buy .dsw-rd-cta a.link-compare:hover::before{color:var(--r-dark)}
/* smal scherm: alleen het ⇄-icoon (het label zou de CTA-tekst verdringen); a11y via aria-label/title */
@media(max-width:560px){
  .dsw-rd-buy .dsw-rd-cta a.link-compare{padding:0 14px !important;font-size:0 !important;gap:0}
  .dsw-rd-buy .dsw-rd-cta a.link-compare::before{font-size:17px}
  /* De CTA wordt smaller doordat Vergelijk ernaast staat: GEMETEN brak "In winkelwagen — € 549,-"
     daardoor over 2 regels (nodig 232px, beschikbaar 216px). Iets kleiner + nowrap = 1 regel. */
  .dsw-rd-buy .dsw-rd-cta button.btn-cart{padding:13px 12px !important;gap:6px}
  .dsw-rd-buy .dsw-rd-cta button.btn-cart span,
  .dsw-rd-buy .dsw-rd-cta button.btn-cart span span,
  .dsw-rd-buy .dsw-rd-cta .dsw-rd-cta-amt{font-size:15px !important;white-space:nowrap}
}
/* < 375px (iPhone SE): ook 15px past niet meer -> bedrag uit de knop. Geen informatieverlies:
   de prijs staat direct boven de knop in het prijsblok. */
@media(max-width:374px){
  .dsw-rd-buy .dsw-rd-cta .dsw-rd-cta-amt{display:none !important}
}

/* ---- tab-balk FIX: full-bleed witte band via ::before, bar zelf normaal ---- */
.dsw-rd-tabs{width:auto !important;position:sticky !important;top:0;left:auto !important;right:auto !important;
  margin:8px 0 0 !important;background:transparent !important;border:0 !important;box-shadow:none !important;z-index:60}
.dsw-rd-tabs::before{content:"";position:absolute;top:0;bottom:0;left:50%;margin-left:-50vw;width:100vw;z-index:0;
  background:#fff;border-top:1px solid var(--r-border);border-bottom:1px solid var(--r-border);box-shadow:0 6px 18px rgba(35,35,80,.05)}
.dsw-rd-tabs-in{position:relative;z-index:1;margin:0 auto;padding:0 var(--r-cpad);
  display:flex;justify-content:space-between;overflow-x:auto;scrollbar-width:none}
.dsw-rd-tabs-in::-webkit-scrollbar{display:none}

/* ============================================================
   STANDAARD-ALIGNMENT met mockup opzet-7
   ============================================================ */

/* mageworx "Meer/Minder opties" toggle weg (opties staan al open) */
.dsw-rd-buy #alloptions,.dsw-rd-buy #minderoptions{display:none !important}

/* ...en dan ook de AFKNIP weghalen die die toggle moest openen (GW 19-8-2026).
   dsw_product.js (r300-313 en r331-341) zet op een optieblok hoger dan 360px
   max-height:220px + overflow:hidden, toont een witte gradient (#optionsoverlay)
   en zet #alloptions op display:block. De regel hierboven verbergt juist die knop,
   dus stond de afknip er zonder enige manier om hem te openen - geen scrollbalk
   (overflow:hidden), alleen een lege witte strook.
   GEMETEN 19-8 op /quooker-combi-plus-front-rvs: 220px zichtbaar van 501px inhoud,
   5 van de 7 optieregels onbereikbaar (CUBE incl. montage 849,-, energieverdeler 89,-
   en drie verlengsets). Shopbreed 1.605 actieve, zichtbare producten - vooral
   fornuizen en kookplaten met veel kleur- en montage-opties. Op 390px is het erger:
   525px inhoud tegen dezelfde 220px.
   Alles tonen kost de winkelwagenknop geen positie: in het redesign staan de opties
   ONDER de CTA (titel -> prijs -> levering -> CTA -> bezorgopties -> usp's), dus
   alleen het USP-blok schuift. !important is nodig omdat dsw_product.js de
   max-height INLINE zet. */
.dsw-rd-buy #product-options-wrapper{max-height:none !important;overflow:visible !important}
.dsw-rd-buy #optionsoverlay{display:none !important}
.dsw-rd-buy .product-options p:has(> i.fa-angle-down),
.dsw-rd-buy .product-options p:has(> i.fa-angle-up){}

/* SPECIFICATIES → compacte 2-koloms tabel (mockup) via CSS grid (paart netjes) */
.col-main .panel .specificaties.content{display:grid !important;grid-template-columns:1fr 1fr;column-gap:60px;row-gap:0;margin-top:6px}
.col-main .panel .specificaties.content .row{
  display:flex !important;justify-content:space-between;gap:22px;align-items:baseline;float:none !important;
  padding:13px 4px !important;border-bottom:1px solid var(--r-border) !important;margin:0 !important;background:transparent !important;width:auto !important}
.col-main .panel .specificaties.content .row > div:first-child{color:var(--r-muted);font-size:14.5px;line-height:1.4;padding:0 !important}
.col-main .panel .specificaties.content .row > div:last-child{font-weight:700;font-size:14.5px;text-align:right;white-space:normal;padding:0 !important}
.col-main .panel .specificaties.content .row .fa-question-circle{color:var(--r-faint);margin-left:6px;cursor:pointer;font-weight:400}
@media(max-width:820px){.col-main .panel .specificaties.content{grid-template-columns:1fr !important;column-gap:0}}

/* ============================================================
   SPECIFICATIES-INKLAP (GW 12-8-2026: "de pdp pagina is nu veel te lang")
   Gemeten /aeg-tr9hamburg @1440: 22 rijen = 950px paneel, alles open.

   Geen JavaScript: attributes.phtml zet een onzichtbare checkbox VOOR de tabel en
   `.dsw-spec-rij-verborgen` op rij 11 en verder. De pagina start dus al kort - er
   wordt niets zichtbaar getekend en daarna weggehaald (dat kost layout-shift), en
   hij werkt ook als de JS-bundel niet laadt.

   Alleen vanaf 601px. Daaronder draait dsw-mobile.js met zijn eigen top-8 + drawer;
   die twee mogen elkaar niet in de weg zitten.
   ============================================================ */
/* 🚨 De lange selector is nodig, niet netjes bedoeld: het thema heeft
   `.product-view .panel input{width:13px;height:13px;transform:scale(1.6);position:relative}`
   (0-2-1) en dat wint van een kale `.dsw-spec-schakel` (0-1-0). Gemeten gevolg: de
   schakelaar was wél onzichtbaar (clip-path) maar hield 21x21px ruimte boven de tabel.
   `transform:none` hoort erbij - `scale()` op een 1px-vakje laat hem weer groeien. */
.col-main .panel .right input.dsw-spec-schakel{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;transform:none;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* 🚨 Ook hier is de lange selector nodig: het thema heeft
   `.product-view .panel label{display:block;font-size:13px;font-weight:400;margin-top:10px;
   color:var(--brand);padding-left:15px;text-indent:-15px}` (0-2-1). Een kale
   `.dsw-spec-meer{display:none}` (0-1-0) verliest dáárvan - gemeten: op 390px stond de
   knop gewoon zichtbaar MET beide opschriften onder elkaar. De `text-indent:-15px`
   sijpelde bovendien op desktop door in de knoptekst; die zetten we hieronder terug. */
.col-main .panel .right .dsw-spec-meer{}

@media (min-width:601px){
  /* De verbergregel heeft MET OPZET meer klassen dan
     `.col-main .panel .specificaties.content .row{display:flex !important}` hierboven.
     Beide zijn !important en die staat 5 klassen diep; bij gelijke specificiteit wint
     de laatste regel in de bundel, en die volgorde is niets om op te bouwen. */
  .col-main .panel .right .dsw-spec-schakel:not(:checked) ~ .specificaties.content .row.dsw-spec-rij-verborgen{display:none !important}

  /* zelfde vorm als .dsw-rd-morebtn hierboven, zodat de twee knoppen onder elkaar
     (specificaties + info van fabrikant) er identiek uitzien */
  .col-main .panel .right .dsw-spec-meer{
    display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;background:#fff;
    border:1.5px solid var(--r-border);border-radius:12px;padding:12px 22px;
    font-weight:700;font-size:14px;line-height:normal;color:var(--r-dark);cursor:pointer;
    text-indent:0;font-family:var(--r-font);transition:.15s;-webkit-user-select:none;user-select:none}
  .col-main .panel .right .dsw-spec-meer:hover{border-color:#c9c5dd;background:var(--r-panel)}
  /* 🚨 `⌄` (U+2304) zit NIET in Inter en valt terug op een glyph van 2px breed die buiten
     zijn eigen vakje tekent - gemeten. Zonder een vaste breedte schuift de tekst er
     bovenop zodra hij wat langer is ("... (22)"). Daarom flex:0 0 12px + centreren.
     Dezelfde kwaal zit in .dsw-rd-morebtn hierboven; die valt niet op omdat zijn
     opschrift korter is. Bewust niet meegewijzigd - dat raakt ook garantie en related. */
  .col-main .panel .right .dsw-spec-meer::after{
    content:"\2304";font-size:16px;line-height:1;margin-top:-3px;
    flex:0 0 12px;width:12px;text-align:center}
  .col-main .panel .right .dsw-spec-schakel:checked ~ .dsw-spec-meer::after{content:"\2303";margin-top:1px}
  .col-main .panel .right .dsw-spec-schakel:not(:checked) ~ .dsw-spec-meer .dsw-spec-meer__open{display:none}
  .col-main .panel .right .dsw-spec-schakel:checked ~ .dsw-spec-meer .dsw-spec-meer__dicht{display:none}
  /* de checkbox is onzichtbaar, dus de focusring moet op het label komen - anders is
     er met een toetsenbord niet te zien waar je staat */
  .col-main .panel .right .dsw-spec-schakel:focus-visible ~ .dsw-spec-meer{
    outline:2px solid var(--r-dark);outline-offset:3px}
}

/* ============================================================
   BESCHRIJVING + ALTERNATIEVEN klappen ook in (GW 12-8-2026, tweede ronde:
   "ik wil toch dat je beide blokken inklapt")

   Gemeten @1440 op /aeg-tr9hamburg: Beschrijving 1.259px, Alternatieven 1.446px -
   samen 27% van alle blokhoogte. Zelfde machinerie als de specificatietabel: een
   onzichtbare checkbox + <label>, geen JavaScript, alleen vanaf 601px.

   Het alternatievenblok gaat HELEMAAL dicht en niet gedeeltelijk: de hoogte komt van
   vier kaarten van elk 1.126px náást elkaar, en een klem op de hoogte zou dwars door
   de kaarten snijden - juist de prijs (offset 963) en de bestelknop verdwijnen dan.
   ============================================================ */
/* `input.` erbij om dezelfde reden als bij .dsw-spec-schakel: het thema heeft
   `.product-view .panel input{width:13px;height:13px;transform:scale(1.6)}` */
.col-main .panel input.dsw-desc-schakel,
.col-main .panel input.dsw-alts-schakel{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;transform:none;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.col-main .panel .dsw-desc-knop,
.col-main .panel .dsw-alts-knop{display:none}

/* ============================================================
   Onder 601px hoort de schakelaar er HELEMAAL niet te zijn (2-9-2026)
   ------------------------------------------------------------
   De drie inklap-schakelaars staan altijd in de HTML en worden visueel weggehaald met
   de screenreader-cliptruc hierboven. Die truc houdt ze met opzet FOCUSBAAR - alleen
   klopt dat onder 601px niet meer: daar staan `.dsw-desc-knop`, `.dsw-alts-knop` en
   `.dsw-spec-meer` op display:none (de CSS-inklap geldt pas vanaf 601px, want daaronder
   doet dsw-mobile.js zijn eigen inklap). Er bleven dus drie onzichtbare tabstops van
   1x1px over die NIETS doen, en axe meldt precies dat:
   "Form element has explicit <label> that is hidden" -> Lighthouse a11y 95 i.p.v. 100
   op elke PDP, mobiel. Desktop stond al op 100, want daar is de knop wel zichtbaar.

   Vandaar de spiegel van de 601px-grens en niet een aria-label: een naam plakken op een
   bedieningselement dat niets bedient lost de melding op en laat het probleem staan.
   ============================================================ */
@media (max-width:600px){
  .col-main .panel input.dsw-desc-schakel,
  .col-main .panel input.dsw-alts-schakel,
  .col-main .panel .right input.dsw-spec-schakel{display:none}
}

@media (min-width:601px){
  /* ---- Beschrijving: klem op 240px, gelijk aan Info van fabrikant ---------------- */
  /* moet `.panel.beschrijving .sdescview{max-height:none !important}` hierboven (r.298)
     verslaan; die zet de inklap van het thema uit. Vandaar de diepere selector. */
  .col-main .panel.beschrijving .dsw-desc-schakel:not(:checked) ~ .sdescview{
    max-height:240px !important;overflow:hidden !important;position:relative}
  .col-main .panel.beschrijving .dsw-desc-schakel:not(:checked) ~ .sdescview::after{
    content:"" !important;display:block !important;position:absolute;left:0;right:0;bottom:0;
    height:110px;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,0),#fff)}
  /* de beschrijving staat in de ABAB-bandenwissel; op een lila band moet de fade meekleuren,
     anders tekent hij een witte veeg over de band (zelfde correctie als 27-7 bij leesmeer) */
  .col-main .panel.beschrijving.dsw-band-alt .dsw-desc-schakel:not(:checked) ~ .sdescview::after{
    background:linear-gradient(180deg,rgba(244,243,249,0),var(--r-light,#f4f3f9))}

  /* ---- Alternatieven: de kaartenrij PIEKT, hij verdwijnt niet -------------------
     GW 12-8-2026, na de eerste versie: "Kapt nu te snel af. Je wil een stukje van de 3
     alternatieven echt zien zodat je getriggerd wordt."

     520px is geen rond getal maar een gemeten grens. Binnen een kaart ligt:
       label 30 · foto 78-302 · modelnaam 328-367 · specs-pillen 391-446 ·
       "past op dezelfde plek" 469-501 · afweging 525 · ons advies 632 ·
       voorraad 895 · PRIJS 963 · bestelknop 1041   (kaart totaal 1.126)
     Bij 520 zie je label, foto, naam en de specs-pillen COMPLEET, en vervaagt de
     regel "past op dezelfde plek" eronder weg - dat is de trigger. Bij 460 werden de
     specs-pillen middendoor gesneden; onder de 367 valt de modelnaam weg en zie je
     een foto zonder te weten waarvan. Gemeten op vier soorten (droger, fornuis,
     wasmachine, afzuigkap): alle vier dezelfde snee.

     De prijs blijft er met opzet achter: die is wat de knop belooft.

     De chips en de uitlegregel blijven dicht: dat zijn bedieningsknoppen voor de hele
     vergelijking, en die hoort bij de opengeklapte stand. */
  .col-main .panel.dsw-alts .dsw-alts-schakel:not(:checked) ~ .dsw-alts-chips,
  .col-main .panel.dsw-alts .dsw-alts-schakel:not(:checked) ~ .dsw-alts-uitleg,
  .col-main .panel.dsw-alts .dsw-alts-schakel:not(:checked) ~ .dsw-alts-foot{display:none !important}
  .col-main .panel.dsw-alts .dsw-alts-schakel:not(:checked) ~ .dsw-alts-grid{
    max-height:520px !important;overflow:hidden !important;position:relative}
  /* de fade loopt naar de bandkleur, niet naar wit: dit blok doet mee in de ABAB-wissel */
  .col-main .panel.dsw-alts .dsw-alts-schakel:not(:checked) ~ .dsw-alts-grid::after{
    content:"" !important;display:block !important;position:absolute;left:0;right:0;bottom:0;
    height:120px;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,0),#fff)}
  .col-main .panel.dsw-alts.dsw-band-alt .dsw-alts-schakel:not(:checked) ~ .dsw-alts-grid::after{
    background:linear-gradient(180deg,rgba(244,243,249,0),var(--r-light,#f4f3f9))}

  /* ---- de knop zelf: identiek aan .dsw-spec-meer -------------------------------- */
  .col-main .panel .dsw-desc-knop,
  .col-main .panel .dsw-alts-knop{
    display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;background:#fff;
    border:1.5px solid var(--r-border);border-radius:12px;padding:12px 22px;
    font-weight:700;font-size:14px;line-height:normal;color:var(--r-dark);cursor:pointer;
    text-indent:0;font-family:var(--r-font);transition:.15s;-webkit-user-select:none;user-select:none}
  .col-main .panel .dsw-desc-knop:hover,
  .col-main .panel .dsw-alts-knop:hover{border-color:#c9c5dd;background:var(--r-panel)}
  /* vaste breedte voor de chevron - zie de toelichting bij .dsw-spec-meer::after */
  .col-main .panel .dsw-desc-knop::after,
  .col-main .panel .dsw-alts-knop::after{
    content:"\2304";font-size:16px;line-height:1;margin-top:-3px;
    flex:0 0 12px;width:12px;text-align:center}
  .col-main .panel .dsw-desc-schakel:checked ~ .dsw-desc-knop::after,
  .col-main .panel .dsw-alts-schakel:checked ~ .dsw-alts-knop::after{content:"\2303";margin-top:1px}
  .col-main .panel .dsw-desc-schakel:not(:checked) ~ .dsw-desc-knop .dsw-desc-knop__open,
  .col-main .panel .dsw-alts-schakel:not(:checked) ~ .dsw-alts-knop .dsw-alts-knop__open{display:none}
  .col-main .panel .dsw-desc-schakel:checked ~ .dsw-desc-knop .dsw-desc-knop__dicht,
  .col-main .panel .dsw-alts-schakel:checked ~ .dsw-alts-knop .dsw-alts-knop__dicht{display:none}
  .col-main .panel .dsw-desc-schakel:focus-visible ~ .dsw-desc-knop,
  .col-main .panel .dsw-alts-schakel:focus-visible ~ .dsw-alts-knop{
    outline:2px solid var(--r-dark);outline-offset:3px}
}

/* genummerde feature-cards (01..08) zoals mockup */
.panel.beschrijving ul.product-features > li{padding-top:22px !important}
/* feature-nummering 01..08 — CSS-counter i.p.v. een JS-gegenereerde <span> (GW 16-7).
   Was: JS maakte per <li> een `.dsw-rd-fnum`-span met ('0'+(i+1)).slice(-2). */
.panel.beschrijving ul.product-features{counter-reset:dswf}
.panel.beschrijving ul.product-features > li::before{
  counter-increment:dswf;content:counter(dswf,decimal-leading-zero);
  display:block;font-size:12px;font-weight:800;color:var(--r-faint);letter-spacing:.12em;margin-bottom:9px}

/* DOWNLOADS: icoon-kolom links netjes, rechts inhoud (kaart-gevoel) */
.col-main .panel > .left{color:var(--r-dark)}
.col-main .panel > .left .fa{color:var(--r-dark)}

/* sectiekop-eyebrow (klein label boven de grote kop) via ::before op de kop-tekst niet mogelijk;
   we houden de grote koppen consistent (al gestyled). Extra lucht tussen secties. */
.col-main .panel{padding-top:48px !important;padding-bottom:48px !important}

/* ============================================================
   SLOT: UITLIJNING (top == content) + RESPONSIVE  (autoritatief)
   Thema zette .panel{width:73%} + .left icoon-kolom + :after chevron
   → content was smaller/ingesprongen dan de top. Hier rechtgezet.
   ============================================================ */
:root{--r-content:1320px;--r-cpad:32px}

/* TOP en CONTENT exact even breed + zelfde padding → randen lijnen uit */
.product-essential #product_addtocart_form{
  grid-template-columns:minmax(0,1fr) minmax(460px,560px) !important;gap:56px !important;
  max-width:var(--r-content) !important;margin:0 auto !important;padding:24px var(--r-cpad) 46px !important}
.col-main .panel,.col-main .viewblocks{
  width:100% !important;max-width:var(--r-content) !important;
  margin-left:auto !important;margin-right:auto !important;
  padding-left:var(--r-cpad) !important;padding-right:var(--r-cpad) !important}
.dsw-rd-tabs-in{max-width:var(--r-content);padding-left:var(--r-cpad);padding-right:var(--r-cpad)}

/* icoon-kolom + losse header-iconen + chevron weg; content links uitlijnen */
.col-main .panel > .left{display:none !important}
.col-main .panel > .right{width:100% !important;max-width:none !important;margin-left:0 !important;padding-left:0 !important;cursor:auto !important}
.col-main .panel .right h3,.col-main .panel > h3,.col-main .panel > header h3{margin-left:0 !important}
.col-main .panel > header > i.fa{display:none !important}
.col-main .panel::after{display:none !important;content:none !important}
.col-main .panel .sdescview,.col-main .panel .leesmeer-inhoud,.col-main .panel .content{width:100% !important;margin-left:0 !important}

/* ============================================================
   RESPONSIVE — 1600 / 1280 / 1024 / 768 / 390
   ============================================================ */
@media (max-width:1360px){ :root{--r-content:100%} }

@media (max-width:1080px){
  /* top → 1 kolom (galerij boven, koopblok onder) */
  .product-essential #product_addtocart_form{display:block !important;max-width:760px !important}
  .product-essential #product_addtocart_form > .product-img-box{margin:0 0 24px !important}
  .product-essential #product_addtocart_form > .dsw-rd-buy{width:100% !important}
  .col-main .panel,.col-main .viewblocks{max-width:760px !important}
  .dsw-rd-tabs-in{max-width:760px}
  .panel.beschrijving ul.product-features{grid-template-columns:repeat(2,1fr) !important}
}

@media (max-width:820px){
  :root{--r-cpad:20px}
  .col-main .panel .specificaties.content{columns:1 !important}
  /* (24px h1 / 30px prijs stonden hier; DOOD - zie review 16-7 C2. Verderop zetten :774 en :782
     dezelfde selectors zonder media-query op 29px/40px, en die winnen: media-queries geven geen
     specificiteit, dus bij gelijke selector + !important wint de laatste regel. Gemeten @390px:
     29px / 40px. Weggehaald i.p.v. geactiveerd - 29/40 is de goedgekeurde staat.) */
}

@media (max-width:560px){
  :root{--r-cpad:15px}
  .panel.beschrijving ul.product-features{grid-template-columns:1fr !important}
  .dsw-rd-sw{width:calc(50% - 6px)}
  .dsw-rd-tabs ul.quickview li a{padding:15px 12px !important;font-size:13px !important}
  .dsw-rd-sticky .st-t{}
  /* GW 11-9-2026: de prijs ietsje kleiner (was 18px) - zie de toelichting bij .st-thumb hieronder. */
  .dsw-rd-sticky .st-p{font-size:16px}
  /* GW 8-8-2026: "hier zit op mobiel dan toch weer een andere button". Klopt: de balkknop was
     38px hoog met 13,5px tekst en zonder schaduw, terwijl de hoofdknop op de pagina 58px/20px is
     met radius 13 en een zachte rode gloed. Zelfde rood, andere vorm - dus las het als een vreemd
     element. Nu dezelfde knop in een kleiner formaat: alleen de titel blijft op een regel.
     Op 14,5px/13px padding is de knop 129px breed - smaller dan de 132px van de oude knop, zodat
     de balk op smalle telefoons niet krapper wordt dan hij was. Gemeten op 390/375/360/320.
     Het voorraadlabel krijgt met opzet GEEN nowrap: dan loopt het over de prijs heen (gemeten
     24px op 390). Het mag dus gewoon over twee regels.
     De padding staat hier zonder !important en verliest daardoor van dsw-mobile.css r.524
     (padding:11px 14px !important); de hoogte van 46px is wat de knop zijn formaat geeft. */
  /* GW 11-9-2026 (tweede ronde): "de sticky box en dus ook de button iets lager". Knop van 46
     naar 40px, balkpadding van 9 naar 7px, en de tekstkolom strak: de badge stond als
     inline-block in een regelvak van 24px (de kolom erft 16px/1,5) en maakte de kolom 40px
     terwijl hij zelf 18px is. Als blok is de kolom 36px. Gemeten @412/390/360: balk 55px
     (was 74 vanochtend, 65 na de eerste ronde), knop 40px, typenummer en voorraad op een regel.
     De balkpadding staat in dsw-mobile.css met !important; daarom hier met body-prefix. */
  .dsw-rd-sticky .st-cta{height:40px;font-size:14.5px;font-weight:700;letter-spacing:-.2px;border-radius:13px;box-shadow:0 6px 16px rgba(197,48,47,.26)}
  body.catalog-product-view .dsw-rd-sticky .dsw-rd-sticky-in{padding:7px 10px !important}
  .dsw-rd-sticky .st-t{}
  .dsw-rd-sticky .st-badge{display:block;width:fit-content;margin-top:2px}
  .dsw-rd-sticky .st-m{}
  .dsw-rd-sticky .st-t{}
  .dsw-rd-sticky .st-badge{font-size:11px}
  /* GW 11-9-2026: op de telefoon gaat de thumbnail UIT de balk. Hij herhaalde de grote foto
     die twee centimeter erboven staat en kostte met marge ~50px, precies wat ontbrak: gemeten op
     /aeg-tr97munchen @412 stond het typenummer als "AEG TR97M..." en "Op voorraad" op twee
     regels. Zonder thumbnail, met prijs 16px en het korte knoplabel ("Bestel", zie
     stickyKoopLabel() in dsw-pdp-redesign.js) past het typenummer volledig en de voorraad op
     een regel op 412/390/360, en wordt de balk 65px in plaats van 74px.
     GW: "Desktop gewoon zo houden" - daarom alleen hier, in het telefoonblok. De thumbnail
     wordt in de JS nog wel gebouwd (uit currentSrc, dus zonder extra bytes); display:none is
     de kleinste ingreep die desktop onaangeroerd laat. */
  .dsw-rd-sticky .st-thumb{display:none}
  .col-main .panel h2,.col-main .panel > header h2,.col-main .panel .kortebeschrijving{}
}

/* orphaned VARIANTEN-label + verborgen product-shop echt weg (kwam terug op smal) */
.dsw-rd-buy .bloglist-label,.dsw-rd-buy .product-shop,.dsw-rd-buy .mobileHide{display:none !important}

/* ============================================================
   KENMERKEN-BLOK als eigen lila zone (springt eruit) — GW-wens
   ============================================================ */
.dsw-rd-why{background:var(--r-light);border:1px solid var(--r-border);border-radius:22px;
  padding:34px 34px 30px;margin:34px 0;box-shadow:inset 0 1px 0 #fff}
.dsw-rd-why-title{font-size:21px !important;font-weight:800 !important;color:var(--r-text) !important;
  letter-spacing:-.01em;margin:0 0 22px !important;line-height:1.2}
.dsw-rd-why ul.product-features{}
.dsw-rd-why ul.product-features > li{background:#fff !important;border-color:var(--r-border) !important;
  }
.dsw-rd-why ul.product-features > li:hover{box-shadow:0 12px 30px rgba(35,35,80,.10) !important;border-color:#ddd9ea !important}
@media(max-width:560px){.dsw-rd-why{padding:20px 15px}.dsw-rd-why-title{font-size:18px !important;margin-bottom:16px !important}}

/* ============================================================
   KOOPBLOK herbouwd naar de mockup (buildBuybox) — GW
   ============================================================ */
.dsw-rd-buy{flex-direction:column}

/* titel (merk-eyebrow vervallen GW 16-7: merk stond al in de h1 -> dubbel + kostte fold-hoogte) */
.dsw-rd-buy .product-name{margin:0 0 6px !important}
.dsw-rd-buy .product-name h1.item.name{font-size:29px !important;margin:0 0 5px !important}
.dsw-rd-buy .product-subheading{margin:0 0 8px !important;color:var(--r-muted) !important}

/* PRIJS-blok */
.dsw-rd-price{margin:10px 0 14px}
.dsw-rd-price-top{align-items:baseline;gap:14px;flex-wrap:wrap}
.dsw-rd-pricebox{padding:0 !important}
.dsw-rd-price-top .price-box .special-price .price,
.dsw-rd-price-top .price-box .price{font-size:40px !important;font-weight:900 !important;color:var(--r-text) !important}
.dsw-rd-old{font-size:19px;color:var(--r-faint);text-decoration:line-through;font-weight:600}
.dsw-rd-disc{background:var(--r-red);color:#fff;font-weight:800;font-size:14px;padding:6px 13px;border-radius:99px;box-shadow:0 4px 12px rgba(197,48,47,.22)}
.dsw-rd-price-sub{}
.dsw-rd-price-sub b{color:var(--r-green-ink);font-weight:800}
.dsw-rd-in3{align-items:center;gap:9px;flex-wrap:wrap}

/* Loze ruimte bóven het koopblok (GW 6-8-2026). Gemeten: main-container pt=24 + breadcrumb
   pt=16 duwden de kolom naar y=301, terwijl de kruimel zelf maar 20px tekst is. Alleen op de
   PDP inkorten (body.catalog-product-view) — categorie/checkout/home blijven zoals ze zijn. */
body.dsw-modhead.catalog-product-view .main-container{padding-top:10px !important}
body.dsw-modhead.catalog-product-view .breadcrumbs{padding-top:6px !important;margin-bottom:4px !important}
.dsw-rd-in3 b{color:var(--r-text);font-weight:800}
.dsw-rd-in3-b{background:var(--r-dark);color:#fff;font-weight:800;font-size:12px;padding:3px 10px;border-radius:6px;letter-spacing:.02em;text-transform:lowercase}

/* swatches */
.dsw-rd-buy .dsw-rd-swatches{margin:2px 0 10px}

/* Swatch-SLIDER (GW 6-8-2026). buildSwSlider()/initSwSlider() in dsw-pdp-redesign.js bouwen
   prev/next-knoppen en zetten `.is-scrollable` zodra de tegelrij overloopt — maar er stond
   NOOIT CSS tegenover. Gevolg (gemeten op /smeg-c9gmmbnlk2, 1536x864): de twee knoppen vielen
   als inline-block BOVEN en ONDER de rij i.p.v. ernaast, 8px breed, permanent `disabled`
   (cursor:default). Kosten: ~48px verspilde hoogte in de koopkolom, en het KLEUR-blok nam
   197px voor twee kleuren — genoeg om "In winkelwagen" onder de vouw te duwen.
   Nu: pijlen absoluut naast de rij, alleen zichtbaar als er ECHT iets te scrollen valt.
   Zelfde vorm als .dsw-slider-arrow in dsw-mobile.css r320. */
.dsw-rd-sw-slider{position:relative}
.dsw-rd-sw-arrow{display:none}
.dsw-rd-sw-slider.is-scrollable .dsw-rd-sw-arrow{display:flex;align-items:center;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:30px;height:30px;padding:0;border:1px solid #d7d3e8;border-radius:50%;background:rgba(255,255,255,.96);color:#2d2d5a;font-size:17px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(35,35,80,.16);transition:opacity .2s}
.dsw-rd-sw-slider.is-scrollable .dsw-rd-sw-arrow.prev{left:-4px}
.dsw-rd-sw-slider.is-scrollable .dsw-rd-sw-arrow.next{right:-4px}
.dsw-rd-sw-slider.is-scrollable .dsw-rd-sw-arrow[disabled]{opacity:0;pointer-events:none}
/* De rij is een SLIDER, geen wrappende lijst: met flex-wrap:wrap kon scrollWidth nooit groter
   worden dan clientWidth, dus `over` bleef altijd false en de pijlen bleven eeuwig disabled —
   terwijl veel varianten de kolom juist regel na regel lieten groeien. */
.dsw-rd-sw-row{flex-wrap:nowrap;overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.dsw-rd-sw-row::-webkit-scrollbar{display:none}
.dsw-rd-sw-row>*{flex:0 0 auto}

/* CTA + vergelijken op ÉÉN rij (GW 16-7): "Voeg toe aan vergelijker" was een vol-breedte knop
   ONDER de CTA en kostte een hele rij (~68px). Nu compact rechts naast de CTA = 0px extra hoogte. */
.dsw-rd-cta{margin:0 0 4px;display:flex;align-items:stretch;gap:10px}
.dsw-rd-cta .add-to-cart-buttons{margin:0 !important;width:auto !important;flex:1 1 auto;min-width:0}
.dsw-rd-cta button.btn-cart{display:flex !important;align-items:center;justify-content:center;gap:8px}
.dsw-rd-cta-amt{}
/* .dsw-rd-save is alleen nog een JS-hook; de styling staat bij `.dsw-rd-buy .dsw-rd-cta
   a.link-compare` (hierboven in dit bestand). Bewust ÉÉN regel voor dit element: twee
   blokken die hetzelfde element stylen was de oorzaak van de 560px-bug. */

/* ---- GEEN KOOPKNOP: de mededeling IS hier het hoofdelement ---------------------------------
   GW 14-8-2026 op /v-zug-combair-v2000-45-platinum: "Graag opmaak regelen want dit is heel lelijk."

   In de koop-tak is `.dsw-rd-cta` een RIJ: knop links, Vergelijk rechts, allebei even hoog
   (`align-items:stretch`). In de geen-koop-tak staat er geen knop maar een heel tekstblok in,
   en dan werkt diezelfde rij tegen ons. GEMETEN @1440 op dat product:
     - `a.link-compare` werd 117x184 - een leeg wit paneel, zo hoog als de hele mededeling;
     - de mededeling zelf had géén enkele omlijsting en zweefde op de lila paginakleur, terwijl
       elk ander blok in de kassa een witte kaart is;
     - de knop had `margin:10px 10px 0` en stond dus 10px uit de rechterlijn.
   Daarom hier: kolom in plaats van rij, en de mededeling in dezelfde witte kaart als de rest.

   Dekt alle vijf de takken van view.phtml die zonder `.add-to-cart-buttons` renderen - de kop
   heet in de ene tak `h3.fontsize22` en in de andere `h3.titleoranje`, en 4362 zet zijn tekst in
   een extra `div.padding10`. Eén set regels voor alle vijf, zodat ze niet uit elkaar lopen. */
/* 🚨 De selector is bewust (0,4,0) MÉT !important op display. dsw-mobile.css r591 zet
   `body.catalog-product-view .dsw-rd-buy .dsw-rd-cta{display:flex !important}` (0,3,0), en dat
   is een ánder bestand - wie hier op (0,2,0) zonder !important blijft, wint op desktop en
   verliest onder 600px. GEMETEN @390 vóór deze regel: de mededeling stond in een kolom van
   ~200px met de Vergelijk-pil ernaast in beeld. */
body.catalog-product-view .dsw-rd-buy .dsw-rd-cta.dsw-rd-cta--geenkoop{
  display:block !important;align-items:initial !important;
  background:#fff;border:1px solid var(--r-border);border-radius:var(--r-radius);
  box-shadow:var(--r-shadow);padding:18px 20px 20px}
.dsw-rd-buy .dsw-rd-cta--geenkoop #wa-wrap,
.dsw-rd-buy .dsw-rd-cta--geenkoop .product-options-bottom,
.dsw-rd-buy .dsw-rd-cta--geenkoop .padding10{
  display:block !important;width:100% !important;margin:0 !important;padding:0 !important}
/* Géén tweede vlak binnen de kaart. dsw-product.css geeft `div#wa-wrap` een eigen vulling:
   #f6f7f8 vanaf 1024px (bijna wit, viel nauwelijks op) en #e8e8e8 onder 689px - dat laatste is
   het grijze blok dat @390 door de witte kaart heen sneed. De kaart is nu de drager. */
.dsw-rd-buy .dsw-rd-cta--geenkoop #wa-wrap{
  background:transparent !important;border:0 !important;box-shadow:none !important}
.dsw-rd-buy .dsw-rd-cta--geenkoop h3{
  margin:0 0 8px !important;padding:0 !important;font-size:19px !important;font-weight:800 !important;
  color:var(--r-text) !important;letter-spacing:-.01em;line-height:1.25}
.dsw-rd-buy .dsw-rd-cta--geenkoop p{
  margin:0 0 15px !important;padding:0 !important;font-size:15px !important;line-height:1.55 !important;
  color:var(--r-muted) !important}
.dsw-rd-buy .dsw-rd-cta--geenkoop p strong{color:var(--r-text) !important;font-weight:700 !important;font-size:15.5px}
.dsw-rd-buy .dsw-rd-cta--geenkoop a.bluelink{
  color:var(--r-dark) !important;font-weight:700 !important;text-decoration:underline !important}
.dsw-rd-buy .dsw-rd-cta--geenkoop button.btn-cart{
  width:100% !important;margin:0 !important;border-radius:12px !important}
/* De losse <br>'s die 5775 tussen knop en adviesprijs zet (2x19px lege ruimte) tellen niet mee;
   de <br> BINNEN een <p> blijft heel - die breekt de zin bewust af. */
.dsw-rd-buy .dsw-rd-cta--geenkoop .product-options-bottom > br{display:none}
/* Advies-/winkelprijs (5089 "met prijs, geen button" en 5775 "adviesprijs met button"): dit is
   het enige bedrag dat hier hoort, dus als prijs opmaken - niet als losse regel tekst. */
.dsw-rd-buy .dsw-rd-cta--geenkoop .margintopleft10{margin-left:0 !important}
.dsw-rd-buy .dsw-rd-cta--geenkoop span.margintopleft10{
  display:block;margin:14px 0 0 !important;font-size:13px;color:var(--r-muted)}
.dsw-rd-buy .dsw-rd-cta--geenkoop .dswprijsovertuigd{
  display:block !important;float:none !important;margin:10px 0 0 !important;padding:0 !important;
  font-size:26px !important;font-weight:900 !important;line-height:1.1 !important;
  letter-spacing:-.02em;color:var(--r-text) !important}
/* Algemene siblings, niet `+ br +`: 5775 zet een (nu verborgen) <br> tussen label en bedrag,
   de 5450-tak niet. Eén regel die beide dekt. */
.dsw-rd-buy .dsw-rd-cta--geenkoop span.margintopleft10 ~ .dswprijsovertuigd{margin-top:2px !important}
/* Vergelijk: geen uitgerekt paneel meer maar een rustige regel onder de knop. Specificiteit
   (0,3,1) wint bewust van de rij-variant hierboven (0,2,1) - zie de waarschuwing daar. */
.dsw-rd-buy .dsw-rd-cta--geenkoop a.link-compare{
  height:38px;margin:14px 0 0 !important;border-radius:11px !important}
@media(max-width:600px){
  .dsw-rd-buy .dsw-rd-cta--geenkoop{padding:16px 15px 17px}
  .dsw-rd-buy .dsw-rd-cta--geenkoop h3{font-size:18px !important}
  /* op smal scherm verbergt de rij-variant het label ("font-size:0") omdat Vergelijk daar naast
     de koopknop staat; hier staat hij op zijn eigen regel en past het woord gewoon. */
  .dsw-rd-buy .dsw-rd-cta--geenkoop a.link-compare{font-size:14px !important;gap:7px;padding:0 15px !important}
}

/* Trustpilot-badge in het koopblok VERVALLEN (GW 16-7): alle .dsw-rd-tp*-regels verwijderd,
   buildBuybox() bouwt 'm niet meer. Trustpilot blijft in de header staan. */

/* "Overtuigd?"-blok (dubbele CTA onderaan) weg: sticky + koopblok dekken de CTA al.
   Enige .panel.cta.mobileHide = dit blok (geverifieerd). */
.product-essential .panel.cta.mobileHide{display:none !important}

/* voorraad + aftel-urgentie — staat sinds GW 16-7 BOVEN de CTA, dus ook lucht aan de onderkant
   (had alleen margin-top; anders plakt het groene blok tegen de koopknop) */
.dsw-rd-buy .dsw_voorraadinfo{}
.dsw-rd-urgency{margin-top:13px;padding-top:12px;border-top:1px dashed #f0cf8a;color:#8a5a12;font-size:13.5px;font-weight:600;line-height:1.5}
.dsw-rd-urgency b{font-weight:800;color:#6f4a0d}

/* EXTRA'S & bezorgopties */
.dsw-rd-extras{margin:20px 0 0}
.dsw-rd-extras-head{gap:10px;}
.dsw-rd-extras-head span{}
.dsw-rd-extras-head small{font-weight:500;text-align:right}
.dsw-rd-extras .product-options{}
/* optie-prijs rechts (groen), vóór de toggle */
.dsw-rd-extras .options-list > li .label label{padding-right:132px !important}
.dsw-rd-extras .options-list .price-notice{position:absolute;right:66px;top:50%;transform:translateY(-50%);
  white-space:nowrap}
.dsw-rd-extras .options-list .price-notice .price{}
/* Voorwaarden-knopje achter de optienaam (GW 6-8-2026, zie voorwaardenKnopjes() in de JS).
   De naam was zélf de fancybox-link en zat in het <label> — onzichtbaar als link én
   dubbelzinnig bij klikken. Dit knopje maakt het zichtbaar en scheidt de twee acties. */
.dsw-rd-extras .dsw-rd-opt-i{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:8px;vertical-align:0;border:2px solid #3b3b71;border-radius:50%;background:#ecebf6;color:#3b3b71;font:800 14px/1 Manrope,Arial,sans-serif;cursor:pointer;flex:0 0 auto;transition:background .15s,color .15s,border-color .15s}
.dsw-rd-extras .dsw-rd-opt-i>span{position:relative;top:-0.5px}
.dsw-rd-extras .dsw-rd-opt-i:hover{background:#3b3b71;border-color:#3b3b71;color:#fff}
.dsw-rd-extras .dsw-rd-opt-i:focus-visible{outline:2px solid #3b3b71;outline-offset:2px}

/* USP's + betaallogo's */
.dsw-rd-trust{margin:22px 0 0;}
.dsw-rd-trust .usps{border:0 !important;background:none !important;padding:0 !important;margin:0 !important;box-shadow:none !important}
.dsw-rd-pay{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.dsw-rd-pay span{font-weight:700;padding:7px 12px;}

/* titel + subkop op aparte regels (liepen door op één regel) */
.dsw-rd-buy .product-name h1.item.name{display:block !important;margin:0 0 3px !important;line-height:1.15}
.dsw-rd-buy .product-name .product-subheading{display:block !important;margin:0 0 7px !important;font-size:15px !important;color:var(--r-muted) !important;line-height:1.4}
.dsw-rd-buy .product-name .reviewtekstmini{display:block;margin:0}
.dsw-rd-buy > .section,.dsw-rd-buy .ww-waypoint,.dsw-rd-buy > .no-display{display:none !important}

/* reactief bedrag: note bij gekozen opties + flash bij sticky-scroll */
.dsw-rd-optnote{margin-top:9px;font-size:13.5px;font-weight:700;color:var(--r-green-ink)}
.dsw-rd-flash{animation:dswflash 1.4s ease}
@keyframes dswflash{0%,100%{box-shadow:none;border-color:var(--r-border)}30%,60%{box-shadow:0 0 0 3px rgba(61,170,53,.35)}}

/* ============================================================
   PDP CONTENT-SECTIES (stap 3 uit het voorstel)
   ============================================================ */
/* DOWNLOADS als PDF-kaarten */
.col-main .panel .content.scrollbutton ul.downloadscroll,
.col-main .panel ul.downloadscroll{list-style:none !important;margin:14px 0 0 !important;padding:0 !important;}
.col-main .panel ul.downloadscroll li{margin:0 !important;list-style:none;padding:0 !important}
.col-main .panel ul.downloadscroll li a{}
.col-main .panel ul.downloadscroll li a:hover{border-color:#c9c5dd;box-shadow:var(--r-shadow)}
.col-main .panel ul.downloadscroll li a::before{content:"PDF";flex:none;font-size:10px;font-weight:800;color:var(--r-red);background:var(--r-red-soft,#fdeceb);border-radius:6px;padding:6px 7px}

/* REVIEWS-knop temmen (was zwaar blauw) */
.panel.reviews .buttons-set button,.panel.reviews button.button,#review-form button,.panel.reviews .form-add button,
.col-main .panel .actions button.button{
  background:var(--r-dark) !important;border:0 !important;border-radius:12px !important;padding:12px 22px !important;
  font-family:var(--r-font);font-weight:700 !important;font-size:14.5px !important;box-shadow:none !important}
.panel.reviews .buttons-set button span,.col-main .panel .actions button span{color:#fff !important;font-size:14.5px !important;font-weight:700 !important;text-transform:none !important;background:none !important}

/* GALERIJ-badges netjes: dealer-badge + energielabel niet over de foto */
.product-essential .product-img-box .dealerbadge {
  position:absolute;left:16px;top:16px;z-index:3;background:var(--r-dark);color:#fff;font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px}
.product-essential .product-img-box .energielabel,.product-essential .product-img-box .energieklasse-groen{position:absolute;right:16px;top:16px;z-index:3;margin:0}

/* reviews-blok rustiger */
.panel.reviews .review-summary {background:var(--r-panel);border:1px solid var(--r-border);border-radius:16px;padding:20px 26px}

/* "Schrijf uw eigen review" = <a class="button">. Thema-regel
   .button:not(.conversie):not(.btngrey):not(.btn-cart) heeft spec (0,4,0) -> ik moet >=4 classes. */
.col-main .review-form-link .form-add a.button,
.col-main .review-form-link a.button[href*="-reviews"]{
  display:inline-block;
  padding:12px 22px !important;font-family:var(--r-font);
  font-size:14.5px !important;
  text-decoration:none !important;}
.col-main .review-form-link .form-add a.button:hover,
.col-main .review-form-link a.button[href*="-reviews"]:hover{
  background:var(--r-deep) !important;transform:translateY(-1px)}

/* BIJPASSENDE PRODUCTEN: native theme-layout behouden (grid vocht met scroll-lijst).
   Alleen veilige, layout-neutrale groene checkbox. */
.col-main ul.relatedscroll input.related-checkbox{accent-color:var(--r-green);cursor:pointer}

/* Sticky-balk: tweede voorraad-badge (review 16-7, A1 — GW-spec).
   .st-badge (groen) = eigen magazijn. Deze amber-variant = "wel leverbaar, maar niet uit eigen
   voorraad". Bewust NIET groen: groen leest als "ligt hier, morgen in huis" en dat klopt dan niet.
   Er bestond geen amber-token in deze laag (de kaart kleurt beide voorraad-indicatoren groen,
   category-redesign r406), dus hier gedefinieerd.
   Contrast nagerekend: #8a5a00 op #fdf3e0 = 5.38 -> WCAG AA geslaagd (de groene badge zit op 4.86). */
.dsw-rd-sticky .st-badge.st-badge-fab{color:#8a5a00;background:#fdf3e0}

/* GW 2026-07-17 (punt 5): sticky koopbalk (~73px, position:fixed bottom:0) bedekte de onderkant
   van de footer bij helemaal naar beneden scrollen. Zolang de balk zichtbaar is ruimte onder de
   body reserveren zodat de footer volledig vrij blijft. */
body:has(.dsw-rd-sticky.show){padding-bottom:88px}
/* Telefoon: de balk is daar 55px (zie het blok max-width:560px), dus 88px liet 33px lucht onder
   de pagina staan. Staat NA de regel hierboven omdat een media-query geen specificiteit geeft. */
@media (max-width:560px){body:has(.dsw-rd-sticky.show){}}


/* ============================================================
   PDP-FIX 2026-07-20 (GW) — visuele verbeterpunten P2, P3, P3b, P4, P5, P7
   Additief blok; verwijderen = exact origineel terug.
   Zie handoff: 2026-07-20-pdp-visuele-verbeterpunten-P1-P7-droplet.md
   ============================================================ */

/* P2 — product-subtitel fraaier (was: dof grijs 15.5px) */
.product-essential .product-subheading{
    
    
}
.product-essential .product-subheading::first-letter{ text-transform:uppercase; }

/* P3b — witruimte tussen blauwe button en direct volgende dikgedrukte titel (garantie-kaart) */
.dsw-rd-warr-body a.flink{  margin:4px 0 14px; }
.dsw-rd-warr-body a.flink ~ strong{ display:inline-block; margin-top:6px; }

/* P3 — garantie-kaarten: korte kaarten niet meerekken met de lange ACTIE-kaart + toggle-opmaak
   (de <details class="dsw-rd-warr-more"> wordt door dsw-pdp-redesign.js gebouwd) */
.dsw-rd-warr-row{ align-items:start; }
.dsw-rd-warr-more{ margin-top:8px; }
.dsw-rd-warr-more > summary{ cursor:pointer; color:var(--r-dark); font-weight:700; margin:6px 0; list-style:none; display:inline-block; }
.dsw-rd-warr-more > summary::-webkit-details-marker{ display:none; }
.dsw-rd-warr-more > summary::before{ content:"\25be\00a0\00a0"; }
.dsw-rd-warr-more[open] > summary::before{ content:"\25b4\00a0\00a0"; }

/* P4 — download-overzicht: meer breedte + witruimte (override wint van r508 en r902) */
body.catalog-product-view .col-main .panel ul.downloadscroll{
  
  
}

/* P5 — anker-sprong (#garantie e.a.) landt niet meer onder de sticky nav.
   Waarde = hoogte sticky header in stuck-state; live nagemeten en zo nodig bijgesteld. */
.catalog-product-view .ael{  }
/* 13-8-2026: dat vaste getal stond op de kop van 166/140 px en landde 50 px te laag zodra
   de balk 100 px werd. Op desktop nu afgeleid van de stand zelf (--dsw-hh, dsw-algemeen.css),
   dus het klopt in BEIDE standen. Mobiel houdt de 150 px hierboven. */
@media (min-width:1025px){ .catalog-product-view .ael{ scroll-margin-top: calc(var(--dsw-hh, 150px) + 12px); } }

/* P7 — voorraad-vinkje inline voor de "Check:"-tekst i.p.v. op een eigen regel erboven */
.product-essential .dsw_voorraadinfo ol.floatleft{  display:inline; margin:0; padding:0; list-style:none; }
.product-essential .dsw_voorraadinfo ol.floatleft li.gechecktvink{
  display:inline; margin:0 6px 0 0; padding:0; list-style:none; color:var(--r-green,#3daa35); font-weight:700;
}
/* ============ EINDE PDP-FIX 2026-07-20 ============ */

/* ============================================================
   PDP-FIX 2026-07-20 (GW) — P1: "Ga naar categorie" weglaten uit de sticky product-nav.
   Bewust in dsw-pdp-redesign.css (los geladen, na de fbminify-bundle) i.p.v. dsw-algemeen.css
   (die zit in de gecachte merge-bundle). !important + latere bronvolgorde wint van r1844/1846.
   Additief; verwijderen = item terug.
   ============================================================ */
body.dsw-modhead.dsw-stuck.catalog-product-view #productmenu2 > li.level0,
.catalog-product-view header.alt #nav #productmenu2 > li.level0{ display:none !important; }
/* ============ EINDE PDP-FIX 2026-07-20 (P1) ============ */


/* ============================================================
   PDP-FIX 2026-07-20 CORRECTIES (na live Puppeteer-meting)
   P2: winnende regel is .dsw-rd-buy .product-name .product-subheading (r888) -> daar overheen.
   P4: downloadkaarten groter/voller i.p.v. 160px in brede cellen.
   Additief; verwijderen = vorige staat. Zie handoff 2026-07-20-pdp-visuele-verbeterpunten.
   ============================================================ */

/* P2 (v2) */
.dsw-rd-buy .product-name .product-subheading{
  color:var(--r-faint,#6f6d88) !important; font-size:16px !important; font-weight:500 !important;
  line-height:1.45 !important; margin:2px 0 10px !important; letter-spacing:.005em !important;
}
.dsw-rd-buy .product-name .product-subheading::first-letter{ text-transform:uppercase; }

/* P4 (v2) — grotere kaarten, vollere previews, meer lucht, links uitgelijnd */
body.catalog-product-view .col-main .panel ul.downloadscroll{
  grid-template-columns:repeat(auto-fill,minmax(250px,280px)) !important;
  justify-content:start !important; gap:32px !important;
}
body.catalog-product-view .col-main .panel ul.downloadscroll li a.universal-link{ width:100% !important; }
body.catalog-product-view .col-main .panel ul.downloadscroll li a.universal-link img.image{ max-width:200px !important; }
/* ============ EINDE CORRECTIES 2026-07-20 ============ */

/* P4 (v3) — kaart vult de gridcel (was 160px in brede cel) */
body.catalog-product-view .col-main .panel ul.downloadscroll li{ width:100% !important; max-width:none !important; min-width:0 !important; justify-self:stretch !important; }

/* ============================================================
   GARANTIE-FIX (GW 22-7): introtekst full-width + net, gelijkmatig kaart-grid.
   Overschrijft de max-width op de lead en de auto-fit-kolommen. align-items:start
   (bewuste P3-beslissing 20-7) blijft staan: kaarten rekken NIET mee. Alleen het
   wisselende kolomaantal + de eenzame uitgerekte kaart (de 'onoverzichtelijk'-
   oorzaken) verdwijnen. Classes zijn merk-generiek -> werkt voor elk merk.
   ============================================================ */
.dsw-rd-warr-lead{ max-width:none; }
.dsw-rd-warr-row{ grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:1024px){ .dsw-rd-warr-row{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){  .dsw-rd-warr-row{ grid-template-columns:1fr; } }

/* ===== GW 22-7: gedeelde sectie-titel (icoon + h2 + subregel) — eenheid over de hele PDP ===== */
.dsw-sk{display:flex;gap:14px;align-items:center;margin:0 0 22px}
.dsw-sk__ic{flex:none;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#2d2d5a}
.dsw-sk__ic svg{width:23px;height:23px}
.dsw-sk__tx{min-width:0}
.col-main .dsw-sk h2,.dsw-sk h2{font-size:24px !important;font-weight:800 !important;letter-spacing:-.01em !important;color:#25254a !important;margin:0 !important;padding:0 !important;line-height:1.15 !important}
.dsw-sk__sub{color:#6b6b86 !important;font-size:.95rem !important;margin:3px 0 0 !important;line-height:1.4 !important;font-weight:400 !important;text-transform:none !important;letter-spacing:0 !important}
/* GW 22-7: dsw-sk kop-sub afstand fix — panels erven anders 20px van .panel > header h2 (specificiteit) */
.col-main .panel .dsw-sk h2,.col-main .panel > header.dsw-sk h2{font-size:24px !important;margin:0 !important;padding:0 !important;letter-spacing:-.01em !important;line-height:1.15 !important}
.dsw-sk .dsw-sk__sub{margin-top:2px !important}

/* GARANTIE (GW 22-7): iconen weg, 'Lees verder' op te lange kaarten */
.dsw-rd-warr-ico{ display:none !important; }
.dsw-rd-warr-card.dsw-clamp .dsw-rd-warr-body{ max-height:165px; overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent); mask-image:linear-gradient(180deg,#000 72%,transparent); }
.dsw-rd-warr-card.dsw-clamp.dsw-open .dsw-rd-warr-body{ max-height:none; -webkit-mask-image:none; mask-image:none; }
/* 18-9-2026: min-height 24px + verticale padding: het tikdoel was 77x16 px op desktop (Lighthouse target-size, AGA-PDP); mobiel (<600px) regelt dsw-mobile.css al 44px.
   margin-top 18px: in de ingeklapte kaart (.dsw-clamp, body max-height 165 + overflow:hidden) steekt de a.flink-rechthoek 12 px onder de cliprand uit; onzichtbaar, maar axe rekent met rechthoeken en noemt de knop dan "partially obscured". */
.dsw-rd-warr-leesverder{ margin-top:18px; background:none; border:0; padding:4px 0; min-height:24px; display:inline-flex; align-items:center; cursor:pointer; color:var(--r-dark); font-weight:700; font-size:13.5px; font-family:var(--r-font); }
.dsw-rd-warr-leesverder:hover{ text-decoration:underline; }
/* GW 22-7: icoon-vierkant zichtbaar op elke band (op de paarse band was #f2f1f8 onzichtbaar) */
.dsw-sk__ic{background:#e9e6f4 !important;box-shadow:inset 0 0 0 1px rgba(45,45,90,.07)}
/* GW 24-7-2026: ÉÉN band-systeem — vervangt de tegenstrijdige 22/23-7 patch-laag.
   Alle top-level blokken (panels + FASE + tip + kosten) zijn volle-breedte ABAB-banden
   (wit / lila var(--r-light)=#f4f3f9). Kaarten leven IN de band; banden raken elkaar (geen gap). */
.col-main .dsw-vb2,.col-main .dsw-mt,.col-main .dsw-ph,.col-main .dsw-ko,.col-main .dsw-sv,.col-main .dsw-gl{
  position:relative;background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;
  width:100% !important;max-width:var(--r-content) !important;margin:0 auto !important;padding:48px var(--r-cpad) !important}
.col-main .dsw-vb2::before,.col-main .dsw-mt::before,.col-main .dsw-ph::before,.col-main .dsw-ko::before,.col-main .dsw-sv::before,.col-main .dsw-gl::before{
  content:"";position:absolute;z-index:0;top:0;bottom:-1px;left:50%;margin-left:-50vw;width:100vw;background:#fff;border-bottom:1px solid var(--r-border);display:block !important}
.col-main .dsw-vb2.dsw-band-alt::before,.col-main .dsw-mt.dsw-band-alt::before,.col-main .dsw-ph.dsw-band-alt::before,.col-main .dsw-ko.dsw-band-alt::before,.col-main .dsw-sv.dsw-band-alt::before,.col-main .dsw-gl.dsw-band-alt::before{background:var(--r-light) !important}
/* [data-dsw-overlay] uitgesloten: fixed-overlays (vb-sheet-drawer, keuzehulp) mogen NIET in de band-flow getrokken worden - anders position:relative -> zichtbare lege box. Conventie: elke overlay in een band krijgt data-dsw-overlay. Zie handoff 2026-07-24 + reference_band_regel_trekt_fixed_overlay_in_flow. */
.col-main .dsw-vb2 > *:not([data-dsw-overlay]),.col-main .dsw-mt > *:not([data-dsw-overlay]),.col-main .dsw-ph > *:not([data-dsw-overlay]),.col-main .dsw-ko > *:not([data-dsw-overlay]),.col-main .dsw-sv > *:not([data-dsw-overlay]),.col-main .dsw-gl > *:not([data-dsw-overlay]){position:relative;z-index:1}
/* beschrijving + info: geen zwevende kaart meer -> gewone band-inhoud */
.col-main .panel.beschrijving,.col-main .panel.infofabrikant{background:transparent !important;box-shadow:none !important;border-radius:0 !important}
/* FASE inner-wrappers: geen grote kaart -> tegels/inhoud direct in de band */
.dsw-vb2 .vb-card,.dsw-ph .ph-card,.dsw-sv .sv-outer,.dsw-gl .gl-card{border:0 !important;background:transparent !important;box-shadow:none !important;padding:0 !important}
/* (behouden) PDP-vergrootglas inline SVG */
.product-essential .large-image-icon .dsw-zoom-ic,.product-view .large-image-icon .dsw-zoom-ic{color:var(--r-dark)}
.product-essential .large-image-icon:hover .dsw-zoom-ic,.product-view .large-image-icon:hover .dsw-zoom-ic{color:var(--r-green-ink)}


/* GW 23-7-2026: "Gekocht bij De Schouw" was wit MET een navy reviews-box (.sv-quote) -> vlakverdeling
   klopte niet. Box nu wit met donkere tekst (sterren blijven goud), zodat het hele blok wit is. */
.dsw-sv .sv-quote{ background:#fff !important; border:1px solid #e7e4f2 !important; color:#3a3a4a !important; box-shadow:0 2px 6px rgba(35,35,80,.05),0 10px 26px rgba(35,35,80,.08) !important; }
.dsw-sv .sv-quote h3{ color:#25254a !important; }
.dsw-sv .sv-rating .n{ color:#25254a !important; }
.dsw-sv .sv-rating .c{ color:#6b6b86 !important; }
.dsw-sv .sv-samples blockquote{ color:#3a3a4a !important; }
.dsw-sv .sv-samples blockquote::before{ color:#b9b7c9 !important; }
.dsw-sv .sv-samples cite{ color:#6b6b86 !important; }
.dsw-sv .sv-more{ color:#2d2d5a !important; }
.dsw-sv .sv-more:hover{ color:#25254a !important; }

/* ============================================================
   list_overlay promo-badge op de PDP-mediafoto (25-7-2026)
   Was: kale serif-losse regel tussen foto en thumbnails — de redesign
   liet .overlay2 achter met enkel position/z-index, zonder achtergrond,
   kleur of coordinaten. Nu de rode redesign-badge, exact dezelfde taal
   als de categoriekaart (dsw-kaart.css .productitem.pc .overlay):
   lint linksonder, botst niet met het energielabel (linksboven) of de
   zoom-knop (rechtsboven). Geldt voor alle 438 producten met list_overlay.
   ============================================================ */
.product-image-gallery .overlay2{
   left:0; bottom:16px; top:auto; right:auto; z-index:11;
  display:inline-block; max-width:72%;
  background:var(--r-red); color:#fff; /* GW 15-10-2026: zwart op rood las slecht; wit = de categoriekaart (dsw-kaart.css .overlay). Cashback (geel) houdt eigen tekstkleur. */
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:13px; font-weight:700; line-height:1.25; letter-spacing:.2px; font-variant-numeric:tabular-nums;
  padding:6px 13px; 
  
}

/* ============================================================
   SERIF-SWEEP (25-7-2026): huisfont op .content <p> (PDP)
   Oorzaak: legacy dsw-product.css:1518  .content p{ font:15px Roboto }
   pinde de review-pager (p.amount), de documentatie-tekst en het
   product-vragen-blok op kale "Roboto". Roboto is bij de redesign
   verwijderd (Inter + Silka laden wel) -> browser valt terug op zijn
   default serif (Times). Gemeten met getComputedStyle op de echte
   render (/aeg-lr6koln desktop): 3 <p> in .content vielen op Times.
   Fix: font-family-longhand wint van de `font`-shorthand (later
   geladen, dit bestand laadt na de fbminify-bundle). Roboto NIET
   opnieuw laden. Category/home/search/CMS/account/checkout/mobiel-PDP
   zijn gemeten schoon; alleen deze kale-Roboto regel viel om.
   ============================================================ */
.content p{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}

/* .actierefundmobile strong (mobiel <=599, catalog/product/view/description.phtml)
   is kaal `font:700 20px Roboto` terwijl zijn eigen <a>-sibling al op Inter
   staat. DB-check 25-7: geen enkel product heeft nu een refund_actie die dit
   blok triggert, dus niet render-verifieerbaar; defensief gezet zodat het niet
   serif wordt zodra er wel een actie is. */
.actierefundmobile strong{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}

/* fix: wit vierkant beschrijving in paarse band (GW 2026-08-05) — .sdescview hield background:#fff uit dsw-product.css */
.col-main .panel.beschrijving .sdescview{background:transparent}

/* ---- Info-icoon bij een optietitel (GW 6-8-2026: "de letter i mag duidelijker") ----
   Het icoon is de FontAwesome-glyph \f05a, gezet in dsw-product.css op 18px. De redesign-laag
   hierboven zet `a.info` op var(--r-text), en de ::after erft die kleur - daardoor kreeg het
   icoon exact de kleur van het label ernaast en viel het weg. Nu groter en in de accentkleur,
   zodat zichtbaar is dat er iets achter zit. De knop zelf blijft ongewijzigd (GW: "button goed zo").
   Bewust gescoped op .options-list: a.fbox.info komt ook elders voor (bezorgpagina, checkout). */
.product-essential .options-list a.fbox.info::after{
  font-size:22px;
  line-height:1;
  color:var(--r-dark);
  margin:0 0 0 7px;
  vertical-align:-3px;
}
.product-essential .options-list a.fbox.info:hover::after{ color:var(--r-text); }

/* Draairichting als TEGEL, net als kleur - GW 7-8-2026: "met een vreselijk design nog
   steeds. Doe daar nu eens een keer iets mee."
   De chips (dsw-pdp-redesign.js r.383) kregen vrijwel geen opmaak: een piepklein
   scharnier-icoontje met de tekst er direct tegenaan, twee stuks naast elkaar zonder
   kader en zonder zichtbare gekozen-staat - terwijl kleur er wel nette tegels naast
   heeft staan. Bij een koelkast bepaalt de draairichting of het apparaat thuis past;
   dat verdient dezelfde aandacht als de kleur. */
.dsw-rd-swgroup--chips .dsw-rd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}
.dsw-rd-swgroup--chips .dsw-rd-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 104px;
    padding: 12px 8px 10px;
    border: 1.5px solid #e7e7ee;
    border-radius: 12px;
    background: #fff;
    color: #2d2d5a;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}
.dsw-rd-swgroup--chips .dsw-rd-chip:hover {
    border-color: #b9b9d4;
    box-shadow: 0 2px 8px rgba(45, 45, 90, .10);
    text-decoration: none;
}
.dsw-rd-swgroup--chips .dsw-rd-chip svg {
    width: 42px;
    height: 42px;
    display: block;
    color: #2d2d5a;
}
.dsw-rd-swgroup--chips .dsw-rd-chip > span {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}
/* de gekozen richting: zelfde signaal als bij de kleurtegels - kader in de huisstijl
   plus een vinkje, zodat je in een oogopslag ziet wat er nu gekozen is */
.dsw-rd-swgroup--chips .dsw-rd-chip.current {
    border-color: #3b3b71;
    box-shadow: 0 0 0 1px #3b3b71 inset;
    position: relative;
}
.dsw-rd-swgroup--chips .dsw-rd-chip.current::after {
    content: "";
    position: absolute;
    top: 6px; right: 6px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #3b3b71 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px 10px no-repeat;
}
@media (max-width: 480px) {
    .dsw-rd-swgroup--chips .dsw-rd-chip { width: 92px; }
    .dsw-rd-swgroup--chips .dsw-rd-chip svg { width: 36px; height: 36px; }
}

/* ============================================================================
   HERONTWERP VARIANTENBLOK — de pasvraag vóór de smaakvraag (GW 7-8-2026)
   "Ik vraag mij af of je met dit blok niet veel meer design moet toepassen.
    Veel duidelijker, netter en passender maken."

   Vier punten uit die opdracht, in volgorde van gewicht:
   1. de twee groepen ZIJN niet gelijkwaardig - kleur is smaak, draairichting
      bepaalt óf het apparaat thuis past. Vandaar: de draairichting krijgt een
      eigen omkaderd paneel bovenaan, kleur blijft een rij tegels eronder.
   2. er ontbrak uitleg op het moment van kiezen. "Links" zegt een klant niets;
      "Scharnieren links - de deur opent naar rechts" wel. Tonen, niet opzoeken.
   3. twee smalle vierkantjes naast negen kleurtegels leest scheef -> bij twee
      uitkomsten brede keuzekaarten met tekst.
   4. de gekozen waarde hoort in de kop van BEIDE groepen (zat in de bron; zie
      replacement-swatches.phtml, commit 6ed003ff).
   ============================================================================ */
.dsw-rd-swgroup--gate{
  border:1.5px solid #dedbee;
  border-radius:14px;
  background:linear-gradient(180deg,#fbfaff,#fff 62%);
  padding:13px 14px 14px;
  margin:0 0 14px;
}
.dsw-rd-sw-stap{
  display:block;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--r-muted);
  margin-bottom:3px;
}
.dsw-rd-swgroup--gate .dsw-rd-sw-label{ margin-bottom:6px }
.dsw-rd-gate-uitleg{
  font-size:12.5px;
  line-height:1.45;
  color:#4a4a63;
  margin:0 0 11px;
  max-width:44em;
}
.dsw-rd-keuzes{ display:flex; flex-wrap:wrap; gap:10px }
.dsw-rd-keuze{
  flex:1 1 195px;
  min-width:172px;
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 12px;
  border:1.5px solid #e7e7ee;
  border-radius:12px;
  background:#fff;
  color:var(--r-dark);
  text-decoration:none;
  transition:border-color .15s, box-shadow .15s;
}
.dsw-rd-keuze:hover{
  border-color:#b9b9d4;
  box-shadow:0 2px 8px rgba(45,45,90,.10);
  text-decoration:none;
}
.dsw-rd-keuze-ic{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  border-radius:10px;
  background:var(--r-light);
  color:#3b3b71;
}
.dsw-rd-keuze-ic svg{ width:30px; height:30px; display:block }
.dsw-rd-keuze-tx{ display:block; min-width:0 }
.dsw-rd-keuze-tx strong{
  display:block;
  font-size:13.5px;
  font-weight:700;
  line-height:1.25;
  color:var(--r-dark);
}
.dsw-rd-keuze-tx em{
  display:block;
  font-style:normal;
  font-size:11.5px;
  line-height:1.3;
  color:var(--r-muted);
  margin-top:2px;
}
/* gekozen: zelfde signaal als bij de kleurtegels - kader in de huisstijl plus een vinkje */
.dsw-rd-keuze.current{
  border-color:#3b3b71;
  box-shadow:0 0 0 1px #3b3b71 inset;
  padding-right:32px;
}
.dsw-rd-keuze-vink{
  position:absolute;
  top:8px; right:8px;
  width:18px; height:18px;
  border-radius:50%;
  background:#3b3b71;
  color:#fff;
  font-size:11px;
  font-weight:700;
  line-height:18px;
  text-align:center;
}
/* onbekende kant: geen icoon en geen bewering, wél een uitweg naar een mens */
.dsw-rd-keuze.onbekend .dsw-rd-keuze-tx em{ color:#8a6d1f }
.dsw-rd-gate-uitweg{
  font-size:12px;
  line-height:1.45;
  color:#4a4a63;
  margin:11px 0 0;
}
.dsw-rd-gate-uitweg a{ color:#3b3b71; font-weight:700 }

/* Mobiel: de twee uitkomsten blijven NAAST elkaar staan - de klant vergelijkt ze,
   dus onder elkaar zetten haalt precies de vergelijking weg. Het icoon gaat boven
   de tekst zodat er ruimte is voor de uitlegregel. */
@media (max-width:480px){
  .dsw-rd-keuze{
    flex:1 1 calc(50% - 5px);
    min-width:0;
    flex-direction:column;
    align-items:flex-start;
    gap:7px;
    padding:10px;
  }
  .dsw-rd-keuze.current{ padding-right:10px }
  .dsw-rd-keuze-ic{ width:38px; height:38px }
  .dsw-rd-keuze-ic svg{ width:26px; height:26px }
  .dsw-rd-swgroup--gate{ padding:12px }
}

/* Het vinkje op de GEKOZEN kleurtegel. Deze regel ontbrak omdat de gekozen tegel er tot
   7-8-2026 nooit was: de bron gaf het huidige product alleen aan de laatste optiegroep,
   dus de kleurrij had nooit een `.current` (zie replacement-swatches.phtml, 6ed003ff).
   Zonder positionering rendert `.dsw-rd-sw-check` als een tekstregel ónder de foto en
   rekt hij via de flexrij ALLE tegels 22px hoger (gemeten: 100 -> 122px). */
.dsw-rd-sw .dsw-rd-sw-img{ position:relative; display:block }
.dsw-rd-sw .dsw-rd-sw-check{
  position:absolute;
  top:5px; right:5px;
  width:18px; height:18px;
  margin:0;
  border-radius:50%;
  background:#3b3b71;
  color:#fff;
  font-size:11px;
  font-weight:700;
  line-height:18px;
  text-align:center;
}



/* ============================================================
   LEESKOLOM OP DE PDP-TEKSTPANELEN (GW 7-8-2026, variant 4)

   Gemeten met nulmeting/regelbreedte-pdp.mjs op 1440px, VOOR deze regels:
     Garantie 157 tekens · inleiding Beschrijving 154 · Info van fabrikant 117.
   Dat is geen probleem van het merkentext-blok (dat zit na de opmaak van vandaag op ~91)
   maar van de panelen zelf. Drie ingrepen, in deze volgorde:

     1. lopende tekst krijgt een leeskolom van 820px  -> ~97 tekens
     2. een verhaalblok MET foto's houdt de VOLLE breedte: het heeft die ruimte nodig voor
        de zwevende foto naast de tekst
     3. een verhaalblok ZONDER foto's gaat in twee kolommen -> ~68 tekens, en het paneel
        wordt er KORTER van (962 -> 890 px) in plaats van langer

   Waarom 100cqw en niet een vaste breedte of vw: het blok moet uit de 820px-leeskolom
   breken tot precies de binnenmaat van het paneel, en die is niet uit te rekenen uit de
   vensterbreedte (gemeten: 1440px venster -> 1232px paneel, 1024px venster -> 696px).
   container-type:inline-size op het paneel maakt 100cqw exact gelijk aan die binnenmaat.

   Alleen vanaf 1100px. Daaronder is er niets te winnen: daar is het paneel al smaller dan
   de leeskolom en gaat de tekst op telefoon sowieso door de bottom-sheet.
   ============================================================ */
@media (min-width:1100px){
  /* DE LEESKOLOM IS ERUIT (GW 7-8-2026) -- niet terugzetten zonder het te vragen.
     Hier stonden vier regels die de lopende tekst versmalden:
       .panel.beschrijving{ container-type:inline-size }
       .panel.beschrijving #desc-wrapper{ max-width:820px }
       .panel.beschrijving #desc-wrapper .merkentext{ width:100cqw }   (alleen om het
           fotoblok weer uit die kolom te laten breken)
       .leesmeer-container .leesmeer-inhoud{ max-width:760px }
     GW: "Garantie blok op desktop gewoon over de hele breedte. Zelfde verhaal voor info van
     fabrikant en voor beschrijving." De gemeten winst was 154/157 -> 95-103 tekens, maar een
     kortere regel is hier niet de maat waarop gekozen wordt. De twee kolommen hieronder
     blijven wel staan: die versmallen niets, die verdelen de volle breedte. */

  /* het beeldloze verhaalblok in twee kolommen — ALLEEN in het beschrijvingspaneel.
     Kaal op .merkentext zou ook de FAQ-kaarten op CMS, de categorietekst en het
     blog-FAQ-blok in kolommen zetten; die hebben hun eigen opmaak en horen erbuiten. */
  .panel.beschrijving .merkentext:not(:has(.nieuwsblockimage)){
    column-count:2;
    column-gap:56px;
    column-rule:1px solid #e6e4f0;
  }
  /* een tussenkop mag nooit als laatste regel onderaan een kolom achterblijven */
  .panel.beschrijving .merkentext:not(:has(.nieuwsblockimage)) :is(strong,em):first-child:has(+br),
  .panel.beschrijving .merkentext:not(:has(.nieuwsblockimage)) br + :is(strong,em):has(+br){
    break-after:avoid;
    break-inside:avoid;
  }
  .panel.beschrijving .merkentext:not(:has(.nieuwsblockimage)) p{ break-inside:avoid; }
}

/* ============================================================
   PDP-TOP HERINDELING — besluit GW 7-8-2026
   Zie handoffs/2026-08-07-OPDRACHT-pdp-top-server-side.md §0.
   LINKS = het product (kop, sterren, beeld) · RECHTS = de kassa.
   Additief blok; verwijderen = vorige staat.
   ============================================================ */

/* --- 1. De productkop staat nu BINNEN de fotokolom, boven de foto (view.phtml) --- */
/* dsw-product.css r.75 zet `.product-img-box .product-name{display:none}` binnen
   @media (min-width:789px) — een restant uit een eerdere indeling, precies op de plek waar de
   kop nu hoort. Gemeten gevolg van dat restant: de kop stond correct in de DOM maar was
   onzichtbaar op desktop. Hier expliciet terugzetten in plaats van die regel te verwijderen,
   zodat dit blok additief en in één keer omkeerbaar blijft. */
.product-essential .product-img-box > .product-name{
  display:block !important;
  margin:0 0 14px !important; padding:0;
  position:relative; z-index:3;              /* anders valt de kop achter de gallery */
}
/* h1 en de regel eronder op ÉÉN regel: "Smeg FS18EV2HX vrijstaande koelkast rvs".
   GW 7-8: "je mag dat regeltje zonder eerste hoofdletter ook achter de h1 zetten". */
.product-img-box > .product-name h1.item.name{
  display:inline; margin:0 !important; line-height:1.25;
}
/* inline-BLOCK en niet inline: bij een lange titel brak de regel middenin, zodat er een los
   woord ("rvs") onder de h1 achterbleef. Als inline-block valt de hele regel in één keer naar
   de volgende regel. Gemeten op /bosch-kge36eicp @1366 (titel "Bosch KGE36EICP EXCLUSIV"). */
.product-img-box > .product-name .product-subheading{
  display:inline-block !important; vertical-align:baseline;
  margin:0 0 0 .35em !important;
  font-size:.62em !important; font-weight:400 !important;
  color:var(--r-faint,#6f6d88) !important; letter-spacing:0 !important;
}
/* geen geforceerde hoofdletter meer - de bron is al kleine letter (strtolower) */
.product-img-box > .product-name .product-subheading::first-letter{ text-transform:none !important; }
/* de reviewsterren staan onder de kop, niet meer bij de prijs */
.product-img-box > .product-name .reviewtekstmini{
  display:block; margin:8px 0 0 !important;
}

/* --- 2. Actie/cashback als regel bij de prijs (i.p.v. een kader van 243px) --- */
.dsw-rd-actie{
  display:flex; align-items:center; 
  margin-top:10px; 
  border:1px solid var(--r-border,#e8e6f0); background:var(--r-light,#f4f3f9);
   font-size:13px; line-height:1.35;
}
.dsw-rd-actie-tekst{ flex:1;  }
.dsw-rd-actie-tekst strong{ display:block;   }
.dsw-rd-actie-link{ flex:none; font-size:13px; white-space:nowrap;  }

/* Vorm A — cashback mét bedrag: dit MOET opvallen (GW: "mensen zijn gek op geld terug").
   Geel en niet rood: rood is de winkelwagenknop (--r-red) en groen de leverbalk
   (--r-green); een derde rood vlak vlak boven de knop verzwakt juist die knop.
   Geel #ffc531 met donkere tekst haalt bovendien 10,4:1 contrast (WCAG AAA),
   wit-op-amber haalde maar 2,8:1. */
.dsw-rd-actie--geld{
  
  
}
.dsw-rd-actie--geld .dsw-rd-actie-badge{
  flex:none;  
    line-height:1;
   
  white-space:nowrap; 
}
.dsw-rd-actie--geld .dsw-rd-actie-tekst{  }

/* Hoogtebewaking gebeurt in de POORT, niet met max-height. Een eerste versie van dit blok
   werd 121px in plaats van 60px door één zin uitleg te veel; de verleiding is dan om het met
   overflow:hidden af te kappen. Dat verbergt informatie (bij een lange merknaam valt de
   deadline weg) en maakt de fout onzichtbaar in plaats van zichtbaar. Gemeten is dit blok
   60px op 1440 en 75px op 1366. */

/* --- 4. De kassa compact: dit is wat de knop boven de vouw brengt ---
   Zonder deze drie regels staat de knop 161px ONDER de vouw (gemeten na de eerste push);
   met deze regels erboven. Ze horen dus bij het ontwerp en niet bij de finetuning. */

/* 4a. De diensten ONDER ELKAAR (GW 7-8-2026: "niet naast elkaar maar gewoon onder elkaar").
       Een eerdere versie zette ze in twee kolommen om hoogte te winnen; GW wil dat niet.
       De opmaak van deze lijst staat in blok 5 hieronder (vormgevingsronde). */
.dsw-rd-extras .product-options,
.dsw-rd-extras .product-options dl,
.dsw-rd-extras .product-options dd,
.dsw-rd-extras .product-options .option{ margin:0 !important; padding:0 !important; }

/* 4b. Prijsblok strak: "Incl. btw · Gratis bezorging" naast de prijs in plaats van eronder.
       De actieregel is nadrukkelijk uitgezonderd - die is een eigen blok op een eigen regel. */
.dsw-rd-price > *:not(.dsw-rd-actie){
  display:inline-block !important; vertical-align:middle !important;
  margin:0 8px 0 0 !important;
}

/* 4c. De groene leverbalk compacter. GW 7-8: "die hoeft niet zo groot te zijn".
       De opmaak staat in blok 5 hieronder (vormgevingsronde): het kader is vervangen door
       een groene accentstreep, wat rustiger oogt én 12px scheelt. */
.product-essential .dsw_voorraadinfo ol.floatleft li.gechecktvink,
.product-essential .dsw_voorraadinfo .voorraadcheck{ font-size:12.5px; }

@media (max-width:899px){
  .dsw-rd-price > *:not(.dsw-rd-actie){ display:block !important; margin:0 0 4px !important; }
}

/* --- 3. Mobiel: één kolom, dus de kop staat vanzelf boven de foto --- */
@media (max-width:899px){
  .product-essential .product-img-box > .product-name{ margin:0 0 10px !important; }
  .product-img-box > .product-name h1.item.name{ font-size:22px; }
  .dsw-rd-actie{ flex-wrap:wrap; }
  .dsw-rd-actie-link{ width:100%; text-align:right; }
}
/* ============ EINDE PDP-TOP HERINDELING 7-8-2026 ============ */

/* ============================================================
   VORMGEVINGSRONDE PDP-kassa — GW 7-8-2026: "het design is lelijk, mooier/luxer maken"
   Blok 5. De indeling was af, de vormgeving niet: de kolom was een stapel omkaderde dozen
   met allemaal dezelfde visuele zwaarte (4 dienstkaders + leverkader + geel actiekader),
   en geel-op-geel-op-geel oogde goedkoop.
   Uitgangspunt hier: rust komt van witruimte, hierarchie en zachte schaduw - niet van randen.
   Additief; verwijderen = de vorige (rommelige) staat.
   ============================================================ */
/* ONTWERPVOORSTEL kassa-kolom — rustiger, luxer, minder dozen.
   Uitgangspunt: de huidige kolom is een stapel omkaderde dozen met dezelfde visuele zwaarte.
   Luxe komt van witruimte, hiërarchie en zachte schaduw — niet van randen. */

/* ---------- 1. DIENSTEN: één kaart met scheidingslijnen i.p.v. vier losse dozen ---------- */
.dsw-rd-extras{ margin-top:0 !important; }
.dsw-rd-extras-head{
  display:flex !important; align-items:baseline; justify-content:space-between;
  margin:0 0 10px !important; padding:0 2px;
}
.dsw-rd-extras-head span{
  font-size:11px !important; font-weight:700 !important; letter-spacing:.09em;
  text-transform:uppercase; color:var(--r-muted,#6b6b86) !important;
}
.dsw-rd-extras-head small{ font-size:12px !important; color:var(--r-muted,#6b6b86) !important; }

.product-essential .dsw-rd-extras .options-list{
  display:block !important; margin:0 !important; padding:0 !important;
  background:#fff; border:1px solid var(--r-border,#e8e6f0); border-radius:14px;
  box-shadow:0 1px 2px rgba(35,35,80,.04), 0 8px 24px rgba(35,35,80,.06);
  overflow:hidden;
}
.product-essential .dsw-rd-extras .options-list > li{
  border:0 !important; border-radius:0 !important; background:transparent !important;
  margin:0 !important; padding:0 16px !important;
  min-height:52px !important;                     /* was 60px, inhoud is 28px */
  display:flex !important; 
  box-shadow:none !important;
}
.product-essential .dsw-rd-extras .options-list > li + li{
  border-top:1px solid #f0eff6 !important;        /* dunne scheiding i.p.v. een nieuwe doos */
}
.product-essential .dsw-rd-extras .options-list > li:hover{ background:#fcfcfe !important; }

/* prijzen netjes in één kolom, vlak vóór de schakelaar */
.product-essential .dsw-rd-extras .options-list > li .price-notice,
.product-essential .dsw-rd-extras .options-list > li .price{
  color:var(--r-text,#1d1d33) !important; font-weight:600 !important; font-size:13.5px !important;
}

/* de schakelaar: kleiner, strakker, merkkleur als 'aan' */
.product-essential .options-list > li .label label::before{
  width:38px !important; height:22px !important; border-radius:999px !important;
  background:#dcdae8 !important; border:0 !important; box-shadow:none !important;
  transition:background .18s ease;
}
.product-essential .options-list > li .label label::after{
  width:18px !important; height:18px !important; right:auto !important;
  left:calc(100% - 36px) !important; border-radius:50% !important;
  background:#fff !important; box-shadow:0 1px 3px rgba(35,35,80,.28) !important;
  transition:transform .18s ease;
}
.product-essential .options-list > li input.product-custom-option:checked + .label label::before{
  background:var(--r-green,#3daa35) !important;
}
.product-essential .options-list > li input.product-custom-option:checked + .label label::after{
  transform:translateY(-50%) translateX(16px) !important;
}

/* ---------- 2. LEVERBALK: geen kader, maar een rustige regel met accent ---------- */
.product-essential .dsw_voorraadinfo{
   
  
  
  
   
  
}
.product-essential .dsw_voorraadinfo strong{  }
.product-essential .dsw_voorraadinfo .productpage-voorraad-niet-2,
.product-essential .dsw_voorraadinfo span[class*="productpage-voorraad"]{ display:none !important; }

/* ---------- 3. PRIJS: meer hiërarchie, en lucht tussen bedrag en bijregel ---------- */
.dsw-rd-price{ margin-top:16px !important; }
.dsw-rd-price-top{  }
.dsw-rd-price-top .price-box .price{ letter-spacing:-.025em !important; line-height:1.05 !important; }
/* de bijregel plakte tegen het bedrag omdat alles inline-block op één regel staat */
.dsw-rd-price-sub{ color:var(--r-muted,#6b6b86) !important; font-size:13.5px !important;
   }
.dsw-rd-in3{ font-size:13px !important; color:var(--r-muted,#6b6b86) !important;
   }

/* ---------- 4. ACTIE/CASHBACK: luxer — wit met goud, niet geel-op-geel ---------- */
.dsw-rd-actie--geld{
  background:#fff !important;
  border:1px solid #ecd9a6 !important;
  border-radius:14px !important;
  box-shadow:0 1px 2px rgba(120,90,10,.05), 0 8px 22px rgba(160,120,20,.10) !important;
  padding:12px 14px !important; gap:14px !important;
}
.dsw-rd-actie--geld .dsw-rd-actie-badge{
  background:linear-gradient(180deg,#f7c948,#e6ac1f) !important;
  color:#3a2c05 !important;
  font-size:15px !important; font-weight:800 !important;
  padding:8px 12px !important; border-radius:10px !important;
  box-shadow:0 1px 2px rgba(120,90,10,.25) !important;
  letter-spacing:-.01em !important;
}
.dsw-rd-actie--geld .dsw-rd-actie-tekst{ color:var(--r-muted,#6b6b86) !important; font-size:12.5px !important;
  line-height:1.45 !important; }
.dsw-rd-actie--geld .dsw-rd-actie-tekst strong{
  font-size:14.5px !important; color:var(--r-text,#1d1d33) !important; margin-bottom:1px;
  font-weight:700 !important;
}
/* de deadline stond als losse vetgedrukte staart achter een zwevende punt; nu een eigen
   regel onder de uitleg, zodat er geen rare afbreking meer in zit */
.dsw-rd-actie--geld .dsw-rd-actie-tekst strong:last-child{
  display:inline; font-size:12.5px !important; color:#8a6a12 !important; margin:0;
}
.dsw-rd-actie-link{ color:#8a6a12 !important; font-weight:600 !important; align-self:center; }

/* ---------- 5. KNOP: luxer, met lucht eromheen ---------- */
.dsw-rd-cta{ margin-top:18px !important; }
.dsw-rd-cta button.btn-cart{
   height:58px !important;
   font-weight:700 !important; letter-spacing:-.01em !important;
  
   
}
.dsw-rd-cta button.btn-cart:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(197,48,47,.32), 0 14px 30px rgba(197,48,47,.24) !important;
}

/* ---------- 6. USP's: rustiger, geen zwaar blok ---------- */
.dsw-rd-trust{ margin-top:18px !important; padding-top:16px !important;
  border-top:1px solid var(--r-border,#e8e6f0) !important; }
.dsw-rd-trust .usps{ font-size:13.5px !important; }
.dsw-rd-pay span{
  border:1px solid var(--r-border,#e8e6f0) !important; background:#fff !important;
  border-radius:8px !important; font-size:11px !important; color:var(--r-muted,#6b6b86) !important;
  box-shadow:none !important;
}

/* ---------- 7. Smal scherm ---------- */
@media (max-width:560px){
  /* kop en toelichting naast elkaar wrapten allebei over twee regels; nu onder elkaar */
  .dsw-rd-extras-head{ display:block !important; }
  .dsw-rd-extras-head small{ display:block; margin-top:2px; }
  .product-essential .dsw-rd-extras .options-list > li{ padding:0 14px !important; }
  .dsw-rd-actie--geld{ flex-wrap:wrap; }
  .dsw-rd-actie--geld .dsw-rd-actie-link{ width:100%; text-align:right; margin-top:2px; }
}
/* ============ EINDE VORMGEVINGSRONDE 7-8-2026 ============ */

/* ============================================================
   VORMGEVINGSRONDE 2 — GW 7-8-2026, uit de tweede kijkronde
   Blok 6. Additief; verwijderen = de staat van blok 5.
   ============================================================ */

/* --- 6a. De productkop: VOL-BREEDTE boven beide kolommen, sterren rechts ---
   GW: "ik zou dit uit het witte blok willen en erboven" + "je zou dit hele blok ook naast
   elkaar kunnen plaatsen over de volle breedte van het product? Dan krijg je de reviewsterren
   rechtsboven".
   De grid-plaatsing is EXPLICIET. Zonder grid-column:1/-1 pakt auto-placement een gewone cel
   en verschuift de hele tweekolommen-indeling - dat is eerder gemeten (knop 162px slechter). */
/* GEEN flex op deze container: h1 en .product-subheading worden dan losse flex-items en
   space-between duwt de ondertitel naar het midden. Ze horen als lopende tekst achter elkaar
   ("Smeg C9GMXNLK2 gas fornuis met 6 branders, rvs"). Daarom block + inline kinderen, en de
   sterren met float naar rechts. */
/* GW 7-8-2026, herzien: "Ik denk toch dat we alleen de rechter kolom hoger moeten laten
   beginnen en de review sterren dus toch onder de h1 title moeten plaatsen. Dan win je meer
   ruimte."
   Dus GEEN vol-breedte kopbalk meer: de kop staat in de LINKERkolom (rij 1), de foto eronder
   (rij 2), en de kassa loopt over beide rijen — die begint dus bovenaan, op gelijke hoogte met
   de titel. Dat scheelt de volle kophoogte in de kassa-kolom.
   De grid-plaatsing is expliciet; zonder deze regels pakt auto-placement een gewone cel en
   verschuift de hele indeling (gemeten: knop 162px slechter).
   De KOLOM-gap blijft 56px (ruimte tussen foto en kassa), alleen de rij-gap gaat omlaag. */
.product-essential #product_addtocart_form{
  
  
}
.product-essential #product_addtocart_form > .product-name{
   
  
   
   
  
}
.product-essential #product_addtocart_form > .product-name h1.item.name{
    
   
}
/* GW: "Dit moet dan groter" - was 0.62em (ongeveer 10px), nu 17px op de basislijn van de titel */
.product-essential #product_addtocart_form > .product-name .product-subheading{
   vertical-align:baseline !important;
  
    
   
}
.product-essential #product_addtocart_form > .product-name .product-subheading::first-letter{
  text-transform:none !important;
}
/* sterren ONDER de titel (GW), niet meer rechts in de balk */
.product-essential #product_addtocart_form > .product-name .reviewtekstmini{
  float:none !important; display:block !important; margin:8px 0 0 !important;
}
.product-essential #product_addtocart_form > .product-name .reviewtekstmini a{
  display:inline-flex !important;
}
.product-essential #product_addtocart_form > .product-name .reviewtekstmini a{
   align-items:center; gap:8px;
  padding:5px 12px; border-radius:999px;
  background:var(--r-panel,#faf9fd); border:1px solid var(--r-border,#e8e6f0);
  text-decoration:none;
}
.product-essential #product_addtocart_form > .product-name .ratingtekstview{
  font-size:13.5px; font-weight:600; color:var(--r-text,#1d1d33);
}
.product-essential #product_addtocart_form > .product-img-box{
   
}
/* de kassa loopt over BEIDE rijen en begint dus bovenaan, naast de titel */
.product-essential #product_addtocart_form > .dsw-rd-buy{
   
}

/* --- 6b. Leverbalk: het groene vlak TERUG en eruit springend ---
   GW: "Dit blok is zo belangrijk voor conversie, die moet gewoon die groene achtergrond
   krijgen en eruit springen." In blok 5 was het teruggebracht tot een accentstreep - te veel
   rust voor de conversiekern. Nu een vol groen vlak, maar strak: zachte groene gloed in
   plaats van een harde rand. */
.product-essential .dsw_voorraadinfo{
  background:linear-gradient(180deg,#f2fbf0,#e9f7e6) !important;
  border:1px solid #c8e8c0 !important;
  border-left:4px solid var(--r-green,#3daa35) !important;
  border-radius:12px !important;
  box-shadow:0 1px 2px rgba(61,170,53,.10), 0 8px 20px rgba(61,170,53,.12) !important;
  padding:10px 14px !important;
  margin:16px 0 0 !important;
  font-size:14.5px !important; line-height:1.4 !important;
}
.product-essential .dsw_voorraadinfo strong{ color:#237a1f !important; font-weight:800 !important; }

/* --- 6c. Titel per optiegroep ---
   GW: "hoe doen we dat met 2 blokken bezorgopties? Nogmaliter staat daar het woord
   Aansluitmateriaal bij de tweede voor (de titel van de bezorgoptie, maar die mis ik nu)".
   Magento zet elke groep in .option > dl > dt > label en die dt stond op display:none.
   Alleen tonen bij groepen met echt zichtbare opties: een product heeft ook verborgen groepen
   (bijvoorbeeld "Kleur" als select) en die mogen geen lege kop krijgen. */
/* alleen bij MEER dan één groep met zichtbare opties; die klasse zet dsw-pdp-redesign.js.
   Bij één groep is "Bezorgopties" enkel een herhaling van de kop erboven, en die herhaling
   kostte 34px boven de vouw. */
.dsw-rd-extras .option:has(ul.options-list li) dl > dt{
  display:block !important;
  margin:14px 0 6px !important; padding:0 2px !important;
}
.dsw-rd-extras .option:has(ul.options-list li) dl > dt label{
  display:inline !important; float:none !important; width:auto !important; min-width:0 !important;
  font-size:11px !important; font-weight:700 !important; letter-spacing:.09em !important;
  text-transform:uppercase !important; color:var(--r-muted,#6b6b86) !important;
  background:transparent !important; padding:0 !important;
}
.dsw-rd-extras .option:first-of-type dl > dt{ margin-top:0 !important; }

/* --- 6d. Variantenblok: strakker, netter, meer bij elkaar ---
   GW: "dit blok moet echt strakker en netter en meer bij elkaar ... het totaal design van dit
   blok moet echt veel moderner strakker en mooier". De algemene uitlegzin is uit de JS
   gehaald (buildGateGroup); wat de kant betekent staat nog steeds onder elke keuzekaart. */
.dsw-rd-swatches{
  background:#fff; border:1px solid var(--r-border,#e8e6f0); border-radius:16px;
  box-shadow:0 1px 2px rgba(35,35,80,.04), 0 8px 24px rgba(35,35,80,.06);
  padding:16px !important; margin-top:18px !important;
}
.dsw-rd-swatches .dsw-rd-swgroup{
  background:transparent !important; border:0 !important; border-radius:0 !important;
  padding:0 !important; margin:0 !important; box-shadow:none !important;
}
.dsw-rd-swatches .dsw-rd-swgroup + .dsw-rd-swgroup{
  margin-top:14px !important; padding-top:14px !important;
  border-top:1px solid #f0eff6 !important;
}
.dsw-rd-sw-label{
  font-size:11px !important; font-weight:700 !important; letter-spacing:.09em !important;
  text-transform:uppercase !important; color:var(--r-muted,#6b6b86) !important;
  margin:0 0 10px !important;
}
.dsw-rd-sw-label b, .dsw-rd-sw-label strong{
  color:var(--r-text,#1d1d33) !important; text-transform:none !important;
  font-size:14px !important; letter-spacing:0 !important;
}
.dsw-rd-sw-stap{
  display:inline-block; font-size:10px !important; font-weight:700 !important;
  letter-spacing:.08em; text-transform:uppercase;
  color:#5b5b8a !important; background:#eeedf6; border-radius:999px;
  padding:3px 9px !important; margin:0 0 8px !important;
}
.dsw-rd-keuzes{ gap:10px !important; }
.dsw-rd-keuze{
  padding:10px 12px !important; border-radius:12px !important;
  box-shadow:inset 0 0 0 1px var(--r-border,#e8e6f0) !important;
  transition:box-shadow .15s ease, background .15s ease;
}
.dsw-rd-keuze:hover{ background:#fcfcfe !important; box-shadow:inset 0 0 0 1px #c9c7dd !important; }
.dsw-rd-keuze.current{
  background:#f7f6fd !important;
  box-shadow:inset 0 0 0 2px var(--r-dark,#2d2d5a) !important;
}
.dsw-rd-keuze strong{ font-size:14.5px !important; }
.dsw-rd-keuze em{ font-size:12.5px !important; color:var(--r-muted,#6b6b86) !important; font-style:normal !important; }
.dsw-rd-sw{
  border-radius:12px !important;
  box-shadow:inset 0 0 0 1px var(--r-border,#e8e6f0) !important;
  transition:box-shadow .15s ease;
}
.dsw-rd-sw:hover{ box-shadow:inset 0 0 0 1px #c9c7dd !important; }
.dsw-rd-sw.current{ box-shadow:inset 0 0 0 2px var(--r-dark,#2d2d5a) !important; }
.dsw-rd-sw-name{ font-size:11.5px !important; }

@media (max-width:899px){
  .product-essential #product_addtocart_form > .product-name{
     
  }
  .product-essential #product_addtocart_form > .product-name h1.item.name{  }
  .product-essential #product_addtocart_form > .product-name .product-subheading{  }
  /* op smal geen float: de sterren komen onder de titel op een eigen regel */
  .product-essential #product_addtocart_form > .product-name .reviewtekstmini{
    float:none !important;  
  }
  .product-essential #product_addtocart_form > .product-name .reviewtekstmini a{  }
  .dsw-rd-swatches{ padding:14px !important; }
}
/* ============ EINDE VORMGEVINGSRONDE 2 ============ */

/* ============================================================
   Merklogo in "Info van fabrikant" — GW 7-8-2026
   1. "wil je om het logo bij info van fabrikant nog een witte achtergrond, een afgerond blok
      en schaduw plaatsen voor luxe uitstraling"
   2. "het logo is eigenlijk een button naar meer info op de merkpagina. Misschien kun je dat
      ook in het witte blokje verwerken (alleen op desktop)"

   Het logo is een JPG met een eigen wit vlak (img.brandlogoproductpage), dus tegen de lila
   paginakleur oogde het als een uitgeknipte rechthoek met scherpe hoeken.

   De kaart hangt aan de <a> en niet aan de img: dsw-product.css r.1341 zet float:right op de
   IMG. Maak je de <a> eromheen inline-block, dan floatte het logo binnen dat kleine doosje en
   landde het linksboven in plaats van rechts naast de tekst. De float verhuist dus mee.
   ============================================================ */
@media only screen and (min-width:600px){
  .panel.infofabrikant a:has(> img.brandlogoproductpage){
    float:right;
    display:block;
    margin:0 0 14px 26px;
    padding:18px 22px 13px;
    background:#fff;
    border:1px solid var(--r-border,#e8e6f0);
    border-radius:16px;
    box-shadow:0 1px 2px rgba(35,35,80,.05), 0 10px 26px rgba(35,35,80,.08);
    text-align:center;
    text-decoration:none;
    transition:box-shadow .18s ease, transform .12s ease;
  }
  .panel.infofabrikant a:has(> img.brandlogoproductpage):hover{
    transform:translateY(-1px);
    box-shadow:0 2px 6px rgba(35,35,80,.08), 0 16px 34px rgba(35,35,80,.12);
  }
  /* het logo zelf is binnen de kaart een gewoon blokje - de kaart doet de vormgeving */
  .panel.infofabrikant a > img.brandlogoproductpage{
    float:none !important;
    display:block;
    margin:0 auto !important;
    background:transparent;
    border:0;
    box-shadow:none;
    padding:0;
  }
  /* de kaart is een knop naar de merkpagina; dat moet je kunnen zien */
  .panel.infofabrikant a:has(> img.brandlogoproductpage)::after{
    content:"Meer over dit merk \203A";
    display:block;
    margin-top:11px;
    font:600 12.5px/1.2 'Inter',system-ui,sans-serif;
    color:#00539f;
    white-space:nowrap;
  }
}

/* ============================================================
   PDP-TOP, derde ronde — GW 7-8-2026
     1. reviewsterren rechtsboven, op de hoogte van het kruimelpad
     2. titel + ondertitel weer boven de prijs ("was toch het meest rustige")
     3. daaronder de bezorgopties in blokken
     4. daaronder usp's + betaalmethoden
     5. daaronder de replacement swatches, opnieuw vormgegeven
   Volgorde 3/4/5 zit in dsw-pdp-redesign.js (buildBuybox).
   Dit blok komt NA blok 6 en overschrijft de kop-plaatsing daaruit.
   ============================================================ */

/* --- 8a. Het grid: foto links over de volle hoogte, kop rechtsboven, kassa eronder ---
   De kop staat hiermee visueel boven de prijs ZONDER dat JavaScript hem verplaatst. Dat is
   het verschil met blok 6: zou de JS hem naar .dsw-rd-buy verhuizen, dan staat hij bij de
   eerste pixel ergens anders dan erna en keert de laadsprong terug (die vandaag van 0,0755
   naar 0 is gebracht). */
.product-essential #product_addtocart_form{
  grid-template-rows:auto 1fr !important;
  row-gap:14px !important;
}
.product-essential #product_addtocart_form > .product-name{
  grid-column:2 !important; grid-row:1 !important;
  display:block !important;
  margin:0 !important; padding:0 !important;
  background:transparent !important; box-shadow:none !important; border:0 !important;
}
.product-essential #product_addtocart_form > .product-img-box{
  grid-column:1 !important; grid-row:1 / span 2 !important;
}
.product-essential #product_addtocart_form > .dsw-rd-buy{
  grid-column:2 !important; grid-row:2 !important;
}

/* --- 8b. Titel en ondertitel: ondertitel op een EIGEN regel ---
   In de vorige ronde stond hij achter de h1; bij een lange titel brak dat lelijk af
   ("...en 1600 / toeren"). GW's voorbeeld toont hem op een eigen regel. */
.product-essential .dsw-rd-buy .product-name h1.item.name,
.product-essential #product_addtocart_form > .product-name h1.item.name{
  display:block !important;
  margin:0 0 4px !important;
  font-size:29px !important; line-height:1.15 !important; letter-spacing:-.02em;
}
.product-essential .dsw-rd-buy .product-name .product-subheading,
.product-essential #product_addtocart_form > .product-name .product-subheading{
  display:block !important;
  margin:0 !important;
  font-size:16px !important; font-weight:500 !important; line-height:1.4 !important;
  color:var(--r-muted,#6b6b86) !important; letter-spacing:0 !important;
}
.product-essential #product_addtocart_form > .product-name .product-subheading::first-letter{
  text-transform:uppercase;
}

/* --- 8c. Reviewsterren rechtsboven, op de hoogte van het kruimelpad ---
   `div.main` is de gemeenschappelijke ouder van .breadcrumbs en .product-view, dus daar hangen
   we ze absoluut aan op. Absoluut gepositioneerd telt niet mee in de layout, dus dit kost geen
   laadsprong. Onder 900px vervalt het en staan de sterren gewoon onder de titel. */
@media (min-width:900px){
  body.catalog-product-view .main{  }
  body.catalog-product-view .product-essential .reviewtekstmini{
    
     
    
    
  }
  body.catalog-product-view .product-essential .reviewtekstmini a{
      
     
    background:#fff; 
    box-shadow:0 1px 2px rgba(35,35,80,.05);
     white-space:nowrap;
  }
  body.catalog-product-view .product-essential .reviewtekstmini .ratingtekstview{
      
  }
}

/* --- 8d. Replacement swatches: opnieuw vormgegeven ---
   GW: "daaronder een fraaie helemaal opnieuw vormgegeven blok met replacement swatches".
   Uitgangspunt: het is geen formulier maar een KEUZE tussen uitvoeringen. Dus grotere,
   rustiger tegels met het beeld voorop, een duidelijke gekozen-staat, en de groepsnaam als
   kleine bovenkop met de gekozen waarde er groot achter. */
.dsw-rd-swatches{
  background:#fff !important;
  border:1px solid var(--r-border,#e8e6f0) !important;
  border-radius:18px !important;
  box-shadow:0 1px 2px rgba(35,35,80,.04), 0 10px 28px rgba(35,35,80,.07) !important;
  padding:18px !important;
  margin-top:18px !important;
}
.dsw-rd-swatches .dsw-rd-swgroup + .dsw-rd-swgroup{
  margin-top:16px !important; padding-top:16px !important;
  border-top:1px solid #f1f0f7 !important;
}
.dsw-rd-sw-label{
  display:flex !important; align-items:baseline; gap:8px; flex-wrap:wrap;
  font-size:11px !important; font-weight:700 !important; letter-spacing:.09em !important;
  text-transform:uppercase !important; color:var(--r-muted,#6b6b86) !important;
  margin:0 0 12px !important;
}
.dsw-rd-sw-label b, .dsw-rd-sw-label strong{
  font-size:15px !important; font-weight:700 !important; letter-spacing:0 !important;
  text-transform:none !important; color:var(--r-text,#1d1d33) !important;
}
.dsw-rd-sw-stap{
  order:-1; flex:0 0 auto;
  display:inline-block; font-size:10px !important; font-weight:700 !important;
  letter-spacing:.08em; text-transform:uppercase;
  color:#4a4a7d !important; background:#eeedf7; border-radius:999px;
  padding:4px 10px !important; margin:0 !important;
}
/* keuzekaarten (draairichting): rustiger, met een echte gekozen-staat */
.dsw-rd-keuzes{ gap:12px !important; }
.dsw-rd-keuze{
  padding:12px 14px !important; border-radius:14px !important;
  background:#fff !important;
  box-shadow:inset 0 0 0 1px var(--r-border,#e8e6f0) !important;
  transition:box-shadow .15s ease, background .15s ease, transform .12s ease;
}
.dsw-rd-keuze:hover{
  background:#fbfbfe !important; transform:translateY(-1px);
  box-shadow:inset 0 0 0 1px #c6c3dd, 0 6px 16px rgba(35,35,80,.08) !important;
}
.dsw-rd-keuze.current{
  background:#f6f5fd !important;
  box-shadow:inset 0 0 0 2px var(--r-dark,#2d2d5a) !important;
}
.dsw-rd-keuze strong{ font-size:14.5px !important; }
.dsw-rd-keuze em{
  font-size:12.5px !important; font-style:normal !important;
  color:var(--r-muted,#6b6b86) !important;
}
/* kleurtegels: beeld voorop, label eronder, subtiele ring */
.dsw-rd-sw{
  border-radius:14px !important; padding:8px !important;
  background:#fff !important;
  box-shadow:inset 0 0 0 1px var(--r-border,#e8e6f0) !important;
  transition:box-shadow .15s ease, transform .12s ease;
}
.dsw-rd-sw:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px #c6c3dd, 0 8px 18px rgba(35,35,80,.10) !important;
}
.dsw-rd-sw.current{ box-shadow:inset 0 0 0 2px var(--r-dark,#2d2d5a) !important; }
.dsw-rd-sw-name{
  font-size:11.5px !important; font-weight:600 !important;
  color:var(--r-text,#1d1d33) !important;
}

@media (max-width:899px){
  .product-essential #product_addtocart_form > .product-name{
    grid-column:1 !important; grid-row:auto !important;
  }
  .product-essential #product_addtocart_form > .product-img-box,
  .product-essential #product_addtocart_form > .dsw-rd-buy{
    grid-column:1 !important; grid-row:auto !important;
  }
  .product-essential #product_addtocart_form > .product-name h1.item.name{  }
  .product-essential #product_addtocart_form > .product-name .product-subheading{  }
  .dsw-rd-swatches{ padding:14px !important; }
}
/* ============ EINDE PDP-TOP DERDE RONDE ============ */

/* ============================================================
   PDP-TOP — twee correcties, GW 7-8-2026
   ============================================================ */

/* --- 9a. Reviewsterren: uitgelijnd op het PRODUCT, en op de regelhoogte van het kruimelpad ---
   GW: "review sterren iets meer naar links toe (uitgelijnd op het product) en iets meer naar
   beneden (letters zelfde hoogte als breadcrumb)".

   Ze hingen aan div.main, en dat is de verkeerde container: gemeten liep .main op 1920px van
   96 tot 1824, terwijl het product (en het kruimelpad) van 300 tot 1620 loopt. De sterren
   stonden daardoor 236px te ver naar rechts op grote schermen — op 1440 viel dat niet op,
   want daar zijn beide 72..1368.
   Het FORMULIER lijnt op elke breedte exact uit met het kruimelpad, dus daar hangen we ze aan.
   Verticaal: het kruimelpad heeft zijn tekstmidden op y=240 en het formulier begint op y=257;
   met een pilhoogte van 32px komt de bovenkant dan op -33px. */
@media (min-width:900px){
  body.catalog-product-view .main{ position:static; }   /* was relative — nu niet meer nodig */
  .product-essential #product_addtocart_form{ position:relative; }
  body.catalog-product-view .product-essential .reviewtekstmini{
    position:absolute !important;
    top:-41px !important; right:0 !important;
    
    z-index:4;
  }
}

/* --- 9b. De koopkolom staat meteen rechts, ook vóór het JavaScript ---
   GW: "als ik op CTRL+SHIFT+R druk zie ik eerst de foto en de h1 met de tekst daaronder. Dan
   even niks en dan pas de rest van de rechter kolom."

   Gemeten met de CPU 4x vertraagd: op 688 ms staan foto en kop er, maar de koopinhoud
   (.cart-desktop) staat dan op y=1003 — ónder de foto, buiten beeld — en pas op 1855 ms
   bouwt de JS .dsw-rd-buy en springt alles naar rechts. Dus ruim een seconde een lege
   rechterkolom. Dat is géén layout-shift (er verschuift niets zichtbaars, vandaar CLS 0),
   maar het is wel precies wat GW ziet.

   Dit is een verzachting, geen oplossing: de echte oplossing is de koopkolom server-side in
   zijn eindvorm renderen (zie handoffs/2026-08-07-OPDRACHT-pdp-top-server-side.md). Hier
   zetten we de server-HTML alvast in de rechterkolom, zodat er meteen prijs en knop staan in
   plaats van niets. Zodra de JS .dsw-rd-buy bouwt, verhuizen deze blokken daarin en verbergt
   de bestaande CSS ze. */
@media (min-width:900px){
  .product-essential #product_addtocart_form > .product-shop,
  .product-essential #product_addtocart_form > .cart-desktop{
    grid-column:2 !important;
  }
}
/* ============ EINDE 9a/9b ============ */






/* ============================================================
   10. PDP-KOP OP MOBIEL — GW 8-8-2026
   GW: "de h1 en de regel eronder zijn nog hetzelfde en de review sterren moeten toch anders."
   Gekozen uit vier gerenderde ontwerpen: de soort als kleine bovenkop, de titel groot, de
   samengestelde regel eronder als tegels, en de sterren klein en zonder kader.

   Twee dingen die de opbouw hieronder verklaren:

   1. De bovenkop staat in de DOM ná de h1 en komt er met `order:-1` visueel bóven. De h1
      blijft dus gewoon het eerste element van het blok - een bovenkop die in de bron vóór de
      titel staat zou de koppenstructuur van de pagina veranderen.
   2. Of er tegels staan bepaalt de template (zie view.phtml): waar de samengestelde regel niet
      in korte feiten uiteenvalt, blijft de gewone zin staan. `:has()` schakelt dan tussen die
      twee vormen. Gemeten op 600 producten: 217 met tegels, 210 met de zin, 173 zonder
      subtitel.

   Wat hiervoor op deze plek stond (rating naast het kruimelpad, kruimelpad afkappen, twee
   ratingvormen) is vervallen - GW koos een ander ontwerp.
   ============================================================ */

/* Bovenkop en tegels bestaan alleen op mobiel. Op desktop blijft de regel achter de titel
   staan zoals hij stond (zie 6a), en de sterren blijven rechtsboven (9a). */
/* "Bekijk ook:"-regel onder de kopzin (12-9-2026, shell/dsw-direct-naar.tsv): de uitweg naar
   de categorie voor bezoekers die op een categoriezoekterm op dit product landen. */
.product-essential .product-name .dsw-direct{margin:6px 0 0;font-size:14px;line-height:1.5}
.product-essential .product-name .dsw-direct .dsw-direct-kop{font-weight:700}
.product-essential .product-name .dsw-direct a{color:#2d2d5a;text-decoration:underline}
.product-essential .product-name .dsw-kop-soort,
.product-essential .product-name .dsw-kop-feiten{ display:none; }

@media (max-width:899px){
  /* De volgorde in de DOM is h1 > bovenkop > regel > rating; `order` maakt er
     bovenkop + rating (één regel) > h1 > regel van. De h1 en de regel pakken 100%, dus die
     beginnen altijd een nieuwe regel. Passen bovenkop en rating samen niet op één regel - bij
     een lange soort als "Inductie fornuis met afzuiging" - dan wipt de rating vanzelf naar de
     regel eronder. Geen vaste breedtes, dus geen botsing om in de gaten te houden.

     `align-items:center` en niet `baseline`: de rating is een inline-flex met een geschaalde
     sterrenbalk erin, en die bepaalt dan de basislijn van het hele blok. Gemeten stond de
     ratingtekst daardoor 3px hoger dan "WASMACHINE"; met center is het verschil 0. */
  .product-essential #product_addtocart_form > .product-name{
    display:flex !important; flex-wrap:wrap; align-items:center;
    padding-bottom:0 !important; margin:0 0 14px !important;
  }

  /* 10a. de soort als kleine bovenkop */
  .product-essential #product_addtocart_form > .product-name .dsw-kop-soort{
    display:block; order:-2; flex:0 1 auto;
    font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
    color:var(--r-muted,#6b6b86); margin:0 0 5px;
  }

  /* 10b. de titel - altijd op een eigen regel */
  .product-essential #product_addtocart_form > .product-name h1.item.name{
    order:0; flex:0 0 100%;
    font-size:27px !important; line-height:1.03 !important;
    letter-spacing:-.03em !important; margin:0 !important;
  }

  /* 10c. de regel eronder: tegels waar het kan, anders de gewone zin */
  .product-essential #product_addtocart_form > .product-name .product-subheading{
    order:1; flex:0 0 100%;
    display:block !important; margin:11px 0 0 !important;
    font-size:15px !important; font-weight:500 !important; line-height:1.4 !important;
    color:var(--r-muted,#6b6b86) !important;
  }
  .product-essential #product_addtocart_form > .product-name .dsw-kop-feiten{
    display:flex; flex-wrap:wrap; gap:7px;
  }
  .product-essential #product_addtocart_form > .product-name .dsw-kop-feit{
    font-size:13px; font-weight:700; color:#3b3b71;
    background:#fff; border:1px solid var(--r-border,#e8e6f0); border-radius:999px;
    padding:5px 11px; box-shadow:0 1px 2px rgba(35,35,80,.04);
  }
  .product-essential #product_addtocart_form > .product-name .product-subheading:has(.dsw-kop-feiten) .dsw-kop-zin{
    display:none;
  }

  /* 10d. de sterren: klein, geen kader, geen vlak, en rechts op de regel van de bovenkop.
     GW 8-8: "die reviews en sterren rechts uitgelijnd op de hoogte van WASMACHINE, dan winnen
     we weer een stuk". `margin-left:auto` duwt ze naar rechts; ze kosten daarmee geen eigen
     regel meer - het kopblok gaat van 128 naar 93px. */
  .product-essential #product_addtocart_form > .product-name .reviewtekstmini{
    order:-1; flex:0 0 auto;
    position:static !important; display:block !important;
    margin:0 0 5px auto !important;
  }
  .product-essential #product_addtocart_form > .product-name .reviewtekstmini a{
    display:inline-flex !important; align-items:center;
    background:none !important; border:0 !important; box-shadow:none !important;
    padding:0 !important; border-radius:0 !important; text-decoration:none;
  }
  /* transform verandert de layoutbreedte niet, vandaar de negatieve marge erachter */
  .product-essential #product_addtocart_form > .product-name .starbar{
    transform:scale(.8); transform-origin:left center; margin-right:-20px;
  }
  .product-essential #product_addtocart_form > .product-name .ratingtekstview{
    font-size:12.5px !important; font-weight:600 !important; color:var(--r-muted,#6b6b86) !important;
  }
}
/* ============ EINDE 10 ============ */

/* ============================================================
   Blok 11 — DE GARANTIE-ACTIE ALS EIGEN VORM (vorm C) — GW 11-8-2026
   "Dit is een unieke usp maar valt bijna helemaal weg in het design."

   Vorm B (grijs kadertje, kop in kapitalen op 14px, regel "actie geldig bij dit model")
   behandelde de grootste actiegroep van de catalogus als restcategorie: 737 van de 902
   acties zijn een garantie-actie, en op 734 daarvan ligt een officieel merkzegel klaar in
   refund_image dat we niet toonden.

   Waarom NIET geel zoals de cashback: geel is in dit koopblok de kleur van "geld terug"
   (vorm A). Zou 82% van de acties dezelfde gele band krijgen, dan zegt geel niets meer -
   en dat is precies de reden dat vorm A destijds is losgetrokken van vorm B. Garantie is
   geen korting maar zekerheid, en krijgt daarom de huisstijl-navy: wit vlak, zachte
   schaduw, het merkzegel als beeldanker.

   Hoogte betaalt zichzelf terug: buildBuybox() haalt de dubbele USP-regel
   "Met 10 jaar garantie! (normaal 2 jaar)" onderaan de kassa weg zodra dit blok er staat.
   Additief; dit blok verwijderen = terug naar vorm B.
   ============================================================ */
.dsw-rd-actie--garantie{
  background:#fff !important;
  border:1px solid #d9dbec !important;
  border-radius:14px !important;
  box-shadow:0 1px 2px rgba(35,35,80,.05), 0 8px 22px rgba(35,35,80,.10) !important;
  padding:12px 14px !important;
  gap:14px !important;
  align-items:center !important;
}

/* Het merkzegel is het beeldanker. object-fit:contain omdat de drie zegels niet dezelfde
   verhouding hebben (Liebherr staand schild, AEG vierkant) - zonder contain wordt de AEG
   uitgerekt. */
.dsw-rd-actie--garantie .dsw-rd-gar-zegel{
  flex:none !important; display:block !important;
  width:56px !important; height:56px !important;
  object-fit:contain !important;
  margin:0 !important; border:0 !important; background:none !important;
}

.dsw-rd-actie--garantie .dsw-rd-actie-tekst{ color:var(--r-muted,#6b6b86) !important; }

/* De kop was 14,5px IN KAPITALEN; kapitalen lezen op die maat kleiner dan gewone tekst,
   dus de kop die het hardst moest spreken sprak het zachtst. Nu 17px in normale zetting. */
.dsw-rd-actie--garantie .dsw-rd-gar-kop{
  display:block !important;
  font-size:17px !important; font-weight:800 !important; letter-spacing:-.015em !important;
  color:var(--r-dark,#2d2d5a) !important; line-height:1.2 !important;
}

/* De tegenhanger ("normaal 2 jaar") is wat het getal betekenis geeft: 10 jaar zegt pas iets
   naast de 2 die gebruikelijk is. Tekst komt uit de bestaande USP-mapping, niet uit een
   eigen berekening. */
.dsw-rd-actie--garantie .dsw-rd-gar-chip{
  display:inline-block; margin-left:8px; vertical-align:2px;
  background:#eef0f8; color:var(--r-dark,#2d2d5a);
  font-size:11.5px; font-weight:700; letter-spacing:0;
  padding:3px 8px; border-radius:999px; white-space:nowrap;
}

/* De zin uit de bron - wie de garantie geeft, per wanneer, en dat registreren nodig is.
   Dit is het deel dat vorm B volledig weggooide. */
.dsw-rd-actie--garantie .dsw-rd-gar-uitleg{
  display:block; margin-top:3px;
  font-size:12.5px; line-height:1.45; color:var(--r-muted,#6b6b86);
}

.dsw-rd-actie--garantie .dsw-rd-actie-link{
  color:var(--r-dark,#2d2d5a) !important; font-weight:700 !important;
  align-self:center !important;
}

@media (max-width:560px){
  .dsw-rd-actie--garantie{ padding:10px 12px !important; gap:10px !important; }
  .dsw-rd-actie--garantie .dsw-rd-gar-zegel{ width:46px !important; height:46px !important; }
  .dsw-rd-actie--garantie .dsw-rd-gar-kop{ font-size:15.5px !important; }
  /* De chip blijft ACHTER de kop staan, ook hier. Gemeten op 390px: kop 118px + chip 88px =
     206px in een tekstkolom van 264px, dus hij past. Hem hier op een eigen regel zetten
     (eerste poging) kostte 20px hoogte voor niets. Past hij bij een langere kop toch niet,
     dan wrapt hij vanzelf - inline-block breekt niet middenin. */
  .dsw-rd-actie--garantie .dsw-rd-gar-chip{ margin-left:6px !important; font-size:11px !important; }
  .dsw-rd-actie--garantie .dsw-rd-actie-link{ width:100%; text-align:right; margin-top:4px; }
}
/* ============ EINDE 11 ============ */

/* ============================================================
   12A - HET BRONBLOK FLITST NIET MEER (GW 13-8-2026)
   ------------------------------------------------------------
   GW: "als ik ctrl+r druk op deze url dan zie ik kort de refund_image verschijnen die daarna
   weer weg gaat (CLS)."

   Hij heeft gelijk en het is meetbaar. refundmini.phtml rendert .refund-block server-side;
   buildActie() leest het uit en buildBuybox() haalt het daarna uit de DOM. Tussen de eerste
   verf en die verwijdering staat het gewoon in beeld. Gemeten op de live site, 13-8-2026:

       /aeg-tr9hamburg     mobiel   263px hoog, 313 ms zichtbaar
       /liebherr-irc3950-60 desktop  230px hoog, 230 ms zichtbaar
       /liebherr-irc3950-60 mobiel   262px hoog, 325 ms zichtbaar

   Verbergen mag ALLEEN als er ook echt iets is dat het overneemt - een blok dat onzichtbaar
   begint en op JavaScript wacht is precies het anti-patroon waar de progressieve-verbetering-
   regel over gaat. Vandaar de vlag `dsw-rd-bron` op <html>, die door een inline regel in
   header.phtml wordt gezet en door diezelfde regel na 4 s weer wordt weggehaald als het
   bronblok er dan NOG staat (dan heeft de herindeling niet gedraaid).

   Poort: nulmeting/pdp-actieflits-poort.mjs - drie standen, waaronder een zelftoets die de
   herindeling bewust sloopt en bewijst dat het blok dan terugkomt.
   ============================================================ */
html.dsw-rd-bron .product-view .refund-block{ display:none !important; }

/* ============================================================
   12C - KOOPBLOK-SLUIER: DE OUDE INDELING MAG NIET GEVERFD WORDEN
   ------------------------------------------------------------
   GW 22-8-2026 op /smeg-fab32lbl6: "als ik op pagina op CTRL + R druk dan zie ik nog
   verspringen naar het oude blok en dan pas komt het nieuwe."

   Hij heeft gelijk, en het is groter dan 12A. De server rendert de kassa in de OUDE vorm:
   .product-shop met het oude variantenblok (341 px hoog, kleurtegels + draairichting) en
   .cart-desktop met de oude prijs en knop eronder. run() wikkelt beide in .dsw-rd-buy, waarna
   ze allebei worden verborgen en het zichtbare koopblok volledig uit door JS gebouwde
   elementen bestaat. Tussen de eerste verf en die herindeling staat de oude indeling in beeld.

   GEMETEN 22-8-2026 op een kopie van de winkel (curl-weg, /smeg-fab32lbl6):
       390 px, 3G   eerste verf 2.008 ms -> herindeling 2.722 ms = 714 ms oude indeling
       390 px       prijs 1.641 px -> 753 px (sprong van 888 px)
       1440 px      prijs 1.331 px -> 380 px; uitvoeringsregel 472, knop 619

   Alleen DIRECTE kinderen van de form: zodra run() ze in .dsw-rd-buy hangt grijpt deze regel
   niet meer en nemen de bestaande regels (.dsw-rd-buy .product-shop / .cart-desktop) het over.
   De vlag komt uit header.phtml en gaat daar ook weer af als de herindeling niet komt.
   Poort: nulmeting/pdp-koopblokflits-poort.mjs.
   ============================================================ */
html.dsw-rd-kassabron .product-view.product-essential #product_addtocart_form > .product-shop,
html.dsw-rd-kassabron .product-view.product-essential #product_addtocart_form > .cart-desktop{display:none !important}

/* ============================================================
   12B - ACTIEBLOK, VORM B: DEZELFDE OPBOUW ALS DE GARANTIE
   ------------------------------------------------------------
   GW 13-8-2026: "ik zie een actie balk welke nog steeds niet echt opvalt en daarom geen
   bijdrage heeft aan de conversie. Ik vind dat bij een liebherr garantie aspect bijvoorbeeld
   veel beter en duidelijker."

   Dus: dezelfde kaart als het garantieblok - wit vlak, zachte schaduw, beeld links, kop van
   17px, uitleg eronder. Alleen het accent verschilt.

   Waarom een goud accent en geen tweede navy: navy is in dit koopblok "zekerheid" (garantie).
   Een cadeau of een aflopende actie is voordeel, en voordeel is hier al goud (vorm A). Maar
   NIET de volle gele band van vorm A: die staat voor "geld terug" met een bedrag erbij, en dat
   belooft dit blok niet. Vandaar het gouden randje links en de gouden chip op een witte kaart -
   herkenbaar familie van de cashback, zonder de geldclaim.

   Let op: dit blok verschijnt alleen als de bron een feit draagt (bedrag, cadeau, of een
   einddatum die nog niet voorbij is). Zie de toelichting bij vorm B in dsw-pdp-redesign.js.
   ============================================================ */
.dsw-rd-actie--voordeel{
  background:#fff !important;
  border:1px solid #ecdcae !important;
  border-left:3px solid #c9a227 !important;
  border-radius:14px !important;
  box-shadow:0 1px 2px rgba(35,35,80,.05), 0 8px 22px rgba(35,35,80,.10) !important;
  padding:12px 14px !important;
  gap:14px !important;
  align-items:center !important;
}

.dsw-rd-actie--voordeel .dsw-rd-gar-zegel{
  flex:none !important; display:block !important;
  width:56px !important; height:56px !important;
  object-fit:contain !important;
  margin:0 !important; border:0 !important; background:none !important;
}

.dsw-rd-actie--voordeel .dsw-rd-actie-tekst{ color:var(--r-muted,#6b6b86) !important; }

.dsw-rd-actie--voordeel .dsw-rd-gar-kop{
  display:block !important;
  font-size:17px !important; font-weight:800 !important; letter-spacing:-.015em !important;
  color:var(--r-dark,#2d2d5a) !important; line-height:1.2 !important;
}

/* De chip draagt hier de einddatum ("nog t/m 5 sep"). Dat is de enige plek in het blok waar
   urgentie hoort te staan - in de kop zou het de actie zelf overschreeuwen. */
.dsw-rd-actie--voordeel .dsw-rd-gar-chip{
  display:inline-block; margin-left:8px; vertical-align:2px;
  background:#fdf3d6; color:#7a5c0b;
  font-size:11.5px; font-weight:700; letter-spacing:0;
  padding:3px 8px; border-radius:999px; white-space:nowrap;
}

.dsw-rd-actie--voordeel .dsw-rd-gar-uitleg{
  display:block; margin-top:3px;
  font-size:12.5px; line-height:1.45; color:var(--r-muted,#6b6b86);
}

.dsw-rd-actie--voordeel .dsw-rd-actie-link{
  color:#8a6a12 !important; font-weight:700 !important;
  align-self:center !important;
}

@media (max-width:560px){
  .dsw-rd-actie--voordeel{ padding:10px 12px !important; gap:10px !important; }
  .dsw-rd-actie--voordeel .dsw-rd-gar-zegel{ width:46px !important; height:46px !important; }
  .dsw-rd-actie--voordeel .dsw-rd-gar-kop{ font-size:15.5px !important; }
  .dsw-rd-actie--voordeel .dsw-rd-gar-chip{ margin-left:6px !important; font-size:11px !important; }
  .dsw-rd-actie--voordeel .dsw-rd-actie-link{ width:100%; text-align:right; margin-top:4px; }
}

/* BLACK FRIDAY 2026 (GW 4-11-2026): zelfde donkere vorm als de balk op de mobiele homepage (.dsw-bf-mobiel).
   De zegel valt weg: zwart op zwart, en de kop zegt hetzelfde. Onder 600px neemt de compacte regel het over.
   Na de actie verdwijnt de kaart vanzelf (einddatum-veto); deze regels mogen dan weg. */
.dsw-rd-actie.dsw-rd-actie--bf{
  flex-wrap:wrap !important;
  gap:10px 14px !important;
  padding:14px 16px !important;
  border:0 !important;
  border-radius:14px !important;
  background:#111118 linear-gradient(120deg,#111118 55%,#23264a) !important;
}
.dsw-rd-actie--bf .dsw-rd-gar-zegel{ display:none !important; }
.dsw-rd-actie--bf .dsw-rd-actie-tekst{ flex:1 1 220px !important; min-width:0; }
.dsw-rd-actie.dsw-rd-actie--bf .dsw-rd-gar-kop{ color:#fff !important; font-size:21px !important; letter-spacing:.2px !important; }
.dsw-rd-actie--bf .dsw-rd-gar-kop b{ color:#4cc449; font-weight:800; }
.dsw-rd-actie.dsw-rd-actie--bf .dsw-rd-gar-chip{
  display:block; margin:3px 0 0; padding:0; background:none; border-radius:0;
  color:#7fdc7c; font-size:13px; font-weight:700; letter-spacing:0; vertical-align:baseline;
}
.dsw-rd-actie.dsw-rd-actie--bf .dsw-rd-gar-uitleg{ margin-top:1px; color:#d8d9e4; font-size:13px; }
.dsw-rd-actie.dsw-rd-actie--bf .dsw-rd-actie-link{
  flex:0 0 auto !important; width:auto !important; margin-top:0 !important; padding:10px 15px;
  background:transparent; border:1.5px solid #4cc449; border-radius:999px; /* GW 4-11-2026: rustiger, de rode knop blijft de koopknop */
  color:#fff !important; font-size:14px; text-decoration:none !important;
}
.dsw-rd-actie.dsw-rd-actie--bf .dsw-rd-actie-link:hover{ background:rgba(76,196,73,.18); }

/* Tablet: de thumbnails zijn floats in een lijst van 0 hoog en duwden de prijs opzij (gemeten 4-11-2026 op 1024:
   prijs x=598 in een kolom vanaf x=164, per product anders). Lijst krijgt zijn eigen hoogte. Desktop en mobiel ongemoeid. */
@media (min-width:601px) and (max-width:1024px){
  .product-essential .more-views .product-image-thumbs{ display:flow-root !important; }
}

/* GW 4-11-2026: de houder had 10px opzij en 4px boven en onder. Daardoor sprong de winkelwagenknop in ten opzichte van de
   blokken eromheen, en rekte Vergelijk mee naar 66 tegen 58 hoog. Op mobiel stond dit al op 0. */
.dsw-rd-buy .dsw-rd-cta .add-to-cart-buttons{ padding:0 !important; }
/* ============ EINDE 12 ============ */

/* ============================================================
   DSW-UITVOERINGSREGEL-START   (GW 22-8-2026)
   Eén regel BOVEN de prijs + een popup met de uitvoeringen.
   (De regel stond eerst ónder de prijs; GW heeft hem op 22-8 dezelfde dag naar boven
   gehaald — eerst kiezen welke uitvoering, dan het bedrag dat daarbij hoort. Dat is
   alleen de VOLGORDE in buildBuybox(); aan deze stijlen is niets veranderd en het kost
   geen hoogte: gemeten @1600 komt de koopknop er 14px HOGER door te staan.)
   Alles tussen deze markering en DSW-UITVOERINGSREGEL-EIND mag als geheel worden
   vervangen; daarbuiten is niets aangeraakt.
   ============================================================ */

/* ---------- de KAART in het koopblok (GW 24-8-2026) ----------
   GW over de pil van 22-8: "Dit moet toch groter en duidelijker. Ik wil dit design" -
   wijzend op het garantieblok (.dsw-rd-actie--garantie, sectie 11) - "maar dan nog iets
   meer hoogte".

   Daarom hier dezelfde anatomie als dat blok: wit vlak, 1px #d9dbec, radius 14, dezelfde
   dubbele schaduw, een beeldanker links, een kop van 17px met een chip erachter, een
   uitlegregel eronder en de actie rechts uitgelijnd.

   Wat bewust AFWIJKT van het garantieblok, en waarom:
     - beeldanker 60px in plaats van 56 en padding 15/16 in plaats van 12/14. Dat is de
       "iets meer hoogte" die GW vroeg: de pil was 46px, deze kaart is ~95px, het
       garantieblok ~80px.
     - de kaart is zelf de KNOP, geen doos met een linkje erin. Het hele vlak is
       aanklikbaar; het aanraakdoel gaat van 211x46 naar de volle kolombreedte x ~95.

   De popup erachter is ONGEMOEID (GW 24-8-2026: "de popup, overlay moet gewoon blijven he.
   Dat is duidelijk. Het gaat mij erom dat het blok zelf duidelijker aanwezig is"). Alles
   onder "---------- de popup ----------" hieronder is dus niet aangeraakt.
*/
.dsw-rd-buy .dsw-uitv-regel{
  display:flex; flex-direction:column; align-items:stretch; gap:10px;
  margin:0 0 16px !important; padding:0;
  font-family:var(--r-font);
}
.dsw-uitv-knop{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  border:1px solid #d9dbec; background:#fff; border-radius:14px;
  box-shadow:0 1px 2px rgba(35,35,80,.05), 0 8px 22px rgba(35,35,80,.10);
  padding:15px 16px; cursor:pointer; font:inherit; color:var(--r-text);
  transition:border-color .15s, box-shadow .15s;
}
.dsw-uitv-knop:hover{
  border-color:#c4c0dd;
  box-shadow:0 2px 4px rgba(35,35,80,.07), 0 12px 28px rgba(35,35,80,.16);
}
.dsw-uitv-knop:focus-visible{outline:2px solid var(--r-dark); outline-offset:2px}

/* HET BEELDANKER - de tegenhanger van het merkzegel in het garantieblok. De vier echte
   kleurfoto's staan hier als mozaiek in plaats van als rij duimnagels van 20px: even groot
   als het zegel, dus even hard aanwezig. `.dsw-uitv-mini` houdt zijn naam omdat
   dsw-uitvoeringsregel-toets.js daarop meet of er beeld op de knop staat. */
.dsw-uitv-mini{
  position:relative; flex:0 0 auto; width:60px; height:60px;
  display:grid; grid-template-columns:1fr 1fr; gap:3px;
  padding:3px; border-radius:13px; background:var(--r-panel);
}
.dsw-uitv-mini img{
  width:100%; height:100%; object-fit:cover; border-radius:9px;
  border:1px solid rgba(35,35,80,.10); background:#fff; display:block; min-width:0;
}
/* Minder dan vier foto's mag geen gat in de tegel geven: bij een is hij het hele vlak, bij
   twee elk een halve kolom over de volle hoogte, bij drie staat de eerste links hoog. */
.dsw-uitv-mini.n1 img{grid-column:span 2; grid-row:span 2}
.dsw-uitv-mini.n2 img{grid-row:span 2}
.dsw-uitv-mini.n3 img:first-child{grid-row:span 2}
.dsw-uitv-mini .rest{
  position:absolute; right:-9px; bottom:-9px;
  min-width:26px; height:22px; border-radius:999px; padding:0 6px;
  background:var(--r-dark); color:#fff; border:2px solid #fff;
  font-size:11.5px; font-weight:800; line-height:18px; text-align:center;
}
/* De pasvraag heeft geen foto's; daar vult het scharniersymbool de tegel. */
/* GW 27-8-2026: "Eventueel mag de afbeelding ervoor nog ietsje groter weergegeven worden,
   maar het witte vak zelf mag niet groter."

   Die twee eisen botsen, en de grens is GEMETEN met een echte render, niet gerekend. Het
   vak is zo hoog als het hoogste van (beeldanker, tekstkolom) plus rand en marge:

     beslagkaart, 3 tekstregels (STEEL Mistral, ILVE 645)   nu 113px  ->   94px
     beslagkaart, 2 tekstregels (Falcon Classic Deluxe)     nu  95px  ->   94px
     KLEURkaart   (Falcon, ILVE, STEEL)                     nu  92px  ->   92px

   De kleurkaart en de Falcon-beslagkaart zitten dus al op hun plafond: elke pixel beeld
   erbij maakt DAAR het vak hoger. Daarom groeit alleen de beslagkaart, en maar tot 62px -
   dan komt hij op 94px en blijft onder de 95px die de krapste beslagkaart nu al heeft.
   De kleurkaart houdt 60px en blijft exact even hoog.

   Op mobiel wint de mediaquery verderop in dit bestand (52px), dus mobiel blijft gelijk.
   Ook dat is gemeten: een eerste meting zette deze regel per ongeluk NA die mediaquery en
   gaf daardoor 120px in plaats van 118px. */
.dsw-uitv-mini--beslag{width:62px; height:62px}
.dsw-uitv-mini--gate{display:grid; place-items:center; padding:0}

/* DE AANSLUITKAART IS LAGER (GW 31-8-2026: "die kan minder hoog zijn").
   Waarom deze en niet alle drie: kleur en uitvoering zijn SMAAKkeuzes waar de klant even
   voor gaat zitten - daar helpt een groot beeldanker. De aansluiting is een pasvraag met
   twee uitkomsten en een fornuis dat er identiek uitziet; die hoeft niet even zwaar te
   wegen als de kleurkeuze, maar staat er wel als eerste.
   Het haakje is `data-groep`, dat dsw-pdp-redesign.js op de knop zet. Geen ander merk
   heeft een groep die zo heet, dus Falcon, ILVE en STEEL blijven exact zoals ze waren.
   Het BEELD blijft staan - alleen kleiner. Zonder beeld valt de kaart terug op het lege
   vlak dat op 31-8 juist is weggehaald. */
.dsw-uitv-knop[data-groep="aansluiting"]{padding:10px 14px; gap:11px}
.dsw-uitv-knop[data-groep="aansluiting"] .dsw-uitv-mini{width:44px; height:44px; border-radius:11px}
.dsw-uitv-knop[data-groep="aansluiting"] .dsw-uitv-mini img{border-radius:7px}

/* "KIES" OP EEN LIJN (GW 30-9-2026: "Kun je de uitlijning van het woordje 'Kies' niet
   verticaal op 1 lijn onder elkaar zetten voor iets meer rust?").
   Het beeldanker is per kaart bewust verschillend groot (aansluiting 44, kleur 60, beslag
   62px) en de aansluitkaart had ook een kleinere marge en tussenruimte. Daardoor begon de
   tekst op 69, 90 en 92px en stond "Kies" drie keer anders ingesprongen.
   De vakken zelf blijven precies zo groot, en de kaarthoogte verandert dus niet: ieder vak
   krijgt alleen rechts zoveel lucht dat het samen een kolom van 62px vult. Links blijft
   alles op de rand van de kaart staan, zodat ook de beelden onder elkaar op een lijn staan.
   Gerekend: 16 marge + 62 kolom + 14 tussenruimte = tekst op 92px in elke kaart. */
.dsw-uitv-mini{margin-right:2px}
.dsw-uitv-mini--beslag{margin-right:0}
.dsw-uitv-knop[data-groep="aansluiting"]{padding-left:16px; padding-right:16px; gap:14px}
.dsw-uitv-knop[data-groep="aansluiting"] .dsw-uitv-mini{margin-right:18px}

/* HET ELEKTRA-VAK (GW 31-8-2026: "Ik zou een symbool van elektra doen ipv het fornuis").
   Zelfde vorm als de scharniertegel: het vak blijft precies zoals het was, er staat alleen
   een symbool in plaats van foto's in. De regel hierboven houdt dat vak op 44px en blijft
   gelden, dus de kaart wordt hier niet hoger of lager van - gemeten hoort hij even hoog te
   blijven als op 31-8. Zonder deze twee regels valt het symbool linksboven in het vak en
   staat de rest leeg. */
.dsw-uitv-mini--elektra{display:grid; place-items:center; padding:0}
.dsw-uitv-mini--elektra svg{display:block; color:var(--r-dark)}

.dsw-uitv-mini--gate svg{width:34px; height:34px; display:block; color:var(--r-dark)}

/* HET LENGTE-VAK (GW 9-9-2026: "hier misschien een lengte symbool").
   Zelfde vorm als het elektra-vak hierboven: het vak blijft precies zoals het was, er staat
   alleen een symbool in plaats van foto's in. Nodig omdat de 8 lengtes van een lamp EEN
   foto delen (gemeten 9-9-2026, md5 gelijk) - een mozaiek toonde daar vier keer hetzelfde.
   Zonder deze twee regels valt het symbool linksboven in het vak en staat de rest leeg. */
/* ��n kolom, niet de twee uit `.dsw-uitv-mini` hierboven: die basis is een
   fotomozaiek (grid-template-columns:1fr 1fr) en daarin valt een los symbool in de
   LINKERkolom. Nagemeten in de gerenderde pagina: verticaal netjes 16px/16px, maar
   horizontaal 0px links en 32px rechts - het plakte tegen de rand. `place-items:center`
   centreert binnen de cel, en de cel was de halve tegel. */
.dsw-uitv-mini--lengte{display:grid; grid-template-columns:1fr; place-items:center; padding:0}
.dsw-uitv-mini--lengte svg{display:block; color:var(--r-dark)}

/* DE TEKSTKOLOM - kop met chip, wat er nu staat, en de reden om te kijken. */
.dsw-uitv-tekst{display:flex; flex-direction:column; flex:1 1 auto; min-width:0; text-align:left}
.dsw-uitv-tekst .kop{
  font-size:17px; font-weight:800; letter-spacing:-.015em; line-height:1.2;
  color:var(--r-dark);
}
/* Zelfde chip als "normaal 2 jaar" bij de garantie: het getal krijgt pas maat naast iets. */
.dsw-uitv-chip{
  display:inline-block; margin-left:8px; vertical-align:2px;
  background:#eef0f8; color:var(--r-dark);
  font-size:11.5px; font-weight:700; letter-spacing:0;
  padding:3px 8px; border-radius:999px; white-space:nowrap;
}
.dsw-uitv-tekst .nu{font-size:13.5px; line-height:1.35; margin-top:4px; color:var(--r-muted)}
.dsw-uitv-tekst .nu strong{color:var(--r-text); font-weight:700}
.dsw-uitv-tekst .uitleg{font-size:12.5px; line-height:1.4; margin-top:1px; color:var(--r-muted)}
.dsw-uitv-actie{
  flex:0 0 auto; align-self:center; white-space:nowrap;
  font-size:13px; font-weight:700; color:var(--r-dark);
}

/* ---------- de popup ---------- */
.dsw-uitv-scherm{
  position:fixed; inset:0; z-index:10000; display:none;
  background:rgba(24,22,52,.55); padding:40px 24px;
  overflow:auto; font-family:var(--r-font);
}
.dsw-uitv-scherm[hidden]{display:none !important}
.dsw-uitv-scherm.is-open{display:block}
.dsw-uitv-doos{
  max-width:940px; margin:0 auto; background:#fff; border-radius:20px;
  box-shadow:0 24px 70px rgba(20,18,50,.35); overflow:hidden;
}
.dsw-uitv-kop{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:24px 28px 18px; border-bottom:1px solid var(--r-border);
}
.dsw-uitv-kop h2{
  margin:0; font-size:23px; font-weight:800; letter-spacing:-.01em;
  color:var(--r-text); line-height:1.2;
}
.dsw-uitv-kop .sub{margin:5px 0 0; font-size:14.5px; color:var(--r-muted)}
.dsw-uitv-sluit{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%; cursor:pointer;
  border:1.5px solid var(--r-border); background:#fff;
  font-size:19px; line-height:1; color:var(--r-muted);
}
.dsw-uitv-sluit:hover{border-color:#c4c0dd; color:var(--r-text)}
.dsw-uitv-lijf{padding:22px 28px 26px}

.dsw-uitv-raster{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  gap:14px; margin:0; padding:0; list-style:none;
}
.dsw-uitv-kaart{
  display:block; text-decoration:none; color:var(--r-text);
  border:1.5px solid var(--r-border); border-radius:14px; padding:10px 10px 12px;
  background:#fff; position:relative; transition:border-color .15s, box-shadow .15s; min-width:0;
}
.dsw-uitv-kaart:hover{border-color:#c4c0dd; box-shadow:0 4px 14px rgba(35,35,80,.09)}
.dsw-uitv-kaart.is-nu{border-color:var(--r-dark); border-width:2.5px; padding:8.5px 8.5px 10.5px}
.dsw-uitv-beeld{
  display:block; position:relative; height:132px; border-radius:10px;
  background:var(--r-panel); overflow:hidden;
}
.dsw-uitv-beeld img{width:100%; height:100%; object-fit:contain; display:block}

/* HETZELFDE SYMBOOL IN DE POPUP-KAART. Daar is het beeldvlak 132px hoog en `display:block`,
   dus een los <svg> valt linksboven in een verder leeg vlak - precies het lege vak uit de
   melding van 9-9.
   🚨 De haak is een EIGEN KLASSE op het vlak, niet `.dsw-uitv-scherm[data-groep=...]`.
   Die eerste vorm stond hier eerst en had NOOIT gewerkt: het scherm krijgt in
   dsw-pdp-redesign.js (uitvScherm(), r.1201) alleen `class="dsw-uitv-scherm"` en geen
   data-groep - de regel was een stille no-op geweest. Het scherm is bovendien een
   hergebruikt singleton, dus een attribuut dat je daar zet blijft bij de volgende opening
   staan. Een klasse die per kaart wordt meegegeven kent dat probleem niet.
   `:not(:has(img))` zou ook kunnen maar valt op oudere Safari stil weg.
   🚨 EN HIJ STAAT HIER, NA `.dsw-uitv-beeld`, NIET ERBOVEN. Eerst stond hij 40 regels
   hoger; beide selectors wegen even zwaar (een klasse), dus won de LAATSTE en bleef het
   vlak `display:block`. Nagemeten in de gerenderde pagina: display block, symbool 0px van
   boven en 76px van onder - het hing tegen de bovenrand. Een stille no-op die er op het
   scherm bijna goed uitzag; alleen het NAMETEN in de DOM ving hem.
   De 32px van lengteIcon(true) is in een vak van 132px te klein om het anker te zijn; 56px
   houdt dezelfde verhouding als een productfoto in datzelfde vak (object-fit:contain). */
.dsw-uitv-beeld--symbool{display:grid; place-items:center}
.dsw-uitv-beeld--symbool > svg{
  width:56px; height:56px; display:block; color:var(--r-dark); opacity:.85;
}
.dsw-uitv-vink{
  position:absolute; right:6px; top:6px; width:24px; height:24px; border-radius:50%;
  background:var(--r-dark); color:#fff; font-size:13px; line-height:24px;
  text-align:center; font-weight:700;
}
.dsw-uitv-naam{
  display:block; font-size:15px; font-weight:700; margin-top:10px; line-height:1.25;
  overflow-wrap:break-word;
}
.dsw-uitv-sub{display:block; font-size:12.5px; color:var(--r-muted); line-height:1.25; margin-top:1px}
.dsw-uitv-prijs{display:block; font-size:13.5px; font-weight:700; margin-top:4px; color:var(--r-text)}
.dsw-uitv-prijs.zelfde{color:var(--r-muted); font-weight:600}
/* 25-8-2026 (GW): een uitvoering met een prijs-op-aanvraag-bijzonderheid toont geen bedrag
   maar de zin zelf. Bewust GEDEMPT en niet vet: het is geen bedrag, dus het mag optisch ook
   niet als bedrag wegen naast de kaarten die er wel een hebben. */
.dsw-uitv-prijs--aanvraag{color:var(--r-muted); font-weight:600; font-size:12.5px}
.dsw-uitv-prijs .meer{color:var(--r-muted); font-weight:600}
/* DSW 31-8-2026: de meerprijs onder "Prijs op aanvraag". Bewust kleiner en rustiger dan een
   echt bedrag - het IS geen prijs, het is een verschil, en het mag de kaart niet overnemen. */
.dsw-uitv-meer{display:block; font-size:12px; font-weight:600; margin-top:2px; color:var(--r-text)}
.dsw-uitv-prijs .minder{color:var(--r-green-ink); font-weight:600}
/* DE VOORRAADSTAND VAN DEZE UITVOERING (GW 3-9-2026), als groen balkje onderaan de kaart:
   "zet de voorraad op dezelfde hoogte uitgelijnd (allemaal onderaan tegen het onderste punt
   van het vak) met een groen balkje er omheen".

   ABSOLUUT ONDERIN, niet met margin-top:auto in een kolom. De kaarten zijn rasteritems en
   strekken al tot dezelfde hoogte, maar bij de HOOGSTE kaart is de vrije ruimte nul en zou
   het balkje daar tegen de prijs aan plakken terwijl het bij de buurman lager staat. Vastgezet
   aan de onderrand staat hij op elke kaart op precies dezelfde lijn, ongeacht of de naam een
   of twee regels beslaat ("Roestvrijstaal (Nikkel)") of er een chip 'uw keuze' bij staat.
   De ruimte ervoor reserveert .heeft-stand; een kaart zonder stand houdt zijn oude hoogte.

   Groen voor beide standen - dezelfde huistaal als het Levering-blok op de PDP, dat ook groen
   is bij "Levertijd 6-8 weken". Het onderscheid zit in het gewicht: "op voorraad" weegt
   zwaarder, want dat is waar de klant zijn keuze op maakt. */
.dsw-uitv-stand{
  position:absolute; left:10px; right:10px; bottom:12px; text-align:center;
  background:var(--r-green-soft); color:var(--r-green-ink); border-radius:8px;
  padding:5px 6px; font-size:12px; font-weight:600; line-height:1.25; overflow-wrap:break-word;
}
.dsw-uitv-stand.is-op{font-weight:800}
/* de is-nu-kaart heeft een dikkere rand en 1.5px minder padding; het balkje schuift mee zodat
   de onderrand op de millimeter gelijk blijft met de kaarten ernaast */
.dsw-uitv-kaart.is-nu .dsw-uitv-stand{left:9px; right:9px; bottom:11px}
/* "IN ONZE WINKEL" OP DE UITVOERINGSKAART (GW 4-9-2026)
   "Ik zou op meer plekken op de website met een simpel balkje of melding willen zien dat een
    product als deze ook in de winkel staat ... De connectie opzoeken tussen de website en de
    winkel is denk ik heel sterk."

   In de FLOW en niet absoluut onderin, waar .dsw-uitv-stand zit: die heeft daar een eigen
   pixelreservering (.heeft-stand) en twee absolute balkjes onder elkaar zouden vier
   combinaties van padding vragen die bij elke tekstlengte weer scheef gaan staan. Boven de
   prijs zou het de prijsvergelijking uit elkaar trekken; hieronder staat het waar het hoort:
   bij de beschikbaarheid.

   Blauw, niet groen: groen is in dit blok de VOORRAAD ("op voorraad", "6-8 weken"). Dat een
   apparaat in Bussum staat is iets anders dan dat het leverbaar is - hetzelfde blauw als de
   chip in het zoekmenu en op de tegels, zodat het over de hele site één ding blijft. */
.dsw-uitv-winkel{
  display:inline-flex; align-items:center; gap:4px; margin-top:5px;
  padding:2px 7px; border:1px solid #c7daf1; border-radius:999px;
  background:#e9f1fb; color:#1c5aa0;
  font-size:11px; font-weight:700; line-height:1.4;
}
.dsw-uitv-winkel svg{
  width:11px; height:11px; flex:0 0 11px; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
/* dezelfde markering op de tegelrij en op de compacte chiprij van het koopblok */
.dsw-rd-sw-winkel{
  display:inline-flex; align-items:center; justify-content:center; gap:3px;
  margin-top:3px; padding:1px 6px; border:1px solid #c7daf1; border-radius:999px;
  background:#e9f1fb; color:#1c5aa0; font-size:9.5px; font-weight:700; line-height:1.4;
  max-width:100%; overflow:hidden;
}
.dsw-rd-sw-winkel svg,
.dsw-rd-chip-winkel svg{
  width:9px; height:9px; flex:0 0 9px; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.dsw-rd-sw-winkel > span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dsw-rd-chip-winkel{display:inline-flex; align-items:center; margin-left:5px; color:#1c5aa0}
.dsw-rd-chip.heeft-winkel{border-color:#c7daf1}

.dsw-uitv-kaart.heeft-stand{padding-bottom:44px}
.dsw-uitv-kaart.heeft-stand.is-nu{padding-bottom:42.5px}
.dsw-uitv-uwkeuze{
  display:inline-block; margin-top:5px; font-size:10.5px; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase; color:var(--r-dark);
  background:var(--r-light); border-radius:999px; padding:3px 9px;
}

/* de pasvraag krijgt brede kaarten met uitleg, niet dezelfde tegels */
.dsw-uitv-raster--gate{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.dsw-uitv-gate{
  display:flex; gap:16px; align-items:center; text-decoration:none;
  border:1.5px solid var(--r-border); border-radius:14px; padding:18px 20px;
  color:var(--r-text); background:#fff; transition:border-color .15s;
}
.dsw-uitv-gate:hover{border-color:#c4c0dd}
.dsw-uitv-gate.is-nu{border-color:var(--r-dark); border-width:2.5px; padding:16.5px 18.5px}
.dsw-uitv-gate .ic{
  flex:0 0 auto; width:52px; height:52px; display:grid; place-items:center;
  border-radius:12px; background:var(--r-panel);
}
.dsw-uitv-gate .ic svg{width:30px; height:30px}
.dsw-uitv-gate .tx{min-width:0}
.dsw-uitv-gate strong{display:block; font-size:16.5px; line-height:1.25}
.dsw-uitv-gate em{display:block; font-style:normal; font-size:13.5px; color:var(--r-muted); margin-top:2px}

.dsw-uitv-voet{
  margin:20px 0 0; padding-top:16px; border-top:1px solid var(--r-border);
  font-size:14px; line-height:1.5; color:var(--r-muted);
}
.dsw-uitv-voet strong{color:var(--r-text)}
.dsw-uitv-voet a{color:var(--r-dark); text-decoration:underline}

@media (max-width:700px){
  .dsw-uitv-scherm{padding:0}
  .dsw-uitv-doos{border-radius:0; min-height:100%}
  .dsw-uitv-kop{padding:18px 18px 14px}
  .dsw-uitv-kop h2{font-size:20px}
  .dsw-uitv-lijf{padding:16px 18px 22px}
  .dsw-uitv-raster{grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:10px}
  .dsw-uitv-beeld{height:104px}
  .dsw-uitv-knop{gap:11px; padding:12px 13px; border-radius:13px; flex-wrap:wrap}
  .dsw-uitv-mini{width:52px; height:52px; margin-right:0}
  /* "Kies" op een lijn, mobiel: 13 marge + 52 kolom + 11 tussenruimte = 76px. De
     aansluitkaart houdt zijn 44px-vak (hogere specificiteit), dus die vult 8px bij. */
  .dsw-uitv-knop[data-groep="aansluiting"]{padding-left:13px; padding-right:13px; gap:11px}
  .dsw-uitv-knop[data-groep="aansluiting"] .dsw-uitv-mini{margin-right:8px}
  /* Ook: de tekst hoort NAAST het beeld. Met flex-wrap en `flex:1 1 auto` telde de volle
     regelbreedte van kop + chip als maat, en zakte bij "Kies een andere uitvoering" en
     "Kies elektra aansluiting" de hele tekst onder het beeld (kaart 169 en 181px hoog, kop
     op 14px) terwijl de kleurkaart hem ernaast hield (kop op 77px). Met basis 0 past de
     tekst altijd naast het beeld en gaat alleen de actieregel (width:100%) naar onderen. */
  .dsw-uitv-tekst{flex-basis:0}
  .dsw-uitv-tekst .kop{font-size:15.5px}
  .dsw-uitv-chip{margin-left:6px; font-size:11px}
  .dsw-uitv-actie{width:100%; text-align:right; margin-top:2px}
  .dsw-uitv-raster--gate{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .dsw-uitv-knop,.dsw-uitv-kaart,.dsw-uitv-gate{transition:none}
}
/* ============================================================
   DSW-UITVOERINGSREGEL-EIND
   ============================================================ */

/* Model-2026-badge achter de productkop en in de kop van de uitvoeringspopup.
   GW 25-8-2026: wit, zodat hij contrasteert met de lila achtergrond van de koptekst.
   De dunne rand houdt hem ook leesbaar op de WITTE popup-kop; zonder die rand zou de
   badge daar in de achtergrond verdwijnen. */
.dsw-modeljaar{
  display:inline-block; vertical-align:middle; margin-left:2px;
  background:#fff; color:var(--r-dark); border:1px solid #ddd9ee;
  font-size:12px; font-weight:700; line-height:1.35; letter-spacing:.01em;
  padding:3px 10px; border-radius:999px; white-space:nowrap;
}
.product-name h1.item.name .dsw-modeljaar{font-size:13px; vertical-align:3px}
.dsw-uitv-kop h2 .dsw-modeljaar{font-size:12px; vertical-align:3px}
@media (max-width:760px){
  .product-name h1.item.name .dsw-modeljaar{font-size:11.5px; padding:2px 8px}
}

/* ============================================================
   MOBIELE TABBALK ZAT ACHTER DE HEADER (mobiele review 19-9-2026)
   ============================================================
   Gemeten op 360/390/430/600/768 px, /aeg-lwr9706c8, scrollY 2500: `.dsw-rd-tabs` is
   `position:sticky; top:0` (r.758) en de kop `header.page-header` is ook sticky op top:0,
   114-120 px hoog, z-index 900 tegen 60. `document.elementFromPoint()` midden op de tabbalk
   gaf op elke breedte het logo of het zoekveld: de balk was er wel, maar niemand kon hem
   zien of aanraken. Op desktop merk je dat niet, want daar staat `#productmenu2` in de kop
   (zie reference_sticky_productmenu_twee_balken_en_dubbele_regel) - en die staat onder
   1025 px op display:none (dsw-algemeen.css r.884). Onder 1025 px was er dus GEEN
   sectienavigatie na het scrollen.
   De kophoogte is niet een getal (114 op <=430, 120 op 600-768, 122 voor .dsw-stuck),
   dus dsw-pdp-redesign.js meet hem (ResizeObserver op de kop) en zet --dsw-kophoogte en
   --dsw-tabhoogte op <html>. Valt JS uit, dan geldt de terugval 114 px.
   De ankersprong (#garantie e.a.) landde bovendien onder de balk: 150 px vaste marge
   tegen 114 + 52 = 166 px; nu afgeleid van dezelfde twee variabelen. */
@media (max-width:1024px){
  .dsw-rd-tabs{ top: var(--dsw-kophoogte, 114px); }
  .catalog-product-view .ael{ scroll-margin-top: calc(var(--dsw-kophoogte, 114px) + var(--dsw-tabhoogte, 52px) + 12px); }
}

/* 19-9-2026 (mobiele review, F): ondertitel die alleen de soort herhaalt - view.phtml zet
   .dsw-kop-alleen-soort als er geen naamdeel en geen feiten zijn. Op mobiel staat de soort al als
   bovenkop (10a), dus daar weg; desktop toont geen bovenkop en houdt de regel. */
@media (max-width:899px){
  .product-essential #product_addtocart_form > .product-name .product-subheading.dsw-kop-alleen-soort{ display:none !important; }
}

/* ============================================================
   13 - MERKLOGO IN DE CASHBACKKAART (GW 30-9-2026, AEG Q4-cashback)
   Alleen als refund_image een bestandsverwijzing is: buildActie zet logo + badge dan samen in
   .dsw-rd-actie-merkkol (logo BOVEN de badge), zodat de tekst zijn breedte houdt.
   Plus: .dsw-rd-nobr houdt "netto EUR 904,-" bij elkaar (gold voor elke cashbackkaart).
   Additief; verwijderen = de kaart zonder logo, zoals bij Bosch/Miele.
   ============================================================ */
.dsw-rd-actie--geld .dsw-rd-actie-merkkol{
  flex:none !important; display:flex !important; flex-direction:column !important;
  align-items:center !important; gap:7px !important;
}
.dsw-rd-actie--geld .dsw-rd-actie-merklogo{
  display:block !important; width:58px !important; height:auto !important; margin:0 !important; border:0 !important;
}
.dsw-rd-actie--geld .dsw-rd-nobr{ white-space:nowrap; }
@media (max-width:560px){
  .dsw-rd-actie--geld .dsw-rd-actie-merklogo{ width:50px !important; }
}
/* ============ EINDE 13 ============ */

/* ============================================================
   14 - RUIMTE VOOR DE TABBALK VASTHOUDEN TOT DE JS HEM PLAATST (22-10-2026)
   ============================================================
   dsw-pdp-redesign.js (boot, DOMContentLoaded) bouwt nav.dsw-rd-tabs uit de verborgen
   ul.quickview in het koopblok en zet hem ná het formulier: 57,3 px + 8 px marge = 65,3 px die
   er in de HTML niet zijn. Bij een gewoon bezoek gebeurt dat net onder de vouw en telt het niet;
   wie TERUG komt of herlaadt (no-store = geen bfcache, verse lading op de oude scrollpositie)
   staat eronder en ziet alles 65 px verspringen. Gemeten na herladen op scrollY 1800, 1366
   breed: /smeg-fab5rpb5 0,111 -> 0,023, /pelgrim-kookplaat-elektrisch-pk654wit 0,120 -> 0,026.
   Gewone lading + scrollen ongewijzigd (0,0219).
   Zolang het formulier de ul.quickview nog bevat EN er nog geen tabbalk is, staat er dezelfde
   ruimte onder het formulier; daarna vervalt de regel en neemt de balk precies die plek.
   Alleen >=1025 px: daar is de balk overal 65,3 px (gemeten op 1100 en 1366); <=600 px zet
   dsw-pdp-blokken.js hem op dsw-bk-op (display:none) en daar mag niets gereserveerd worden.
   Valt de JS uit, dan blijft er 65 px wit onder het koopblok - niet erger dan de balk zelf. */
@media (min-width:1025px){
  .catalog-product-view .product-essential:not(:has(> nav.dsw-rd-tabs)) > #product_addtocart_form:has(ul.quickview)::after{
    content:""; display:block; clear:both; height:65.3px;
  }
}
/* ============ EINDE 14 ============ */

/* ============================================================
   15 - ONTWERP B VOOR CASHBACK- EN GARANTIEKAART (GW 29-10-2026)
   "je brengt nu het logo van AEG onder de aandacht terwijl het hier gaat om die cashback.
   Dat moet eruit springen" - daarna "rol B uit overal".
   Het GETAL staat zelf in een gekleurd vlak links: geel = wat de klant terugkrijgt,
   navy = hoeveel jaar garantie. Rechts de uitleg; bij de garantie een balk per jaar
   (dit model tegenover gangbaar). Gebouwd door buildActie() en garantieKaartB() in
   dsw-pdp-redesign.js (klasse dsw-rd-actie--b). De garantie-ACTIEkaart uit refund_actie
   (Liebherr, Siemens...) en vorm "voordeel" blijven bewust zoals ze waren.
   Additief; dit blok verwijderen = de vlakken vallen terug op een gewone kaart.
   ============================================================ */
.dsw-rd-actie.dsw-rd-actie--b{
  display:grid !important;
  grid-template-columns:clamp(112px,27%,168px) minmax(0,1fr) !important;
  align-items:stretch !important;
  gap:0 !important; padding:0 !important; overflow:hidden !important;
  background:#fff !important; border-radius:16px !important;
  box-shadow:0 1px 2px rgba(35,35,80,.05), 0 6px 18px rgba(35,35,80,.08) !important;
}
.dsw-rd-actie.dsw-rd-actie--geld.dsw-rd-actie--b{ border:1px solid #f0dc9e !important; }
.dsw-rd-actie.dsw-rd-actie--garantie.dsw-rd-actie--b{ border:1px solid #dcdfee !important; margin-top:10px !important; }

.dsw-rd-actie--b .dsw-rd-b-vak{
  display:flex; flex-direction:column; justify-content:center; gap:2px;
  padding:14px 16px; min-width:0; box-sizing:border-box;
}
.dsw-rd-actie--geld.dsw-rd-actie--b .dsw-rd-b-vak{ background:#f6c33b; }
.dsw-rd-actie--garantie.dsw-rd-actie--b .dsw-rd-b-vak{ background:var(--r-dark,#2d2d5a); }
.dsw-rd-actie--b .dsw-rd-b-oog{
  font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; line-height:1.2;
}
.dsw-rd-actie--geld.dsw-rd-actie--b .dsw-rd-b-oog{ color:#3d2a00; }
.dsw-rd-actie--garantie.dsw-rd-actie--b .dsw-rd-b-oog{ color:#d4d5ec; }
.dsw-rd-actie--b .dsw-rd-b-waarde{
  font-size:clamp(22px,2.2vw,30px); font-weight:800; line-height:1.05; letter-spacing:-.02em; white-space:nowrap;
}
.dsw-rd-actie--geld.dsw-rd-actie--b .dsw-rd-b-waarde{ color:#1d1d33; }
.dsw-rd-actie--b .dsw-rd-b-waarde.is-lang{ font-size:clamp(19px,1.8vw,26px); }
.dsw-rd-actie--garantie.dsw-rd-actie--b .dsw-rd-b-waarde{ color:#fff; }

.dsw-rd-actie--b .dsw-rd-b-inhoud{
  display:flex; flex-direction:column; justify-content:center; gap:8px;
  padding:13px 18px; min-width:0;
}
.dsw-rd-actie--b .dsw-rd-b-rij{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 12px;
}
.dsw-rd-actie--b .dsw-rd-b-kop{
  display:inline !important; margin:0 !important;
  font-size:16.5px; font-weight:700; line-height:1.25; color:var(--r-text,#1d1d33);
}
.dsw-rd-actie--b .dsw-rd-b-chip{
  font-size:12px; font-weight:700; line-height:1.3; color:#7a5200; background:#fff3cf;
  border-radius:999px; padding:3px 10px; white-space:nowrap;
}
.dsw-rd-actie--b .dsw-rd-b-uitleg{ font-size:13.5px; line-height:1.4; color:var(--r-muted,#6b6b86); }
.dsw-rd-actie.dsw-rd-actie--b .dsw-rd-actie-link{
  width:auto !important; margin:0 0 0 auto !important; text-align:right !important;
  font-size:13.5px !important; font-weight:700 !important; white-space:nowrap; align-self:center !important;
}
.dsw-rd-actie.dsw-rd-actie--geld.dsw-rd-actie--b .dsw-rd-actie-link{ color:#7a5200 !important; }
.dsw-rd-actie.dsw-rd-actie--garantie.dsw-rd-actie--b .dsw-rd-actie-link{ color:var(--r-dark,#2d2d5a) !important; }

/* de jarenbalk: een blokje per jaar */
.dsw-rd-actie--b .dsw-rd-b-balken{
  display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:6px 12px;
}
.dsw-rd-actie--b .dsw-rd-b-label{ font-size:12.5px; line-height:1.2; color:var(--r-muted,#6b6b86); white-space:nowrap; }
.dsw-rd-actie--b .dsw-rd-b-label:first-child{ font-weight:700; color:var(--r-text,#1d1d33); }
.dsw-rd-actie--b .dsw-rd-b-balk{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:3px; }
.dsw-rd-actie--b .dsw-rd-b-balk i{ display:block; height:10px; border-radius:3px; background:#dcdfeb; }
.dsw-rd-actie--b .dsw-rd-b-balk.is-dit i.is-vol{ background:var(--r-dark,#2d2d5a); }
.dsw-rd-actie--b .dsw-rd-b-balk.is-dit i.is-deel{
  background:repeating-linear-gradient(135deg,#9b9dc4 0 3px,#d9daec 3px 6px);
}
.dsw-rd-actie--b .dsw-rd-b-balk.is-norm i.is-vol{ background:#9b9dc4; }
.dsw-rd-actie--b .dsw-rd-b-sr{
  position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* GW 2-11-2026: "5 jaar garantie blok iets minder hoog". Alleen de garantiekaart en alleen boven
   560 px; mobiel heeft hieronder al zijn eigen compacte maten. Minder lucht, zelfde inhoud. */
@media (min-width:561px){
  .dsw-rd-actie--garantie.dsw-rd-actie--b .dsw-rd-b-vak{ padding:10px 16px; }
  .dsw-rd-actie--garantie.dsw-rd-actie--b .dsw-rd-b-inhoud{ padding:9px 18px; gap:5px; }
  .dsw-rd-actie--garantie.dsw-rd-actie--b .dsw-rd-b-balken{ gap:4px 12px; }
  .dsw-rd-actie--garantie.dsw-rd-actie--b .dsw-rd-b-label{ line-height:1.1; }
  .dsw-rd-actie--garantie.dsw-rd-actie--b .dsw-rd-b-balk i{ height:8px; }
}

@media (max-width:560px){
  .dsw-rd-actie.dsw-rd-actie--b{ grid-template-columns:100px minmax(0,1fr) !important; border-radius:14px !important; }
  .dsw-rd-actie--b .dsw-rd-b-vak{ padding:12px; }
  .dsw-rd-actie--b .dsw-rd-b-oog{ font-size:10.5px; }
  .dsw-rd-actie--b .dsw-rd-b-waarde{ font-size:22px; }
  .dsw-rd-actie--b .dsw-rd-b-waarde.is-lang{ font-size:18px; }
  .dsw-rd-actie--b .dsw-rd-b-inhoud{ padding:10px 12px; gap:6px; }
  .dsw-rd-actie--b .dsw-rd-b-kop{ font-size:15px; }
  .dsw-rd-actie--b .dsw-rd-b-uitleg{ font-size:12.5px; }
  .dsw-rd-actie--b .dsw-rd-b-balken{ gap:5px 8px; }
  .dsw-rd-actie--b .dsw-rd-b-label{ font-size:11.5px; }
  .dsw-rd-actie--b .dsw-rd-b-balk i{ height:8px; }
  .dsw-rd-actie.dsw-rd-actie--b .dsw-rd-actie-link{ font-size:13px !important; }
}
/* ============ EINDE 15 ============ */

/* 15b - GARANTIE-ACTIE (refund_actie, vorm C) in ontwerp B, EIGEN kleur petrol (GW 29-10-2026: "iets netter maken
   maar moeten wel onderscheidend zijn. Ook in kleur"). Geel = cashback, navy = garantie van het apparaat,
   petrol = actie van de fabrikant. Gebouwd door garantieActieB() in dsw-pdp-redesign.js. */
.dsw-rd-actie.dsw-rd-actie--gactie.dsw-rd-actie--b{ border:1px solid #c6dfe0 !important; }
.dsw-rd-actie--gactie.dsw-rd-actie--b .dsw-rd-b-vak{ background:#0e5a61; }
.dsw-rd-actie--gactie.dsw-rd-actie--b .dsw-rd-b-oog{ color:#cfe7e8; }
.dsw-rd-actie--gactie.dsw-rd-actie--b .dsw-rd-b-waarde{ color:#fff; }
.dsw-rd-actie.dsw-rd-actie--gactie.dsw-rd-actie--b .dsw-rd-actie-link{ color:#0e5a61 !important; }
.dsw-rd-actie--gactie .dsw-rd-b-rij:first-child{ flex-wrap:nowrap; }
.dsw-rd-actie--b .dsw-rd-b-zegel{
  flex:none; display:block; width:40px; height:40px; object-fit:contain; margin:0; border:0; background:none;
}
.dsw-rd-actie--gactie .dsw-rd-b-uitleg{ flex:1 1 220px; min-width:0; }
@media (max-width:560px){
  .dsw-rd-actie--b .dsw-rd-b-zegel{ width:34px; height:34px; }
}
/* ============ EINDE 15b ============ */