/* =========================================================================
   Macrolux global — merk-designsysteem, site-breed.
   Trekt de homepagina-stijl (Open Sans, oranje, afgeronde vormen) door naar
   de rest van de shop, zonder pagina's om te bouwen. Elementor-pagina's
   laten we met rust; die erven alleen lettertype/kleuren.
   ========================================================================= */

:root {
	--ml-orange: #ff6600;
	--ml-orange-dark: #e65c00;
	--ml-ink: #1d1d1b;
	--ml-muted: rgba(29, 29, 27, 0.55);
	--ml-line: #e9e9e9;
	--ml-panel: #f6f6f4;
	--ml-radius: 15px;
	--ml-radius-sm: 8px;
	--ml-shadow: 0 6px 24px rgba(29, 29, 27, 0.06);
	--ml-shadow-hover: 0 12px 30px rgba(29, 29, 27, 0.1);
}

/* ---------- Basis-typografie (Open Sans, zoals de homepagina) ----------- */
body {
	font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--ml-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--ml-ink);
}

::selection {
	background: var(--ml-orange);
	color: #fff;
}

/* ---------- Formuliervelden: rustig, afgerond, oranje focus ------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-radius-sm);
	background: #fff;
	color: var(--ml-ink);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--ml-ink);
	box-shadow: none;
}

/* ---------- Oranje custom vinkje overal (zoals de upsell) -------------- */
/* De verborgen switch-checkbox (prijs-toggle) uitgezonderd. */
input[type="checkbox"]:not(.ml-switch__input) {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0 8px 0 0;
	padding: 0;
	vertical-align: -6px;
	border: 2px solid #d8d6d1;
	border-radius: 6px;
	background: #fff center / 14px no-repeat;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

input[type="checkbox"]:not(.ml-switch__input):hover {
	border-color: rgba(255, 102, 0, 0.55);
}

input[type="checkbox"]:not(.ml-switch__input):checked {
	border-color: var(--ml-orange);
	background-color: var(--ml-orange);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

input[type="checkbox"]:not(.ml-switch__input):focus-visible {
	outline: 2px solid var(--ml-ink);
	outline-offset: 2px;
}

/* Kava verbergt de echte checkbox (display:none) en tekent een eigen blauwe
   namaak-checkbox via span::before/::after. Dat zetten we terug, zodat overal
   ons oranje vinkje verschijnt in plaats van die blauwe. */
label.checkbox input[type="checkbox"],
label.inline input[type="checkbox"],
.woocommerce-form__label-for-checkbox input[type="checkbox"] {
	display: inline-block !important;
}

label.checkbox input[type="checkbox"] + span::before,
label.checkbox input[type="checkbox"] + span::after,
label.inline input[type="checkbox"] + span::before,
label.inline input[type="checkbox"] + span::after,
.woocommerce-form__label-for-checkbox input[type="checkbox"] + span::before,
.woocommerce-form__label-for-checkbox input[type="checkbox"] + span::after {
	display: none !important;
}

/* Kava's ruimte voor het (nu verborgen) namaak-vakje weghalen. */
label.checkbox.woocommerce-form__label,
label.inline.woocommerce-form__label {
	padding-left: 0;
}

/* ---------- Content-knoppen in merk-stijl (Elementor uitgezonderd) ------ */
.wp-block-button__link,
.entry-content a.button:not(.elementor-button),
.entry-content button:not(.elementor-button) {
	background: var(--ml-orange);
	color: #fff;
	border: 0;
	border-radius: 5px;
	padding: 12px 22px;
	font-weight: 600;
	line-height: 1.2;
	transition: filter 0.15s ease, transform 0.05s ease;
}

.wp-block-button__link:hover,
.entry-content a.button:not(.elementor-button):hover,
.entry-content button:not(.elementor-button):hover {
	filter: brightness(0.93);
	color: #fff;
}

/* Content-links: oranje accent bij hover. */
.entry-content a:not(.button):not(.wp-block-button__link) {
	color: inherit;
	text-decoration-color: rgba(255, 102, 0, 0.4);
}

.entry-content a:not(.button):not(.wp-block-button__link):hover {
	color: var(--ml-orange);
}

/* ---------- Content-container: even breed als onze header/footer -------- */
/* Thema zet .container op 1140px; onze merk-container is min(1400px, 100%-40px). */
.site-breadcrumbs__wrap.container,
.site-content__wrap.container {
	max-width: min(1400px, 100% - 40px) !important;
	width: 100% !important;
}

/* ---------- Paginakop: kruimelpad-band + paginatitel -------------------- */
/* Rustige lichte band met klein kruimelpad, daaronder een strakke titel. */
.site-breadcrumbs {
	background: var(--ml-panel) !important;
	border-bottom: 1px solid var(--ml-line);
	padding: 12px 0 !important;
	margin: 0 !important;
}

.site-breadcrumbs .breadcrumbs {
	display: block !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

.site-breadcrumbs .breadcrumbs_content {
	font-size: 13px;
	line-height: 1.4;
}

.site-breadcrumbs .breadcrumbs_wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

.site-breadcrumbs .breadcrumbs_item {
	display: inline-flex;
	align-items: center;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.site-breadcrumbs .breadcrumbs_item_link {
	color: var(--ml-muted) !important;
	text-decoration: none !important;
}

.site-breadcrumbs .breadcrumbs_item_link:hover {
	color: var(--ml-orange) !important;
}

.site-breadcrumbs .breadcrumbs_item_sep {
	color: var(--ml-muted);
	opacity: 0.6;
	margin: 0 6px !important;
}

.site-breadcrumbs .breadcrumbs_item_target {
	color: var(--ml-ink) !important;
	font-weight: 600;
}

/* Paginatitel */
.site-main .page-header {
	margin: 6px 0 10px;
	padding: 0;
	border: 0;
	background: transparent;
}

.site-main .page-header .page-title,
.site-main h1.entry-title {
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--ml-ink);
	text-transform: none !important;
	letter-spacing: 0 !important;
	margin: 18px 0 22px;
	text-align: left;
}

/* =========================================================================
   Reveal-animaties — subtiel infaden bij het in beeld komen (staggered).
   De .ml-reveal klasse wordt door macrolux-reveal.js gezet; zonder JS
   blijft alles dus gewoon zichtbaar.
   ========================================================================= */
.ml-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity 0.6s ease,
		transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
	transition-delay: var(--ml-reveal-delay, 0ms);
	will-change: opacity, transform;
}

.ml-reveal.is-inview {
	opacity: 1;
	transform: none;
}

/* ---------- Kiyoh: winkelscore tussen de productbadges ------------------ */
.ml-kiyoh-stars {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: inherit;
	text-decoration: none;
}

.ml-kiyoh-score {
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

/* ---------- Verzenddrempel: voortgang en regel op de productpagina ------ */
.ml-verzending {
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-radius-sm);
	background: var(--ml-panel);
}

.ml-verzending--bereikt {
	border-color: rgba(255, 102, 0, 0.35);
	background: rgba(255, 102, 0, 0.06);
}

.ml-verzending__tekst {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ml-ink);
}

.ml-verzending__icon .ml-icon {
	width: 19px;
	height: 19px;
	color: var(--ml-orange);
}

.ml-verzending__balk {
	height: 6px;
	border-radius: 100px;
	background: rgba(29, 29, 27, 0.1);
	overflow: hidden;
}

.ml-verzending__vulling {
	display: block;
	height: 100%;
	border-radius: 100px;
	background: var(--ml-orange);
	transition: width 0.4s ease;
}

.ml-verzending-regel {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ml-ink);
}

.ml-verzending-regel .ml-icon {
	width: 18px;
	height: 18px;
	color: var(--ml-orange);
}

/* ---------- Bestelstatus: tijdlijn met drie fases ----------------------- */
.ml-tijdlijn {
	margin: 0 0 30px;
}

.ml-tijdlijn__lijst {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ml-fase;
}

.ml-tijdlijn__stap {
	position: relative;
	padding-top: 22px;
}

/* De balk boven elke fase geeft de voortgang aan. */
.ml-tijdlijn__stap::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	border-radius: 100px;
	background: rgba(29, 29, 27, 0.12);
}

.ml-tijdlijn__stap--klaar::before,
.ml-tijdlijn__stap--actief::before {
	background: var(--ml-orange);
}

.ml-tijdlijn__punt {
	position: absolute;
	top: -6px;
	left: 0;
	display: none;
}

.ml-tijdlijn__label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--ml-muted);
}

.ml-tijdlijn__stap--actief .ml-tijdlijn__label {
	font-weight: 700;
	color: var(--ml-ink);
}

.ml-tijdlijn__tekst {
	display: none;
	padding-top: 4px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--ml-muted);
}

.ml-tijdlijn__stap--actief .ml-tijdlijn__tekst {
	display: block;
}

@media (max-width: 640px) {
	.ml-tijdlijn__lijst {
		gap: 10px;
	}

	.ml-tijdlijn__label {
		font-size: 13px;
	}
}