/* ==========================================================================
   Lowcarbchef producten (/producten). Sjabloon: page-producten.php +
   template-parts/products/*.php, script: assets/js/products.js.
   Laden na main.css (tokens, .btn, .btn--order, .page-title, .breadcrumbs).
   Besluiten 3 okt: oranje = bestellen, actieprijs rood #EE5665 + doorgestreept,
   uitverkocht grijs zonder knop, beige merkverhaal, grijze USP-balk.
   ========================================================================== */

.products-page { padding-bottom: var(--s-12); }

/* ---------- 1. Kop + intro ---------- */
.products-page__head { padding-top: 18px; }
.products-page__head .breadcrumbs { margin: 0; }
.products-page__title.page-title { margin: 10px 0 14px; }

.products-page__intro {
	max-width: 760px;
	font-size: 16px;
	line-height: 27px;
}
.products-page__intro p { margin: 0 0 var(--s-3); }
.products-page__intro a {
	color: var(--c-link);
	font-weight: 700;
	text-decoration: none;
}
.products-page__intro a:hover { text-decoration: underline; }
.products-page__order-note { color: var(--c-ink); font-weight: 600; }

/* Mobiel: merkalinea's direct ingeklapt tot 4 regels (in CSS, dus geen verspringen
   als het script laadt), met vervaging en "Lees meer". Zonder JS zet een
   <noscript>-stijl in page-producten.php alles open. */
.products-page__more { display: none; }
@media (max-width: 767px) {
	.products-page__brand:not(.is-open) {
		max-height: calc(4 * 25px);
		overflow: hidden;
		-webkit-mask-image: linear-gradient(#000 55%, transparent);
		mask-image: linear-gradient(#000 55%, transparent);
	}
	.products-page__more {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		margin: -4px 0 2px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--c-link);
		font-size: 15px;
		font-weight: 700;
	}
	.products-page__more[aria-expanded="true"] { display: none; }
}

@media (max-width: 767px) {
	.products-page__intro { font-size: 15px; line-height: 25px; }
}

@media (min-width: 1024px) {
	.products-page__head { padding-top: 28px; }
	.products-page__title.page-title { margin: 16px 0 20px; }
	.products-page__intro { font-size: 17px; line-height: 29px; }
}

/* ---------- 2. Filterchips ---------- */
.products-filter { margin-top: var(--s-4); }
/* Mobiel: één rij die horizontaal scrolt, tot aan de schermrand. */
.products-filter__list {
	display: flex;
	gap: var(--s-2);
	margin: 0 calc(-1 * var(--gutter));
	padding: 4px var(--gutter) 8px;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.products-filter__list::-webkit-scrollbar { display: none; }
.products-filter__list li { flex: 0 0 auto; }

@media (min-width: 768px) {
	.products-filter__list {
		flex-wrap: wrap;
		margin: 0;
		padding: 4px 0 0;
		overflow: visible;
	}
}

.products-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--c-border);
	border-radius: var(--r-pill);
	background: #fff;
	color: var(--c-dark);
	font-size: 14px;
	line-height: 1;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.products-chip:hover { border-color: var(--c-navy); color: var(--c-navy); }
.products-chip__count {
	min-width: 22px;
	padding: 3px 6px;
	border-radius: var(--r-pill);
	background: var(--c-soft);
	color: var(--c-muted);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}
/* Gekozen = navy (besluit 3 okt: navy alleen voor kleine 'actief'-staten). */
.products-chip.is-active { border-color: var(--c-navy); background: var(--c-navy); color: #fff; font-weight: 600; }
.products-chip.is-active:hover { background: var(--c-navy-hover); }
.products-chip.is-active .products-chip__count { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* ---------- 3. Groepen ---------- */
.products-group { margin-top: var(--s-8); scroll-margin-top: var(--s-4); }
.products-group[hidden] { display: none; }
.products-group__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 var(--s-4);
	font-family: var(--f-display);
	font-size: 22px;
	line-height: 26px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--c-ink);
}
.products-group__count {
	font-family: var(--f-sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--c-muted);
}
@media (min-width: 1024px) {
	.products-group { margin-top: var(--s-12); }
	.products-group__title { font-size: 28px; line-height: 32px; margin-bottom: var(--s-6); }
}

/* Gefilterd met JS: de eerste zichtbare groep sluit aan op de chips. */
.products-page__groups > .products-group.is-first { margin-top: var(--s-6); }

.products-page__empty {
	margin: var(--s-8) 0;
	padding: var(--s-6);
	border-radius: var(--r-md);
	background: var(--c-soft);
}
.products-page__empty a { color: var(--c-link); font-weight: 700; text-decoration: none; }

/* ---------- 4. Raster + kaart ---------- */
.products-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 600px) {
	.products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
}
@media (min-width: 860px) {
	.products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
	.products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); }
}

/* Mobiel: foto links (112 px), tekst rechts; leest makkelijker dan twee smalle kolommen met voordelen. */
.product-card {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	gap: var(--s-3);
	padding: var(--s-3);
	border: 1px solid var(--c-border-light);
	border-radius: var(--r-md);
	background: #fff;
	color: var(--c-text);
}
.product-card__media {
	position: relative;
	align-self: start;
	aspect-ratio: 1 / 1;
	border-radius: var(--r-sm);
	background: #fff;
	overflow: hidden;
}
.product-card__img-link { display: block; width: 100%; height: 100%; }
.product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.25s ease;
}
.product-card__img-link:hover img { transform: scale(1.03); }

.product-card__badge {
	position: absolute;
	top: 6px;
	left: 6px;
	padding: 3px 8px;
	border-radius: var(--r-pill);
	font-size: 14px;
	line-height: 18px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}
.product-card__badge--sale { background: var(--c-discount); color: #fff; }

.product-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.product-card__name {
	margin: 0;
	font-family: var(--f-sans);
	font-size: 15px;
	line-height: 20px;
	font-weight: 700;
	color: var(--c-ink);
}
.product-card__reviews {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	font-size: 14px;
	line-height: 18px;
	color: var(--c-muted);
}
.product-card__star { color: var(--c-star); }

.product-card__usps {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 18px;
	color: var(--c-text);
}
.product-card__usps li { display: flex; gap: 6px; align-items: flex-start; }
.product-card__usps svg { margin-top: 2px; color: var(--c-success); }

.product-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-2) var(--s-3);
	margin-top: auto;
	padding-top: var(--s-2);
}
.product-card__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px 8px;
	margin: 0;
}
.product-card__now {
	font-size: 18px;
	line-height: 22px;
	font-weight: 700;
	color: var(--c-ink);
	font-variant-numeric: tabular-nums;
}
.product-card__price.is-sale .product-card__now { color: var(--c-discount); }
.product-card__old {
	font-size: 14px;
	line-height: 18px;
	color: var(--c-muted);
}

.product-card__order.btn {
	min-height: 40px;
	padding: 0 16px;
	gap: 6px;
	font-size: 14px;
	letter-spacing: 0.6px;
}
.product-card__soldout {
	margin: 0;
	padding: 6px 12px;
	border-radius: var(--r-pill);
	background: #ebecef;
	color: var(--c-muted);
	font-size: 14px;
	line-height: 18px;
	font-weight: 600;
}

/* Uitverkocht: grijze kaart, foto vaag, geen bestelknop. */
.product-card.is-soldout { background: var(--c-soft); border-color: var(--c-border-light); }
.product-card.is-soldout .product-card__media { background: var(--c-soft); }
.product-card.is-soldout .product-card__media img { filter: grayscale(1); opacity: 0.55; }
.product-card.is-soldout .product-card__name,
.product-card.is-soldout .product-card__now { color: var(--c-muted); }
.product-card.is-soldout .product-card__usps { color: var(--c-muted); }
.product-card.is-soldout .product-card__usps svg { color: var(--c-muted); }

/* Vanaf 600 px: staande kaart, knop over de volle breedte onderaan. */
@media (min-width: 600px) {
	.product-card {
		display: flex;
		flex-direction: column;
		gap: var(--s-3);
		padding: var(--s-4);
		border-radius: var(--r-lg);
		transition: box-shadow 0.2s, border-color 0.2s;
	}
	.product-card:not(.is-soldout):hover { border-color: var(--c-border); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); }
	.product-card__media { align-self: stretch; border-radius: var(--r-md); }
	.product-card__badge { top: 8px; left: 8px; font-size: 14px; padding: 4px 10px; }
	.product-card__body { flex: 1; gap: 8px; }
	.product-card__name { font-size: 16px; line-height: 22px; }
	.product-card__usps { font-size: 14px; line-height: 20px; gap: 6px; }
	.product-card__usps svg { margin-top: 3px; }
	.product-card__foot { flex-direction: column; align-items: stretch; gap: var(--s-3); padding-top: var(--s-3); }
	.product-card__now { font-size: 20px; line-height: 24px; }
	.product-card__order.btn { width: 100%; min-height: 46px; font-size: 14px; }
	.product-card__soldout { text-align: center; padding: 13px 12px; }
}

/* ---------- 5. Merkverhaal ---------- */
.products-story { margin-top: var(--s-12); }
.products-story__card {
	display: grid;
	grid-template-areas: "logos" "text";
	gap: var(--s-6);
	padding: var(--s-6) 20px;
	border-radius: var(--r-xl);
	background: var(--c-deal);
	color: var(--c-text);
}
.products-story__logos {
	grid-area: logos;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 14px 18px;
	border-radius: var(--r-lg);
	background: #fff;
}
.products-story__logo--lcc { width: 52px; height: 52px; }
.products-story__logo--shop { width: 170px; height: auto; }
.products-story__x { font-size: 22px; line-height: 1; color: var(--c-muted); }

.products-story__text { grid-area: text; }
.products-story__title {
	margin: 0 0 var(--s-4);
	font-family: var(--f-display);
	font-size: 24px;
	line-height: 28px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--c-ink);
}
.products-story__text p { margin: 0 0 var(--s-4); }
.products-story__sign {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin: var(--s-6) 0 0 !important;
}
.products-story__sign img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #fff;
}
.products-story__sign > span { display: flex; flex-direction: column; line-height: 20px; }
.products-story__sign strong { color: var(--c-ink); }
.products-story__sign > span > span { font-size: 14px; color: var(--c-muted); }

@media (min-width: 1024px) {
	.products-story { margin-top: var(--s-16); }
	.products-story__card {
		grid-template-areas: "text logos";
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: var(--s-12);
		padding: var(--s-12);
		align-items: center;
	}
	.products-story__text { max-width: 720px; font-size: 17px; line-height: 29px; }
	.products-story__title { font-size: 32px; line-height: 36px; margin-bottom: var(--s-6); }
	.products-story__logos {
		flex-direction: column;
		align-self: center;
		gap: var(--s-4);
		padding: var(--s-12) var(--s-8);
		border-radius: var(--r-lg);
	}
	.products-story__logo--lcc { width: 96px; height: 96px; }
	.products-story__logo--shop { width: 240px; }
	.products-story__x { font-size: 28px; }
}

/* ---------- 6. USP-balk Lowcarbcenter ---------- */
.products-usps { margin-top: var(--s-4); }
.products-usps__bar {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	padding: 20px;
	border-radius: var(--r-lg);
	background: #eef0f3;
}
.products-usps__list {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.products-usps__list li {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	font-size: 15px;
	line-height: 21px;
	font-weight: 600;
	color: var(--c-ink);
}
.products-usps__list svg { color: var(--c-navy); }
.products-usps__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--c-link);
	font-size: 15px;
	line-height: 21px;
	font-weight: 700;
	text-decoration: none;
}
.products-usps__link:hover { text-decoration: underline; }

@media (min-width: 1024px) {
	/* Past de link er niet meer naast, dan schuift hij netjes onder de USP's. */
	.products-usps__bar {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--s-3) var(--s-8);
		padding: 22px var(--s-8);
	}
	.products-usps__list { flex-direction: row; flex-wrap: wrap; gap: var(--s-3) 28px; }
	.products-usps__list li { font-size: 14px; gap: 10px; white-space: nowrap; }
	.products-usps__link { flex-shrink: 0; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.product-card,
	.product-card__media img,
	.products-chip { transition: none; }
}