/* ZW rebuild F3: categorie- en landingspagina's (geladen door inc/categorie.php, alleen op .zw-archief). */

/* ---------- Banner zoals live: donkere foto (mediabibliotheek 4608), witte titel en intro ---------- */
.zw-archief .hero-section[data-type="type-2"] {
	position: relative;
	background-color: #0d1116;
	background-image: url("/wp-content/uploads/2025/07/top-section-background.png");
	background-image: image-set(url("/wp-content/uploads/2025/07/top-section-background.webp") type("image/webp"), url("/wp-content/uploads/2025/07/top-section-background.png") type("image/png"));
	background-size: cover;
	background-position: center;
	padding-top: 34px;
	padding-bottom: 32px;
	min-height: 0;
}
.zw-archief .hero-section[data-type="type-2"] > .entry-header {
	max-width: 1120px;
}
/* Alleen in de donkere banner (type-2) wit; een type-1-kop op licht vlak blijft donker (F6: zoekresultaten). */
.zw-archief .hero-section[data-type="type-2"] .page-title {
	color: #fff;
	font-size: 40px;
	margin-bottom: 14px;
}
.zw-archief .hero-section[data-type="type-2"] .page-description,
.zw-archief .hero-section[data-type="type-2"] .page-description p,
.zw-archief .hero-section[data-type="type-2"] .page-description span,
.zw-archief .hero-section[data-type="type-2"] .term-description,
.zw-archief .hero-section[data-type="type-2"] .term-description p {
	color: #fff;
	font-size: 15px;
	line-height: 1.6;
}
.zw-archief .hero-section[data-type="type-2"] .page-description a {
	color: #fff;
	text-decoration: underline;
}
.zw-archief .hero-section .page-description p {
	margin-bottom: 0.8em;
}
.zw-archief .hero-section .page-description p:last-child {
	margin-bottom: 0;
}
/* Kruimelpad boven de titel (F6, SEO c-3). */
.zw-archief .hero-section[data-type="type-2"] .ct-breadcrumbs {
	margin-bottom: 10px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.8);
}
.zw-archief .hero-section[data-type="type-2"] .ct-breadcrumbs a {
	color: #fff;
}
.zw-archief .hero-section[data-type="type-2"] .ct-breadcrumbs a:hover {
	color: var(--zw-oranje, #ff5a06);
}

/* Termafbeelding (merklogo, 160x60) niet als uitvergrote achtergrond maar klein en scherp boven de titel,
   op een wit kaartje in de donkere banner (F6, visueel P1-2). */
/* Volgorde in de banner met logo: kruimel, logo, titel, intro (header wordt "contents" zodat het logo tussen
   kruimel en titel kan staan). */
.zw-archief .hero-section[data-type="type-2"]:has(> figure) {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-left: 16px;
	padding-right: 16px;
	text-align: center;
}
.zw-archief .hero-section[data-type="type-2"]:has(> figure) > .entry-header {
	display: contents;
}
.zw-archief .hero-section[data-type="type-2"]:has(> figure) .ct-breadcrumbs {
	order: 1;
}
.zw-archief .hero-section[data-type="type-2"]:has(> figure) > figure {
	order: 2;
}
.zw-archief .hero-section[data-type="type-2"]:has(> figure) .page-title {
	order: 3;
}
.zw-archief .hero-section[data-type="type-2"]:has(> figure) .page-description {
	order: 4;
	max-width: 1120px;
}
.zw-archief .hero-section[data-type="type-2"] > figure {
	position: relative;
	inset: auto;
	z-index: 2;
	display: flex;
	justify-content: center;
	margin: 0 0 14px;
	overflow: visible;
	background: transparent;
}
.zw-archief .hero-section[data-type="type-2"] > figure .ct-media-container {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	padding: 10px 18px;
	border-radius: var(--zw-radius, 10px);
	background: #fff;
}
.zw-archief .hero-section[data-type="type-2"] > figure .ct-media-container::after {
	display: none;
}
.zw-archief .hero-section[data-type="type-2"] > figure .ct-media-container img {
	width: auto;
	height: auto;
	max-width: 160px;
	max-height: 60px;
	object-fit: contain;
}

@media (max-width: 689.98px) {
	.zw-archief .hero-section[data-type="type-2"] > figure .ct-media-container img {
		max-width: 120px;
		max-height: 45px;
	}
	.zw-archief .hero-section[data-type="type-2"] {
		padding-top: 28px;
		padding-bottom: 26px;
	}
	.zw-archief .hero-section .page-title {
		font-size: 30px;
		margin-bottom: 8px;
	}
	/* Blocksy verbergt de intro op mobiel; live toont hem (korter lettertype). */
	.zw-archief .hero-section .page-description.ct-hidden-sm {
		display: block !important;
	}
	.zw-archief .hero-section .page-description,
	.zw-archief .hero-section .page-description p,
	.zw-archief .hero-section .page-description span {
		font-size: 13.5px;
		line-height: 1.5;
	}
}

/* ---------- Pagina-achtergrond en raster ---------- */
.zw-archief .site-main {
	background: #f7f9f9;
}
@media (min-width: 1000px) {
	.zw-archief [data-products] {
		--shop-columns: repeat(3, minmax(0, 1fr));
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 24px;
		row-gap: 36px;
	}
}

/* Mobiel: 2 kolommen (live toont 1 grote kaart per rij; 24 producten werd zo ~10.000 px scrollen). */
@media (max-width: 689.98px) {
	.zw-archief [data-products] {
		--shop-columns: repeat(2, minmax(0, 1fr));
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 12px;
		row-gap: 24px;
	}
}

/* Productkaart (opmaak, badges, voorraad, knop): assets/kaarten.css (F6, overal dezelfde kaart). */

/* ---------- Filters (zijbalk + mobiel paneel) ---------- */
.zw-archief .ct-sidebar .filter-heading,
.zw-archief .ct-panel .filter-heading {
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid #c9d2d3;
	font-family: "Exo 2", sans-serif;
	font-size: 18px;
	font-weight: 600;
	color: #0d1116;
}
.zw-archief .ct-sidebar .ct-widget {
	margin-bottom: 0;
}
.zw-archief .ct-sidebar .ct-widget:has(.ct-filter-widget-wrapper),
.zw-archief .ct-sidebar .ct-widget:has(.ct-price-filter) {
	margin-bottom: 26px;
}
/* Merklogo's weg: alleen tekst, zoals live. */
.zw-archief .ct-filter-widget .ct-filter-item img,
.zw-archief .ct-filter-widget .ct-media-container,
.zw-archief .ct-filter-widget .ct-filter-item-image {
	display: none;
}
.zw-archief .ct-filter-widget .ct-filter-item-inner > a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 3px 0;
	font-size: 14px;
	color: #0d1116;
}
.zw-archief .ct-filter-widget .ct-filter-item-inner > a:hover {
	color: var(--zw-oranje, #ff5a06);
}
.zw-archief .ct-filter-widget .ct-filter-label {
	flex: 1;
	text-align: left;
}
.zw-archief .ct-filter-widget .ct-filter-count {
	margin-left: auto;
	min-width: 22px;
	padding: 0 6px;
	border-radius: 10px;
	background: #e8eded;
	border: 0;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
	color: #4b5557;
}
.zw-archief .ct-filter-widget .ct-checkbox {
	flex: 0 0 auto;
	border-color: #9aa7a9;
	border-radius: 3px;
}
.zw-archief .ct-filter-widget [data-state="active"] .ct-checkbox,
.zw-archief .ct-filter-widget .active .ct-checkbox {
	background: var(--zw-petrol, #075056);
	border-color: var(--zw-petrol, #075056);
}

/* Mobiel filterpaneel: lichte achtergrond, nette kop. */
#woo-filters-panel .ct-panel-inner {
	background: #fafbfb;
}
#woo-filters-panel .ct-panel-heading {
	font-family: "Exo 2", sans-serif;
	font-size: 18px;
	font-weight: 600;
	text-transform: uppercase;
	color: #0d1116;
}
#woo-filters-panel .ct-panel-content-inner .ct-widget:has(.ct-filter-widget-wrapper),
#woo-filters-panel .ct-panel-content-inner .ct-widget:has(.ct-price-filter) {
	margin-bottom: 24px;
}
.zw-archief .ct-toggle-filter-panel {
	border: 1px solid var(--zw-petrol, #075056);
	border-radius: var(--zw-radius, 10px);
	padding: 8px 16px;
	font-family: "Exo 2", sans-serif;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--zw-petrol, #075056);
}

/* ---------- Tekst onder de producten (landingspagina's, accessoire-categorieën) ---------- */
/* Onder raster + filterbalk, over de volle containerbreedte (F6, visueel P2-11); regels blijven leesbaar. */
.zw-archief-onder {
	padding-bottom: 60px;
}
.zw-archief-onder .zw-landing-tekst {
	max-width: none;
	margin: 0;
	padding: 40px 48px;
}
.zw-archief-onder .zw-landing-tekst > * {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}
.zw-landing-tekst {
	max-width: 900px;
	margin: 48px auto 0;
	padding: 32px 36px;
	background: #fff;
	border-radius: 12px;
}
.zw-landing-tekst h2,
.zw-landing-tekst h3 {
	margin-top: 1.4em;
}
.zw-landing-tekst > :first-child,
.zw-landing-tekst h2:first-child {
	margin-top: 0;
}
.zw-landing-melding {
	padding: 16px 20px;
	border-left: 4px solid var(--zw-oranje, #ff5a06);
	background: #fff6f0;
	border-radius: 6px;
}
@media (max-width: 689.98px) {
	.zw-landing-tekst,
	.zw-archief-onder .zw-landing-tekst {
		padding: 22px 18px;
	}
	.zw-archief-onder {
		padding-bottom: 40px;
	}
}