/*
 * Winkel- en categoriepagina's (templates/archive-product.html, inc/categorie.php).
 * Bouwt op homepage.css + zakelijk.css + landing.css (hero, kruimelpad, uitgelicht
 * product, verwijzingen). Hier: pillen, raster met productkaarten, balk, paginering.
 */

body.boozt-catalogus .wp-site-blocks > main > * {
	margin-block-start: 0;
}

.boozt-khero *,
.boozt-ksectie * {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------- hero */

.boozt-zhero.boozt-khero {
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.boozt-zhero.boozt-khero .boozt-zhero__h1 {
	margin-bottom: 0.3em;
}

.boozt-khero__intro {
	max-width: 46ch;
	margin: 0 auto;
}

.boozt-khero__intro p {
	margin: 0 0 0.75em;
}

.boozt-khero__intro p:last-child {
	margin-bottom: 0;
}

.boozt-pillen {
	position: relative;
	z-index: 3;
	margin-top: 2rem;
}

.boozt-pillen ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.boozt-pil {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0.5rem 1.1rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--cream, #ebe0d6) 45%, transparent);
	border-radius: 2em;
	color: var(--wp--preset--color--cream, #ebe0d6);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.boozt-pil:hover,
.boozt-pil:focus-visible {
	border-color: var(--wp--preset--color--cream, #ebe0d6);
}

/* Lange selector: app.css zet links in donkere secties op zand (dan was de tekst zand op zand). */
.has-ink-background-color .boozt-pillen a.boozt-pil.is--actief {
	background-color: var(--wp--preset--color--cream, #ebe0d6);
	border-color: var(--wp--preset--color--cream, #ebe0d6);
	color: var(--wp--preset--color--ink, #1b0b09);
}

/* Meldingen van WooCommerce (bijv. na toevoegen zonder JS). */
.boozt-kmeldingen:empty {
	display: none;
}

.boozt-kmeldingen .wc-block-components-notices:not(:empty) {
	padding-top: var(--wp--preset--spacing--40, 2.5rem);
}

/* ------------------------------------------------------- uitgelicht product */

.boozt-kuitgelicht__naam {
	font-size: var(--wp--preset--font-size--xxl);
	flex: none;
	margin: 0 0 0.5rem;
}

.boozt-kuitgelicht .boozt-lproduct__kaart {
	margin-top: 0;
}

.boozt-kuitgelicht__kort p {
	margin: 0 0 0.75em;
}

/* ----------------------------------------------------------------- raster */

.boozt-kbalk {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: var(--wp--preset--spacing--40, 2.5rem);
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--wp--preset--color--line, #dccbba);
}

.boozt-kbalk__aantal {
	margin: 0;
	color: var(--wp--preset--color--ink-muted, #6b5a52);
	font-size: 0.9375rem;
}

.boozt-kbalk .woocommerce-ordering {
	float: none;
	margin: 0;
}

.boozt-kbalk .woocommerce-ordering select {
	appearance: none;
	min-height: 2.75rem;
	padding: 0.55rem 2.5rem 0.55rem 1.1rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--ink, #1b0b09) 22%, transparent);
	border-radius: 2em;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231b0b09' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 1rem center;
	color: var(--wp--preset--color--ink, #1b0b09);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

.boozt-pkaarten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
	gap: clamp(2rem, 4vw, 3rem) clamp(1rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.boozt-pkaart {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.boozt-pkaart__link {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	color: var(--wp--preset--color--ink, #1b0b09);
	text-decoration: none;
}

.boozt-pkaart__foto {
	position: relative;
	display: block;
	aspect-ratio: 1;
	border-radius: 1rem;
	overflow: hidden;
	background-color: var(--wp--preset--color--cream, #ebe0d6);
}

.boozt-pkaart__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.38, 0.005, 0.215, 1);
}

.boozt-pkaart__link:hover .boozt-pkaart__foto img {
	transform: scale(1.04);
}

.boozt-pkaart__label {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.35em 0.8em;
	border-radius: 2em;
	background-color: var(--wp--preset--color--base, #f8f5f1);
	color: var(--wp--preset--color--wine, #70041c);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
}

.boozt-pkaart__naam {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.2;
}

.boozt-pkaart__link:hover .boozt-pkaart__naam {
	color: var(--wp--preset--color--wine, #70041c);
}

.boozt-pkaart__sterren {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--ink-muted, #6b5a52);
}

.boozt-pkaart__prijs {
	font-weight: 700;
	color: var(--wp--preset--color--ink, #1b0b09);
}

.boozt-pkaart__prijs ins {
	text-decoration: none;
}

.boozt-pkaart__prijs del {
	margin-right: 0.4em;
	font-weight: 400;
	color: var(--wp--preset--color--ink-muted, #6b5a52);
}

.boozt-pkaart__koop {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	margin-top: auto;
	padding: 0.65em 1.25em;
	border: 1px solid var(--wp--preset--color--wine, #70041c);
	border-radius: 2.5em;
	background-color: var(--wp--preset--color--wine, #70041c);
	color: var(--wp--preset--color--cream, #ebe0d6);
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.boozt-pkaart__koop:hover,
.boozt-pkaart__koop:focus-visible {
	background-color: var(--wp--preset--color--ink, #1b0b09);
	border-color: var(--wp--preset--color--ink, #1b0b09);
	color: var(--wp--preset--color--cream, #ebe0d6);
}

.boozt-pkaart__koop.is--bekijk {
	background-color: transparent;
	border-color: var(--wp--preset--color--ink, #1b0b09);
	color: var(--wp--preset--color--ink, #1b0b09);
}

.boozt-pkaart__koop.loading {
	opacity: 0.6;
}

.boozt-pkaart .added_to_cart {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--wine, #70041c);
	text-align: center;
}

/* ------------------------------------------------------------ paginering */

.boozt-paginering {
	margin-top: var(--wp--preset--spacing--50, 3.5rem);
}

.boozt-paginering ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.boozt-paginering .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.75rem;
	border-radius: 2em;
	color: var(--wp--preset--color--ink, #1b0b09);
	font-weight: 600;
	text-decoration: none;
}

.boozt-paginering a.page-numbers:hover {
	background-color: var(--wp--preset--color--cream, #ebe0d6);
}

.boozt-paginering .page-numbers.current {
	background-color: var(--wp--preset--color--ink, #1b0b09);
	color: var(--wp--preset--color--cream, #ebe0d6);
}

/* ------------------------------------------------------------- SEO-tekst */

.boozt-ksectie--tekst {
	border-top: 1px solid var(--wp--preset--color--line, #dccbba);
}

.boozt-ktekst {
	max-width: 44rem;
}

.boozt-ktekst h2 {
	font-size: var(--wp--preset--font-size--xxl);
	margin: 1.5em 0 0.5em;
}

.boozt-ktekst h2:first-child {
	margin-top: 0;
}

.boozt-ktekst h3 {
	font-size: var(--wp--preset--font-size--xl);
	margin: 1.25em 0 0.4em;
}

.boozt-ktekst p,
.boozt-ktekst li {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.65;
	color: var(--wp--preset--color--ink-muted, #6b5a52);
}

/* ------------------------------------------------------------------ leeg */

.boozt-kleeg {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	text-align: center;
}

.boozt-kleeg .boozt-z__lead {
	margin: 0 auto;
}

/* Mobiel: twee producten naast elkaar, zoals in de meeste webwinkels. */
@media (max-width: 599px) {
	.boozt-pkaarten {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.75rem 0.75rem;
	}

	.boozt-pkaart__link {
		gap: 0.75rem;
	}

	.boozt-pkaart__naam {
		font-size: 1rem;
	}

	.boozt-pkaart__prijs {
		font-size: 0.9375rem;
	}

	.boozt-pkaart__koop {
		min-height: 2.5rem;
		padding: 0.55em 0.75em;
		font-size: 0.8125rem;
	}

	.boozt-pkaart__label {
		top: 0.5rem;
		left: 0.5rem;
		font-size: 0.625rem;
	}

	.boozt-kbalk {
		flex-direction: column;
		align-items: stretch;
	}

	.boozt-kbalk .woocommerce-ordering select {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.boozt-pkaart__foto img {
		transition: none;
	}
}