/* SMUK – productlijsten: tweede afbeelding bij hover (vervangt TP Product Image Flipper), 23 okt 2026 */
.et_shop_image.smuk-has-flip { position: relative; display: block; overflow: hidden; }
.et_shop_image .smuk-flip {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}
li.product:hover .et_shop_image .smuk-flip,
li.product a:focus-visible .et_shop_image .smuk-flip { opacity: 1; }

/* Touchscreens hebben geen hover: daar de extra afbeelding niet tonen (en dus niet laden) */
@media (hover: none) {
	.et_shop_image .smuk-flip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.et_shop_image .smuk-flip { transition: none; }
}

/* ---- Verlanglijst (lichte eigen versie, 23 okt 2026) ---- */
li.product { position: relative; }
.smuk-wl-btn {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	cursor: pointer;
	font: inherit;
	color: #0d0905;
}
.smuk-wl-heart { fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
.smuk-wl-btn[aria-pressed="true"] .smuk-wl-heart { fill: #e8c1c0; }
.smuk-wl-btn--loop {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
}
.smuk-wl-btn--loop:hover { background: #f9f4ee; }
.smuk-wl-btn--single {
	margin-top: 14px;
	padding: 11px 18px;
	border: 1px solid #0d0905;
	border-radius: 6px;
	background: transparent;
	font-weight: 600;
}
.smuk-wl-btn--single:hover { background: #f9f4ee; }

/* Header: icoon (40 px), bij hover schuift het label in, zoals bij Account en Zoeken */
.molti-wishlist { overflow: hidden; white-space: nowrap; }
.molti-wishlist p { padding: 0 !important; }
.smuk-wl-link { position: relative; display: inline-flex; align-items: center; gap: 12px; color: #0d0905 !important; text-decoration: none; font-weight: 600; font-size: 15px; line-height: 20px; }
.smuk-wl-count {
	position: absolute;
	top: -7px;
	left: 11px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: #d8c0de;
	color: #0d0905;
	font-size: 11px;
	line-height: 17px;
	text-align: center;
}

/* Verlanglijst-pagina */
.smuk-wl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px; margin: 0; padding: 0 !important; list-style: none; }
.smuk-wl-item { margin: 0; padding: 0; list-style: none; }
.smuk-wl-thumb img { display: block; width: 100%; height: auto; border-radius: 8px; }
.smuk-wl-name { margin: 12px 0 4px; padding: 0; font-size: 18px; line-height: 1.3; }
.smuk-wl-name a { color: #0d0905; }
.smuk-wl-price { margin: 0 0 6px; padding: 0; font-weight: 600; color: #0d0905; }
.smuk-wl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 0; }
.smuk-wl-actions .smuk-wl-btn--single { margin-top: 0; padding: 8px 14px; }
.smuk-wl-view, .smuk-wl-shop { color: #0d0905; font-weight: 600; text-decoration: underline; }
.smuk-wl-empty { font-size: 17px; }

/* Header desktop: Molti trok de winkelwagen 45 px over het wishlist-icoon heen (bedoeld voor de oude TI-teller) */
@media (min-width: 981px) {
	.molti-header-9-10 .molti-wishlist { margin-right: -2px !important; }
	.molti-header-9-10 .molti-cart-launcher { margin-left: 15px !important; }
}
@media (max-width: 980px) {
	.molti-header-9-10 .molti-wishlist { margin-right: 0 !important; }
	.molti-header-9-10 .molti-cart-launcher { margin-left: 8px !important; }
}

/* Mobiel: totaalbedrag naast de header-cart viel buiten beeld; alleen icoon + aantal tonen */
@media (max-width:980px){.molti-cart-launcher .cpops-launcher__total{display:none!important}}

/* Aantal-badge van de header-cart binnen de knop (viel door overflow:hidden grotendeels weg) */
html body .molti-header-9-10 .cpops-toggle-drawer .cpops-launcher__badge{left:auto!important;right:1px!important;top:1px!important;min-width:16px!important;width:auto!important;height:16px!important;padding:0 4px!important;font-size:10px!important;line-height:16px!important}

/* Header-cart op desktop altijd open: icoon + aantal + bedrag (23 okt). Molti zette de knop absoluut op 40 px en klapte hem alleen bij hover uit */
@media (min-width:981px){
html body .molti-header-9-10 .molti-cart-launcher,html body .molti-header-9-10 .molti-cart-launcher:hover{width:auto!important;margin-right:12px!important}
html body .molti-header-9-10 .cpops-toggle-drawer,html body .molti-header-9-10 .cpops-toggle-drawer:hover{position:relative!important;left:0!important;width:auto!important;min-width:40px;padding:9px 14px 4px 9px!important;white-space:nowrap}
html body .molti-header-9-10 .cpops-toggle-drawer .amount,html body .molti-header-9-10 .cpops-toggle-drawer:hover .amount{left:0}
html body .molti-header-9-10 .et_pb_column_3_tb_header>.et_pb_module{flex-shrink:0!important}
}
/* Smalle desktop: kleinere tussenruimte, anders schuiven de iconen over "Klantenservice" */
@media (min-width:981px) and (max-width:1099px){
html body .molti-header-9-10 .molti-search-button,html body .molti-header-9-10 .molti-wishlist{margin-left:6px!important}
html body .molti-header-9-10 .molti-cart-launcher,html body .molti-header-9-10 .molti-cart-launcher:hover{margin-left:6px!important;margin-right:0!important}
html body .molti-header-9-10 .cpops-toggle-drawer,html body .molti-header-9-10 .cpops-toggle-drawer:hover{padding-right:9px!important}
}

/* Productpagina: SKU + oriëntatie als kleine regel onder de prijs (23 okt) */
.smuk-sku{font-size:14px;color:#5c5650;margin:0;padding:0}

/* Productpagina: levertijd direct naast de bestelknop + "Vanaf" voor de prijs (23 okt) */
.smuk-levertijd{flex-basis:100%;width:100%;margin:12px 0 0;font-size:14px;line-height:1.5;color:#0d0905}
.smuk-levertijd p{margin:0;padding:0}
.smuk-levertijd__seizoen{margin-top:6px!important;padding:8px 12px!important;background:#f9f4ee;border-radius:5px;font-weight:600}
.smuk-levertijd__seizoen[hidden]{display:none}
.smuk-vanaf{font-size:.75em;font-weight:400}

/* Productkaart (23 okt): groot vierkant beeld, badges, materialenregel, kleine vanaf-prijs, geen knop */
ul.products li.product .et_shop_image{position:relative;display:block;overflow:hidden;aspect-ratio:1/1;background:#f9f4ee}
ul.products li.product .et_shop_image>img{width:100%!important;height:100%!important;object-fit:cover;display:block}
.smuk-badge{position:absolute;left:8px;z-index:3;padding:3px 8px;border-radius:5px;font-size:12px;line-height:1.4;font-weight:600;pointer-events:none}
.smuk-badge--orientatie{bottom:8px;background:rgba(254,254,254,.92);color:#0d0905}
.smuk-badge--actie{top:8px;background:#0d0905;color:#fefefe}
.smuk-badge[hidden]{display:none}
ul.products li.product .woocommerce-loop-product__title{padding-bottom:2px!important}
.smuk-card-materialen{display:block;font-size:13px;line-height:1.4;color:#5c5650;margin:0 0 2px}
ul.products li.product .price{font-size:14px!important}
ul.products li.product .button.add_to_cart_button,ul.products li.product .button.product_type_simple{display:none!important}
@media (max-width:980px){
	.woocommerce ul.products:not(.cart_list) li.product,.woocommerce-page ul.products li.product{width:calc(50% - 6px)!important;margin:0 12px 20px 0!important;clear:none!important;float:left!important}
	.woocommerce ul.products li.product:nth-child(2n),.woocommerce-page ul.products li.product:nth-child(2n){margin-right:0!important}
	.woocommerce ul.products li.product:nth-child(2n+1){clear:left!important}
}

/* Shop: filterbalk bovenaan (oriëntatie + collectie naast elkaar) */
.smuk-filterbalk .wpf_items_wrapper{display:flex;flex-wrap:wrap;gap:0 24px;align-items:flex-start}
.smuk-filterbalk .wpf_item{flex:1 1 260px;min-width:0}
.smuk-filterbalk .wpf_reset_btn,.smuk-filterbalk .wpf_reset{flex-basis:100%}

/* Datumgebonden onderdelen (23 okt): standaard verborgen, het footer-script zet ze aan */
.smuk-datum[hidden]{display:none!important}
.et_pb_section.smuk-bw-balk{display:none}
.et_pb_section.smuk-bw-balk.is-actief{display:block}

/* Productkaart: prijsregel rustiger (23 okt): één maat, geen letterafstand, "Vanaf" normaal, bedrag halfvet, € tegen het bedrag */
ul.products li.product .price,ul.products li.product .price *{font-size:14px!important;letter-spacing:0!important;line-height:1.4!important}
ul.products li.product .price .smuk-vanaf{font-weight:500!important;text-transform:uppercase;font-size:.75em!important;letter-spacing:.04em!important}
ul.products li.product .price .amount,ul.products li.product .price bdi{font-weight:600!important}
ul.products li.product .price .woocommerce-Price-currencySymbol{padding-right:1px!important}

/* Header-cart: bedrag in de knop (Rick, 23 okt) */
.cpops-launcher__total{font:inherit;line-height:1;white-space:nowrap;font-weight:700}

/* 24 okt: productnaam op de kaart links uitlijnen, net als de rest van de kaarttekst (Rick) */
ul.products li.product .woocommerce-loop-product__title{text-align:left!important}

/* 29 okt: CartPops 2.0.13 zet label en waarde zonder tussenruimte ("MateriaalFotopaneel"); dubbele punt + ruimte */
.cpops-cart-item__extra-line{gap:4px;justify-content:flex-start!important}
.cpops-cart-item__extra-label::after{content:":"}

/* 29 okt: Divi 5 (compatibiliteitsmodus) negeert de Divi 4-weergavevoorwaarden "ingelogd/uitgelogd" op Mijn Account (pagina 95228); beide versies stonden onder elkaar. */
body.page-id-95228:not(.logged-in) .et_pb_section_0,
body.page-id-95228:not(.logged-in) .molti-account-area{display:none!important}
body.page-id-95228.logged-in .molti-login-area{display:none!important}

/* 29 okt: Divi 5 voert de Divi 4-"multi-view" (andere tekst per apparaat) niet meer uit; knoppen met een telefoontekst bleven daardoor verborgen
   (Inloggen/Registreer op Mijn Account). Tonen met de desktoptekst, kleiner zodat hij op één regel past. */
@media (max-width:767px){body.page-id-95228 .molti-login-area [data-et-multi-view-load-phone-hidden="true"]{display:inline-block!important;white-space:nowrap;font-size:11px!important;padding-left:12px!important;padding-right:12px!important;letter-spacing:.5px!important}}

/* 29 okt: topbalk op collectiepagina's zakte 4 px: Divi zet daar (.et-db-prefix) margin-top 9px op de blurbs */
#et-boc .et-l--header .molti-top-bar .et_pb_blurb, .et-db #et-boc .et-l.et-l--header .molti-top-bar .et_pb_blurb.et_pb_module { margin-top: 0 !important; }
/* 29 okt: hover-label Account/Zoeken (desktop) brak af ("Zoe-ken") en stak half uit naast het icoon */
@media (min-width: 981px) {
	#et-boc .et-l--header .molti-header-9-10 .account-link .et_pb_blurb_container,
	#et-boc .et-l--header .molti-header-9-10 .molti-search-button .et_pb_blurb_container { white-space: nowrap !important; vertical-align: middle; }
	#et-boc .et-l--header .molti-header-9-10 .account-link:not(:hover):not(:focus-within) .et_pb_blurb_container,
	#et-boc .et-l--header .molti-header-9-10 .molti-search-button:not(:hover):not(:focus-within) .et_pb_blurb_container { visibility: hidden; }
}
/* 29 okt: stijlvinder-kaart ook op /shop/, en op desktop als brede banner van 2 kolommen */
@media (max-width: 980px) {
	body.woocommerce-shop #et-boc .et-l .et_pb_shop ul.products li.product.smuk-sv-kaart { grid-column: 1 / -1; width: 100% !important; float: none !important; clear: both !important; margin-right: 0 !important; }
}
@media (min-width: 981px) {
	body.woocommerce-shop #et-boc .et-l .et_pb_shop ul.products.smuk-sv-raster { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 3.8%; }
	body.woocommerce-shop #et-boc .et-l .et_pb_shop ul.products.smuk-sv-raster::before,
	body.woocommerce-shop #et-boc .et-l .et_pb_shop ul.products.smuk-sv-raster::after { display: none !important; }
	body.woocommerce-shop #et-boc .et-l .et_pb_shop ul.products.smuk-sv-raster[class*="columns-"] li.product { width: auto !important; margin: 0 !important; float: none !important; clear: none !important; }
	#et-boc .et-l .et_pb_shop ul.products.smuk-sv-raster li.product.smuk-sv-kaart { grid-column: span 2; }
	li.product.smuk-sv-kaart > div { display: grid !important; grid-template-columns: 1fr auto; column-gap: 28px; row-gap: 6px; align-content: center; padding: 28px 32px; }
	li.product.smuk-sv-kaart > div > p { grid-column: 1; }
	li.product.smuk-sv-kaart .smuk-sv-kaart__kop { font-size: 22px; }
	li.product.smuk-sv-kaart > div > button { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; padding: 12px 20px; }
}
/* 29 okt: /shop/ mobiel ook als CSS-raster (2 kolommen), anders brak de stijlvinder-banner de float-rijen (product alleen op een rij) */
@media (max-width: 980px) {
	body.woocommerce-shop #et-boc .et-l .et_pb_shop ul.products.smuk-sv-raster { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; margin: 0 !important; }
	body.woocommerce-shop #et-boc .et-l .et_pb_shop ul.products.smuk-sv-raster::before, body.woocommerce-shop #et-boc .et-l .et_pb_shop ul.products.smuk-sv-raster::after { display: none !important; }
	body.woocommerce-shop #et-boc .et-l .et_pb_shop ul.products.smuk-sv-raster li.product { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none !important; clear: none !important; }
}