/*
 * King Webshops | base.css
 * Geladen op elke pagina. Bevat de kleurvariabelen en alles wat op meerdere paginatypes voorkomt
 * (productkaarten staan ook op home, winkelmand en productpagina's, dus die staan hier).
 */

/* =========================================================================
   Kleurvariabelen
   Gekoppeld aan de globale kleuren van Elementor (Site Settings), met de hexcode als fallback.
   Gebruik in alle andere CSS alleen deze variabelen.
   ========================================================================= */
:root {
	--king-hoofdkleur: var(--e-global-color-primary, #764c41);
	--king-hoofdkleur-licht: var(--e-global-color-c4fe80c, #986254);
	--king-accent: var(--e-global-color-accent, #fbb03b);
	--king-tekst: var(--e-global-color-text, #575150);
	--king-groen: var(--e-global-color-498249e, #6b8e4e);
	--king-rood: var(--e-global-color-7ff1995, #c0392b);
	--king-link: var(--e-global-color-f36c252, #5a6bff);
	--king-lichtgrijs: var(--e-global-color-491156f, #f3f3f3);
	--king-middelgrijs: #b8b0ac;
	--king-rand: #e4dedb;

	/* Afwijkende kleuren die (nog) niet in het Elementor-palet staan. */
	--king-voorraadlabel: #77a464;   /* rand en tekst van het label "Op voorraad" op de productpagina */
	--king-signaalrood: #ff0000;     /* "Uitverkocht" en de aanbiedingstermijn */
	--king-nabestelling: #d97706;    /* levertijd bij nabestelling in winkelmand en afrekenen */
	--king-postnl: #ed8c00;          /* PostNL-tabbladen in het afrekenen */
}

/* =========================================================================
   Algemeen
   ========================================================================= */
body {
	overflow-x: hidden;
}

ul,
ol {
	margin-bottom: 15px;
}

/* Bewust voor alle tabellen op de site (winkelmand, afrekenen, account, productpagina). */
table td,
table th {
	border: 0;
}

/* =========================================================================
   Links zonder onderstreping
   ========================================================================= */
.breadcrumb a,
.elementor-nav-menu--dropdown a,
.elementor-location-footer a {
	text-decoration: none;
}

/* Containers die als link werken (o.a. de 16 categorietegels op home) */
a.e-con,
a.e-con:hover {
	text-decoration: none !important; /* wint van de linkstijl uit de Site Settings van Elementor */
}

body .breadcrumb {
	padding: 0;
	margin: 0;
}

/* Blogoverzicht */
h3.elementor-post__title {
	text-decoration: none !important; /* wint van de linkstijl van de posts-widget */
}

/* =========================================================================
   Iconen in header en menu
   ========================================================================= */
.elementor-icon i:before,
.elementor-icon svg:before {
	position: static;
}

i.fa.fa-home {
	padding-bottom: 4px;
}

/* =========================================================================
   Prijzen en beoordelingen
   ========================================================================= */
.price ins {
	text-decoration: none;
}

.woocommerce-price-suffix {
	font-weight: 300;
}

.star-rating {
	margin: 0 !important;          /* overschrijft WooCommerce */
	display: inline-block !important;
}

/* Staffelkortingstabel (productpagina's en productoverzichten) */
.alg_wc_product_ppq_table th,
.alg_wc_product_ppq_table {
	margin-top: 2em;
}

.alg_wc_product_ppq_table th,
.alg_wc_product_ppq_table td {
	text-align: left !important;   /* overschrijft de plugin */
	font-size: 0.9em;
	padding: 1em;
}

/* =========================================================================
   Voorraadstatus (productkaarten en productpagina)
   ========================================================================= */
.stock,
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product .stock {
	color: var(--king-groen);
}

.out-of-stock {
	color: var(--king-signaalrood) !important; /* wint van WooCommerce en .stock */
}

.available-on-backorder {
	color: var(--king-accent) !important;
}

/* =========================================================================
   Productkaarten (categorie, zoekresultaten, home, winkelmand, gerelateerde producten)
   ========================================================================= */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	text-align: center;
}

.woocommerce ul.products li.product a img {
	height: 200px;
	object-fit: contain;
}

.woocommerce-loop-product__title {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	color: var(--king-tekst);
}

.woocommerce ul.products li.product .price {
	color: var(--king-tekst);
	font-size: 16px;
	font-weight: 700;
	font-family: "Montserrat", sans-serif;
	margin-top: 0.5em;
}

/* Knop altijd onderaan de kaart */
.woocommerce .products .product .button {
	margin: 0;
	position: sticky;
	top: 100%;
}

.woocommerce ul.products li.product .button {
	background-color: var(--king-hoofdkleur);
	color: #fff;
	border-radius: 8px;
	padding: 11px;
}

/* Kortingslabel */
span.onsale {
	display: block;
	background-color: color-mix(in srgb, var(--king-rood) 90%, transparent) !important;
	font-family: "Montserrat", sans-serif;
	border-radius: 0 !important;
	min-height: unset !important;
	min-width: unset !important;
	line-height: unset !important;
	max-width: 49%;
	font-size: 0.8rem !important;
	box-shadow: 0 0 10px rgba(0 0 0 / 0.1) !important;
	padding: 0.8em !important;
	left: auto !important;
	right: 0 !important;
	margin: 0 !important;
	/* !important: overschrijft de standaardlabels van WooCommerce en Elementor */
}

/* =========================================================================
   Webwinkelkeur
   ========================================================================= */
.webwinkelkeur-rich-snippet a {
	text-decoration: underline;
	font-weight: 500;
}

/* Ruimte onder de Webwinkelkeur-tekst in de footer voor de taalknop van Clonable */
@media (max-width: 1024px) {
	.webwinkelkeur-rich-snippet {
		padding-bottom: 70px !important;
	}
}

/* =========================================================================
   Cookiebanner (Complianz)
   ========================================================================= */
body .cmplz-cookiebanner {
	border-radius: 0;
	font-family: "Montserrat", sans-serif;
}

body .cmplz-cookiebanner .cmplz-header {
	display: flex;
	flex-wrap: wrap;
}

body .cmplz-cookiebanner .cmplz-header .cmplz-title {
	font-size: 20px;
	font-weight: bold;
	display: block !important;
}

body .cmplz-cookiebanner .cmplz-close {
	display: none;
}

#cmplz-manage-consent .cmplz-manage-consent {
	display: none;
}

/* =========================================================================
   Winkelmelding van WooCommerce (alleen zichtbaar als die aan staat)
   ========================================================================= */
.woocommerce-store-notice,
p.demo_store {
	background-color: var(--king-groen);
}

.woocommerce-store-notice a:hover,
p.demo_store a:hover {
	color: #fff;
	text-decoration: underline;
}

/* =========================================================================
   Clonable (schach-koenig.de) — weg zodra Clonable verdwijnt
   ========================================================================= */
#position-container.clonable-static-outer-container {
	z-index: 9998 !important; /* taalknop achter de uitklapbare winkelmand */
}

/* Contactformulier: NL-formulier tonen; Clonable wisselt dit op de Duitse site om met eigen CSS. */
.display-de {
	display: none;
}

/* =========================================================================
   WP Store Locator (schaakverenigingen op de Duitse site)
   ========================================================================= */
.wpsl-directions {
	display: none !important;
}