/**
 * product-card.css — DE productkaart, overal op de site.
 *
 * Deze kaart verschijnt op elke plek waar WooCommerce een productlijst rendert:
 * shop en categoriepagina's, de cross-sells in de winkelwagen, de gerelateerde
 * producten op een productpagina, en de [products]-shortcodes op de homepage.
 * Allemaal via hetzelfde template: woocommerce/content-product.php.
 *
 * Daarom is deze CSS NIET op een body-class gescoped maar op `.taw-card` zelf.
 * Het raster eromheen (kolommen, sorteerbalk, filters) staat in plp.css en
 * geldt alleen op de productlijst — anders zouden we ook de homepage naar vier
 * kolommen dwingen, terwijl daar columns="5" staat.
 *
 * Tokens komen uit global.css.
 *
 * @package voltvast
 */


/* -- basisraster ---------------------------------------------------
 *
 * De kaart staat overal waar WooCommerce een productlijst rendert, en niet
 * overal is er een eigen raster: op de winkelwagen en bij [products] valt hij
 * anders terug op de flex-layout van Shoptimizer en wordt elke kaart 320px
 * breed en 626px hoog.
 *
 * WooCommerce zet zelf een columns-N class op de ul.products (winkelwagen 4,
 * homepage 5). Die respecteren we hier, zodat elke plek zijn eigen indeling
 * houdt. De productlijst overschrijft dit in plp.css met een eigen,
 * responsievere verdeling.
 */

ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	ul.products.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* -- Shoptimizer platslaan, overal waar onze kaart staat -----------
 *
 * Hij zet een --span op de li-s en rekent zelf met kolommen, en reserveert
 * 40px padding-bottom voor zijn eigen knop die daar absoluut gepositioneerd
 * onderaan zweeft. Onze knop staat gewoon in de flow, dus die 40px is een gat.
 *
 * De :not() erbij om zijn eigen selector (0,3,2) te verslaan.
 */
ul.products li.taw-card,
ul.products li.taw-card:not(.product-category) {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	padding: 0;
}

/* ── de kaart ─────────────────────────────────────────────────── */

.taw-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--taw-line);
	border-radius: var(--taw-radius);
	overflow: hidden;
	transition: box-shadow .2s ease, border-color .2s ease;
}

.taw-card:hover {
	border-color: var(--taw-brand);
	box-shadow: 0 12px 24px -16px rgba(0, 0, 0, .25);
}

.taw-card .taw-card__img {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	/* Wit, niet grijs: de productfoto-s hebben zelf een witte achtergrond met
	   witruimte eromheen. Een grijs vak wordt dan zichtbaar als een rand om de
	   foto, vooral bij smalle producten in een 4:3-vak. */
	background: #fff;
	overflow: hidden;
}

.taw-card .taw-card__img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform .3s ease;
}

.taw-card:hover .taw-card__img img { transform: scale(1.04); }

.taw-card .taw-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: .6rem .7rem .7rem;
	gap: .28rem;
}

/* ── merk en artikelnummer ────────────────────────────────────── */

.taw-card .taw-card__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
	font-size: .7rem;
	line-height: 1.2;
}

.taw-card .taw-card__brand {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--taw-muted);
}

.taw-card .taw-card__sku { color: var(--taw-muted); white-space: nowrap; }

/* ── titel ────────────────────────────────────────────────────── */

.taw-card .taw-card__title {
	/* Wat extra lucht boven en onder de titel; komt bovenop de .28rem gap. */
	margin: .2rem 0 .28rem;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.3;
}

.taw-card .taw-card__title a {
	color: var(--taw-ink-strong);
	text-decoration: none;
}

.taw-card:hover .taw-card__title a {
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

/* ── beoordeling ──────────────────────────────────────────────── */

.taw-card .taw-card__rating {
	display: inline-flex;
	align-items: center;
	gap: .1rem;
	font-size: .75rem;
	line-height: 1;
}

.taw-card .taw-card__ster { color: var(--taw-line); }
.taw-card .taw-card__ster.is-vol { color: var(--taw-star); }
.taw-card .taw-card__rating-n { margin-left: .28rem; color: var(--taw-muted); font-weight: 600; }

/* ── USP's ────────────────────────────────────────────────────── */

.taw-card .taw-card__usps {
	margin: .1rem 0 0;
	padding: 0;
	list-style: none;
	font-size: .75rem;
	line-height: 1.35;
	color: var(--taw-ink);
}

.taw-card .taw-card__usps li {
	position: relative;
	padding-left: .8rem;
	margin: 0 0 .12rem;
}

.taw-card .taw-card__usps li:last-child { margin-bottom: 0; }

.taw-card .taw-card__usps li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	font-size: .8em;
	line-height: 1.6;
	color: var(--taw-brand);
}

/* ── voet: prijs, voorraad, knop ──────────────────────────────── */

.taw-card .taw-card__foot {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	margin-top: auto;
	padding-top: .5rem;
}

.taw-card .taw-card__price {
	font-size: 1rem;
	font-weight: 700;
	color: var(--taw-ink-strong);
	line-height: 1.2;
}

.taw-card .taw-card__price .woocommerce-Price-amount { font-size: inherit; }
.taw-card .taw-card__price del { font-size: .8rem; font-weight: 500; color: var(--taw-muted); margin-right: .35rem; }
/*
 * Bij een aanbieding zet WooCommerce de nieuwe prijs in een `<ins>`. Die kreeg
 * gewicht 400 terwijl een prijs zonder korting op 700 staat, dus stonden
 * afgeprijsde producten er lichter bij dan de rest -- zichtbaar op de homepage
 * en de aanbiedingenpagina, waar alle kaarten korting hebben.
 */
.taw-card .taw-card__price ins { font-weight: 700; color: var(--taw-ink-strong); text-decoration: none; }
.taw-card .taw-card__tax { margin-left: .15rem; font-size: .7rem; font-weight: 400; color: var(--taw-muted); white-space: nowrap; }

.taw-card .taw-card__stock {
	/* Eigen lucht boven en onder, bovenop de .3rem gap van de voet. */
	margin: .18rem 0 .22rem;
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: .35rem;
	font-size: .72rem;
	font-weight: 600;
	padding: .18rem .5rem;
	border-radius: var(--taw-radius-pill);
}

.taw-card .taw-card__stock-dot { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; flex: none; }
.taw-card .taw-card__stock.is-in   { color: var(--taw-green); background: var(--taw-green-bg); }
.taw-card .taw-card__stock.is-back { color: var(--taw-amber); background: var(--taw-amber-bg); }
.taw-card .taw-card__stock.is-out  { color: var(--taw-red);   background: var(--taw-red-bg); }


/* ── Shoptimizer platslaan binnen onze kaart ──────────────────────
 *
 * Shoptimizer bouwt zijn eigen kaart met twee mechanismen die onze
 * opbouw kapotmaken:
 *
 * 1. Een `:before`-overlay met een WITTE achtergrond over de hele kaart
 *    (breedte 100%, hoogte 100% + 30px), die bij hover zichtbaar wordt om
 *    een schaduw te faken. Die legt zich over onze tekst heen — vandaar dat
 *    merk, titel, prijs en voorraad bij hover "verdwenen".
 *
 * 2. De knop staat op `position: absolute; bottom: 0; opacity: 0` en wordt
 *    pas bij hover zichtbaar. Onze knop erfde dat en viel daardoor buiten
 *    de kaartstroom.
 */

/* 1. de witte overlay weg */
ul.products li.taw-card::before,
ul.products li.taw-card::after { display: none !important; }

/* 2. onze inhoud boven eventuele resterende lagen */
.taw-card .taw-card__img,
.taw-card .taw-card__body { position: relative; z-index: 1; }


/* 4. Shoptimizer-markup die wij zelf al renderen */
.taw-card .woocommerce-image__wrapper,
.taw-card .woocommerce-card__header,
.taw-card .shoptimizer-plp-carousel-container,
.taw-card .woocommerce-loop-product__title,
.taw-card .shoptimizer_ratingContainer,
.taw-card > .price,
.taw-card > .stock { display: none !important; }

/* ── de knop ──────────────────────────────────────────────────────
 *
 * LET OP DE SELECTOR. Shoptimizer stylet de knop met
 * `ul.products li.product .button` — dat weegt (0,3,2) en wint dus van
 * een gewone `.taw-card .button` (0,3,0). Daarom hier dezelfde
 * structuur plus onze scope: (0,4,2), zodat we netjes winnen zonder
 * overal `!important` te hoeven strooien.
 *
 * Wat Shoptimizer meegeeft en wij hier ongedaan maken: `position:absolute`,
 * `bottom:0`, `height:40px`, `line-height:40px`, `padding:0`,
 * `border-radius:4px` en `opacity:0` (knop verschijnt daar pas bij hover).
 *
 * Vormtaal volgt de knop op de productpagina: font-weight 700 en een 2px
 * transparante rand, een maat kleiner omdat hij hier in een kaart staat.
 */

ul.products li.taw-card .button,
ul.products li.taw-card .added_to_cart,
ul.products li.taw-card .taw-card__cta {
	display: inline-flex;
	position: static;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	width: 100%;
	height: auto;
	bottom: auto;
	margin: .15rem 0 0;
	padding: .62rem 1rem;
	font: inherit;
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
	background: var(--taw-brand);
	border: 2px solid transparent;
	border-radius: .5rem;
	opacity: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease;
}

ul.products li.taw-card .button:hover,
ul.products li.taw-card .taw-card__cta:hover {
	background: var(--taw-brand-dark);
	color: #fff;
}

ul.products li.taw-card .added_to_cart { display: none; }

/* ── productrijen buiten de productlijst ──────────────────────────
 *
 * Cross-sells in de winkelwagen, up-sells en gerelateerde producten op de
 * productpagina, en de twee rijen op de homepage. Daar draait Shoptimizer een
 * flex-layout die onze kaart een vaste breedte van 320px geeft (en dus 626px hoog maakt). Die rijen krijgen
 * hier een eigen raster.
 *
 * Met !important omdat de breedte uit Shoptimizer-s flex-regels komt en niet
 * uit een width die we netjes kunnen overschrijven.
 */

.cross-sells ul.products,
.up-sells ul.products,
.related ul.products,
.taw-home__rij ul.products {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

@media (min-width: 768px) {
	.cross-sells ul.products,
	.up-sells ul.products,
	.related ul.products,
	.taw-home__rij ul.products { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.cross-sells ul.products li.taw-card,
.up-sells ul.products li.taw-card,
.related ul.products li.taw-card,
.taw-home__rij ul.products li.taw-card {
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	flex: none !important;
}

/* ── mobiel: horizontaal schuiven i.p.v. een lange kolom ──────────
 *
 * Zelfde patroon als weltechniek.nl. Onder 768px wordt de rij een schuifbaan:
 * je ziet anderhalve kaart, wat uitnodigt om te vegen, in plaats van vier
 * kaarten onder elkaar waar je eindeloos langs moet scrollen.
 *
 * Alleen voor de rijen BUITEN de productlijst. De productlijst zelf blijft
 * een raster, want daar wil je juist het overzicht.
 */
@media (max-width: 767px) {
	.cross-sells ul.products,
	.up-sells ul.products,
	.related ul.products,
	.taw-home__rij ul.products {
		display: flex !important;
		/* nowrap is nodig: Shoptimizer zet flex-wrap:wrap op ul.products,
		   waardoor de kaarten onder elkaar vallen en er niets te schuiven valt. */
		flex-wrap: nowrap !important;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		gap: .75rem;
		padding-bottom: .5rem;
		margin-left: 0;
		margin-right: 0;
	}

	.cross-sells .taw-card .taw-card__img,
	.up-sells .taw-card .taw-card__img,
	.related .taw-card .taw-card__img,
	.taw-home__rij .taw-card .taw-card__img { aspect-ratio: 1 / 1; }

	.cross-sells ul.products li.taw-card,
	.up-sells ul.products li.taw-card,
	.related ul.products li.taw-card,
	.taw-home__rij ul.products li.taw-card {
		/* Breed genoeg dat de foto en de tekst tot hun recht komen; je ziet net
		   een stukje van de volgende kaart, wat uitnodigt om te vegen. */
		flex: 0 0 78% !important;
		scroll-snap-align: start;
	}
}