/**
 * Quantity selector before "Añadir al carrito" — see assets/js/staggs-quantity.js.
 * Compact pill "− 1 +" in the EstoresDirecto language (neutral border, turquoise
 * only for focus), touch targets of 44px.
 */

/*
 * The purchase block reads as one flow: summary -> price -> Cantidad -> Añadir al
 * carrito. STAGGS gave the summary a 30px margin and the total group 60px (30px on
 * phones) of padding on both sides, which left a hole between the pieces; the gaps
 * are set here instead: a normal 24px under the summary, none under the button
 * (the next section brings its own spacing).
 */
body.postid-2833 .option-group-wrapper .staggs-summary-widget {
	margin-bottom: var(--ed-space-md);
}

body.postid-2833 .option-group-wrapper .option-group.total {
	padding-top: 0;
	padding-bottom: 0;
}

/*
 * The CTA row. Desktop: the stepper and the button side by side as ONE group at
 * the end of the summary's width (not pushed to opposite edges). Tablet and phone
 * (below 1024px, where the column is narrow): the stepper on its own row above the
 * button.
 */
body.postid-2833 .staggs-cart-form-button {
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--ed-space-sm) var(--ed-space-md);
}

.ed-qty {
	display: flex;
	align-items: center;
	gap: var(--ed-space-xs);
}

.ed-qty__label {
	margin: 0;
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
	color: var(--ed-color-heading);
}

.ed-qty__control {
	display: inline-flex;
	align-items: center;
	height: 48px;
	padding: 0 2px;
	background-color: var(--ed-color-surface);
	border: 1px solid var(--ed-color-border);
	border-radius: var(--ed-radius-full);
	transition: border-color var(--ed-transition-fast);
}

.ed-qty__control:hover {
	border-color: var(--ed-color-muted);
}

.ed-qty__control:focus-within {
	border-color: var(--ed-color-primary);
}

.ed-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--ed-radius-full);
	color: var(--ed-color-heading);
	cursor: pointer;
	transition: background-color var(--ed-transition-fast), color var(--ed-transition-fast);
}

.ed-qty__btn svg {
	width: 16px;
	height: 16px;
}

.ed-qty__btn:hover:not(:disabled) {
	background-color: var(--ed-color-surface-alt);
}

.ed-qty__btn:focus-visible,
.ed-qty__input:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: 0;
}

.ed-qty__btn:disabled {
	color: var(--ed-color-muted);
	opacity: 0.45;
	cursor: not-allowed;
}

.ed-qty__input {
	width: 3.25rem;
	height: 44px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-base);
	font-weight: 600;
	line-height: 1;
	text-align: center;
	color: var(--ed-color-heading);
	appearance: textfield;
	-moz-appearance: textfield;
}

.ed-qty__input::-webkit-outer-spin-button,
.ed-qty__input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.ed-qty__input:disabled {
	opacity: 0.6;
}

/* CTA total = unit price x quantity, shown in place of STAGGS' own unit price. */
.ed-qty-ready #totalprice {
	display: none;
}

body.postid-2833 .staggs-cart-form-button .single_add_to_cart_button .ed-cart-btn-total {
	margin-left: var(--ed-space-3xs);
	font-weight: 700;
}

/* The struck-through regular price (when STAGGS shows one) is secondary: smaller and lighter. */
body.postid-2833 .staggs-cart-form-button .single_add_to_cart_button .ed-cart-btn-total del {
	margin-left: var(--ed-space-3xs);
	font-size: 0.85em;
	font-weight: 400;
	opacity: 0.72;
	text-decoration-thickness: 1px;
}

body.postid-2833 .staggs-cart-form-button .single_add_to_cart_button.loading .ed-cart-btn-total {
	visibility: hidden;
}

/* Tablet and phones: the stepper on its own row above the button. */
@media (max-width: 1023px) {
	body.postid-2833 .staggs-cart-form-button {
		gap: var(--ed-space-xs);
	}

	.ed-qty {
		flex: 1 1 100%;
		justify-content: space-between;
	}
}

/*
 * "Resumen de tu configuración": the small price section at the bottom (only when
 * more than one unit) — a hairline above, the unit price as plain text, the total a
 * little stronger; compact, not a checkout-style total.
 */
.ed-qty-summary {
	max-width: 22rem;
	margin-top: var(--ed-space-xs);
	padding-top: var(--ed-space-xs);
	border-top: 1px solid var(--ed-color-border);
}

.ed-qty-summary[hidden] {
	display: none;
}

.ed-qty-summary__row {
	display: flex;
	justify-content: space-between;
	gap: var(--ed-space-md);
	line-height: 1.6;
}

.ed-qty-summary__row--total {
	font-weight: 600;
	color: var(--ed-color-heading);
}

.ed-qty-summary__row--total strong {
	font-size: 1.05em;
}

@media (prefers-reduced-motion: reduce) {
	.ed-qty__control,
	.ed-qty__btn {
		transition: none;
	}
}

/*
 * Desktop: the stepper and the button as one group, left-aligned right under the
 * summary's text (not pushed to the far edge of the summary's width). STAGGS
 * spreads the row with `justify-content: space-between` (a rule this file cannot
 * out-specify), so the group is kept together by auto margins instead: the free
 * space goes to the right of the button.
 */
@media (min-width: 1024px) {
	body.postid-2833 .staggs-cart-form-button .ed-qty {
		margin-left: 0;
		margin-right: 0.5rem; /* with the flex gap: about 24px to the button */
	}

	body.postid-2833 .staggs-cart-form-button .single_add_to_cart_button {
		margin-left: 0 !important;
		margin-right: auto !important;
	}
}

/*
 * The summary lists each choice; a paid choice also carries its surcharge as
 * "<bdi><span class=amount>115,00 €</span></bdi>" after the value. The surcharge is
 * priced into the unit price / total shown below and on the button, so the list
 * itself shows the choice only. Presentation only: the option, its price and
 * STAGGS' own state are untouched.
 */
.staggs-summary-widget li p > bdi {
	display: none;
}