/* ============================================================
   product-v12.css — Premium product-view v12 (FASE C).
   ------------------------------------------------------------
   Laadt NAAST home-v12.css (gedeelde tokens/chrome/buttons/usps/
   reveal onder .jdh). Hier alleen product-eigen chrome onder
   .jdp / .jdp-*. De configurator-v2-bundle levert H1 + gallery +
   wizard + sticky add-to-cart (eigen CSS) — die styling staat NIET
   hier. Geen nieuwe !important-laag. Cache-bust via filemtime() in
   inc/mockup-render.php.
   ============================================================ */

/* ---- Sticky-fix (SAVE307): mockup.css wordt óók op de v12-product-shell geladen
   (html,body{overflow-x:hidden}), maar overrides.css — met de SAVE155-clip-fix — NIET.
   overflow-x:hidden maakt van html/body een scroll-container -> position:sticky (de
   configurator-v2 linkerkolom .jdc2-left) breekt. `clip` voorkomt horizontale overflow
   ZÓNDER scroll-container -> sticky werkt. `!important` omdat mockup.css ná deze file
   laadt. Identiek aan overrides.css (monoliet); hier voor de v12-context. ---- */
html, body { overflow-x: clip !important; }

/* ---- Main ---- */
.jdp-main{background:#fff}

/* ---- Breadcrumb ---- */
.jdp-crumbs{padding-top:clamp(16px,2.6vw,28px)}
.jdp-crumbs .jdh-wrap{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13.5px;color:var(--jdh-muted)}
.jdp-crumbs a{color:var(--jdh-muted);transition:color var(--jdh-tx)}
.jdp-crumbs a:hover{color:var(--jdh-green-deep)}
.jdp-crumb-sep{color:var(--jdh-light)}
.jdp-crumbs [aria-current="page"]{color:var(--jdh-text)}

/* ---- Configurator-mount (de v2-bundle wrap centreert zichzelf op 1240px) ---- */
.jdp-config{padding:clamp(14px,2.4vw,30px) 0 clamp(28px,4.5vw,56px)}
.jdp-config-in{max-width:1320px;margin:0 auto;padding:0 clamp(12px,2.5vw,24px)}
.jdp-noscript{max-width:680px;margin:24px auto;padding:22px 24px;background:var(--jdh-cream);border:1px solid var(--jdh-border);border-radius:var(--jdh-r-lg);text-align:center;font-size:15px;color:var(--jdh-text)}
.jdp-noscript p{margin:0 0 10px}
.jdp-noscript p:last-child{margin:0}
.jdp-noscript a{color:var(--jdh-green-deep);font-weight:600}

/* ---- SEO-beschrijving + materiaal-context ---- */
.jdp-about{background:var(--jdh-cream);padding:clamp(44px,6vw,80px) 0}
.jdp-about-in{max-width:720px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.jdp-about-in .jdh-eyebrow{justify-content:center;margin-bottom:14px}
.jdp-about-lead{font-family:var(--jdh-serif);font-weight:500;font-size:clamp(19px,2.2vw,24px);line-height:1.4;color:var(--jdh-ink);margin:0 0 14px;max-width:36ch}
.jdp-about-text{font-size:16px;color:var(--jdh-muted);line-height:1.7;margin:0 0 22px;max-width:58ch}
.jdp-about-trust{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px}
.jdp-about-trust li{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--jdh-text)}
.jdp-about-trust svg{width:18px;height:18px;flex:none;stroke:var(--jdh-green)}
.jdp-about-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px}
.jdp-about-link{font-size:15px;font-weight:600;color:var(--jdh-green-deep)}
.jdp-about-link span{display:inline-block;transition:transform .25s ease}
.jdp-about-link:hover span{transform:translateX(4px)}