/* Cart Quantity Stepper
   Kleur/maat/uitlijning komen uit de plugininstellingen via :root variabelen.
   Zonder ingestelde kleur valt --cqs-bg terug op de primaire Elementor-kleur. */

.cqs-wrap { margin-top: .6em; text-align: var(--cqs-align, right); line-height: 1; }
.cqs-wrap--single { text-align: left; margin: 0; }

/* ---------- Stepper ---------- */
.cqs {
	--cqs-size: var(--cqs-base, 40px);
	--cqs-ease: cubic-bezier(.2, .8, .2, 1);
	display: inline-flex;
	align-items: center;
	justify-content: flex-end; /* de + blijft rechts staan, de pil groeit naar links (zoals AH) */
	height: var(--cqs-size);
	min-width: var(--cqs-size);
	border-radius: calc(var(--cqs-size) / 2);
	background: var(--cqs-bg, var(--e-global-color-primary, #333));
	color: var(--cqs-fg, #fff);
	box-sizing: border-box;
	overflow: hidden;
	vertical-align: middle;
	font-family: var(--cqs-font, inherit);
	-webkit-tap-highlight-color: transparent;
}
.cqs.cqs--single { --cqs-size: calc(var(--cqs-base, 40px) * 1.1); }

.cqs .cqs__btn {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 var(--cqs-size);
	width: var(--cqs-size);
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	box-shadow: none;
	text-transform: none;
	min-height: 0;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	transition: background-color .15s;
}
.cqs .cqs__btn:hover,
.cqs .cqs__btn:focus { background: rgba(255, 255, 255, .15); color: inherit; outline: none; }
.cqs .cqs__btn:active { background: rgba(255, 255, 255, .28); }
.cqs .cqs__btn:focus-visible { outline: 2px solid var(--cqs-fg, #fff); outline-offset: -4px; }
.cqs .cqs__btn[aria-disabled="true"] { opacity: .45; cursor: default; background: transparent; }
.cqs svg { width: 40%; height: 40%; display: block; pointer-events: none; }

.cqs__qty {
	flex: 1 1 auto;
	min-width: 2ch;
	padding: 0 .1em;
	text-align: center;
	font-weight: 700;
	font-size: calc(var(--cqs-size) * .4);
	font-variant-numeric: tabular-nums;
}
.cqs__qty.is-bump { animation: cqs-bump .24s var(--cqs-ease); }

/* − wordt een prullenbak als de volgende klik het product uit de mand haalt. */
.cqs .cqs__trash { display: none; }
.cqs.is-last .cqs__dash { display: none; }
.cqs.is-last .cqs__trash { display: block; width: 46%; height: 46%; }
.cqs.is-last .cqs__minus svg { animation: cqs-swap .2s var(--cqs-ease); }

/* Links als knoppen: thema-linkstijlen neutraliseren. */
.cqs a.cqs__btn, .cqs a.cqs__btn:hover, .cqs a.cqs__btn:focus { text-decoration: none; color: inherit; border: 0; box-shadow: none; }

/* Het standaard WooCommerce-formulier is alleen verborgen zolang onze JS draait (vangnet in <head>). */
.cqs-js .cqs-native { display: none !important; }
html:not(.cqs-js) .cqs--single { display: none !important; }

/* Eigen aantalveld van thema/Elementor in dezelfde form verbergen. */
form:has(> .cqs-wrap) > .quantity { display: none !important; }

/* ---------- Compact (AH): rond plusje dat uitgroeit tot pil ---------- */
.cqs--collapsed {
	width: var(--cqs-size);
	transition: width .24s var(--cqs-ease);
}
.cqs--collapsed.is-active {
	width: calc(var(--cqs-size) * 2.8 + max(0px, (var(--cqs-d, 1) - 2) * 10px));
}
.cqs--collapsed .cqs__minus,
.cqs--collapsed .cqs__qty { transition: opacity .2s ease .06s; }
.cqs--collapsed:not(.is-active) .cqs__minus,
.cqs--collapsed:not(.is-active) .cqs__qty {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .1s ease, visibility 0s linear .24s;
}
.cqs--collapsed .cqs__minus { flex-shrink: 0; }

/* ---------- Productpagina (AH-stijl): compacte pil "Toevoegen +" ---------- */
.cqs__label { display: none; }
.cqs--single .cqs__plus { flex-direction: row-reverse; justify-content: space-between; gap: .6em; }
.cqs.cqs--single.cqs--collapsed,
.cqs.cqs--single.cqs--collapsed.is-active { width: 150px; max-width: 100%; transition: none; }
.cqs.cqs--single.cqs--collapsed:not(.is-active) .cqs__minus,
.cqs.cqs--single.cqs--collapsed:not(.is-active) .cqs__qty { display: none; }
.cqs.cqs--single.cqs--collapsed:not(.is-active) .cqs__plus {
	flex: 1 1 auto;
	width: auto;
	padding: 0 1.1em 0 1.3em;
}
.cqs.cqs--single.cqs--collapsed:not(.is-active) .cqs__label {
	display: inline;
	font-weight: 700;
	font-size: calc(var(--cqs-size) * .36);
	white-space: nowrap;
	animation: cqs-fade .2s ease;
}
.cqs--single.is-active .cqs__plus { justify-content: center; }
.cqs--single.is-active .cqs__minus,
.cqs--single.is-active .cqs__qty { animation: cqs-fade .2s ease; }

.cqs-viewcart {
	display: inline-block;
	margin-left: 1em;
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	vertical-align: middle;
	color: inherit;
	font-family: var(--cqs-font, inherit);
}
.cqs-viewcart[hidden] { display: none; }
.cqs.is-unavailable { display: none; }
.cqs-var { margin: 0; }

/* ---------- Optieknop voor variabele producten (link naar de productpagina) ---------- */
.cqs-options {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4em;
	box-sizing: border-box;
	height: var(--cqs-base, 40px);
	min-width: var(--cqs-base, 40px);
	padding: 0 1.2em;
	border-radius: calc(var(--cqs-base, 40px) / 2);
	background: var(--cqs-bg, var(--e-global-color-primary, #333));
	color: var(--cqs-fg, #fff);
	font-family: var(--cqs-font, inherit);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: filter .15s;
}
.cqs-options:hover, .cqs-options:focus { color: var(--cqs-fg, #fff); filter: brightness(1.1); text-decoration: none; }
.cqs-options--icon { width: var(--cqs-base, 40px); padding: 0; }
.cqs-options--icon svg { width: 40%; height: 40%; }

.cqs-badge {
	display: inline-block;
	margin: .5em 0 0 .5em;
	padding: .2em .6em;
	border-radius: 999px;
	background: var(--cqs-bg, var(--e-global-color-primary, #333));
	color: var(--cqs-fg, #fff);
	font-family: var(--cqs-font, inherit);
	font-size: .8em;
	font-weight: 600;
	vertical-align: middle;
}
.cqs-badge[hidden] { display: none; }
.cqs-options .cqs-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	margin: 0;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: #333;
	border: 2px solid var(--cqs-bg, var(--e-global-color-primary, #333));
	font-size: 11px;
}
.cqs-options .cqs-badge[hidden] { display: none; }

/* ---------- AH-rij: prijs links, knop rechts, op dezelfde regel ---------- */
.cqs-wrap--row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75em;
	flex: 1 1 100%;
	width: 100%;
	margin-top: 0;
}
.cqs-wrap--row .cqs-price { flex: 1 1 auto; min-width: 0; text-align: left; line-height: 1.3; }
.cqs-wrap--row .cqs-price > * { margin: 0 !important; width: auto !important; }
.cqs-wrap--row > .cqs, .cqs-wrap--row > .cqs-options { margin-left: auto; flex: 0 0 auto; }
.cqs-wrap--row .cqs-options { padding: 0 1em; }
form:has(> .cqs-wrap--row) { width: 100%; }

/* ---------- Melding (bijv. voorraadlimiet) ---------- */
.cqs-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 99999;
	transform: translate(-50%, 20px);
	max-width: 90vw;
	padding: .7em 1.2em;
	border-radius: 8px;
	background: #1d1d1f;
	color: #fff;
	font-family: var(--cqs-font, inherit);
	font-size: 14px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s, transform .2s;
}
.cqs-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Animaties ---------- */
@keyframes cqs-bump { 0% { transform: scale(.6); opacity: .3; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: none; } }
@keyframes cqs-swap { from { transform: scale(.4) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cqs-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	.cqs, .cqs *, .cqs-toast, .cqs-options, .cqs-badge { animation: none !important; transition: none !important; }
}

/* ---------- Mobiel: productpagina-knop over de volle breedte (groot tikdoel) ---------- */
@media (max-width: 600px) {
	.cqs-wrap--single { display: block; }
	.cqs.cqs--single,
	.cqs.cqs--single.cqs--collapsed,
	.cqs.cqs--single.cqs--collapsed.is-active { display: flex; width: 100%; min-width: 0; }
	.cqs--single.is-active .cqs__plus { flex: 0 0 var(--cqs-size); }
	.cqs-viewcart { display: block; margin: .8em 0 0; text-align: center; }
	.cqs-viewcart[hidden] { display: none; }
}