/* ==========================================================================
   Expo-Line PDP — template 11618 (webshop-expo-line-product-detail)
   Eén stylesheet voor de hele productdetailpagina. De Custom CSS van het
   template zelf is leeg (sinds 11/09/2026); alles wat hier niet staat, komt
   uit de kit (post-6.css) of uit de atomic elementstijlen (local-11618-*.css).

   Specificiteit: de atomic elementstijlen staan op `.elementor .e-<hash>`
   (0,2,0). Alles hier dat zo'n regel moet winnen staat op (0,3,0) via een
   extra sectie-ouder of de Woo-context (`.woocommerce div.product …`) —
   nergens via !important.

   Grid: header, footer en PDP delen de kit-container van 1120px. Wil je de
   pagina breder, verander dan --pdp-container hier én de kit — niet één van
   beide.
   ========================================================================== */

:root {
  /* raster */
  --pdp-container: 1120px;
  --pdp-gutter: 24px;

  /* kleur */
  --pdp-green-cta: #1e7b2f;      /* knopvlak, wit erop = 5,3:1 AA */
  --pdp-green-cta-hover: #17692a;
  --pdp-green-text: #2e7d32;     /* groen als tekst — 4,9:1 op wit */
  --pdp-green-accent: #66b86c;   /* kit secondary: iconen, borders. NOOIT als tekst (2,4:1) */
  --pdp-ink: #1a1a1a;
  --pdp-body: #3d3d3d;
  --pdp-muted: #6b6b6b;
  --pdp-line: #e6e6e6;
  --pdp-line-soft: #f0f0f0;
  --pdp-surface: #f6f7f6;
  --pdp-white: #ffffff;

  /* vorm */
  --pdp-radius: 4px;
  --pdp-radius-lg: 6px;

  /* spacing-schaal (4-basis) */
  --pdp-s-1: 4px;
  --pdp-s-2: 8px;
  --pdp-s-3: 12px;
  --pdp-s-4: 16px;
  --pdp-s-5: 24px;
  --pdp-s-6: 32px;
  --pdp-s-7: 48px;
  --pdp-s-8: 64px;

  /* typografie */
  --pdp-font-head: "Roboto Condensed", "Arial Narrow", sans-serif;
  --pdp-font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --pdp-t-eyebrow: 12px;   /* SKU, sectielabels */
  --pdp-t-h1: clamp(30px, 2.9vw, 42px);
  --pdp-t-subtitle: 16px;
  --pdp-t-price: 32px;
  --pdp-t-body: 15px;
  --pdp-t-usp: 14px;
  --pdp-t-h3: 20px;        /* koppen binnen specs / banner */
  --pdp-t-card-title: 15px;
  --pdp-t-card-price: 16px;
  --pdp-t-meta: 13px;

  /* componentmaten */
  --pdp-control-h: 48px;   /* qty-veld en ATC-knop */
  --pdp-cta-height: var(--pdp-control-h);
  --pdp-section-gap: var(--pdp-s-8);   /* 64 — verticale afstand tussen secties (M5-G) */
  --pdp-label-gap: var(--pdp-s-4);     /* 16 — sectielabel → eerste content */
  --pdp-grid-gap: var(--pdp-s-5);      /* 24 — kaarten, kolommen */
  --pdp-card-radius: var(--pdp-radius-lg);
  --pdp-border: 1px solid var(--pdp-line);
  --pdp-green: var(--pdp-green-cta);
  --pdp-heading: var(--pdp-font-head);
  --pdp-row-h: 52px;       /* downloadrij */
  --pdp-icon: 18px;
  --pdp-thumb: 72px;
  --pdp-hero-media-max: 560px;   /* gestapelde hero: plafond voor het (vierkante) productbeeld */
}

/* --------------------------------------------------------------------------
   1. Raster — elke sectie-inner op dezelfde container
   -------------------------------------------------------------------------- */
.elementor .pdp-breadcrumb > .pdp-breadcrumb__inner,
.elementor .pdp-hero > .pdp-hero__row,
.elementor .pdp-specs-section > .pdp-specs,
.elementor .pdp-info,
.elementor .pdp-downloads-section > .pdp-downloads,
.elementor .pdp-upsells,
.elementor .pdp-ex-footer > .pdp-ex-footer__card {
  width: 100%;
  min-width: 0;
  max-width: var(--pdp-container);
  margin-inline: auto;
  padding-block: 0;                    /* atomic e-flexbox-basis: 10px */
  padding-inline: var(--pdp-gutter);
  box-sizing: border-box;
}

/* .pdp-info en .pdp-upsells zijn zélf de container (geen sectie-ouder) en delen hun
   specificiteit (0,2,0) met Elementor's atomic basis `.elementor .e-flexbox-base{padding:10px}`.
   Live wint de regel hierboven op bronvolgorde (base-desktop.css laadt als <link> vóór dit
   bestand); zodra Elementor die CSS inline uitschrijft — na elke cache-clear tot de eerste
   render — keert dat om en staan beide op 10px rondom. Eén niveau hoger (0,3,0) maakt de
   volgorde irrelevant. (17/09: in een snapshot met omgekeerde volgorde gemeten als x=170
   i.p.v. 184 desktop, 10 i.p.v. 16 mobiel.) */
.elementor.elementor-11618 .pdp-info,
.elementor.elementor-11618 .pdp-upsells {
  padding-inline: var(--pdp-gutter);
  padding-block: calc(var(--pdp-section-gap) / 2);
}

/* Sectie-buitenkanten: volle breedte, wit, verticaal ritme */
.elementor .pdp-breadcrumb,
.elementor .pdp-hero,
.elementor .pdp-specs-section,
.elementor .pdp-downloads-section,
.elementor .pdp-ex-footer {
  width: 100%;
  min-width: 0;
  max-width: none;
  padding-inline: 0;
  background: var(--pdp-white);
}

/* Eén ritme: elke sectie draagt de helft van --pdp-section-gap boven en onder,
   zodat content→label overal 64px is, ook waar een sectie conditioneel wegvalt. */
.elementor .pdp-hero            { padding-block: var(--pdp-s-7) calc(var(--pdp-section-gap) / 2); }
.elementor .pdp-specs-section   { padding-block: calc(var(--pdp-section-gap) / 2); }
.elementor .pdp-info            { padding-block: calc(var(--pdp-section-gap) / 2); }
.elementor .pdp-downloads-section { padding-block: calc(var(--pdp-section-gap) / 2); }
.elementor .pdp-upsells         { padding-block: calc(var(--pdp-section-gap) / 2); }
.elementor .pdp-ex-footer       { padding-block: calc(var(--pdp-section-gap) / 2) var(--pdp-section-gap); }

/* --------------------------------------------------------------------------
   2. Gedeelde tekstrollen
   -------------------------------------------------------------------------- */
.pdp-hero__sku,
.pdp-section__label {
  font-family: var(--pdp-font-body);
  font-size: var(--pdp-t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--pdp-green-text);
  margin: 0;
}

.elementor .pdp-section__label { margin-bottom: var(--pdp-label-gap); }

/* --------------------------------------------------------------------------
   3. Breadcrumb
   -------------------------------------------------------------------------- */
.elementor .pdp-breadcrumb {
  border-bottom: 1px solid var(--pdp-line-soft);
  border-color: var(--pdp-line-soft);   /* wint van de global class (rood) */
}

.elementor .pdp-breadcrumb > .pdp-breadcrumb__inner {
  display: flex;
  align-items: center;
  padding-block: var(--pdp-s-3);
}

.elementor .pdp-breadcrumb .elementor-widget-woocommerce-breadcrumb { margin: 0; }

.pdp-breadcrumb .woocommerce-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pdp-s-2);
  margin: 0;
  padding: 0;
  font-family: var(--pdp-font-body);
  font-size: var(--pdp-t-eyebrow);
  font-weight: 500;
  line-height: 1.5;
  color: var(--pdp-ink);
}

.pdp-breadcrumb .woocommerce-breadcrumb a {
  display: inline-block;
  padding-block: var(--pdp-s-1);        /* 12,8px tekst + 2×4 = 27px doelhoogte (2.5.8: ≥ 24) */
  color: var(--pdp-muted);
  text-decoration: none;
  transition: color 160ms ease;
}

.pdp-breadcrumb .woocommerce-breadcrumb a:hover { color: var(--pdp-green-text); }

/* --------------------------------------------------------------------------
   4. Hero — media 56 / content 44
   -------------------------------------------------------------------------- */
.elementor .pdp-hero > .pdp-hero__row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--pdp-s-8);
}

.elementor .pdp-hero .pdp-hero__gallery,
.elementor .pdp-hero .pdp-hero__summary {
  min-width: 0;
  max-width: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* 52/48 met de gap eruit gerekend — content-kolom ≥ 480px op 1120 zodat USP's op één regel blijven */
.elementor .pdp-hero .pdp-hero__gallery { flex: 0 1 calc(52% - var(--pdp-s-6)); gap: var(--pdp-s-3); }
.elementor .pdp-hero .pdp-hero__summary { flex: 0 1 calc(48% - var(--pdp-s-6)); gap: 0; padding-top: var(--pdp-s-2); }

/* Galerij */
.pdp-hero__gallery .elementor-widget-woocommerce-product-images { width: 100%; }

/* Woo: `.woocommerce div.product div.images` (0,3,2) — hier (0,4,2) */
.woocommerce div.product .pdp-hero__gallery div.woocommerce-product-gallery {
  width: 100%;
  float: none;
  margin: 0;
}

.pdp-hero__gallery .woocommerce-product-gallery__wrapper { margin: 0; }

/* Geen kader rond het productbeeld (referentie): wit op wit, enkel de radius */
.pdp-hero__gallery .woocommerce-product-gallery__image {
  background: var(--pdp-white);
  border: 0;
  border-radius: var(--pdp-radius-lg);
  overflow: hidden;
}

.pdp-hero__gallery .woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.pdp-hero__gallery .woocommerce-product-gallery__trigger {
  top: var(--pdp-s-3);
  right: var(--pdp-s-3);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pdp-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.pdp-hero__gallery .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pdp-s-2);
  margin: var(--pdp-s-3) 0 0;
  padding: 0;
  list-style: none;
}

/* Woo: `.woocommerce div.product div.images .flex-control-thumbs li` (0,4,3) — hier (0,5,3) */
.woocommerce div.product .pdp-hero__gallery div.images .flex-control-thumbs li {
  width: var(--pdp-thumb);
  float: none;
  margin: 0;
}

.pdp-hero__gallery .flex-control-thumbs img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border: 1px solid var(--pdp-line);
  border-radius: var(--pdp-radius);
  background: var(--pdp-white);
  opacity: 1;
  cursor: pointer;
  transition: border-color 160ms ease;
}

.pdp-hero__gallery .flex-control-thumbs img:hover,
.pdp-hero__gallery .flex-control-thumbs img.flex-active {
  border-color: var(--pdp-green-accent);
}

/* Titelblok */
.elementor .pdp-hero .pdp-hero__title-block {
  min-width: 0;
  max-width: none;
  width: 100%;
  padding: 0 0 var(--pdp-s-5);
  gap: var(--pdp-s-2);
}

.pdp-hero__summary h1 {
  font-family: var(--pdp-font-head);
  font-size: var(--pdp-t-h1);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;   /* geen wees op de laatste regel; wrap volgt de kolom, niet de fontgrootte */
  color: var(--pdp-ink);
  margin: 0;
  max-width: 22ch;
}

.pdp-hero__subtitle,
.pdp-hero__subtitle p {
  font-family: var(--pdp-font-body);
  font-size: var(--pdp-t-subtitle);
  font-weight: 400;
  line-height: 1.5;
  color: var(--pdp-muted);
  margin: 0;
}

/* Prijsblok */
.elementor .pdp-hero .pdp-hero__price-block {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--pdp-s-2);
  width: 100%;
  padding: var(--pdp-s-2) 0 0;   /* geen hairlines (M5-E1): ritme uit de padding */
}

.pdp-hero__price-block .elementor-widget-woocommerce-product-price { margin: 0; }

/* Woo/Elementor: `.woocommerce .elementor-widget-woocommerce-product-price .price` (0,3,0) — hier (0,4,0).
   De prijswidget zelf draagt géén typografie-instelling meer (verwijderd 11/09). */
.woocommerce .pdp-hero .pdp-hero__price-block .price {
  display: flex;
  align-items: baseline;
  gap: var(--pdp-s-2);
  margin: 0;
  font-family: var(--pdp-font-head);
  font-size: var(--pdp-t-price);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--pdp-ink);
}

.pdp-hero__price-block .price ins { text-decoration: none; }

.pdp-hero__price-block .price del,
.pdp-hero__price-block .price del .woocommerce-Price-amount {
  font-size: 18px;
  font-weight: 500;
  color: var(--pdp-muted);
}

.pdp-hero__price-suffix,
.pdp-hero__price-suffix .pdp-price-suffix {
  font-family: var(--pdp-font-body);
  font-size: var(--pdp-t-meta);
  color: var(--pdp-muted);
  margin: 0;
}

.pdp-hero__price-block .elementor-widget-shortcode { margin: 0; width: auto; }

/* Aantal + primaire CTA — één koopgroep: qty en knop op één regel zolang de knop
   zijn label niet hoeft te breken; anders valt de knop op volle breedte eronder
   (content-gestuurd via min-width: max-content, geen breakpoint). */
.elementor .pdp-hero .pdp-hero__atc-block {
  min-width: 0;
  max-width: none;
  width: 100%;
  padding: var(--pdp-s-5) 0 0;   /* prijs → koopblok: 24 */
  gap: 0;
}

/* Adsolut (display_product_pdf, woocommerce_before_add_to_cart_form) echo't verborgen
   pdf-links plus een <div>&nbsp;</div>-spacer vóór het formulier: 24px lege regel. */
.pdp-hero__atc-block .elementor-add-to-cart > div:not([class]) { display: none; }

.pdp-hero__atc-block .elementor-widget-woocommerce-product-add-to-cart { margin: 0; width: 100%; }

/* Elementor Pro: `:is(…, .woocommerce div.product .elementor-widget-…) form.cart:not(.grouped_form):not(.variations_form)`
   = (0,6,2) — hier (0,7,2) met dezelfde :not()-staart */
.woocommerce div.product .pdp-hero .pdp-hero__atc-block form.cart:not(.grouped_form):not(.variations_form) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--pdp-s-3);
  margin: 0;
}

/* Woo's clearfix (`.woocommerce div.product form.cart::before/::after`, display:table) wordt in een
   flex-container een lege flex-item van 0px — plus de gap gaf dat 12px inspringing vóór het aantal. */
.woocommerce div.product .pdp-hero .pdp-hero__atc-block form.cart::before,
.woocommerce div.product .pdp-hero .pdp-hero__atc-block form.cart::after { content: none; }

/* Variabel product: qty + knop zitten in .woocommerce-variation-add-to-cart.
   Elementor Pro zet die op (0,6,2) nowrap — hier (0,6,2), laadt later. */
.woocommerce div.product .pdp-hero .pdp-hero__atc-block form.variations_form .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--pdp-s-3);
}

/* Woo: `.woocommerce div.product form.cart div.quantity` (0,3,3) zet float + margin-right 4px — hier (0,4,3) */
.woocommerce div.product .pdp-hero__atc-block form.cart div.quantity {
  margin: 0;
  float: none;
  flex: 0 0 auto;
}

/* Dropdown van advanced-product-quantity (producten met vaste hoeveelheden, bv. 716: 1/9/20).
   Zelfde maat en rand als de stepper, eigen chevron. */
.pdp-hero__atc-block .quantity select.qty {
  height: var(--pdp-control-h);
  min-width: 84px;
  padding: 0 32px 0 var(--pdp-s-3);
  border: 1px solid var(--pdp-line);
  border-radius: var(--pdp-radius);
  background: var(--pdp-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 14px;
  font-family: var(--pdp-font-head);
  font-size: 16px;
  font-weight: 600;
  color: var(--pdp-ink);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.pdp-hero__atc-block .quantity select.qty:focus {
  border-color: var(--pdp-green-accent);
  box-shadow: 0 0 0 3px rgba(102, 184, 108, 0.2);
  outline: none;
}

/* Stepper (exl-pdp.js) — knoppen om de bestaande number-input; het input zelf blijft
   name="quantity" voor WooCommerce. Niet actief als advanced-product-quantity een
   dropdown inwisselt (dan is het input verborgen). */
.pdp-hero__atc-block .pdp-qty {
  display: inline-flex;
  align-items: stretch;
  height: var(--pdp-control-h);
  border: 1px solid var(--pdp-line);
  border-radius: var(--pdp-radius);
  background: var(--pdp-white);
  overflow: hidden;
}

.pdp-hero__atc-block .pdp-qty:focus-within {
  border-color: var(--pdp-green-accent);
  box-shadow: 0 0 0 3px rgba(102, 184, 108, 0.2);
}

.pdp-hero__atc-block .pdp-qty__btn {
  width: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pdp-ink);
  font: 600 18px/1 var(--pdp-font-head);
  cursor: pointer;
  transition: background-color 120ms ease;
}

.pdp-hero__atc-block .pdp-qty__btn:hover { background: var(--pdp-surface); }
.pdp-hero__atc-block .pdp-qty__btn:disabled { color: var(--pdp-muted); cursor: default; background: transparent; }

.pdp-hero__atc-block .pdp-qty input.qty {
  width: 44px;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -moz-appearance: textfield;
  appearance: textfield;
}

.pdp-hero__atc-block .pdp-qty input.qty:focus { border: 0; box-shadow: none; }

.pdp-hero__atc-block .pdp-qty input.qty::-webkit-outer-spin-button,
.pdp-hero__atc-block .pdp-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pdp-hero__atc-block .quantity input.qty {
  width: 64px;
  height: var(--pdp-control-h);
  padding: 0 var(--pdp-s-2);
  border: 1px solid var(--pdp-line);
  border-radius: var(--pdp-radius);
  background: var(--pdp-white);
  font-family: var(--pdp-font-head);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  color: var(--pdp-ink);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.pdp-hero__atc-block .quantity input.qty:focus {
  border-color: var(--pdp-green-accent);
  box-shadow: 0 0 0 3px rgba(102, 184, 108, 0.2);
  outline: none;
}

/* Woo: `.woocommerce button.button.alt` (0,3,1); Elementor Pro zet margin-inline-start via
   `:is(…, .woocommerce div.product .elementor-widget-…) form.cart button:where(:not(:first-child))` (0,5,2) — hier (0,5,3) */
.woocommerce div.product .pdp-hero .pdp-hero__atc-block form.cart button.single_add_to_cart_button {
  flex: 1 1 auto;
  min-width: max-content;   /* label breekt nooit; past het niet naast het aantal, dan volle breedte eronder */
  height: var(--pdp-control-h);
  margin: 0;
  margin-inline-start: 0;   /* Elementor Pro: var(--button-spacing, 10px) */
  padding: 0 clamp(var(--pdp-s-4), 2.5vw, var(--pdp-s-6));
  border: 0;
  border-radius: var(--pdp-radius);
  background: var(--pdp-green-cta);
  color: var(--pdp-white);
  font-family: var(--pdp-font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms ease;
}

.woocommerce div.product .pdp-hero .pdp-hero__atc-block form.cart button.single_add_to_cart_button:hover,
.woocommerce div.product .pdp-hero .pdp-hero__atc-block form.cart button.single_add_to_cart_button:focus-visible { background: var(--pdp-green-cta-hover); }

/* Woo zet .disabled/.wc-variation-selection-needed op variabele producten zonder keuze */
.woocommerce div.product .pdp-hero .pdp-hero__atc-block form.cart button.single_add_to_cart_button:disabled,
.woocommerce div.product .pdp-hero .pdp-hero__atc-block form.cart button.single_add_to_cart_button.disabled {
  background: var(--pdp-green-cta);
  opacity: 0.45;
  cursor: not-allowed;
}

/* USP's */
.elementor .pdp-hero .pdp-hero__usps {
  width: 100%;
  padding-top: var(--pdp-s-5);
  max-width: 44ch;   /* leesbare regel; wrap komt uit de kolom, niet uit het font */
}

.pdp-hero__usps .elementor-widget-icon-list { margin: 0; }

.pdp-hero__usps .elementor-icon-list-items {
  display: flex;
  flex-direction: column;
  gap: var(--pdp-s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pdp-hero__usps .elementor-icon-list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--pdp-s-3);
}

.pdp-hero__usps .elementor-icon-list-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: calc(var(--pdp-t-usp) * 1.5);
}

/* Elementor: `.elementor-11618 .elementor-element.elementor-element-<id> .elementor-icon-list-icon svg` (0,4,1) — hier (0,5,1) */
.elementor .pdp-hero .pdp-hero__usps .elementor-widget-icon-list .elementor-icon-list-icon svg,
.elementor .pdp-hero .pdp-hero__usps .elementor-widget-icon-list .elementor-icon-list-icon i {
  width: 14px;
  height: 14px;
  font-size: 14px;
  color: var(--pdp-green-accent);
  fill: var(--pdp-green-accent);
}

.pdp-hero__usps .elementor-icon-list-text {
  font-family: var(--pdp-font-body);
  font-size: var(--pdp-t-usp);
  font-weight: 500;
  line-height: 1.5;
  color: var(--pdp-body);
}

/* --------------------------------------------------------------------------
   5. Specs — drie gelijke kolommen
   -------------------------------------------------------------------------- */
.elementor .pdp-specs-section > .pdp-specs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--pdp-s-7);
}

.elementor .pdp-specs > .pdp-specs__col {
  flex: 1 1 0;
  min-width: 220px;
  max-width: none;
  padding: 0;   /* atomic e-flexbox-basis: 10px */
  gap: var(--pdp-s-2);
}

.pdp-specs__col > .pdp-section__label { margin-bottom: var(--pdp-s-2); }   /* + kolom-gap 8 = --pdp-label-gap 16 */

/* Decoratieve markering achter het sectielabel (uit de mockup) */
.pdp-specs__col > .pdp-section__label::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 10px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  opacity: 0.8;
}

.pdp-specs__col > h3,
.pdp-consumption-value {
  font-family: var(--pdp-font-head);
  font-size: var(--pdp-t-h3);
  font-weight: 600;
  line-height: 1.3;
  color: var(--pdp-ink);
  margin: 0 0 var(--pdp-s-1);
}

.elementor .pdp-specs .pdp-consumption-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.3em;   /* losse widgets, spaties vallen weg */
  padding: 0;     /* atomic e-flexbox-basis: 10px — contentstart gelijk met de andere kolommen */
}

.pdp-consumption-value p { margin: 0; }

.pdp-specs__col p,
.pdp-specs__col li,
.pdp-applications li {
  font-family: var(--pdp-font-body);
  font-size: var(--pdp-t-body);
  line-height: 1.7;
  color: var(--pdp-muted);
  margin: 0;
}

.pdp-applications {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}

.pdp-pitch-icon {
  width: 100%;
  max-width: 112px;
  height: auto;
  color: var(--pdp-ink);
  margin-top: var(--pdp-s-3);
}

/* --------------------------------------------------------------------------
   6. Meer informatie
   -------------------------------------------------------------------------- */
.elementor .pdp-info { gap: var(--pdp-s-4); }

.elementor .pdp-info > .pdp-section__label { margin-bottom: 0; }   /* flex-gap 16 = --pdp-label-gap */

.pdp-info p,
.pdp-info__long p {
  font-family: var(--pdp-font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--pdp-body);
  max-width: 60ch;   /* editoriale leesmaat, niet de volle container */
  margin: 0;
}

/* De lange omschrijving is sinds 1.2.0 een wrapper-<div class="pdp-info__long"> met
   echte <p>'s erin (expoline_pdp_render_long_description). De leesmaat zit op de
   wrapper; de alinea's erven hem. */
.pdp-info__long { max-width: 72ch; }
.pdp-info__long p { max-width: none; }
.pdp-info__long p + p { margin-top: var(--pdp-s-4); }

/* Contactblok als kaart — op elke breedte, zodat het op desktop de rechterkolom vult
   en op mobiel als afgebakend blok onder de tekst staat. */
.pdp-info .elementor-widget-icon-list {
  margin-top: var(--pdp-s-2);
  width: 100%;
  max-width: 72ch;          /* gestapeld: even breed als de tekstkolom erboven */
  box-sizing: border-box;
  background: var(--pdp-surface);
  border-radius: var(--pdp-card-radius);
  padding: var(--pdp-s-5);
}

/* Desktop: editorial tweekolommer. Vóór 17/09/2026 bleef rechts van de 60ch-tekst de
   halve container leeg en stond het contactblok verweesd onder de tekst. Nu: label over
   de volle breedte, tekst links (max 72ch), contactkaart rechts, bovenaan uitgelijnd.
   Rekent op drie kinderen: label, tekst(wrapper), contact — extra tekstkinderen (de
   fallback-widgets renderen er hoogstens één) vallen in kolom 1. */
@media (min-width: 1025px) {
  .elementor.elementor-11618 .pdp-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 27%);
    column-gap: var(--pdp-s-8);
    row-gap: var(--pdp-s-4);
    align-items: start;
  }
  .elementor.elementor-11618 .pdp-info > .pdp-section__label { grid-column: 1 / -1; }
  .elementor.elementor-11618 .pdp-info > :not(.pdp-section__label):not(.elementor-widget-icon-list) { grid-column: 1; }
  .elementor.elementor-11618 .pdp-info > .elementor-widget-icon-list { grid-column: 2; grid-row: 2; margin-top: 0; max-width: none; }
}

.pdp-info .elementor-icon-list-item {
  display: flex;
  align-items: center;   /* icoon gecentreerd t.o.v. het 2-regelige tekstblok */
  gap: var(--pdp-s-3);
}

.pdp-info .elementor-icon-list-icon { display: flex; align-items: center; }

.elementor .pdp-info .elementor-widget-icon-list .elementor-icon-list-icon svg,
.elementor .pdp-info .elementor-widget-icon-list .elementor-icon-list-icon i {
  width: 24px;
  height: 24px;
  font-size: 24px;
  color: var(--pdp-green-accent);
  fill: var(--pdp-green-accent);
}

.pdp-info .elementor-icon-list-text,
.pdp-info a {
  font-family: var(--pdp-font-body);
  font-size: var(--pdp-t-body);
  line-height: 1.5;
  color: var(--pdp-green-text);
}

/* Links ín de omschrijving (mailto uit de ERP-tekst): onderstrepen, kleur alleen is
   geen onderscheid (1.4.1). De contact-icoonrij is een blok, geen tekstlink. */
.pdp-info__long a,
.pdp-info p a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  /* Verticale padding op een inline element vergroot het klikvlak (≥ 24 px, 2.5.8)
     zonder de regelhoogte te raken. */
  padding-block: 0.25em;
}

/* Woo's "verwijderen"-link onder de variatiekeuze: zelfde klikvlak-regel. */
.elementor-11618 .reset_variations {
  display: inline-block;
  padding-block: var(--pdp-s-1);
}

/* --------------------------------------------------------------------------
   7. Downloads — lichte rijenlijst, één omkadering
   -------------------------------------------------------------------------- */
.elementor .pdp-downloads-section > .pdp-downloads { gap: 0; }

.pdp-downloads .elementor-widget-button {
  width: 100%;
  margin: 0;
}

.pdp-downloads .elementor-widget-button .elementor-widget-container { margin: 0; }

.elementor .pdp-downloads a.elementor-button {
  display: flex;
  align-items: center;
  gap: var(--pdp-s-3);
  width: 100%;
  min-height: var(--pdp-row-h);
  padding: 0 var(--pdp-s-4);
  border: 1px solid var(--pdp-line);
  border-radius: 0;
  background: var(--pdp-white);
  color: var(--pdp-ink);
  font-family: var(--pdp-font-body);
  font-size: var(--pdp-t-body);
  font-weight: 500;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
  text-decoration: none;
  box-shadow: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}

/* Rijen sluiten aan: bovenste rij rondt bovenaan, onderste onderaan */
.pdp-downloads .elementor-widget-button + .elementor-widget-button a.elementor-button { border-top: 0; }
.pdp-downloads .elementor-widget-button:first-of-type a.elementor-button { border-radius: var(--pdp-radius) var(--pdp-radius) 0 0; }
.pdp-downloads .elementor-widget-button:last-of-type a.elementor-button { border-radius: 0 0 var(--pdp-radius) var(--pdp-radius); }

.elementor .pdp-downloads a.elementor-button:hover,
.elementor .pdp-downloads a.elementor-button:focus-visible {
  background: var(--pdp-surface);
  color: var(--pdp-ink);
}

.pdp-downloads a.elementor-button .elementor-button-content-wrapper {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.pdp-downloads a.elementor-button .elementor-button-text { text-align: left; }

/* Documenticoon links, chevron rechts — beide uit currentColor gemaskt */
.pdp-downloads a.elementor-button::before,
.pdp-downloads a.elementor-button::after {
  content: "";
  flex: 0 0 auto;
  width: var(--pdp-icon);
  height: var(--pdp-icon);
  background: currentColor;
  -webkit-mask: var(--pdp-mask) center / contain no-repeat;
  mask: var(--pdp-mask) center / contain no-repeat;
}

.pdp-downloads a.elementor-button::before {
  --pdp-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");
  opacity: 0.7;
}

/* Chevron omlaag = uitklap-signaal (M2-C); rechts zou navigatie suggereren */
.pdp-downloads a.elementor-button::after {
  --pdp-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  width: 14px;
  height: 14px;
  opacity: 0.45;
  transition: opacity 160ms ease, transform 160ms ease;
}

.pdp-downloads a.elementor-button:hover::after { opacity: 0.9; transform: translateY(2px); }

/* --------------------------------------------------------------------------
   8. Related products — horizontale lijst-kaart, borderless (M5-D)
   Markup (Woo/Elementor Pro): li.product > a.LoopProduct-link(img, h2, span.price)
   + span.pdp-card__suffix (mu-plugin) + a.button(add-to-cart).
   De link krijgt display:contents zodat beeld/titel/prijs in het kaartgrid vallen;
   beeld + titel navigeren naar de PDP, de knop voegt toe — twee losse acties,
   geen geneste interactieve elementen, geen kaart-brede overlay.
   Selectors dragen `.elementor-widget-woocommerce-products.elementor-wc-products`
   omdat Elementor Pro zijn eigen regels op (0,6,x) zet.
   -------------------------------------------------------------------------- */
.elementor .pdp-upsells { gap: 0; }

.pdp-upsells .elementor-widget-woocommerce-products { width: 100%; margin: 0; }

.pdp-upsells section.related > h2,
.pdp-upsells section.up-sells > h2 { display: none; }   /* sectie heeft al een label */

.pdp-upsells .elementor-widget-woocommerce-products.elementor-wc-products ul.products {
  --grid-column-gap: var(--pdp-grid-gap);
  --grid-row-gap: var(--pdp-grid-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pdp-upsells .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product {
  --pdp-card-thumb: 88px;
  position: relative;
  display: grid;
  grid-template-columns: var(--pdp-card-thumb) minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: var(--pdp-s-4);
  row-gap: var(--pdp-s-1);
  align-items: center;
  margin: 0;
  padding: var(--pdp-s-3) 0;
  border: 0;
  border-top: var(--pdp-border);   /* vlak: enkel een scheidingslijn boven, geen box */
  background: transparent;
  list-style: none;
}

.pdp-upsells ul.products li.product::marker { content: none; }

.pdp-upsells .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product > a.woocommerce-LoopProduct-link {
  display: contents;
  color: var(--pdp-ink);
  text-decoration: none;
}

/* Vast beeldframe: bronverhoudingen verschillen, het frame niet */
.pdp-upsells .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product img {
  grid-column: 1;
  grid-row: 1 / 4;
  display: block;
  width: var(--pdp-card-thumb);
  height: var(--pdp-card-thumb);
  object-fit: contain;
  object-position: center;
  margin: 0;
}

.pdp-upsells .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product h2.woocommerce-loop-product__title {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-family: var(--pdp-font-head);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-transform: uppercase;   /* headings-token: condensed, bold, caps (M5-D1) */
  color: var(--pdp-ink);
  margin: 0;
  padding: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pdp-upsells ul.products li.product a.woocommerce-LoopProduct-link:hover h2.woocommerce-loop-product__title,
.pdp-upsells ul.products li.product a.woocommerce-LoopProduct-link:focus-visible h2.woocommerce-loop-product__title { color: var(--pdp-green-text); }

.pdp-upsells .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product span.price {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--pdp-font-head);
  font-size: var(--pdp-t-card-price);
  font-weight: 700;
  line-height: 1.2;
  color: var(--pdp-ink);
  margin: 0;
}

.pdp-upsells ul.products li.product .price del { font-size: var(--pdp-t-meta); color: var(--pdp-muted); }
.pdp-upsells ul.products li.product .price ins { text-decoration: none; }

/* Zelfde suffix-bron als de hero (EXPOLINE_PDP_PRICE_SUFFIX) */
.pdp-upsells ul.products li.product .pdp-card__suffix {
  grid-column: 2;
  grid-row: 3;
  align-self: start;
  font-family: var(--pdp-font-body);
  font-size: var(--pdp-t-meta);
  line-height: 1.2;
  color: var(--pdp-muted);
}

/* Add-to-cart: winkelwagen-glyph (geen pijl — die leest als "bekijk"), 44px doel */
.pdp-upsells .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product a.button {
  grid-column: 3;
  grid-row: 1 / 4;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--pdp-line);
  border-radius: var(--pdp-radius);
  background: var(--pdp-white);
  color: var(--pdp-green-text);
  font-size: 0;
  line-height: 0;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.pdp-upsells ul.products li.product a.button::after {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--pdp-mask) center / contain no-repeat;
  mask: var(--pdp-mask) center / contain no-repeat;
  --pdp-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a1 1 0 0 0 1 .8h9.6a1 1 0 0 0 1-.8L21 8H7'/%3E%3Ccircle cx='9.5' cy='20' r='1.2'/%3E%3Ccircle cx='17.5' cy='20' r='1.2'/%3E%3Cpath d='M13 10v4M11 12h4'/%3E%3C/svg%3E");
}

.pdp-upsells .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product a.button:hover,
.pdp-upsells .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product a.button:focus-visible {
  background: var(--pdp-green-cta);
  border-color: var(--pdp-green-cta);
  color: var(--pdp-white);
}

.pdp-upsells .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product a.button.loading { opacity: 0.6; }

/* Woo's "Bekijk winkelwagen"-link na ajax-add: onder de kaart, niet in het grid */
.pdp-upsells ul.products li.product .added_to_cart {
  grid-column: 1 / -1;
  position: relative;
  z-index: 1;
  font-size: var(--pdp-t-meta);
  color: var(--pdp-green-text);
}

/* --------------------------------------------------------------------------
   9. EX E-volution — kaart: tekst links, beeld rechts
   -------------------------------------------------------------------------- */
.elementor .pdp-ex-footer > .pdp-ex-footer__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38%;
  align-items: stretch;
  /* kaartrand gelijk met de productkaarten: container minus gutters */
  width: calc(100% - 2 * var(--pdp-gutter));
  max-width: calc(var(--pdp-container) - 2 * var(--pdp-gutter));
  padding: 0;
  border: 1px solid var(--pdp-line);
  border-radius: var(--pdp-radius-lg);
  box-shadow: none;
  overflow: hidden;
}

.elementor .pdp-ex-footer__card > .pdp-ex-footer__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pdp-s-4);
  min-width: 0;
  padding: var(--pdp-s-7) var(--pdp-s-7) var(--pdp-s-7);
}

.elementor .pdp-ex-footer__body > .pdp-ex-footer__text {
  width: 100%;
  min-width: 0;
  padding: 0;
  gap: var(--pdp-s-3);
}

/* Het EX-merkteken: klein, boven de kop */
.elementor .pdp-ex-footer__body > .pdp-ex-footer__logo {
  order: -1;
  width: 64px;
  min-width: 0;
  height: 36px;
  margin: 0;
  padding: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

.pdp-ex-footer__logo .elementor-widget-spacer { display: none; }

.pdp-ex-footer__text h2 {
  font-family: var(--pdp-font-head);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--pdp-ink);
  margin: 0;
}

.pdp-ex-footer__text p {
  font-family: var(--pdp-font-body);
  font-size: var(--pdp-t-body);
  line-height: 1.7;
  color: var(--pdp-muted);
  max-width: 52ch;
  margin: 0;
  padding: 0;
}

.elementor a.pdp-ex-footer__cta-link {
  display: inline-block;
  max-width: 100%;
  text-wrap: balance;   /* "… →" valt niet als wees op een eigen regel */
  width: auto;
  margin-top: var(--pdp-s-2);
  /* 21px regel + 2×4 = 29px doelhoogte (2.5.8). De enige !important in dit bestand:
     custom-webshop-archive v3.5.0 (cwa-frontend.css:654, 04/09 — van vóór deze stylesheet)
     zet op dezelfde klasse `padding:0 !important; display:inline`. Backlog: dat blok uit
     CWA halen, dan mag dit terug naar gewone declaraties. */
  padding: var(--pdp-s-1) 0 !important;
  display: inline-block !important;
  border: 0;
  background: none;
  font-family: var(--pdp-font-body);
  font-size: var(--pdp-t-usp);
  font-weight: 700;
  color: var(--pdp-green-text);
  text-decoration: none;
  text-align: left;
  align-self: flex-start;
}

.elementor a.pdp-ex-footer__cta-link:hover,
.elementor a.pdp-ex-footer__cta-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.elementor .pdp-ex-footer__card > .pdp-ex-footer__visual {
  min-width: 0;
  min-height: 240px;
  padding: 0;   /* atomic e-div-block-basis: 10px */
  overflow: hidden;
}

.elementor .pdp-ex-footer__visual .elementor-widget-html,
.elementor .pdp-ex-footer__visual .elementor-widget-container { height: 100%; margin: 0; padding: 0; }

/* `.elementor img{height:auto}` (0,1,1) — hier (0,2,2) */
.elementor .pdp-ex-footer__visual img.pdp-ex-footer__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --------------------------------------------------------------------------
   10. Focus
   -------------------------------------------------------------------------- */
.pdp-breadcrumb a:focus-visible,
.pdp-hero a:focus-visible,
.pdp-hero button:focus-visible,
.pdp-specs a:focus-visible,
.pdp-info a:focus-visible,
.pdp-downloads a:focus-visible,
.pdp-upsells a:focus-visible,
.pdp-ex-footer a:focus-visible {
  outline: 2px solid var(--pdp-green-text);
  outline-offset: 2px;
}

/* Aansluitende rijen: ring naar binnen, anders knipt de buurrij hem af */
.pdp-downloads a.elementor-button:focus-visible { outline-offset: -2px; }

/* --------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --pdp-t-price: 28px; }

  /* Tablet: beeld en koopblok blijven naast elkaar (50/50) tot de Elementor-tabletgrens 768 —
     de koopgroep (aantal 84 + 12 + knop max-content) past vanaf ±360px kolombreedte. */
  .elementor .pdp-hero > .pdp-hero__row { gap: var(--pdp-s-6); }
  .elementor .pdp-hero .pdp-hero__gallery { flex-basis: calc(50% - var(--pdp-s-4)); }
  .elementor .pdp-hero .pdp-hero__summary { flex-basis: calc(50% - var(--pdp-s-4)); }
  .elementor .pdp-specs-section > .pdp-specs { gap: var(--pdp-s-6); }
  .elementor .pdp-specs > .pdp-specs__col { min-width: 200px; }
  .elementor .pdp-ex-footer > .pdp-ex-footer__card { grid-template-columns: minmax(0, 1fr) 34%; }
  .elementor .pdp-ex-footer__card > .pdp-ex-footer__body { padding: var(--pdp-s-6); }

  /* Drie horizontale kaarten naast elkaar wordt onder 1025px te krap (thumb + 2 regels + pijl) */
  .pdp-upsells .elementor-widget-woocommerce-products.elementor-wc-products ul.products.elementor-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root {
    --pdp-gutter: 16px;
    --pdp-section-gap: var(--pdp-s-7);   /* 48 — mobiel ritme: content→label 48 i.p.v. 64 */
    --pdp-t-price: 28px;
    --pdp-t-h3: 18px;
    --pdp-t-card-title: 14px;
  }

  /* Gestapelde hero (Elementor-tabletgrens): beeld gecentreerd met plafond, daaronder het koopblok.
     Ritme: beeld → SKU 24, titelblok → prijs 16, prijs → koopgroep 24, koopgroep → USP's 24. */
  .elementor .pdp-hero { padding-block: var(--pdp-s-6) calc(var(--pdp-section-gap) / 2); }
  .elementor .pdp-hero > .pdp-hero__row { flex-direction: column; gap: var(--pdp-s-5); }
  .elementor .pdp-hero .pdp-hero__gallery,
  .elementor .pdp-hero .pdp-hero__summary { flex: 0 0 auto; width: 100%; max-width: 100%; }   /* atomic mobile: max-width:100px (typefout) */
  .elementor .pdp-hero .pdp-hero__gallery { max-width: min(100%, var(--pdp-hero-media-max)); margin-inline: auto; }
  .elementor .pdp-hero .pdp-hero__summary { padding-top: 0; }
  .elementor .pdp-hero .pdp-hero__title-block { padding-bottom: var(--pdp-s-4); }
  .elementor .pdp-hero .pdp-hero__usps { padding-top: var(--pdp-s-5); }

  .elementor .pdp-specs > .pdp-specs__col { flex-basis: 100%; }

  .elementor .pdp-ex-footer > .pdp-ex-footer__card { grid-template-columns: 1fr; }
  .elementor .pdp-ex-footer__card > .pdp-ex-footer__visual { min-height: 180px; order: -1; }

  .woocommerce div.product .pdp-hero__gallery div.images .flex-control-thumbs li { width: 56px; }

  /* Lijst-kaarten: één kolom — Elementor's `.elementor-grid-mobile-2 .elementor-grid` (0,2,0) zou 2×~170px geven */
  .pdp-upsells .elementor-widget-woocommerce-products.elementor-wc-products ul.products.elementor-grid { grid-template-columns: 1fr; }

  .elementor .pdp-ex-footer__card > .pdp-ex-footer__body { padding: var(--pdp-s-5); }
  .pdp-ex-footer__text h2 { font-size: 24px; }
}

@media (max-width: 480px) {
  /* Eerste scherm: op 390 stond de H1 op 653 en de koopknop op 850 px (gemeten 17/09).
     Beeld 300 i.p.v. 338 breed en 8 px minder hero-top brengen naam + prijs in beeld;
     de breadcrumb verliest bovendien de producttitel-crumb (PHP), −2 regels. */
  :root { --pdp-hero-media-max: 300px; }
  .elementor .pdp-hero { padding-block: var(--pdp-s-5) calc(var(--pdp-section-gap) / 2); }

  .pdp-upsells .elementor-widget-woocommerce-products.elementor-wc-products ul.products { --grid-column-gap: var(--pdp-s-3); --grid-row-gap: var(--pdp-s-3); }

  /* Lijst-kaart smal: beeld | titel / prijs + suffix / winkelwagen — de actie onder de prijs,
     niet rechts naast twee regels tekst. Kolom 2 = prijs (auto), kolom 3 = suffix (rest). */
  .pdp-upsells .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product {
    grid-template-columns: var(--pdp-card-thumb) auto minmax(0, 1fr);
    column-gap: var(--pdp-s-3);
    row-gap: var(--pdp-s-2);
  }
  .pdp-upsells .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product h2.woocommerce-loop-product__title { grid-column: 2 / 4; align-self: start; }
  .pdp-upsells .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product span.price { grid-column: 2; align-self: baseline; }
  .pdp-upsells ul.products li.product .pdp-card__suffix { grid-column: 3; grid-row: 2; align-self: baseline; }
  .pdp-upsells .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product a.button { grid-column: 2 / 4; grid-row: 3; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .pdp-breadcrumb a,
  .pdp-hero__gallery .flex-control-thumbs img,
  .pdp-hero__atc-block .quantity input.qty,
  .pdp-hero__atc-block .single_add_to_cart_button,
  .pdp-downloads a.elementor-button,
  .pdp-downloads a.elementor-button::after,
  .pdp-upsells ul.products li.product,
  .pdp-upsells ul.products li.product a.button {
    transition: none;
  }
}