/* -------------------------------------------------------------
 preview-compound-v2.css — ALLEEN voor preview-compound-v2.html.
 PDP presentatielaag: koopzone behouden, de ~23 detail-secties
 kalmeren, badge-/CTA-ruis terugbrengen. Data + sectie-keys +
 disclaimers ongemoeid (alleen presentatie).
 ------------------------------------------------------------- */

/* === 1. Herhaalde EN-placeholder-kicker verbergen ============ */
/* "Detailed reference content. Open when you need the full context."
 staat onder ~23 secties — pure ruis. JS verbergt 'm hard; dit is
 de CSS-vangrail. */
body[data-v2] .pdp-detail-kicker[data-v2-placeholder] { display: none !important; }

/* === 2. Detail-secties: kalme lijst i.p.v. 23 luide blokken == */
body[data-v2] .pdp-detail-section {
 padding-block: clamp(26px, 3.4vw, 44px) !important;
}
/* Koppen van display-formaat naar rustige sectie-schaal */
body[data-v2] .pdp-detail-section .section__title {
 font-size: clamp(19px, 1.9vw, 24px) !important;
 letter-spacing: -0.01em;
 line-height: 1.2;
}
body[data-v2] .pdp-detail-section .section__head { margin-bottom: 14px; }
/* Afgekapte template-koppen ("… voor …") netjes laten doorlopen
 i.p.v. harde ellipsis op H2-formaat */
body[data-v2] .pdp-detail-section .section__title {
 white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
}
/* Subtiel afwisselend oppervlak geeft groepering/ritme aan de muur */
body[data-v2] .pdp-detail-section:nth-of-type(even) {
 background: rgba(255,255,255,0.015);
}
html[data-theme="light"] body[data-v2] .pdp-detail-section:nth-of-type(even) {
 background: rgba(10,10,12,0.02);
}

/* === 3. CTA-hiërarchie: één primaire knop, rest stiller ====== */
/* "Add to cart" blijft de enige gevulde knop; secundair → ghost. */
body[data-v2] .pdp-purchase .btn--secondary,
body[data-v2] [class*="buy"] .btn--secondary,
body[data-v2] [data-save-for-later],
body[data-v2] [data-ask-question] {
 background: transparent !important;
 border: 1px solid var(--color-border, rgba(255,255,255,0.16)) !important;
 color: var(--color-text-soft, #c8c8cf) !important;
 box-shadow: none !important;
 font-weight: 600 !important;
}

/* === 4. Variant-chips: leesbaar, ademruimte ================== */
body[data-v2] .variant-chip {
 border-radius: 12px;
 transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
body[data-v2] .variant-chip:hover { transform: translateY(-1px); }
body[data-v2] .variant-chip__size { font-weight: 700; letter-spacing: -0.01em; }
body[data-v2] .variant-chip__per-unit { color: var(--color-text-muted, #9d9da5); font-variant-numeric: tabular-nums; }
body[data-v2] .variant-chip__save {
 font-size: 10.5px; color: #22c55e;
}

/* === 5. Badge-discipline rond de koopzone ==================== */
/* Eén status-signaal: dubbele "Fresh batch"/voorraad-echo's stil. */
body[data-v2] .pdp-purchase .togo-lead + .togo-lead,
body[data-v2] [class*="buy"] [class*="fresh"] + [class*="fresh"] { display: none !important; }

/* === 6. Premium koopzone-finesse ============================= */
body[data-v2] .compound-hero__media,
body[data-v2] [class*="pdp"] [class*="media"] {
 border-radius: 16px; overflow: hidden;
}
body[data-v2] .btn--primary { letter-spacing: 0.01em; }

@media (prefers-reduced-motion: reduce) {
 body[data-v2] .variant-chip:hover { transform: none; }
}

/* =============================================================
 TABS — 23 losse secties → 4 nette tabbladen (één kolom, rustig)
 ============================================================= */
body[data-v2] .v2-tabs {
 max-width: 860px; margin: 8px auto 0; padding: 0 clamp(16px, 4vw, 24px);
}
body[data-v2] .v2-tabs__bar {
 position: sticky; top: 60px; z-index: 6;
 display: flex; gap: 4px; flex-wrap: wrap;
 padding: 6px; margin-bottom: 8px;
 background: var(--color-bg, #0a0a0d);
 border: 1px solid var(--color-border, rgba(255,255,255,0.08));
 border-radius: 14px;
}
html[data-theme="light"] body[data-v2] .v2-tabs__bar { background: rgba(255,255,255,0.92); }
body[data-v2] .v2-tabs__btn {
 flex: 1 1 auto; min-height: 40px; padding: 8px 14px;
 border: 0; border-radius: 10px; cursor: pointer;
 font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
 background: transparent; color: var(--color-text-muted, #9d9da5);
 transition: background .2s ease, color .2s ease;
}
body[data-v2] .v2-tabs__btn:hover { color: var(--color-text, #fff); }
body[data-v2] .v2-tabs__btn[aria-selected="true"] {
 background: rgba(184,37,47,0.14); color: var(--color-text, #fff);
 box-shadow: inset 0 0 0 1px rgba(184,37,47,0.4);
}
html[data-theme="light"] body[data-v2] .v2-tabs__btn[aria-selected="true"] { color: #1a1a20; }

/* Panelen: secties binnen een tab krijgen rustige, gelijke spacing.
 De grote display-koppen en de halve-breedte-leegte verdwijnen. */
body[data-v2] .v2-tabs__panel > section.pdp-detail-section {
 padding-block: 22px !important;
 background: transparent !important;
 border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.07));
}
body[data-v2] .v2-tabs__panel > section.pdp-detail-section:last-child { border-bottom: 0; }
body[data-v2] .v2-tabs__panel .container { max-width: 100% !important; padding: 0 !important; }
body[data-v2] .v2-tabs__panel .section__head { margin-bottom: 10px; }
body[data-v2] .v2-tabs__panel .section__title { font-size: 18px !important; }

/* Cross-sell zone onder de tabs: rustig, ingetogen */
body[data-v2] .v2-bottom {
 max-width: 1100px; margin: 24px auto 0; padding: 0 clamp(16px, 4vw, 24px);
}
body[data-v2] .v2-bottom > section { padding-block: clamp(28px, 4vw, 44px) !important; }

@media (max-width: 600px) {
 body[data-v2] .v2-tabs__bar { top: 54px; }
 body[data-v2] .v2-tabs__btn { font-size: 12px; padding: 8px 10px; }
}

/* "Meer ontdekken"-kop boven de cross-sell zone */
body[data-v2] .v2-bottom__head {
 max-width: 1100px; margin: 0 auto 4px; padding: 0 clamp(16px, 4vw, 24px);
 font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
 color: var(--color-text-muted, #9d9da5);
 border-top: 1px solid var(--color-border, rgba(255,255,255,0.08));
 padding-top: 22px;
}