/* ============================================================
   Vloerplus — POP (Product Overview) — Design 2.0
   Scoped under .jvz-pop-* so it never bleeds into legacy CSS.
   ============================================================ */

/* No own LR padding/max-width: the surrounding .wc-inner already provides
   1442px max-width + 24px LR padding. Adding our own caused double-padding. */
.jvz-pop-header {
	margin: 0;
	padding: var(--jvz-s-4) 0 var(--jvz-s-2);
	font-family: var(--jvz-font-body);
}

.jvz-pop-header__inner {
	display: grid;
	grid-template-columns: 1fr 460px;
	gap: var(--jvz-s-10);
	align-items: center;
	margin-top: var(--jvz-s-4);
}

.jvz-pop-header__copy .jvz-eyebrow {
	color: var(--jvz-orange);
	font-family: var(--jvz-font-display);
	font-weight: var(--jvz-fw-bold);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.jvz-pop-header__title {
	font-family: var(--jvz-font-display);
	font-weight: var(--jvz-fw-bold);
	font-size: clamp(32px, 4vw, 44px);
	line-height: 1.1;
	letter-spacing: -0.005em;
	color: var(--jvz-navy);
	margin: var(--jvz-s-2) 0 0;
}

.jvz-pop-header__intro {
	margin: var(--jvz-s-3) 0 0;
	max-width: 560px;
	font-size: var(--jvz-fs-body);
	line-height: 1.55;
	color: var(--jvz-fg-2);
}

/* ----- Visual lifestyle strip (CSS-only placeholder until Figma image lands) ----- */
.jvz-pop-header__visual {
	position: relative;
	height: 170px;
	border-radius: var(--jvz-r-lg);
	overflow: hidden;
	border: 1px solid var(--jvz-line);
	box-shadow: var(--jvz-shadow-sm);
	background: #a07952;
}
.jvz-pop-header__plank {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.15)),
		repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 150px, rgba(0,0,0,.28) 150px 152px),
		repeating-linear-gradient(0deg,  rgba(0,0,0,0) 0 46px, rgba(0,0,0,.16) 46px 48px),
		repeating-linear-gradient(180deg, #b58a64 0 4px, #a07952 4px 11px, #8a6740 11px 18px);
}
.jvz-pop-header__wall {
	position: absolute;
	inset: 0 0 65% 0;
	background: linear-gradient(180deg, #e9e1d2, #c0b39c);
}
.jvz-pop-header__shape {
	position: absolute;
	border-radius: 8px;
}
.jvz-pop-header__shape--a {
	right: 10%;
	top: 8%;
	width: 24%;
	height: 22%;
	background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
	box-shadow: inset 0 0 0 4px #d8cdb6;
}
.jvz-pop-header__shape--b {
	left: 8%;
	top: 18%;
	width: 34%;
	height: 20%;
	background: linear-gradient(180deg, #cfc6b3, #b9af9a);
	border-radius: 10px;
}

/* ----- Category chips ----- */
.jvz-pop-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jvz-s-2);
	margin: 0;
	padding: var(--jvz-s-6) 0 var(--jvz-s-2);
}

.jvz-pop-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: var(--jvz-r-pill);
	background: #fff;
	color: var(--jvz-navy);
	border: 1px solid var(--jvz-line);
	font-family: var(--jvz-font-display);
	font-weight: var(--jvz-fw-bold);
	font-size: 13px;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color .15s, background .15s, color .15s;
}
.jvz-pop-chip:hover {
	border-color: var(--jvz-navy);
	color: var(--jvz-navy);
}
.jvz-pop-chip.is-active {
	background: var(--jvz-navy);
	color: #fff;
	border-color: var(--jvz-navy);
}
.jvz-pop-chip__count {
	font-weight: var(--jvz-fw-medium);
	font-size: 11px;
	color: var(--jvz-fg-3);
}
.jvz-pop-chip.is-active .jvz-pop-chip__count {
	color: rgba(255,255,255,.7);
}

/* ============================================================
   Below-fold blocks (Design 2.0): help CTA + POP FAQ
   ============================================================ */
.jvz-pop-help {
	margin: var(--jvz-s-12) 0 0;
	padding: 0;
}
.jvz-pop-help__inner {
	background: var(--jvz-navy);
	color: #fff;
	border-radius: var(--jvz-r-lg);
	padding: var(--jvz-s-6) var(--jvz-s-8);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--jvz-s-6);
	align-items: center;
}
.jvz-pop-help__eyebrow {
	font-family: var(--jvz-font-display);
	font-weight: var(--jvz-fw-bold);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jvz-orange);
	margin-bottom: 4px;
}
.jvz-pop-help__lead {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #fff;
}
.jvz-pop-help__actions {
	display: flex;
	gap: var(--jvz-s-3);
	flex-wrap: wrap;
}

.jvz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 24px;
	height: 48px;
	border-radius: var(--jvz-r-pill);
	font-family: var(--jvz-font-display);
	font-weight: var(--jvz-fw-bold);
	font-size: 13px;
	line-height: 1;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.jvz-btn--primary { background: var(--jvz-blue); color: #fff; box-shadow: var(--jvz-shadow-cta); }
.jvz-btn--primary:hover { background: var(--jvz-blue-hover); color: #fff; }
.jvz-btn--ghost-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.6); }
.jvz-btn--ghost-light:hover { background: #fff; color: var(--jvz-navy); border-color: #fff; }

/* FAQ */
.jvz-pop-faq {
	margin: var(--jvz-s-10) 0 var(--jvz-s-12);
	padding: 0;
}
.jvz-pop-faq__title {
	font-family: var(--jvz-font-display);
	font-weight: var(--jvz-fw-bold);
	font-size: 24px;
	color: var(--jvz-navy);
	margin: 0 0 var(--jvz-s-4);
}
.jvz-pop-faq__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--jvz-s-3);
}
.jvz-pop-faq__item {
	background: #fff;
	border: 1px solid var(--jvz-line);
	border-radius: var(--jvz-r-md);
	padding: 0;
	transition: border-color .15s;
}
.jvz-pop-faq__item[open] { border-color: var(--jvz-navy); }
.jvz-pop-faq__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--jvz-s-3);
	cursor: pointer;
	padding: var(--jvz-s-4) var(--jvz-s-5);
	font-family: var(--jvz-font-display);
	font-weight: var(--jvz-fw-bold);
	font-size: 14px;
	color: var(--jvz-navy);
	list-style: none;
}
.jvz-pop-faq__q::-webkit-details-marker { display: none; }
.jvz-pop-faq__chev {
	font-family: var(--jvz-font-display);
	font-weight: var(--jvz-fw-bold);
	font-size: 18px;
	color: var(--jvz-fg-3);
	line-height: 1;
	flex: 0 0 auto;
	transition: transform .15s;
}
.jvz-pop-faq__item[open] .jvz-pop-faq__chev { transform: rotate(45deg); }
.jvz-pop-faq__a {
	padding: 0 var(--jvz-s-5) var(--jvz-s-4);
	font-size: 14px;
	color: var(--jvz-fg-2);
	line-height: 1.6;
}

@media (max-width: 760px) {
	.jvz-pop-help__inner { grid-template-columns: 1fr; }
	.jvz-pop-faq__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Company USP bar — cream strip below main nav, above breadcrumb
   ============================================================ */
.jvz-uspbar {
	background: var(--jvz-cream-2);
	border-bottom: 1px solid rgba(223, 223, 223, 0.7);
	font-family: var(--jvz-font-body);
}
.jvz-uspbar__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 10px var(--jvz-s-8);
	display: flex;
	align-items: center;
}
.jvz-uspbar__track {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jvz-s-6);
	width: 100%;
}
/* Duplicate item set is only used by the mobile marquee loop. Hidden on desktop. */
.jvz-uspbar__item.is-dupe { display: none; }
.jvz-uspbar__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.jvz-uspbar__icon {
	color: var(--jvz-orange);
	flex: 0 0 16px;
	display: inline-flex;
	align-items: center;
}
.jvz-uspbar__label {
	font-family: var(--jvz-font-display);
	font-weight: var(--jvz-fw-bold);
	font-size: 12px;
	line-height: 1;
	color: var(--jvz-navy);
	white-space: nowrap;
}
@media (max-width: 900px) {
	/* Mobile: convert the inner into a viewport masking a marquee track that
	   slowly slides the items left. Items + a duplicate set are 200% wide;
	   animation translates -50% which leaves the second copy seamlessly in
	   the same position the first started — perfect loop. */
	.jvz-uspbar__inner {
		overflow: hidden;
		padding-left: 0;
		padding-right: 0;
	}
	.jvz-uspbar__track {
		width: max-content;
		justify-content: flex-start;
		gap: 32px;
		animation: jvz-uspbar-marquee 36s linear infinite;
	}
	.jvz-uspbar__item.is-dupe { display: inline-flex; }
	@keyframes jvz-uspbar-marquee {
		from { transform: translateX(0); }
		to   { transform: translateX(-50%); }
	}
	@media (prefers-reduced-motion: reduce) {
		.jvz-uspbar__track { animation: none; transform: none; justify-content: space-around; }
		.jvz-uspbar__item.is-dupe { display: none; }
	}
}

/* ============================================================
   Shop layout (Design 2.0) — 2-col grid replaces .shop-content-wrapper
   ============================================================ */
.jvz-shop {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 32px;
	margin: 0;
	padding: var(--jvz-s-2) 0 var(--jvz-s-8);
	align-items: start;
}
.jvz-shop__main { min-width: 0; display: flex; flex-direction: column; }

/* Auto-fill grid: cards have a minimum width of 280px and flex-fill the row.
   Naturally produces 3-col on wide desktop (≥1280) and 2-col in the
   iPad-landscape / small-desktop range without sharp breakpoint jumps. */
.jvz-shop__main ul.products,
.jvz-shop__main ul.products.columns-4,
.jvz-shop__main ul.products.columns-3,
.jvz-shop__main ul.products.columns-2 {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--jvz-s-6) !important;
	margin: 0 0 var(--jvz-s-6) !important;
	padding: 0 !important;
	list-style: none !important;
}
.jvz-shop__main ul.products li.jvz-pcard-li {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}
/* Cancel `:nth-child` clears that classic Woo loops add for floated cards */
.jvz-shop__main ul.products li.jvz-pcard-li::before,
.jvz-shop__main ul.products li.jvz-pcard-li::after { display: none !important; }

/* Pagination styling — keep WC's default markup, restyle */
.jvz-shop__main .woocommerce-pagination {
	margin: 0 0 var(--jvz-s-2);
	border: 0;
	padding: 0;
	font-family: var(--jvz-font-display);
}
.jvz-shop__main .woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	gap: 4px;
	padding: 0;
	margin: 0;
	border: 0;
	list-style: none;
}
.jvz-shop__main .woocommerce-pagination ul.page-numbers li { border: 0; padding: 0; margin: 0; }
.jvz-shop__main .woocommerce-pagination ul.page-numbers .page-numbers {
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: var(--jvz-r-md);
	background: #fff;
	color: var(--jvz-navy);
	border: 1px solid var(--jvz-line);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--jvz-fw-bold);
	font-size: 13px;
	text-decoration: none;
	transition: border-color .15s, background .15s;
}
.jvz-shop__main .woocommerce-pagination ul.page-numbers .page-numbers:hover { border-color: var(--jvz-navy); }
.jvz-shop__main .woocommerce-pagination ul.page-numbers .current {
	background: var(--jvz-navy);
	color: #fff;
	border-color: var(--jvz-navy);
}

/* ============================================================
   Product card (Design 2.0) — full-control namespace .jvz-pcard*
   Sits inside <li class="product jvz-pcard-li"> — we override the
   inherited .product styling aggressively.
   ============================================================ */

/* Reset legacy .product/.product-inner styling on our wrapper */
ul.products li.jvz-pcard-li {
	background: transparent !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	overflow: visible !important;
	list-style: none !important;
	margin-bottom: var(--jvz-s-6);
}
ul.products li.jvz-pcard-li::before,
ul.products li.jvz-pcard-li::after { content: none !important; }
ul.products li.jvz-pcard-li > .product-inner { all: unset; }

.jvz-pcard {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--jvz-line);
	border-radius: var(--jvz-r-lg);
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
	box-shadow: var(--jvz-shadow-sm);
	font-family: var(--jvz-font-body);
	color: var(--jvz-fg-1);
	height: 100%;
}
.jvz-pcard:hover {
	border-color: var(--jvz-navy);
	box-shadow: var(--jvz-shadow-md);
	transform: translateY(-2px);
}

/* --- Media -------------------------------------------------- */
.jvz-pcard__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--jvz-cream-2);
}
.jvz-pcard__media .jvz-pcard__img,
.jvz-pcard__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
	margin: 0 !important;
	max-width: none !important;
	padding: 0 !important;
}
.jvz-pcard:hover .jvz-pcard__media img {
	transform: scale(1.04);
}

/* --- Badges ------------------------------------------------- */
.jvz-pcard__badges {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 2;
}
.jvz-pcard__badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: var(--jvz-r-pill);
	font-family: var(--jvz-font-display);
	font-weight: var(--jvz-fw-bold);
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.01em;
}
.jvz-pcard__badge--sale {
	background: var(--jvz-orange);
	color: #fff;
}
.jvz-pcard__badge--new {
	background: var(--jvz-navy);
	color: #fff;
}
.jvz-pcard__badge--bestseller {
	background: #fff;
	color: var(--jvz-navy);
	border: 1px solid var(--jvz-line);
}

/* --- Body --------------------------------------------------- */
.jvz-pcard__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 12px 16px 16px;
}

.jvz-pcard__tagrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
}
.jvz-pcard__tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	border-radius: var(--jvz-r-pill);
	font-family: var(--jvz-font-display);
	font-weight: var(--jvz-fw-bold);
	font-size: 10px;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: rgba(0, 21, 57, 0.05);
	color: var(--jvz-navy);
}
.jvz-pcard__tag--pvc      { background: rgba(1, 111, 208, 0.10); color: var(--jvz-blue); }
.jvz-pcard__tag--laminaat { background: rgba(255, 126, 0, 0.10); color: var(--jvz-orange); }

.jvz-pcard__title {
	margin: 0;
	font-family: var(--jvz-font-display);
	font-weight: var(--jvz-fw-bold);
	font-size: 15px;
	line-height: 1.35;
	color: var(--jvz-navy);
	letter-spacing: -0.005em;
}
.jvz-pcard__title a {
	color: inherit;
	text-decoration: none;
}
.jvz-pcard__title a:hover { color: var(--jvz-blue); }

/* --- Swatch dots -------------------------------------------- */
.jvz-pcard__swatches {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 10px 0 0;
}
.jvz-pcard__swatch {
	width: 18px;
	height: 18px;
	border-radius: var(--jvz-r-pill);
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px var(--jvz-line);
	display: inline-block;
}
/* Per-swatch colors are now applied inline via `style="background-color:…"`
   from the `kleur_swatch` ACF field on each pa_decor / pa_kleur term. */
.jvz-pcard__swatch-more {
	font-family: var(--jvz-font-display);
	font-weight: var(--jvz-fw-bold);
	font-size: 11px;
	color: var(--jvz-fg-3);
	margin-left: 4px;
}

/* --- Footer (price + CTA) ----------------------------------- */
.jvz-pcard__footer {
	margin-top: auto;
	padding-top: 12px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
}
.jvz-pcard__pricing { min-width: 0; }

.jvz-pcard__price-row {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}
/* WC's own .price wrapping inside our slot */
.jvz-pcard__price .price {
	margin: 0;
	font-family: var(--jvz-font-display);
	font-weight: var(--jvz-fw-bold);
	font-size: 22px;
	line-height: 1;
	color: var(--jvz-navy);
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}
.jvz-pcard__price .woocommerce-Price-amount {
	font-family: inherit;
	font-weight: inherit;
	font-size: inherit;
	color: inherit;
}
.jvz-pcard__price del {
	color: var(--jvz-fg-4) !important;
	font-size: 11px;
	font-weight: var(--jvz-fw-regular);
	margin-left: 4px;
	text-decoration: line-through;
	opacity: 1 !important;
}
.jvz-pcard__price del .woocommerce-Price-amount {
	font-size: 11px !important;
	color: inherit !important;
}
.jvz-pcard__price ins {
	background: transparent !important;
	text-decoration: none !important;
}
.jvz-pcard__price-unit {
	font-family: var(--jvz-font-body);
	font-size: 11px;
	color: var(--jvz-fg-3);
	white-space: nowrap;
}
.jvz-pcard__price-pack {
	font-family: var(--jvz-font-body);
	font-size: 11px;
	color: var(--jvz-fg-3);
	margin-top: 2px;
	line-height: 1.3;
}

.jvz-pcard__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 14px;
	border-radius: var(--jvz-r-pill);
	background: var(--jvz-blue);
	color: #fff;
	font-family: var(--jvz-font-display);
	font-weight: var(--jvz-fw-bold);
	font-size: 12px;
	line-height: 1;
	text-decoration: none;
	box-shadow: var(--jvz-shadow-cta);
	white-space: nowrap;
	transition: background .15s ease, transform .05s ease;
}
.jvz-pcard__cta:hover {
	background: var(--jvz-blue-hover);
	color: #fff;
}
.jvz-pcard__cta:active { transform: translateY(1px); }
.jvz-pcard__cta-icon { display: inline-block; flex: 0 0 14px; }

/* ============================================================
   Filter sidebar restyle (Design 2.0)
   Wraps the existing .custom-filter-container that hosts
   Search & Filter Pro shortcodes.
   ============================================================ */

.custom-filter-container {
	background: #fff;
	border: 1px solid var(--jvz-line);
	border-radius: var(--jvz-r-lg);
	padding: var(--jvz-s-5);
	box-shadow: var(--jvz-shadow-xs);
	font-family: var(--jvz-font-body);
}

.custom-filter-title {
	font-family: var(--jvz-font-display);
	font-weight: var(--jvz-fw-bold);
	font-size: 16px;
	line-height: 1.2;
	color: var(--jvz-navy);
	margin: 0 0 var(--jvz-s-3);
	padding-bottom: var(--jvz-s-3);
	border-bottom: 1px solid var(--jvz-line-soft);
	display: flex;
	align-items: center;
	gap: 8px;
}
.custom-filter-title::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001539' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6h16M4 12h16M4 18h16'/><circle cx='9' cy='6' r='2' fill='%23fff'/><circle cx='16' cy='12' r='2' fill='%23fff'/><circle cx='7' cy='18' r='2' fill='%23fff'/></svg>");
	background-size: contain;
	background-repeat: no-repeat;
}

.custom-filters > .search-filter-base {
	margin: 0 0 var(--jvz-s-3);
	padding-bottom: var(--jvz-s-3);
	border-bottom: 1px solid var(--jvz-line-soft);
}
.custom-filters > .search-filter-base:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

/* Combobox chrome — rounder corners, token colors, more breathing room */
.custom-filters .search-filter-component-combobox {
	border-radius: var(--jvz-r-md) !important;
	border: 1px solid var(--jvz-line) !important;
	background: #fff !important;
	min-height: 44px;
	transition: border-color .15s, box-shadow .15s;
}
.custom-filters .search-filter-component-combobox:hover {
	border-color: var(--jvz-navy) !important;
}
.custom-filters .search-filter-component-combobox--has-selection,
.custom-filters .search-filter-component-combobox:focus-within {
	border-color: var(--jvz-blue) !important;
	box-shadow: 0 0 0 3px rgba(1,111,208,0.12);
}
.custom-filters .search-filter-component-combobox__actions-input {
	font-family: var(--jvz-font-display) !important;
	font-weight: var(--jvz-fw-bold) !important;
	font-size: 13px !important;
	color: var(--jvz-navy) !important;
}
.custom-filters .search-filter-component-combobox__actions-input::placeholder {
	color: var(--jvz-fg-3) !important;
	font-weight: var(--jvz-fw-medium) !important;
}

/* Range slider styling (price) — Search & Filter Pro range field */
.custom-filters .search-filter-component-range__track,
.custom-filters .search-filter-component-range-slider__track {
	background: var(--jvz-line) !important;
	height: 4px !important;
	border-radius: var(--jvz-r-pill) !important;
}
.custom-filters .search-filter-component-range__track-active,
.custom-filters .search-filter-component-range-slider__track-active {
	background: var(--jvz-blue) !important;
	height: 4px !important;
}
.custom-filters .search-filter-component-range__handle,
.custom-filters .search-filter-component-range-slider__handle {
	background: var(--jvz-blue) !important;
	border: 3px solid #fff !important;
	box-shadow: 0 2px 6px rgba(1,111,208,.35) !important;
	width: 18px !important;
	height: 18px !important;
}

/* "Filters wissen" reset link — make it look like the mockup's blue text-link */
.custom-filters .search-filter-component-button,
.custom-filters .search-filter-action--clear-all,
.custom-filters [data-search-filter-action="clear-all"] {
	background: transparent !important;
	color: var(--jvz-blue) !important;
	border: 0 !important;
	padding: 0 !important;
	font-family: var(--jvz-font-display) !important;
	font-weight: var(--jvz-fw-bold) !important;
	font-size: 12px !important;
	text-decoration: underline;
	cursor: pointer;
}
.custom-filters .search-filter-component-button:hover {
	color: var(--jvz-blue-hover) !important;
}

/* ============================================================
   Custom Filter sidebar (Design 2.0) — replaces Search & Filter Pro
   ============================================================ */

/* Mobile bottom-sheet helpers — hidden on desktop. */
.jvz-shop__mobile-filterbar,
.jvz-filter__backdrop,
.jvz-filter__close,
.jvz-filter__actions { display: none; }

.jvz-filter {
	background: #fff;
	border: 1px solid var(--jvz-line);
	border-radius: var(--jvz-r-lg);
	padding: var(--jvz-s-5);
	box-shadow: var(--jvz-shadow-xs);
	font-family: var(--jvz-font-body);
	color: var(--jvz-fg-2);
	align-self: start;
	position: sticky;
	top: var(--jvz-s-4);
	/* Cap height to viewport so an overflowing facet list scrolls inside the
	 * sidebar instead of running below the fold. The CSS var is owned by JS
	 * (vloerplus-filter.js → updateFilterMaxHeight()) and accounts for the
	 * sticky-top offset + admin-bar height. The fallback keeps it usable
	 * even if the JS hasn't run yet. */
	max-height: var(--jvz-filter-max-h, calc(100vh - 2 * var(--jvz-s-4)));
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Reserve gutter so content doesn't shift when the scrollbar appears /
	 * disappears (e.g. switching from few facets to many). */
	scrollbar-gutter: stable;
	/* Firefox: thin bar, hidden by default, fades in on interaction. */
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
	transition: scrollbar-color .2s ease;
}
.jvz-filter:hover,
.jvz-filter:focus-within {
	scrollbar-color: rgba(0, 0, 0, .18) transparent;
}

/* WebKit: floating-thumb pattern. The track is wider than the visible
 * thumb because the thumb uses a transparent border + background-clip
 * padding-box trick — that gives breathing room on both sides without
 * the thumb butting against the content or the panel edge. The thumb
 * only fades in on hover/focus, matching the Firefox behavior above. */
.jvz-filter::-webkit-scrollbar {
	width: 10px;
	background: transparent;
}
.jvz-filter::-webkit-scrollbar-track {
	background: transparent;
	margin: 12px 0;
}
.jvz-filter::-webkit-scrollbar-thumb {
	background: transparent;
	border: 3px solid transparent;
	background-clip: padding-box;
	border-radius: 999px;
	transition: background-color .2s ease;
}
.jvz-filter:hover::-webkit-scrollbar-thumb,
.jvz-filter:focus-within::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, .18);
}
.jvz-filter::-webkit-scrollbar-thumb:hover {
	background-color: rgba(0, 0, 0, .32);
}
.jvz-filter::-webkit-scrollbar-thumb:active {
	background-color: rgba(0, 0, 0, .42);
}

.jvz-filter__form { margin: 0; padding: 0; }

/* Mockup has no divider under "Filters/Reset" — first FilterGroup's own
   border-bottom does the visual separation. !important forces over legacy
   theme rules that set header element to display:block. */
.jvz-filter .jvz-filter__header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px;
	/* margin / padding handled per-context (desktop = none, mobile sheet = adds breathing room). */
}
.jvz-filter__title {
	margin: 0;
	font-family: var(--jvz-font-display);
	font-weight: var(--jvz-fw-bold);
	font-size: 16px;
	color: var(--jvz-navy);
	display: inline-flex; align-items: center; gap: 8px;
}
.jvz-filter__title::before {
	content: "";
	width: 16px; height: 16px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001539' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6h16M4 12h16M4 18h16'/><circle cx='9' cy='6' r='2' fill='%23fff'/><circle cx='16' cy='12' r='2' fill='%23fff'/><circle cx='7' cy='18' r='2' fill='%23fff'/></svg>");
	background-size: contain; background-repeat: no-repeat;
}
.jvz-filter__reset {
	font-family: var(--jvz-font-display);
	font-weight: var(--jvz-fw-bold);
	font-size: 12px;
	color: var(--jvz-blue);
	text-decoration: none;
	cursor: pointer;
}
.jvz-filter__reset:hover { color: var(--jvz-blue-hover); text-decoration: underline; }

/* Mockup uses py-4 (16px) on FilterGroup → matches --jvz-s-4 */
.jvz-filter__group {
	border: 0; padding: var(--jvz-s-4) 0;
	border-bottom: 1px solid var(--jvz-line-soft);
	margin: 0;
}
.jvz-filter__group:last-of-type { border-bottom: 0; padding-bottom: 0; }
.jvz-filter__legend {
	display: block;
	font-family: var(--jvz-font-display);
	font-weight: var(--jvz-fw-bold);
	font-size: 14px;
	color: var(--jvz-navy);
	margin: 0 0 var(--jvz-s-3);
	padding: 0;
	width: 100%;
}

/* Checkbox lists */
.jvz-filter__check-list { display: flex; flex-direction: column; gap: 2px; }
.jvz-filter__check-list--scroll { max-height: 220px; overflow-y: auto; padding-right: 4px; }
.jvz-filter__check-list--scroll::-webkit-scrollbar { width: 6px; }
.jvz-filter__check-list--scroll::-webkit-scrollbar-thumb { background: var(--jvz-line); border-radius: 3px; }

.jvz-filter__check {
	display: grid;
	grid-template-columns: 18px 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 5px 4px;
	cursor: pointer;
	border-radius: 6px;
	font-size: 13px;
	color: var(--jvz-fg-2);
	transition: background .12s;
}
.jvz-filter__check:hover { background: var(--jvz-bg-soft); }
.jvz-filter__check input[type="checkbox"] {
	position: absolute; opacity: 0; pointer-events: none;
}
.jvz-filter__check-box {
	width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--jvz-line);
	background: #fff; display: inline-flex; align-items: center; justify-content: center;
	transition: background .12s, border-color .12s;
}
.jvz-filter__check-box::after {
	content: "";
	width: 10px; height: 6px;
	border-left: 2px solid #fff; border-bottom: 2px solid #fff;
	transform: rotate(-45deg) translate(1px, -1px);
	opacity: 0;
}
.jvz-filter__check.is-checked .jvz-filter__check-box,
.jvz-filter__check input:checked ~ .jvz-filter__check-box {
	background: var(--jvz-blue); border-color: var(--jvz-blue);
}
.jvz-filter__check.is-checked .jvz-filter__check-box::after,
.jvz-filter__check input:checked ~ .jvz-filter__check-box::after { opacity: 1; }
.jvz-filter__check-label {
	font-family: var(--jvz-font-body);
	font-weight: var(--jvz-fw-regular);
}
.jvz-filter__check-count {
	font-size: 11px;
	color: var(--jvz-fg-4);
	font-variant-numeric: tabular-nums;
}
.jvz-filter__more {
	font-size: 11px;
	color: var(--jvz-fg-3);
	margin: 6px 4px 0;
	font-style: italic;
}

/* Swatch-grid (kleur) — 3-col cards with colored dot + label */
.jvz-filter__group--swatches .jvz-filter__swatch-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 4px;
}
.jvz-filter__swatch-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 8px 4px;
	border-radius: var(--jvz-r-sm);
	border: 1px solid var(--jvz-line);
	background: #fff;
	cursor: pointer;
	transition: border-color .15s, background .15s;
	position: relative;
}
.jvz-filter__swatch-card:hover { border-color: var(--jvz-navy); }
.jvz-filter__swatch-card.is-checked,
.jvz-filter__swatch-card:has(input:checked) {
	border-color: var(--jvz-navy);
	background: var(--jvz-cream);
}
.jvz-filter__swatch-card input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.jvz-filter__swatch-dot {
	width: 28px;
	height: 28px;
	border-radius: var(--jvz-r-pill);
	border: 1px solid rgba(0, 0, 0, 0.08);
	display: inline-block;
}
.jvz-filter__swatch-label {
	font-family: var(--jvz-font-display);
	font-weight: var(--jvz-fw-medium);
	font-size: 11px;
	line-height: 1; /* default 1.4 left ~5px of phantom descender below the glyph,
	                   which read as extra padding under the label. */
	color: var(--jvz-fg-2);
	text-align: center;
}
.jvz-filter__swatch-card.is-checked .jvz-filter__swatch-label,
.jvz-filter__swatch-card:has(input:checked) .jvz-filter__swatch-label {
	color: var(--jvz-navy);
	font-weight: var(--jvz-fw-bold);
}

/* Toggles */
.jvz-filter__toggle {
	display: grid;
	grid-template-columns: 36px 1fr;
	align-items: center;
	gap: 12px;
	padding: 6px 4px;
	cursor: pointer;
	font-size: 13px;
	color: var(--jvz-fg-2);
}
.jvz-filter__toggle input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.jvz-filter__toggle-track {
	width: 36px; height: 20px; border-radius: 9999px; background: #E5E5E5; position: relative;
	transition: background .15s;
}
.jvz-filter__toggle-track::after {
	content: ""; position: absolute; top: 2px; left: 2px;
	width: 16px; height: 16px; border-radius: 9999px; background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .15s;
}
.jvz-filter__toggle.is-on .jvz-filter__toggle-track,
.jvz-filter__toggle input:checked ~ .jvz-filter__toggle-track {
	background: var(--jvz-blue);
}
.jvz-filter__toggle.is-on .jvz-filter__toggle-track::after,
.jvz-filter__toggle input:checked ~ .jvz-filter__toggle-track::after { left: 18px; }
.jvz-filter__toggle-label {
	font-family: var(--jvz-font-body);
	font-weight: var(--jvz-fw-medium);
}
.jvz-filter__toggle-count {
	margin-left: auto;
	font-size: 11px;
	color: var(--jvz-fg-4);
	font-variant-numeric: tabular-nums;
}
.jvz-filter__toggle {
	grid-template-columns: 36px 1fr auto;
}

/* When a currently-active option produces zero results in the current
 * context, soften it so the user sees the over-filtering immediately. */
.jvz-filter__check.is-empty .jvz-filter__check-label,
.jvz-filter__check.is-empty .jvz-filter__check-count,
.jvz-filter__swatch-card.is-empty .jvz-filter__swatch-label,
.jvz-filter__toggle.is-empty .jvz-filter__toggle-label,
.jvz-filter__toggle.is-empty .jvz-filter__toggle-count {
	opacity: .55;
}
.jvz-filter__check.is-empty .jvz-filter__check-count {
	color: #c0392b;
	opacity: 1;
}

/* Price slider */
.jvz-filter__price input[type="range"] {
	-webkit-appearance: none; appearance: none;
	width: 100%; height: 4px;
	background: var(--jvz-line);
	border-radius: 9999px;
	margin: 8px 0;
}
.jvz-filter__price input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 18px; height: 18px; border-radius: 9999px;
	background: var(--jvz-blue); border: 3px solid #fff;
	box-shadow: 0 2px 6px rgba(1,111,208,.35); cursor: pointer;
}
.jvz-filter__price input[type="range"]::-moz-range-thumb {
	width: 18px; height: 18px; border-radius: 9999px;
	background: var(--jvz-blue); border: 3px solid #fff; cursor: pointer;
}
.jvz-filter__price-values {
	display: flex; justify-content: space-between; align-items: center;
	font-family: var(--jvz-font-display);
	font-size: 12px; color: var(--jvz-fg-3);
}
.jvz-filter__price-values strong { color: var(--jvz-navy); font-weight: var(--jvz-fw-bold); }
.jvz-filter__price-hint {
	margin-top: 6px;
	font: var(--jvz-fw-medium) 11px/1.35 var(--jvz-font-body);
	color: var(--jvz-fg-3);
}

/* No-JS submit */
.jvz-filter__submit {
	margin-top: var(--jvz-s-3);
	width: 100%; padding: 12px 16px;
	background: var(--jvz-blue); color: #fff; border: 0;
	border-radius: var(--jvz-r-pill);
	font-family: var(--jvz-font-display);
	font-weight: var(--jvz-fw-bold); font-size: 14px;
	cursor: pointer;
}

/* ============================================================
   Result-bar above the product grid
   ============================================================ */
.jvz-result-bar {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--jvz-s-4);
	margin: 0 0 var(--jvz-s-4);
	padding: 0 0 var(--jvz-s-3);
	border-bottom: 1px solid var(--jvz-line-soft);
}
.jvz-result-bar__count {
	font-family: var(--jvz-font-display);
	font-weight: var(--jvz-fw-bold); font-size: 14px;
	color: var(--jvz-navy);
}
.jvz-result-bar__sort {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 13px; color: var(--jvz-fg-2);
}
.jvz-result-bar__sort select {
	font-family: var(--jvz-font-display);
	font-weight: var(--jvz-fw-bold); font-size: 13px;
	color: var(--jvz-navy);
	background: #fff;
	border: 1px solid var(--jvz-line);
	border-radius: var(--jvz-r-md);
	padding: 8px 30px 8px 12px;
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001539' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 14px;
}

/* ============================================================
   Active filter chips (above grid)
   ============================================================ */
.jvz-active-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 0 0 var(--jvz-s-4);
}
.jvz-active-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 14px;
	border-radius: var(--jvz-r-pill);
	background: var(--jvz-navy);
	color: #fff;
	border: 0;
	cursor: pointer;
	font-family: var(--jvz-font-display);
	font-weight: var(--jvz-fw-bold);
	font-size: 12px;
	line-height: 1;
	transition: background .12s;
}
.jvz-active-chip:hover { background: var(--jvz-navy-700); }
.jvz-active-chip__x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(255,255,255,0.15);
	font-size: 14px;
	line-height: 1;
}
.jvz-active-chips__clear {
	background: transparent;
	border: 0;
	color: var(--jvz-blue);
	cursor: pointer;
	font-family: var(--jvz-font-display);
	font-weight: var(--jvz-fw-bold);
	font-size: 12px;
	text-decoration: underline;
	padding: 6px 8px;
}
.jvz-active-chips__clear:hover { color: var(--jvz-blue-hover); }

/* ============================================================
   Loading state on grid
   ============================================================ */
ul.products.jvz-loading {
	opacity: .55;
	pointer-events: none;
	transition: opacity .15s;
}

/* ============================================================
   Mobile (< 900px): stack everything vertically, no double padding,
   filter becomes collapsible above the grid.
   ============================================================ */
@media (max-width: 900px) {
	/* POP-header: 1-col stack — minimale top-spacing voor "Productoverzicht" eyebrow */
	.jvz-pop-header { padding-top: 0; }
	.jvz-pop-header__inner {
		grid-template-columns: 1fr;
		gap: var(--jvz-s-4);
		margin-top: 0;
	}
	.jvz-pop-header__visual { height: 130px; }
	.jvz-pop-header__title { font-size: clamp(28px, 8vw, 36px); margin-top: var(--jvz-s-1); }
	/* Breadcrumb tighter on mobile (legacy adds 16px py — te ruim boven eyebrow) */
	.woocommerce-breadcrumb { padding: 4px 0 6px !important; font-size: 12px !important; }

	/* Chips: horizontal scroll, break out past .wc-inner's 24px right-padding
	   so the strip touches the viewport's right edge (cleaner mobile feel). */
	.jvz-pop-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: var(--jvz-s-2);
		/* Bleed to the right viewport edge — must match the .wc-inner mobile
		 * padding (16px) exactly. With the wrapper padding it was 24px, but we
		 * tightened that on mobile so this needs to follow or the chips poke
		 * 8px past the viewport and create a horizontal scroll. */
		margin-right: -16px;
		padding-right: 16px;
	}
	.jvz-pop-chips::-webkit-scrollbar { display: none; }
	.jvz-pop-chip { white-space: nowrap; flex: 0 0 auto; }

	/* Shop layout: 1 column, filter ABOVE grid */
	.jvz-shop {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--jvz-s-4);
		padding: var(--jvz-s-3) 0 var(--jvz-s-6);
	}
	.jvz-shop__main { width: 100%; min-width: 0; }

	/* Filter: bottom-sheet pattern. Hidden off-screen by default; slides up
	   from the bottom edge when the FAB is tapped. Backdrop dims the page. */
	.jvz-filter {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		width: 100%;
		height: 90vh;
		max-height: 90vh;
		overflow: hidden;            /* outer doesn't scroll — the form does */
		display: flex;
		flex-direction: column;
		background: #fff;
		border-radius: 20px 20px 0 0;
		box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
		padding: 16px var(--jvz-s-4) 0;
		overscroll-behavior: contain;
		transform: translateY(100%);
		transition: transform .3s ease;
		z-index: 99999;
	}
	body.jvz-filter-sheet-open .jvz-filter {
		transform: translateY(0);
	}
	.jvz-filter[data-jvz-collapsible] .jvz-filter__form > *:not(.jvz-filter__header) {
		display: block;
	}
	.jvz-filter__title::after { content: ''; }
	.jvz-filter__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 4px 0 14px;
		border-bottom: 1px solid var(--jvz-line);
		margin-bottom: 0;
	}
	.jvz-filter__close {
		background: transparent;
		border: 0;
		color: var(--jvz-fg-2);
		padding: 4px;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
	}

	.jvz-filter__close { display: inline-flex; }

	/* Hide the header Reset on mobile — it lives in the sticky footer-bar instead. */
	.jvz-filter .jvz-filter__reset { display: none; }

	/* Collapsible groups on mobile — legend acts as a toggle row with chevron. */
	.jvz-filter__group .jvz-filter__legend {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		cursor: pointer;
		user-select: none;
	}
	.jvz-filter__legend-chev {
		display: inline-flex;
		color: var(--jvz-fg-3);
		transition: transform .2s ease;
	}
	.jvz-filter__group.is-collapsed > *:not(.jvz-filter__legend) {
		display: none !important;
	}
	/* Drop the legend's bottom-margin when collapsed — only the title row is
	   visible, so the 12px gap underneath is dead space between sections. */
	.jvz-filter__group.is-collapsed .jvz-filter__legend {
		margin-bottom: 0;
	}
	.jvz-filter__group.is-collapsed .jvz-filter__legend-chev {
		transform: rotate(180deg);
	}

	/* Sheet body scrolls; action-bar stays pinned at the bottom of the sheet
	   thanks to flex-column layout on `.jvz-filter` (form = flex:1, this = auto). */
	.jvz-filter .jvz-filter__form {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overflow-x: hidden; /* prevents the horizontal scrollbar flash during expand/collapse reflow */
		padding-bottom: 16px;
	}
	.jvz-filter__actions {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		flex: 0 0 auto;
		margin: 0 -16px;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0));
		background: #fff;
		border-top: 1px solid var(--jvz-line);
	}
	.jvz-filter__action-reset {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 48px;
		padding: 0 20px;
		font: var(--jvz-fw-bold) 14px/1 var(--jvz-font-display);
		color: var(--jvz-fg-2);
		text-decoration: none;
		border-radius: var(--jvz-r-pill);
		border: 1px solid var(--jvz-line);
		box-sizing: border-box;
	}
	.jvz-filter__action-show {
		flex: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		background: var(--jvz-blue);
		color: #fff;
		border: 0;
		border-radius: var(--jvz-r-pill);
		height: 48px;
		font: var(--jvz-fw-bold) 15px/1 var(--jvz-font-display);
		box-shadow: var(--jvz-shadow-cta);
		cursor: pointer;
	}

	/* Inline "Filters" pill at the top of the product loop (matches mockup). */
	.jvz-shop__mobile-filterbar {
		display: block;
		margin: 0 0 var(--jvz-s-3);
	}
	.jvz-filter__trigger {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		background: #fff;
		color: var(--jvz-navy);
		border: 1px solid var(--jvz-line);
		border-radius: var(--jvz-r-pill);
		padding: 0 16px;
		height: 40px;
		font: var(--jvz-fw-bold) 13px/1 var(--jvz-font-display);
		cursor: pointer;
		transition: border-color .15s, background .15s;
	}
	.jvz-filter__trigger-label {
		display: inline-flex;
		align-items: center;
		gap: 8px;
	}
	.jvz-filter__trigger:hover { border-color: var(--jvz-navy); }
	.jvz-filter__trigger-badge {
		background: var(--jvz-orange);
		color: #fff;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		border-radius: 999px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 11px;
		font-weight: var(--jvz-fw-bold);
	}
	.jvz-filter__trigger-chev {
		margin-left: 4px;
		opacity: .7;
	}
	.jvz-filter__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0);
		opacity: 0;
		pointer-events: none;
		transition: opacity .3s ease, background .3s ease;
		z-index: 99998;
	}
	body.jvz-filter-sheet-open .jvz-filter__backdrop {
		background: rgba(0, 0, 0, .45);
		opacity: 1;
		pointer-events: auto;
	}

	/* Product grid: 2-col already on phones (matches mockup),
	   image stacks tighter so 2 cards fit comfortably on 375. */
	.jvz-shop__main ul.products,
	.jvz-shop__main ul.products.columns-2,
	.jvz-shop__main ul.products.columns-3,
	.jvz-shop__main ul.products.columns-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--jvz-s-3) !important;
	}

	/* Hide the lifestyle visual on mobile — mockup omits it for vertical economy */
	.jvz-pop-header__visual { display: none; }

	/* Hide the round Bekijk CTA on mobile cards — entire card is tap target.
	   Price block goes full-width below, fits the narrow card. */
	.jvz-pcard__cta { display: none; }
	.jvz-pcard__footer { display: block; }
	.jvz-pcard__pricing { width: 100%; }

	/* Tag chip slightly smaller to fit narrower card */
	.jvz-pcard__tag { font-size: 9px; padding: 2px 7px; }
	.jvz-pcard__title { font-size: 13px; line-height: 1.3; }
	.jvz-pcard__price .price { font-size: 18px; }
	.jvz-pcard__swatch { width: 14px; height: 14px; }
	.jvz-pcard__swatches { gap: 4px; margin-top: 6px; }

	/* Card body: tighter on mobile */
	.jvz-pcard__body { padding: 8px 10px 12px; }
	.jvz-pcard__media { aspect-ratio: 1 / 1; }

	/* Sale badge smaller */
	.jvz-pcard__badge { font-size: 9px; padding: 2px 7px; }
	.jvz-pcard__badges { top: 8px; left: 8px; gap: 4px; }

	/* Result-bar: keep count + sort on same row but smaller */
	.jvz-result-bar {
		flex-wrap: wrap;
		gap: var(--jvz-s-3);
	}
	.jvz-result-bar__sort select {
		font-size: 12px;
		padding: 6px 28px 6px 10px;
	}

	/* Active chips: scrollable single line */
	.jvz-active-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.jvz-active-chips::-webkit-scrollbar { display: none; }
	.jvz-active-chip, .jvz-active-chips__clear { flex: 0 0 auto; white-space: nowrap; }

	/* Card body padding tighter on phones */
	.jvz-pcard__body { padding: 10px 14px 14px; }
	.jvz-pcard__title { font-size: 14px; }

	/* Help-block: stack copy + actions */
	.jvz-pop-help__inner {
		grid-template-columns: 1fr;
		padding: var(--jvz-s-5);
	}
	.jvz-pop-help__actions { flex-direction: column; }
	.jvz-pop-help__actions .jvz-btn { width: 100%; }

	/* FAQ: 1-col */
	.jvz-pop-faq__grid { grid-template-columns: minmax(0, 1fr); }

	/* Block any element from forcing horizontal overflow.
	   NOTE: .jvz-pop-chips intentionally NOT in this list — it uses negative
	   margin-right to bleed past .wc-inner's right padding (touches viewport edge). */
	.jvz-pop-header__visual,
	.jvz-shop,
	.jvz-pop-help,
	.jvz-pop-faq { max-width: 100%; }
}

/* No explicit small-desktop override needed — auto-fill above handles
   901-1199 (gives 2-col) and 1280+ (3-col) smoothly. */