/**
 * Front-end: native catalogus + optioneel iframe.
 *
 * Contentbreedte: PDP, categorie, checkout (incl. shortcode `.ecac-sf-inline`), account en algemene `.ecac-sf-page__inner` gebruiken `body { --ecac-storefront-align-max }` (≈ Oxygen 1500px / WP wide-size). Override alles: `--ecac-storefront-inner-max-width`; echte volle breedte: zet die op `none`.
 * Wil je zelf een vaste max-breedte of volle breedte (`none`), zet op :root of een wrapper:
 *   --ecac-storefront-inner-max-width: 1500px;
 *   --ecac-native-vitrine-max-width: 72rem;
 * Extra horizontale ruimte om het raster (los van het thema): --ecac-native-vitrine-padding-inline: 1rem;
 *
 * Standaard uitlijning (~Oxygen 1500px-header): --ecac-storefront-align-max op body. Globaal overrulen: --ecac-storefront-inner-max-width op :root/body/wrapper.
 * PDP op Oxygen: `body.ecac-is-product-url` heft smalle `.ct-section`/`.ct-text-block` op en zet `.ct-section-inner-wrap` op dezelfde max-breedte als de header.
 */

body {
	--ecac-storefront-align-max: min(
		var(--wp--style--global--wide-size, var(--wp--style--global--content-size, 1500px)),
		100%
	);
}

/* Native cart/checkout shortcode: zelfde inhoudsbreedte als `.ecac-co-page-inner` / header (rewrite-flow gebruikt die inner; embed gebruikt deze wrapper). */
.ecac-sf-inline {
	margin-top: 1.5rem;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
	max-width: var(--ecac-storefront-inner-max-width, var(--ecac-storefront-align-max));
	width: 100%;
	box-sizing: border-box;
}

.ecac-sf-inline .ecac-sf-panel {
	margin: 0;
	width: 100%;
	box-sizing: border-box;
}

.ecac-vitrine-notice {
	margin: 1rem 0;
	padding: 0.75rem 1rem;
	border-radius: 8px;
	background: #fef3c7;
	color: #92400e;
	font-size: 0.9375rem;
}

/* ---- Native shop (API) ---- */

.ecac-native {
	margin: 1.5rem 0;
}

.ecac-native-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: 1rem 1.1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ecac-native-card-wrap {
	margin: 0;
}

.ecac-native-card {
	height: 100%;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
	transition:
		box-shadow 0.15s ease,
		border-color 0.15s ease;
}

.ecac-native-card:hover {
	border-color: #ddd6fe;
	box-shadow: 0 6px 20px rgba(124, 58, 237, 0.12);
}

.ecac-native-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.ecac-native-card__media {
	display: block;
	aspect-ratio: 1;
	background: #f8fafc;
	overflow: hidden;
}

.ecac-native-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.ecac-native-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.35rem;
	padding: 0.85rem 0.95rem 1rem;
}

.ecac-native-card__title {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	color: #0f172a;
}

.ecac-native-card__meta {
	font-size: 0.875rem;
	color: #64748b;
}

.ecac-native-price-prefix {
	font-weight: 500;
	margin-right: 0.15rem;
}

.ecac-native-price {
	font-weight: 600;
	color: #7c3aed;
}

.ecac-native-more {
	margin: 1.25rem 0 0;
	font-size: 0.9375rem;
}

.ecac-native-more-link {
	font-weight: 600;
	color: #7c3aed;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Alleen visueel: kaarten tot afbeelding (link + img-alt blijven voor toegankelijkheid). */
.ecac-native--grid-minimal .ecac-native-card__body {
	padding: 0;
	gap: 0;
	min-height: 0;
}

.ecac-native--grid-minimal .ecac-native-card__title,
.ecac-native--grid-minimal .ecac-native-card__short,
.ecac-native--grid-minimal .ecac-native-card__sku,
.ecac-native--grid-minimal .ecac-native-card__reviews,
.ecac-native--grid-minimal .ecac-native-card__price-row,
.ecac-native--grid-minimal .ecac-native-card__meta,
.ecac-native--grid-minimal .ecac-native-card__cta {
	display: none !important;
}

.ecac-native-more-link:hover,
.ecac-native-more-link:focus {
	color: #5b21b6;
}

.ecac-native-fallback {
	margin-top: 0.5rem;
}

/* ---- Native shop / nieuwste producten / categorie-overzicht: zelfde grid-stijl als Vue-vitrine ---- */
.ecac-native--vitrine.ecac-native--shop,
.ecac-native--vitrine.ecac-native--latest,
.ecac-native--vitrine.ecac-native--categories {
	--ecac-vitrine-line: #e2e4ed;
	--ecac-vitrine-ink: #1a1d1f;
	--ecac-vitrine-muted: #9a9fa5;
	--ecac-vitrine-sidebar: #edeef6;
	max-width: var(--ecac-native-vitrine-max-width, none);
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	/* Horizontaal geen extra inset: thema (.entry-content / container) bepaalt de kantlijnen */
	padding: 2.5rem var(--ecac-native-vitrine-padding-inline, 0) 0;
	background: transparent;
	box-sizing: border-box;
}

@media (min-width: 640px) {
	.ecac-native--vitrine.ecac-native--shop,
	.ecac-native--vitrine.ecac-native--latest,
	.ecac-native--vitrine.ecac-native--categories {
		padding-left: var(--ecac-native-vitrine-padding-inline, 0);
		padding-right: var(--ecac-native-vitrine-padding-inline, 0);
	}
}

.ecac-native-latest__title {
	margin: 0 0 1.25rem;
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--ecac-vitrine-ink, #1a1d1f);
}

/* Native winkel: zoek- en categoriefilter (client-side op geladen producten) */
.ecac-native-shop-toolbar {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border-radius: 0.75rem;
	border: 1px solid var(--ecac-vitrine-line, #e2e4ed);
	background: var(--ecac-vitrine-sidebar, #edeef6);
}

.ecac-native-shop-toolbar__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	align-items: flex-end;
}

.ecac-native-shop-toolbar__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: min(100%, 14rem);
	flex: 1 1 12rem;
}

.ecac-native-shop-toolbar__l {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ecac-vitrine-muted, #9a9fa5);
}

.ecac-native-shop-toolbar__empty {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	color: var(--ecac-vitrine-muted, #9a9fa5);
}

.ecac-native-shop-toolbar .ecac-input {
	width: 100%;
	max-width: none;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--ecac-vitrine-line, #e2e4ed);
	border-radius: 0.5rem;
	font-size: 0.875rem;
	background: #fff;
}

/* ---- Vitrine-achtige catalogus: sidebar + grid + mobiele filter-dock ---- */

.ecac-sf-catalog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
	width: 100%;
	box-sizing: border-box;
	padding-bottom: 5.5rem;
}

@media (min-width: 1024px) {
	.ecac-sf-catalog-layout {
		grid-template-columns: minmax(14rem, 17.5rem) minmax(0, 1fr);
		gap: 1.75rem 2rem;
		padding-bottom: 0;
	}
}

.ecac-sf-catalog-sidebar {
	display: none;
}

@media (min-width: 1024px) {
	.ecac-sf-catalog-sidebar {
		display: block;
		position: sticky;
		top: 1rem;
	}
}

.ecac-sf-catalog-main {
	min-width: 0;
}

.ecac-sf-catalog-main .ecac-native--vitrine.ecac-native--shop {
	padding-top: 0;
	margin-top: 0;
}

.ecac-sf-filters {
	border-radius: 1rem;
	border: 1px solid var(--ecac-vitrine-line, #e2e4ed);
	background: #fff;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
	padding: 1rem 1.1rem 1.15rem;
	box-sizing: border-box;
}

.ecac-sf-filters__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 0.75rem;
	margin-bottom: 1rem;
}

.ecac-sf-filters__title {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ecac-vitrine-muted, #9a9fa5);
}

.ecac-sf-filters__clear {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ecac-sf-brand, #6c5ce7);
}

.ecac-sf-filters__clear:hover {
	color: var(--ecac-sf-brand-hover, #5b4dc7);
	text-decoration: underline;
}

.ecac-sf-filters__group {
	margin-top: 1rem;
}

.ecac-sf-filters__group:first-of-type {
	margin-top: 0;
}

.ecac-sf-filters__label {
	display: block;
	margin: 0 0 0.4rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ecac-vitrine-ink, #1a1d1f);
}

.ecac-sf-filters__scroll {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	max-height: 10rem;
	overflow-y: auto;
	padding-right: 0.2rem;
}

.ecac-sf-filters__row {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.25rem 0.35rem;
	border-radius: 0.5rem;
	cursor: pointer;
	font-size: 0.875rem;
	color: var(--ecac-vitrine-ink, #1a1d1f);
}

.ecac-sf-filters__row:hover {
	background: color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 8%, transparent);
}

.ecac-sf-filters__cb {
	width: 1rem;
	height: 1rem;
	accent-color: var(--ecac-sf-brand, #6c5ce7);
	flex-shrink: 0;
}

.ecac-sf-filters__row-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Categorieën + Tags: identiek blok (zelfde ritme als Vue StorefrontProductFilters). */
.ecac-sf-filters__head + .ecac-sf-filters__group--taxonomy {
	margin-top: 0;
}

.ecac-sf-filters__label--taxonomy {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0.01em;
	color: var(--ecac-vitrine-ink, #1a1d1f);
}

.ecac-sf-filters__group--taxonomy .ecac-sf-filters__tax-scroll {
	gap: 0.375rem;
	padding-right: 0.25rem;
}

.ecac-sf-filters__group--taxonomy .ecac-sf-filters__row {
	padding: 0.25rem 0.5rem;
	gap: 0.5rem;
}

/* Thema’s (o.a. block themes) zetten vaak label { display:block }; forceer één lijn voor cat- én tag-rijen. */
.ecac-sf-catalog-layout .ecac-sf-filters__group--taxonomy label.ecac-sf-filters__row--tax {
	display: flex;
	flex-direction: row;
	align-items: center;
	align-self: stretch;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.35;
	color: var(--ecac-vitrine-ink, #1a1d1f);
	cursor: pointer;
}

.ecac-sf-catalog-layout .ecac-sf-filters__group--taxonomy label.ecac-sf-filters__row--tax:hover {
	background: color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 8%, transparent);
}

.ecac-sf-catalog-layout .ecac-sf-filters__group--taxonomy label.ecac-sf-filters__row--tax .ecac-sf-filters__cb {
	flex-shrink: 0;
	margin: 0;
}

.ecac-sf-catalog-layout .ecac-sf-filters__group--taxonomy label.ecac-sf-filters__row--tax .ecac-sf-filters__row-text {
	flex: 1 1 auto;
	min-width: 0;
}

.ecac-sf-filters__price-sliders {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	margin-top: 0.35rem;
}

.ecac-sf-filters__range {
	width: 100%;
	accent-color: var(--ecac-sf-brand, #6c5ce7);
}

.ecac-sf-filters__price-readout {
	margin: 0.35rem 0 0;
	font-size: 0.8125rem;
	color: var(--ecac-vitrine-muted, #9a9fa5);
}

.ecac-sf-filters__select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	margin: 0;
	padding: 0.55rem 2.4rem 0.55rem 0.8rem;
	box-sizing: border-box;
	font: inherit;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--ecac-vitrine-ink, #1a1d1f);
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%239a9fa5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.65rem center;
	background-size: 1rem 1rem;
	border: 1px solid var(--ecac-vitrine-line, #e2e4ed);
	border-radius: 0.75rem;
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
	cursor: pointer;
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease;
}

.ecac-sf-filters__select:hover {
	border-color: color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 38%, var(--ecac-vitrine-line, #e2e4ed));
}

.ecac-sf-filters__select:focus {
	outline: none;
	border-color: color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 48%, var(--ecac-vitrine-line, #e2e4ed));
	box-shadow:
		0 0 0 3px color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 20%, transparent),
		0 1px 2px rgb(0 0 0 / 0.06);
}

.ecac-sf-filters__select:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.ecac-sf-catalog-empty-msg {
	margin: 0 0 1rem;
	padding: 0.85rem 1rem;
	border-radius: 0.75rem;
	border: 1px solid var(--ecac-vitrine-line, #e2e4ed);
	background: var(--ecac-vitrine-sidebar, #edeef6);
	font-size: 0.875rem;
	color: var(--ecac-vitrine-muted, #9a9fa5);
}

.ecac-sf-filter-dock {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 1rem max(0.75rem, env(safe-area-inset-bottom));
	box-sizing: border-box;
}

@media (min-width: 1024px) {
	.ecac-sf-filter-dock {
		display: none;
	}
}

.ecac-sf-filter-dock__fab {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	min-width: 10rem;
	padding: 0.75rem 1.5rem;
	border: none;
	border-radius: 1rem;
	background: var(--ecac-sf-brand, #6c5ce7);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);
	transition:
		transform 0.12s ease,
		filter 0.12s ease;
}

.ecac-sf-filter-dock__fab:hover {
	filter: brightness(1.05);
}

.ecac-sf-filter-dock__fab:active {
	transform: scale(0.98);
}

.ecac-sf-filter-dock__backdrop {
	pointer-events: auto;
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.35);
	z-index: 41;
}

.ecac-sf-filter-dock__sheet {
	pointer-events: auto;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 42;
	max-height: min(88vh, 36rem);
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 1.25rem 1.25rem 0 0;
	box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.12);
	transform: translateY(100%);
	transition: transform 0.22s ease;
}

.ecac-sf-filter-dock.ecac-sf-filter-dock--open .ecac-sf-filter-dock__sheet {
	transform: translateY(0);
}

.ecac-sf-filter-dock__sheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.85rem 1rem 0.5rem;
	border-bottom: 1px solid var(--ecac-vitrine-line, #e2e4ed);
}

.ecac-sf-filter-dock__sheet-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ecac-vitrine-ink, #1a1d1f);
}

.ecac-sf-filter-dock__close {
	border: none;
	background: transparent;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: var(--ecac-vitrine-muted, #9a9fa5);
	padding: 0.25rem 0.35rem;
}

.ecac-sf-filter-dock__body {
	overflow-y: auto;
	padding: 0.75rem 1rem 1rem;
	-webkit-overflow-scrolling: touch;
}

.ecac-sf-filter-dock__body .ecac-sf-filters {
	border: none;
	box-shadow: none;
	padding: 0;
}

.ecac-sf-filter-dock__foot {
	padding: 0.75rem 1rem max(0.75rem, env(safe-area-inset-bottom));
	border-top: 1px solid var(--ecac-vitrine-line, #e2e4ed);
}

.ecac-sf-filter-dock__apply {
	width: 100%;
	border: none;
	border-radius: 0.75rem;
	padding: 0.9rem 1rem;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	background: var(--ecac-sf-brand, #6c5ce7);
	cursor: pointer;
}

.ecac-sf-filter-dock__apply:hover {
	background: var(--ecac-sf-brand-hover, #5b4dc7);
}

.ecac-native--vitrine .ecac-native-price {
	color: var(--ecac-sf-brand, #7c3aed);
}

/* Live zoek-shortcode: API /catalog/search */
.ecac-native--search-widget {
	position: relative;
	padding-bottom: 0.5rem;
}

.ecac-native-search {
	position: relative;
	width: 100%;
	max-width: none;
}

/* Afgeronde balk + loep rechts (header / shortcode) */
.ecac-native-search__field {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 2.75rem;
	padding: 0 0.25rem 0 1rem;
	box-sizing: border-box;
	border: 1px solid var(--ecac-vitrine-line, #e2e4ed);
	border-radius: 0.75rem;
	background: #fff;
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease;
}

.ecac-native-search__field:focus-within {
	outline: none;
	border-color: color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 45%, var(--ecac-vitrine-line, #e2e4ed));
	box-shadow:
		0 0 0 3px color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 14%, transparent),
		0 1px 2px rgb(0 0 0 / 0.06);
}

.ecac-native-search__input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	margin: 0;
	padding: 0.65rem 0.5rem 0.65rem 0;
	border: none;
	border-radius: 0;
	background: transparent;
	font-size: 0.9375rem;
	line-height: 1.35;
	color: var(--ecac-vitrine-ink, #1a1d1f);
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.ecac-native-search__input::placeholder {
	color: var(--ecac-vitrine-muted, #9a9fa5);
	opacity: 1;
}

.ecac-native-search__input:focus {
	outline: none;
	box-shadow: none;
}

.ecac-native-search__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-right: 0.15rem;
	color: var(--ecac-sf-brand, #6c5ce7);
	pointer-events: none;
}

.ecac-native-search__results {
	position: absolute;
	z-index: 60;
	left: 0;
	right: 0;
	top: 100%;
	margin-top: 0.35rem;
	max-height: min(70vh, 22rem);
	overflow-y: auto;
	border-radius: 0.75rem;
	border: 1px solid var(--ecac-vitrine-line, #e2e4ed);
	background: #fff;
	box-shadow:
		0 10px 40px -10px rgb(0 0 0 / 0.18),
		0 4px 12px -4px rgb(0 0 0 / 0.08);
}

.ecac-native-search__msg {
	margin: 0;
	padding: 0.85rem 1rem;
	font-size: 0.875rem;
	color: var(--ecac-vitrine-muted, #9a9fa5);
}

.ecac-native-search__list {
	list-style: none;
	margin: 0;
	padding: 0.35rem 0;
}

.ecac-native-search__hit {
	margin: 0;
	padding: 0;
}

.ecac-native-search__card {
	position: relative;
	border-bottom: 1px solid var(--ecac-vitrine-line, #e2e4ed);
}

.ecac-native-search__hit:last-child .ecac-native-search__card {
	border-bottom: none;
}

.ecac-native-search__link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.65rem 2.75rem 0.65rem 0.85rem;
	text-decoration: none;
	color: var(--ecac-vitrine-ink, #1a1d1f);
	transition: background 0.15s ease;
}

.ecac-native-search__link:hover,
.ecac-native-search__link:focus-visible {
	background: color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 6%, #fff);
	outline: none;
}

.ecac-native-search__media {
	flex-shrink: 0;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 0.5rem;
	overflow: hidden;
	background: var(--ecac-vitrine-sidebar, #edeef6);
}

.ecac-native-search__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}

.ecac-native-search__media--ph {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	font-weight: 700;
	color: var(--ecac-vitrine-muted, #9a9fa5);
}

.ecac-native-search__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.ecac-native-search__name {
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
}

.ecac-native-search__price {
	font-size: 0.8125rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ecac-sf-brand, #6c5ce7);
}

.ecac-native-search__card > .ecac-native-wish.ecac-native-wish--btn {
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
}

/* Categorie-overzicht: teller + kaarten met CTA (geen wishlist) */
.ecac-native-cats-grid__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin: 0 0 1.25rem;
}

.ecac-native-cats-grid__count {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ecac-vitrine-ink);
}

.ecac-native--vitrine .ecac-native-card--category .ecac-native-card__media {
	aspect-ratio: 1;
	max-height: none;
}

.ecac-native--vitrine .ecac-native-card--category .ecac-native-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.ecac-native--vitrine .ecac-native-card--category .ecac-native-card__short--category {
	margin-top: 0.25rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--ecac-vitrine-muted);
	-webkit-line-clamp: 3;
	line-clamp: 3;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ecac-native--vitrine .ecac-native-card--category .ecac-native-card__cta {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ecac-sf-brand, #6c5ce7);
}

.ecac-native--vitrine .ecac-native-card--category .ecac-native-card__link:hover .ecac-native-card__cta,
.ecac-native--vitrine .ecac-native-card--category .ecac-native-card__link:focus .ecac-native-card__cta {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ecac-native--vitrine .ecac-native-grid {
	display: grid;
	max-width: none;
	margin: 0;
	gap: 1.5rem;
	grid-template-columns: minmax(0, 1fr);
	list-style: none;
	padding: 0;
	width: 100%;
}

@media (min-width: 640px) {
	.ecac-native--vitrine .ecac-native-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.ecac-native--vitrine .ecac-native-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.ecac-native--vitrine .ecac-native-card {
	position: relative;
	height: 100%;
	border: 1px solid var(--ecac-vitrine-line);
	border-radius: 1rem;
	background: #fff;
	overflow: hidden;
	box-shadow:
		0 1px 3px 0 color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 6%, transparent),
		0 1px 2px -1px rgb(0 0 0 / 0.04);
	transition:
		box-shadow 0.2s ease,
		border-color 0.2s ease;
}

.ecac-native--vitrine .ecac-native-card:hover {
	border-color: color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 35%, var(--ecac-vitrine-line));
	box-shadow:
		0 4px 24px -4px color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 10%, transparent),
		0 2px 8px -2px rgb(0 0 0 / 0.06);
}

.ecac-native--vitrine .ecac-native-card:hover .ecac-native-card__title {
	color: var(--ecac-sf-brand, #6c5ce7);
}

.ecac-native--vitrine .ecac-native-card:hover .ecac-native-card__media img {
	transform: scale(1.03);
}

/* Link vangt geen klikken in “lege” flex-ruimte; alleen media + body blijven klikbaar.
   Zo kan het hartje (sibling) op elke kaart betrouwbaar de hit-test krijgen. */
.ecac-native--vitrine .ecac-native-card__link {
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
	pointer-events: none;
}

.ecac-native--vitrine .ecac-native-card__link .ecac-native-card__media,
.ecac-native--vitrine .ecac-native-card__link .ecac-native-card__body {
	pointer-events: auto;
}

.ecac-native--vitrine .ecac-native-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--ecac-vitrine-sidebar);
	overflow: hidden;
}

.ecac-native--vitrine .ecac-native-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	transition: transform 0.3s ease;
}

.ecac-native--vitrine .ecac-native-card__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ecac-native--vitrine .ecac-native-card__ph {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--ecac-vitrine-muted);
}

.ecac-native--vitrine .ecac-native-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.25rem;
	padding: 1rem;
}

.ecac-native--vitrine .ecac-native-card__title {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ecac-vitrine-ink);
	transition: color 0.15s ease;
}

.ecac-native--vitrine .ecac-native-card__short {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 0.75rem;
	line-height: 1.4;
	color: color-mix(in srgb, var(--ecac-vitrine-ink) 70%, transparent);
}

.ecac-native--vitrine .ecac-native-card__sku {
	font-size: 0.75rem;
	color: var(--ecac-vitrine-muted);
}

.ecac-native--vitrine .ecac-native-card__reviews {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
	padding-top: 0.125rem;
	font-size: 0.75rem;
	line-height: 1.3;
}

.ecac-native--vitrine .ecac-native-card__stars {
	color: #f59e0b;
	letter-spacing: 0.02em;
}

.ecac-native--vitrine .ecac-native-card__rating-num {
	font-variant-numeric: tabular-nums;
	color: var(--ecac-vitrine-muted);
}

.ecac-native--vitrine .ecac-native-card__price-row {
	margin-top: 0.25rem;
	padding-top: 0.25rem;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
	color: var(--ecac-sf-brand, #6c5ce7);
}

.ecac-native--vitrine .ecac-native-price-prefix {
	font-weight: 500;
	font-size: 0.875rem;
	margin-right: 0.2rem;
	color: color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 88%, var(--ecac-vitrine-ink));
}

.ecac-native--vitrine .ecac-native-price {
	font-weight: 700;
	color: inherit;
}

.ecac-native--vitrine .ecac-native-price-was {
	margin-right: 0.35rem;
	font-size: 0.92em;
	font-weight: 600;
	text-decoration: line-through;
	color: color-mix(in srgb, var(--ecac-vitrine-ink) 45%, transparent);
}

.ecac-native--vitrine .ecac-native-sale-badge {
	display: inline-block;
	margin-right: 0.35rem;
	padding: 0.12rem 0.4rem;
	border-radius: 4px;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: middle;
	background: #fee2e2;
	color: #991b1b;
}

.ecac-native--vitrine .ecac-native-card__oos {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.8125rem;
	line-height: 1.35;
	color: #92400e;
}

/* Boven de volledige kaart-link (die anders de klik vangt). */
.ecac-native--vitrine .ecac-native-card > .ecac-native-wish.ecac-native-wish--btn {
	z-index: 20;
}

.ecac-native-wish {
	position: absolute;
	right: 0.75rem;
	top: 0.75rem;
	z-index: 10;
	display: flex;
	width: 2.25rem;
	height: 2.25rem;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 1px solid var(--ecac-vitrine-line);
	background: rgb(255 255 255 / 0.95);
	color: color-mix(in srgb, var(--ecac-vitrine-ink) 65%, transparent);
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
	pointer-events: none;
}

.ecac-native-wish--btn {
	pointer-events: auto;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	text-align: center;
}

.ecac-native-wish--btn:focus-visible {
	outline: 2px solid var(--ecac-sf-brand, #6c5ce7);
	outline-offset: 2px;
}

/* Pad erft fill:none van parent-SVG; expliciet vullen zodat “aan” duidelijk zichtbaar is. */
.ecac-native-wish--on .ecac-native-wish__path {
	fill: var(--ecac-sf-brand, #6c5ce7);
	fill-opacity: 0.42;
	stroke: var(--ecac-sf-brand, #6c5ce7);
}

.ecac-native--vitrine .ecac-native-more {
	max-width: none;
	margin: 1.5rem 0 0;
	padding: 0;
	text-align: center;
	font-size: 0.9375rem;
}

.ecac-native--vitrine .ecac-native-more-link {
	font-weight: 600;
	color: var(--ecac-sf-brand, #6c5ce7);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ecac-native--vitrine .ecac-native-more-link:hover,
.ecac-native--vitrine .ecac-native-more-link:focus {
	color: var(--ecac-sf-brand-hover, #5b4dc7);
}

/* ---- Native cart / account (links) ---- */

/* Vitrine-achtige account-hub (ShopCustomerAccountLayout) */
.ecac-account {
	--ecac-account-page-bg: #f4f5f8;
	--ecac-account-line: var(--ecac-sf-line, #e2e4ed);
	--ecac-account-ink: #0f1216;
	--ecac-account-muted: #6b7280;
	font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	color: var(--ecac-account-ink);
	box-sizing: border-box;
}

.ecac-account *,
.ecac-account *::before,
.ecac-account *::after {
	box-sizing: border-box;
}

/* WP-accountpagina: zelfde inhoudsbreedte als header/checkout (geen 100vw-breakout). */
.ecac-account#ecac-wp-account {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	position: relative;
	left: 0;
	box-sizing: border-box;
	overflow-x: clip;
}

.ecac-account#ecac-wp-account .ecac-account__page {
	min-height: 50vh;
	padding: 0.5rem max(0.5rem, env(safe-area-inset-right)) 0.5rem max(0.5rem, env(safe-area-inset-left));
	max-width: var(--ecac-storefront-inner-max-width, var(--ecac-storefront-align-max));
	margin-inline: auto;
	background: transparent;
}

@media (min-width: 640px) {
	.ecac-account#ecac-wp-account .ecac-account__page {
		padding: 0.75rem max(0.75rem, env(safe-area-inset-right)) 0.75rem max(0.75rem, env(safe-area-inset-left));
	}
}

/* Gast: formulier duidelijk in het midden (horizontaal + resterende viewport verticaal) */
.ecac-account#ecac-wp-account.ecac-account--guest {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* Ruimte onder thema-header / paginatitel; blijft bruikbaar met adminbalk */
	min-height: min(calc(100dvh - 5.5rem), calc(100svh - 5.5rem));
	padding-block: clamp(1rem, 4vh, 2.5rem);
	box-sizing: border-box;
}

.ecac-account#ecac-wp-account.ecac-account--guest .ecac-account__page {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: var(--ecac-storefront-inner-max-width, var(--ecac-storefront-align-max));
	min-height: 0;
	margin-inline: auto;
	padding-block: 0;
}

.ecac-account__page {
	min-height: 50vh;
	padding: 0.5rem;
	background: var(--ecac-account-page-bg);
}

@media (min-width: 640px) {
	.ecac-account__page {
		padding: 0.75rem;
	}
}

.ecac-account__card {
	display: flex;
	flex-direction: column;
	min-height: calc(100dvh - 1rem);
	max-width: 72rem;
	margin: 0 auto;
	border: 1px solid color-mix(in srgb, var(--ecac-account-line) 80%, transparent);
	border-radius: 0.75rem;
	background: #fff;
	box-shadow:
		0 4px 24px -4px color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 8%, transparent),
		0 2px 8px -2px rgb(0 0 0 / 0.04);
}

@media (min-width: 640px) {
	.ecac-account__card {
		min-height: calc(100dvh - 1.5rem);
		border-radius: 0.85rem;
	}
}

.ecac-account__header {
	border-bottom: 1px solid color-mix(in srgb, var(--ecac-account-line) 70%, transparent);
	padding: 0.75rem 0.85rem 0.85rem;
}

@media (min-width: 640px) {
	.ecac-account__header {
		padding: 1rem 1.1rem 1rem;
	}
}

.ecac-account__header-main {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

@media (min-width: 640px) {
	.ecac-account__header-main {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-between;
		gap: 1rem 1.25rem;
	}
}

.ecac-account__user {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	min-width: 0;
}

.ecac-account__avatar {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	background: var(--ecac-account-ink);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
}

@media (min-width: 640px) {
	.ecac-account__avatar {
		width: 2.35rem;
		height: 2.35rem;
		font-size: 0.75rem;
	}
}

.ecac-account__greeting {
	min-width: 0;
	line-height: 1.25;
}

.ecac-account__eyebrow {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ecac-account-muted);
}

.ecac-account__name {
	margin: 0.1rem 0 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ecac-account-ink);
	text-transform: capitalize;
}

.ecac-account__email-hint {
	margin: 0.15rem 0 0;
	font-size: 0.6875rem;
	color: var(--ecac-account-muted);
	line-height: 1.45;
	max-width: 22rem;
}

@media (min-width: 640px) {
	.ecac-account__email-hint {
		font-size: 0.75rem;
	}
}

.ecac-account#ecac-wp-account .ecac-account__email-hint {
	max-width: min(36rem, 100%);
}

/* Alleen na inloggen: vitrine-accountlinks (bestellingen, profiel, …) + uitloggen */
.ecac-account__nav-account {
	display: none;
}

.ecac-account--authed .ecac-account__nav-account {
	display: contents;
}

/* Gast: geen header-nav (terug / winkelwagen / … zitten in nav-account tot na login) */
.ecac-account--guest .ecac-account__nav {
	display: none;
}

/* WP-account: geen grijze vlakken / kader — thema-achtergrond blijft zichtbaar */
.ecac-account#ecac-wp-account .ecac-account__card {
	width: 100%;
	background: transparent;
	border: none;
	box-shadow: none;
}

.ecac-account#ecac-wp-account .ecac-account__header {
	border-bottom: none;
}

.ecac-account#ecac-wp-account.ecac-account--guest .ecac-account__card {
	max-width: min(24rem, 100%);
	width: 100%;
	margin-inline: auto;
	min-height: 0;
	border-radius: 0;
}

.ecac-account#ecac-wp-account.ecac-account--authed .ecac-account__card {
	max-width: none;
	min-height: calc(100dvh - 1rem);
}

@media (min-width: 640px) {
	.ecac-account#ecac-wp-account.ecac-account--authed .ecac-account__card {
		min-height: calc(100dvh - 1.5rem);
	}
}

.ecac-account#ecac-wp-account.ecac-account--guest .ecac-account__header {
	border-bottom: none;
	padding: 0.35rem 1rem 0.25rem;
	text-align: center;
}

.ecac-account#ecac-wp-account.ecac-account--guest .ecac-account__header-main {
	align-items: center;
}

.ecac-account#ecac-wp-account.ecac-account--guest .ecac-account__user {
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
}

/* Geen avatar / “Hallo,” / gasttitel — alleen hint + formulier */
.ecac-account#ecac-wp-account.ecac-account--guest .ecac-account__avatar,
.ecac-account#ecac-wp-account.ecac-account--guest .ecac-account__eyebrow,
.ecac-account#ecac-wp-account.ecac-account--guest .ecac-account__name {
	display: none !important;
}

.ecac-account#ecac-wp-account.ecac-account--guest .ecac-account__email-hint {
	max-width: 19rem;
	margin-inline: auto;
	line-height: 1.5;
	font-size: 0.8125rem;
}

.ecac-account#ecac-wp-account.ecac-account--guest .ecac-account__body {
	padding: 1.15rem 1.4rem 1.85rem;
}

.ecac-account#ecac-wp-account.ecac-account--guest .ecac-account__kicker {
	text-align: center;
	margin-bottom: 0.4rem;
}

.ecac-account#ecac-wp-account.ecac-account--guest .ecac-account__app {
	margin-top: 0;
}

.ecac-account#ecac-wp-account.ecac-account--guest .ecac-account__fineprint {
	text-align: center;
	margin-inline: auto;
	max-width: 21rem;
	line-height: 1.55;
}

.ecac-account#ecac-wp-account.ecac-account--authed .ecac-account__user {
	flex-direction: row;
	align-items: center;
	text-align: left;
}

.ecac-account#ecac-wp-account.ecac-account--authed .ecac-account__header {
	text-align: left;
}

@media (min-width: 640px) {
	.ecac-account#ecac-wp-account.ecac-account--authed .ecac-account__header-main {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
	}
}

/* Tabs + formulier (WP-account) */
.ecac-account#ecac-wp-account .ecac-account__tabs {
	display: flex;
	gap: 0;
	margin: 0 0 1.2rem;
	padding: 0.2rem;
	border-radius: 12px;
	background: color-mix(in srgb, var(--ecac-account-line) 32%, #fff);
	border: 1px solid color-mix(in srgb, var(--ecac-account-line) 50%, transparent);
}

.ecac-account#ecac-wp-account.ecac-account--guest .ecac-account__tabs {
	margin-bottom: 1.35rem;
}

.ecac-account#ecac-wp-account .ecac-account__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	border: none;
	border-radius: 10px;
	padding: 0.55rem 0.65rem;
	background: transparent;
	cursor: pointer;
	font-family: inherit;
	transition:
		background 0.15s ease,
		color 0.15s ease,
		box-shadow 0.15s ease;
}

.ecac-account#ecac-wp-account .ecac-account__tab--active {
	background: #fff;
	color: var(--ecac-account-ink);
	box-shadow: 0 1px 4px rgb(0 0 0 / 0.07);
}

.ecac-account#ecac-wp-account .ecac-account__panel {
	max-width: none;
	gap: 1rem;
	margin-bottom: 0;
}

.ecac-account#ecac-wp-account .ecac-account__input {
	padding: 0.72rem 0.9rem;
	border-radius: 12px;
	border-color: color-mix(in srgb, var(--ecac-account-line) 85%, transparent);
	background: color-mix(in srgb, var(--ecac-account-page-bg) 55%, #fff);
	transition:
		border-color 0.15s ease,
		background 0.15s ease;
}

.ecac-account#ecac-wp-account .ecac-account__input:hover {
	border-color: color-mix(in srgb, var(--ecac-account-line) 65%, var(--ecac-sf-brand, #6c5ce7));
}

.ecac-account#ecac-wp-account .ecac-account__input:focus {
	background: #fff;
}

.ecac-account#ecac-wp-account .ecac-account__btn--primary {
	width: 100%;
	padding: 0.78rem 1.15rem;
	border-radius: 12px;
	font-size: 0.9375rem;
	box-shadow: 0 4px 16px color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 32%, transparent);
}

.ecac-account#ecac-wp-account .ecac-account__btn--primary:hover,
.ecac-account#ecac-wp-account .ecac-account__btn--primary:focus {
	box-shadow: 0 6px 22px color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 26%, transparent);
}

/* Na login: standaard header / avatar (gast-styling terugdraaien) */
.ecac-account#ecac-wp-account.ecac-account--authed .ecac-account__avatar {
	width: 2.25rem;
	height: 2.25rem;
	font-size: 0.7rem;
	background: var(--ecac-account-ink);
	box-shadow: none;
}

@media (min-width: 640px) {
	.ecac-account#ecac-wp-account.ecac-account--authed .ecac-account__avatar {
		width: 2.35rem;
		height: 2.35rem;
		font-size: 0.75rem;
	}
}

.ecac-account#ecac-wp-account.ecac-account--authed .ecac-account__name {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: normal;
}

.ecac-account#ecac-wp-account.ecac-account--authed .ecac-account__email-hint {
	margin-inline: 0;
	max-width: min(36rem, 100%);
}

.ecac-account#ecac-wp-account.ecac-account--authed .ecac-account__body {
	align-items: stretch;
	text-align: left;
}

.ecac-account#ecac-wp-account.ecac-account--authed .ecac-account__kicker {
	text-align: left;
}

.ecac-account#ecac-wp-account.ecac-account--authed .ecac-account__fineprint {
	text-align: left;
	max-width: 42rem;
	margin-inline: 0;
}

.ecac-account#ecac-wp-account.ecac-account--authed .ecac-account__btn--primary {
	width: auto;
	align-self: flex-start;
}

.ecac-account__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	padding-top: 0.5rem;
	border-top: 1px solid color-mix(in srgb, var(--ecac-account-line) 55%, transparent);
}

@media (min-width: 640px) {
	.ecac-account__nav {
		padding-top: 0;
		margin-top: 0;
		border-top: none;
		justify-content: flex-end;
		max-width: 100%;
	}
}

.ecac-account__navlink {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.45rem 0.65rem;
	border: none;
	border-radius: 0.75rem;
	background: transparent;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ecac-account-muted);
	text-decoration: none;
	cursor: pointer;
	transition:
		background 0.12s ease,
		color 0.12s ease;
}

.ecac-account__navlink:hover,
.ecac-account__navlink:focus {
	color: var(--ecac-account-ink);
	background: color-mix(in srgb, var(--ecac-sf-brand-soft, rgba(239, 238, 255, 0.85)) 45%, transparent);
	outline: none;
}

.ecac-account__navlink--active {
	background: var(--ecac-sf-brand, #6c5ce7);
	color: #fff;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 35%, transparent);
}

.ecac-account__navlink--active:hover,
.ecac-account__navlink--active:focus {
	background: var(--ecac-sf-brand-hover, #5b4dc7);
	color: #fff;
}

.ecac-account__navlink--btn {
	font-family: inherit;
}

.ecac-account__icon {
	flex-shrink: 0;
	opacity: 0.88;
}

.ecac-account__navlink--active .ecac-account__icon {
	opacity: 1;
}

/* WP-account: profiel / privacy / verlanglijst / vitrine-nav in ingestelde winkelkleuren (--ecac-sf-brand uit appearance API + JS) */
.ecac-account#ecac-wp-account .ecac-account__nav {
	border-top-color: color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 24%, var(--ecac-account-line));
}

.ecac-account#ecac-wp-account .ecac-account__navlink:not(.ecac-account__navlink--active) {
	color: color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 32%, var(--ecac-account-ink));
}

.ecac-account#ecac-wp-account .ecac-account__navlink:not(.ecac-account__navlink--active):hover,
.ecac-account#ecac-wp-account .ecac-account__navlink:not(.ecac-account__navlink--active):focus {
	color: var(--ecac-sf-brand, #6c5ce7);
	background: color-mix(in srgb, var(--ecac-sf-brand-soft, rgba(239, 238, 255, 0.85)) 58%, transparent);
}

.ecac-account#ecac-wp-account .ecac-account__kicker {
	color: color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 38%, var(--ecac-account-muted));
}

.ecac-account#ecac-wp-account .ecac-account__title {
	color: color-mix(in srgb, var(--ecac-account-ink) 88%, var(--ecac-sf-brand, #6c5ce7));
}

.ecac-account#ecac-wp-account .ecac-account__tablewrap {
	border-color: color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 22%, var(--ecac-account-line));
}

.ecac-account#ecac-wp-account .ecac-account__orders th {
	background: color-mix(in srgb, var(--ecac-sf-brand-soft, rgba(239, 238, 255, 0.85)) 50%, #fff);
	color: color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 28%, var(--ecac-account-muted));
}

.ecac-wp-account__subhead {
	margin: 1.35rem 0 0.65rem;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: color-mix(in srgb, var(--ecac-account-ink) 78%, var(--ecac-sf-brand, #6c5ce7));
}

.ecac-wp-account__panel {
	margin-bottom: 0.35rem;
}

.ecac-wp-account__wishlist {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.ecac-wp-account__wish-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 0.75rem;
	padding: 0.65rem 0.85rem;
	border: 1px solid color-mix(in srgb, var(--ecac-account-line) 80%, transparent);
	border-radius: 12px;
	background: color-mix(in srgb, var(--ecac-account-page-bg) 35%, #fff);
}

.ecac-wp-account__wish-link {
	font-weight: 600;
	color: var(--ecac-sf-brand, #6c5ce7);
	text-decoration: none;
}

.ecac-wp-account__wish-link:hover,
.ecac-wp-account__wish-link:focus {
	text-decoration: underline;
}

.ecac-wp-account__wish-meta {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.8125rem;
	color: var(--ecac-account-muted);
}

.ecac-wp-ship-list {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.ecac-wp-ship-item__inner {
	padding: 0.65rem 0.85rem;
	border: 1px solid color-mix(in srgb, var(--ecac-account-line) 80%, transparent);
	border-radius: 12px;
	background: color-mix(in srgb, var(--ecac-account-page-bg) 35%, #fff);
}

.ecac-wp-ship-item__title {
	margin: 0 0 0.25rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ecac-account-ink);
}

.ecac-wp-ship-item__addr {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--ecac-account-muted);
	white-space: pre-line;
}

.ecac-wp-ship-item__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.55rem;
}

.ecac-wp-ship-form-title {
	margin: 0 0 0.75rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ecac-account-ink);
}

.ecac-wp-ship-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin-top: 0.25rem;
}

.ecac-wp-account__fine {
	margin: 0 0 0.85rem;
	font-size: 0.875rem;
	color: var(--ecac-account-muted);
	line-height: 1.55;
	max-width: 38rem;
}

.ecac-account__body {
	padding: 1.1rem 0.85rem 1.25rem;
	flex: 1;
}

@media (min-width: 640px) {
	.ecac-account__body {
		padding: 1.25rem 1.25rem 1.5rem;
	}
}

.ecac-account__kicker {
	margin: 0 0 0.25rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ecac-account-muted);
}

.ecac-account__title {
	margin: 0 0 0.75rem;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--ecac-account-ink);
}

@media (min-width: 640px) {
	.ecac-account__title {
		font-size: 1.75rem;
		margin-bottom: 1rem;
	}
}

.ecac-account__lede {
	margin: 0 0 1.25rem;
	max-width: 40rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: color-mix(in srgb, var(--ecac-account-ink) 72%, var(--ecac-account-muted));
}

.ecac-account__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem 0.75rem;
	margin-bottom: 1.25rem;
}

.ecac-account__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.65rem 1.1rem;
	border-radius: 0.75rem;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid var(--ecac-account-line);
	background: #fff;
	color: var(--ecac-account-ink);
	transition:
		background 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}

.ecac-account__btn:hover,
.ecac-account__btn:focus {
	border-color: color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 35%, var(--ecac-account-line));
	color: var(--ecac-sf-brand, #6c5ce7);
	background: color-mix(in srgb, var(--ecac-sf-brand-soft, rgba(239, 238, 255, 0.85)) 40%, #fff);
	outline: none;
}

.ecac-account__btn--primary {
	background: var(--ecac-sf-brand, #6c5ce7);
	border-color: color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 88%, #000);
	color: #fff;
}

.ecac-account__btn--primary:hover,
.ecac-account__btn--primary:focus {
	background: var(--ecac-sf-brand-hover, #5b4dc7);
	color: #fff;
	border-color: color-mix(in srgb, var(--ecac-sf-brand-hover, #5b4dc7) 90%, #000);
}

.ecac-account__btn--ghost {
	background: transparent;
	border-color: color-mix(in srgb, var(--ecac-account-line) 90%, transparent);
	color: var(--ecac-account-muted);
}

.ecac-account__btn--ghost:hover,
.ecac-account__btn--ghost:focus {
	color: var(--ecac-account-ink);
	border-color: var(--ecac-account-line);
	background: color-mix(in srgb, var(--ecac-account-line) 25%, transparent);
}

.ecac-account__fineprint {
	margin: 1rem 0 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--ecac-account-muted);
	max-width: 42rem;
}

.ecac-account__app {
	margin-top: 0.25rem;
}

.ecac-account__loading {
	margin: 0;
	color: var(--ecac-account-muted);
	font-size: 0.9375rem;
}

.ecac-account__tabs {
	display: flex;
	gap: 0.35rem;
	margin: 0 0 1rem;
	flex-wrap: wrap;
}

.ecac-account__tab {
	appearance: none;
	border: 1px solid var(--ecac-account-line);
	background: #fff;
	color: var(--ecac-account-muted);
	padding: 0.45rem 0.9rem;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}

.ecac-account__tab:hover,
.ecac-account__tab:focus {
	color: var(--ecac-account-ink);
	border-color: color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 35%, var(--ecac-account-line));
}

.ecac-account__tab--active {
	background: color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 12%, #fff);
	border-color: color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 45%, var(--ecac-account-line));
	color: var(--ecac-account-ink);
}

.ecac-account__panel {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	max-width: min(32rem, 100%);
	margin-bottom: 1rem;
}

.ecac-account__panel[hidden] {
	display: none !important;
}

.ecac-account__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ecac-account-ink);
}

.ecac-account__input {
	border: 1px solid var(--ecac-account-line);
	border-radius: 10px;
	padding: 0.55rem 0.65rem;
	font-size: 0.9375rem;
	color: var(--ecac-account-ink);
	background: #fff;
}

.ecac-account__input:focus {
	outline: 2px solid color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 55%, transparent);
	outline-offset: 1px;
	border-color: color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 40%, var(--ecac-account-line));
}

.ecac-account__msg {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
}

.ecac-account__msg--err {
	color: #b42318;
}

.ecac-account__tablewrap {
	overflow-x: auto;
	margin-top: 0.5rem;
	border: 1px solid color-mix(in srgb, var(--ecac-account-line) 80%, transparent);
	border-radius: 12px;
	background: #fff;
}

.ecac-account__orders {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.ecac-account__orders th,
.ecac-account__orders td {
	padding: 0.65rem 0.85rem;
	text-align: left;
	border-bottom: 1px solid color-mix(in srgb, var(--ecac-account-line) 70%, transparent);
}

.ecac-account__orders th {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ecac-account-muted);
	background: color-mix(in srgb, var(--ecac-account-page-bg) 55%, #fff);
}

.ecac-account__orders tbody tr:last-child td {
	border-bottom: none;
}

.ecac-account__td-num {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.ecac-account__td-empty {
	color: var(--ecac-account-muted);
	text-align: center;
	padding: 1.25rem 0.85rem !important;
}

.ecac-account__body .ecac-account__title {
	margin-top: 0;
}

.ecac-account__td-actions {
	white-space: nowrap;
	width: 1%;
	vertical-align: middle;
}

.ecac-account__orders .ecac-account__btn--compact {
	padding: 0.35rem 0.65rem;
	font-size: 0.8125rem;
}

/* Mijn account — bestellingenlijst met product + configuratie */
.ecac-account__tablewrap--orders-rich {
	min-width: 0;
}

.ecac-account__orders--rich .ecac-account__td-product {
	min-width: 12rem;
	max-width: 28rem;
}

.ecac-account__order-row {
	cursor: pointer;
	transition: background 0.12s ease;
}

.ecac-account__order-row:hover,
.ecac-account__order-row:focus-visible {
	background: color-mix(in srgb, var(--ecac-sf-brand-soft, rgba(239, 238, 255, 0.85)) 35%, transparent);
	outline: none;
}

.ecac-account__order-prod {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
}

.ecac-account__order-thumb {
	flex: 0 0 3rem;
	width: 3rem;
	height: 3rem;
	border-radius: 0.45rem;
	overflow: hidden;
	background: color-mix(in srgb, var(--ecac-account-line) 50%, #fff);
	border: 1px solid color-mix(in srgb, var(--ecac-account-line) 70%, transparent);
}

.ecac-account__order-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ecac-account__order-thumb--empty {
	background: repeating-linear-gradient(
		-45deg,
		color-mix(in srgb, var(--ecac-account-line) 40%, transparent),
		color-mix(in srgb, var(--ecac-account-line) 40%, transparent) 4px,
		transparent 4px,
		transparent 8px
	);
}

.ecac-account__order-prod-body {
	min-width: 0;
	flex: 1;
}

.ecac-account__order-name {
	margin: 0 0 0.2rem;
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 1.35;
	color: var(--ecac-account-ink);
}

.ecac-account__order-cfg {
	margin: 0 0 0.2rem;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--ecac-account-muted);
	word-break: break-word;
}

.ecac-account__order-more {
	margin: 0;
	font-size: 0.6875rem;
	color: var(--ecac-account-muted);
}

.ecac-account__col-date {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	align-items: flex-start;
}

.ecac-account__col-date-main {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ecac-account__col-date-sub {
	font-size: 0.75rem;
	color: var(--ecac-account-muted);
	font-variant-numeric: tabular-nums;
}

.ecac-account__col-date-nr {
	font-size: 0.6875rem;
	color: var(--ecac-account-muted);
	font-variant-numeric: tabular-nums;
}

.ecac-account__td-inv {
	white-space: nowrap;
}

.ecac-account__inv-link {
	font-weight: 600;
	color: var(--ecac-sf-brand, #6c5ce7);
	text-decoration: none;
}

.ecac-account__inv-link:hover,
.ecac-account__inv-link:focus {
	text-decoration: underline;
}

.ecac-account__td-muted {
	color: var(--ecac-account-muted);
}

.ecac-account__cell-st {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.5rem;
	justify-content: flex-end;
}

.ecac-account__orders--rich .ecac-account__td-st {
	vertical-align: middle;
}

/* WP Mijn account — bestelling detail (shop-customer order DTO) */
.ecac-order-detail {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.ecac-order-detail .ecac-account__panel {
	max-width: min(40rem, 100%);
	border: 1px solid color-mix(in srgb, var(--ecac-account-line) 80%, transparent);
	border-radius: 0.85rem;
	background: #fff;
	padding: 1rem 1.1rem;
	margin-bottom: 0;
	box-shadow: 0 1px 0 color-mix(in srgb, var(--ecac-account-line) 35%, transparent);
}

.ecac-account#ecac-wp-account .ecac-order-detail .ecac-account__panel {
	max-width: min(42rem, 100%);
}

.ecac-order-detail__section--products .ecac-order-detail__lines {
	margin-top: 0.35rem;
}

.ecac-order-detail__backwrap {
	margin: 0;
}

.ecac-order-detail__backwrap--bottom {
	margin-top: 0.25rem;
}

.ecac-order-detail__title-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
}

.ecac-order-detail__title-row .ecac-account__title {
	margin: 0;
}

.ecac-account__obadge {
	display: inline-flex;
	align-items: center;
	border-radius: 0.5rem;
	padding: 0.35rem 0.75rem;
	font-size: 0.8125rem;
	font-weight: 600;
}

.ecac-account__obadge--paid {
	background: color-mix(in srgb, #10b981 18%, #fff);
	color: #065f46;
}

.ecac-account__obadge--pending {
	background: color-mix(in srgb, #0ea5e9 18%, #fff);
	color: #0c4a6e;
}

.ecac-account__obadge--failed {
	background: color-mix(in srgb, #ef4444 18%, #fff);
	color: #991b1b;
}

.ecac-account__obadge--cancelled {
	background: color-mix(in srgb, #f59e0b 22%, #fff);
	color: #422006;
}

.ecac-account__obadge--processing {
	background: color-mix(in srgb, #8b5cf6 18%, #fff);
	color: #4c1d95;
}

.ecac-account__obadge--shipped {
	background: color-mix(in srgb, #14b8a6 18%, #fff);
	color: #134e4a;
}

.ecac-account__obadge--refunded,
.ecac-account__obadge--default {
	background: color-mix(in srgb, var(--ecac-account-line) 45%, #fff);
	color: var(--ecac-account-ink);
}

/* Compact status in bestellingen-tabel */
.ecac-account__obadge--inline {
	padding: 0.2rem 0.55rem;
	font-size: 0.75rem;
	white-space: nowrap;
	vertical-align: middle;
}

.ecac-account__td-status {
	vertical-align: middle;
}

.ecac-order-detail__section-title {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ecac-account-muted);
}

.ecac-order-detail__notice {
	border-radius: 0.65rem;
	padding: 0.85rem 1rem;
	border: 1px solid color-mix(in srgb, var(--ecac-account-line) 70%, transparent);
}

.ecac-order-detail__notice-p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--ecac-account-ink);
}

.ecac-order-detail__notice--info {
	background: color-mix(in srgb, #0ea5e9 12%, #fff);
	border-color: color-mix(in srgb, #0ea5e9 35%, var(--ecac-account-line));
}

.ecac-order-detail__notice--muted {
	background: color-mix(in srgb, var(--ecac-account-line) 18%, #fff);
	border-color: color-mix(in srgb, var(--ecac-account-line) 55%, transparent);
}

.ecac-order-detail__notice--muted .ecac-order-detail__notice-p {
	color: color-mix(in srgb, var(--ecac-account-ink) 88%, var(--ecac-account-muted));
}

.ecac-order-detail__section--contact {
	background: color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 8%, #fff);
	border-color: color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 22%, var(--ecac-account-line));
}

.ecac-order-detail__contact {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--ecac-account-ink);
}

.ecac-order-detail__contact a {
	font-weight: 600;
	color: var(--ecac-sf-brand, #6c5ce7);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ecac-order-detail__kvlist {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ecac-order-detail__kv {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.35rem 1rem;
	font-size: 0.875rem;
	line-height: 1.45;
}

.ecac-order-detail__kv--total {
	margin-top: 0.35rem;
	padding-top: 0.65rem;
	border-top: 1px solid color-mix(in srgb, var(--ecac-account-line) 75%, transparent);
	font-size: 1rem;
	font-weight: 700;
}

.ecac-order-detail__k {
	color: var(--ecac-account-muted);
}

.ecac-order-detail__v {
	font-weight: 500;
	text-align: right;
	max-width: 100%;
}

.ecac-order-detail__v--total {
	font-variant-numeric: tabular-nums;
}

.ecac-order-detail__mono {
	font-family: ui-monospace, monospace;
	font-size: 0.875rem;
	font-weight: 600;
	word-break: break-all;
}

.ecac-order-detail__mono--small {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--ecac-account-muted);
}

.ecac-order-detail__fine {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--ecac-account-muted);
}

.ecac-order-detail__inv-actions {
	margin: 0.75rem 0 0;
}

.ecac-order-detail__strong {
	font-weight: 600;
	color: var(--ecac-account-ink);
}

.ecac-order-detail__addrgrid {
	display: grid;
	gap: 1rem;
}

@media (min-width: 768px) {
	.ecac-order-detail__addrgrid {
		grid-template-columns: 1fr 1fr;
	}
}

.ecac-order-detail__addr p {
	margin: 0 0 0.35rem;
	font-size: 0.875rem;
	line-height: 1.5;
}

.ecac-order-detail__addr p:last-child {
	margin-bottom: 0;
}

.ecac-order-detail__dash {
	margin: 0;
	color: var(--ecac-account-muted);
}

.ecac-order-detail__samebill {
	margin: 0;
	font-size: 0.875rem;
	padding: 0.5rem 0.65rem;
	border-radius: 0.5rem;
	background: color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 7%, var(--ecac-account-page-bg));
}

.ecac-order-detail__delivery {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
}

.ecac-order-detail__lines {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.ecac-order-detail__line {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
	margin: 0;
	padding: 0.85rem;
	border: 1px solid color-mix(in srgb, var(--ecac-account-line) 80%, transparent);
	border-radius: 0.75rem;
	background: #fff;
}

.ecac-order-detail__thumb {
	flex-shrink: 0;
	width: 4.25rem;
	height: 4.25rem;
	border-radius: 0.5rem;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--ecac-account-line) 70%, transparent);
	background: color-mix(in srgb, var(--ecac-account-page-bg) 50%, #fff);
}

.ecac-order-detail__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}

.ecac-order-detail__thumb--empty {
	background: repeating-linear-gradient(
		-45deg,
		color-mix(in srgb, var(--ecac-account-line) 35%, transparent),
		color-mix(in srgb, var(--ecac-account-line) 35%, transparent) 4px,
		transparent 4px,
		transparent 8px
	);
}

.ecac-order-detail__line-body {
	min-width: 0;
	flex: 1;
}

.ecac-order-detail__line-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
}

.ecac-order-detail__line-var {
	margin: 0.25rem 0 0;
	font-size: 0.8125rem;
	color: var(--ecac-account-muted);
	white-space: pre-wrap;
}

.ecac-order-detail__line-dims {
	margin: 0.35rem 0 0;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--ecac-account-ink);
	white-space: pre-wrap;
}

.ecac-order-detail__line-meta {
	margin: 0.35rem 0 0;
	font-size: 0.8125rem;
	color: var(--ecac-account-muted);
}

.ecac-order-detail__line-total {
	margin: 0.35rem 0 0;
	font-size: 0.8125rem;
}

.ecac-order-detail__discount {
	font-weight: 700;
	color: var(--ecac-sf-brand, #6c5ce7);
}

.ecac-native--flow .ecac-native__heading {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
	color: #0f172a;
}

.ecac-native--flow .ecac-native__lede {
	margin: 0 0 1.25rem;
	max-width: 42rem;
	line-height: 1.55;
	color: #475569;
	font-size: 0.9375rem;
}

.ecac-native-nav {
	margin: 0;
}

.ecac-native-actions {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}

.ecac-native-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.55rem 1.1rem;
	border-radius: 10px;
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none;
	border: 1px solid #e2e8f0;
	background: #fff;
	color: #334155;
	transition:
		background 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}

.ecac-native-btn:hover,
.ecac-native-btn:focus {
	border-color: #c4b5fd;
	color: #5b21b6;
	background: #faf5ff;
}

.ecac-native-btn--primary {
	background: #7c3aed;
	color: #fff;
	border-color: #6d28d9;
}

.ecac-native-btn--primary:hover,
.ecac-native-btn--primary:focus {
	background: #6d28d9;
	color: #fff;
}

.ecac-native-btn--ghost {
	background: transparent;
	border-color: #ddd6fe;
	color: #6d28d9;
}

/* ---- Optioneel: iframe (mode="iframe") ---- */

.ecac-vitrine-embed {
	margin: 1.5rem 0;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	overflow: hidden;
	background: #f8fafc;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.ecac-vitrine-iframe {
	display: block;
	width: 100%;
	min-height: 360px;
	border: 0;
	background: #fff;
}

.ecac-vitrine-fallback {
	margin: 0;
	padding: 0.65rem 1rem;
	background: #f1f5f9;
	border-top: 1px solid #e2e8f0;
	font-size: 0.8125rem;
	line-height: 1.45;
}

.ecac-vitrine-fallback a {
	color: #64748b;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ecac-vitrine-link-only {
	margin: 1rem 0;
	font-size: 1rem;
}

.ecac-vitrine-link-only .ecac-vitrine-link {
	color: #7c3aed;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---- Vitrine-aligned storefront (ShopProductView layout) ---- */
.ecac-sf-page {
	--ecac-sf-brand: #6c5ce7;
	--ecac-sf-brand-hover: #5b4dc7;
	--ecac-sf-brand-soft: rgba(239, 238, 255, 0.85);
	--ecac-sf-page-bg: #f4f5f9;
	--ecac-sf-ink: #1a1d1f;
	--ecac-sf-muted: #9a9fa5;
	--ecac-sf-line: #e2e4ed;
	--ecac-sf-sidebar: #edeef6;
	font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	color: var(--ecac-sf-ink);
	background: var(--ecac-sf-page-bg);
	min-height: 60vh;
}

/* PDP: max-breedte vitrine; kaart en achtergrond transparant zodat het WP-thema door kan schijnen */
main.ecac-sf--product.ecac-sf--pdp-vitrine.ecac-sf-page {
	background: transparent !important;
	min-height: 100vh;
}

main.ecac-sf--category.ecac-sf--pdp-vitrine.ecac-sf-page {
	background: transparent !important;
	min-height: 100vh;
}

.ecac-sf-pdp-page {
	max-width: var(--ecac-storefront-inner-max-width, var(--ecac-storefront-align-max));
	margin: 0 auto;
	padding: 2.5rem 1rem 3rem;
	width: 100%;
	box-sizing: border-box;
}

/*
 * Vitrine-URL’s (/product/, /categorie/, /cart, /checkout, …): zelfde horizontale “site width” als Oxygen-header
 * (header-builder-4 ≈ 80px) + ruimte onder sticky header.
 * Override per site: --ecac-storefront-vitrine-padding-top, --ecac-storefront-vitrine-padding-inline op body.ecac-is-vitrine-url.
 */
body.ecac-is-vitrine-url {
	--ecac-storefront-vitrine-padding-top: 9rem;
	--ecac-storefront-vitrine-padding-inline: 80px;
}

body.ecac-is-vitrine-url main.ecac-sf.ecac-sf-page {
	max-width: none;
	width: 100%;
	box-sizing: border-box;
}

body.ecac-is-vitrine-url .ecac-sf-pdp-page,
body.ecac-is-vitrine-url .ecac-co-page-shell,
body.ecac-is-vitrine-url .ecac-sf-page__inner.ecac-sf-cat-page__inner,
body.ecac-is-vitrine-url .ecac-ot-wrap {
	max-width: none;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-top: var(--ecac-storefront-vitrine-padding-top, 9rem);
	padding-bottom: 3rem;
	padding-left: max(var(--ecac-storefront-vitrine-padding-inline, 80px), env(safe-area-inset-left, 0px));
	padding-right: max(var(--ecac-storefront-vitrine-padding-inline, 80px), env(safe-area-inset-right, 0px));
	box-sizing: border-box;
}

body.ecac-is-vitrine-url .ecac-co-page-shell {
	padding-bottom: 2.5rem;
}

body.ecac-is-vitrine-url .ecac-co-site-header__inner {
	max-width: none;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: max(var(--ecac-storefront-vitrine-padding-inline, 80px), env(safe-area-inset-left, 0px));
	padding-right: max(var(--ecac-storefront-vitrine-padding-inline, 80px), env(safe-area-inset-right, 0px));
	box-sizing: border-box;
}

body.ecac-is-vitrine-url .ecac-sf-pdp-page__inner.ecac-sf-page__inner,
body.ecac-is-vitrine-url .ecac-co-page-inner,
body.ecac-is-vitrine-url .ecac-ot-inner {
	max-width: 100%;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}

body.ecac-is-vitrine-url .ecac-co-page-inner {
	padding-top: 0;
}

@media (max-width: 1119px) {
	body.ecac-is-vitrine-url {
		--ecac-storefront-vitrine-padding-inline: 20px;
	}
}

@media (max-width: 767px) {
	body.ecac-is-vitrine-url {
		--ecac-storefront-vitrine-padding-top: 5.5rem;
		--ecac-storefront-vitrine-padding-inline: 1rem;
	}
}

@media (min-width: 640px) {
	.ecac-sf-pdp-page {
		padding-left: 0;
		padding-right: 0;
	}

	body.ecac-is-vitrine-url .ecac-sf-pdp-page,
	body.ecac-is-vitrine-url .ecac-co-page-shell,
	body.ecac-is-vitrine-url .ecac-sf-page__inner.ecac-sf-cat-page__inner,
	body.ecac-is-vitrine-url .ecac-ot-wrap,
	body.ecac-is-vitrine-url .ecac-co-site-header__inner {
		padding-left: max(var(--ecac-storefront-vitrine-padding-inline, 80px), env(safe-area-inset-left, 0px));
		padding-right: max(var(--ecac-storefront-vitrine-padding-inline, 80px), env(safe-area-inset-right, 0px));
	}
}

/*
 * Native shortcode op Oxygen/Breakdance-pagina (overlay-header, geen ecac-is-vitrine-url op body).
 * Zelfde horizontale kantlijnen + ruimte onder sticky header als rewrite-vitrine-URL’s.
 */
.ecac-sf-overlay-header-chrome {
	--ecac-storefront-vitrine-padding-top: 9rem;
	--ecac-storefront-vitrine-padding-inline: 80px;
	box-sizing: border-box;
}

.ecac-sf-catalog-layout.ecac-sf-overlay-header-chrome {
	max-width: none;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-top: var(--ecac-storefront-vitrine-padding-top, 9rem);
	padding-left: max(var(--ecac-storefront-vitrine-padding-inline, 80px), env(safe-area-inset-left, 0px));
	padding-right: max(var(--ecac-storefront-vitrine-padding-inline, 80px), env(safe-area-inset-right, 0px));
}

.ecac-sf-catalog-layout.ecac-sf-overlay-header-chrome .ecac-sf-catalog-sidebar {
	top: calc(var(--ecac-storefront-vitrine-padding-top, 9rem) + 0.5rem);
}

.ecac-sf-catalog-layout.ecac-sf-overlay-header-chrome .ecac-sf-catalog-main .ecac-native--vitrine.ecac-native--shop {
	margin-top: 0;
	padding-top: 0;
}

section.ecac-native.ecac-sf-overlay-header-chrome,
.ecac-sf-inline.ecac-sf-overlay-header-chrome,
.ecac-account.ecac-sf-overlay-header-chrome {
	max-width: none;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	padding-top: var(--ecac-storefront-vitrine-padding-top, 9rem);
	padding-bottom: 3rem;
	padding-left: max(var(--ecac-storefront-vitrine-padding-inline, 80px), env(safe-area-inset-left, 0px));
	padding-right: max(var(--ecac-storefront-vitrine-padding-inline, 80px), env(safe-area-inset-right, 0px));
	box-sizing: border-box;
}

.ecac-sf-inline.ecac-sf-overlay-header-chrome .ecac-sf-panel {
	margin: 0;
}

@media (max-width: 1119px) {
	.ecac-sf-overlay-header-chrome {
		--ecac-storefront-vitrine-padding-inline: 20px;
	}
}

@media (max-width: 767px) {
	.ecac-sf-overlay-header-chrome {
		--ecac-storefront-vitrine-padding-top: 5.5rem;
		--ecac-storefront-vitrine-padding-inline: 1rem;
	}
}

body.ecac-has-native-vitrine-shortcode .entry-content,
body.ecac-has-native-vitrine-shortcode article.type-page .entry-content,
body.ecac-has-native-vitrine-shortcode .ct-inner-content,
body.ecac-has-native-vitrine-shortcode .oxy-inner-content,
body.ecac-has-native-vitrine-shortcode .breakdance .bde-section__container {
	max-width: none;
	width: 100%;
	box-sizing: border-box;
}

body.ecac-is-product-url main.ecac-sf.ecac-sf--product.ecac-sf-page {
	max-width: none;
	width: 100%;
	box-sizing: border-box;
}

/* Veel thema’s/page builders beperken de inhoudskolom; product-HTML staat daar vaak in */
body.ecac-is-product-url .entry-content,
body.ecac-is-product-url article.type-page .entry-content {
	max-width: none;
	width: 100%;
}

body.ecac-is-product-url main.ecac-sf .ct-inner-content,
body.ecac-is-product-url main.ecac-sf .oxy-inner-content,
body.ecac-is-product-url .entry-content .ct-inner-content,
body.ecac-is-product-url .entry-content .oxy-inner-content {
	max-width: none;
	width: 100%;
}

/*
 * Oxygen: PDP staat vaak in een smalle .ct-section / .ct-text-block; header gebruikt ~1500px.
 * Alleen binnen Leorivo-product (main.ecac-sf / .entry-content) — niet op header/footer-chrome.
 */
body.ecac-is-product-url main.ecac-sf .ct-section,
body.ecac-is-product-url .entry-content .ct-section {
	max-width: none !important;
	width: 100% !important;
	box-sizing: border-box;
}

body.ecac-is-product-url main.ecac-sf .ct-section-inner-wrap,
body.ecac-is-product-url .entry-content .ct-section-inner-wrap {
	max-width: var(--ecac-storefront-inner-max-width, var(--ecac-storefront-align-max)) !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box;
}

body.ecac-is-product-url main.ecac-sf .ct-section-inner,
body.ecac-is-product-url .entry-content .ct-section-inner {
	max-width: none !important;
	width: 100% !important;
	box-sizing: border-box;
}

body.ecac-is-product-url main.ecac-sf .ct-new-columns,
body.ecac-is-product-url .entry-content .ct-new-columns {
	max-width: none !important;
	width: 100% !important;
	box-sizing: border-box;
}

body.ecac-is-product-url main.ecac-sf .ct-div-block,
body.ecac-is-product-url .entry-content .ct-div-block,
body.ecac-is-product-url main.ecac-sf .ct-text-block,
body.ecac-is-product-url .entry-content .ct-text-block {
	max-width: none !important;
	width: 100% !important;
	box-sizing: border-box;
}

body.ecac-is-product-url main.ecac-sf .ct-text-block .ct-span,
body.ecac-is-product-url .entry-content .ct-text-block .ct-span {
	display: block;
	max-width: none !important;
	width: 100% !important;
	box-sizing: border-box;
}

/* /categorie/… — vul de thema-inhoudskolom (geen max-width: none op .entry-content: dat breekt uit t.o.v. header/rand). */
body.ecac-is-category-url main.ecac-sf.ecac-sf--category.ecac-sf-page,
body.ecac-is-tag-url main.ecac-sf.ecac-sf--category.ecac-sf-page {
	max-width: none;
	width: 100%;
	box-sizing: border-box;
}

/* Zelfde kolombreedte als vitrine/PDP: niet expliciet none — anders vult deze div de hele .entry-content/thema-kolom en oogt het “full width” t.o.v. header. */
body.ecac-is-vitrine-url .ecac-sf-page__inner.ecac-sf-cat-page__inner {
	width: 100%;
	box-sizing: border-box;
}

/* /cart en /checkout (rewrite): volle breedte in thema-inner */
body.ecac-is-cart-url main.ecac-sf--checkout-flow.ecac-sf-page,
body.ecac-is-checkout-url main.ecac-sf--checkout-flow.ecac-sf-page {
	max-width: none;
	width: 100%;
	box-sizing: border-box;
}

body.ecac-is-cart-url .entry-content,
body.ecac-is-checkout-url .entry-content,
body.ecac-is-cart-url article.type-page .entry-content,
body.ecac-is-checkout-url article.type-page .entry-content {
	max-width: none;
	width: 100%;
}

body.ecac-is-cart-url .ct-inner-content,
body.ecac-is-checkout-url .ct-inner-content,
body.ecac-is-cart-url .oxy-inner-content,
body.ecac-is-checkout-url .oxy-inner-content {
	max-width: none;
	width: 100%;
}

body.ecac-is-cart-url .ecac-co-site-header__inner,
body.ecac-is-checkout-url .ecac-co-site-header__inner {
	max-width: var(--ecac-storefront-inner-max-width, var(--ecac-storefront-align-max));
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

/* /bestelling/{uuid}/ in thema-shell: zelfde volle breedte in inner als cart/checkout */
body.ecac-is-order-thanks-url main.ecac-sf--order-thanks.ecac-sf-page {
	max-width: none;
	width: 100%;
	box-sizing: border-box;
}

body.ecac-is-order-thanks-url .entry-content,
body.ecac-is-order-thanks-url article.type-page .entry-content {
	max-width: none;
	width: 100%;
}

body.ecac-is-order-thanks-url .ct-inner-content,
body.ecac-is-order-thanks-url .oxy-inner-content {
	max-width: none;
	width: 100%;
}

/*
 * Oxygen: de pagina-inhoud staat vaak in .ct-section met vaste max-width (~450px);
 * zonder override blijft de bedankpagina een smalle kolom.
 */
body.ecac-is-order-thanks-url .entry-content .ct-section,
body.ecac-is-order-thanks-url article.type-page .ct-section,
body.ecac-is-order-thanks-url .ct-inner-content .ct-section,
body.ecac-is-order-thanks-url .oxy-inner-content .ct-section {
	max-width: none !important;
	width: 100% !important;
	box-sizing: border-box;
}

body.ecac-is-order-thanks-url .entry-content .ct-section-inner-wrap,
body.ecac-is-order-thanks-url article.type-page .ct-section-inner-wrap,
body.ecac-is-order-thanks-url .ct-inner-content .ct-section-inner-wrap,
body.ecac-is-order-thanks-url .oxy-inner-content .ct-section-inner-wrap {
	max-width: none !important;
	width: 100% !important;
	box-sizing: border-box;
}

body.ecac-is-order-thanks-url .entry-content .ct-section-inner,
body.ecac-is-order-thanks-url article.type-page .ct-section-inner {
	max-width: none !important;
	width: 100% !important;
	box-sizing: border-box;
}

body.ecac-is-order-thanks-url .entry-content .ct-new-columns,
body.ecac-is-order-thanks-url article.type-page .ct-new-columns {
	max-width: none !important;
	width: 100% !important;
	box-sizing: border-box;
}

body.ecac-is-order-thanks-url #ecac-storefront.ecac-ot-storefront,
body.ecac-is-order-thanks-url .ecac-sf--order-thanks .ecac-ot-wrap {
	width: 100% !important;
	max-width: var(--ecac-storefront-inner-max-width, var(--ecac-storefront-align-max)) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box;
}

body.ecac-is-order-thanks-url .entry-content .ct-div-block,
body.ecac-is-order-thanks-url article.type-page .ct-div-block,
body.ecac-is-order-thanks-url .entry-content .ct-text-block,
body.ecac-is-order-thanks-url article.type-page .ct-text-block {
	max-width: none !important;
	width: 100% !important;
	box-sizing: border-box;
}

.ecac-sf-pdp-page__inner.ecac-sf-page__inner {
	max-width: none;
	margin: 0;
	padding: 0;
}

.ecac-sf--pdp-vitrine .ecac-sf-pdp-card.ecac-sf-card {
	background: transparent;
	border: none;
	box-shadow: none;
}

.ecac-sf--pdp-vitrine .ecac-sf-accordions {
	margin-top: 0;
	padding-top: 0.35rem;
	border-top: 1px solid var(--ecac-sf-line);
}

/* Minder ruimte tussen mandje-blok (SKU/meta) en accordeons: flex-gap blijft, dit trekt aan */
.ecac-sf--pdp-vitrine .ecac-pdp + .ecac-sf-accordions {
	margin-top: -0.65rem;
}

.ecac-sf--pdp-vitrine .ecac-sf-gallery__stage,
.ecac-sf--pdp-vitrine .ecac-sf-gallery__placeholder {
	box-shadow: none;
}

.ecac-sf--pdp-vitrine .ecac-sf-reviews.ecac-sf-card {
	background: transparent;
	border: none;
	box-shadow: none;
}

.ecac-sf--pdp-vitrine .ecac-sf-pdp-grid {
	gap: 2rem;
	padding: 0;
}

@media (min-width: 1024px) {
	.ecac-sf--pdp-vitrine .ecac-sf-pdp-grid {
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
		padding: 0;
		align-items: start;
	}
}

.ecac-sf--pdp-vitrine .ecac-sf-gallery__stage,
.ecac-sf--pdp-vitrine .ecac-sf-gallery__placeholder {
	border-radius: 1rem;
}

.ecac-sf--pdp-vitrine .ecac-sf-info-title {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.ecac-sf--pdp-vitrine .ecac-sf-price,
.ecac-sf--pdp-vitrine .ecac-sf-cross-price {
	color: var(--ecac-sf-brand, #6c5ce7);
}

/* PDP: verticale ritmes in de infokolom (iets compacter naar accordeons toe) */
.ecac-sf--pdp-vitrine .ecac-sf-info-col {
	gap: 1.15rem;
}

.ecac-sf--pdp-vitrine .ecac-sf-price-line {
	margin-bottom: 0.25rem;
}

.ecac-sf--pdp-vitrine .ecac-pdp {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* Plaat-snede mm (native WP PDP, zelfde JSON als vitrine) */
.ecac-sf-plate-cut {
	margin-top: 0.25rem;
	padding: 0.85rem 1rem;
	border-radius: 0.75rem;
	border: 1px solid rgba(251, 191, 36, 0.45);
	background: rgba(254, 243, 199, 0.45);
}

.ecac-sf-plate-cut__title {
	margin: 0 0 0.35rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--ecac-sf-ink, #0f172a);
}

.ecac-sf-plate-cut__hint {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	line-height: 1.45;
	color: var(--ecac-sf-muted, #64748b);
}

.ecac-sf-plate-cut__smart {
	margin: 0 0 0.65rem;
	padding: 0.55rem 0.65rem;
	font-size: 0.75rem;
	line-height: 1.45;
	color: var(--ecac-sf-ink, #0f172a);
	background: rgba(255, 255, 255, 0.55);
	border-radius: 0.5rem;
	border: 1px solid rgba(251, 191, 36, 0.35);
}

.ecac-sf-plate-cut__stock {
	margin: 0 0 0.5rem;
	min-height: 1.1em;
	font-size: 0.75rem;
	line-height: 1.45;
	font-weight: 600;
	color: #92400e;
}

.ecac-sf-plate-cut__stock:empty {
	display: none;
}

.ecac-sf-plate-cut__ref {
	margin: 0 0 0.75rem;
	font-size: 0.6875rem;
	line-height: 1.45;
	color: var(--ecac-sf-muted, #64748b);
}

.ecac-sf-plate-cut__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.65rem 1rem;
	max-width: 22rem;
}

.ecac-sf-plate-cut__cell .ecac-sf-label {
	display: block;
	margin-bottom: 0.25rem;
}

.ecac-sf-input.ecac-sf-input--num {
	width: 100%;
	box-sizing: border-box;
	padding: 0.45rem 0.55rem;
	border: 1px solid var(--ecac-sf-line, #e2e4ed);
	border-radius: 0.5rem;
	font-size: 0.9rem;
}

.ecac-sf-plate-cut__err {
	margin: 0.5rem 0 0;
	font-size: 0.75rem;
	color: #92400e;
}

/* Stof op rol (rollToLinearMeter) — zelfde JSON als vitrine */
.ecac-sf-fabric-roll {
	margin-top: 0.75rem;
	padding: 0.85rem 1rem;
	border-radius: 0.75rem;
	border: 1px solid rgba(45, 212, 191, 0.45);
	background: rgba(240, 253, 250, 0.65);
}

.ecac-sf-fabric-roll__title {
	margin: 0 0 0.35rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--ecac-sf-ink, #0f172a);
}

.ecac-sf-fabric-roll__hint {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	line-height: 1.45;
	color: var(--ecac-sf-muted, #64748b);
}

.ecac-sf-fabric-roll__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.65rem 1rem;
	max-width: 22rem;
}

.ecac-sf-fabric-roll__cell .ecac-sf-label {
	display: block;
	margin-bottom: 0.25rem;
}

.ecac-sf-fabric-roll__err {
	margin: 0.5rem 0 0;
	font-size: 0.75rem;
	color: #92400e;
}

/* Maatwerk (WP PDP ≈ vitrine ShopProductView) */
.ecac-sf-maatwerk-root {
	margin-top: 0;
}

.ecac-sf-maatwerk {
	border: 1px solid var(--ecac-sf-line, #e2e4ed);
	border-radius: 1rem;
	background: #fff;
	padding: 1.25rem;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.ecac-sf-maatwerk__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1.15rem;
}

.ecac-sf-maatwerk__title {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--ecac-sf-ink, #1a1d1f);
}

.ecac-sf-maatwerk__badge {
	display: inline-block;
	border-radius: 999px;
	padding: 0.2rem 0.65rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ecac-sf-brand, #6c5ce7);
	background: var(--ecac-sf-brand-soft, rgba(239, 238, 255, 0.85));
}

.ecac-sf-maatwerk__body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.ecac-sf-maatwerk__field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.ecac-sf-maatwerk__dim-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ecac-sf-ink, #1a1d1f);
	margin: 0;
	cursor: pointer;
}

.ecac-sf-maatwerk__dim-range {
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	color: var(--ecac-sf-muted, #9a9fa5);
	white-space: nowrap;
}

.ecac-sf-maatwerk__dim-inputs {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.ecac-sf-maatwerk__range {
	flex: 1;
	min-width: 0;
	height: 0.5rem;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 999px;
	background: var(--ecac-sf-sidebar, #edeef6);
	cursor: pointer;
}

.ecac-sf-maatwerk__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
	background: var(--ecac-sf-brand, #6c5ce7);
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(15, 23, 42, 0.2);
}

.ecac-sf-maatwerk__range::-moz-range-thumb {
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
	background: var(--ecac-sf-brand, #6c5ce7);
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(15, 23, 42, 0.2);
}

.ecac-sf-maatwerk__range:focus-visible {
	outline: 2px solid var(--ecac-sf-brand, #6c5ce7);
	outline-offset: 2px;
}

.ecac-sf-maatwerk__num {
	width: 4.5rem;
	flex-shrink: 0;
	padding: 0.35rem 0.4rem;
	border: 1px solid var(--ecac-sf-line, #e2e4ed);
	border-radius: 0.5rem;
	background: #fff;
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: var(--ecac-sf-ink, #1a1d1f);
	box-sizing: border-box;
}

.ecac-sf-maatwerk__num:focus {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 25%, transparent);
}

.ecac-sf-maatwerk__thick-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ecac-sf-ink, #1a1d1f);
	margin-bottom: 0.35rem;
}

.ecac-sf-maatwerk__thick-input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--ecac-sf-line, #e2e4ed);
	border-radius: 0.75rem;
	background: #fff;
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	color: var(--ecac-sf-ink, #1a1d1f);
}

.ecac-sf-maatwerk__thick-input:focus {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 25%, transparent);
}

.ecac-sf-maatwerk__radio-group {
	margin-top: 0.15rem;
}

.ecac-sf-maatwerk__radio-label {
	margin: 0 0 0.35rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ecac-sf-ink, #1a1d1f);
}

.ecac-sf-maatwerk__radio-flex {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ecac-sf-maatwerk__radio-opt {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.45rem 0.75rem;
	border: 1px solid var(--ecac-sf-line, #e2e4ed);
	border-radius: 0.75rem;
	background: color-mix(in srgb, var(--ecac-sf-sidebar, #edeef6) 40%, transparent);
	font-size: 0.875rem;
	color: var(--ecac-sf-ink, #1a1d1f);
	cursor: pointer;
	transition:
		border-color 0.15s ease,
		background 0.15s ease,
		box-shadow 0.15s ease;
}

.ecac-sf-maatwerk__radio-opt:has(input:checked) {
	border-color: var(--ecac-sf-brand, #6c5ce7);
	background: color-mix(in srgb, var(--ecac-sf-brand-soft, #efeeff) 45%, #fff);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 22%, transparent);
}

.ecac-sf-maatwerk__radio-opt:hover {
	border-color: color-mix(in srgb, var(--ecac-sf-ink, #1a1d1f) 18%, var(--ecac-sf-line));
}

.ecac-sf-maatwerk__radio-text {
	line-height: 1.3;
}

.ecac-sf-maatwerk__radio-opt input {
	accent-color: var(--ecac-sf-brand, #6c5ce7);
}

.ecac-sf-maatwerk__preview {
	margin-top: 0.75rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--ecac-sf-line, #e2e4ed);
	border-radius: 0.75rem;
	background: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--ecac-sf-sidebar, #edeef6) 80%, #fff) 0%,
		#fff 100%
	);
	font-size: 0.875rem;
}

.ecac-sf-maatwerk__preview-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0;
	color: var(--ecac-sf-muted, #9a9fa5);
}

.ecac-sf-maatwerk__preview-row + .ecac-sf-maatwerk__preview-row {
	margin-top: 0.35rem;
}

.ecac-sf-maatwerk__preview-row--strong {
	margin-top: 0.5rem;
	padding-top: 0.35rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--ecac-sf-ink, #1a1d1f);
	border-top: 1px solid var(--ecac-sf-line, #e2e4ed);
}

.ecac-sf-maatwerk__preview-k {
	flex-shrink: 0;
	max-width: 58%;
}

.ecac-sf-maatwerk__preview-v {
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	color: var(--ecac-sf-ink, #1a1d1f);
}

.ecac-sf-maatwerk__preview-row--strong .ecac-sf-maatwerk__preview-v {
	font-weight: 600;
}

.ecac-sf-maatwerk__hint {
	margin: 0.65rem 0 0;
	font-size: 0.75rem;
	color: #92400e;
	line-height: 1.45;
}

.ecac-sf-maatwerk__hint[hidden] {
	display: none;
}

.ecac-sf--pdp-vitrine .ecac-sf-field {
	gap: 0.5rem;
}

.ecac-sf--pdp-vitrine .ecac-sf-actions {
	padding-top: 0;
	gap: 1rem;
}

@media (min-width: 640px) {
	.ecac-sf--pdp-vitrine .ecac-sf-actions {
		column-gap: 1.125rem;
	}
}

.ecac-sf-page__inner {
	max-width: var(--ecac-storefront-inner-max-width, var(--ecac-storefront-align-max));
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 1.5rem 1rem 2.5rem;
	box-sizing: border-box;
}

@media (min-width: 640px) {
	.ecac-sf-page__inner {
		padding: 2.5rem 1.5rem 3rem;
	}
}

body.ecac-is-vitrine-url .ecac-sf-page__inner.ecac-sf-cat-page__inner {
	padding-top: var(--ecac-storefront-vitrine-padding-top, 9rem);
	padding-bottom: 3rem;
	padding-left: max(var(--ecac-storefront-vitrine-padding-inline, 80px), env(safe-area-inset-left, 0px));
	padding-right: max(var(--ecac-storefront-vitrine-padding-inline, 80px), env(safe-area-inset-right, 0px));
}

/* Categoriepagina: hero, secties, content uit API — één kolom met page__inner-padding */
.ecac-sf--category .ecac-sf-cat-article.ecac-sf-card {
	overflow: visible;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

.ecac-sf-cat-header {
	margin: 0 0 1.25rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--ecac-sf-line);
}

.ecac-sf-cat-back {
	margin: 0 0 0.65rem;
	font-size: 0.875rem;
	line-height: 1.4;
}

.ecac-sf-cat-back__link {
	color: var(--ecac-sf-brand, #6c5ce7);
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.ecac-sf-cat-back__link:hover,
.ecac-sf-cat-back__link:focus {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ecac-sf-cat-head {
	padding: 0;
	margin: 0;
}

.ecac-sf-cat-title {
	margin: 0;
	padding: 0;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--ecac-sf-ink);
	border: 0;
	box-shadow: none;
	/* Thema’s: geen extra accentbalk / pseudo-element naast de titel */
	background: none;
}

.ecac-sf-cat-title::before,
.ecac-sf-cat-title::after {
	content: none !important;
	display: none !important;
}

.ecac-sf--category .ecac-sf-cat-section {
	padding: 1.5rem 0 1.75rem;
	border-top: 1px solid var(--ecac-sf-line);
	box-sizing: border-box;
}

@media (min-width: 640px) {
	.ecac-sf--category .ecac-sf-cat-section {
		padding: 1.75rem 0 2rem;
	}
}

.ecac-sf--category .ecac-sf-cat-section:first-of-type {
	border-top: none;
	padding-top: 0;
}

.ecac-sf--category .ecac-sf-cat-section--content {
	padding-top: 1.25rem;
}

.ecac-sf-cat-empty {
	margin: 0;
	color: var(--ecac-sf-muted);
	font-size: 0.9375rem;
}

/* Geen dubbele horizontale marge t.o.v. titel: zelfde linkerlijn als header */
.ecac-sf--category .ecac-sf-cat-grid-wrap {
	margin: 0;
	max-width: none;
}

.ecac-sf--category .ecac-sf-cat-grid-wrap .ecac-native.ecac-native--shop.ecac-native--vitrine {
	margin: 0;
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0.35rem;
	padding-bottom: 0;
	box-sizing: border-box;
}

/*
 * Shortcode [ecom_category_products]: .ecac-native--vitrine.shop heeft max-width:72rem;
 * in Oxygen/thema-kolommen wil de sectie de volle breedte van die kolom (niet een smal gecentreerd blok).
 */
.ecac-native--category-products.ecac-native--vitrine {
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box;
	align-self: stretch;
	background: transparent;
}

.entry-content .ecac-native--category-products.ecac-native--vitrine,
article.type-page .entry-content .ecac-native--category-products.ecac-native--vitrine,
.ct-inner-content .ecac-native--category-products.ecac-native--vitrine,
.oxy-inner-content .ecac-native--category-products.ecac-native--vitrine {
	max-width: none !important;
	width: 100% !important;
}

/*
 * Categorie-URL + shortcode ecom_category_products: zelfde raster en kaarten als winkel-overzicht
 * (witte kaart, rand, schaduw, 4/3-media, linkse titel/tekst/prijs in merkkleur).
 */
.ecac-sf--category .ecac-sf-cat-grid-wrap .ecac-native.ecac-native--shop.ecac-native--vitrine .ecac-native-grid,
.ecac-native--category-products.ecac-native--vitrine .ecac-native-grid {
	display: grid;
	max-width: none;
	margin: 0;
	gap: 1.5rem;
	grid-template-columns: minmax(0, 1fr);
	list-style: none;
	padding: 0;
	width: 100%;
	min-width: 0;
}

@media (min-width: 640px) {
	.ecac-sf--category .ecac-sf-cat-grid-wrap .ecac-native.ecac-native--shop.ecac-native--vitrine .ecac-native-grid,
	.ecac-native--category-products.ecac-native--vitrine .ecac-native-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.ecac-sf--category .ecac-sf-cat-grid-wrap .ecac-native.ecac-native--shop.ecac-native--vitrine .ecac-native-grid,
	.ecac-native--category-products.ecac-native--vitrine .ecac-native-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.ecac-sf--category .ecac-sf-cat-grid-wrap .ecac-native--vitrine .ecac-native-card,
.ecac-native--category-products.ecac-native--vitrine .ecac-native-card {
	position: relative;
	height: 100%;
	border: 1px solid var(--ecac-vitrine-line, #e2e4ed);
	border-radius: 1rem;
	background: #fff;
	overflow: hidden;
	box-shadow:
		0 1px 3px 0 color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 6%, transparent),
		0 1px 2px -1px rgb(0 0 0 / 0.04);
	transition:
		box-shadow 0.2s ease,
		border-color 0.2s ease;
}

.ecac-sf--category .ecac-sf-cat-grid-wrap .ecac-native--vitrine .ecac-native-card:hover,
.ecac-native--category-products.ecac-native--vitrine .ecac-native-card:hover {
	border-color: color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 35%, var(--ecac-vitrine-line, #e2e4ed));
	box-shadow:
		0 4px 24px -4px color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 10%, transparent),
		0 2px 8px -2px rgb(0 0 0 / 0.06);
}

.ecac-sf--category .ecac-sf-cat-grid-wrap .ecac-native--vitrine .ecac-native-card:hover .ecac-native-card__title,
.ecac-native--category-products.ecac-native--vitrine .ecac-native-card:hover .ecac-native-card__title {
	color: var(--ecac-sf-brand, #6c5ce7);
}

.ecac-sf--category .ecac-sf-cat-grid-wrap .ecac-native--vitrine .ecac-native-card__link,
.ecac-native--category-products.ecac-native--vitrine .ecac-native-card__link {
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
	pointer-events: none;
}

.ecac-sf--category .ecac-sf-cat-grid-wrap .ecac-native--vitrine .ecac-native-card__link .ecac-native-card__media,
.ecac-sf--category .ecac-sf-cat-grid-wrap .ecac-native--vitrine .ecac-native-card__link .ecac-native-card__body,
.ecac-native--category-products.ecac-native--vitrine .ecac-native-card__link .ecac-native-card__media,
.ecac-native--category-products.ecac-native--vitrine .ecac-native-card__link .ecac-native-card__body {
	pointer-events: auto;
}

.ecac-sf--category .ecac-sf-cat-grid-wrap .ecac-native--vitrine .ecac-native-card__media,
.ecac-native--category-products.ecac-native--vitrine .ecac-native-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--ecac-vitrine-sidebar, #edeef6);
	overflow: hidden;
}

.ecac-sf--category .ecac-sf-cat-grid-wrap .ecac-native--vitrine .ecac-native-card__media img,
.ecac-native--category-products.ecac-native--vitrine .ecac-native-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	transition: transform 0.3s ease;
}

.ecac-sf--category .ecac-sf-cat-grid-wrap .ecac-native--vitrine .ecac-native-card:hover .ecac-native-card__media img,
.ecac-native--category-products.ecac-native--vitrine .ecac-native-card:hover .ecac-native-card__media img {
	transform: scale(1.03);
}

.ecac-sf--category .ecac-sf-cat-grid-wrap .ecac-native--vitrine .ecac-native-card__body,
.ecac-native--category-products.ecac-native--vitrine .ecac-native-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.25rem;
	padding: 1rem;
	text-align: left;
	align-items: stretch;
}

.ecac-sf--category .ecac-sf-cat-grid-wrap .ecac-native--vitrine .ecac-native-card__title,
.ecac-sf--category .ecac-sf-cat-grid-wrap .ecac-native--vitrine .ecac-native-card__short,
.ecac-sf--category .ecac-sf-cat-grid-wrap .ecac-native--vitrine .ecac-native-card__sku,
.ecac-sf--category .ecac-sf-cat-grid-wrap .ecac-native--vitrine .ecac-native-card__reviews,
.ecac-sf--category .ecac-sf-cat-grid-wrap .ecac-native--vitrine .ecac-native-card__price-row,
.ecac-native--category-products.ecac-native--vitrine .ecac-native-card__title,
.ecac-native--category-products.ecac-native--vitrine .ecac-native-card__short,
.ecac-native--category-products.ecac-native--vitrine .ecac-native-card__sku,
.ecac-native--category-products.ecac-native--vitrine .ecac-native-card__reviews,
.ecac-native--category-products.ecac-native--vitrine .ecac-native-card__price-row {
	text-align: left;
	width: 100%;
	max-width: 100%;
}

.ecac-sf--category .ecac-sf-cat-grid-wrap .ecac-native--vitrine .ecac-native-card__title,
.ecac-native--category-products.ecac-native--vitrine .ecac-native-card__title {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ecac-vitrine-ink, #1a1d1f);
	transition: color 0.15s ease;
}

.ecac-sf--category .ecac-sf-cat-grid-wrap .ecac-native--vitrine .ecac-native-card__short,
.ecac-native--category-products.ecac-native--vitrine .ecac-native-card__short {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	font-size: 0.75rem;
	line-height: 1.45;
	color: color-mix(in srgb, var(--ecac-vitrine-ink, #1a1d1f) 70%, transparent);
}

.ecac-sf--category .ecac-sf-cat-grid-wrap .ecac-native--vitrine .ecac-native-card__sku,
.ecac-native--category-products.ecac-native--vitrine .ecac-native-card__sku {
	font-size: 0.75rem;
	color: var(--ecac-vitrine-muted, #9a9fa5);
}

.ecac-sf--category .ecac-sf-cat-grid-wrap .ecac-native--vitrine .ecac-native-card__price-row,
.ecac-native--category-products.ecac-native--vitrine .ecac-native-card__price-row {
	margin-top: 0.25rem;
	padding-top: 0.25rem;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
	color: var(--ecac-sf-brand, #6c5ce7);
}

.ecac-sf--category .ecac-sf-cat-grid-wrap .ecac-native--vitrine .ecac-native-price-prefix,
.ecac-native--category-products.ecac-native--vitrine .ecac-native-price-prefix {
	font-weight: 500;
	font-size: 0.875rem;
	margin-right: 0.2rem;
	color: color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 88%, var(--ecac-vitrine-ink, #1a1d1f));
}

.ecac-sf--category .ecac-sf-cat-grid-wrap .ecac-native--vitrine .ecac-native-price,
.ecac-native--category-products.ecac-native--vitrine .ecac-native-price {
	font-weight: 700;
	color: inherit;
}

.ecac-sf--category .ecac-sf-cat-grid-wrap .ecac-native--vitrine .ecac-native-card > .ecac-native-wish.ecac-native-wish--btn,
.ecac-native--category-products.ecac-native--vitrine .ecac-native-card > .ecac-native-wish.ecac-native-wish--btn {
	z-index: 20;
}

.ecac-sf--category .ecac-sf-cat-section > .ecac-sf-section-title {
	margin-bottom: 1.25rem;
}

.ecac-sf-cat-content.product-html-desc {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--ecac-sf-ink);
}

.ecac-sf-page-h1 {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 1rem;
	letter-spacing: -0.02em;
	color: var(--ecac-sf-ink);
}

.ecac-sf-card {
	overflow: hidden;
	border: 1px solid var(--ecac-sf-line);
	border-radius: 1rem;
	background: #fff;
	box-shadow:
		0 4px 24px -4px rgba(108, 92, 231, 0.08),
		0 2px 8px -2px rgba(0, 0, 0, 0.04);
}

.ecac-sf-panel {
	padding: 1.25rem 1.5rem;
}

.ecac-sf-pdp-grid {
	display: grid;
	gap: 2rem;
	padding: 1.5rem;
}

@media (min-width: 1024px) {
	.ecac-sf-pdp-grid {
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
		padding: 2.5rem;
		align-items: start;
	}
}

.ecac-sf-gallery-col {
	min-width: 0;
}

.ecac-sf-gallery {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

@media (min-width: 1024px) {
	.ecac-sf-gallery.ecac-sf-gallery--multi {
		flex-direction: row;
		align-items: flex-start;
		gap: 1rem;
	}
}

.ecac-sf-gallery__thumbs {
	display: flex;
	flex-direction: row;
	gap: 0.5rem;
	overflow-x: auto;
	padding-bottom: 0.25rem;
}

@media (min-width: 1024px) {
	.ecac-sf-gallery.ecac-sf-gallery--multi .ecac-sf-gallery__thumbs {
		flex-direction: column;
		width: 4.5rem;
		flex-shrink: 0;
		overflow-x: hidden;
		overflow-y: visible;
		padding-bottom: 0;
	}
}

.ecac-sf-gallery__thumb {
	padding: 0;
	border: 2px solid var(--ecac-sf-line);
	border-radius: 0.75rem;
	overflow: hidden;
	background: var(--ecac-sf-sidebar);
	cursor: pointer;
	opacity: 0.85;
	transition:
		opacity 0.15s ease,
		border-color 0.15s ease,
		box-shadow 0.15s ease;
	flex-shrink: 0;
	width: 4rem;
	height: 4rem;
}

.ecac-sf-gallery__thumb:hover {
	opacity: 1;
}

.ecac-sf-gallery__thumb.is-active {
	opacity: 1;
	border-color: var(--ecac-sf-brand);
	box-shadow: 0 0 0 1px rgba(108, 92, 231, 0.35);
}

.ecac-sf-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}

.ecac-sf-gallery__main {
	flex: 1;
	min-width: 0;
}

.ecac-sf-gallery__stage {
	position: relative;
	aspect-ratio: 1 / 1;
	width: 100%;
	max-width: 22rem;
	margin: 0 auto;
	border-radius: 1rem;
	overflow: hidden;
	background: var(--ecac-sf-sidebar);
	box-shadow: 0 0 0 1px var(--ecac-sf-line);
}

@media (min-width: 1024px) {
	.ecac-sf-gallery__stage {
		max-width: none;
		margin: 0;
	}
}

.ecac-sf-gallery__stage img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.ecac-sf-gallery__placeholder {
	aspect-ratio: 1 / 1;
	max-width: 22rem;
	margin: 0 auto;
	border-radius: 1rem;
	background: var(--ecac-sf-sidebar);
	box-shadow: 0 0 0 1px var(--ecac-sf-line);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ecac-sf-muted);
	font-size: 0.875rem;
}

.ecac-sf-info-col {
	min-width: 0;
	max-width: 36rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.ecac-sf-info-head {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ecac-sf-info-head__title-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
}

.ecac-sf-info-head__title-row .ecac-sf-info-title {
	flex: 1;
	min-width: 0;
}

.ecac-sf-wish-btn {
	flex-shrink: 0;
	margin-top: 0.15em;
}

/* PDP: zelfde hart-styling als vitrine, maar in de titelrij (geen absolute overlay). */
.ecac-sf-info-head .ecac-sf-wish-btn.ecac-native-wish {
	position: relative;
	right: auto;
	top: auto;
}

.ecac-sf-info-title {
	margin: 0;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--ecac-sf-ink);
}

.ecac-sf-reviews-hint {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.6rem;
}

.ecac-sf-reviews-stars {
	color: #f59e0b;
	font-size: 1.125rem;
	line-height: 1;
}

.ecac-sf-reviews-meta {
	font-size: 0.75rem;
	color: var(--ecac-sf-muted);
}

.ecac-sf-short-lead {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: rgba(26, 29, 31, 0.9);
}

.product-short-lead p {
	margin: 0.25rem 0;
}

.product-short-lead p:first-child {
	margin-top: 0;
}

.product-short-lead p:last-child {
	margin-bottom: 0;
}

.product-short-lead strong {
	font-weight: 600;
}

.product-short-lead a {
	font-weight: 500;
	color: var(--ecac-sf-brand);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ecac-sf-price-line {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.5rem;
}

.ecac-pdp-compare-wrap[hidden] {
	display: none !important;
}

.ecac-pdp-compare-wrap:not([hidden]) {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem;
}

.ecac-sf-price-compare {
	font-size: clamp(1.15rem, 3vw, 1.5rem);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-decoration: line-through;
	color: var(--ecac-sf-muted);
	opacity: 0.85;
}

.ecac-sf-sale-badge {
	display: inline-block;
	padding: 0.15rem 0.45rem;
	border-radius: 4px;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: middle;
	background: #fee2e2;
	color: #991b1b;
}

.ecac-sf-sale-badge--sm {
	padding: 0.1rem 0.35rem;
	font-size: 0.58rem;
}

.ecac-sf-cross-price-was {
	margin-right: 0.35rem;
	font-size: 0.88em;
	font-weight: 600;
	text-decoration: line-through;
	color: var(--ecac-sf-muted);
	opacity: 0.85;
}

.ecac-sf-price {
	font-size: clamp(1.75rem, 4vw, 2.25rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--ecac-sf-brand);
}

.ecac-sf-vat-hint {
	margin-left: 0.35rem;
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--ecac-sf-muted);
}

.ecac-sf-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.ecac-sf-label {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--ecac-sf-muted);
}

.ecac-sf-select {
	width: 100%;
	max-width: 28rem;
	padding: 0.625rem 0.75rem;
	font-size: 0.875rem;
	color: var(--ecac-sf-ink);
	background: #fff;
	border: 1px solid var(--ecac-sf-line);
	border-radius: 0.5rem;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.ecac-sf-select:focus {
	outline: none;
	border-color: rgba(108, 92, 231, 0.45);
	box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2);
}

.ecac-sf-qty {
	display: inline-flex;
	max-width: 10.5rem;
	border: 1px solid var(--ecac-sf-line);
	border-radius: 0.5rem;
	background: #fff;
	overflow: hidden;
}

.ecac-sf-qty.is-disabled {
	pointer-events: none;
	opacity: 0.55;
}

.ecac-sf-qty__btn {
	flex: 0 0 2.75rem;
	border: none;
	background: transparent;
	padding: 0.625rem 0;
	font-size: 1.1rem;
	line-height: 1;
	color: var(--ecac-sf-muted);
	cursor: pointer;
	transition:
		background 0.12s ease,
		color 0.12s ease;
}

.ecac-sf-qty__btn:hover:not(:disabled) {
	background: rgba(237, 238, 246, 0.65);
	color: var(--ecac-sf-ink);
}

.ecac-sf-qty__btn:disabled {
	cursor: not-allowed;
	opacity: 0.45;
}

.ecac-sf-qty__val {
	flex: 1;
	min-width: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-left: 1px solid var(--ecac-sf-line);
	border-right: 1px solid var(--ecac-sf-line);
	font-size: 0.875rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--ecac-sf-ink);
}

.ecac-sf-actions {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	padding-top: 0.35rem;
}

.ecac-sf-actions[hidden],
.ecac-pdp[data-ecac-booking-enabled="1"] .ecac-sf-actions,
.ecac-sf-field[hidden],
#ecac-pdp-stock-wrap[hidden],
#ecac-pdp-stock-notify[hidden] {
	display: none !important;
}

@media (min-width: 640px) {
	.ecac-sf-actions {
		grid-template-columns: 1fr 1fr;
	}
}

.ecac-sf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	border-radius: 0.75rem;
	cursor: pointer;
	text-decoration: none;
	border: 1px solid transparent;
	transition:
		background 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease,
		opacity 0.15s ease;
}

.ecac-sf-btn--ghost {
	border-color: var(--ecac-sf-line);
	background: #fff;
	color: var(--ecac-sf-ink);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.ecac-sf-btn--ghost:hover {
	border-color: rgba(108, 92, 231, 0.28);
	background: rgba(239, 238, 255, 0.35);
}

.ecac-sf-btn--outline {
	border: 2px solid var(--ecac-sf-brand);
	background: #fff;
	color: var(--ecac-sf-brand);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.ecac-sf-btn--outline:hover:not(:disabled) {
	background: rgba(239, 238, 255, 0.5);
}

.ecac-sf-btn--primary {
	background: var(--ecac-sf-brand);
	color: #fff;
	border-color: #5548c4;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.ecac-sf-btn--primary:hover:not(:disabled) {
	background: var(--ecac-sf-brand-hover);
}

.ecac-sf-btn:disabled {
	opacity: 0.52;
	cursor: not-allowed;
}

.ecac-sf-msg {
	margin: 0;
	font-size: 0.875rem;
}

.ecac-sf-sku-stock,
.ecac-sf-cats {
	margin: 0;
	font-size: 0.875rem;
	color: var(--ecac-sf-muted);
	line-height: 1.5;
}

.ecac-sf-pdp-meta {
	margin-top: 0.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--ecac-sf-line);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--ecac-sf-muted);
}

.ecac-sf-pdp-meta .ecac-sf-sku-stock,
.ecac-sf-pdp-meta .ecac-sf-cats {
	color: inherit;
}

.ecac-sf-pdp-meta .ecac-sf-cats {
	margin-top: 0.25rem;
}

.ecac-sf-cats__link {
	color: var(--ecac-sf-brand, #6c5ce7);
	font-weight: 600;
	text-decoration: none;
}

.ecac-sf-cats__link:hover,
.ecac-sf-cats__link:focus {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ecac-sf-cats__sep {
	opacity: 0.45;
	padding: 0 0.15em;
}

.ecac-sf-pdp-meta__val,
.ecac-sf-pdp-meta #ecac-pdp-sku,
.ecac-sf-pdp-meta #ecac-pdp-stock {
	font-weight: 400;
	color: inherit;
}

.ecac-sf-oos-notice {
	margin: 0.65rem 0 0;
	padding: 0.55rem 0.65rem;
	border-radius: 0.5rem;
	border: 1px solid rgba(180, 120, 40, 0.35);
	background: rgba(255, 248, 235, 0.95);
	font-size: 0.875rem;
	line-height: 1.35;
	color: #5c4208;
}

.ecac-sf-stock-notify {
	margin: 0.85rem 0 0;
	padding: 1rem 1rem 1.05rem;
	border-radius: 0.75rem;
	border: 1px solid color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 22%, transparent);
	background: color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 8%, #fff);
	font-size: 0.875rem;
	line-height: 1.4;
	color: inherit;
}

.ecac-sf-stock-notify__title {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: inherit;
}

.ecac-sf-stock-notify__hint {
	margin: 0.35rem 0 0;
	font-size: 0.8125rem;
	color: rgba(15, 18, 22, 0.62);
}

.ecac-sf-stock-notify__row {
	margin-top: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

@media (min-width: 480px) {
	.ecac-sf-stock-notify__row {
		flex-direction: row;
		align-items: center;
	}
}

.ecac-sf-stock-notify__input {
	min-width: 0;
	flex: 1;
	border-radius: 0.5rem;
	border: 1px solid rgba(15, 18, 22, 0.14);
	padding: 0.62rem 0.75rem;
	font-size: 0.875rem;
	background: #fff;
	box-sizing: border-box;
}

.ecac-sf-stock-notify__btn {
	flex-shrink: 0;
	white-space: nowrap;
}

.ecac-sf-stock-notify__feedback {
	margin: 0.55rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.35;
}

.ecac-sf-stock-notify__feedback.is-success {
	color: #166534;
}

.ecac-sf-stock-notify__feedback.is-error {
	color: #b91c1c;
}

.ecac-sf-custom-note {
	margin: 0;
}

.ecac-sf-review-toggle {
	display: inline-flex;
	margin-top: 0.75rem;
	padding: 0;
	border: none;
	background: none;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ecac-sf-brand, #6c5ce7);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ecac-sf-review-toggle:hover {
	color: var(--ecac-sf-brand-hover, #5b4dc7);
}

body.ecac-sf-review-modal-open {
	overflow: hidden;
}

.ecac-sf-review-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	box-sizing: border-box;
}

.ecac-sf-review-modal[hidden] {
	display: none !important;
}

.ecac-sf-review-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(15 18 22 / 0.45);
	backdrop-filter: blur(2px);
}

.ecac-sf-review-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 26rem;
	max-height: min(90vh, 36rem);
	overflow: auto;
	margin: auto;
	padding: 0;
	border-radius: 1rem;
	border: 1px solid var(--ecac-sf-line);
	background: #fff;
	box-shadow:
		0 24px 48px -12px rgb(0 0 0 / 0.18),
		0 12px 24px -8px rgb(0 0 0 / 0.1);
}

.ecac-sf-review-modal__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.25rem 0.75rem;
	border-bottom: 1px solid var(--ecac-sf-line);
}

.ecac-sf-review-modal__title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ecac-sf-ink);
	letter-spacing: -0.02em;
}

.ecac-sf-review-modal__close {
	flex-shrink: 0;
	margin: -0.25rem -0.35rem 0 0;
	padding: 0.35rem 0.55rem;
	border: none;
	border-radius: 0.5rem;
	background: transparent;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--ecac-sf-muted);
	cursor: pointer;
	transition:
		background 0.12s ease,
		color 0.12s ease;
}

.ecac-sf-review-modal__close:hover {
	background: var(--ecac-sf-sidebar, #edeef6);
	color: var(--ecac-sf-ink);
}

.ecac-sf-review-form {
	display: flex;
	flex-direction: column;
	gap: 0;
	max-width: none;
	padding: 0;
}

.ecac-sf-review-form-panel {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1rem 1.25rem 1.25rem;
}

.ecac-sf-review-success {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1.25rem;
	padding: 1.35rem 1.25rem 1.5rem;
	text-align: center;
	box-sizing: border-box;
}

.ecac-sf-review-success[hidden] {
	display: none !important;
}

.ecac-sf-review-success__msg {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	font-weight: 500;
	color: #15803d;
}

.ecac-sf-review-success__btn {
	width: 100%;
	justify-content: center;
}

.ecac-sf-review-form__lead {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--ecac-sf-muted);
	line-height: 1.5;
}

.ecac-sf-review-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
	font-size: 0.875rem;
}

.ecac-sf-review-form__label {
	font-weight: 500;
	color: var(--ecac-sf-ink);
}

.ecac-sf-review-form__hint {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.75rem;
	color: var(--ecac-sf-muted);
	line-height: 1.4;
}

.ecac-sf-review-input,
.ecac-sf-review-textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.5rem 0.65rem;
	border: 1px solid var(--ecac-sf-line);
	border-radius: 0.5rem;
	font: inherit;
	font-size: 0.875rem;
	background: #fff;
	color: var(--ecac-sf-ink);
}

.ecac-sf-review-textarea {
	resize: vertical;
	min-height: 6rem;
}

.ecac-sf-review-feedback {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
}

.ecac-sf-review-feedback--ok {
	color: #15803d;
}

.ecac-sf-review-feedback--err {
	color: #b91c1c;
}

.ecac-sf-accordions {
	margin-top: 0.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--ecac-sf-line);
}

.ecac-sf-acc {
	border-bottom: 1px solid var(--ecac-sf-line);
}

.ecac-sf-acc:last-child {
	border-bottom: none;
}

.ecac-sf-acc__summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 1rem 0;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--ecac-sf-ink);
	transition: color 0.15s ease;
}

.ecac-sf-acc__summary::-webkit-details-marker {
	display: none;
}

.ecac-sf-acc__summary::marker {
	display: none;
	content: '';
}

.ecac-sf-acc__label {
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
}

.ecac-sf-acc__chev {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	position: relative;
	color: var(--ecac-sf-muted);
	transition: transform 0.2s ease;
}

.ecac-sf-acc__chev::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 42%;
	width: 0.45rem;
	height: 0.45rem;
	margin: -0.22rem 0 0 -0.22rem;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	box-sizing: border-box;
}

details.ecac-sf-acc[open] > .ecac-sf-acc__summary .ecac-sf-acc__chev::after {
	transform: rotate(-135deg);
	top: 58%;
}

.ecac-sf-acc__summary:hover {
	color: var(--ecac-sf-brand);
}

.ecac-sf-acc__summary:hover .ecac-sf-acc__chev {
	color: var(--ecac-sf-muted);
}

.ecac-sf-desc {
	padding-bottom: 1.25rem;
	font-size: 0.875rem;
	line-height: 1.65;
	color: rgba(26, 29, 31, 0.85);
}

.ecac-sf-acc__panel {
	padding-top: 0;
}

.product-html-desc h2 {
	margin: 1rem 0 0.5rem;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--ecac-sf-ink);
}

.product-html-desc h2:first-child {
	margin-top: 0;
}

.product-html-desc h3 {
	margin: 0.75rem 0 0.35rem;
	font-size: 1rem;
	font-weight: 600;
}

.product-html-desc p {
	margin: 0.5rem 0;
}

.product-html-desc ul,
.product-html-desc ol {
	margin: 0.5rem 0;
	padding-left: 1.25rem;
}

.product-html-desc a {
	font-weight: 500;
	color: var(--ecac-sf-brand);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.product-html-desc blockquote {
	margin: 0.5rem 0;
	padding-left: 0.75rem;
	border-left: 4px solid rgba(108, 92, 231, 0.22);
	font-style: italic;
	color: rgba(26, 29, 31, 0.78);
}

.ecac-sf-acc__body {
	padding-bottom: 1.25rem;
	font-size: 0.875rem;
	line-height: 1.65;
	color: rgba(26, 29, 31, 0.85);
}

.ecac-sf-promo-hint {
	margin: 0 0 1rem;
	padding: 0.5rem 0.75rem;
	border-radius: 0.5rem;
	background: color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 10%, #fff);
	font-size: 0.75rem;
	line-height: 1.45;
	color: var(--ecac-sf-ink);
}

.ecac-sf-ship-title {
	margin: 0 0 0.35rem;
	font-weight: 600;
	color: var(--ecac-sf-ink);
}

.ecac-sf-ship-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ecac-sf-ship-list li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid rgba(226, 228, 237, 0.85);
}

.ecac-sf-ship-list li:last-child {
	border-bottom: none;
}

.ecac-sf-ship-amt {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ecac-sf-ink);
}

.ecac-sf-ship-empty {
	margin: 0;
	color: var(--ecac-sf-muted);
}

.ecac-sf-section-title {
	margin: 0 0 1rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ecac-sf-muted);
}

.ecac-sf-reviews {
	margin-top: 1.75rem;
	padding: 1.5rem 1.5rem 1.75rem;
}

@media (min-width: 640px) {
	.ecac-sf-reviews {
		padding: 2rem;
	}
}

.ecac-sf-review-list {
	list-style: none;
	margin: 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--ecac-sf-line);
}

.ecac-sf-review {
	padding: 1.1rem 0;
	border-bottom: 1px solid rgba(226, 228, 237, 0.85);
}

.ecac-sf-review:last-child {
	border-bottom: none;
}

.ecac-sf-review__head {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.5rem;
	align-items: center;
	font-size: 0.875rem;
}

.ecac-sf-review__date {
	font-size: 0.75rem;
	color: var(--ecac-sf-muted);
}

.ecac-sf-review__title {
	margin: 0.35rem 0 0;
	font-size: 0.875rem;
	font-weight: 600;
}

.ecac-sf-review__body {
	margin: 0.35rem 0 0;
	white-space: pre-wrap;
	font-size: 0.875rem;
	line-height: 1.55;
	color: rgba(26, 29, 31, 0.92);
}

.ecac-sf-cross {
	margin-top: 1.75rem;
}

.ecac-sf-cross--related {
	margin-top: 2.25rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--ecac-sf-line);
}

.ecac-sf-cross-short {
	margin: 0.35rem 0 0;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--ecac-sf-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ecac-sf-cross-short p {
	margin: 0;
}

.ecac-sf-cross-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.ecac-sf-cross-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ecac-sf-cross-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ecac-sf-cross-card {
	border-radius: 1rem;
	border: 1px solid var(--ecac-sf-line);
	background: #fff;
	overflow: hidden;
	box-shadow:
		0 1px 3px rgba(108, 92, 231, 0.06),
		0 1px 2px rgba(0, 0, 0, 0.04);
	transition:
		box-shadow 0.2s ease,
		box-shadow 0.2s ease;
}

.ecac-sf-cross-card:hover {
	box-shadow:
		0 4px 24px -4px rgba(108, 92, 231, 0.12),
		0 2px 8px -2px rgba(0, 0, 0, 0.05);
}

.ecac-sf-cross-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.ecac-sf-cross-media {
	aspect-ratio: 4 / 3;
	background: var(--ecac-sf-sidebar);
	overflow: hidden;
}

.ecac-sf-cross-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
	transition: transform 0.3s ease;
}

.ecac-sf-cross-card:hover .ecac-sf-cross-media img {
	transform: scale(1.03);
}

.ecac-sf-cross-body {
	padding: 1rem 1.1rem 1.15rem;
}

.ecac-sf-cross-name {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
}

.ecac-sf-cross-card:hover .ecac-sf-cross-name {
	color: var(--ecac-sf-brand);
}

.ecac-sf-cross-sku {
	margin: 0.2rem 0 0;
	font-size: 0.75rem;
	color: var(--ecac-sf-muted);
}

.ecac-sf-cross-oos {
	margin: 0.35rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.35;
	color: #92400e;
}

.ecac-sf-cross-price {
	margin: 0.45rem 0 0;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--ecac-sf-brand);
}

/* Cart / checkout tables blend with vitrine */
.ecac-sf-panel .ecac-native-btn--primary {
	background: var(--ecac-sf-brand);
	border-color: #5548c4;
	color: #fff;
}

.ecac-sf-panel .ecac-native-btn--primary:hover {
	background: var(--ecac-sf-brand-hover);
	color: #fff;
}

.ecac-sf-panel .ecac-cart-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.ecac-sf-panel .ecac-cart-table th,
.ecac-sf-panel .ecac-cart-table td {
	padding: 0.65rem 0.5rem;
	text-align: left;
	border-bottom: 1px solid var(--ecac-sf-line);
	vertical-align: middle;
}

.ecac-sf-panel .ecac-cart-qty {
	max-width: 4rem;
	padding: 0.35rem 0.5rem;
	border: 1px solid var(--ecac-sf-line);
	border-radius: 0.375rem;
}

.ecac-sf-panel .ecac-checkout-form .ecac-input {
	width: 100%;
	max-width: 32rem;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--ecac-sf-line);
	border-radius: 0.5rem;
	font-size: 0.875rem;
}

.ecac-co-credit-block {
	margin: 0 0 1rem;
	padding: 1rem 1.25rem;
	border: 1px solid #fcd34d;
	border-radius: 0.75rem;
	background: #fffbeb;
	color: #78350f;
	font-size: 0.875rem;
	line-height: 1.5;
}

.ecac-co-credit-block[hidden] {
	display: none !important;
}

.ecac-co-price-hint {
	margin: -0.5rem 0 1rem;
	font-size: 0.75rem;
	color: var(--ecac-sf-muted, #64748b);
	line-height: 1.45;
}

.ecac-co-price-hint[hidden] {
	display: none !important;
}

.ecac-co-account-authed__hint {
	margin: 0.35rem 0 0;
	font-size: 0.75rem;
	color: var(--ecac-sf-muted, #64748b);
	line-height: 1.45;
}

.ecac-co-account-authed__hint[hidden] {
	display: none !important;
}

.ecac-co-line__unit-was,
.ecac-native-search__price .ecac-native-price-was,
.ecac-co-upsell__price .ecac-native-price-was {
	text-decoration: line-through;
	opacity: 0.65;
	margin-right: 0.2rem;
}

/* Gecombineerde checkout (vitrine-achtig): stappen + raster */
.ecac-sf-panel .ecac-co-wrap {
	margin: 0;
}

.ecac-co-steps {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin: 0 0 1.5rem;
	font-size: 0.8125rem;
	color: var(--ecac-sf-muted, #64748b);
}

.ecac-co-step {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 500;
}

.ecac-co-step--done {
	color: var(--ecac-sf-muted, #64748b);
}

.ecac-co-step--current {
	color: var(--ecac-sf-ink, #0f172a);
	font-weight: 600;
}

.ecac-co-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 700;
}

.ecac-co-step--done .ecac-co-step-num {
	background: rgba(124, 58, 237, 0.15);
	color: var(--ecac-sf-brand, #7c3aed);
}

.ecac-co-step--current .ecac-co-step-num {
	background: var(--ecac-sf-brand, #7c3aed);
	color: #fff;
}

.ecac-co-step-div {
	opacity: 0.35;
	user-select: none;
}

.ecac-co-grid {
	display: grid;
	gap: 2rem 2.5rem;
	align-items: start;
}

@media (min-width: 1024px) {
	.ecac-co-grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	.ecac-co-aside {
		order: 2;
	}

	.ecac-co-main {
		order: 1;
	}

	.ecac-co-aside {
		position: sticky;
		top: 1.25rem;
		align-self: start;
	}
}

/* Smal scherm: eerst factuur-/verzendformulier, daarna samenvatting (logische bestelstap). */
@media (max-width: 1023.98px) {
	.ecac-co-grid {
		gap: 1.75rem;
	}

	.ecac-co-main {
		order: 1;
	}

	.ecac-co-aside {
		order: 2;
	}
}

.ecac-co-order-card {
	border: 1px solid var(--ecac-sf-line, #e2e8f0);
	border-radius: 1rem;
	background: #fff;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
	overflow: hidden;
}

.ecac-co-order-head {
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--ecac-sf-line, #e2e8f0);
	background: rgba(248, 250, 252, 0.65);
}

.ecac-co-order-title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--ecac-sf-ink, #0f172a);
}

.ecac-co-order-meta {
	margin: 0.25rem 0 0;
	font-size: 0.75rem;
	color: var(--ecac-sf-muted, #64748b);
}

.ecac-co-lines {
	list-style: none;
	margin: 0;
	padding: 1rem 1.25rem 1.25rem;
}

.ecac-co-line {
	border-bottom: 1px solid var(--ecac-sf-line, #e2e8f0);
	padding: 1rem 0;
}

.ecac-co-line:first-child {
	padding-top: 0;
}

.ecac-co-line:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.ecac-co-upsells {
	margin: 0;
	padding: 1rem 1.25rem 1.25rem;
	border-top: 1px solid var(--ecac-sf-line, #e2e8f0);
}

.ecac-co-upsells__title {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ecac-sf-ink, #0f172a);
}

.ecac-co-upsells__sub {
	margin: 0.2rem 0 0;
	font-size: 0.75rem;
	color: var(--ecac-sf-muted, #64748b);
}

.ecac-co-upsells__list {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.ecac-co-upsell {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem 0.75rem;
	margin: 0;
	padding: 0.65rem 0.75rem;
	border-radius: 0.75rem;
	border: 1px solid color-mix(in srgb, var(--ecac-sf-line, #e2e8f0) 90%, transparent);
	background: color-mix(in srgb, var(--ecac-sf-line, #e2e8f0) 12%, #fff);
}

.ecac-co-upsell__link {
	display: flex;
	flex: 1 1 12rem;
	min-width: 0;
	align-items: center;
	gap: 0.65rem;
	text-decoration: none;
	color: inherit;
}

.ecac-co-upsell__link:hover .ecac-co-upsell__name {
	text-decoration: underline;
}

.ecac-co-upsell__link:focus-visible {
	outline: 2px solid var(--ecac-sf-brand, #7c3aed);
	outline-offset: 2px;
	border-radius: 0.35rem;
}

.ecac-co-upsell__media {
	flex-shrink: 0;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 0.5rem;
	border: 1px solid var(--ecac-sf-line, #e2e8f0);
	overflow: hidden;
	background: #fff;
}

.ecac-co-upsell__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}

.ecac-co-upsell__ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 1rem;
	font-weight: 700;
	color: var(--ecac-sf-brand, #7c3aed);
	background: rgba(124, 58, 237, 0.08);
}

.ecac-co-upsell__body {
	min-width: 0;
	flex: 1;
}

.ecac-co-upsell__name {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ecac-sf-ink, #0f172a);
}

.ecac-co-upsell__sku {
	margin: 0.2rem 0 0;
	font-size: 0.7rem;
	color: var(--ecac-sf-muted, #64748b);
}

.ecac-co-upsell__price {
	margin: 0.35rem 0 0;
	font-size: 0.8125rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ecac-sf-brand, #7c3aed);
}

.ecac-co-upsell__vat {
	font-weight: 500;
	font-size: 0.7rem;
	color: var(--ecac-sf-muted, #64748b);
}

.ecac-co-upsell__add {
	flex-shrink: 0;
	padding: 0.45rem 0.75rem;
	font-size: 0.75rem;
}

.ecac-co-line__top {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	align-items: flex-start;
}

.ecac-co-line__media {
	flex-shrink: 0;
	width: 4rem;
	height: 4rem;
	border-radius: 12px;
	border: 1px solid var(--ecac-sf-line, #e2e8f0);
	overflow: hidden;
	background: #fff;
}

.ecac-co-line__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}

.ecac-co-line__ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--ecac-sf-brand, #7c3aed);
	background: rgba(124, 58, 237, 0.08);
}

.ecac-co-line__body {
	flex: 1;
	min-width: 12rem;
}

.ecac-co-line__name {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ecac-sf-ink, #0f172a);
}

.ecac-co-line__variant,
.ecac-co-line__sku,
.ecac-co-line__unit {
	margin: 0.25rem 0 0;
	font-size: 0.75rem;
	color: var(--ecac-sf-muted, #64748b);
	line-height: 1.4;
	white-space: pre-wrap;
}

.ecac-co-line__qty {
	margin-top: 0.75rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
}

.ecac-co-line__qty-label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ecac-sf-muted, #64748b);
}

.ecac-co-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--ecac-sf-line, #e2e8f0);
	border-radius: 0.5rem;
	background: #f8fafc;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.ecac-co-qty-dec,
.ecac-co-qty-inc {
	margin: 0;
	padding: 0.4rem 0.65rem;
	border: none;
	background: transparent;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	color: var(--ecac-sf-ink, #0f172a);
}

.ecac-co-qty-dec:hover,
.ecac-co-qty-inc:hover {
	background: #fff;
}

.ecac-co-qty-input {
	width: 2.75rem;
	padding: 0.35rem 0.25rem;
	border: none;
	border-left: 1px solid var(--ecac-sf-line, #e2e8f0);
	border-right: 1px solid var(--ecac-sf-line, #e2e8f0);
	background: transparent;
	text-align: center;
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

.ecac-co-line__stock-hint {
	font-size: 0.6875rem;
	color: var(--ecac-sf-muted, #64748b);
}

.ecac-co-line__remove {
	margin-left: auto;
	align-self: center;
	padding: 0.35rem 0.5rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--ecac-sf-muted, #64748b);
	background: transparent;
	border: none;
	border-radius: 0.375rem;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ecac-co-line__remove:hover:not(:disabled) {
	color: #b91c1c;
}

.ecac-co-line__remove:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.ecac-co-line__total {
	margin: 0;
	width: 100%;
	text-align: right;
	font-size: 0.9375rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--ecac-sf-ink, #0f172a);
}

@media (min-width: 640px) {
	.ecac-co-line__total {
		width: auto;
		margin-left: auto;
		align-self: flex-start;
	}
}

.ecac-co-main .ecac-co-form-title {
	margin: 0 0 1rem;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--ecac-sf-ink, #0f172a);
}

.ecac-co-main .ecac-checkout-form .ecac-input,
.ecac-co-main .ecac-co-account-panel .ecac-input {
	max-width: none;
	background: #fafafa;
}

/*
 * Mobiel / e-commerce: geen iOS-zoom op focus (16px inputs), grotere tikdoelen,
 * safe areas (notch / home-indicator).
 */
@media (max-width: 639.98px) {
	.ecac-checkout-form .ecac-input,
	.ecac-co-account-panel .ecac-input,
	.ecac-sf-panel .ecac-input--disc,
	.ecac-sf-select,
	.ecac-sf-panel .ecac-cart-qty,
	.ecac-sf-maatwerk__num,
	.ecac-sf-maatwerk__thick-input,
	.ecac-co-qty-input {
		font-size: 1rem;
	}

	.ecac-sf-qty__btn {
		min-width: 2.75rem;
		min-height: 2.75rem;
		padding: 0.5rem 0;
	}

	.ecac-co-qty-dec,
	.ecac-co-qty-inc {
		min-width: 2.75rem;
		min-height: 2.75rem;
		padding: 0.5rem 0.75rem;
		box-sizing: border-box;
	}

	.ecac-sf-btn {
		min-height: 2.75rem;
		box-sizing: border-box;
	}

	.ecac-co-btn:not(.ecac-co-upsell__add) {
		min-height: 2.75rem;
		box-sizing: border-box;
	}

	.ecac-co-btn--wide {
		min-height: 3rem;
	}

	.ecac-sf-pdp-page {
		padding-left: max(1rem, env(safe-area-inset-left, 0px));
		padding-right: max(1rem, env(safe-area-inset-right, 0px));
		padding-bottom: max(3rem, calc(2rem + env(safe-area-inset-bottom, 0px)));
	}

	.ecac-co-page-inner {
		padding-left: max(1rem, env(safe-area-inset-left, 0px));
		padding-right: max(1rem, env(safe-area-inset-right, 0px));
		padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
	}

	.ecac-co-site-header__inner {
		padding-left: max(1rem, env(safe-area-inset-left, 0px));
		padding-right: max(1rem, env(safe-area-inset-right, 0px));
	}

	.ecac-co-line__body {
		min-width: 0;
	}

	.ecac-co-line__name {
		overflow-wrap: anywhere;
	}

	.ecac-native-btn {
		min-height: 2.75rem;
		box-sizing: border-box;
	}
}

/* Zwevende link naar winkelwagen (zelfde mand als PDP) */
.ecac-float-cart {
	position: fixed;
	bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
	right: max(1.25rem, env(safe-area-inset-right, 0px));
	z-index: 99990;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.35rem;
	height: 3.35rem;
	border-radius: 50%;
	background: var(--ecac-sf-card, #fff);
	box-shadow: 0 4px 24px rgba(15, 23, 42, 0.12);
	border: 1px solid var(--ecac-sf-line, #e2e8f0);
	text-decoration: none;
	color: var(--ecac-sf-ink, #0f172a);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ecac-float-cart:hover {
	transform: scale(1.04);
	box-shadow: 0 6px 28px rgba(15, 23, 42, 0.16);
	color: var(--ecac-sf-ink, #0f172a);
}
.ecac-float-cart__icon {
	font-size: 1.35rem;
	line-height: 1;
}
.ecac-float-cart__badge {
	position: absolute;
	top: 0.05rem;
	right: 0.05rem;
	min-width: 1.5rem;
	height: 1.5rem;
	padding: 0 0.35rem;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.875rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: #fff;
	background: var(--ecac-sf-brand, #e11d48);
	border-radius: 999px;
	border: 2px solid var(--ecac-sf-card, #fff);
	box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
}
.ecac-float-cart__badge[hidden],
.ecac-storefront-cart-badge[hidden] {
	display: none !important;
}

/* Header / navigatie: mandlink met teller (shortcode [ecom_cart_link]) */
.ecac-header-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	text-decoration: none;
	color: var(--ecac-sf-ink, #0f172a);
	line-height: 1;
	vertical-align: middle;
	box-sizing: border-box;
}

.ecac-header-cart:hover,
.ecac-header-cart:focus-visible {
	color: var(--ecac-sf-brand, #6c5ce7);
}

.ecac-header-cart--icon-only {
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.35rem;
}

.ecac-header-cart__svg {
	display: block;
}

.ecac-header-cart__label {
	font-size: 0.9375rem;
	font-weight: 600;
	white-space: nowrap;
}

.ecac-header-cart__badge {
	position: absolute;
	top: 0.05rem;
	right: 0.05rem;
	min-width: 1.35rem;
	height: 1.35rem;
	padding: 0 0.28rem;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.6875rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: #fff;
	background: var(--ecac-sf-brand, #e11d48);
	border-radius: 999px;
	border: 2px solid var(--ecac-sf-card, #fff);
	box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
}

.ecac-header-cart--with-label .ecac-header-cart__badge {
	top: 0;
	right: -25px;
}

/* Mobiel: geen tekst “Winkelwagen”, alleen icoon + teller (ook bij show_label="1"). */
@media (max-width: 639.98px) {
	.ecac-header-cart--with-label .ecac-header-cart__label {
		display: none !important;
	}

	.ecac-header-cart--with-label {
		gap: 0;
		min-width: 2.75rem;
		min-height: 2.75rem;
		padding: 0.35rem;
		justify-content: center;
	}

	.ecac-header-cart--with-label .ecac-header-cart__badge {
		top: 0.05rem;
		right: 0.05rem;
	}
}

/* ---- WordPress checkout-flow: zelfde schil als vitrine (localhost:5173 checkout) ---- */
main.ecac-sf--checkout-flow.ecac-sf-page {
	--ecac-sf-page-bg: transparent;
	background: transparent !important;
	min-height: 100vh;
}

/* Oxygen/Breakdance-overlay: geen dubbele stapbalk; ruimte zit op .ecac-co-page-shell */
body.ecac-is-vitrine-url .ecac-co-site-header,
body.ecac-has-native-vitrine-shortcode .ecac-co-site-header {
	display: none !important;
}

.ecac-co-loading {
	margin: 2rem auto;
	max-width: 42rem;
	padding: 1.25rem 1.5rem;
	text-align: center;
	font-size: 0.9375rem;
	color: var(--ecac-sf-muted, #71717a);
}

.ecac-co-site-header {
	border-bottom: 1px solid rgba(228, 231, 235, 0.35);
	background: transparent;
}

.ecac-co-site-header__inner {
	max-width: var(--ecac-storefront-inner-max-width, var(--ecac-storefront-align-max));
	margin: 0 auto;
	padding: 1rem 1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem 1.5rem;
}

.ecac-co-site-brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	color: var(--ecac-sf-ink, #0f172a);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.ecac-co-site-logo {
	max-height: 2.25rem;
	width: auto;
	object-fit: contain;
}

.ecac-co-site-steps {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	font-size: 0.8125rem;
}

.ecac-co-site-step {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 500;
	color: var(--ecac-sf-muted, #64748b);
}

.ecac-co-site-step--active {
	color: var(--ecac-sf-ink, #0f172a);
	font-weight: 600;
}

.ecac-co-site-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 700;
}

.ecac-co-site-step--muted .ecac-co-site-step-num {
	background: #f4f4f5;
	color: #71717a;
}

.ecac-co-site-step--active .ecac-co-site-step-num {
	background: var(--ecac-sf-brand, #6c5ce7);
	color: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.ecac-co-site-step-div {
	color: #d4d4d8;
	user-select: none;
}

.ecac-co-page-shell {
	padding-bottom: 2.5rem;
}

.ecac-co-page-inner {
	max-width: var(--ecac-storefront-inner-max-width, var(--ecac-storefront-align-max));
	margin: 0 auto;
	padding: 1.5rem 1rem 0;
}

body.ecac-is-vitrine-url .ecac-co-page-inner {
	max-width: 100%;
	margin: 0;
	padding: 0;
}

@media (min-width: 640px) {
	.ecac-co-page-inner {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	body.ecac-is-vitrine-url .ecac-co-page-inner {
		padding-left: 0;
		padding-right: 0;
	}
}

.ecac-co-back-link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--ecac-sf-brand, #6c5ce7);
	text-decoration: none;
}

.ecac-co-back-link:hover {
	color: var(--ecac-sf-brand-hover, #5b4dc7);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ecac-sf-panel--checkout-flow {
	padding: 0;
	background: transparent;
	border: none;
	box-shadow: none;
}

.ecac-co-layout {
	margin: 0;
}

.ecac-co-page-title {
	margin: 0 0 1.5rem;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #18181b;
}

@media (min-width: 640px) {
	.ecac-co-page-title {
		font-size: 1.875rem;
	}
}

/* Geen vaste 42rem-cap: grid (7fr / 5fr) gebruikt dan de volle bandbreedte binnen `.ecac-co-page-inner` / `.ecac-sf-inline`. */
.ecac-co-main {
	min-width: 0;
	max-width: none;
}

.ecac-co-order-card {
	box-shadow:
		0 10px 40px -10px rgba(15, 23, 42, 0.12),
		0 4px 12px -4px rgba(0, 0, 0, 0.06);
}

.ecac-co-order-head {
	background: rgba(250, 250, 250, 0.95);
	border-bottom-color: #f4f4f5;
}

.ecac-co-line__media {
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 0.75rem;
}

.ecac-co-line__title-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0.35rem 1rem;
}

.ecac-co-line__title-row .ecac-co-line__name {
	margin: 0;
	flex: 1;
	min-width: 0;
}

.ecac-co-line__title-row .ecac-co-line__total {
	margin: 0;
	width: auto;
	text-align: right;
	font-size: 0.875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--ecac-sf-ink, #0f172a);
}

.ecac-co-line__top .ecac-co-line__total {
	display: none;
}

.ecac-co-order-extras {
	padding: 1.25rem 1.25rem 1.5rem;
	border-top: 1px solid #f4f4f5;
}

.ecac-co-disc-flex {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

@media (min-width: 640px) {
	.ecac-co-disc-flex {
		flex-direction: row;
		align-items: stretch;
	}
}

.ecac-input--disc {
	flex: 1;
	min-width: 0;
	text-transform: uppercase;
}

.ecac-input--disc::placeholder {
	text-transform: none;
}

.ecac-co-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.625rem 1rem;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	border: 1px solid transparent;
	cursor: pointer;
	transition:
		background 0.15s ease,
		color 0.15s ease;
}

.ecac-co-btn--primary {
	background: var(--ecac-sf-brand, #6c5ce7);
	color: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.ecac-co-btn--primary:hover:not(:disabled) {
	background: var(--ecac-sf-brand-hover, #5b4dc7);
}

.ecac-co-btn--primary:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.ecac-co-btn--wide {
	width: 100%;
	margin-top: 1rem;
	padding-top: 0.875rem;
	padding-bottom: 0.875rem;
	border-radius: 0.75rem;
	font-weight: 700;
}

.ecac-co-totals {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid #f4f4f5;
	font-size: 0.875rem;
}

.ecac-co-tot-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: 0.65rem;
	color: #18181b;
}

.ecac-co-tot-row span:first-child {
	color: #71717a;
}

.ecac-co-tot-row--grand {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid #e4e4e7;
	font-size: 1rem;
	font-weight: 700;
}

.ecac-co-tot-row--grand span:first-child {
	color: #18181b;
}

.ecac-co-tot-disc {
	color: #15803d;
	font-weight: 600;
}

.ecac-co-totals-msg {
	margin: 0;
	font-size: 0.8125rem;
	color: #b45309;
}

.ecac-co-lock-note {
	margin: 1rem 0 0;
	text-align: center;
	font-size: 0.75rem;
	color: #71717a;
	line-height: 1.45;
}

.ecac-co-card {
	border: 1px solid #e4e4e7;
	border-radius: 1rem;
	background: #fff;
	padding: 1.5rem 1.25rem;
	margin-bottom: 1.5rem;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.ecac-co-card-title {
	margin: 0 0 1rem;
	font-size: 1rem;
	font-weight: 600;
	color: #18181b;
}

.ecac-co-card-body {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Checkout: klantaccount (compact, zelfde kaartstijl als factuur) */
.ecac-co-account-panel {
	/* Lichte tint, geen harde blauwe box */
	border-color: #e4e4e7;
	background: #fafafa;
}

.ecac-co-account-guest__intro {
	margin: 0 0 1rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: #52525b;
}

.ecac-co-create-account-label {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #18181b;
	cursor: pointer;
}

.ecac-co-create-account-fields {
	padding-top: 0.65rem;
	margin-top: 0.35rem;
	margin-bottom: 0.35rem;
}

.ecac-co-account-login-row {
	margin: 0.85rem 0 0;
	font-size: 0.875rem;
}

.ecac-co-account-login-link {
	color: var(--ecac-sf-brand, #6c5ce7);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ecac-co-account-login-link:hover {
	opacity: 0.9;
}

.ecac-co-account-authed__text {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	color: #52525b;
	line-height: 1.5;
}

.ecac-co-account-authed__actions {
	margin: 0;
	font-size: 0.875rem;
}

.ecac-co-account-authed__link {
	color: var(--ecac-sf-brand, #6c5ce7);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ecac-co-account-authed__logout {
	margin-left: 0.35rem;
	padding: 0;
	border: none;
	background: none;
	font: inherit;
	color: #52525b;
	text-decoration: underline;
	cursor: pointer;
}

.ecac-co-account-authed__logout:hover {
	color: #18181b;
}

.ecac-fg-req {
	color: #dc2626;
}

.ecac-fg-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 500;
	color: #3f3f46;
	margin-bottom: 0.35rem;
}

.ecac-checkout-form .ecac-fg,
.ecac-co-account-panel .ecac-fg {
	display: block;
	margin-bottom: 1rem;
}

.ecac-checkout-form .ecac-input,
.ecac-co-account-panel .ecac-input {
	width: 100%;
	padding: 0.625rem 0.875rem;
	border: 1px solid #e4e4e7;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	box-sizing: border-box;
}

.ecac-checkout-form .ecac-input:focus,
.ecac-co-account-panel .ecac-input:focus {
	outline: none;
	border-color: color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 45%, #e4e4e7);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 12%, transparent);
}

.ecac-co-field-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 1rem;
}

@media (min-width: 640px) {
	.ecac-co-field-row {
		grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
	}
}

.ecac-co-pick-row {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin-bottom: 1.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: #18181b;
	cursor: pointer;
}

.ecac-co-pick-row input {
	width: 1rem;
	height: 1rem;
	accent-color: var(--ecac-sf-brand, #6c5ce7);
}

.ecac-co-pickup-loc-wrap .ecac-co-pickup-loc-detail {
	margin-top: 0.5rem;
	padding: 0.65rem 0.75rem;
	border-radius: 0.5rem;
	border: 1px solid #e4e4e7;
	background: #fafafa;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: #3f3f46;
	white-space: pre-line;
}

.ecac-co-ship-fieldset {
	border: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.ecac-co-ship-legend {
	padding: 0;
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: #71717a;
}

.ecac-co-ship-empty {
	margin: 0;
	font-size: 0.875rem;
	color: #b45309;
}

.ecac-co-ship-option {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
	padding: 0.75rem 1rem;
	border: 1px solid #e4e4e7;
	border-radius: 0.75rem;
	background: #fff;
	cursor: pointer;
	transition:
		border-color 0.15s ease,
		background 0.15s ease,
		box-shadow 0.15s ease;
}

.ecac-co-ship-option:last-child {
	margin-bottom: 0;
}

.ecac-co-ship-option input {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	accent-color: var(--ecac-sf-brand, #6c5ce7);
}

.ecac-co-ship-option__name {
	flex: 1;
	font-weight: 600;
	font-size: 0.875rem;
	color: #18181b;
}

.ecac-co-ship-option__amt {
	font-size: 0.875rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: #3f3f46;
}

.ecac-co-ship-option--on {
	border-color: color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 50%, #e4e4e7);
	background: color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 6%, #fff);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 20%, transparent);
}

.ecac-co-ship-foot {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	color: #52525b;
}

.ecac-co-ship-foot strong {
	color: #18181b;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ecac-co-terms {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	padding: 1rem 1.25rem;
	border: 1px solid #e4e4e7;
	border-radius: 0.75rem;
	background: #fff;
	font-size: 0.875rem;
	line-height: 1.45;
	color: #27272a;
	cursor: pointer;
	margin-bottom: 1rem;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.ecac-co-terms input {
	margin-top: 0.15rem;
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	accent-color: var(--ecac-sf-brand, #6c5ce7);
}

.ecac-co-err {
	margin-top: 0.5rem;
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
	font-size: 0.875rem;
}

.ecac-co-step--done .ecac-co-step-num {
	background: color-mix(in srgb, var(--ecac-sf-brand, #6c5ce7) 15%, #fff);
	color: var(--ecac-sf-brand, #6c5ce7);
}

/* Na Mollie: /bestelling/{orderId}/ */
.ecac-sf--order-thanks {
	min-height: 60vh;
	padding: 2rem 1rem 3rem;
	background: transparent;
}

.ecac-ot-wrap {
	width: 100%;
	max-width: var(--ecac-storefront-inner-max-width, var(--ecac-storefront-align-max));
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.ecac-ot-inner {
	text-align: center;
}

.ecac-ot-brand {
	margin-bottom: 1.25rem;
}

.ecac-ot-logo {
	max-height: 3rem;
	width: auto;
	object-fit: contain;
}

.ecac-ot-loading {
	margin: 2rem 0;
	color: #71717a;
	font-size: 0.9375rem;
}

.ecac-ot-card {
	text-align: center;
	padding: 1.75rem clamp(1rem, 4vw, 1.75rem);
	width: 100%;
	max-width: min(42rem, 100%);
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	border-radius: 1rem;
	border: 1px solid #e4e4e7;
	background: #fff;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.ecac-ot-card--paid {
	border-color: #a7f3d0;
	background: #ecfdf5;
}

.ecac-ot-card--pending {
	border-color: #bae6fd;
	background: #f0f9ff;
}

.ecac-ot-card--failed {
	border-color: #fecaca;
	background: #fef2f2;
}

.ecac-ot-card--cancelled {
	border-color: #fde68a;
	background: #fffbeb;
}

.ecac-ot-title {
	margin: 0 0 0.75rem;
	font-size: 1.375rem;
	font-weight: 700;
	color: #18181b;
}

.ecac-ot-status {
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
	color: #52525b;
}

.ecac-ot-poll,
.ecac-ot-paynote {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	color: #52525b;
	text-align: center;
}

.ecac-ot-paynote {
	background: rgba(255, 255, 255, 0.75);
	border: 1px solid #fde68a;
	border-radius: 0.5rem;
	padding: 0.65rem 0.75rem;
	color: #422006;
}

.ecac-ot-retry {
	margin: 1rem 0 0;
}

.ecac-ot-ordnum {
	margin: 1rem 0 0.35rem;
	font-size: 1rem;
	font-weight: 600;
	color: #18181b;
}

.ecac-ot-brandnum {
	color: var(--ecac-sf-brand, #dc2626);
	font-weight: 700;
	font-family: ui-monospace, monospace;
}

.ecac-ot-total {
	margin: 0.75rem 0 0;
	font-size: 1.05rem;
	color: #18181b;
}

.ecac-ot-mono {
	font-family: ui-monospace, monospace;
}

.ecac-ot-inv {
	margin: 1.25rem 0 0;
	font-size: 0.875rem;
	line-height: 1.6;
}

.ecac-ot-inv__a {
	font-weight: 600;
	color: var(--ecac-sf-brand, #dc2626);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ecac-ot-inv__a--primary {
	font-weight: 700;
}

.ecac-ot-inv__sep {
	color: #a1a1aa;
	margin: 0 0.15rem;
}

.ecac-ot-back {
	margin: 1.5rem 0 0;
}

.ecac-ot-back__a {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ecac-sf-brand, #dc2626);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ecac-ot-err {
	margin: 1rem 0;
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
	font-size: 0.875rem;
}

/* —— Booking (PDP + Mijn account) —— */
.ecac-sf-booking {
	margin-top: 1rem;
}

.ecac-sf-booking__card {
	border: 1px solid color-mix(in srgb, var(--ecac-sf-brand, #dc2626) 25%, #e4e4e7);
	border-radius: 1rem;
	background: color-mix(in srgb, var(--ecac-sf-brand-soft, rgba(220, 38, 38, 0.12)) 40%, #fff);
	padding: 1.1rem 1.15rem;
}

.ecac-sf-booking__title {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 700;
	color: #18181b;
}

.ecac-sf-booking__hint {
	margin: 0.35rem 0 0;
	font-size: 0.8125rem;
	color: #71717a;
}

.ecac-sf-booking__open {
	margin-top: 0.85rem;
	width: 100%;
}

.ecac-sf-booking-modal-open {
	overflow: hidden;
}

.ecac-sf-booking-modal {
	position: fixed;
	inset: 0;
	z-index: 100050;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0;
}

@media (min-width: 640px) {
	.ecac-sf-booking-modal {
		align-items: center;
		padding: 1rem;
	}
}

.ecac-sf-booking-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}

.ecac-sf-booking-modal__panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 32rem;
	max-height: 92vh;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e4e4e7;
	border-radius: 1rem 1rem 0 0;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	overflow: hidden;
}

@media (min-width: 640px) {
	.ecac-sf-booking-modal__panel {
		border-radius: 1rem;
	}
}

.ecac-sf-booking-modal__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 1rem 1.15rem;
	border-bottom: 1px solid #e4e4e7;
}

.ecac-sf-booking-modal__title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	color: #18181b;
}

.ecac-sf-booking-modal__sub {
	margin: 0.2rem 0 0;
	font-size: 0.75rem;
	color: #71717a;
}

.ecac-sf-booking-modal__close {
	border: 0;
	background: transparent;
	font-size: 1.5rem;
	line-height: 1;
	color: #71717a;
	cursor: pointer;
	padding: 0.15rem 0.35rem;
	border-radius: 0.5rem;
}

.ecac-sf-booking-modal__close:hover {
	background: #f4f4f5;
	color: #18181b;
}

.ecac-sf-booking-modal__body {
	padding: 1rem 1.15rem;
	overflow-y: auto;
}

.ecac-sf-booking-modal__example {
	margin: 0 0 0.85rem;
	font-size: 0.75rem;
	line-height: 1.5;
	color: #71717a;
}

.ecac-sf-booking__dt {
	width: 100%;
	margin: 0.35rem 0 0.85rem;
	min-height: 2.75rem;
	border: 1px solid #d4d4d8;
	border-radius: 0.75rem;
	padding: 0.55rem 0.75rem;
	font-size: 1rem;
}

.ecac-sf-booking__preview {
	margin-top: 0.5rem;
	padding: 0.75rem 0.85rem;
	border-radius: 0.75rem;
	background: #fafafa;
	border: 1px solid #e4e4e7;
	font-size: 0.875rem;
}

.ecac-sf-booking__preview-k {
	color: #71717a;
}

.ecac-sf-booking__preview-total {
	margin: 0.35rem 0 0;
	font-size: 1rem;
}

.ecac-sf-booking__err {
	margin: 0.65rem 0 0;
	padding: 0.55rem 0.7rem;
	border-radius: 0.65rem;
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
	font-size: 0.8125rem;
}

.ecac-sf-booking__loading {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	color: #71717a;
}

.ecac-sf-booking-modal__foot {
	padding: 0.85rem 1.15rem 1.1rem;
	border-top: 1px solid #e4e4e7;
}

.ecac-sf-booking-modal .ecac-sf-btn--primary {
	background: var(--ecac-sf-brand, #6c5ce7);
	color: #fff;
	border-color: var(--ecac-sf-brand-hover, #5b4dc7);
}

.ecac-sf-booking-modal .ecac-sf-btn--primary:hover:not(:disabled) {
	background: var(--ecac-sf-brand-hover, #5b4dc7);
	color: #fff;
}

.ecac-sf-booking-modal__foot .ecac-sf-btn {
	width: 100%;
}

.ecac-account__link-btn {
	border: 0;
	background: transparent;
	padding: 0;
	font: inherit;
	font-weight: 600;
	color: var(--ecac-sf-brand, #dc2626);
	cursor: pointer;
	text-align: left;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ecac-account__sub {
	margin: 0.15rem 0 0;
	font-size: 0.75rem;
	color: #71717a;
}

.ecac-account__booking-pay {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.85rem;
}

.ecac-account__panel-head {
	margin-bottom: 0.75rem;
}

.ecac-account__panel-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: #18181b;
}

.ecac-account__panel-sub {
	margin: 0.2rem 0 0;
	font-size: 0.8125rem;
	color: #71717a;
}

/* Publiek formulier — [ecom_form slug="…"] */
.ecac-shop-form {
	width: 100%;
	max-width: 52rem;
	margin: 1.5rem auto;
	font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	color: #1a1d1f;
}

.ecac-shop-form__title {
	margin: 0 0 1rem;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
}

.ecac-shop-form__field {
	margin-bottom: 1rem;
}

.ecac-shop-form__label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.875rem;
	font-weight: 600;
}

.ecac-shop-form__req {
	color: #dc2626;
}

.ecac-shop-form__input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.625rem 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.4;
	border: 1px solid #d1d5db;
	border-radius: 0.75rem;
	background: #fff;
}

.ecac-shop-form__input:focus {
	outline: none;
	border-color: var(--ecac-sf-brand, #6c5ce7);
	box-shadow: 0 0 0 1px var(--ecac-sf-brand, #6c5ce7);
}

.ecac-shop-form__submit {
	display: block;
	width: 100%;
	margin-top: 0.5rem;
	padding: 0.75rem 1rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #fff;
	background: var(--ecac-sf-brand, #6c5ce7);
	border: none;
	border-radius: 0.75rem;
	cursor: pointer;
	transition: background 0.15s ease;
}

.ecac-shop-form__submit:hover:not(:disabled) {
	background: var(--ecac-sf-brand-hover, #5b4dc7);
}

.ecac-shop-form__submit:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

.ecac-shop-form__error {
	margin: 0.75rem 0 0;
	padding: 0.625rem 0.75rem;
	font-size: 0.875rem;
	color: #991b1b;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 0.5rem;
}

.ecac-shop-form__success {
	margin: 0.75rem 0 0;
	padding: 0.625rem 0.75rem;
	font-size: 0.875rem;
	color: #166534;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 0.5rem;
}

.ecac-shop-form__loading {
	margin: 0;
	font-size: 0.9375rem;
	color: #71717a;
}

.ecac-shop-form__hp {
	position: absolute;
	left: -9999px;
	width: 0;
	height: 0;
	opacity: 0;
	pointer-events: none;
}

.ecac-shop-form--split {
	max-width: min(90rem, 100%);
}

.ecac-shop-form__split {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #e5e7eb;
	border-radius: 1rem;
	background: #fff;
	box-shadow: 0 1px 3px rgb(0 0 0 / 0.06);
}

/* auto: stack mobile, side-by-side from md */
.ecac-shop-form__split--auto .ecac-shop-form__step-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	max-height: 13rem;
}

@media (min-width: 768px) {
	.ecac-shop-form__split--auto {
		flex-direction: row;
		min-height: 28rem;
	}

	.ecac-shop-form__split--auto .ecac-shop-form__step-image {
		width: 42%;
		max-height: none;
		aspect-ratio: auto;
		min-height: 28rem;
	}
}

/* stack: always image on top */
.ecac-shop-form__split--stack .ecac-shop-form__step-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	max-height: 16rem;
}

/* side: side-by-side on sm+, stacked on very small screens */
.ecac-shop-form__split--side .ecac-shop-form__step-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	max-height: 13rem;
}

@media (min-width: 640px) {
	.ecac-shop-form__split--side {
		flex-direction: row;
		min-height: 26rem;
	}

	.ecac-shop-form__split--side .ecac-shop-form__step-image {
		width: 42%;
		max-height: none;
		aspect-ratio: auto;
		min-height: 26rem;
	}
}

/* desktop-only: hide image on mobile */
.ecac-shop-form__split--desktop-only .ecac-shop-form__step-image {
	display: none;
}

@media (min-width: 1024px) {
	.ecac-shop-form__split--desktop-only {
		flex-direction: row;
		min-height: 28rem;
	}

	.ecac-shop-form__split--desktop-only .ecac-shop-form__step-image {
		display: block;
		width: 40%;
		min-height: 28rem;
		aspect-ratio: auto;
		max-height: none;
	}
}

.ecac-shop-form__step-image {
	position: relative;
	flex-shrink: 0;
	overflow: hidden;
	background: #f3f4f6;
}

.ecac-shop-form__step-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ecac-shop-form__step-body {
	flex: 1;
	min-width: 0;
	padding: 1.25rem 1.5rem;
}

@media (min-width: 640px) {
	.ecac-shop-form__step-body {
		padding: 1.5rem 2rem;
	}
}

.ecac-shop-form__step-body .ecac-shop-form__form {
	margin: 0;
}

/* Publieke landingspagina — [ecom_page slug="…"] */
.ecac-shop-page {
	max-width: 72rem;
	margin-left: auto;
	margin-right: auto;
	padding: 1rem 1rem 2rem;
}

.ecac-shop-page__title {
	margin: 0 0 1.25rem;
	font-size: 1.5rem;
	font-weight: 700;
}

.ecac-shop-page__loading,
.ecac-shop-page__error {
	padding: 1rem;
	text-align: center;
	color: var(--ecac-muted, #64748b);
}

.ecac-page-blocks {
	--page-content-max: 64rem;
	--page-block-radius: 1rem;
	--page-block-radius-sm: 0.75rem;
	--page-btn-radius: 9999px;
}

.ecac-page-blocks--square .ecac-page-block--hero,
.ecac-page-blocks--square .ecac-page-block--hero img,
.ecac-page-blocks--square .ecac-page-block--image img,
.ecac-page-blocks--square .ecac-page-block--faq,
.ecac-page-blocks--square .ecac-page-block--embed-form,
.ecac-page-blocks--square .ecac-page-block__cta,
.ecac-page-blocks--square .ecac-page-block__hero-cta-row .ecac-page-block__cta {
	border-radius: 0 !important;
}

.ecac-page-block {
	margin-bottom: 2rem;
}

.ecac-page-block__inner {
	max-width: var(--page-content-max, 64rem);
	margin-left: auto;
	margin-right: auto;
}

.ecac-page-block--width-site:not(.ecac-page-block--hero) {
	max-width: var(--page-content-max, 64rem);
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

.ecac-page-block--width-full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.ecac-page-block--height-compact:not(.ecac-page-block--hero) {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.ecac-page-block--height-standard:not(.ecac-page-block--hero) {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

.ecac-page-block--height-tall:not(.ecac-page-block--hero) {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.ecac-page-block--hero-split.ecac-page-block--height-compact {
	min-height: clamp(16rem, 45vh, 22rem);
}

.ecac-page-block--hero-split.ecac-page-block--height-standard {
	min-height: clamp(20rem, 65vh, 28rem);
}

.ecac-page-block--hero-split.ecac-page-block--height-tall {
	min-height: clamp(24rem, 78vh, 33.6rem);
}

.ecac-page-block--hero-split-full {
	position: relative;
	padding: 0;
	border-radius: 0;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow: hidden;
}

.ecac-page-block__hero-split-bg-left {
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 50%;
}

@media (min-width: 1024px) {
	.ecac-page-block__hero-split-bg-left {
		display: block;
	}
}

.ecac-page-block__hero-split-media-desk {
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 50%;
	overflow: hidden;
}

@media (min-width: 1024px) {
	.ecac-page-block__hero-split-media-desk {
		display: block;
	}

	.ecac-page-block__hero-split-media-desk .ecac-page-block__hero-photo {
		height: 100%;
		width: 100%;
		object-fit: cover;
		object-position: center;
	}
}

.ecac-page-block__hero-split-site {
	position: relative;
	z-index: 1;
	display: grid;
	min-height: inherit;
	grid-template-columns: 1fr;
	padding-left: 1rem;
	padding-right: 1rem;
}

@media (min-width: 640px) {
	.ecac-page-block__hero-split-site {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.ecac-page-block__hero-split-site {
		grid-template-columns: 1fr 1fr;
	}
}

.ecac-page-block__hero-copy-text {
	display: flex;
	max-width: 36rem;
	flex-direction: column;
	justify-content: flex-end;
	padding: 2rem 0 2.5rem;
}

@media (min-width: 640px) {
	.ecac-page-block__hero-copy-text {
		padding: 2.5rem 0 3rem;
	}
}

.ecac-page-block__hero-copy-text h1 {
	margin: 0;
	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: 700;
	line-height: 1.05;
	color: #fff;
}

.ecac-page-block__hero-copy-text .ecac-page-block__hero-sub {
	margin: 0.75rem 0 0;
	max-width: 28rem;
	font-size: clamp(1rem, 2.2vw, 1.25rem);
	font-style: italic;
	font-weight: 300;
	color: rgb(255 255 255 / 0.9);
}

.ecac-page-block__hero-split-mobile {
	position: relative;
	min-height: 14rem;
}

@media (min-width: 1024px) {
	.ecac-page-block__hero-split-mobile {
		display: none;
	}
}

.ecac-page-block__hero-split-spacer {
	display: none;
}

@media (min-width: 1024px) {
	.ecac-page-block__hero-split-spacer {
		display: block;
	}
}

.ecac-page-block__hero-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.ecac-page-block--hero-cover.ecac-page-block--height-tall {
	min-height: clamp(21.6rem, 66vh, 31.2rem);
}

.ecac-page-block--hero-centered.ecac-page-block--height-tall {
	min-height: clamp(14.4rem, 50.4vh, 21.6rem);
}

.ecac-page-block--hero-cover.ecac-page-block--height-compact {
	min-height: clamp(14rem, 40vh, 20rem);
}

.ecac-page-block--hero-cover.ecac-page-block--height-standard {
	min-height: clamp(18rem, 55vh, 26rem);
}

.ecac-page-block--hero-cover.ecac-page-block--height-tall {
	min-height: clamp(24rem, 75vh, 38rem);
}

.ecac-page-block--hero-centered.ecac-page-block--height-compact {
	min-height: clamp(10rem, 35vh, 14rem);
}

.ecac-page-block--hero-centered.ecac-page-block--height-standard {
	min-height: clamp(12rem, 42vh, 18rem);
}

.ecac-page-block--hero-centered.ecac-page-block--height-tall {
	min-height: clamp(16rem, 55vh, 24rem);
}

.ecac-page-block--hero {
	padding: 0;
	border-radius: 1rem;
	overflow: hidden;
	background: rgb(var(--sf-brand-soft-rgb, 239 238 255) / 0.6);
}

.ecac-page-block--hero-split {
	min-height: min(28rem, 72vh);
	border-radius: 0;
}

@media (min-width: 640px) {
	.ecac-page-block--hero-split {
		border-radius: 1rem;
	}
}

.ecac-page-block--hero-split .ecac-page-block__hero-split {
	display: grid;
	min-height: inherit;
	height: 100%;
}

@media (min-width: 1024px) {
	.ecac-page-block--hero-split .ecac-page-block__hero-split {
		grid-template-columns: 1fr minmax(0, 1.05fr);
	}
}

.ecac-page-block--hero-split .ecac-page-block__hero-copy {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 2.5rem 1.5rem;
	text-align: left;
	color: #fff;
}

@media (min-width: 640px) {
	.ecac-page-block--hero-split .ecac-page-block__hero-copy {
		padding: 3rem 2.5rem;
	}
}

@media (min-width: 1024px) {
	.ecac-page-block--hero-split .ecac-page-block__hero-copy {
		padding: 4rem 3.5rem;
	}
}

.ecac-page-block--hero-split h1 {
	margin: 0;
	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: 700;
	line-height: 1.05;
	color: #fff;
}

.ecac-page-block__hero-sub {
	margin: 0.75rem 0 0;
	max-width: 28rem;
	font-size: clamp(1rem, 2.2vw, 1.25rem);
	font-style: italic;
	font-weight: 300;
	color: rgb(255 255 255 / 0.9);
}

.ecac-page-block--hero-split .ecac-page-block__hero-media {
	position: relative;
	min-height: 16rem;
	background: rgb(0 0 0 / 0.05);
}

.ecac-page-block__hero-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.ecac-page-block__hero-photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 16rem;
	height: 100%;
	padding: 1rem;
	text-align: center;
	font-size: 0.875rem;
	color: rgb(255 255 255 / 0.7);
	background: rgb(0 0 0 / 0.1);
}

.ecac-page-block--hero-centered,
.ecac-page-block--hero-cover {
	padding: 3rem 1.5rem;
	text-align: center;
	position: relative;
}

.ecac-page-block--hero-cover.ecac-page-block--width-full,
.ecac-page-block--hero-centered.ecac-page-block--width-full {
	padding-left: 0;
	padding-right: 0;
}

.ecac-page-block--hero-cover.ecac-page-block--width-full .ecac-page-block__hero-inner,
.ecac-page-block--hero-centered.ecac-page-block--width-full .ecac-page-block__hero-inner {
	width: 100%;
	min-height: inherit;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: 1rem;
	padding-right: 1rem;
}

@media (min-width: 640px) {
	.ecac-page-block--hero-cover.ecac-page-block--width-full .ecac-page-block__hero-inner,
	.ecac-page-block--hero-centered.ecac-page-block--width-full .ecac-page-block__hero-inner {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

.ecac-page-block--hero-cover {
	min-height: min(24rem, 60vh);
	text-align: left;
}

.ecac-page-block--hero-cover .ecac-page-block__hero-inner {
	position: relative;
	z-index: 1;
}

.ecac-page-block__hero-overlay {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 0.35);
}

.ecac-page-block--hero-centered h1,
.ecac-page-block--hero-cover h1 {
	margin: 0 0 0.5rem;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.ecac-page-block--hero-cover h1,
.ecac-page-block--hero-cover .ecac-page-block__hero-sub {
	color: #fff;
}

.ecac-page-block--textimage .ecac-page-block__inner {
	display: grid;
	gap: 1.5rem;
	align-items: center;
}

@media (min-width: 640px) {
	.ecac-page-block--textimage .ecac-page-block__inner {
		grid-template-columns: 1fr 1fr;
	}
	.ecac-page-block--textimage.ecac-page-block--img-right .ecac-page-block__text {
		order: -1;
	}
}

.ecac-page-block--image img,
.ecac-page-block--textimage img {
	width: 100%;
	border-radius: 0.75rem;
	object-fit: cover;
}

.ecac-page-block__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.625rem 1.25rem;
	border-radius: var(--page-btn-radius, 0.75rem);
	background: var(--page-btn-primary-bg, rgb(var(--sf-brand-rgb, 108 92 231)));
	color: var(--page-btn-primary-text, #fff);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ecac-page-block__cta:hover {
	background: var(
		--page-btn-primary-bg-hover,
		rgb(var(--sf-brand-hover-rgb, 91 76 199) / 1)
	);
}

.ecac-page-block__cta--secondary {
	background: var(--page-btn-secondary-bg, #fff);
	color: var(--page-btn-secondary-text, inherit);
	border: 1px solid var(--page-btn-secondary-border, rgba(0, 0, 0, 0.12));
}

.ecac-page-block__cta--secondary:hover {
	background: var(--page-btn-secondary-bg-hover, rgb(0 0 0 / 0.04));
	border-color: var(--page-btn-secondary-border-hover, var(--page-btn-secondary-border, rgba(0, 0, 0, 0.12)));
}

.ecac-page-block__cta--outline {
	background: transparent;
	color: #fff;
	border: 2px solid rgb(255 255 255 / 0.9);
}

.ecac-page-block__cta--outline:hover {
	background: rgb(255 255 255 / 0.1);
}

.ecac-page-faq {
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 0.75rem;
	padding: 0.75rem 1rem;
	margin-bottom: 0.5rem;
}

.ecac-page-faq summary {
	cursor: pointer;
	font-weight: 600;
}