/* Zaklampwinkel huisstijl bovenop Blocksy (gemeten op live 25-10-2026). */
:root {
	--zw-oranje: #ff5a06;
	--zw-oranje-hover: #e04e00;
	--zw-petrol: #075056;
	--zw-petrol-licht: #25777e;
	--zw-tekst: #0d1116;
	--zw-radius: 10px;
}

/* iOS Safari geeft <button> standaard systeemblauw; de iconen uit iconen.css (masker in currentColor) werden
   daardoor blauw (menu, zoeken, sluiten, filters; live 28-10). Specificiteit 0: elke eigen kleurregel wint. */
:where(button) {
	color: inherit;
}

/* Knoppen: hoofdletters, Exo 2, radius 10px (zoals live). */
.ct-button,
.button,
button[type="submit"],
.wp-element-button,
.wp-block-button__link {
	font-family: "Exo 2", sans-serif;
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	border-radius: var(--zw-radius);
}

/* Header: Advies (omlijnd petrol) + Offerte (oranje) via het HTML-element. */
.zw-header-knoppen {
	display: flex;
	gap: 10px;
	align-items: center;
}
.zw-knop {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 0 21px;
	border: 1px solid var(--zw-petrol);
	border-radius: var(--zw-radius);
	font-family: "Exo 2", sans-serif;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--zw-petrol);
	background: transparent;
	transition: background-color 0.15s, color 0.15s;
}
.zw-knop:hover {
	background: var(--zw-petrol);
	color: #fff;
}
.zw-knop--oranje {
	border-color: var(--zw-oranje);
	background: var(--zw-oranje);
	color: #fff;
}
.zw-knop--oranje:hover {
	border-color: var(--zw-oranje-hover);
	background: var(--zw-oranje-hover);
	color: #fff;
}

/* Prijzen in petrol, zoals live. */
.price,
.woocommerce-Price-amount {
	font-family: "Exo 2", sans-serif;
	font-weight: 600;
	color: var(--zw-petrol-licht);
}
del .woocommerce-Price-amount {
	color: #8a9496;
	font-weight: 400;
}

/* Footer */
.ct-footer .zw-footer-kop {
	margin-bottom: 14px;
	font-family: "Exo 2", sans-serif;
	font-size: 17px;
	font-weight: 500;
	text-transform: uppercase;
	color: #9aa3a5;
}
.ct-footer .zw-footer-links {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ct-footer .zw-footer-links li {
	margin-bottom: 10px;
}
.ct-footer .zw-footer-links a {
	font-family: "Exo 2", sans-serif;
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--zw-tekst);
}
.ct-footer .zw-footer-links a:hover {
	color: var(--zw-oranje);
}
.ct-footer .zw-footer-hulp p {
	margin: 0 0 12px;
	font-family: "Exo 2", sans-serif;
	font-weight: 600;
}
.ct-footer .zw-betaalmethodes {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: flex-end;
}
.ct-footer .zw-betaalmethodes img {
	width: 32px;
	height: 32px;
}

/* Filters (Blocksy WooCommerce Extra): merklogo's begrenzen. */
.ct-filter-widget img,
.ct-filter-item img {
	width: auto;
	max-width: 70px;
	max-height: 24px;
	object-fit: contain;
}
.ct-filter-widget .ct-filter-item {
	align-items: center;
}

/* Winkelwagen-bolletje oranje, zoals live. */
.ct-header-cart .ct-dynamic-count-cart {
	background: var(--zw-oranje);
	color: #fff;
}
.ct-footer [data-column="copyright"] a {
	text-decoration: underline;
}

/* Mobiel menu zoals live (inc/mobiel-menu.php, Ruben 26-10): zoekveld, tabs Winkel/Informatie, knoppen op volle breedte. */
#offcanvas .ct-panel-content[data-device="mobile"] .ct-panel-content-inner {
	padding: 0;
}
.zw-mm {
	align-self: stretch;
	width: 100%;
}
#offcanvas .ct-toggle-close::after {
	content: "Sluiten";
	margin-left: 8px;
	font-family: "Exo 2", sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--zw-tekst);
}
#offcanvas .ct-toggle-close {
	display: inline-flex;
	align-items: center;
}
.zw-mm-zoek {
	display: flex;
	align-items: center;
	height: 70px;
	padding: 0 20px;
	box-shadow: 0 6px 10px -8px rgba(13, 17, 22, 0.25);
	border-top: 1px solid #ececec;
}
.zw-mm-zoek input[type="search"] {
	flex: 1;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 15px;
	font-weight: 600;
	color: var(--zw-tekst);
	box-shadow: none;
}
.zw-mm-zoek input[type="search"]::placeholder {
	color: #6b7678;
}
.zw-mm-zoek button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--zw-tekst);
	cursor: pointer;
}
.zw-mm-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: #f2f2f2;
}
.zw-mm-tabs button {
	height: 54px;
	padding: 0;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	font-family: "Exo 2", sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #8a9496;
	cursor: pointer;
}
.zw-mm-tabs button[aria-selected="true"] {
	border-bottom-color: var(--zw-oranje);
	background: #e9e9e9;
	color: var(--zw-tekst);
}
.zw-mm-lijst {
	margin: 0;
	padding: 0;
	list-style: none;
}
.zw-mm-lijst li a {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 50px;
	padding: 0 20px;
	border-bottom: 1px solid #ececec;
	font-family: "Exo 2", sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	color: #333;
}
.zw-mm-lijst li a:hover,
.zw-mm-lijst li.current-menu-item > a {
	color: var(--zw-oranje);
}
.zw-mm-knoppen {
	display: grid;
	gap: 11px;
	padding: 40px 20px;
}
.zw-mm-knoppen .zw-knop {
	justify-content: center;
	min-height: 38px;
	border-color: var(--zw-tekst);
	color: var(--zw-tekst);
}
.zw-mm-knoppen .zw-knop--oranje {
	border-color: var(--zw-oranje);
	color: #fff;
}

/* "i"-uitleg bij filters en specificaties (inc/uitleg.php, Ruben 26-10). */
.zw-info {
	position: relative;
	display: inline-flex;
	vertical-align: middle;
	margin-left: 6px;
	cursor: help;
	outline: none;
}
.zw-info__i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-family: Georgia, serif;
	font-size: 11px;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
	text-transform: none;
	color: #8a9496;
}
.zw-info:hover .zw-info__i,
.zw-info:focus .zw-info__i,
.zw-info.is-open .zw-info__i {
	color: var(--zw-oranje);
}
.zw-info__tip {
	position: absolute;
	top: calc(100% + 8px);
	left: -10px;
	z-index: 50;
	width: min(280px, calc(100vw - 24px));
	transform: translateX(var(--zw-tip-x, 0px)); /* inc/uitleg.php schuift de tip binnen het scherm */
	padding: 12px 14px;
	border-radius: 8px;
	background: var(--zw-tekst);
	box-shadow: 0 6px 20px rgba(13, 17, 22, 0.2);
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 13px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.5;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	white-space: normal;
	color: #fff;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s;
	pointer-events: none;
}
.zw-info:focus .zw-info__tip,
.zw-info.is-open .zw-info__tip {
	opacity: 1;
	visibility: visible;
}
@media (hover: hover) {
	.zw-info:hover .zw-info__tip {
		opacity: 1;
		visibility: visible;
	}
}

/* Mandpaneel: leesbare tekstgroottes (Ruben 26-10). */
#woo-cart-panel .woocommerce-mini-cart-item {
	font-size: 14px;
}
#woo-cart-panel .woocommerce-mini-cart-item a:not(.remove) {
	font-size: 15px;
	line-height: 1.4;
}
#woo-cart-panel .woocommerce-mini-cart__total {
	font-size: 15px;
}
#woo-cart-panel [class*="shipping-progress"] {
	font-size: 14px;
}
#woo-cart-panel .woocommerce-mini-cart__buttons .button {
	min-height: 46px;
	font-size: 14px;
}

/* ------------------------------------------------------------------ Typografie volgens de CI (keuze Ruben 26-10)
   Zaklampwinkel CI.pdf p.10: koppen Exo 2 SemiBold, subkoppen Exo 2 Light, tekst IBM Plex Sans Light (nadruk Medium),
   knoppen IBM Plex Sans Light in gewone letters, pilvorm. Gewichten 300 laden via blocksy-thema-setup.php.
   Staat bewust onderaan en met !important (zoals in de goedgekeurde render): gewichten staan ook in andere CSS-bestanden. */
body, p, li, td, th, dd, dt, .entry-content, .woocommerce-product-details__short-description {
	font-family: "IBM Plex Sans", sans-serif !important;
	font-weight: 300 !important;
}
strong, b {
	font-weight: 500 !important;
}
h1, h2, .woocommerce-loop-product__title, .product_title {
	font-family: "Exo 2", sans-serif !important;
	font-weight: 600 !important;
}
h3, h4, .zw-uitgelicht__titel, .zw-hero-intro, .zw-quote-kop {
	font-family: "Exo 2", sans-serif !important;
	font-weight: 300 !important;
}
/* Knoppen volgens de Figma-stijlgids (~/inbox "Zaklampwinkel - Mockups.fig", Style Guide > BUTTONS), niet de CI:
   de pilknoppen in de CI waren alleen een fontvoorbeeld (Ruben 27-10). Exo 2 SemiBold 12px, hoofdletters,
   letter-spacing 1%, radius 10px; hover = vlak #0d1116 met witte tekst, op een donkere kop wit met donkere tekst. */
.ct-button, .button, button[type="submit"], .wp-element-button, .wp-block-button__link, .zw-knop, .single_add_to_cart_button {
	font-family: "Exo 2", sans-serif !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	letter-spacing: 0.01em !important;
	text-transform: uppercase !important;
	border-radius: var(--zw-radius) !important;
}
.ct-button:hover, .button:hover, .wp-element-button:hover, .wp-block-button__link:hover, .zw-knop:hover, .single_add_to_cart_button:hover {
	border-color: var(--zw-tekst) !important;
	background: var(--zw-tekst) !important;
	color: #fff !important;
}
.zw-hero .wp-block-button__link:hover {
	border-color: #fff !important;
	background: #fff !important;
	color: var(--zw-tekst) !important;
}
/* Maten en spacing zoals live (gemeten 27-10, Ruben): knop 13px 21px binnenruimte, 45px hoog. */
.wp-block-button__link, .single_add_to_cart_button {
	min-height: 45px;
	padding: 13px 21px !important;
}
/* Home: hoofdactie eerst, beide knoppen even breed (live mobiel 190px). */
.zw-hero--home .wp-block-button__link {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 190px;
}
/* Omlijnde knop: rand 1px (Figma) en 1px minder binnenruimte, zodat hij even hoog is als de volle knop. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border-width: 1px !important;
	padding: 12px 20px !important;
}
/* Mobiel: winkelwagentekst op één regel naast de aantalkiezer. */
@media (max-width: 480px) {
	.single-product .entry-summary .single_add_to_cart_button {
		padding-inline: 10px !important;
		white-space: nowrap;
	}
	body.single-product .entry-summary .ct-cart-actions .quantity {
		width: 110px;
	}
	body.single-product .entry-summary .ct-cart-actions .quantity input.qty {
		padding: 0 36px;
	}
	body.single-product .entry-summary .ct-cart-actions .quantity .ct-increase,
	body.single-product .entry-summary .ct-cart-actions .quantity .ct-decrease {
		width: 36px;
	}
}

/* Labels linksboven op de productfoto (kaart en productpagina), zoals de Figma-stijlgids: pil 30px hoog, radius 9,
   Exo 2 12px hoofdletters; USP omlijnd, Aanbieding licht oranje. Markup: zw_labels_html() in inc/kaarten.php. */
.zw-labels {
	position: absolute;
	z-index: 3;
	top: 12px;
	left: 12px;
	right: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	pointer-events: none;
}
.zw-labels > * {
	position: static !important;
	inset: auto !important;
	transform: none !important;
	display: inline-flex !important;
	align-items: center;
	min-height: 30px;
	margin: 0 !important;
	padding: 0 12px !important;
	border-radius: 9px !important;
	font-family: "Exo 2", sans-serif !important;
	font-size: 12px !important;
	letter-spacing: 0.01em;
	line-height: 1 !important;
	text-transform: uppercase;
}
.zw-labels .zw-usp-badge {
	border: 1px solid rgba(13, 17, 22, 0.2);
	background: #fff;
	color: var(--zw-tekst);
	font-weight: 500 !important;
}
.zw-labels .onsale {
	border: 0;
	background: #ffefe6 !important;
	color: var(--zw-oranje) !important;
	font-weight: 600 !important;
}
.zw-labels .out-of-stock-badge {
	background: var(--zw-tekst) !important;
	color: #fff !important;
	font-weight: 600 !important;
}
@media (max-width: 480px) {
	.zw-labels > * {
		min-height: 24px;
		padding: 0 8px !important;
		font-size: 11px !important;
	}
}