/*
 * Merchado Flow — productpagina-verfijningen (merk, onder-titel, tabs-pillen,
 * klikbare staffel). Bewust kort + gescoped; !important waar Elementor/Blocksy
 * hoge specificiteit heeft.
 */

/* Merk boven de titel — we gebruiken de native .merchado-brand-display uit het
   Elementor-template en zetten er via CSS "Merk: " voor (zoals het PDF-ontwerp).
   (Eigen JS-injectie van de merk-regel is verwijderd → geen dubbele merk-regel.) */
.merchado-brand-display .merchado-brand-name::before {
	content: 'Merk: ';
}

/* Onder-titel-regel: v.a. €X · min N · levertijd */
.mc-pdp-subtitle {
	font-family: 'Inter', -apple-system, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #5C5C58;
	margin: 6px 0 16px;
}
/* R3: prijs in de subtitel niet dikgedrukt, zelfde grijs als de rest. */
.mc-pdp-subtitle .woocommerce-Price-amount {
	font-weight: 400;
	color: inherit;
}

/* R3: kleurbolletjes als MASSIEVE cirkels (~1,5× groter: 24→36px), zónder de lege
   cream-ring van Blocksy. Kleur vult de hele swatch; lichte kleuren krijgen een
   faint randje; de gekozen kleur (.ct-swatch-container.active) een nette donkere
   ring. Scope op color-swatches — de "button"-swatch (Personalisatie) ongemoeid. */
.ct-variation-swatches[data-swatches-type="color"] .ct-swatch-container,
.ct-variation-swatches[data-swatches-type="color"] .ct-swatch {
	width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
}
.ct-variation-swatches[data-swatches-type="color"] .ct-swatch-content {
	width: 36px !important;
	height: 36px !important;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
}
.ct-variation-swatches[data-swatches-type="color"] .ct-swatch:hover {
	box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px rgba(29, 29, 27, 0.25) !important;
}
.ct-variation-swatches[data-swatches-type="color"] .ct-swatch-container.active .ct-swatch {
	box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #1D1D1B !important;
}
/* "Bedrukken" (button-swatch, Stap 2) net zo groot als de info-tabs (18px). */
.ct-variation-swatches[data-swatches-type="button"] .ct-swatch-content {
	font-size: 18px !important;
}
/* "Gemaakte keuzes herstellen" (WC reset-link) NAAST de variatie-knop i.p.v.
   eronder — anders overlapt 't met de staffel die dichter onder Stap 2 staat. */
.variations_form .variations tr:last-child td.value {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 18px !important;
}
.variations_form .variations tr:last-child td.value .ct-variation-swatches {
	width: auto !important;
	flex: 0 0 auto !important;
}
.variations_form .reset_variations {
	margin: 0 !important;
	font-size: 13px !important;
}

/* Tabs (Specificaties / Personaliseren / Meer info) als pillen */
.e-n-tabs .e-n-tab-title {
	border: 1px solid #E4DECF !important;
	border-radius: 9999px !important;
	padding: 7px 16px !important;
	margin: 0 8px 8px 0 !important;
	background: #FFFFFF !important;
	font-family: 'Inter', -apple-system, sans-serif !important;
	font-weight: 500 !important;
	color: #1D1D1B !important;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.e-n-tabs .e-n-tab-title:hover {
	border-color: #9E491D !important;
}
.e-n-tabs .e-n-tab-title[aria-selected="true"],
.e-n-tabs .e-n-tab-title.e-active {
	background: #1D1D1B !important;
	color: #FFFFFF !important;
	border-color: #1D1D1B !important;
}

/* Klikbare staffel-rijen — selectie = gevulde radio + vette rij (zoals de PDF),
   geen rij-achtergrond. */
.merchado-staffel__table tbody tr:hover .merchado-staffel__radio {
	border-color: #9E491D;
}
.merchado-staffel__table tbody tr.is-active td {
	font-weight: 700;
	color: #1D1D1B;
}
.merchado-staffel__table tbody tr.is-active .merchado-staffel__radio {
	border-color: #1D1D1B;
	background: #1D1D1B;
	box-shadow: inset 0 0 0 3px #FFFFFF;
}