/* -------------------------------------------------------------
 preview-category-v2.css — ALLEEN voor preview-category-v2.html.
 Hergebruikt de shop-kaarttaal op #category-grid + .category-top-
 picks, en lost de categorie-specifieke chaos op: 3× trust-
 herhaling, Engelse guide, te drukke bovenkant, donkere foto's.
 ------------------------------------------------------------- */

/* === Kaart-taal (gelijk aan shop-V2) ========================= */
body[data-v2] :is(#category-grid, .category-top-picks) a.card {
 border: 1px solid transparent;
 background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
 border-radius: 14px; overflow: hidden;
 transition: transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s cubic-bezier(.2,.7,.2,1), border-color .22s ease;
}
body[data-v2] :is(#category-grid, .category-top-picks) a.card:hover {
 transform: translateY(-4px); border-color: rgba(224,27,27,0.40);
 box-shadow: 0 18px 44px rgba(0,0,0,0.42), 0 0 60px rgba(224,27,27,0.08);
}
html[data-theme="light"] body[data-v2] :is(#category-grid, .category-top-picks) a.card { background:#fff; border-color: rgba(10,10,12,0.10); }

body[data-v2] :is(#category-grid, .category-top-picks) a.card .card__media { overflow:hidden; border-radius:0;
 background: radial-gradient(120% 80% at 50% 115%, rgba(224,27,27,0.10), transparent 60%), #0c0c10; }
html[data-theme="light"] body[data-v2] :is(#category-grid, .category-top-picks) a.card .card__media {
 background: radial-gradient(120% 80% at 50% 115%, rgba(224,27,27,0.06), transparent 60%), linear-gradient(180deg,#f5f1ea,#ece5d8);
 border-bottom: 1px solid rgba(10,10,12,0.08); }
html[data-theme="light"] body[data-v2] :is(#category-grid, .category-top-picks) a.card .card__media img { mix-blend-mode: multiply; }
body[data-v2] :is(#category-grid, .category-top-picks) a.card .card__media img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
body[data-v2] :is(#category-grid, .category-top-picks) a.card:hover .card__media img { transform: scale(1.045); }

body[data-v2] :is(#category-grid, .category-top-picks) .card__eyebrow {
 font-size:10.5px; letter-spacing:0.13em; font-weight:700; text-transform:uppercase;
 color: var(--v2-cat, var(--color-accent-text,#ff6b6b)); margin:0 0 7px; }
body[data-v2] :is(#category-grid, .category-top-picks) .card__title { font-size:19px; font-weight:700; letter-spacing:-0.012em; line-height:1.15; margin:0 0 6px; }
body[data-v2] :is(#category-grid, .category-top-picks) .card__body-text {
 font-size:12.5px; line-height:1.5; color: var(--color-text-muted,#9d9da5);
 display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:0; }

/* prijs-regel (door JS gevuld, zelfde patroon als shop) */
body[data-v2] :is(#category-grid, .category-top-picks) .v2-price {
 display:flex; align-items:baseline; justify-content:space-between; gap:10px;
 margin:12px 0 0; padding-top:11px; border-top:1px solid rgba(255,255,255,0.07); font-variant-numeric:tabular-nums; }
html[data-theme="light"] body[data-v2] :is(#category-grid, .category-top-picks) .v2-price { border-top-color: rgba(10,10,12,0.08); }
body[data-v2] :is(#category-grid, .category-top-picks) .v2-price__amount { font-size:16px; font-weight:700; color: var(--color-text,#fff); }
body[data-v2] :is(#category-grid, .category-top-picks) .v2-price__from { font-size:11px; font-weight:500; color: var(--color-text-muted,#9d9da5); margin-right:3px; }
body[data-v2] :is(#category-grid, .category-top-picks) .v2-price__sizes { font-size:11px; color: var(--color-text-muted,#9d9da5); white-space:nowrap; }

/* één status-badge: 2e marketing-badge weg, COA-pill weg (1× elders) */
body[data-v2] :is(#category-grid, .category-top-picks) .card-badge-stack [data-stack-item="1"] { display:none !important; }
body[data-v2] :is(#category-grid, .category-top-picks) .togo-card-preview { display:none !important; }

/* === Dubbele trust weg: mid-page herhaling verbergen ========= */
/* header trust-bar + footer-trust blijven; de mid-page pills-strip
 herhaalt dezelfde beloftes → stil. */
body[data-v2] main .tgp-trust-pills { display:none !important; }

/* === Above-the-fold guide kalmeren ========================== */
body[data-v2] .cat-answer-hub {
 border:1px solid var(--color-border, rgba(255,255,255,0.08)); border-radius:14px; padding:18px 20px; }
html[data-theme="light"] body[data-v2] .cat-answer-hub { background:#fff; border-color: rgba(10,10,12,0.10); }
/* guide-body clampen zodat hij niet het hele eerste scherm vult */
body[data-v2] .cat-answer-hub [class*="body"], body[data-v2] .cat-answer-hub p {
 display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* glossary-stippel subtieler (geen "spellcheck-kronkel") */
body[data-v2] [class*="glossary"], body[data-v2] abbr[title], body[data-v2] .togo-term {
 text-decoration: none !important; border-bottom: 1px dotted rgba(150,150,160,0.4); }

/* light hero minder bleek + kaders */
html[data-theme="light"] body[data-v2] .cat-hero { background: #faf7f2 !important; }

/* sectie-ritme + grids veilig */
body[data-v2] :is(#category-grid, .category-top-picks) { gap: clamp(16px,1.8vw,26px); }
body[data-v2] .v2-reveal { opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
body[data-v2] .v2-reveal.is-in { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
 body[data-v2] :is(#category-grid, .category-top-picks) a.card,
 body[data-v2] :is(#category-grid, .category-top-picks) a.card .card__media img { transition:none !important; }
 body[data-v2] :is(#category-grid, .category-top-picks) a.card:hover { transform:none; }
 body[data-v2] .v2-reveal { opacity:1; transform:none; }
}

/* Top-pick kaarttitel links uitlijnen (was gecentreerd terwijl prijs/meta links staan) */
body[data-v2] .category-top-picks .card__title,
body[data-v2] .category-top-picks .card__body,
body[data-v2] .category-top-picks .card__eyebrow { text-align: left !important; }
