/* ==========================================================================
   Jolines Child Theme — Custom CSS
   Mobile-first responsive design
   ========================================================================== */

/* --------------------------------------------------------------------------
   Merkkleur-overrides — Impreza's standaard-accent (#646cfd, paarsblauw)
   vervangen door het merk-donkerbruin. Zichtbaar op o.a. de PDP-accordion
   koppen (Product Informatie / Eigenschappen / Bezorging).
   -------------------------------------------------------------------------- */
.single-product .w-tabs-section-header,
.single-product .w-tabs-section-header.active,
.single-product .w-tabs-section-title,
.single-product .w-tabs-list-h .w-tabs-item.active a {
	color: #3b3029 !important;
}

/* Footer-top blok had een koele grijs-blauwe gradient (#f3f5fb, Impreza's
   color_content_bg_alt) — vervangen door een warme crème die bij de rest
   van de site past. us_custom_* is een Impreza-hash; #page-footer +
   .height_medium is de stabiele fallback voor hetzelfde bovenste blok. */
#page-footer .l-section.us_custom_bb73877c,
#page-footer .l-section.height_medium {
	background-image: linear-gradient(#F5EEE5, #FFFFFF) !important;
}

/* --------------------------------------------------------------------------
   CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
	--jol-primary: #D4A57A;
	--jol-primary-dark: #C08D5E;
	--jol-primary-light: #E8C9A8;
	--jol-bg: #FDFBF9;
	--jol-text: #3D3530;
	--jol-heading: #2C2420;
	--jol-footer-bg: #2C2420;
	--jol-footer-text: #E8C9A8;
	--jol-radius: 25px;
	--jol-radius-sm: 12px;
	--jol-shadow: 0 2px 12px rgba(44, 36, 32, 0.08);
	--jol-shadow-hover: 0 6px 24px rgba(44, 36, 32, 0.14);
	--jol-transition: 0.3s ease;
	--jol-container: 1200px;
}

/* --------------------------------------------------------------------------
   Base / Typography
   -------------------------------------------------------------------------- */
body {
	background-color: var(--jol-bg);
	color: var(--jol-text);
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.w-blog-post-title,
.woocommerce div.product .product_title,
.w-post-title {
	font-family: 'Playfair Display', serif;
	color: var(--jol-heading);
	font-weight: 700;
}

h1 { font-weight: 700; }
h2, h3 { font-weight: 600; }

a {
	color: var(--jol-primary-dark);
	transition: color var(--jol-transition);
}

a:hover {
	color: var(--jol-heading);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.jol-container {
	max-width: var(--jol-container);
	margin: 0 auto;
	padding: 0 1rem;
}

.jol-section {
	padding: 2.5rem 0;
	position: relative;
}

.jol-section + .jol-section {
	border-top: 1px solid rgba(212, 165, 122, 0.12);
}

.jol-section__title {
	font-family: 'Playfair Display', serif;
	font-size: 1.6rem;
	color: var(--jol-heading);
	margin-bottom: 1.2rem;
	text-align: center;
}

.jol-section__header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 1.2rem;
}

.jol-section__header .jol-section__title {
	text-align: left;
	margin-bottom: 0;
}

.jol-section__link {
	font-family: 'Poppins', sans-serif;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--jol-primary-dark);
	white-space: nowrap;
}

.jol-section__link:hover {
	color: var(--jol-heading);
}

/* --------------------------------------------------------------------------
   Buttons — Custom
   -------------------------------------------------------------------------- */
.jol-btn {
	display: inline-block;
	padding: 0.75rem 2rem;
	border-radius: var(--jol-radius);
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	text-align: center;
	transition: all var(--jol-transition);
	cursor: pointer;
	border: 2px solid transparent;
}

.jol-btn--primary {
	background-color: var(--jol-primary);
	color: #fff;
	border-color: var(--jol-primary);
}

.jol-btn--primary:hover {
	background-color: var(--jol-primary-dark);
	border-color: var(--jol-primary-dark);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--jol-shadow-hover);
}

.jol-btn--outline {
	background-color: transparent;
	color: #fff;
	border-color: #fff;
}

.jol-btn--outline:hover {
	background-color: #fff;
	color: var(--jol-heading);
	transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Buttons — Impreza / WooCommerce
   -------------------------------------------------------------------------- */
.w-btn,
.us-btn-style_1,
.us-btn-style_2,
button[type="submit"],
.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	border-radius: var(--jol-radius) !important;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	letter-spacing: 0.02em;
	transition: all var(--jol-transition);
}

.w-btn.color_primary,
.us-btn-style_1,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	background-color: var(--jol-primary) !important;
	color: #fff !important;
	border: 2px solid var(--jol-primary) !important;
}

.w-btn.color_primary:hover,
.us-btn-style_1:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
	background-color: var(--jol-primary-dark) !important;
	border-color: var(--jol-primary-dark) !important;
	transform: translateY(-2px);
	box-shadow: var(--jol-shadow-hover);
}

.w-btn.color_secondary,
.us-btn-style_2,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background-color: transparent !important;
	color: var(--jol-primary-dark) !important;
	border: 2px solid var(--jol-primary) !important;
}

.w-btn.color_secondary:hover,
.us-btn-style_2:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: var(--jol-primary) !important;
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: var(--jol-shadow-hover);
}

/* --------------------------------------------------------------------------
   Header — Sticky met schaduw
   -------------------------------------------------------------------------- */
.l-header {
	transition: box-shadow var(--jol-transition);
}

.l-header.sticky {
	box-shadow: 0 2px 20px rgba(44, 36, 32, 0.1);
}

.l-header,
.l-header .w-nav {
	font-family: 'Poppins', sans-serif;
}

/* --------------------------------------------------------------------------
   Footer — Donker & warm
   -------------------------------------------------------------------------- */
.l-footer,
.l-subfooter {
	background-color: var(--jol-footer-bg) !important;
	color: #e8e0d8 !important;
	font-family: 'Poppins', sans-serif;
}

.l-footer *,
.l-subfooter * {
	color: inherit !important;
}

.l-footer a,
.l-subfooter a {
	color: #fff !important;
	transition: color var(--jol-transition);
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.3);
	text-underline-offset: 2px;
}

.l-footer a:hover,
.l-subfooter a:hover {
	color: var(--jol-primary-light) !important;
	text-decoration-color: var(--jol-primary-light);
}

.l-footer h1,
.l-footer h2,
.l-footer h3,
.l-footer h4,
.l-footer .widget-title {
	color: #fff !important;
	font-family: 'Playfair Display', serif;
}

.l-footer p,
.l-footer span,
.l-footer li,
.l-footer address,
.l-footer .w-contacts-item-value {
	color: #e8e0d8 !important;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.jol-hero {
	position: relative;
	height: 70vh;
	min-height: 480px;
	max-height: 700px;
	display: flex;
	color: #fff;
	overflow: hidden;
	background: #2C2420;
}

.jol-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.jol-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
	display: block;
}

.jol-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.10) 40%, rgba(0,0,0,0.65) 100%),
		linear-gradient(90deg,  rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.05) 55%, transparent 100%);
}

.jol-hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	text-align: left;
	max-width: 640px;
	width: 100%;
	padding: 2rem 1.5rem 2.5rem;
	margin-left: 0;
	margin-right: auto;
}

.jol-hero__tag {
	display: inline-block;
	background: rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	padding: 0.45rem 1rem;
	border-radius: 50px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	margin-bottom: 1.25rem;
}

.jol-hero__title {
	font-family: 'Playfair Display', serif;
	font-size: 3rem;
	font-weight: 700;
	color: #fff;
	line-height: 0.95;
	margin: 0 0 1rem;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.3);
}

.jol-hero__title em {
	font-style: italic;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.92);
	display: block;
}

.jol-hero__subtitle {
	font-family: 'Poppins', sans-serif;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.95);
	margin: 0 0 1.5rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.55;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}

.jol-hero__subtitle-soft {
	display: inline-block;
	margin-top: 0.15rem;
	font-weight: 400;
	font-style: italic;
	color: rgba(255, 255, 255, 0.78);
	letter-spacing: 0.04em;
}

.jol-hero__cta {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	flex-wrap: wrap;
}

/* ==========================================================================
   DESKTOP — Centrale kolom voor alle content
   Houdt content binnen 1280px op brede schermen (voorkomt "uitgerekt" gevoel).
   Geldt voor homepage (.jol-home-main) én voor Impreza-pagina's
   (categorieën, single product, cart, checkout) via .l-section-h.
   ========================================================================== */
@media (min-width: 1024px) {
	.jol-home-main {
		max-width: 1280px;
		margin: 0 auto;
		padding: 0 0.5rem;
	}

	/* Impreza-pagina's: shop, archive, single-product, mijn-account etc.
	   .l-main is de hoofd-content wrapper binnen .l-canvas. Beperken
	   centreert alles binnen — exclusief header (.l-header) en footer
	   (.l-footer) die buiten .l-main vallen. */
	body.archive .l-main,
	body.single-product .l-main,
	body.woocommerce-cart .l-main,
	body.woocommerce-checkout .l-main,
	body.woocommerce-account .l-main {
		max-width: 1280px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ==========================================================================
   USP BAR
   ========================================================================== */
.jol-usp {
	background: #faf6f1;
	border-top: 1px solid rgba(212, 165, 122, 0.12);
	border-bottom: 1px solid rgba(212, 165, 122, 0.12);
	padding: 0.85rem 0;
}

.jol-usp__grid {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	max-width: var(--jol-container);
	margin: 0 auto;
	padding: 0 1rem;
}

.jol-usp__item {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-family: 'Poppins', sans-serif;
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--jol-heading);
	white-space: nowrap;
}

.jol-usp__icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--jol-primary);
}

/* ==========================================================================
   CATEGORY GRID
   ========================================================================== */
/* ==========================================================================
   PRODUCT CAROUSEL (scroll-snap)
   ========================================================================== */
.jol-carousel {
	position: relative;
}

.jol-carousel__track {
	display: flex;
	gap: 0.75rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 0.5rem;
}

.jol-carousel__track::-webkit-scrollbar {
	display: none;
}

/* --------------------------------------------------------------------------
   Product Card (carousel item)
   -------------------------------------------------------------------------- */
.jol-card {
	flex: 0 0 calc(50% - 0.375rem);
	scroll-snap-align: start;
	background: #fff;
	border-radius: var(--jol-radius-sm);
	overflow: hidden;
	box-shadow: var(--jol-shadow);
	transition: transform var(--jol-transition), box-shadow var(--jol-transition);
}

.jol-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--jol-shadow-hover);
}

.jol-card__link {
	text-decoration: none;
	color: inherit;
	display: block;
}

.jol-card__image {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	background: #f5f0eb;
}

.jol-card__image img,
.jol-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jol-card__badge {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	background: var(--jol-primary);
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-size: 0.7rem;
	font-weight: 600;
	padding: 0.2rem 0.6rem;
	border-radius: var(--jol-radius);
}

.jol-card__info {
	padding: 0.75rem;
	display: flex;
	flex-direction: column;
	min-height: 4.5rem;
}

.jol-card__title {
	font-family: 'Poppins', sans-serif;
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--jol-heading);
	margin: 0 0 0.25rem;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
	hyphens: auto;
}

.jol-card__price {
	font-family: 'Poppins', sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--jol-primary-dark);
}

.jol-card__price del {
	color: #aaa;
	font-weight: 400;
	font-size: 0.8rem;
	margin-right: 0.3rem;
}

.jol-card__price ins {
	text-decoration: none;
	color: var(--jol-primary-dark);
}

/* ==========================================================================
   SALE SECTION
   ========================================================================== */
.jol-sale {
	background: linear-gradient(135deg, #fdf3ea 0%, #fef9f4 100%);
	border-radius: 0;
	border-top: none;
}

.jol-sale .jol-carousel__track {
	align-items: stretch;
}

.jol-sale .jol-card {
	display: flex;
	flex-direction: column;
}

.jol-sale .jol-card__info {
	flex: 1;
}

/* ==========================================================================
   SEO CONTENT BLOCK
   ========================================================================== */
.jol-seo {
	padding: 2rem 0;
	background: #faf7f4;
	border-top: 1px solid rgba(212, 165, 122, 0.15);
}

.jol-seo__content {
	max-width: 800px;
	margin: 0 auto;
}

.jol-seo__title {
	font-family: 'Playfair Display', serif;
	font-size: 1.3rem;
	color: var(--jol-heading);
	margin-bottom: 0.75rem;
	cursor: pointer;
}

/* Accordion on mobile */
.jol-seo__title::after {
	content: ' +';
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	font-size: 1.2rem;
}

.jol-seo__content.is-open .jol-seo__title::after {
	content: ' −';
}

.jol-seo__text {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
}

.jol-seo__content.is-open .jol-seo__text {
	max-height: 600px;
}

.jol-seo__text p {
	font-size: 0.9rem;
	line-height: 1.8;
	color: var(--jol-text);
	margin-bottom: 0.75rem;
}

.jol-seo__text a {
	color: var(--jol-primary-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.jol-seo--category {
	border-top: 1px solid rgba(212, 165, 122, 0.2);
	margin-top: 2rem;
}

/* ==========================================================================
   ARCHIVE / CATEGORY PAGE
   ========================================================================== */

/* Breadcrumbs */
.jol-breadcrumbs {
	padding: 1rem 0 0.5rem;
	font-family: 'Poppins', sans-serif;
	font-size: 0.8rem;
}

.jol-breadcrumbs__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
}

.jol-breadcrumbs__list li::after {
	content: '/';
	margin-left: 0.4rem;
	color: #bbb;
}

.jol-breadcrumbs__list li:last-child::after {
	display: none;
}

.jol-breadcrumbs__list a {
	color: var(--jol-text);
	text-decoration: none;
}

.jol-breadcrumbs__list a:hover {
	color: var(--jol-primary-dark);
}

.jol-breadcrumbs__list li[aria-current="page"] {
	color: var(--jol-primary-dark);
	font-weight: 500;
}

/* Archive header */
.jol-archive__header {
	padding: 1rem 0 1rem;
}

.jol-archive__title {
	font-family: 'Playfair Display', serif;
	font-size: 1.8rem;
	color: var(--jol-heading);
	margin: 0 0 0.4rem;
}

.jol-archive__intro {
	font-size: 0.9rem;
	color: #666;
	max-width: 720px;
	line-height: 1.6;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Subcategory Tiles (parent category pages)
   -------------------------------------------------------------------------- */
.jol-subcattiles {
	margin-bottom: 2rem;
}

.jol-subcattiles__heading {
	font-family: 'Poppins', sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 0.75rem;
}

.jol-subcattiles__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
}

.jol-subcattile {
	display: block;
	position: relative;
	border-radius: var(--jol-radius-sm);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	text-decoration: none;
	box-shadow: var(--jol-shadow);
	transition: transform var(--jol-transition), box-shadow var(--jol-transition);
}

.jol-subcattile:hover {
	transform: translateY(-3px);
	box-shadow: var(--jol-shadow-hover);
}

.jol-subcattile__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.jol-subcattile:hover .jol-subcattile__img {
	transform: scale(1.05);
}

.jol-subcattile__placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #f5f0eb 0%, #e8ddd3 100%);
}

.jol-subcattile__info {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(44, 36, 32, 0.75) 0%, rgba(44, 36, 32, 0.1) 50%, transparent 100%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 0.75rem;
}

.jol-subcattile__name {
	font-family: 'Poppins', sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	color: #fff;
	margin: 0;
	line-height: 1.2;
}

/* Subcategory pills */
.jol-subcats {
	margin-bottom: 1.5rem;
}

.jol-subcats__scroll {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 0.25rem;
}

.jol-subcats__scroll::-webkit-scrollbar {
	display: none;
}

.jol-subcats__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.4rem 1rem;
	border-radius: var(--jol-radius);
	font-family: 'Poppins', sans-serif;
	font-size: 0.8rem;
	font-weight: 500;
	white-space: nowrap;
	text-decoration: none;
	background: #fff;
	color: var(--jol-text);
	border: 1.5px solid #e0d6ce;
	transition: all var(--jol-transition);
}

.jol-subcats__pill:hover {
	border-color: var(--jol-primary);
	color: var(--jol-primary-dark);
}

.jol-subcats__pill--active {
	background: var(--jol-primary);
	color: #fff;
	border-color: var(--jol-primary);
}

/* "Shop op kleur"-rij (SEO combo-landingspagina's). Hergebruikt de
   subcats-pill-stijl; alleen een klein label ervoor. */
.jol-kleurpills {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}
.jol-kleurpills__label {
	flex-shrink: 0;
	font-family: 'Poppins', sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--jol-text-soft, #7A6C5D);
}
.jol-kleurpills .jol-subcats__scroll {
	padding-bottom: 0;
}
@media (max-width: 600px) {
	.jol-kleurpills {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.4rem;
	}
}

.jol-subcats__pill--active:hover {
	background: var(--jol-primary-dark);
	color: #fff;
}

/* Toolbar */
.jol-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid rgba(212, 165, 122, 0.15);
}

.jol-toolbar__count {
	font-size: 0.8rem;
	color: #888;
}

.jol-toolbar__sort .woocommerce-ordering select {
	border: 1.5px solid #e0d6ce;
	border-radius: var(--jol-radius-sm);
	padding: 0.35rem 0.75rem;
	font-family: 'Poppins', sans-serif;
	font-size: 0.8rem;
	background: #fff;
}

/* Pagination */
.jol-pagination {
	padding: 2rem 0;
	text-align: center;
}

.jol-pagination .woocommerce-pagination {
	text-align: center;
}

.jol-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	font-family: 'Poppins', sans-serif;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--jol-text);
	text-decoration: none;
	transition: all var(--jol-transition);
}

.jol-pagination .page-numbers:hover {
	background: var(--jol-primary-light);
	color: var(--jol-heading);
}

.jol-pagination .page-numbers.current {
	background: var(--jol-primary);
	color: #fff;
}

/* Mobile filter button */
.jol-mobile-filter {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	position: fixed;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 900;
	background: var(--jol-heading);
	color: #fff;
	border: none;
	border-radius: var(--jol-radius);
	padding: 0.75rem 1.5rem;
	font-family: 'Poppins', sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	box-shadow: 0 4px 20px rgba(44, 36, 32, 0.3);
	cursor: pointer;
	transition: all var(--jol-transition);
}

.jol-mobile-filter:active {
	transform: translateX(-50%) scale(0.96);
}

/* Only show on category pages, hide on non-archive pages */
body:not(.jol-category) .jol-mobile-filter {
	display: none;
}

/* ==========================================================================
   WooCommerce — Product Cards (archive grid)
   ========================================================================== */
.woocommerce ul.products li.product,
.w-grid-item {
	background: #fff;
	border-radius: var(--jol-radius-sm);
	box-shadow: var(--jol-shadow);
	overflow: hidden;
	transition: transform var(--jol-transition), box-shadow var(--jol-transition);
}

.woocommerce ul.products li.product:hover,
.w-grid-item:hover {
	transform: translateY(-4px);
	box-shadow: var(--jol-shadow-hover);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.w-grid-item .w-post-elm .w-post-title {
	font-family: 'Poppins', sans-serif;
	color: var(--jol-heading);
	font-size: 0.9rem;
	font-weight: 500;
	padding: 0.6rem 0.75rem 0;
	line-height: 1.3;
}

.woocommerce ul.products li.product .price {
	color: var(--jol-heading);
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	padding: 0.3rem 0.75rem;
	font-size: 0.95rem;
}

.woocommerce ul.products li.product .price del,
.w-post-elm.price del {
	color: #999 !important;
	font-weight: 400 !important;
	text-decoration: line-through !important;
}

.woocommerce ul.products li.product .price ins,
.w-post-elm.price ins {
	text-decoration: none !important;
	color: #c0392b !important;
	font-weight: 700 !important;
}

.woocommerce ul.products li.product a.button {
	margin: 0.5rem 0.75rem 0.75rem;
	font-size: 0.78rem;
	padding: 0.45rem 0.9rem;
}

/* Product card add-to-cart button — solid, always visible (all contexts) */
.woocommerce ul.products li.product a.button,
.woocommerce-page ul.products li.product a.button,
.w-btn-wrapper.woocommerce a.button,
a.button.product_type_variable.add_to_cart_button,
a.button.product_type_simple.add_to_cart_button {
	color: #fff !important;
	background: var(--jol-primary) !important;
	border: none !important;
	border-radius: var(--jol-radius) !important;
	font-weight: 600 !important;
	text-align: center !important;
	display: block !important;
	padding: 0.5rem 1rem !important;
	font-size: 0.82rem !important;
	transition: background 0.2s ease, transform 0.15s ease !important;
}

.woocommerce ul.products li.product a.button:hover,
.woocommerce-page ul.products li.product a.button:hover,
.w-btn-wrapper.woocommerce a.button:hover,
a.button.product_type_variable.add_to_cart_button:hover,
a.button.product_type_simple.add_to_cart_button:hover {
	background: var(--jol-primary-dark) !important;
	transform: translateY(-1px);
}

/* Uitverkocht: knop gedempt grijs i.p.v. terracotta — geen misleidende
   "actieve" CTA. Blijft klikbaar (linkt naar de productpagina). En de
   Sale-badge onderdrukken zodat "Uitverkocht" het enige signaal is. */
.woocommerce ul.products li.product.outofstock a.button,
.woocommerce-page ul.products li.product.outofstock a.button {
	background: #ece7e0 !important;
	color: #6b6259 !important;
}
.woocommerce ul.products li.product.outofstock a.button:hover,
.woocommerce-page ul.products li.product.outofstock a.button:hover {
	background: #e2dbd1 !important;
	color: #524a42 !important;
	transform: none !important;
}
.woocommerce ul.products li.product.outofstock span.onsale {
	display: none !important;
}

.woocommerce ul.products li.product a img {
	border-radius: var(--jol-radius-sm) var(--jol-radius-sm) 0 0;
}

.woocommerce span.onsale {
	background-color: var(--jol-primary) !important;
	color: #fff;
	border-radius: var(--jol-radius);
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
}

/* Star ratings & reviews hidden (disabled) */
.woocommerce .star-rating,
.woocommerce-review-link,
.woocommerce #reviews,
.woocommerce .woocommerce-product-rating {
	display: none !important;
}

/* ==========================================================================
   WooCommerce — Single Product
   ========================================================================== */
.woocommerce div.product .product_title {
	font-size: 1.8rem;
	margin-bottom: 0.5rem;
}

.woocommerce div.product p.price {
	color: var(--jol-primary-dark);
	font-size: 1.4rem;
	font-weight: 600;
	font-family: 'Poppins', sans-serif;
}

.woocommerce div.product .quantity .qty {
	border-radius: var(--jol-radius-sm);
	border: 2px solid #e0d6ce;
	padding: 0.4rem 0.6rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--jol-primary-dark);
	border-bottom-color: var(--jol-primary);
}

.woocommerce div.product .woocommerce-product-gallery__image {
	border-radius: var(--jol-radius-sm);
	overflow: hidden;
}

/* ==========================================================================
   WooCommerce — Cart
   ========================================================================== */
.woocommerce-cart table.cart {
	border-radius: var(--jol-radius-sm);
	overflow: hidden;
}

.woocommerce-cart table.cart th {
	background-color: var(--jol-heading);
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
}

.woocommerce-cart .cart-collaterals .cart_totals {
	background: #fff;
	border-radius: var(--jol-radius-sm);
	box-shadow: var(--jol-shadow);
	padding: 1.5rem;
}

/* ==========================================================================
   WooCommerce — Checkout
   ========================================================================== */
.woocommerce-checkout #payment {
	background: #fff;
	border-radius: var(--jol-radius-sm);
	box-shadow: var(--jol-shadow);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	border: 2px solid #e0d6ce;
	border-radius: var(--jol-radius-sm);
	padding: 0.6rem 1rem;
	font-family: 'Poppins', sans-serif;
	transition: border-color var(--jol-transition);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--jol-primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(212, 165, 122, 0.15);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table {
	border-radius: var(--jol-radius-sm);
	overflow: hidden;
}

/* ==========================================================================
   WooCommerce — Messages
   ========================================================================== */
.woocommerce-message {
	border-top-color: var(--jol-primary) !important;
}

.woocommerce-message::before {
	color: var(--jol-primary) !important;
}

.woocommerce-info {
	border-top-color: var(--jol-primary-light) !important;
}

/* ==========================================================================
   Impreza footer-top section (Hulp nodig / Verzending / Nieuwsbrief)
   ========================================================================== */
.l-section.us_custom_bb73877c,
.l-section.color_footer-top {
	color: var(--jol-heading) !important;
}

.l-section.us_custom_bb73877c *,
.l-section.color_footer-top * {
	color: var(--jol-heading) !important;
}

.l-section.us_custom_bb73877c h1,
.l-section.us_custom_bb73877c h2,
.l-section.us_custom_bb73877c h3,
.l-section.us_custom_bb73877c h4,
.l-section.color_footer-top h1,
.l-section.color_footer-top h2,
.l-section.color_footer-top h3,
.l-section.color_footer-top h4 {
	color: var(--jol-heading) !important;
}

.l-section.us_custom_bb73877c a,
.l-section.color_footer-top a {
	color: var(--jol-primary-dark) !important;
	text-decoration: underline;
}

/* ==========================================================================
   Impreza Overrides
   ========================================================================== */
.l-body,
.l-canvas {
	font-family: 'Poppins', sans-serif;
	color: var(--jol-text);
	background-color: var(--jol-bg);
}

.l-section {
	font-family: 'Poppins', sans-serif;
}

.w-post-title a,
.w-blog-post-title a {
	color: var(--jol-heading);
}

.w-post-title a:hover,
.w-blog-post-title a:hover {
	color: var(--jol-primary-dark);
}

.w-breadcrumbs {
	font-family: 'Poppins', sans-serif;
	font-size: 0.85rem;
}

/* ==========================================================================
   Utility
   ========================================================================== */
::selection {
	background: var(--jol-primary-light);
	color: var(--jol-heading);
}

html {
	scroll-behavior: smooth;
}

/* ==========================================================================
   RESPONSIVE — Tablet (>=768px)
   ========================================================================== */
@media (min-width: 768px) {
	.jol-hero {
		min-height: 50vh;
	}

	.jol-hero {
		height: 75vh;
		min-height: 560px;
		max-height: 760px;
	}

	.jol-hero__content {
		padding: 3rem 2.5rem 3.5rem;
		max-width: 720px;
	}

	.jol-hero__title {
		font-size: 4.5rem;
	}

	.jol-hero__subtitle {
		font-size: 1.1rem;
	}

	.jol-usp__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.jol-usp__item {
		font-size: 0.8rem;
		justify-content: center;
	}

	.jol-card {
		flex: 0 0 calc(33.333% - 0.5rem);
	}

	.jol-section {
		padding: 3rem 0;
	}

	.jol-section__title {
		font-size: 1.8rem;
	}

	.jol-archive__title {
		font-size: 2.2rem;
	}

	.jol-subcattiles__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
	}

	.jol-subcattile__name {
		font-size: 1rem;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 0.95rem;
	}

	.woocommerce div.product .product_title {
		font-size: 2rem;
	}

	/* SEO text open by default on tablet+ */
	.jol-seo__text {
		max-height: none;
	}

	.jol-seo__title::after {
		display: none;
	}

	/* Hide mobile filter on tablet */
	.jol-mobile-filter {
		display: none !important;
	}
}

/* ==========================================================================
   RESPONSIVE — Desktop (>=1024px)
   ========================================================================== */
@media (min-width: 1024px) {
	.jol-hero__content {
		padding: 4rem 3.5rem 4.5rem;
		max-width: 780px;
	}

	.jol-hero__title {
		font-size: 5.5rem;
	}

	.jol-hero__subtitle {
		font-size: 1.2rem;
	}

	.jol-card {
		flex: 0 0 calc(25% - 0.5625rem);
	}

	.jol-section__title {
		font-size: 2.1rem;
	}

	.jol-section__header {
		margin-bottom: 1.4rem;
	}

	.woocommerce div.product .product_title {
		font-size: 2.2rem;
	}

	.jol-subcattiles__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 1.25rem;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 0.95rem;
	}
}

/* ==========================================================================
   RESPONSIVE — Large Desktop (>=1280px)
   ========================================================================== */
@media (min-width: 1280px) {
	.jol-container {
		padding: 0 2rem;
	}
}

/* ==========================================================================
   RESPONSIVE — Small Mobile (<=480px)
   ========================================================================== */
@media (max-width: 480px) {

	/* Hero — smaller text, much more top padding for header */
	.jol-hero {
		min-height: auto;
		padding: 6rem 0 2.5rem;
	}

	.jol-hero__content {
		padding: 1rem 1.25rem;
	}

	.jol-hero__title {
		font-size: 1.5rem;
		line-height: 1.25;
		margin-bottom: 0.5rem;
	}

	.jol-hero__subtitle {
		font-size: 0.85rem;
		margin-bottom: 1rem;
	}

	.jol-hero__cta {
		flex-direction: column;
		gap: 0.5rem;
		align-items: center;
	}

	.jol-hero__cta .jol-btn {
		width: 100%;
		max-width: 240px;
		padding: 0.65rem 1.5rem;
		font-size: 0.85rem;
	}

	/* USP bar — compact on small screens */
	.jol-usp__grid {
		gap: 0.25rem 1rem;
		padding: 0 0.75rem;
		justify-content: center;
	}

	.jol-usp__item {
		font-size: 0.68rem;
		gap: 0.3rem;
	}

	.jol-usp__icon {
		width: 15px;
		height: 15px;
	}

	/* Sections — more breathing room */
	.jol-section {
		padding: 2rem 0;
	}

	.jol-section__title {
		font-size: 1.3rem;
		margin-bottom: 0.75rem;
	}

	.jol-section__header {
		flex-direction: column;
		gap: 0.15rem;
	}

	.jol-section__header .jol-section__title {
		text-align: center;
	}

	.jol-section__link {
		align-self: center;
		font-size: 0.8rem;
	}

	/* Product cards in carousel */
	.jol-card {
		flex: 0 0 calc(65% - 0.375rem);
	}

	.jol-card__title {
		font-size: 0.8rem;
	}

	.jol-card__price {
		font-size: 0.85rem;
	}

	/* Container padding */
	.jol-container {
		padding: 0 0.75rem;
	}

	/* Archive / Category page */
	.jol-archive__title {
		font-size: 1.4rem;
	}

	.jol-archive__intro {
		font-size: 0.82rem;
	}

	/* Subcategory tiles */
	.jol-subcattiles__grid {
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem;
	}

	.jol-subcattile {
		aspect-ratio: 3 / 2;
	}

	.jol-subcattile__name {
		font-size: 0.8rem;
	}

	/* Subcategory pills — smaller */
	.jol-subcats__pill {
		font-size: 0.72rem;
		padding: 0.3rem 0.75rem;
	}

	/* Product grid cards */
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 0.8rem;
		padding: 0.4rem 0.5rem 0;
	}

	.woocommerce ul.products li.product .price {
		padding: 0.2rem 0.5rem;
		font-size: 0.85rem;
	}

	.woocommerce ul.products li.product a.button {
		font-size: 0.7rem;
		padding: 0.35rem 0.7rem;
		margin: 0.4rem 0.5rem 0.5rem;
	}

	/* Toolbar */
	.jol-toolbar {
		flex-direction: column;
		gap: 0.5rem;
		align-items: flex-start;
	}

	.jol-toolbar__count {
		font-size: 0.75rem;
	}

	/* SEO text */
	.jol-seo__title {
		font-size: 1.1rem;
	}

	.jol-seo__text p {
		font-size: 0.82rem;
	}

	/* Footer text smaller */
	.l-footer {
		font-size: 0.85rem;
	}
}

/* ==========================================================================
   RESPONSIVE — Medium Mobile (<=767px, above 480px)
   ========================================================================== */
@media (min-width: 481px) and (max-width: 767px) {

	.jol-hero__title {
		font-size: 1.75rem;
	}

	.jol-hero__subtitle {
		font-size: 0.9rem;
	}

	.jol-card {
		flex: 0 0 calc(50% - 0.375rem);
	}

	.jol-subcattiles__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
	}
}

/* ==========================================================================
   Related / Upsell products — compact carousel on mobile
   ========================================================================== */
@media (max-width: 767px) {
	/* Compact text inside carousel cards */
	.w-grid.us_carousel .woocommerce-loop-product__title {
		font-size: 0.72rem !important;
		line-height: 1.3 !important;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.w-grid.us_carousel .price {
		font-size: 0.8rem !important;
		font-weight: 700 !important;
	}

	/* Smaller button in carousel */
	.w-grid.us_carousel a.button {
		font-size: 0.65rem !important;
		padding: 0.3rem 0.5rem !important;
	}
}

/* ==========================================================================
   Touch-friendly improvements (all mobile)
   ========================================================================== */
@media (max-width: 767px) {

	/* Ensure tap targets are at least 44px */
	.jol-subcats__pill {
		min-height: 36px;
		display: inline-flex;
		align-items: center;
	}

	.jol-breadcrumbs__list a,
	.jol-breadcrumbs__list span {
		padding: 0.15rem 0;
	}

	/* Sticky filter button visibility */
	.jol-mobile-filter {
		bottom: 1.25rem;
		padding: 0.7rem 1.25rem;
		font-size: 0.8rem;
	}

	/* Product cards — less shadow on mobile for cleaner look */
	.woocommerce ul.products li.product {
		box-shadow: 0 1px 6px rgba(44, 36, 32, 0.06);
	}

	/* ★ Product grid — 2 kolommen op mobiel */
	.woocommerce ul.products {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 0.5rem !important;
	}

	.woocommerce ul.products li.product {
		width: 100% !important;
		margin: 0 !important;
		float: none !important;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 0.75rem;
		padding: 0.4rem 0.5rem 0;
		line-height: 1.3;
	}

	.woocommerce ul.products li.product .price {
		font-size: 0.82rem;
		padding: 0.2rem 0.5rem;
	}

	.woocommerce ul.products li.product a.button {
		font-size: 0.68rem;
		padding: 0.35rem 0.6rem;
		margin: 0.3rem 0.5rem 0.5rem;
	}

	/* Toolbar sort full-width */
	.jol-toolbar__sort {
		width: 100%;
	}

	.jol-toolbar__sort .woocommerce-ordering {
		width: 100%;
	}

	.jol-toolbar__sort .woocommerce-ordering select {
		width: 100%;
	}
}

/* ==========================================================================
   Header search — eigen vergrootglas, onafhankelijk van Impreza
   We renderen ons eigen .jol-header-search-btn via JS (enhancements.js).
   Impreza's .w-search element (als het ergens staat) verbergen we
   volledig, zodat er nooit dubbele zoek-iconen verschijnen.
   ========================================================================== */
.l-header .w-search {
	display: none !important;
}

.jol-header-search-btn {
	background: transparent;
	border: none;
	padding: 0.5rem 0.75rem;
	margin: 0;
	cursor: pointer;
	color: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.18s;
	-webkit-appearance: none;
}

.jol-header-search-btn:hover,
.jol-header-search-btn:focus-visible {
	opacity: 0.7;
	outline: none;
}

.jol-header-search-btn svg {
	display: block;
	width: 22px;
	height: 22px;
}

/* ==========================================================================
   Impreza 9.0 compat — mobile menu rendering
   Na de Impreza 8.x → 9.0 update krijgen oude headers TWEE menu's
   in de HTML: een type_desktop (oude) + type_mobile (nieuwe). De CSS
   regel voor .hide_for_mobiles is weggehaald in v9, dus de desktop-
   variant blijft zichtbaar op mobiel. We verbergen die hier expliciet.
   ========================================================================== */
@media (max-width: 900px) {
	/* Verberg alleen de desktop-variant op mobiel — Impreza 9.0 handelt
	   collapse van het mobile menu zelf via .w-nav-control.active class. */
	body .l-header .w-nav.type_desktop,
	body .l-header .w-nav.type_desktop .w-nav-list.hide_for_mobiles,
	body .l-header .w-nav.type_desktop .w-nav-list.level_1 {
		display: none !important;
	}
}

/* ==========================================================================
   FIXED HEADER OFFSET — alle pagina's
   Impreza's header is position:fixed. Zonder margin-top op .l-main
   wordt de bovenste pagina-inhoud (hero, breadcrumb, eerste sectie)
   achter de header verborgen.
   LET OP: padding-top op .l-canvas werkt NIET — Impreza gebruikt die
   waarde om de header's top-positie in te stellen. Margin-top op
   .l-main / .jol-home-main is de juiste plek.
   Mobile header: ~100px (middle 50 + bottom 50).
   Desktop header: ~166px (top 36 + middle 80 + bottom 50).
   ========================================================================== */
@media (max-width: 767px) {
	body.home .jol-home-main,
	body.archive .l-main,
	body.tax-product_cat .l-main,
	body.post-type-archive-product .l-main,
	body.single-product .l-main,
	body.woocommerce-cart .l-main,
	body.woocommerce-checkout .l-main,
	body.woocommerce-account .l-main {
		margin-top: 106px !important;
	}
}

@media (min-width: 768px) {
	body.home .jol-home-main,
	body.archive .l-main,
	body.tax-product_cat .l-main,
	body.post-type-archive-product .l-main,
	body.single-product .l-main,
	body.woocommerce-cart .l-main,
	body.woocommerce-checkout .l-main,
	body.woocommerce-account .l-main {
		margin-top: 166px;
	}
}

/* Categorie/shop/tag-archieven: het WC-override-template rendert
   <main class="jol-archive"> ZONDER .l-main, direct als flow-kind van
   .l-canvas. Een margin-top hierop lekt via margin-collapse naar Impreza's
   header-positionering (header schuift mee omlaag). Padding-top collapset
   niet en houdt de main-box op top 0 → header blijft op top 0, terwijl de
   inhoud (mobiele zoekbalk → broodkruimel → grid) onder de header uitkomt. */
@media (max-width: 767px) {
	main.jol-archive:not(.l-main) {
		padding-top: 106px;
	}
}

@media (min-width: 768px) {
	main.jol-archive:not(.l-main) {
		padding-top: 166px;
	}
}

/* ==========================================================================
   TRUST SIGNALS (product page)
   ========================================================================== */
.jol-trust {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	margin-top: 1rem;
	padding: 1rem;
	background: #faf7f4;
	border-radius: var(--jol-radius-sm);
	border: 1px solid rgba(212, 165, 122, 0.15);
}

.jol-trust__item {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-family: 'Poppins', sans-serif;
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--jol-heading);
	line-height: 1.3;
}

.jol-trust__item svg {
	flex-shrink: 0;
	color: var(--jol-primary);
}

/* ==========================================================================
   STICKY ADD-TO-CART BAR (mobile only)
   ========================================================================== */
.jol-sticky-cart {
	display: none;
}

@media (max-width: 767px) {
	.jol-sticky-cart {
		display: flex;
		position: fixed;
		bottom: -100%;
		left: 0;
		right: 0;
		z-index: 999;
		background: #fff;
		box-shadow: 0 -2px 12px rgba(44, 36, 32, 0.12);
		padding: 0.6rem 1rem;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		transition: bottom 0.3s ease;
	}

	.jol-sticky-cart.is-visible {
		bottom: 0;
	}

	.jol-sticky-cart__info {
		display: flex;
		flex-direction: column;
		min-width: 0;
		flex: 1;
	}

	.jol-sticky-cart__price {
		font-family: 'Poppins', sans-serif;
		font-weight: 700;
		font-size: 1rem;
		color: var(--jol-heading);
	}

	.jol-sticky-cart__name {
		font-family: 'Poppins', sans-serif;
		font-size: 0.7rem;
		color: #888;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.jol-sticky-cart__btn {
		flex-shrink: 0;
		background: var(--jol-primary);
		color: #fff;
		font-family: 'Poppins', sans-serif;
		font-size: 0.82rem;
		font-weight: 600;
		padding: 0.65rem 1.25rem;
		border-radius: var(--jol-radius);
		text-decoration: none;
		white-space: nowrap;
		transition: background var(--jol-transition);
	}

	.jol-sticky-cart__btn:hover {
		background: var(--jol-primary-dark);
		color: #fff;
	}
}

/* ==========================================================================
   RECENTLY VIEWED SECTION
   ========================================================================== */
.jol-recently-viewed {
	border-top: 1px solid rgba(212, 165, 122, 0.12);
}

/* ==========================================================================
   PRODUCT TABS → ACCORDION ON MOBILE
   ========================================================================== */
@media (max-width: 767px) {
	.woocommerce-tabs .wc-tabs {
		display: flex;
		flex-direction: column;
		gap: 0;
		border: none;
		padding: 0;
		margin: 0;
	}

	.woocommerce-tabs .wc-tabs li {
		display: block;
		width: 100%;
		margin: 0;
		border-bottom: 1px solid rgba(212, 165, 122, 0.15);
	}

	.woocommerce-tabs .wc-tabs li a {
		display: block;
		padding: 0.75rem 0;
		font-family: 'Poppins', sans-serif;
		font-size: 0.85rem;
		font-weight: 600;
		color: var(--jol-heading);
		text-decoration: none;
	}

	.woocommerce-tabs .wc-tabs li.active a {
		color: var(--jol-primary-dark);
	}

	/* Tab panel content */
	.woocommerce-tabs .woocommerce-Tabs-panel {
		padding: 0.75rem 0 1rem;
		font-size: 0.85rem;
		line-height: 1.6;
	}
}

/* ==========================================================================
   BREADCRUMBS — COMPACT ON MOBILE
   ========================================================================== */
@media (max-width: 767px) {
	.jol-breadcrumbs {
		font-size: 0.7rem;
		padding: 0.6rem 0 0.3rem;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.jol-breadcrumbs__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.jol-breadcrumbs__list::-webkit-scrollbar {
		display: none;
	}

	.jol-breadcrumbs__list li {
		flex-shrink: 0;
	}
}

/* ==========================================================================
   HEADER SEARCH — Impreza layout_modern
   ========================================================================== */

/* Mobiel (≤767px): toon alleen het zoekicoon in de header — het volledige formulier
   wordt vervangen door onze eigen overlay. JS onderschept de klik op .w-search-open.
   De at_bottom rij was ontworpen voor het zoekformulier (~99px hoogte); nu het
   formulier verborgen is, krimpt de rij in naar 50px. */
@media (max-width: 767px) {
	/* Maak het zoekelement zichtbaar (Impreza verbergt het op mobiel standaard) */
	.l-header .w-search {
		display: block !important;
	}

	/* Verberg het Impreza-formulier, maar laat het icoon zichtbaar */
	.l-header .w-search .w-search-form,
	.l-header .w-search .w-search-close {
		display: none !important;
	}

	/* Zoekicoon: 44px touch-target met SVG-vergrootglas */
	.l-header .w-search-open {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		cursor: pointer;
	}
	.l-header .w-search-open::before {
		content: '';
		display: block;
		width: 20px;
		height: 20px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C2420' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-size: contain;
		opacity: 0.85;
	}
	.l-header .w-search-open:active::before {
		opacity: 1;
	}

	/* Verklein de header-rij die het zoekformulier bevatte */
	.l-subheader.at_bottom,
	.l-subheader.at_bottom .l-subheader-h {
		height: 50px !important;
		min-height: 0 !important;
		line-height: 50px !important;
	}
}

/* Desktop: compacte zoekbalk in topbar — override Impreza's grote veld-hoogte */
@media (min-width: 768px) {
	/* Verklein de container-hoogte */
	.l-header .w-search.layout_modern .w-form-row-field {
		height: auto !important;
		min-height: 0 !important;
	}
	.l-header .w-search.layout_modern .w-form-row {
		min-height: 0 !important;
	}

	.l-header .w-search.layout_modern .w-search-form input[type="text"] {
		height: 34px !important;
		padding: 0 0.75rem !important;
		line-height: 34px !important;
		font-size: 0.875rem !important;
		border: 1px solid #e0d6ce !important;
		border-radius: 17px !important;
		font-family: 'Poppins', sans-serif !important;
		background: #faf8f6 !important;
		color: var(--jol-heading) !important;
		min-width: 180px;
	}

	.l-header .w-search.layout_modern .w-search-form input[type="text"]:focus {
		border-color: var(--jol-primary) !important;
		outline: none !important;
		box-shadow: 0 0 0 3px rgba(212, 165, 122, 0.15) !important;
		background: #fff !important;
	}

	/* Verberg de close-knop in de header (zit altijd open) */
	.l-header .w-search.layout_modern .w-search-close {
		display: none !important;
	}
}

/* ==========================================================================
   PRODUCT IMAGE UNIFORM ASPECT RATIO
   ========================================================================== */
.woocommerce ul.products li.product a img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #f8f5f2;
}

.jol-card__image img,
.jol-card__img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #f8f5f2;
}

/* ==========================================================================
   PRODUCT CARD ENHANCEMENTS
   ========================================================================== */

/* Position context for badges */
.woocommerce ul.products li.product {
	position: relative;
}

/* "Nieuw" badge */
.jol-badge {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	font-family: 'Poppins', sans-serif;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 0.2rem 0.55rem;
	border-radius: 20px;
	z-index: 3;
	pointer-events: none;
}

.jol-badge--new {
	background: #5B8FD6;
	color: #fff;
}

.jol-badge--oos {
	background: #6b6259;
	color: #fff;
}

/* Color swatches */
.jol-swatches {
	display: flex;
	gap: 0.3rem;
	flex-wrap: wrap;
	padding: 0.35rem 0.75rem 0;
}

.jol-swatch {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1.5px solid rgba(44, 36, 32, 0.15);
	flex-shrink: 0;
	transition: transform 0.15s ease;
	/* Géén default background — kleur komt altijd via inline style.
	   Termen zonder kleur worden in functions.php overgeslagen. */
}

.jol-swatch:hover {
	transform: scale(1.25);
}

.jol-swatch--more {
	width: auto;
	height: 14px;
	border-radius: 10px;
	background: #f0ebe5;
	font-family: 'Poppins', sans-serif;
	font-size: 0.6rem;
	font-weight: 600;
	color: #888;
	padding: 0 0.4rem;
	display: inline-flex;
	align-items: center;
	border: none;
}

/* ==========================================================================
   VAKANTIE-/LEVERTIJDMELDING (homepage, tijdelijk)
   ========================================================================== */
.jol-notice {
	background: #F5EADE;
	border: 1px solid #E7D6C3;
	border-radius: var(--jol-radius-sm);
	margin: 0 0 1rem;
}
.jol-notice__text {
	margin: 0;
	padding: 0.7rem 1.15rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: 'Poppins', sans-serif;
	font-size: 0.88rem;
	line-height: 1.45;
	color: #5A4632;
	text-align: center;
}
.jol-notice__icon {
	font-size: 1.05rem;
	flex-shrink: 0;
}
.jol-notice__text strong {
	font-weight: 600;
	color: #4A3521;
}
.jol-notice__code {
	display: inline-block;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #fff;
	background: var(--jol-primary-dark);
	border-radius: 6px;
	padding: 0.05rem 0.45rem;
	white-space: nowrap;
}
@media (max-width: 600px) {
	.jol-notice__text {
		font-size: 0.82rem;
		text-align: left;
		align-items: flex-start;
		gap: 0.45rem;
	}
}

/* ==========================================================================
   SHARED OVERLAY SYSTEM
   ========================================================================== */

.jol-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1200;
}

.jol-overlay.is-open {
	display: block;
}

.jol-overlay__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(44, 36, 32, 0.5);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	animation: jolFadeIn 0.2s ease;
}

.jol-overlay__sheet {
	position: absolute;
	background: #fff;
	border-radius: 20px 20px 0 0;
	overflow: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	max-height: 90vh;
	width: 100%;
}

.jol-overlay__sheet--bottom {
	bottom: 0;
	left: 0;
	right: 0;
	animation: jolSlideUp 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.jol-overlay__sheet--top {
	top: 0;
	left: 0;
	right: 0;
	border-radius: 0 0 20px 20px;
	animation: jolSlideDown 0.22s ease;
}

.jol-overlay__sheet--sm {
	max-height: 60vh;
}

.jol-overlay__handle {
	width: 36px;
	height: 4px;
	background: #e0d6ce;
	border-radius: 4px;
	margin: 0.6rem auto 0;
}

.jol-overlay__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1.25rem;
	border-bottom: 1px solid rgba(212, 165, 122, 0.12);
}

.jol-overlay__title {
	font-family: 'Poppins', sans-serif;
	font-size: 1rem;
	font-weight: 600;
	color: var(--jol-heading);
	margin: 0;
}

.jol-overlay__close {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.25rem;
	color: #999;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: color var(--jol-transition), background var(--jol-transition);
}

.jol-overlay__close:hover {
	color: var(--jol-heading);
	background: #f5f0eb;
}

@keyframes jolFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes jolSlideUp {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}

@keyframes jolSlideDown {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

/* ==========================================================================
   SEARCH OVERLAY
   ========================================================================== */

.jol-search-overlay__bar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid rgba(212, 165, 122, 0.12);
}

.jol-search-overlay__icon {
	flex-shrink: 0;
	color: #bbb;
}

.jol-search-overlay__input {
	flex: 1;
	border: none;
	outline: none;
	font-family: 'Poppins', sans-serif;
	font-size: 1rem;
	color: var(--jol-heading);
	background: transparent;
	min-width: 0;
}

.jol-search-overlay__input::placeholder {
	color: #bbb;
}

.jol-search-overlay__clear {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.25rem;
	color: #bbb;
	display: flex;
	align-items: center;
}

.jol-search-overlay__cancel {
	background: none;
	border: none;
	cursor: pointer;
	font-family: 'Poppins', sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--jol-primary-dark);
	white-space: nowrap;
	padding: 0.25rem 0;
}

.jol-search-overlay__results {
	padding: 1rem 1.25rem;
	min-height: 120px;
}

.jol-search-overlay__label {
	font-family: 'Poppins', sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	color: #aaa;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 0.6rem;
}

/* Popular search chips */
.jol-search-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 1rem;
}

.jol-search-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.35rem 0.85rem;
	background: #f5f0eb;
	border-radius: 20px;
	font-family: 'Poppins', sans-serif;
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--jol-heading);
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: background var(--jol-transition);
}

.jol-search-chip:hover {
	background: var(--jol-primary-light);
	color: var(--jol-heading);
}

/* Search results list */
.jol-search-results {
	list-style: none;
	margin: 0;
	padding: 0;
}

.jol-search-result {
	border-bottom: 1px solid rgba(212, 165, 122, 0.1);
}

.jol-search-result:last-child {
	border-bottom: none;
}

.jol-search-result__link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 0;
	text-decoration: none;
}

.jol-search-result__img {
	width: 48px;
	height: 48px;
	object-fit: contain;
	border-radius: 8px;
	background: #f8f5f2;
	flex-shrink: 0;
}

.jol-search-result__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.jol-search-result__title {
	font-family: 'Poppins', sans-serif;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--jol-heading);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.jol-search-result__price {
	font-family: 'Poppins', sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--jol-primary-dark);
	margin-top: 0.1rem;
}

.jol-search-view-all {
	display: block;
	text-align: center;
	padding: 0.75rem;
	font-family: 'Poppins', sans-serif;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--jol-primary-dark);
	border-top: 1px solid rgba(212, 165, 122, 0.1);
	margin-top: 0.5rem;
	text-decoration: none;
}

.jol-search-empty {
	font-family: 'Poppins', sans-serif;
	font-size: 0.85rem;
	color: #999;
	text-align: center;
	padding: 1.5rem 0;
}

/* ==========================================================================
   CATEGORY OVERLAY
   ========================================================================== */

.jol-cat-overlay__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
	padding: 1rem 1.25rem;
}

.jol-cat-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	gap: 0.4rem;
}

.jol-cat-tile__img,
.jol-cat-tile__placeholder {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 12px;
	background: #f5f0eb;
}

.jol-cat-tile__name {
	font-family: 'Poppins', sans-serif;
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--jol-heading);
	text-align: center;
	line-height: 1.3;
}

.jol-cat-overlay__cta {
	display: block;
	margin: 0.5rem 1.25rem 1.25rem;
	text-align: center;
}

/* ==========================================================================
   FILTER BOTTOM-SHEET
   ========================================================================== */

.jol-filter-sheet__body {
	padding: 0.5rem 1.25rem;
	overflow-y: auto;
}

.jol-filter-group {
	padding: 1rem 0;
	border-bottom: 1px solid rgba(212, 165, 122, 0.1);
}

.jol-filter-group:last-child {
	border-bottom: none;
}

.jol-filter-group__title {
	font-family: 'Poppins', sans-serif;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--jol-heading);
	margin: 0 0 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.jol-filter-group__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.jol-filter-chip {
	padding: 0.45rem 1rem;
	border-radius: 20px;
	border: 1.5px solid #e0d6ce;
	background: #fff;
	font-family: 'Poppins', sans-serif;
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--jol-heading);
	cursor: pointer;
	transition: all 0.15s ease;
	white-space: nowrap;
}

.jol-filter-chip:hover {
	border-color: var(--jol-primary);
	color: var(--jol-primary-dark);
}

.jol-filter-chip.is-active {
	background: var(--jol-primary);
	border-color: var(--jol-primary);
	color: #fff;
}

/* Price range slider */
.jol-price-range {
	padding: 0.25rem 0;
}

.jol-price-range__labels {
	display: flex;
	justify-content: space-between;
	font-family: 'Poppins', sans-serif;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--jol-heading);
	margin-bottom: 0.75rem;
}

.jol-price-range__track {
	position: relative;
	height: 4px;
	background: #e8ddd3;
	border-radius: 4px;
	margin: 1.5rem 0 0.5rem;
}

.jol-price-range__fill {
	position: absolute;
	height: 100%;
	background: var(--jol-primary);
	border-radius: 4px;
	pointer-events: none;
}

.jol-range {
	position: absolute;
	top: -8px;
	width: 100%;
	height: 20px;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	outline: none;
	pointer-events: none;
}

.jol-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--jol-primary);
	border: 3px solid #fff;
	box-shadow: 0 1px 6px rgba(201, 144, 126, 0.4);
	cursor: pointer;
	pointer-events: all;
	transition: box-shadow 0.15s ease;
}

.jol-range::-webkit-slider-thumb:hover,
.jol-range:focus::-webkit-slider-thumb {
	box-shadow: 0 0 0 4px rgba(201, 144, 126, 0.2);
}

.jol-range::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--jol-primary);
	border: 3px solid #fff;
	box-shadow: 0 1px 6px rgba(201, 144, 126, 0.4);
	cursor: pointer;
	pointer-events: all;
}

.jol-filter-sheet__footer {
	display: flex;
	gap: 0.75rem;
	padding: 0.75rem 1.25rem 1.25rem;
	border-top: 1px solid rgba(212, 165, 122, 0.12);
}

.jol-filter-sheet__reset {
	flex: 1;
	padding: 0.7rem;
	border: 2px solid #e0d6ce;
	border-radius: 20px;
	background: transparent;
	font-family: 'Poppins', sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--jol-heading);
	cursor: pointer;
	transition: all 0.15s ease;
}

.jol-filter-sheet__reset:hover {
	border-color: var(--jol-primary);
	color: var(--jol-primary-dark);
}

.jol-filter-sheet__footer .jol-btn {
	flex: 2;
}

/* ==========================================================================
   FREE SHIPPING INDICATOR
   ========================================================================== */

.jol-free-shipping {
	position: fixed;
	bottom: 0; /* geen bottom nav meer */
	left: 0;
	right: 0;
	z-index: 790;
	background: #fff;
	border-top: 1px solid rgba(212, 165, 122, 0.15);
	padding: 0.4rem 1rem 0.35rem;
	transition: transform 0.3s ease;
}

/* Hide on desktop */
@media (min-width: 768px) {
	.jol-free-shipping {
		display: none;
	}
}

.jol-free-shipping__inner {
	max-width: 480px;
	margin: 0 auto;
}

.jol-free-shipping__msg {
	display: block;
	font-family: 'Poppins', sans-serif;
	font-size: 0.72rem;
	color: var(--jol-text);
	margin-bottom: 0.3rem;
	text-align: center;
}

.jol-free-shipping__msg strong {
	color: var(--jol-heading);
}

.jol-free-shipping__msg--done {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	color: #38A169;
	font-weight: 600;
}

.jol-free-shipping__track {
	height: 4px;
	background: #f0ebe5;
	border-radius: 4px;
	overflow: hidden;
}

.jol-free-shipping__fill {
	height: 100%;
	background: linear-gradient(90deg, var(--jol-primary-light), var(--jol-primary));
	border-radius: 4px;
	transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   BOTTOM NAVIGATION
   ========================================================================== */

.jol-bottom-nav {
	display: none !important; /* uitgeschakeld — header search is leidend */
}

@media (max-width: 767px) {
	/* Body padding: alleen ruimte voor de shipping-bar (44px) */
	body {
		padding-bottom: 44px;
	}

	/* Sticky add-to-cart balk zit boven de shipping-bar */
	.jol-sticky-cart {
		bottom: 44px;
	}

	/* Filter-knop op categoriepagina's ook boven de shipping-bar */
	.jol-mobile-filter {
		bottom: calc(44px + 1rem);
	}
}

.jol-bottom-nav__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
	text-decoration: none;
	font-family: 'Poppins', sans-serif;
	font-size: 0.6rem;
	font-weight: 500;
	color: #aaa;
	background: none;
	border: none;
	cursor: pointer;
	transition: color var(--jol-transition);
	padding: 0.25rem 0;
	-webkit-tap-highlight-color: transparent;
}

.jol-bottom-nav__item.is-active,
.jol-bottom-nav__item:active {
	color: var(--jol-primary-dark);
}

.jol-bottom-nav__item:hover {
	color: var(--jol-primary-dark);
}

.jol-bottom-nav__icon {
	width: 22px;
	height: 22px;
}

.jol-bottom-nav__cart-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.jol-bottom-nav__badge {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 16px;
	height: 16px;
	background: var(--jol-primary);
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-size: 0.55rem;
	font-weight: 700;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
	transition: transform 0.2s ease;
}

.jol-bottom-nav__badge.is-hidden {
	display: none;
}

.jol-bottom-nav__badge.is-bump {
	animation: jolBadgeBump 0.3s ease;
}

@keyframes jolBadgeBump {
	0%, 100% { transform: scale(1); }
	50%       { transform: scale(1.4); }
}

/* ==========================================================================
   CROSS-SELL — "Maak de look compleet"
   ========================================================================== */

.jol-cross-sell {
	background: #faf7f4;
}

/* ==========================================================================
   BUNDLE — "Vaak samen gekocht"
   ========================================================================== */

.jol-bundle {
	background: #fff;
}

.jol-bundle__products {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 0.5rem;
}

.jol-bundle__products::-webkit-scrollbar {
	display: none;
}

.jol-bundle__item {
	flex-shrink: 0;
	text-align: center;
	width: 110px;
}

@media (min-width: 768px) {
	.jol-bundle__item {
		width: 140px;
	}
}

.jol-bundle__item--current .jol-bundle__img-link {
	position: relative;
}

.jol-bundle__item--current .jol-bundle__img-link::after {
	content: '✓';
	position: absolute;
	bottom: 4px;
	right: 4px;
	width: 18px;
	height: 18px;
	background: var(--jol-primary);
	color: #fff;
	font-size: 0.6rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.jol-bundle__img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: 12px;
	background: #f8f5f2;
	border: 1.5px solid rgba(212, 165, 122, 0.15);
}

.jol-bundle__plus {
	font-family: 'Poppins', sans-serif;
	font-size: 1.2rem;
	font-weight: 300;
	color: #ccc;
	flex-shrink: 0;
}

.jol-bundle__item-name {
	display: block;
	font-family: 'Poppins', sans-serif;
	font-size: 0.72rem;
	color: var(--jol-heading);
	margin-top: 0.35rem;
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.3;
}

.jol-bundle__item-price {
	font-family: 'Poppins', sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--jol-primary-dark);
	margin-top: 0.2rem;
}

.jol-bundle__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(212, 165, 122, 0.12);
}

@media (max-width: 480px) {
	.jol-bundle__cta {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}

	.jol-bundle__btn {
		width: 100%;
		text-align: center;
	}
}

.jol-bundle__total {
	font-family: 'Poppins', sans-serif;
	font-size: 0.9rem;
	color: var(--jol-heading);
}

.jol-bundle__total strong {
	color: var(--jol-primary-dark);
}

.jol-bundle__btn {
	padding: 0.6rem 1.5rem;
	font-size: 0.85rem;
	white-space: nowrap;
}

/* ==========================================================================
   Variation-stock annotations — JS-side toegevoegd door
   assets/js/variation-stock-status.js
   Primaire signaal = Unicode-emoji prefix in de option text (🟢/🟠/🔴).
   Deze CSS is extra boost voor browsers die kleur op <option> ondersteunen.
   ========================================================================== */
.variations select option.jol-stock-in {
	color: #15803D;
}
.variations select option.jol-stock-backorder {
	color: #C2410C;
}
.variations select option.jol-stock-oos {
	color: #B91C1C;
	text-decoration: line-through;
}


/* ==========================================================================
   Header Search — compact zoek-vak in de topbar (center-cel)
   ========================================================================== */
.l-subheader.at_top .jol-header-search-form {
	display: inline-flex;
	align-items: center;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.10);
	border-radius: 16px;
	padding: 2px 10px 2px 12px;
	max-width: 320px;
	width: 100%;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	box-sizing: border-box;
}
.l-subheader.at_top .jol-header-search-form:focus-within {
	border-color: #B89A78;
	box-shadow: 0 0 0 2px rgba(184,154,120,0.18);
}
.l-subheader.at_top .jol-header-search-form__icon {
	color: #B89A78;
	flex-shrink: 0;
	margin-right: 6px;
}
.l-subheader.at_top .jol-header-search-form input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 4px 0;
	font-size: 0.82rem;
	line-height: 1.3;
	color: #2C2018;
	-webkit-appearance: none;
	appearance: none;
	outline: 0;
}
.l-subheader.at_top .jol-header-search-form input[type="search"]::placeholder {
	color: #B89A78;
	opacity: 0.85;
}
.l-subheader.at_top .jol-header-search-form input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

/* Mobile zoek-rij — onder de header, vol-breed */
.jol-mobile-search-row {
	display: none;
}
@media (max-width: 900px) {
	.jol-mobile-search-row {
		display: block;
		background: #FAF6F2;
		padding: 6px 12px;
		border-bottom: 1px solid rgba(0,0,0,0.06);
		margin-bottom: 0;
	}
	.jol-mobile-search-row .jol-header-search-form {
		display: flex;
		align-items: center;
		background: #fff;
		border: 1px solid rgba(0,0,0,0.10);
		border-radius: 22px;
		padding: 4px 14px;
		max-width: 100%;
		width: 100%;
		box-sizing: border-box;
	}
	.jol-mobile-search-row .jol-header-search-form:focus-within {
		border-color: #B89A78;
		box-shadow: 0 0 0 2px rgba(184,154,120,0.18);
	}
	.jol-mobile-search-row .jol-header-search-form__icon {
		color: #B89A78;
		flex-shrink: 0;
		margin-right: 8px;
		width: 16px;
		height: 16px;
	}
	.jol-mobile-search-row .jol-header-search-form input[type="search"] {
		flex: 1;
		min-width: 0;
		border: 0;
		background: transparent;
		padding: 8px 0;
		font-size: 0.92rem;
		color: #2C2018;
		-webkit-appearance: none;
		appearance: none;
		outline: 0;
	}
	.jol-mobile-search-row .jol-header-search-form input[type="search"]::placeholder {
		color: #B89A78;
		opacity: 0.85;
	}
}

/* Verberg de oude pop-up search button — vervangen door inline form */
.jol-header-search-btn {
	display: none !important;
}

/* ==========================================================================
   Header Search — Instant Search dropdown
   ========================================================================== */
.jol-header-search-form { position: relative; }

.jol-header-search-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0,0,0,0.12);
	max-height: 70vh;
	overflow-y: auto;
	z-index: 1000;
	font-size: 0.9rem;
}
.jol-header-search-dropdown[hidden] { display: none; }

/* Op desktop: dropdown breder dan input voor leesbaarheid */
.l-subheader.at_top .jol-header-search-dropdown {
	min-width: 360px;
	width: 360px;
}

/* Mobile: dropdown matcht volle breedte */
@media (max-width: 900px) {
	.jol-mobile-search-row .jol-header-search-dropdown {
		left: 0; right: 0;
		width: auto;
	}
}

.jol-hs-result {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	text-decoration: none;
	color: #2C2018;
	border-bottom: 1px solid rgba(0,0,0,0.04);
	transition: background 0.12s ease;
}
.jol-hs-result:last-of-type { border-bottom: 0; }
.jol-hs-result:hover { background: #FAF6F2; }
.jol-hs-result__img {
	width: 48px; height: 48px;
	object-fit: cover;
	border-radius: 8px;
	flex-shrink: 0;
	background: #F4EFE9;
}
.jol-hs-result__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jol-hs-result__title {
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.jol-hs-result__price {
	color: #B89A78;
	font-size: 0.82rem;
}

.jol-hs-all {
	display: block;
	padding: 12px 14px;
	background: #FAF6F2;
	color: #B89A78;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	border-top: 1px solid rgba(0,0,0,0.06);
	font-size: 0.85rem;
}
.jol-hs-all:hover { background: #F4EBDF; }

.jol-hs-empty {
	padding: 18px 16px;
	text-align: center;
	color: #635042;
}
.jol-hs-empty p { margin: 0 0 10px; }
.jol-hs-empty__link {
	display: inline-block;
	color: #B89A78;
	font-weight: 600;
	text-decoration: none;
}

.jol-hs-popular { padding: 12px 14px; }
.jol-hs-popular__label {
	display: block;
	color: #B89A78;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-bottom: 8px;
}
.jol-hs-popular__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.jol-hs-chip {
	display: inline-block;
	padding: 5px 12px;
	background: #F4EFE9;
	color: #2C2018;
	border-radius: 14px;
	font-size: 0.82rem;
	text-decoration: none;
	transition: background 0.12s ease;
}
.jol-hs-chip:hover { background: #E8DECE; }

/* ==========================================================================
   Product Filter Bar — kleur + maat boven productgrid
   ========================================================================== */
.jol-filterbar {
	background: #FAF6F2;
	border: 1px solid rgba(0,0,0,0.06);
	border-radius: 14px;
	padding: 12px 16px;
	margin: 16px 0 20px;
	font-size: 0.9rem;
}

/* Active filters chips bovenaan */
.jol-filterbar__active {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px dashed rgba(0,0,0,0.08);
}
.jol-filterbar__active .jol-filterbar__chip--remove {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px 4px 12px;
	background: #B89A78;
	color: #fff;
	border-radius: 14px;
	font-size: 0.82rem;
	text-decoration: none;
	transition: background 0.12s;
}
.jol-filterbar__active .jol-filterbar__chip--remove:hover {
	background: #A38560;
}
.jol-filterbar__clear {
	margin-left: 4px;
	color: #B89A78;
	font-size: 0.82rem;
	text-decoration: underline;
}
.jol-filterbar__clear:hover { color: #A38560; }

/* Groep header + collapsible */
.jol-filterbar__groups {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
.jol-filterbar__group {
	flex: 1 1 280px;
	min-width: 0;
}
.jol-filterbar__summary {
	font-weight: 600;
	color: #2C2018;
	cursor: pointer;
	padding: 6px 0;
	list-style: none;
	user-select: none;
}
.jol-filterbar__summary::-webkit-details-marker { display: none; }
.jol-filterbar__summary::after {
	content: "▾";
	float: right;
	color: #B89A78;
	margin-left: 8px;
	transition: transform 0.15s;
}
.jol-filterbar__group[open] .jol-filterbar__summary::after {
	transform: rotate(180deg);
}
.jol-filterbar__count {
	display: inline-block;
	min-width: 20px;
	padding: 2px 6px;
	background: #B89A78;
	color: #fff;
	border-radius: 10px;
	font-size: 0.7rem;
	text-align: center;
	font-weight: 600;
	margin-left: 4px;
}

/* Items: swatch (kleur) en chip (maat) */
.jol-filterbar__items {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 10px 0 4px;
}

.jol-filterbar__swatch {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	border-radius: 10px;
	text-decoration: none;
	color: #2C2018;
	transition: background 0.12s;
}
.jol-filterbar__swatch:hover { background: rgba(0,0,0,0.04); }
.jol-filterbar__swatch span:first-child {
	display: block;
	width: 28px; height: 28px;
	border-radius: 50%;
	border: 2px solid rgba(0,0,0,0.08);
	box-shadow: 0 1px 2px rgba(0,0,0,0.06);
	transition: transform 0.12s;
}
.jol-filterbar__swatch:hover span:first-child { transform: scale(1.08); }
.jol-filterbar__swatch.is-selected span:first-child {
	border-color: #B89A78;
	box-shadow: 0 0 0 3px rgba(184,154,120,0.25);
}
.jol-filterbar__swatch-label {
	font-size: 0.72rem;
	color: #635042;
	white-space: nowrap;
}

.jol-filterbar__items--chip .jol-filterbar__chip {
	display: inline-block;
	padding: 6px 14px;
	background: #fff;
	color: #2C2018;
	border: 1px solid rgba(0,0,0,0.10);
	border-radius: 18px;
	font-size: 0.85rem;
	text-decoration: none;
	transition: background 0.12s, border-color 0.12s;
}
.jol-filterbar__items--chip .jol-filterbar__chip:hover {
	border-color: #B89A78;
	background: #FAF6F2;
}
.jol-filterbar__items--chip .jol-filterbar__chip.is-selected {
	background: #B89A78;
	color: #fff;
	border-color: #B89A78;
}

@media (max-width: 600px) {
	.jol-filterbar { padding: 10px 12px; }
	.jol-filterbar__groups { gap: 12px; }
	.jol-filterbar__group { flex: 1 1 100%; }
}

/* ==========================================================================
   Variation Cards — tikbare kaartjes/swatches/chips i.p.v. <select>
   ========================================================================== */
/* Verberg de originele select (blijft bereikbaar voor WC's matching engine) */
.jol-vc__hidden-select {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}
/* Neutraliseer Impreza's eigen styled select-wrapper — onze kaartjes
   zitten WITHIN deze wrapper, dus we kunnen 'm niet display:none zetten.
   In plaats daarvan: reset de dropdown-look (pijltje, border, background). */
.jol-vc__hidden-wrap {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	box-shadow: none !important;
	min-height: 0 !important;
}
.jol-vc__hidden-wrap::after,
.jol-vc__hidden-wrap::before,
.jol-vc__hidden-wrap > .l-section,
.jol-vc__hidden-wrap > .w-select-arrow,
.jol-vc__hidden-wrap > svg,
.jol-vc__hidden-wrap .select-arrow,
.jol-vc__hidden-wrap [class*="arrow"] {
	display: none !important;
}

/* Container per attribute */
.jol-vc {
	margin: 8px 0 14px;
}
.jol-vc--card  { display: flex; flex-direction: column; gap: 9px; }
.jol-vc--swatch,
.jol-vc--chip  { display: flex; flex-wrap: wrap; gap: 8px; }

/* Gemeenschappelijke button-styling */
.jol-vc__btn {
	font-family: inherit;
	background: #fff;
	border: 1.5px solid #EBE1D6;
	border-radius: 14px;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
	color: #3A352F;
	position: relative;
}
.jol-vc__btn:hover:not([aria-disabled="true"]) {
	border-color: #DBCDBE;
}
.jol-vc__btn:active:not([aria-disabled="true"]) {
	transform: scale(0.992);
}
.jol-vc__btn:focus-visible {
	outline: 2px solid #8C7569;
	outline-offset: 2px;
}
.jol-vc__btn[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.62;
	background: #FBF9F6;
}

.jol-vc__btn.is-selected {
	border-color: #8C7569;
	box-shadow: 0 0 0 1px #8C7569, 0 1px 2px rgba(58,53,47,0.06), 0 8px 24px rgba(58,53,47,0.08);
}

/* ── Card-style (pa_maat) ── */
.jol-vc__btn--card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 13px;
	width: 100%;
	text-align: left;
	padding: 11px 14px;
}
.jol-vc__chip {
	flex: 0 0 auto;
	min-width: 44px;
	height: 44px;
	border-radius: 12px;
	background: #FAF7F3;
	border: 1px solid #EBE1D6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	color: #3A352F;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.jol-vc__chip--is-short  { width: 44px; font-size: 18px; padding: 0; }
.jol-vc__chip--is-medium {
	width: auto;
	min-width: 56px;
	padding: 0 14px;
	font-size: 16px;
}
.jol-vc__chip--is-long {
	width: max-content;
	max-width: 100%;
	min-width: 76px;
	padding: 0 16px;
	font-size: 14px;
	letter-spacing: -0.01em;
}
.jol-vc__btn--card.is-selected .jol-vc__chip {
	background: #8C7569;
	color: #fff;
	border-color: #8C7569;
}
.jol-vc__stock {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11.5px;
	font-weight: 700;
	padding: 5px 9px;
	border-radius: 20px;
	white-space: nowrap;
}
.jol-vc__led {
	width: 7px; height: 7px;
	border-radius: 50%;
	flex: 0 0 auto;
}
.jol-vc__stock--in { background: #EAF0E7; color: #5F7D5A; }
.jol-vc__stock--in .jol-vc__led { background: #5F7D5A; }
.jol-vc__stock--low { background: #F7EDDA; color: #B07D2E; }
.jol-vc__stock--low .jol-vc__led { background: #B07D2E; }
.jol-vc__stock--out { background: #F0ECE7; color: #A89E92; }
.jol-vc__stock--out .jol-vc__led { background: #A89E92; }

.jol-vc__check {
	position: absolute;
	top: 10px;
	right: 12px;
	color: #8C7569;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.jol-vc__btn--card.is-selected .jol-vc__check { opacity: 1; }
.jol-vc__btn--card.is-selected::after {
	content: "";
	position: absolute;
	left: 0; top: 11px; bottom: 11px;
	width: 4px;
	background: #A65A3F;
	border-radius: 0 4px 4px 0;
}

/* ── Swatch-style (pa_kleur) ── vierkante tegels met variation-image,
   premium pattern (Liewood/Konges/H&M) — naam BOVEN grid, geen labels onder */

/* Header — "Kleur: bloem bruin" met dynamisch update bij selectie */
.jol-vc__sel-name {
	font-size: 14.5px;
	color: #6F665C;
	margin: 4px 0 12px;
	display: flex;
	gap: 0;
	align-items: baseline;
	flex-wrap: wrap;
}
/* "Kleur: waarde" — dubbele punt direct achter het label, spatie erna */
.jol-vc__sel-name .jol-vc__sel-sep { margin-left: 0; }
.jol-vc__sel-name .jol-vc__sel-value { margin-left: 6px; }
.jol-vc__sel-label {
	font-weight: 700;
	color: #3A352F;
}
.jol-vc__sel-sep {
	color: #3A352F;
	font-weight: 700;
}
.jol-vc__sel-value {
	color: #2C2018;
	font-weight: 500;
}
.jol-vc__sel-name:not(.has-value) .jol-vc__sel-sep { display: none; }
.jol-vc__sel-name:not(.has-value) .jol-vc__sel-value::before {
	content: '— kies hieronder';
	color: #A89E92;
	font-style: italic;
	font-weight: 400;
}

/* Grid van vierkante tegels — auto-fit zodat het ook bij 31 swatches mooi blijft */
.jol-vc--swatch {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: 12px;
}

.jol-vc__btn--swatch {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	position: relative;
	aspect-ratio: 1 / 1;
}
.jol-vc__btn--swatch:focus-visible {
	outline: 2px solid #8C7569;
	outline-offset: 3px;
	border-radius: 14px;
}

.jol-vc__swatch-tile {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	border: 1px solid rgba(0,0,0,0.08);
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	background-size: cover;
	background-position: center;
	background-color: #EBE1D6;
	position: relative;
	overflow: hidden;
	transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.jol-vc__btn--swatch:hover:not([aria-disabled="true"]) .jol-vc__swatch-tile {
	transform: scale(1.04);
}
.jol-vc__btn--swatch.is-selected .jol-vc__swatch-tile {
	border-color: transparent;
	box-shadow: 0 0 0 3px #8C7569, 0 2px 6px rgba(0,0,0,0.12);
}

/* Check icoon binnen tegel — alleen op selected */
.jol-vc__swatch-check {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(140,117,105,0.45);
	opacity: 0;
	transition: opacity 0.15s ease;
}
.jol-vc__btn--swatch.is-selected .jol-vc__swatch-check { opacity: 1; }
.jol-vc__swatch-check svg {
	width: 28px;
	height: 28px;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}

/* Niet beschikbaar in de huidige combinatie (bv. deze kleur bestaat niet
   in de gekozen maat) — sterk dimmen, klik geblokkeerd in JS. Geldt voor
   alle stijlen (card, swatch, chip). */
.jol-vc__btn.is-unavailable {
	opacity: 0.3;
	cursor: not-allowed;
	filter: grayscale(0.7);
}

/* Out of stock — diagonale streep + opacity, blijft tappable */
.jol-vc__btn--swatch[aria-disabled="true"] {
	cursor: not-allowed;
}
.jol-vc__btn--swatch[aria-disabled="true"] .jol-vc__swatch-tile {
	opacity: 0.55;
}
.jol-vc__btn--swatch[aria-disabled="true"] .jol-vc__swatch-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top right,
		transparent calc(50% - 1px),
		rgba(58,53,47,0.65) calc(50% - 1px),
		rgba(58,53,47,0.65) calc(50% + 1px),
		transparent calc(50% + 1px)
	);
}

/* Mini-LED — kleine dot rechtsboven swatch (subtieler dan in pre-refactor) */
.jol-vc__btn--swatch .jol-vc__mini-led {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 1.5px solid #fff;
	box-shadow: 0 0 0 0.5px rgba(0,0,0,0.1);
}
.jol-vc__mini-led--in   { background: #5F7D5A; }
.jol-vc__mini-led--low  { background: #B07D2E; }
.jol-vc__mini-led--out  { background: #A89E92; }

@media (max-width: 600px) {
	.jol-vc--swatch {
		grid-template-columns: repeat(4, 1fr);
		gap: 10px;
	}
	.jol-vc__sel-name { font-size: 13.5px; }
}

/* ── Chip-style (overige attributes) ── */
.jol-vc__btn--chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 18px;
	font-size: 14px;
}
.jol-vc__btn--chip.is-selected {
	background: #8C7569;
	color: #fff;
	border-color: #8C7569;
}
.jol-vc__chip-label { display: inline-block; }

.jol-vc__sr {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
}

/* ── Selection summary (boven add-to-cart) ── */
.jol-vc-summary {
	font-size: 13.5px;
	color: #6F665C;
	min-height: 22px;
	margin: 4px 0 10px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.jol-vc-summary__ok { display: none; color: #5F7D5A; align-items: center; gap: 6px; }
.jol-vc-summary__check svg { vertical-align: middle; }
.jol-vc-summary.has .jol-vc-summary__prompt { display: none; }
.jol-vc-summary.has .jol-vc-summary__ok { display: inline-flex; }
.jol-vc-summary__text { color: #3A352F; font-weight: 700; }

/* Voor producten met SWATCH-only (kleur) — de summary toont al "Gekozen: X"
   inline in onze .jol-vc__sel-name header boven de grid. Voorkom dubbele
   uiting door de summary te verbergen alleen op pure swatch-only forms. */
.variations_form:has(.jol-vc__tr--swatch):not(:has(.jol-vc--card)) .jol-vc-summary {
	display: none;
}

/* Verberg de oude jol-stock-* option-text classes — niet meer relevant */
.variations select option.jol-stock-in,
.variations select option.jol-stock-backorder,
.variations select option.jol-stock-oos { color: inherit; text-decoration: none; }

/* Verberg WC's "× wis variantkeuze"-link — onze swatches/cards laten
   je gewoon een andere optie klikken om te wisselen. */
.variations_form .reset_variations,
.variations_form a.reset_variations {
	display: none !important;
}

/* Label "Maat" / "Kleur" zonder pointer-gedrag — we hebben de for-id
   weggehaald in JS zodat klikken op het label NIET de verborgen
   native dropdown opent. */
.jol-vc__label-static {
	cursor: default !important;
}

/* Voor swatches verbergen we het oude th-label "Kleur" — onze
   dynamische .jol-vc__sel-name (boven de grid) vervangt 'm. */
.variations tr.jol-vc__tr--swatch th.label,
.variations tr.jol-vc__tr--swatch td.label {
	display: none !important;
}

/* Tabellen met een swatch-rij uit table-layout halen. Een display:block
   TR binnen een table-row-group krijgt shrink-to-fit breedte (anonieme
   table-box), waardoor de swatch-grid op multi-attribuut producten
   (maat + kleur) tot ~40% kromp. Table + tbody → block, overige rijen
   (maat-cards) → flex met label links. */
.variations:has(tr.jol-vc__tr--swatch) {
	display: block !important;
	width: 100% !important;
}
.variations:has(tr.jol-vc__tr--swatch) tbody {
	display: block !important;
	width: 100% !important;
}
.variations:has(tr.jol-vc__tr--swatch) tr:not(.jol-vc__tr--swatch) {
	display: flex !important;
	align-items: flex-start !important;
	gap: 14px !important;
	width: 100% !important;
	margin-bottom: 10px !important;
}
.variations:has(tr.jol-vc__tr--swatch) tr:not(.jol-vc__tr--swatch) th.label {
	flex: 0 0 auto !important;
	padding-top: 14px !important;
}
.variations:has(tr.jol-vc__tr--swatch) tr:not(.jol-vc__tr--swatch) td.value {
	flex: 1 !important;
	min-width: 0 !important;
}
.variations tr.jol-vc__tr--swatch {
	display: block !important;
	width: 100% !important;
}
.variations tr.jol-vc__tr--swatch td.value {
	display: block !important;
	width: 100% !important;
	padding: 0 !important;
}

/* ==========================================================================
   Verberg Impreza's "Maat: X, Y, Z" attribuut-tekst in gerelateerde producten
   ("Wellicht is dit ook wat voor jou").
   - Verwarrend voor klant (lijkt op variant-keuze op de kaart zelf)
   - De link ging naar /?taxonomy=pa_maat&term=X wat terugvalt naar homepage
     omdat pa_maat niet als public-taxonomy is geregistreerd
   ========================================================================== */
.single-product .w-post-elm.post_taxonomy,
.w-grid .w-post-elm.post_taxonomy {
	display: none !important;
}

/* ==========================================================================
   Mobile PDP — verwijder Impreza's lege ruimte tussen zoekbalk en content.
   Kleertjes.com pattern: direct van zoekbalk naar breadcrumb, geen leemte.
   ========================================================================== */
@media (max-width: 900px) {
	/* Reset Impreza's l-main top padding */
	.single-product .l-main,
	.single-product .l-canvas .l-main {
		padding-top: 0 !important;
	}
	/* Zoekbalk-row zelf compacter (was 6px 12px) */
	.jol-mobile-search-row {
		padding: 6px 12px 4px !important;
	}
	/* Impreza's .height_small section (PDP-breadcrumb-container) had
	   ~180px verspilling. Push alle interne padding naar 0 op mobile. */
	.single-product .l-section.height_small,
	.l-section.height_small.product {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		min-height: 0 !important;
	}
	.single-product .l-section.height_small .l-section-h,
	.l-section.height_small.product .l-section-h {
		min-height: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	/* WPBakery-column-wrappers binnen die section — vaak +30-60px extra */
	.single-product .l-section.height_small .g-cols,
	.single-product .l-section.height_small .wpb_column,
	.single-product .l-section.height_small .vc_column-inner {
		padding: 0 !important;
		margin: 0 !important;
	}
	/* Breadcrumbs met minimale ademruimte */
	.jol-breadcrumbs {
		margin: 6px 0 6px !important;
		padding: 0 !important;
	}
}

/* --------------------------------------------------------------------------
   Google Reviews — homepage social proof (statisch blok, template-home.php)
   -------------------------------------------------------------------------- */
.jol-reviews {
	background: #faf6f1;
	border-top: 1px solid rgba(212, 165, 122, 0.12);
}

.jol-reviews__header {
	text-align: center;
	margin-bottom: 1.75rem;
}

.jol-reviews__score {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.4rem;
}

.jol-reviews__stars,
.jol-reviews__card-stars {
	color: #F4B400;
	letter-spacing: 2px;
	font-size: 1.05rem;
}

.jol-reviews__rating {
	color: var(--jol-text);
	font-size: 0.95rem;
}

.jol-reviews__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

.jol-reviews__card {
	margin: 0;
	background: #fff;
	border-radius: var(--jol-radius-sm);
	box-shadow: var(--jol-shadow);
	padding: 1.5rem 1.4rem 1.25rem;
	display: flex;
	flex-direction: column;
}

.jol-reviews__card-stars {
	font-size: 0.9rem;
	margin-bottom: 0.6rem;
}

.jol-reviews__card p {
	margin: 0 0 0.9rem;
	font-size: 0.94rem;
	line-height: 1.65;
	color: var(--jol-text);
	flex: 1;
}

.jol-reviews__card footer {
	font-weight: 600;
	font-size: 0.88rem;
	color: var(--jol-heading);
}

.jol-reviews__cta {
	text-align: center;
	margin: 1.75rem 0 0;
}

.jol-reviews__cta a {
	color: var(--jol-primary-dark);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(192, 141, 94, 0.35);
	transition: var(--jol-transition);
}

.jol-reviews__cta a:hover {
	color: var(--jol-heading);
	border-bottom-color: var(--jol-heading);
}

@media (max-width: 800px) {
	.jol-reviews__grid {
		grid-template-columns: 1fr;
		gap: 0.9rem;
	}
	.jol-reviews__card {
		padding: 1.2rem 1.15rem 1rem;
	}
}