/*
Theme Name: Glozin Child
Theme URI: https://wpglozin.com/
Author: UIXThemes
Author URI: https://uix.store
Description: Multipurpose WooCommerce WordPress Theme
Version: 1.0.0
Requires at least: 5.0
Tested up to: 5.8
Requires PHP: 7.0
License: GNU General Public License v2+
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: glozin
Text Domain: glozin-child
*/

/* ============================================================================
   MAATWERK ONTWERPLAAG — toegevoegd 15-09-2026
   ----------------------------------------------------------------------------
   Alleen aanvullende CSS op stabiele WooCommerce-, Glozin- en Elementor-klassen.
   Geen template-overrides, dus updates van Glozin, Glozin Addons, Elementor,
   WooCommerce en WordPress kunnen dit niet breken.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
	--lm-bone:#FAF8F5; --lm-cream:#F4EDE5; --lm-sand:#F2EEE8; --lm-white:#FFFFFF;
	--lm-ink:#16181C; --lm-muted:#6B6F76; --lm-muted-2:#8B8F96;
	--lm-line:#E7E2DA; --lm-line-soft:#F0ECE5;
	--lm-brand:#6D1C30; --lm-bronze:#8A7A5E;
	--lm-display:"Instrument Serif", Georgia, "Times New Roman", serif;
	--lm-ease:cubic-bezier(.22,.61,.36,1);
	--lm-gut:clamp(20px, 5vw, 56px);
}

/* ---------- 2. TYPOGRAFIE ----------
   Display-serif voor koppen naast de schreefloze van het thema voor tekst.
   Dat contrast onderscheidt een parfumerie van een gewone webshop. */
.elementor-widget-glozin-heading h1,
.elementor-widget-glozin-heading h2,
.elementor-widget-glozin-heading h3,
.glozin-banner__title,
.page-header__title,
.lm-serif{
	font-family:var(--lm-display); font-weight:400;
	letter-spacing:-.012em; font-feature-settings:"liga" 1,"kern" 1;
}
.lm-hero .elementor-widget-glozin-heading h1{ line-height:1.02; }
.price,.woocommerce-Price-amount,.lm-num{ font-variant-numeric:tabular-nums; }

/* ---------- 3. KNOPPEN ---------- */
.elementor-widget-glozin-button .gz-button,
.glozin-banner__button{
	letter-spacing:.02em;
	transition:background-color .28s var(--lm-ease), color .28s var(--lm-ease),
	           border-color .28s var(--lm-ease), transform .28s var(--lm-ease);
}
.elementor-widget-glozin-button .gz-button:hover,
.glozin-banner__button:hover{ transform:translateY(-1px); }
.lm-chip-row .elementor-widget-glozin-button .gz-button{
	padding:11px 20px; font-size:13.5px; border-color:var(--lm-line);
}
.lm-chip-row .elementor-widget-glozin-button .gz-button:hover{
	border-color:var(--lm-ink); background:var(--lm-ink); color:var(--lm-white);
}

/* ---------- 4. HERO ----------
   Elementor laat een flex-kind op zijn eigen hoogte staan; daardoor viel er een
   witte strook onder de foto. Stretch lost dat op. */
.elementor .lm-hero,
.elementor .lm-hero > .e-con-inner{ align-items:stretch; }
.elementor .lm-hero-media{ align-self:stretch; display:flex; min-height:0; overflow:hidden; }
.elementor .lm-hero-media > .elementor-widget-image{ flex:1 1 auto; display:flex; min-height:0; }
.elementor .lm-hero-media img{
	width:100%; height:100%; object-fit:cover; object-position:58% center; display:block;
}
@media (min-width:1025px){
	.elementor .lm-hero-copy{ padding-right:clamp(48px,5vw,96px) !important; }
	.elementor .lm-hero .elementor-widget-glozin-heading h1{ font-size:clamp(46px,4.4vw,72px) !important; }
}
@media (max-width:1024px){
	.elementor .lm-hero-media img{ height:auto; aspect-ratio:4/3; object-position:center; }
}
@media (max-width:767px){
	.elementor .lm-hero-copy{ padding:44px var(--lm-gut) 38px !important; }
	.elementor .lm-hero .elementor-widget-glozin-heading h1{
		font-size:clamp(34px,10.5vw,44px) !important; line-height:1.04;
	}
	.elementor .lm-hero-media img{ aspect-ratio:5/4; }
	.elementor .lm-hero-copy .gz-button{ width:100%; justify-content:center; }
}

/* ---------- 5. USP-RIJ ----------
   Desktop: vier kolommen met haarfijne scheidingslijnen.
   Mobiel: veegbare kaarten met scroll-snap — puur CSS, geen JavaScript. */
.elementor .lm-usp .glozin-icon-box__title{
	font-size:15px; line-height:1.35; margin:0 0 6px; font-weight:600;
}
.elementor .lm-usp .glozin-icon-box__content,
.elementor .lm-usp .glozin-icon-box__content p{
	font-size:13.5px; line-height:1.62; color:var(--lm-muted); margin:0;
}
.elementor .lm-usp .glozin-icon-box__icon{ color:var(--lm-brand); margin-bottom:14px; }
.elementor .lm-usp .glozin-icon-box__icon svg{ width:20px; height:20px; }
@media (min-width:768px){
	.elementor .lm-usp > .e-con-inner > .elementor-widget + .elementor-widget{
		border-left:1px solid var(--lm-line); padding-left:clamp(20px,2.4vw,38px);
	}
}
@media (max-width:767px){
	.elementor .lm-usp > .e-con-inner{
		flex-direction:row; flex-wrap:nowrap; overflow-x:auto;
		overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
		-webkit-overflow-scrolling:touch; scrollbar-width:none;
		gap:12px; padding-left:var(--lm-gut); padding-right:var(--lm-gut);
	}
	.elementor .lm-usp > .e-con-inner::-webkit-scrollbar{ display:none; }
	.elementor .lm-usp > .e-con-inner > .elementor-widget{
		flex:0 0 78%; width:auto; scroll-snap-align:start;
		background:var(--lm-white); border:1px solid var(--lm-line);
		border-radius:4px; padding:22px 20px;
	}
	.elementor .lm-usp > .e-con-inner::after{ content:""; flex:0 0 8px; }
}

/* ---------- 6. CATEGORIETEGELS ----------
   Het label stond over de flacon heen en de foto had een vaste ondermarge die
   op telefoons de halve tegel opat. Nu: beeld in een eigen kader, label eronder. */
.lm-cats .glozin-categories-grid__item{
	background:var(--lm-white); border:1px solid var(--lm-line-soft);
	border-radius:4px; overflow:hidden;
	transition:border-color .3s var(--lm-ease), transform .3s var(--lm-ease),
	           box-shadow .35s var(--lm-ease);
}
.lm-cats .glozin-categories-grid__item:hover{
	border-color:var(--lm-line); transform:translateY(-3px);
	box-shadow:0 14px 34px -22px rgba(22,24,28,.4);
}
.lm-cats .glozin-categories-grid__image{ background:var(--lm-white); }
.lm-cats .glozin-categories-grid__image img{
	object-fit:contain; background:var(--lm-white); padding:10% 14% 12%;
}
.lm-cats .glozin-categories-grid__button{
	position:static !important; transform:none !important;
	display:block; width:100%; padding:0;
}
.lm-cats .glozin-categories-grid__button .gz-button{
	display:block; width:100%; background:transparent; border:0;
	border-top:1px solid var(--lm-line-soft); border-radius:0;
	padding:16px 14px; text-align:center; font-size:14px; font-weight:600;
	color:var(--lm-ink); box-shadow:none;
}
.lm-cats .glozin-categories-grid__item:hover .gz-button{ color:var(--lm-brand); }
@media (max-width:767px){
	.lm-cats .glozin-categories-grid__button .gz-button{ padding:13px 8px; font-size:13px; }
	.lm-cats .glozin-categories-grid__image img{ padding:8% 12% 10%; }
}

/* ---------- 7. GEURNOTEN ----------
   Mobiel veegbaar, met een randje van de volgende tegel in beeld zodat
   zichtbaar is dat er meer is. */
.lm-notes .glozin-image-box__image{ --gz-ratio-percent:78%; border-radius:4px; }
.lm-notes .glozin-image-box img{ width:100%; height:100%; object-fit:cover; }
.lm-notes .glozin-image-box__title{ font-size:16px; font-weight:600; margin:14px 0 2px; }
.lm-notes .glozin-image-box__description{ font-size:13px; color:var(--lm-muted-2); }
.lm-notes .glozin-image-box__image{ transition:transform .45s var(--lm-ease); }
.lm-notes .glozin-image-box:hover .glozin-image-box__image{ transform:translateY(-3px); }
@media (max-width:767px){
	.elementor .lm-note-row{
		flex-wrap:nowrap !important; overflow-x:auto;
		overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
		-webkit-overflow-scrolling:touch; scrollbar-width:none;
		margin-left:0 !important; margin-right:calc(var(--lm-gut) * -1) !important;
		padding-right:var(--lm-gut);
	}
	.elementor .lm-note-row::-webkit-scrollbar{ display:none; }
	.elementor .lm-note-row > .e-con{
		flex:0 0 46% !important; width:auto !important; scroll-snap-align:start;
		padding-left:0 !important; padding-right:12px !important;
	}
	.lm-notes .glozin-image-box__title{ font-size:15px; margin-top:11px; }
}
@media (max-width:767px){
	.elementor .lm-chip-row{
		flex-wrap:nowrap !important; overflow-x:auto; scrollbar-width:none;
		margin-right:calc(var(--lm-gut) * -1) !important; padding-right:var(--lm-gut);
	}
	.elementor .lm-chip-row::-webkit-scrollbar{ display:none; }
	.elementor .lm-chip-row > .elementor-widget{ flex:0 0 auto; }
	.lm-chip-row .gz-button{ white-space:nowrap; }
}

/* ---------- 8. PRODUCTKAARTEN ----------
   Meer wit rond de flacon, kleinere labels, nadruk op naam en prijs. Werkt
   overal waar Glozin producten toont: homepage, shop, archieven, carrousels. */
li.product .product-thumbnail{
	background:var(--lm-white); border:1px solid var(--lm-line-soft);
	border-radius:4px;
	transition:border-color .3s var(--lm-ease), box-shadow .35s var(--lm-ease);
}
li.product:hover .product-thumbnail{
	border-color:var(--lm-line); box-shadow:0 10px 30px -18px rgba(22,24,28,.35);
}
li.product .woocommerce-loop-product__title,
li.product .product-title{
	font-size:14.5px !important; line-height:1.45; font-weight:500; margin-top:14px;
}
li.product .woocommerce-loop-product__title a:hover{ color:var(--lm-brand); }
li.product .price{ font-size:15px; font-weight:600; color:var(--lm-ink); }
/* Vijf lege sterren onder elk product suggereren een slechte score. Verbergen
   tot er echte beoordelingen zijn. */
li.product .star-rating:not([title]){ display:none; }
li.product .woocommerce-badge{
	font-size:10px !important; font-weight:700; letter-spacing:.11em;
	text-transform:uppercase; padding:5px 9px; border-radius:2px; line-height:1.5;
}
li.product .product-featured-icons .gz-button-icon{
	border:1px solid var(--lm-line); background:rgba(255,255,255,.94);
}

/* ---------- 9. PRODUCTFOTO'S ----------
   De hele flacon in beeld, nooit bijgesneden of uitgerekt — bij elk formaat dat
   later wordt geupload, ook in een galerij met wisselende verhoudingen. */
.product-thumbnail img,
.product-thumbnail a img,
.woocommerce-product-gallery img,
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery__wrapper img,
.product-gallery-thumbnails img,
.woocommerce-product-gallery__thumbs img,
.flex-control-thumbs img,
.drift-zoom-pane img{
	object-fit:contain; object-position:center; background-color:#fff;
}
.product-thumbnail img{ padding:8%; }
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image > a,
.woocommerce-product-gallery__image img{ aspect-ratio:1/1; width:100%; height:auto; }

/* ---------- 10. SHOP, ARCHIEVEN, CART & CHECKOUT ---------- */
.page-header,.page-header--shop{ background:var(--lm-cream); }
.page-header__content{ padding-block:clamp(38px,5vw,66px); }
.page-header__title{ font-size:clamp(32px,4vw,52px) !important; line-height:1.08; margin:10px 0 0; }
.page-header .woocommerce-breadcrumb,.site-breadcrumb{
	color:var(--lm-muted); font-size:13px; letter-spacing:.02em;
}
.page-header__description{
	max-width:64ch; margin:14px auto 0; color:var(--lm-muted);
	font-size:15.5px; line-height:1.75;
}
.catalog-toolbar{
	border-bottom:1px solid var(--lm-line-soft); padding-bottom:18px; margin-bottom:26px;
}
.catalog-toolbar__result-count{ color:var(--lm-muted); font-size:13.5px; }
.woocommerce-pagination .page-numbers{ border-radius:3px; letter-spacing:.02em; }
.shop-sidebar .widget-title,.widget_layered_nav .widget-title{
	font-size:11px; letter-spacing:.14em; text-transform:uppercase;
	color:var(--lm-muted); font-weight:700;
}
/* Winkelwagen en afrekenen in dezelfde rust. */
.woocommerce-cart-form table,
.woocommerce-checkout .woocommerce-checkout-review-order table{ border-color:var(--lm-line); }
.woocommerce-checkout #order_review,
.cart-collaterals .cart_totals{
	background:var(--lm-bone); border:1px solid var(--lm-line); border-radius:4px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
	border:1px solid var(--lm-line); border-radius:3px; background:var(--lm-white);
}
.woocommerce form .form-row input.input-text:focus{ border-color:var(--lm-ink); outline:none; }

/* ---------- 11. BANNERS ----------
   Tekst onderin met een leesbare verloopsluier, zodat elke foto werkt. */
.lm-banners .glozin-banner{ border-radius:5px; overflow:hidden; isolation:isolate; }
.lm-banners .glozin-banner__image::after{
	content:""; position:absolute; inset:auto 0 0 0; height:72%;
	background:linear-gradient(to top, rgba(12,8,10,.72), rgba(12,8,10,0));
	pointer-events:none; z-index:1;
}
.lm-banners .glozin-banner__summary{
	align-self:flex-end; width:100%; text-align:left; z-index:2;
	padding:clamp(26px,3vw,44px) clamp(22px,3vw,44px) clamp(26px,3vw,40px) !important;
}
.lm-banners .glozin-banner__sub-title{
	font-size:11px; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
	opacity:.85; margin-bottom:12px !important;
}
.lm-banners .glozin-banner__title{
	font-size:clamp(26px,2.6vw,38px) !important; line-height:1.1; margin-bottom:12px !important;
}
.lm-banners .glozin-banner__description{
	font-size:14.5px; line-height:1.7; max-width:46ch; opacity:.9; margin-bottom:22px !important;
}
.lm-banners .glozin-banner__image img{ transition:transform .7s var(--lm-ease); }
.lm-banners .glozin-banner:hover .glozin-banner__image img{ transform:scale(1.035); }
@media (max-width:767px){
	.lm-banners .glozin-banner__title{ font-size:26px !important; }
	.lm-banners .glozin-banner__description{ font-size:14px; margin-bottom:18px !important; }
}

/* ---------- 12. ACCORDEON / FAQ ---------- */
.glozin-accordion__item{ border-bottom:1px solid var(--lm-line); }
.glozin-accordion__title{
	font-size:16px !important; font-weight:500 !important; padding-block:20px;
	transition:color .25s var(--lm-ease);
}
.glozin-accordion__title:hover{ color:var(--lm-brand); }
.glozin-accordion__content{
	color:var(--lm-muted); font-size:15px; line-height:1.78;
	padding-bottom:22px; max-width:70ch;
}

/* ---------- 13. FOOTER ---------- */
.site-footer{ background:var(--lm-ink); }
.site-footer .lm-flinks{ list-style:none; margin:0; padding:0; }
.site-footer .lm-flinks li{ margin:0; }
.site-footer a{ color:#B8B2A8; transition:color .22s var(--lm-ease); }
.site-footer a:hover,.site-footer a:focus{ color:var(--lm-white); }
.site-footer .elementor-widget-glozin-heading h3{
	font-family:inherit; font-size:11px !important; letter-spacing:.16em;
	text-transform:uppercase; font-weight:700 !important; color:#F1EEE8;
}
.site-footer .lm-fbrand h3{
	font-family:var(--lm-display) !important; font-size:23px !important;
	letter-spacing:-.01em; text-transform:none; font-weight:400 !important;
}
@media (max-width:767px){
	.site-footer .elementor-widget-glozin-heading h3{ margin-bottom:10px !important; }
	.site-footer .lm-flinks{ line-height:1.95; }
}

/* ---------- 14. ZOEKBALK ----------
   Op een parfumsite is zoeken het belangrijkste navigatie-element: bezoekers
   typen een merk of een noot. Hij mag dus breed zijn. */
.header-search{ width:100%; max-width:560px; margin-inline:auto; }
.header-search__form{ width:100%; }
.header-search__form input[type="search"],
.header-search__form input[type="text"]{
	width:100%; height:46px; border-radius:3px; border:1px solid var(--lm-line);
	background:var(--lm-bone); font-size:14px;
	transition:border-color .25s var(--lm-ease), background-color .25s var(--lm-ease);
}
.header-search__form input:focus{ border-color:var(--lm-ink); background:var(--lm-white); outline:none; }
@media (max-width:1400px){ .header-search{ max-width:440px; } }
@media (max-width:1200px){ .header-search{ max-width:340px; } }

/* ---------- 15. RITME & TOEGANKELIJKHEID ---------- */
@media (max-width:767px){
	.elementor .lm-cats > .e-con-inner,
	.elementor .lm-products > .e-con-inner,
	.elementor .lm-notes > .e-con-inner,
	.elementor .lm-brands > .e-con-inner,
	.elementor .lm-editorial > .e-con-inner{
		padding-left:var(--lm-gut) !important; padding-right:var(--lm-gut) !important;
	}
	.elementor .lm-usp > .e-con-inner{ padding-left:0 !important; padding-right:0 !important; }
}
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{
		animation-duration:.001ms !important; transition-duration:.001ms !important;
		scroll-behavior:auto !important;
	}
}


/* ---------- 16. INFORMATIEPAGINA'S ----------
   Opmaak voor Over ons, Veelgestelde vragen, Verzending, Retourneren, Contact
   en de juridische pagina's. De pagina's zelf bevatten alleen tekst; alle
   vormgeving zit hier, zodat opmaak wijzigen op één plek gebeurt. */
.lm-page-head{ background:var(--lm-cream); }
.lm-page-head > .e-con-inner{
	padding:clamp(52px,6vw,82px) var(--lm-gut) clamp(44px,5vw,64px) !important;
	max-width:1000px;
}
.lm-page-head .elementor-widget-text-editor:first-child p{
	font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
	color:var(--lm-brand); margin:0 0 12px;
}
.lm-page-head h1{
	font-size:clamp(32px,4.6vw,50px) !important; line-height:1.07; margin:0 0 16px !important;
}
.lm-page-head .elementor-widget-text-editor:last-child p{
	font-size:clamp(15.5px,1.4vw,17.5px); line-height:1.72; color:var(--lm-muted);
	max-width:62ch; margin:0;
}

.lm-prose{ background:var(--lm-bone); }
.lm-prose.lm-alt{ background:var(--lm-sand); }
.lm-prose > .e-con-inner{
	padding:clamp(46px,5vw,70px) var(--lm-gut) !important; max-width:1000px;
}
.lm-prose h2{
	font-size:clamp(21px,2.2vw,27px) !important; line-height:1.24;
	margin:0 0 14px !important; color:var(--lm-ink);
}
.lm-prose .elementor-widget-text-editor{ margin-bottom:34px; }
.lm-prose .elementor-widget-text-editor:last-child{ margin-bottom:0; }
.lm-prose p{
	font-size:15.5px; line-height:1.82; color:var(--lm-muted); max-width:72ch;
	margin:0 0 15px;
}
.lm-prose p:last-child{ margin-bottom:0; }
.lm-prose p a,
.lm-prose li a{ color:var(--lm-brand); border-bottom:1px solid rgba(109,28,48,.28); }
.lm-prose p a:hover,
.lm-prose li a:hover{ border-bottom-color:var(--lm-brand); }
/* Tegels en knoppen binnen een prose-sectie houden hun eigen kleur. */
.lm-prose .glozin-image-box__title,
.lm-prose .glozin-image-box__title a{ color:var(--lm-ink); border-bottom:0; }
.lm-prose .glozin-image-box:hover .glozin-image-box__title a{ color:var(--lm-brand); }
.lm-prose em{ color:var(--lm-muted-2); }
.lm-prose strong{ color:var(--lm-ink); font-weight:600; }

.lm-faq{ background:var(--lm-sand); }
.lm-faq.lm-alt{ background:var(--lm-bone); }
.lm-faq > .e-con-inner{
	padding:clamp(44px,5vw,64px) var(--lm-gut) clamp(50px,5vw,72px) !important; max-width:1000px;
}
.lm-faq h2{ font-size:clamp(22px,2.3vw,28px) !important; margin:0 0 18px !important; }

.lm-cta{ background:var(--lm-ink); }
.lm-cta > .e-con-inner{
	padding:clamp(52px,6vw,76px) var(--lm-gut) !important; max-width:800px;
	align-items:center; text-align:center;
}
.lm-cta h2{
	font-size:clamp(24px,2.8vw,32px) !important; color:#F5F1EA !important;
	margin:0 0 12px !important;
}
.lm-cta p{
	color:#B8B2A8; font-size:15.5px; line-height:1.72; max-width:56ch; margin:0 0 26px;
}
.lm-cta .elementor-widget{ width:100%; }
.lm-cta .gz-button{ margin-inline:auto; }


/* ============================================================================
   17. VERFIJNING — hero op mobiel, tabbladen, beelddichtheid
   Deze sectie staat bewust achteraan: gelijke selectors verderop in het
   bestand winnen, zodat eerdere regels hier worden bijgesteld zonder dat er
   iets verwijderd hoeft te worden.
   ========================================================================== */

/* --- 17.1 Hero: op desktop staat de tekst links, het beeld rechts.
   In de HTML staat het beeld eerst, zodat het op mobiel als achtergrond kan
   dienen; op desktop draaien we de volgorde visueel om. --- */
@media (min-width:768px){
	.elementor .lm-hero > .lm-hero-copy{ order:1; }
	.elementor .lm-hero > .lm-hero-media{ order:2; }
}

/* --- 17.2 Hero op mobiel: één campagnebeeld met de tekst erover.
   Beeld en tekst delen dezelfde rastercel; een verloopsluier ertussen houdt
   de tekst leesbaar, welke foto er later ook wordt ingeladen. --- */
@media (max-width:767px){
	.elementor .lm-hero{
		display:grid;
		grid-template-columns:1fr;
		position:relative;
		isolation:isolate;
	}
	.elementor .lm-hero > .lm-hero-media,
	.elementor .lm-hero > .lm-hero-copy{
		grid-area:1 / 1;
		width:100% !important;
	}
	.elementor .lm-hero-media{ z-index:0; }
	.elementor .lm-hero-media img{
		aspect-ratio:3/4;
		width:100%;
		height:100%;
		object-fit:cover;
		object-position:center 40%;
	}
	.elementor .lm-hero::after{
		content:"";
		grid-area:1 / 1;
		z-index:1;
		pointer-events:none;
		background:linear-gradient(to top,
			rgba(16,8,13,.94) 0%,
			rgba(16,8,13,.80) 24%,
			rgba(16,8,13,.30) 52%,
			rgba(16,8,13,0) 76%);
	}
	.elementor .lm-hero-copy{
		z-index:2;
		background-color:transparent;
		justify-content:flex-end;
		padding:0 var(--lm-gut) 42px !important;
	}
	.elementor .lm-hero-copy .glozin-heading{ color:#FFF7F1; }
	.elementor .lm-hero-copy .elementor-widget-text-editor p{ color:rgba(255,247,241,.84); }
	.elementor .lm-hero-copy > .elementor-widget-text-editor:first-child p{ color:#E9B6C4; }
	.elementor .lm-hero-copy .elementor-widget-glozin-heading h1{
		font-size:clamp(36px,11vw,46px) !important;
		line-height:1.02;
		margin-bottom:14px !important;
	}
	.elementor .lm-hero-copy > .elementor-widget-text-editor:nth-of-type(2) p{
		font-size:15px;
		line-height:1.6;
	}
	/* Knoppen omkeren voor de donkere ondergrond. */
	.lm-hero-copy .gz-button{
		background:#FAF8F5; color:#16181C; border-color:#FAF8F5;
	}
	.lm-hero-copy .gz-button-outline-dark{
		background:transparent; color:#FFF7F1; border-color:rgba(255,247,241,.55);
	}
	/* De vertrouwensregel onderaan mag compacter. */
	.elementor .lm-hero-copy > .elementor-widget-text-editor:last-child{
		padding-top:16px !important;
	}
	.elementor .lm-hero-copy > .elementor-widget-text-editor:last-child p{
		font-size:12px; color:rgba(255,247,241,.62);
	}
}


/* --- 17.3 Tabbladen bij "Veelgedragen dit seizoen".
   Pillen vervangen door redactionele tabs met een onderlijn: rustiger, en het
   leest als een tijdschrift in plaats van als een app. --- */
.glozin-product-tabs .glozin-product-tabs__heading{
	border-bottom:1px solid var(--lm-line);
	gap:0;
	margin-bottom:34px;
	padding-bottom:0;
}
.glozin-product-tabs .glozin-product-tabs__heading .glozin-product-tabs__heading-button{
	background:transparent;
	border:0;
	border-radius:0;
	box-shadow:none;
	color:var(--lm-muted);
	padding:0 0 15px;
	margin:0 clamp(15px,2.2vw,30px);
	min-height:0;
	font-size:12.5px;
	font-weight:600;
	letter-spacing:.11em;
	text-transform:uppercase;
	position:relative;
	transition:color .25s var(--lm-ease);
}
.glozin-product-tabs .glozin-product-tabs__heading .glozin-product-tabs__heading-button::after{
	content:"";
	position:absolute;
	left:0; right:0; bottom:-1px;
	height:2px;
	background:var(--lm-brand);
	transform:scaleX(0);
	transition:transform .3s var(--lm-ease);
}
.glozin-product-tabs .glozin-product-tabs__heading .glozin-product-tabs__heading-button:hover,
.glozin-product-tabs .glozin-product-tabs__heading .glozin-product-tabs__heading-button.active{
	color:var(--lm-ink);
}
.glozin-product-tabs .glozin-product-tabs__heading .glozin-product-tabs__heading-button.active::after{
	transform:scaleX(1);
}
@media (max-width:767px){
	.glozin-product-tabs .glozin-product-tabs__heading{
		justify-content:flex-start;
		overflow-x:auto;
		scrollbar-width:none;
		margin-left:calc(var(--lm-gut) * -1);
		margin-right:calc(var(--lm-gut) * -1);
		padding-left:var(--lm-gut);
		padding-right:var(--lm-gut);
		margin-bottom:26px;
	}
	.glozin-product-tabs .glozin-product-tabs__heading::-webkit-scrollbar{ display:none; }
	.glozin-product-tabs .glozin-product-tabs__heading .glozin-product-tabs__heading-button{
		margin:0 20px 0 0;
		white-space:nowrap;
		font-size:12px;
	}
}

/* --- 17.4 Beelddichtheid op mobiel.
   De flacons oogden klein: dat kwam door 15 px tussenruimte per kaart plus
   8% binnenmarge om de foto. Samen kostte dat bijna een derde van de
   beschikbare breedte. --- */
@media (max-width:767px){
	:root{ --lm-gut:16px; }

	ul.products.d-flex{
		margin-left:-6px;
		margin-right:-6px;
	}
	ul.products.d-flex > li.product{
		padding-left:6px;
		padding-right:6px;
		margin-bottom:24px;
	}
	.product-thumbnail img{ padding:4%; }
	li.product .woocommerce-loop-product__title,
	li.product .product-title{ font-size:13.5px !important; margin-top:11px; }
	li.product .price{ font-size:14px; }

	.lm-cats .glozin-categories-grid__image img{ padding:5% 7% 6%; }
	.lm-cats .glozin-categories-grid__button .gz-button{ padding:12px 6px; font-size:12.5px; }

	/* Secties mogen op een telefoon iets dichter op elkaar. */
	.elementor .lm-cats > .e-con-inner,
	.elementor .lm-products > .e-con-inner,
	.elementor .lm-notes > .e-con-inner,
	.elementor .lm-brands > .e-con-inner{
		padding-top:44px !important;
		padding-bottom:44px !important;
	}
}

/* --- 17.5 Iets ruimer beeld op kleine tablets. --- */
@media (min-width:768px) and (max-width:1024px){
	.product-thumbnail img{ padding:6%; }
}


/* --- 17.6 Correcties na meting op een telefoon.
   Elementor schrijft achtergrond- en kleurregels met drie klassen
   (.elementor-1000214 .elementor-element.elementor-element-xxx), wat zwaarder
   weegt dan een gewone klasse. Voor de omgekeerde hero zijn die regels hier
   bewust overschreven; dat is de enige plek in dit bestand waar dat nodig is. --- */
@media (max-width:767px){
	.elementor .lm-hero-copy{ background-color:transparent !important; }
	.elementor .lm-hero-copy .glozin-heading{ color:#FFF7F1 !important; }
	.elementor .lm-hero-copy .elementor-widget-text-editor,
	.elementor .lm-hero-copy .elementor-widget-text-editor p{ color:rgba(255,247,241,.86) !important; }
	.elementor .lm-hero-copy > .elementor-widget-text-editor:first-child,
	.elementor .lm-hero-copy > .elementor-widget-text-editor:first-child p{ color:#E9B6C4 !important; }
	.elementor .lm-hero-copy > .elementor-widget-text-editor:last-child,
	.elementor .lm-hero-copy > .elementor-widget-text-editor:last-child p{ color:rgba(255,247,241,.62) !important; }

	/* Productraster en categorietegels tot dichter bij de schermrand: dat geeft
	   de flacons merkbaar meer breedte zonder dat het gedrongen oogt. */
	.elementor .lm-products > .e-con-inner,
	.elementor .lm-cats > .e-con-inner{
		padding-left:12px !important;
		padding-right:12px !important;
	}
	/* De kop van die secties houdt wel de normale marge. */
	.elementor .lm-products > .e-con-inner > .e-con:first-child,
	.elementor .lm-cats > .e-con-inner > .e-con:first-child{
		padding-left:4px;
		padding-right:4px;
	}
	.glozin-product-tabs__items{ padding-left:0; padding-right:0; }
	.product-thumbnail img{ padding:3%; }
	.lm-cats .glozin-categories-grid__image img{ padding:4% 6% 5%; }
}


/* --- 17.7 Mobiele hero, definitieve indeling.
   Een campagnebeeld verdraagt weinig tekst. De volgorde in de kolom is:
   1 bovenkopje · 2 kop · 3 inleiding · 4 knoppen · 5 vertrouwensregel.
   Op een telefoon houden we 1, 2 en 4 vol in beeld, korten we 3 in tot twee
   regels en verbergen we 5 — die punten staan direct eronder al in de
   USP-rij, dus er gaat geen informatie verloren. --- */
@media (max-width:767px){
	.elementor .lm-hero{ min-height:78svh; }
	.elementor .lm-hero-media img{ height:100%; min-height:78svh; }

	/* Sterkere sluier: de tekst staat nu over de flacons heen. */
	.elementor .lm-hero::after{
		background:linear-gradient(to top,
			rgba(14,7,11,.96) 0%,
			rgba(14,7,11,.88) 30%,
			rgba(14,7,11,.55) 52%,
			rgba(14,7,11,.14) 74%,
			rgba(14,7,11,0) 92%);
	}

	.elementor .lm-hero-copy > :nth-child(3) p{
		display:-webkit-box;
		-webkit-line-clamp:2;
		-webkit-box-orient:vertical;
		overflow:hidden;
		margin-bottom:0;
	}
	.elementor .lm-hero-copy > :nth-child(3){ margin-bottom:24px !important; }
	.elementor .lm-hero-copy > :nth-child(5){ display:none; }

	/* Knoppen naast elkaar in plaats van onder elkaar. */
	.elementor .lm-hero-copy > :nth-child(4){
		flex-direction:row;
		flex-wrap:nowrap;
		gap:10px;
		padding-bottom:0 !important;
		width:100%;
	}
	.elementor .lm-hero-copy > :nth-child(4) > .elementor-widget{ flex:1 1 0; min-width:0; }
	.lm-hero-copy .gz-button{
		width:100%;
		justify-content:center;
		padding-left:10px;
		padding-right:10px;
		font-size:13.5px;
		white-space:nowrap;
	}
}


/* --- 17.8 Categorietegels: beeld boven, label eronder.
   Glozin bouwt de tegel als een flex-RIJ waarin een ::before met padding de
   hoogte bepaalt en de foto absoluut gepositioneerd is. Het label werd daardoor
   een kolom naast de foto in plaats van een regel eronder. Hier zetten we de
   tegel om naar een kolom met een eigen vierkant beeldkader. --- */
.lm-cats .glozin-categories-grid__item > a{
	display:flex;
	flex-direction:column;
	align-items:stretch;
}
.lm-cats .glozin-categories-grid__item > a::before{ display:none; }
.lm-cats .glozin-categories-grid__image{
	position:relative;
	width:100%;
	aspect-ratio:1 / 1;
	flex:0 0 auto;
	overflow:hidden;
}
.lm-cats .glozin-categories-grid__image img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:contain;
	padding:11%;
	background:#fff;
	transition:transform .5s var(--lm-ease);
}
.lm-cats .glozin-categories-grid__item:hover .glozin-categories-grid__image img{
	transform:scale(1.045);
}
.lm-cats .glozin-categories-grid__button{ margin-top:auto; }
@media (max-width:767px){
	.lm-cats .glozin-categories-grid__image img{ padding:8%; }
}


/* --- 17.9 Hero-foto zonder afgeronde hoeken.
   Glozin geeft elke afbeelding standaard 15 px ronding
   (--gz-image-rounded). Voor een beeld dat de halve pagina vult werkt dat
   niet: de hoeken laten de achtergrond doorschemeren. Alleen de hero wordt
   hier recht gezet; productfoto's en tegels houden hun ronding. --- */
.elementor .lm-hero .lm-hero-media img,
.elementor .lm-hero .lm-hero-media .elementor-widget-image{
	border-radius:0;
}


/* LM-S18-START — automatisch beheerd blok; alles tussen deze twee markeringen hoort bij elkaar. */

/* ============================================================================
   18. SCHERMHOOGTE — BANNER EN EERSTE SCHERM   (toegevoegd 16-09-2026)
   ----------------------------------------------------------------------------
   Waarom dit blok bestaat: tot nu toe bepaalde de foto de hoogte van de banner.
   De fotokolom is op een breed scherm 760 px breed en het bestand is 1400x1500,
   dus werd de banner ruim 815 px hoog — hoger dan wat er onder de header van
   een laptop past. De banner liep daardoor van het scherm af.

   Vanaf hier bepaalt het SCHERM de hoogte en volgt de foto. De foto ligt
   absoluut in zijn kolom, telt niet meer mee voor de hoogte, en vult met
   object-fit: cover altijd precies het vlak dat overblijft. U mag later dus
   een foto van elk formaat uploaden zonder dat de layout verschuift.

   svh in plaats van vh: svh rekent met de kleine viewport, dus de hoogte
   springt niet wanneer de adresbalk van een telefoon verdwijnt.
   ========================================================================== */

/* --- 18.1 Instellingen.
   Dit zijn de enige getallen die u hoeft aan te raken; alles hieronder rekent
   ermee. --------------------------------------------------------------- */
:root{
	/* Alles wat BOVEN de banner staat: campagnebalk (42) + header (130).
	   Verandert u de header in de Customizer, pas dan alleen dit getal aan. */
	--lm-top-h:172px;

	/* Strook van de volgende sectie die zichtbaar blijft onder de banner.
	   Die strook vertelt de bezoeker dat er meer is. Groter = korter beeld. */
	--lm-peek:44px;

	/* Grenzen aan de bannerhoogte op desktop. */
	--lm-hero-min:420px;
	--lm-hero-max:760px;

	/* Zelfde som op de telefoon: campagnebalk + mobiele header. Alleen
	   gebruikt door de schakelaar lm-hero--full hieronder. */
	--lm-top-h-m:106px;

	/* Telefoon: aandeel van de schermhoogte, met een boven- en ondergrens
	   zodat een kleine en een zeer lange telefoon allebei kloppen. */
	--lm-hero-m:78svh;
	--lm-hero-m-min:500px;
	--lm-hero-m-max:720px;
}

/* Ingelogde beheerders zien de zwarte WordPress-balk erboven; bezoekers niet. */
body.admin-bar{ --lm-top-h:204px; }
@media (max-width:782px){ body.admin-bar{ --lm-top-h-m:152px; } }

/* Zeer brede schermen: iets meer hoogte, anders wordt de uitsnede van de foto
   te panoramisch. */
@media (min-width:1600px){ :root{ --lm-hero-max:820px; } }


/* --- 18.2 De foto telt niet meer mee voor de hoogte. ------------------- */
@media (min-width:1025px){
	.elementor .lm-hero > .lm-hero-media{
		position:relative;
		align-self:stretch;
		min-height:0;
		overflow:hidden;
	}
	.elementor .lm-hero > .lm-hero-media > .elementor-widget-image{
		position:absolute;
		inset:0;
		margin:0;
		display:block;
	}
	.elementor .lm-hero > .lm-hero-media img{
		width:100%;
		height:100%;
		object-fit:cover;
		object-position:58% 45%;
		border-radius:0;
	}
}


/* --- 18.3 Desktop: de banner past onder de header op het scherm.
   clamp() leest van links naar rechts als: nooit korter dan --lm-hero-min,
   liefst precies het scherm min de header min de kijkstrook, nooit hoger dan
   --lm-hero-max. ------------------------------------------------------- */
@media (min-width:1025px){
	.elementor .lm-hero{
		min-height:clamp(
			var(--lm-hero-min),
			calc(100svh - var(--lm-top-h) - var(--lm-peek)),
			var(--lm-hero-max)
		);
	}
	.elementor .lm-hero-copy{
		justify-content:center;
		padding-top:clamp(36px, 5.6svh, 88px) !important;
		padding-bottom:clamp(36px, 5.6svh, 88px) !important;
	}
	.elementor .lm-hero .elementor-widget-glozin-heading h1{
		font-size:clamp(40px, min(4.4vw, 7.4svh), 68px) !important;
	}
	.elementor .lm-hero-copy > .elementor-widget-text-editor:nth-child(3){
		margin-bottom:clamp(16px, 3.2svh, 32px) !important;
	}
}


/* --- 18.4 De witruimte IN de tekstkolom schaalt mee met de schermhoogte.
   Zonder dit blijft er ruim 150 px aan vaste marges staan en loopt de banner
   op een lage laptop alsnog voorbij de onderrand. Op een hoog scherm groeien
   dezelfde marges terug naar hun oorspronkelijke maat, dus daar verandert het
   ontwerp niet. De !important is nodig omdat Elementor deze marges met drie
   klassen tegelijk zet; dat wint anders altijd. ------------------------- */
@media (min-width:768px){
	.elementor .lm-hero-copy .elementor-widget-text-editor p{
		margin-top:clamp(4px, 1.4svh, 13px);
		margin-bottom:clamp(4px, 1.4svh, 13px);
	}
	.elementor .lm-hero-copy > .elementor-widget-text-editor:nth-child(1){
		margin-bottom:clamp(2px, 1.2svh, 10px) !important;
	}
	.elementor .lm-hero-copy > :nth-child(4){
		padding-bottom:clamp(10px, 3svh, 30px) !important;
	}
	.elementor .lm-hero-copy > .elementor-widget-text-editor:nth-child(5){
		padding-top:clamp(8px, 2.4svh, 22px) !important;
	}
}


/* --- 18.5 Tablet: tekst boven, beeldband eronder. Een vaste bandhoogte in
   plaats van een beeldverhouding, zodat tekst en beeld samen ongeveer één
   scherm vullen. -------------------------------------------------------- */
@media (min-width:768px) and (max-width:1024px){
	.elementor .lm-hero-copy{
		padding-top:clamp(32px, 4.6svh, 72px) !important;
		padding-bottom:clamp(28px, 3.6svh, 56px) !important;
	}
	.elementor .lm-hero .elementor-widget-glozin-heading h1{
		font-size:clamp(36px, 5.4vw, 54px) !important;
	}
	.elementor .lm-hero-media img{
		aspect-ratio:auto;
		width:100%;
		height:clamp(200px, 30svh, 380px);
		object-fit:cover;
		object-position:center 42%;
	}
}

/* Liggende tablet: veel minder hoogte beschikbaar, dus alles compacter. */
@media (min-width:768px) and (max-width:1024px) and (max-height:820px){
	.elementor .lm-hero-copy{
		padding-top:clamp(20px, 2.6svh, 36px) !important;
		padding-bottom:clamp(16px, 2.2svh, 30px) !important;
	}
	.elementor .lm-hero-media img{ height:clamp(150px, 22svh, 200px); }
}


/* --- 18.6 Telefoon: bewust NIET het hele scherm.
   Een banner van 100% schermhoogte leest als een tussenscherm: de bezoeker
   ziet nergens dat er iets onder zit en een deel haakt af. 78% vult de
   telefoon en laat de eerste USP-kaart net meekijken — dat is het verschil
   tussen een splashscherm en een winkel. ------------------------------- */
@media (max-width:767px){
	.elementor .lm-hero{
		min-height:clamp(var(--lm-hero-m-min), var(--lm-hero-m), var(--lm-hero-m-max));
	}
	.elementor .lm-hero-media img{
		min-height:clamp(var(--lm-hero-m-min), var(--lm-hero-m), var(--lm-hero-m-max));
		height:100%;
		aspect-ratio:auto;
	}
}


/* --- 18.7 Schakelaars zonder plugin.
   Zet één van deze klassen op de bannersectie in Elementor:
   sectie selecteren > tabblad Geavanceerd > CSS Classes > opslaan. Klaar.
   Geen instellingenpagina, geen extra code, geen extra laadtijd.

     lm-hero--full       beeldvullend, geen kijkstrook
     lm-hero--tall       hoger dan standaard
     lm-hero--compact    lager, meer van de pagina meteen zichtbaar
     lm-hero--with-usp   zo laag dat de hele USP-rij op het eerste scherm past
     lm-hero--auto       terug naar hoogte op basis van de inhoud

   En op de USP-sectie:
     lm-usp--compact     lagere rij
     lm-usp--roomy       ruimere rij
   ----------------------------------------------------------------------- */
.lm-hero.lm-hero--full{
	--lm-peek:0px;
	--lm-hero-max:1000px;
	--lm-hero-m:calc(100svh - var(--lm-top-h-m));
	--lm-hero-m-max:1200px;
}
.lm-hero.lm-hero--tall{
	--lm-peek:22px;
	--lm-hero-max:880px;
	--lm-hero-m:88svh;
	--lm-hero-m-max:820px;
}
.lm-hero.lm-hero--compact{
	--lm-peek:120px;
	--lm-hero-min:380px;
	--lm-hero-max:600px;
	--lm-hero-m:62svh;
	--lm-hero-m-min:420px;
	--lm-hero-m-max:580px;
}
.lm-hero.lm-hero--with-usp{
	--lm-peek:215px;
	--lm-hero-min:340px;
	--lm-hero-max:560px;
}
.elementor .lm-hero.lm-hero--auto{ min-height:0; }

.elementor .lm-usp.lm-usp--compact{
	padding-top:clamp(18px, 2.4svh, 30px);
	padding-bottom:clamp(18px, 2.4svh, 30px);
}
.elementor .lm-usp.lm-usp--roomy{
	padding-top:clamp(36px, 6svh, 72px);
	padding-bottom:clamp(36px, 6svh, 72px);
}
/* LM-S18-END */

/* LM-S19-START */
/* ============================================================================
   19. HOVERCONTRAST NA DE KLEURWISSEL   (toegevoegd 16-09-2026)
   ----------------------------------------------------------------------------
   Glozin vult een knop bij hover met een schuivend vlak in de merkkleur
   (een ::before-laag, klasse gz-button-hover-effect). Zolang die kleur oranje
   was, bleef donkere tekst daarop leesbaar. Op bordeaux #6d1c30 niet meer:
   donkere tekst haalt daar 1,7:1 en verdwijnt praktisch. Tekst op dat vlak
   hoort dus altijd wit te zijn.

   Het thema doet dat al voor de meeste varianten, maar niet voor alle
   (outline, subtiel, icoonknoppen houden #111111) en niet waar een eigen
   regel hierboven de tekstkleur al zette. Deze twee regels dekken beide
   gevallen af.
   ========================================================================== */

/* Elke knop met het schuivende vlak krijgt witte tekst zodra het vlak er is. */
.gz-button-hover-effect:hover,
.gz-button-hover-effect:focus-visible{
	color:var(--lm-white);
}

/* Categorietegel. Sectie 6 zet het label bij hover van de héle tegel in de
   merkkleur — dat klopt, want dan is er geen vlak. Ligt de muis op het label
   zelf, dan schuift het bordeauxvlak eronder en moet de tekst wit zijn.
   Die regel weegt zwaarder dan die in sectie 6, anders wint de oude. */
.lm-cats .glozin-categories-grid__item .glozin-categories-grid__button .gz-button:hover,
.lm-cats .glozin-categories-grid__item:hover .glozin-categories-grid__button .gz-button:hover{
	color:var(--lm-white);
}

/* --- Icoonknoppen: verlanglijst, vergelijken en snelweergave.
   Staan op de productkaart en op de productpagina naast 'In winkelwagen'.

   Drie dingen gingen hier mis en ze lagen op elkaar.
   1. WordPress geeft elke knop met de klasse wp-element-button witte tekst.
      Het icoon is currentColor, dus het was wit op een witte cirkel.
   2. Het thema kleurt het icoon bij hover wit maar laat de cirkel wit, dus
      bij het aanwijzen verdween het opnieuw.
   3. In de stand 'toegevoegd' maakt het thema de cirkel zwart terwijl het
      icoon donker bleef — zwart op zwart.

   Daarom staan alle drie de standen hieronder expliciet, met een eigen
   achtergrond en een eigen icoonkleur. Niets hangt nog af van de knop-
   variabelen van het thema, dus een volgende kleurwissel kan dit niet meer
   breken. */
.product-featured-icons .gz-button-icon,
.product-featured-icons .gz-button-icon svg,
.product-loop-button.gz-button-icon,
.product-loop-button.gz-button-icon svg{
	color:var(--lm-ink);
}
.product-featured-icons .gz-button-icon,
.product-loop-button.gz-button-icon{
	transition:background-color .25s var(--lm-ease),
	           border-color .25s var(--lm-ease),
	           color .25s var(--lm-ease);
}

/* Aanwijzen, toetsenbordfocus en 'toegevoegd': bordeaux cirkel, wit icoon. */
.product-featured-icons .gz-button-icon:hover,
.product-featured-icons .gz-button-icon:focus-visible,
.product-featured-icons .gz-button-icon.added,
.product-loop-button.gz-button-icon:hover,
.product-loop-button.gz-button-icon:focus-visible,
.product-loop-button.gz-button-icon.added{
	background-color:var(--lm-brand);
	border-color:var(--lm-brand);
	color:var(--lm-white);
}
.product-featured-icons .gz-button-icon:hover svg,
.product-featured-icons .gz-button-icon:focus-visible svg,
.product-featured-icons .gz-button-icon.added svg,
.product-loop-button.gz-button-icon:hover svg,
.product-loop-button.gz-button-icon:focus-visible svg,
.product-loop-button.gz-button-icon.added svg{
	color:var(--lm-white);
}
/* Sectie 8 zet de witte cirkel met de selector li.product .product-featured-icons
   .gz-button-icon. Die weegt zwaarder dan de regel hierboven, dus de cirkel bleef
   wit terwijl het icoon al wit werd — opnieuw onzichtbaar. Dezelfde selector,
   nu met de standen erbij, zodat de vulling wel doorkomt. */
li.product .product-featured-icons .gz-button-icon:hover,
li.product .product-featured-icons .gz-button-icon:focus-visible,
li.product .product-featured-icons .gz-button-icon.added,
.single-product .product-featured-icons .gz-button-icon:hover,
.single-product .product-featured-icons .gz-button-icon:focus-visible,
.single-product .product-featured-icons .gz-button-icon.added{
	background-color:var(--lm-brand);
	border-color:var(--lm-brand);
	color:var(--lm-white);
}
li.product .product-featured-icons .gz-button-icon:hover svg,
li.product .product-featured-icons .gz-button-icon:focus-visible svg,
li.product .product-featured-icons .gz-button-icon.added svg,
.single-product .product-featured-icons .gz-button-icon:hover svg,
.single-product .product-featured-icons .gz-button-icon:focus-visible svg,
.single-product .product-featured-icons .gz-button-icon.added svg{
	color:var(--lm-white);
}
/* LM-S19-END */