/*
 * Groomzo v2 — shop + productcategorie-archief (3 sep 2026).
 * Kaartvormen staan in product-card.css (gedeelde bron met de homepage);
 * hier alléén archief-pagina: kop-band, breadcrumb, chips, grid-container,
 * paginering, lege staat en lange term-omschrijving onder het grid.
 * Elementor Kit .elementor-kit-4 overridet h1/h3 op source-order →
 * font-regels gescoped + !important (zie home.css-header).
 */

/* main is flex-item in de Astra-container. Op archiefpagina's is die
   container Astra-boxed (max-width 1240 + padding/margin) — home ontkomt
   daaraan via body.ast-page-builder-template. Neutraliseren op body-
   scope zodat de shop-banden full-bleed zijn en .gzv-inner exact op
   1280/28 uitlijnt met header/home/footer (user-check 3 sep). */
body.gzv-shop .ast-container {
	max-width: 100% !important; /* Astra's archief-container wint op specificiteit — zelfde kit-paranoia-gereedschap */
	margin: 0 !important;
	padding: 0 !important;
}

main.gzv-shop {
	width: 100%;
	background: var(--gz-paper);
}

/* ---------- Kop-band ---------- */

.gzv-shop-kop {
	padding: 16px 0 46px;
}

.gzv-shop .woocommerce-breadcrumb {
	margin: 0 0 18px !important;
	font: 400 12px/1.6 var(--gz-sans) !important;
	color: var(--gz-muted) !important;
}

.gzv-shop .woocommerce-breadcrumb a {
	color: var(--gz-moss);
	text-decoration: none;
}

.gzv-shop .woocommerce-breadcrumb a:hover {
	color: var(--gz-pine);
	text-decoration: underline;
}

.gzv-shop-eyebrow {
	margin: 0 0 10px !important;
	font: 600 11.5px/1 var(--gz-sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gz-moss);
}

.gzv-shop-titel {
	margin: 0 0 12px !important;
	font-family: var(--gz-disp) !important;
	font-weight: 590 !important;
	font-size: clamp(30px, 3.6vw, 44px) !important;
	line-height: 1.12 !important;
	letter-spacing: -0.01em !important;
	color: var(--gz-ink) !important;
}

.gzv-shop-sub {
	margin: 0 !important;
	max-width: 62ch;
	font: 400 15.5px/1.55 var(--gz-sans);
	color: var(--gz-body);
}

/* ---------- Categorie-chips (shop én categorie-archieven) ---------- */

.gzv-shop-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
}

.gzv-chip {
	display: inline-flex;
	align-items: center;
	padding: 9px 18px;
	background: var(--gz-card);
	border: 0.5px solid var(--gz-line);
	border-radius: 999px;
	font: 500 13px/1 var(--gz-sans);
	color: var(--gz-ink) !important;
	text-decoration: none !important;
	transition: border-color .16s ease, color .16s ease;
}

.gzv-chip:hover {
	border-color: var(--gz-pine);
	color: var(--gz-pine) !important;
}

.gzv-chip:focus-visible {
	outline: 3px solid var(--gz-amber) !important;
	outline-offset: 2px !important;
}

.gzv-chip.is-actief {
	background: var(--gz-pine);
	border-color: var(--gz-pine);
	color: var(--gz-ivory) !important;
	font-weight: 600;
}

/* ---------- Productgrid ---------- */

.gzv-shop-lijst {
	background: var(--gz-paper-deep); /* zelfde band als homepage-favorieten */
	padding-block: 46px 72px;
}

/* Mobiel primair 2 kaarten per rij (user-amendement 3 sep); 1 kolom
   alleen als visuele QA aantoont dat 2 niet werkt. */
.gzv-shop-grid {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* alle rijen even hoog (tall common denominator): gelijke kaart- en
	   prijslijnen over het hele grid, ook waar een rij geen benefit-tekst
	   heeft — zelfde intentie als de home-kaarten (margin-top:auto). */
	grid-auto-rows: 1fr;
	gap: 14px;
}

@media (min-width: 560px) {
	.gzv-shop-grid { gap: 20px; }
}

@media (min-width: 1024px) {
	.gzv-shop-kop { padding: 20px 0 56px; }
	.gzv-shop-lijst { padding-block: 56px 88px; }
	.gzv-shop-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

/* ---------- Paginering ---------- */

.gzv-shop .pagination {
	margin: 32px 0 0 !important;
}

.gzv-shop .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.gzv-shop .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	padding: 9px 12px;
	border: 0.5px solid var(--gz-line);
	border-radius: var(--gz-r-sm);
	font: 500 13px/1 var(--gz-sans);
	color: var(--gz-ink) !important;
	text-decoration: none !important;
	background: var(--gz-card);
}

.gzv-shop a.page-numbers:hover {
	border-color: var(--gz-pine);
	color: var(--gz-pine) !important;
}

.gzv-shop .page-numbers.current {
	background: var(--gz-pine);
	border-color: var(--gz-pine);
	color: var(--gz-ivory) !important;
	font-weight: 600;
}

.gzv-shop .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

/* ---------- Lege staat ---------- */

.gzv-shop-leeg {
	padding: 12px 0 20px;
}

.gzv-shop-leeg p {
	margin: 0 !important;
	font: 400 15px/1.55 var(--gz-sans);
	color: var(--gz-body);
}

.gzv-shop-leeg-knop {
	display: inline-flex;
	align-items: center;
	margin-top: 16px;
	padding: 13px 24px;
	background: var(--gz-pine);
	border-radius: 999px;
	font: 600 14px/1 var(--gz-sans);
	color: var(--gz-ivory) !important;
	text-decoration: none !important;
	transition: background .16s ease;
}

.gzv-shop-leeg-knop:hover {
	background: var(--gz-pine-deep);
	color: var(--gz-ivory) !important;
}

.gzv-shop-leeg-knop:focus-visible {
	outline: 3px solid var(--gz-amber) !important;
	outline-offset: 2px !important;
}

/* ---------- Lange term-omschrijving (onder het grid) ---------- */

.gzv-shop-beschrijving {
	max-width: 72ch;
	margin-top: 40px;
	padding-top: 26px;
	border-top: 0.5px solid var(--gz-line);
	font: 400 14px/1.65 var(--gz-sans);
	color: var(--gz-body);
}

.gzv-shop-beschrijving h2 {
	margin: 0 0 10px !important;
	font-family: var(--gz-disp) !important;
	font-weight: 600 !important;
	font-size: 20px !important;
	line-height: 1.25 !important;
	color: var(--gz-ink) !important;
}

.gzv-shop-beschrijving p {
	margin: 0 0 10px !important;
}

.gzv-shop-beschrijving p:last-child {
	margin-bottom: 0 !important;
}