/* Lingerie van Bokhoven: shoptegels, subcategorie-slider en filterbalk */

:root {
	--lvb-goud: #b08b3f;
	--lvb-lijn: #e5e0d8;
	--lvb-zacht: #f6f3ee;
	--lvb-tekst: #1c1c1c;
}

/* ================= Shoppagina: assortimenttegels ================= */

.lvb-assortiment {
	margin: 0 0 50px;
	text-align: center;
}

.lvb-assortiment__kop {
	margin: 0 0 6px;
	color: var(--lvb-goud);
	font-size: 17px;
	font-style: italic;
	letter-spacing: .02em;
}

.lvb-assortiment__titel {
	margin: 0 0 34px;
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 400;
	line-height: 1.15;
}

.lvb-shop-tiles {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 18px;
	text-align: left;
}

.lvb-tile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	background: #d9d9d9 center/cover no-repeat;
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	transition: transform .3s ease, box-shadow .3s ease;
}

.lvb-tile--span3 {
	grid-column: span 3;
}

.lvb-tile--span4 {
	grid-column: span 4;
	min-height: 420px;
}

.lvb-tile:hover,
.lvb-tile:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .13);
}

/* Het witte pilletje met de categorienaam. */
.lvb-tile__label {
	position: relative;
	z-index: 1;
	padding: 11px 26px;
	background: #fff;
	border-radius: 999px;
	color: var(--lvb-tekst);
	font-size: 17px;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
	transition: background .25s ease, color .25s ease;
}

.lvb-tile:hover .lvb-tile__label {
	background: var(--lvb-tekst);
	color: #fff;
}

/* Zolang er nog geen categoriefoto is, een rustige achtergrond. */
.lvb-tile--leeg {
	background: linear-gradient(160deg, #e9e4dc, #d6cec2);
}

@media (max-width: 1024px) {
	.lvb-tile--span3 {
		grid-column: span 6;
	}

	.lvb-tile--span4 {
		grid-column: span 6;
		min-height: 320px;
	}
}

@media (max-width: 600px) {
	.lvb-shop-tiles {
		gap: 12px;
	}

	.lvb-tile--span3,
	.lvb-tile--span4 {
		grid-column: span 12;
		min-height: 220px;
	}

	.lvb-tile__label {
		padding: 9px 20px;
		font-size: 14px;
	}
}

/* ================= Categoriepagina: subcategorie-tegels ================= */

.lvb-subcats {
	--lvb-tegels: 9;
	--lvb-gat: 16px;
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 0 30px;
}

.lvb-subcats__track {
	display: flex;
	gap: var(--lvb-gat);
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	padding: 4px 2px 8px;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.lvb-subcats__track::-webkit-scrollbar {
	display: none;
}

/* Precies 9 tegels binnen de breedte van de productlijst, de rest scrollt. */
.lvb-subcat {
	flex: 0 0 calc((100% - (var(--lvb-tegels) - 1) * var(--lvb-gat)) / var(--lvb-tegels));
	min-width: 0;
	scroll-snap-align: start;
	text-align: center;
	text-decoration: none;
	color: var(--lvb-tekst);
}

.lvb-subcat__img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin-bottom: 10px;
	background: var(--lvb-zacht) center/contain no-repeat;
	border: 2px solid transparent;
	border-radius: 14px;
	transition: border-color .2s ease, transform .2s ease;
}

.lvb-subcat__img--leeg {
	font-size: 34px;
	font-weight: 300;
	color: #bcae97;
}

.lvb-subcat:hover .lvb-subcat__img {
	transform: translateY(-3px);
}

.lvb-subcat.is-active .lvb-subcat__img {
	border-color: var(--lvb-goud);
}

.lvb-subcat__label {
	display: block;
	font-size: 14px;
	line-height: 1.35;
}

.lvb-subcat.is-active .lvb-subcat__label {
	font-weight: 600;
	color: var(--lvb-goud);
}

/* De pijlen staan naast de tegels, niet erover. De verticale positie wordt
   door het script exact op het midden van de vierkantjes gezet. */
.lvb-subcats__nav {
	position: absolute;
	top: 50px;
	transform: translateY(-50%);
	z-index: 2;
	display: none;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background: #fff;
	border: 1px solid var(--lvb-lijn);
	border-radius: 50%;
	color: #444;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
	transition: background .2s ease, border-color .2s ease;
}

.lvb-subcats__nav:hover {
	background: var(--lvb-zacht);
	border-color: #cfc6b6;
}

.lvb-subcats__nav--prev {
	left: -52px;
}

.lvb-subcats__nav--next {
	right: -52px;
}

.lvb-subcats.has-overflow .lvb-subcats__nav {
	display: flex;
}

/* Onder deze breedte is er geen ruimte naast de container. Daar schuif je
   met het touchscreen of het trackpad, dus dan geen pijlen. */
@media (max-width: 1250px) {
	.lvb-subcats.has-overflow .lvb-subcats__nav {
		display: none;
	}
}

.lvb-subcats.at-start .lvb-subcats__nav--prev,
.lvb-subcats.at-end .lvb-subcats__nav--next {
	opacity: .3;
	pointer-events: none;
}

.lvb-subcats__hint {
	margin: -18px 0 22px;
	font-size: 13px;
	color: #777;
}

@media (max-width: 1200px) {
	.lvb-subcats {
		--lvb-tegels: 7;
	}
}

@media (max-width: 900px) {
	.lvb-subcats {
		--lvb-tegels: 5;
	}
}

@media (max-width: 600px) {
	.lvb-subcats {
		--lvb-tegels: 3.5;
		--lvb-gat: 10px;
	}

	.lvb-subcat__label {
		font-size: 13px;
	}
}

/* ================= Filterbalk ================= */

.lvb-filterbar {
	margin: 0 0 26px;
}

.lvb-filterbar__row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.lvb-fb {
	position: relative;
}

.lvb-fb__knop {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 158px;
	padding: 13px 18px;
	background: #fff;
	border: 1px solid var(--lvb-lijn);
	border-radius: 8px;
	font-size: 15px;
	list-style: none;
	cursor: pointer;
	user-select: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.lvb-fb__knop::-webkit-details-marker {
	display: none;
}

.lvb-fb__knop:hover {
	border-color: #cfc6b6;
}

.lvb-fb.is-active .lvb-fb__knop {
	border-color: var(--lvb-goud);
}

.lvb-fb__teller {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	background: var(--lvb-goud);
	border-radius: 999px;
	color: #fff;
	font-size: 12px;
}

.lvb-fb__pijl {
	margin-left: auto;
	width: 9px;
	height: 9px;
	border-right: 2px solid #555;
	border-bottom: 2px solid #555;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s ease;
}

.lvb-fb[open] .lvb-fb__pijl {
	transform: rotate(-135deg) translate(-3px, -3px);
}

.lvb-fb--sorteer .lvb-fb__pijl {
	transform: none;
	width: 12px;
	height: 12px;
	border: 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4v13M7 20l-3-3M7 20l3-3M17 20V7M17 4l3 3M17 4l-3 3'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4v13M7 20l-3-3M7 20l3-3M17 20V7M17 4l3 3M17 4l-3 3'/%3E%3C/svg%3E") center/contain no-repeat;
}

.lvb-fb__paneel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 30;
	min-width: 240px;
	max-width: 340px;
	max-height: 380px;
	overflow-y: auto;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--lvb-lijn);
	border-radius: 8px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
}

.lvb-fb__kop {
	margin: 12px 0 6px;
	color: #8a8a8a;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.lvb-fb__kop:first-child {
	margin-top: 0;
}

.lvb-fb__opties {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lvb-fb__optie {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	color: var(--lvb-tekst);
	font-size: 15px;
	text-decoration: none;
}

.lvb-fb__optie:hover .lvb-fb__naam {
	color: var(--lvb-goud);
}

.lvb-fb__vink {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	border: 1px solid #c9c2b6;
	border-radius: 3px;
}

.lvb-fb__optie.is-aan .lvb-fb__vink {
	background: var(--lvb-goud) center/11px no-repeat;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E");
	border-color: var(--lvb-goud);
}

.lvb-fb__optie.is-aan .lvb-fb__naam {
	font-weight: 600;
}

/* Kleuren als rondjes, twee kolommen. */
.lvb-fb__opties--swatch {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 12px;
}

.lvb-fb__swatch {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: 50%;
}

.lvb-fb__optie.is-aan .lvb-fb__swatch {
	outline: 2px solid var(--lvb-goud);
	outline-offset: 2px;
}

/* Actieve filters als chips onder de balk. */
.lvb-filterbar__actief {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.lvb-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 13px;
	background: var(--lvb-zacht);
	border: 1px solid var(--lvb-lijn);
	border-radius: 999px;
	color: var(--lvb-tekst);
	font-size: 13px;
	text-decoration: none;
}

.lvb-chip:hover {
	border-color: var(--lvb-goud);
}

.lvb-chip span {
	font-size: 15px;
	line-height: 1;
	color: #999;
}

.lvb-chip--wis {
	background: none;
	border-style: dashed;
}

@media (max-width: 600px) {
	.lvb-filterbar__row {
		gap: 8px;
	}

	.lvb-fb__knop {
		min-width: 0;
		padding: 11px 14px;
		font-size: 14px;
	}

	.lvb-fb__paneel {
		min-width: 220px;
	}
}

/* ================= Kleurbolletjes ================= */

.lvb-swatches {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
}

.lvb-swatches--loop {
	margin: 0 0 9px;
}

.lvb-swatch {
	display: block;
	width: 22px;
	height: 22px;
	background-position: center;
	background-size: cover;
	border: 1px solid rgba(0, 0, 0, .16);
	border-radius: 50%;
	transition: transform .15s ease, box-shadow .15s ease;
}

.lvb-swatch:hover {
	transform: scale(1.12);
}

.lvb-swatch.is-actief {
	box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--lvb-tekst);
}

.lvb-swatch__meer {
	font-size: 12px;
	color: #8a8a8a;
}

/* Op de productpagina iets groter, met de kleurnaam erboven. */
.lvb-kleurkeuze {
	margin: 0 0 18px;
}

.lvb-kleurkeuze__label {
	margin: 0 0 8px;
	font-size: 14px;
	color: #555;
}

.lvb-swatches--single .lvb-swatch {
	width: 34px;
	height: 34px;
}

.lvb-swatches--single .lvb-swatch.is-actief {
	box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--lvb-goud);
}

/* Verwisselde productfoto niet laten wegvallen door lazy-load-opmaak. */
.lvb-verwisseld {
	opacity: 1 !important;
	visibility: visible !important;
}

.lvb-swatch {
	cursor: pointer;
}

/* Zoekveld binnen een filter met veel opties. */
.lvb-fb__zoekrij {
	position: sticky;
	top: 0;
	z-index: 1;
	margin: -14px -16px 8px;
	padding: 12px 16px 8px;
	background: #fff;
}

.lvb-fb__zoek {
	width: 100%;
	padding: 7px 10px;
	background: #fff;
	border: 1px solid var(--lvb-lijn);
	border-radius: 6px;
	font-size: 14px;
}

.lvb-fb__zoek:focus {
	border-color: var(--lvb-goud);
	outline: none;
}

.lvb-fb__geenresultaat {
	margin: 8px 0 0;
	font-size: 13px;
	color: #8a8a8a;
}

/* Bh-maten als knopjes, gegroepeerd per cupmaat. */
.lvb-fb__opties--maat {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 7px;
	margin-bottom: 6px;
}

.lvb-fb__maat {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 9px 4px;
	background: #fff;
	border: 1px solid var(--lvb-lijn);
	border-radius: 7px;
	color: var(--lvb-tekst);
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .15s ease, background .15s ease;
}

.lvb-fb__maat:hover {
	border-color: #cfc6b6;
	background: var(--lvb-zacht);
}

.lvb-fb__maat.is-aan {
	background: var(--lvb-tekst);
	border-color: var(--lvb-tekst);
	color: #fff;
	font-weight: 600;
}

/* Het maatpaneel mag breder, anders passen er geen vier knopjes naast elkaar. */
.lvb-fb--maat .lvb-fb__paneel {
	min-width: 320px;
	max-width: 380px;
}

@media (max-width: 600px) {
	.lvb-fb__opties--maat {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Kleuren die geen hexcode hebben: Print en Transparant. */
.lvb-swatch--print {
	background:
		conic-gradient(from 45deg,
			#b3202c 0 25%, #f2c744 25% 50%, #2e5fa3 50% 75%, #4a7c59 75% 100%) !important;
}

.lvb-swatch--transparant {
	background:
		linear-gradient(45deg, rgba(0, 0, 0, .14) 25%, transparent 25% 75%, rgba(0, 0, 0, .14) 75%),
		linear-gradient(45deg, rgba(0, 0, 0, .14) 25%, transparent 25% 75%, rgba(0, 0, 0, .14) 75%),
		#fff !important;
	background-size: 8px 8px !important;
	background-position: 0 0, 4px 4px !important;
}

/* ================= Pakket samenstellen ================= */

.lvb-pakket {
	margin: 0 0 24px;
	padding: 18px 20px;
	background: var(--lvb-zacht);
	border: 1px solid var(--lvb-lijn);
	border-radius: 10px;
}

.lvb-pakket__intro {
	margin: 0 0 14px;
	font-size: 14px;
	color: #555;
}

.lvb-pakket__rij {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--lvb-lijn);
}

.lvb-pakket__rij:first-of-type {
	border-top: 0;
}

.lvb-pakket__nr {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	margin-bottom: 4px;
	background: #fff;
	border: 1px solid var(--lvb-lijn);
	border-radius: 50%;
	font-size: 13px;
	color: #777;
}

.lvb-pakket__veld {
	flex: 1 1 0;
	min-width: 0;
}

.lvb-pakket__veld > span {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #8a8a8a;
}

.lvb-pakket__veld select {
	width: 100%;
	padding: 9px 10px;
	background: #fff;
	border: 1px solid var(--lvb-lijn);
	border-radius: 7px;
	font-size: 15px;
}

.lvb-pakket__rij.is-onvolledig select {
	border-color: #c0392b;
}

.lvb-pakket__knop {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin-top: 16px;
}

.lvb-pakket__prijs {
	font-weight: 600;
}

.lvb-pakket__prijs del {
	display: none;
}

.lvb-pakket__melding {
	margin: 10px 0 0;
	font-size: 14px;
	color: #c0392b;
}

@media (max-width: 600px) {
	.lvb-pakket__rij {
		flex-wrap: wrap;
	}

	.lvb-pakket__veld {
		flex: 1 1 100%;
	}
}

/* ============================================================
   Afsluitende balk onderaan de footer
   ============================================================ */

.lvb-slotbalk {
	border-top: 1px solid rgba(47, 43, 38, .12);
	margin-top: 26px;
	padding: 18px 0 4px;
}

.lvb-slotbalk__binnen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 26px;
	max-width: 1222px;
	margin: 0 auto;
	padding: 0 15px;
}

.lvb-slotbalk__recht {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	opacity: .78;
}

.lvb-slotbalk__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
}

.lvb-slotbalk__links a {
	font-size: 13.5px;
	line-height: 1.5;
	text-decoration: none;
	opacity: .78;
	border-bottom: 1px solid transparent;
	transition: opacity .18s ease, border-color .18s ease;
}

.lvb-slotbalk__links a:hover,
.lvb-slotbalk__links a:focus-visible {
	opacity: 1;
	border-bottom-color: currentColor;
}

@media (max-width: 600px) {
	.lvb-slotbalk__binnen {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

/* ============================================================
   Footer: bijwerk van de losse onderdelen

   LET OP: het kolomraster van de footer staat NIET hier, maar in de Custom CSS
   van het thema (optie xts-woodmart-options['custom_css'], gecompileerd naar
   uploads/2026/07/xts-theme_settings_default-*.css). Daar stond het al toen ik
   het overnam, en daar staat het met !important, dus dat blijft de ene plek
   voor de indeling. Hier alleen de opmaak van de onderdelen zelf.
   ============================================================ */

/* De kolommen zijn flexblokken, waardoor de widget erin naar zijn eigen inhoud
   kromp: de betaallogo's kregen 119 pixels in een kolom van 209 en gingen over
   elkaar heen. De inhoud van een kolom moet de volle kolombreedte krijgen. */
.wd-footer .elementor-element-3eca3a0 > .e-con > .elementor-widget,
.wd-footer .elementor-element-3eca3a0 > .e-con > .e-con {
	width: 100% !important;
	max-width: 100%;
	flex: 1 1 auto;
}

/* Het logo is vierkant, dus begrenzen op breedte en hoogte tegelijk. Nu er een
   kolom minder is, is er ruimte om het wat groter te zetten. */
.wd-footer .elementor-element-7f7a3c5 img {
	width: 100%;
	max-width: 200px;
	height: auto;
}

/* De kop Contact is een link naar de contactpagina. Hij moet dezelfde kleur en
   grootte houden als de andere kolomkoppen, met alleen een lijntje bij hover. */
.wd-footer .wd-el-toggle-title a {
	color: inherit;
	font: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .15s ease-in-out;
}

.wd-footer .wd-el-toggle-title a:hover,
.wd-footer .wd-el-toggle-title a:focus-visible {
	color: inherit;
	border-bottom-color: currentColor;
}

/* De betaallogo's staan onder elkaar in hun eigen smalle kolom rechts. */
.wd-footer .elementor-element-d120465 {
	display: flex !important;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 9px;
	width: 100%;
}

.wd-footer .elementor-element-d120465 > .elementor-widget-image {
	flex: 0 0 auto;
	width: auto !important;
	max-width: none;
	margin: 0;
}

.wd-footer .elementor-element-d0f5272 .elementor-widget-image figure,
.wd-footer .elementor-element-d0f5272 .elementor-widget-container {
	margin: 0;
}

.wd-footer .elementor-element-d0f5272 img {
	display: block;
	width: auto;
	height: 22px;
	border-radius: 3px;
}

/* De contactregels stonden tegen elkaar aan. */
.wd-footer .elementor-element-489011b .elementor-icon-list-items {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wd-footer .elementor-element-489011b .elementor-icon-list-item {
	align-items: flex-start;
	line-height: 1.5;
}

.wd-footer .elementor-element-489011b .elementor-icon-list-icon {
	padding-top: 3px;
}

/* De slotbalk sluit de footer af, dus daar geen dubbele witruimte onder. */
.wd-footer .main-footer {
	padding-bottom: 0;
}

.wd-footer .elementor-element-lvbslot1 {
	width: 100%;
}

@media (max-width: 1024px) {
	.wd-footer .elementor-element-7f7a3c5 img {
		max-width: 160px;
	}
}