/* ============================================================================
 * Weltechniek — PRODUCTKAART (herbruikbaar)
 * ============================================================================
 * Styling bij `template-parts/product-card.php`. Bewust NIET gescoped op de PLP
 * (`body.wt-plp`), zodat dezelfde kaart er overal identiek uitziet:
 * categorie-/merk-/tagarchief, zoekresultaat en de homepage-secties. Later ook
 * PDP-cross-sell en gerelateerde producten.
 *
 * Tokens komen uit css/global.css (--wt-blue, --wt-green, --wt-border, ...).
 * Laad dit bestand via `wt_enqueue_product_card_assets()` (inc/product-card.php)
 * op elke plek waar de kaart gerenderd wordt.
 *
 * Versie 1.0.0 — losgetrokken uit plp.css (2026-08-03), inhoud 1-op-1 overgenomen.
 * ============================================================================ */

li.wt-card {
	position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--wt-border);
	border-radius:var(--wt-radius); padding:14px !important; overflow:hidden; transition:border-color .15s ease, box-shadow .15s ease;   /* Shoptimizer zette padding-bottom:0 → knop plakte onderaan; overflow:hidden tegen hover-paint-glitch */
}
/* Shoptimizer toont op hover een ::before-overlay (visibility/opacity) die met onze kaart-markup een witte tegel
   over de content legt (content blijft in de DOM, alleen visueel afgedekt). Op onze kaart uitzetten. */
li.wt-card::before { content:none !important; display:none !important; }
li.wt-card:hover { border-color:var(--wt-border-input); box-shadow:0 10px 26px -16px rgba(30,58,109,.45); }

.wt-card__media {
	position:relative; display:block; aspect-ratio:1/1; border-radius:var(--wt-radius-sm); overflow:hidden;
	background:var(--wt-bg); margin-bottom:14px;
}
.wt-card__media img { width:100%; height:100%; object-fit:contain; display:block; }
/* `li.product` in de selector puur voor het gewicht: Shoptimizers main.css zet
 * `li.product .onsale { border-radius: 3px }` (0-2-1) en wint daarmee van een selector met twee
 * klassen. Daardoor bleef deze badge hoekig terwijl dezelfde badge op de productpagina al rond was.
 * Zelfde pilvorm als `.wt-badge`, zodat een aanbieding er overal hetzelfde uitziet. */
li.product .wt-card__media .onsale,
.wt-card__media .onsale {
	position:absolute; top:10px; left:10px; margin:0; min-width:0; min-height:0; background:var(--wt-error); color:#fff;
	font-size:11px; font-weight:800; line-height:1.2; padding:6px 12px; border-radius:20px;
}
/* Meta-regel: merk links, artikelnummer rechts. `min-width:0` op de flex-container is nodig,
 * anders kan het merk niet krimpen en duwt een lange naam het artikelnummer uit de kaart. */
/* Merk en nummer als ÉÉN leesbare regel, links gegroepeerd — niet space-between. Bij een kort merk
 * ("Itho") gaf dat een gat van 80px met het nummer eenzaam rechts; naast elkaar lezen ze als één
 * eenheid: "merk + nummer". Het merk krimpt als eerste (min-width:0 + ellipsis), het nummer staat
 * vast, dus juist datgene waar op gezocht wordt valt nooit weg. */
.wt-card__meta {
	display:flex; align-items:baseline; gap:7px; min-width:0; margin-bottom:5px;
}
.wt-card__brand {
	font-size:11px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--wt-muted-strong);
	min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Zelfde typografie als het merk: één meta-regel hoort er ook als één regel uit te zien.
 * Stond eerst op `--wt-border-input` (#c3d0e0) — dat is een RANDkleur, en als tekst op wit haalt die
 * maar 1,56:1 contrast: praktisch onleesbaar. Nu `--wt-muted`, gelijk aan het merk.
 * Zelfde grootte en kleur als het merk; het verschil zit in gewicht (500 vs 700) en kapitalen (het
 * merk wel, het nummer niet). Genoeg om het merk dominant te houden, te weinig om de regel te laten
 * uiteenvallen. `flex:none` zodat het nummer nooit afbreekt of wegvalt. */
.wt-card__sku {
	flex:none; font-size:11px; font-weight:400; color:var(--wt-muted-soft); white-space:nowrap;
}
/* Titel over maximaal drie regels, met een minimumhoogte van twee.
 *
 * Stond op twee regels, en dat sneed bij 68% van de producten de titel af. Bij ons staat het
 * onderscheidende deel achteraan (merk → serie → type → variant → artikelnummer), dus juist het
 * informatieve stuk verdween: "Vent-Axia Multihome draadloze 4-…" laat in het midden of je naar een
 * schakelaar of een sensor kijkt, en op een categoriepagina lezen tien kaarten dan hetzelfde.
 * Met drie regels zakt dat naar 14%, voor 19px extra hoogte.
 *
 * De `min-height` blijft op twee regels staan en groeit niet mee. Zou hij op 57px staan, dan kregen
 * korte titels 38px loze ruimte onder zich; nu lijnen die gewoon uit en mogen alleen de lange
 * doorlopen. */
.wt-card__title {
	font-size:14px; font-weight:600; line-height:1.35; color:var(--wt-blue); text-decoration:none;
	display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:38px; margin-bottom:10px;
}
.wt-card__title:hover { text-decoration:underline; }

/* Beoordeling onder de titel: sterren, cijfer, aantal. Klikt door naar de beoordelingen op de
 * productpagina, want dat is wat je wilt als je hierop klikt.
 * Geen eigen `--ster-maat`: 14px is de standaard van het component en overal dezelfde. */
.wt-card__rating {
	display:flex; align-items:center; gap:6px;
	margin:-4px 0 8px;
	text-decoration:none;
}
.wt-card__rating:hover .wt-card__rating-cijfer { text-decoration:underline; }
.wt-card__rating-cijfer { font-size:12.5px; font-weight:700; color:var(--wt-blue); font-variant-numeric:tabular-nums; }
.wt-card__rating-n { font-size:11px; color:var(--wt-muted-soft); font-variant-numeric:tabular-nums; }

/* USP's onder de titel. Een vinkje via ::before in plaats van een lijst-bolletje, want dat leest als
 * "dit heeft het product" in plaats van als opsomming. Getekend met een border, niet met een teken uit
 * het lettertype: dat schaalt mee en staat altijd exact goed, ongeacht font.
 * `align-items:start` met een kleine margin-top houdt het vinkje bij de EERSTE regel als de tekst
 * afbreekt, in plaats van dat het in het midden gaat zweven. */
.wt-card__usps {
	list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:3px;
}
.wt-card__usps li {
	position:relative; display:flex; align-items:flex-start; gap:6px;
	font-size:12px; line-height:1.35; color:var(--wt-text, #4a5868); margin:0;
}
.wt-card__usps li::before {
	content:""; flex:none; width:9px; height:5px; margin-top:4px;
	border-left:1.5px solid var(--wt-green); border-bottom:1.5px solid var(--wt-green);
	transform:rotate(-45deg);
}

.wt-card__foot { margin-top:auto; }
.wt-card__price {
	display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; min-height:26px;
}
/* prijs in rood (ontwerp-keuze); doorgestreepte oude prijs muted */
.wt-card__price .woocommerce-Price-amount,
.wt-card__price ins .woocommerce-Price-amount,
.wt-card__price ins {
	font-size:17px; font-weight:800; color:var(--wt-error); font-variant-numeric:tabular-nums; letter-spacing:-.3px; text-decoration:none;
}
.wt-card__price del,
.wt-card__price del .woocommerce-Price-amount {
	font-size:12px; font-weight:400; color:var(--wt-muted); text-decoration:line-through;
}
.wt-card__price .woocommerce-price-suffix { font-size:11px; font-weight:600; color:var(--wt-muted); margin-left:1px; }

/* levertijd = platte groene tekst (geen pill, geen icoon) */
.loop-stock-status { margin:8px 0 0; font-size:11.5px; font-weight:700; line-height:1.35; }
.loop-stock-status span { color:var(--wt-green-hover) !important; font-family:inherit !important; font-size:11.5px !important; }
.loop-stock-status.out-of-stock,
li.wt-card--soldout .loop-stock-status span { color:var(--wt-muted) !important; }

/* CTA-knop: volle breedte, groen, met winkelwagen-icoon */
.wt-card__cta {
	margin-top:12px !important; width:100%; display:flex !important; align-items:center; justify-content:center; gap:9px;
	background:var(--wt-green) !important; color:#fff !important; border:0 !important; border-radius:7px !important;
	padding:11px !important; font-size:14px !important; font-weight:800 !important; line-height:1 !important; cursor:pointer;
}
.wt-card__cta::before {
	content:""; width:18px; height:18px; flex:none;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1.4'/%3E%3Ccircle cx='18' cy='21' r='1.4'/%3E%3Cpath d='M2 3h2.2l2.5 12.5a2 2 0 0 0 2 1.5h8.6a2 2 0 0 0 2-1.6L22 7H6'/%3E%3C/svg%3E") no-repeat center/contain;
}
/* Op een telefoon in portret past het icoon er niet meer bij en brak "In winkelwagen" over twee
 * regels. Gemeten op 375px: de knop is 135,5px breed, waarvan 22px padding, 18px icoon en 9px gap.
 * Er blijft 86,5px voor de tekst over terwijl die er 106,2 nodig heeft, dus ruim 19px tekort.
 *
 * Alleen het icoon of alleen de tekst verkleinen lost dat niet op: icoon naar 14px met gap 6 komt
 * nog 12,7px tekort, tekst naar 13px 12,1px en zelfs 12px nog 4,5px. Alles tegelijk verkleinen
 * (icoon 14, gap 6, padding 8, tekst 13px) haalt het met 0,9px, en dat is geen marge maar toeval.
 * Het icoon weglaten geeft 7,3px lucht met de tekst op de normale 14px, en scheelt bovendien 14px
 * kaarthoogte omdat de knop van 50px terug naar 36px gaat.
 *
 * De grens ligt op 480px en niet op de 1000px van de rest van de kaart: de knop groeit mee met de
 * viewport (breedte ≈ viewport/2 − 52), dus vanaf ongeveer 415px past het icoon weer, en op een
 * tablet van 768px is de knop 332px breed en houdt hij 177px over. Daar zou weglaten zonde zijn.
 * 480px legt de grens net boven de breedste telefoon in portret (440px), zodat álle telefoons
 * dezelfde knop tonen in plaats van de ene wel en de andere niet.
 *
 * Geen `gap:0` nodig: met `display:none` is het pseudo-element geen flex-item meer, en de knop
 * bevat verder alleen een tekstnode, dus er valt geen gat. */
@media (max-width:480px){
	.wt-card__cta::before { display:none; }
}
.wt-card__cta:hover { background:var(--wt-green-hover) !important; }
.wt-card__cta--disabled { background:var(--wt-border-input) !important; cursor:not-allowed; }
.wt-card__cta--disabled::before { display:none; }
.wt-card .added_to_cart { display:block; text-align:center; font-size:12.5px; margin-top:8px; color:var(--wt-blue); text-decoration:underline; }

/* ============================================================================
 * PRODUCTGRID
 * ============================================================================
 * Hoort bij de kaart: overal waar `.wt-card` staat, hoort hetzelfde grid.
 * Gescoped met `:has(.wt-card)` zodat het precies de lijsten raakt waar ONZE kaart
 * in zit, en niets anders (Shoptimizers eigen lijsten op bv. de PDP blijven ongemoeid
 * tot die pagina aan de beurt is).
 *
 * Waarom nodig: Shoptimizer zet op desktop `ul.products{display:flex}` zonder gap,
 * waardoor de kaarten op de homepage tegen elkaar aan plakten. Op mobiel won toevallig
 * wél een grid-regel mét gap — vandaar dat het daar al goed leek.
 *
 * `!important` op display/margin/padding/width: Shoptimizer zet die met hoge
 * specificiteit (en `width:calc(100% + 30px)`, wat rechts uitliep).
 * ============================================================================ */
ul.products:has(.wt-card) {
	display:grid !important; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:18px;
	margin:0 !important; padding:0 !important; width:auto !important; list-style:none;
}
ul.products:has(.wt-card) li.product { width:auto !important; margin:0 !important; float:none !important; }

/* Blokken die expliciet om een vast aantal kolommen vragen (homepage "Populaire producten" /
 * "Recent toegevoegd", shortcode `columns="5"`) houden dat aantal op ruime schermen; auto-fill zou
 * daar een losse wees op een tweede rij van maken. Was 6: bij die breedte kapten "ITHO DAALDEROP" en
 * "WASKÖNIG + WALTER" af op de meta-regel. Met 5 is de kaart ~245px en passen ze wel. Het aantal
 * producten in de shortcode moet gelijk blijven aan het aantal kolommen, anders ontstaat die wees
 * alsnog. */
@media (min-width:1200px){
	ul.products.columns-5:has(.wt-card) { grid-template-columns:repeat(5,minmax(0,1fr)); }
}
@media (max-width:1199px) and (min-width:1001px){
	ul.products.columns-5:has(.wt-card) { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
/* Op mobiel is de kaart ~143px breed en past "ITHO DAALDEROP" + "Art. W07419" niet naast elkaar:
 * het merk zou afkappen tot "ITHO DAALD…". Liever laten terugvallen op een tweede regel. `wrap` doet
 * dat alleen wanneer het nodig is, dus korte merken (Duco, Zehnder, Vent-Axia) blijven op één regel
 * en kosten geen kaarthoogte. Het merk mag hier dus de volle breedte pakken. */
@media (max-width:1000px){
	.wt-card__meta { flex-wrap:wrap; row-gap:1px; }
	/* USP's een punt kleiner op mobiel. Daar is maar 128px tekstruimte, goed voor ongeveer 20 tekens,
	 * en zelfs de korte variant van 30 tekens past daar niet op één regel. Gemeten met de echte teksten:
	 * op 12px loopt 84% door naar een tweede regel, op 11px nog 57%, en het blok wordt 23px lager.
	 * 11px is bovendien geen nieuwe maat op deze kaart: merk en artikelnummer staan er al op.
	 * Verder omlaag (10px) zou 25% halen maar wordt kleiner dan al het andere op de kaart. */
	.wt-card__usps li { font-size:11px; }
	/* Merk blijft nowrap: het mag zakken naar zijn eigen regel, maar niet binnen zichzelf afbreken.
	 * Zonder dit werd "Fränkische Rohrwerke" drie regels hoog (merk over 2 regels + nummer eronder).
	 * `flex-basis:auto` + `flex-grow:1` laat het de volle kaartbreedte pakken zodra het zakt, waardoor
	 * de ellipsis in de praktijk nooit meer aanslaat: alleen 20 tekens komt nog 5px tekort. */
	.wt-card__brand { flex:1 1 auto; }
}

@media (max-width:1000px){
	ul.products:has(.wt-card) { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
}