/**
 * Atelier Stralend – productopties.
 * Gebruikt de kleuren en lettertypes van het theme (theme.json), met vaste kleuren als terugval.
 */

.aso-opties {
	--as-inkt: var(--wp--preset--color--inkt, #2a1633);
	--as-papaver: var(--wp--preset--color--papaver, #d4381e);
	--as-rand: var(--wp--preset--color--rand, #f0dde7);
	--as-veld: #e8dce6;
	--as-zacht: var(--wp--preset--color--tekst-zacht, #4a3a4f);
	--as-gedempt: var(--wp--preset--color--tekst-gedempt, #5e4d63);
	--as-lila: var(--wp--preset--color--lila-zacht, #f7f3ff);
	--as-hand: var(--wp--preset--font-family--hand, "Caveat", cursive);
	display: flex;
	flex-direction: column;
	flex: 1 1 100%;
	gap: 24px;
	width: 100%;
	margin: 8px 0 20px;
	color: var(--as-inkt);
}

.aso-opties [hidden],
.aso-voorbeeld[hidden],
.wp-block-woocommerce-product-image-gallery[hidden],
.woocommerce-product-gallery[hidden] {
	display: none !important;
}

.aso-optie {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.aso-optie > legend {
	float: left;
	width: 100%;
	margin: 0 0 2px;
	padding: 0;
	font-weight: 700;
	font-size: 16px;
}

.aso-optie label,
.aso-optie__kop label {
	font-weight: 700;
	font-size: 16px;
}

.aso-legend-waarde {
	font-weight: 500;
}

.aso-optie__kop {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.aso-teller,
.aso-hulp {
	margin: 0;
	font-size: 13px;
	color: var(--as-gedempt);
}

/* Invoervelden */
.aso-veld {
	box-sizing: border-box;
	width: 100%;
	height: 54px;
	padding: 0 16px;
	border: 2px solid var(--as-veld);
	border-radius: 14px;
	background: #fff;
	color: var(--as-inkt);
	font: inherit;
	font-size: 16px;
	line-height: normal;
}

.aso-veld--sterk {
	border-color: var(--as-inkt);
	font-size: 17px;
}

textarea.aso-veld {
	height: auto;
	padding: 12px 16px;
	line-height: 1.5;
	resize: vertical;
}

.aso-veld:focus {
	border-color: var(--as-inkt);
	outline: none;
}

.aso-rij {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 14px;
}

.aso-rij__veld {
	display: flex;
	flex: 1 1 180px;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

/* Keuzekaarten: zoals op de foto of in een andere stof */
.aso-stofmodus {
	gap: 12px;
}

.aso-keuze {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 76px;
	padding: 14px 18px;
	border: 2px solid var(--as-veld);
	border-radius: 20px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.aso-keuze:hover {
	border-color: #cdbfd0;
}

.aso-keuze:has(input:checked) {
	border-color: var(--as-papaver);
	box-shadow: inset 0 0 0 1px var(--as-papaver);
}

.aso-keuze input,
.aso-optie .aso-keuze input {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 2px solid #b9a9bd;
	border-radius: 999px;
	background: #fff;
	box-shadow: inset 0 0 0 4px #fff;
	appearance: none;
	cursor: pointer;
}

.aso-keuze input:checked {
	border-color: var(--as-papaver);
	background: var(--as-papaver);
}

.aso-keuze input:focus-visible {
	outline: 2px dashed var(--wp--preset--color--papaver, #d4381e);
	outline-offset: 3px;
}

.aso-keuze__tekst {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 4px;
	font-weight: 400;
}

.aso-keuze__tekst strong {
	font-size: 17px;
}

.aso-keuze__tekst span {
	font-size: 14px;
	color: var(--as-zacht);
}

.aso-badge {
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

.aso-badge--groen {
	background: #ddf2e7;
	color: #14613f;
}

.aso-badge--blauw {
	background: #e6e9ff;
	color: #2a3699;
}

/* Stalen */
.aso-stofkiezer--paneel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 16px 12px;
	padding: 22px;
	border-radius: 24px;
	background: var(--as-lila);
}

.aso-stofkiezer--paneel > legend {
	width: auto;
	margin: 0;
}

.aso-stofkiezer--paneel > .aso-stalen,
.aso-stofkiezer--paneel > .aso-klein {
	grid-column: 1 / -1;
}

.aso-stofkiezer__gekozen {
	margin: 0;
	font-size: 15px;
	color: var(--as-zacht);
	text-align: right;
}

.aso-stofkiezer__gekozen strong {
	color: var(--as-inkt);
}

.aso-stalen {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.aso-stalen--groot {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
	gap: 10px;
}

.aso-staal {
	position: relative;
	display: block;
	width: 44px;
	height: 44px;
	cursor: pointer;
}

.aso-stalen--groot .aso-staal {
	width: auto;
	height: auto;
	aspect-ratio: 1;
}

.aso-staal__invoer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.aso-staal__kleur {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border: 3px solid #fff;
	border-radius: 999px;
	background-position: center;
	background-size: cover;
	box-shadow: 0 0 0 1px rgba(42, 22, 51, 0.25);
	transition: box-shadow 0.15s ease;
}

.aso-staal:hover .aso-staal__kleur {
	box-shadow: 0 0 0 2px rgba(42, 22, 51, 0.45);
}

.aso-staal__invoer:checked + .aso-staal__kleur {
	box-shadow: 0 0 0 3px var(--as-inkt);
}

.aso-staal__invoer:focus-visible + .aso-staal__kleur {
	outline: 2px dashed var(--wp--preset--color--papaver, #d4381e);
	outline-offset: 3px;
}

.aso-klein {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--as-zacht);
}

.aso-klein a {
	font-weight: 700;
	color: var(--as-inkt);
}

/* Cadeauverpakking */
.aso-cadeau {
	gap: 12px;
	padding: 18px;
	border: 2px dashed var(--as-rand);
	border-radius: 20px;
}

.aso-vink,
.aso-optie .aso-vink {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 32px;
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
}

.aso-vink input {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--as-papaver);
}

.aso-vink__prijs {
	font-weight: 500;
	color: var(--as-zacht);
}

.aso-kaartje {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.aso-kaartje label {
	font-size: 15px;
	font-weight: 600;
}

/* Melding */
.aso-fout {
	margin: 0 0 12px;
	padding: 12px 16px;
	border-radius: 14px;
	background: #ffe7df;
	color: #8a2412;
	font-size: 15px;
	font-weight: 600;
}

.aso-opties .aso-fout {
	margin: 0;
}

/* Maten als knoppen */
table.variations td.value {
	position: relative;
}

table.variations select.aso-verborgen-keuzelijst,
.aso-verborgen-keuzelijst {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 1px !important;
	min-width: 0 !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	border: 0 !important;
	white-space: nowrap !important;
}

.aso-maten {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.aso-maat {
	min-width: 52px;
	min-height: 44px;
	padding: 0 16px;
	border: 2px solid #e8dce6;
	border-radius: 14px;
	background: #fff;
	color: var(--wp--preset--color--inkt, #2a1633);
	font: inherit;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
}

.aso-maat:hover:not(:disabled) {
	border-color: var(--wp--preset--color--inkt, #2a1633);
}

.aso-maat[aria-pressed="true"] {
	border-color: var(--wp--preset--color--inkt, #2a1633);
	background: var(--wp--preset--color--inkt, #2a1633);
	color: #fff;
}

.aso-maat:disabled {
	opacity: 0.4;
	text-decoration: line-through;
	cursor: not-allowed;
}

/* Moeder & kind set: hele set, alleen moeder of alleen kind */
.aso-wie {
	margin: 0 0 20px;
}

.aso-wie__keuzes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.aso-wie__keuze {
	position: relative;
	display: inline-flex;
}

.aso-wie__keuze input {
	position: absolute;
	opacity: 0;
	inset: 0;
	margin: 0;
	cursor: pointer;
}

.aso-wie__keuze span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 2px solid #e8dce6;
	border-radius: 999px;
	background: #fff;
	color: var(--wp--preset--color--inkt, #2a1633);
	font-weight: 700;
	font-size: 15px;
}

.aso-wie__keuze:hover span {
	border-color: var(--wp--preset--color--inkt, #2a1633);
}

.aso-wie__keuze input:checked + span {
	border-color: var(--wp--preset--color--inkt, #2a1633);
	background: var(--wp--preset--color--inkt, #2a1633);
	color: #fff;
}

.aso-wie__keuze input:focus-visible + span {
	outline: 2px dashed var(--wp--preset--color--papaver, #d4381e);
	outline-offset: 3px;
}

table.variations td.value .reset_variations {
	margin-top: 8px;
}

/* Live voorbeeld */
.aso-voorbeeld-wissel {
	display: inline-flex;
	align-self: flex-start;
	gap: 4px;
	margin: 0 0 14px;
	padding: 4px;
	border-radius: 999px;
	background: var(--wp--preset--color--lila-zacht, #f7f3ff);
}

.aso-voorbeeld-wissel button {
	min-height: 40px;
	padding: 0 18px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--inkt, #2a1633);
	font: inherit;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
}

.aso-voorbeeld-wissel button[aria-pressed="true"] {
	background: var(--wp--preset--color--inkt, #2a1633);
	color: #fff;
}

.aso-voorbeeld {
	--as-garen: #d4381e;
	--as-muts: #f4c6d3;
	display: flex;
	flex-direction: column;
	gap: 14px;
	color: var(--wp--preset--color--inkt, #2a1633);
}

.aso-voorbeeld__vlak {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(400px, 44vw, 600px);
	padding: clamp(64px, 6vw, 80px) clamp(24px, 4vw, 56px);
	border-radius: 32px;
	background: #eee9ff;
}

.aso-voorbeeld__label {
	position: absolute;
	top: 24px;
	left: 24px;
	padding: 8px 14px;
	border-radius: 999px;
	background: #fff;
	font-weight: 700;
	font-size: 14px;
}

.aso-voorbeeld__noot {
	position: absolute;
	right: 24px;
	bottom: 20px;
	left: 24px;
	font-size: 13px;
	text-align: right;
	color: var(--wp--preset--color--tekst-zacht, #4a3a4f);
}

.aso-ring {
	position: relative;
	width: min(100%, 420px);
	aspect-ratio: 1;
	container-type: inline-size;
}

.aso-ring__ophanger {
	position: absolute;
	top: -14px;
	left: 50%;
	width: 68px;
	height: 34px;
	margin-left: -34px;
	border-radius: 8px;
	background: #b98048;
}

.aso-ring__stof {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 9cqi;
	border: 20px solid #d9a86c;
	border-radius: 999px;
	background: #fffdf8;
	box-shadow: 0 0 0 4px #b98048, 0 24px 48px rgba(42, 22, 51, 0.12);
	color: var(--as-garen);
	text-align: center;
}

.aso-ring__stof::before {
	content: "";
	position: absolute;
	inset: 12px;
	border: 2px dashed rgba(42, 22, 51, 0.12);
	border-radius: 999px;
}

.aso-ring__zon {
	width: 11cqi;
	height: 11cqi;
	margin-bottom: 1cqi;
}

.aso-ring__naam,
.aso-muts__naam {
	max-width: 100%;
	font-family: var(--wp--preset--font-family--hand, "Caveat", cursive);
	font-weight: 700;
	line-height: 0.95;
	overflow-wrap: anywhere;
}

.aso-ring__naam {
	font-size: 21cqi;
}

.aso-ring__naam[data-lengte="middel"] {
	font-size: 16cqi;
}

.aso-ring__naam[data-lengte="lang"] {
	font-size: 13cqi;
}

.aso-ring__naam[data-lengte="extra"] {
	font-size: 10.5cqi;
}

.aso-ring__regel {
	font-family: var(--wp--preset--font-family--hand, "Caveat", cursive);
	font-weight: 500;
	font-size: 7.6cqi;
	line-height: 1.1;
	opacity: 0.85;
}

.aso-ring__regel:empty {
	display: none;
}

.aso-muts {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(100%, 400px);
	container-type: inline-size;
}

.aso-muts__bol {
	width: 78%;
	aspect-ratio: 1.25;
	border-radius: 999px 999px 28px 28px;
	background: repeating-linear-gradient(90deg, rgba(42, 22, 51, 0.05) 0 3px, transparent 3px 9px), var(--as-muts);
	box-shadow: 0 24px 48px rgba(42, 22, 51, 0.12);
}

.aso-muts__boord {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 92%;
	height: 29.5cqi;
	margin-top: -7cqi;
	padding: 0 5cqi;
	border-top: 3px solid rgba(42, 22, 51, 0.08);
	border-radius: 26px;
	background: repeating-linear-gradient(90deg, rgba(42, 22, 51, 0.09) 0 5px, transparent 5px 12px), var(--as-muts);
	text-align: center;
}

.aso-muts__naam {
	font-size: 14.5cqi;
	line-height: 1;
	color: var(--as-garen);
}

.aso-muts__naam[data-lengte="middel"] {
	font-size: 11.5cqi;
}

.aso-muts__naam[data-lengte="lang"],
.aso-muts__naam[data-lengte="extra"] {
	font-size: 9cqi;
}

.aso-spelling {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 14px 16px;
	border-radius: 16px;
	background: var(--wp--preset--color--geel, #fff0c2);
	font-size: 15px;
	line-height: 1.5;
}

.aso-spelling svg {
	flex: none;
	margin-top: 1px;
}

@media (max-width: 599px) {
	.aso-stofkiezer--paneel {
		grid-template-columns: minmax(0, 1fr);
		padding: 18px;
	}

	.aso-stofkiezer__gekozen {
		text-align: left;
	}

	.aso-keuze {
		flex-wrap: wrap;
	}

	.aso-badge {
		margin-left: 36px;
	}

	.aso-voorbeeld__vlak {
		min-height: 340px;
		border-radius: 24px;
	}
}