/* BCUE — Front-end styles
   color-mix() solo dentro de @supports, con color macizo de respaldo.
   Arquitectura: custom properties → layout → componentes → upgrade → responsive.
*/

/* ─────────────────────────────────────────────────────────────────────
   1. CUSTOM PROPERTIES (base del tema; JS sobrescribe --bcue-accent)
   ───────────────────────────────────────────────────────────────────── */
.bcue-w {
	--bcue-accent: #1f2937;
	--bcue-radius: 12px;
	--bcue-border: #e5e7eb;
	--bcue-text: #111827;
	--bcue-muted: #6b7280;
	--bcue-ok: #10b981;
	--bcue-warn: #f59e0b;
	--bcue-err: #ef4444;
	--bcue-surface: #f9fafb;
	--bcue-selected-bg: #f0f9ff; /* tinte neutro fijo; no depende del acento */
	--bcue-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.07);
	--bcue-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.09);
	/* tokens de spacing (consistencia entre layouts) */
	--bcue-gap-xs: 0.35rem;
	--bcue-gap-sm: 0.5rem;
	--bcue-gap-md: 0.75rem;
	--bcue-gap-lg: 1rem;
	--bcue-pad-card: 1rem;
	--bcue-pad-card-sm: 0.65rem 0.85rem;
	/* Sangría interior común (filas, cabeceras de grupo, interruptor del pack):
	   todo arranca en la misma vertical. */
	--bcue-inset: 1rem;
	--bcue-toggle-size: 22px;
}

/* ─────────────────────────────────────────────────────────────────────
   2. UTILIDADES
   ───────────────────────────────────────────────────────────────────── */
.bcue-hidden {
	display: none !important;
}
.bcue-icon-inline {
	font-size: 16px;
	vertical-align: middle;
}

/* ─────────────────────────────────────────────────────────────────────
   3. WIDGET RAÍZ
   ───────────────────────────────────────────────────────────────────── */
.bcue-w {
	margin: 1.5rem 0;
	padding: 1.25rem;
	background: #fff;
	border: 1px solid var(--bcue-border);
	border-radius: var(--bcue-radius);
	box-shadow: var(--bcue-shadow-sm);
	color: var(--bcue-text);
	font-family: inherit;
	container-type: inline-size;
}
/* ── Salvavidas de contexto ───────────────────────────────────────────────
   Con el hook `price_block` (displayProductPriceBlock) muchos temas (Classic
   y derivados) inyectan el widget DENTRO del bloque de precios, que es un
   flex-row (.has-discount.d-flex). Sin ayuda, el item flex que nos envuelve
   se encoge a min-content y el widget colapsa a una palabra por línea.
   Estrategia:
     1. el contenedor que envuelve el widget ocupa toda la fila (flex 100%);
     2. la fila de precios ENVUELVE, así el precio actual + badge bajan a la
        línea siguiente en vez de comprimir el widget a la derecha.
   No tocamos `display` porque .d-flex es `display:flex !important` y ganaría;
   con flex-wrap + flex-basis:100% conseguimos el mismo efecto sin pelear.
   :has() tiene soporte universal en navegadores actuales; si faltara, el
   widget se vería como antes (sin romper nada). */
.product-prices:has(.bcue-w) {
	width: 100%;
}
.has-discount:has(.bcue-w) {
	flex-wrap: wrap;
}
.product-discount:has(.bcue-w),
.current-price:has(.bcue-w) {
	flex: 1 1 100%;
	min-width: 0;
}
/* El widget nunca debe desbordar su contenedor real. */
.bcue-w {
	max-width: 100%;
}

.bcue-w.is-disabled {
	opacity: 0.55;
	pointer-events: none;
}
.bcue-w.is-disabled .bcue-master,
.bcue-w.is-disabled .bcue-w__head {
	pointer-events: auto;
	opacity: 1;
}

/* El hueco entre la cabecera (título, intro, «Incluir este pack») y la lista
   lo pone la lista: hay temas que anulan los márgenes de <header>/<label> y
   el interruptor quedaba pegado a la primera fila. */
.bcue-w > .bcue-w__head {
	display: flow-root;
	margin: 0;
}
.bcue-w > .bcue-w__head ~ .bcue-w__grid {
	margin-top: var(--bcue-gap-lg) !important;
}
.bcue-w__title {
	margin: 0 0 0.25rem;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--bcue-text);
}
.bcue-w__lead {
	margin: 0;
	color: var(--bcue-muted);
	font-size: 0.875rem;
}

/* ─────────────────────────────────────────────────────────────────────
   4. ERROR BANNER
   ───────────────────────────────────────────────────────────────────── */
.bcue-w__error {
	margin-bottom: 0.75rem;
	padding: 0.5rem 0.75rem;
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
	border-radius: 8px;
	font-size: 0.875rem;
}

/* ─────────────────────────────────────────────────────────────────────
   5. MASTER TOGGLE (pack opcional)
   ───────────────────────────────────────────────────────────────────── */
.bcue-w .bcue-master {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: var(--bcue-gap-md) 0 0;
	/* casilla del interruptor en la misma vertical que las de las filas */
	padding: 0.35rem 0.75rem 0.35rem calc(var(--bcue-inset) - 1px);
	background: #f0fdf4;
	border: 1px solid #6ee7b7;
	border-radius: 999px;
	cursor: pointer;
	font-weight: 600;
	color: #065f46;
	user-select: none;
}
.bcue-master__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.bcue-master__box {
	width: 18px;
	height: 18px;
	border: 2px solid #6ee7b7;
	border-radius: 4px;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition:
		background 0.15s,
		border-color 0.15s;
}
.bcue-master__box::after {
	content: '';
	width: 10px;
	height: 6px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg) scale(0);
	transition: transform 0.15s;
	margin-top: -2px;
}
.bcue-master__input:checked + .bcue-master__box {
	background: #10b981;
	border-color: #10b981;
}
.bcue-master__input:checked + .bcue-master__box::after {
	transform: rotate(-45deg) scale(1);
}

/* ─────────────────────────────────────────────────────────────────────
   6. GRID DE ITEMS (pack estándar)
   ───────────────────────────────────────────────────────────────────── */

/* Cards — usa container query para adaptarse al ancho del widget */
.bcue-w--layout-cards .bcue-w__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bcue-gap-md);
}
@container (min-width: 440px) {
	.bcue-w--layout-cards .bcue-w__grid {
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	}
}
@supports not (container-type: inline-size) {
	.bcue-w--layout-cards .bcue-w__grid {
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	}
}
.bcue-w--layout-cards .bcue-item {
	background: #fff;
	border: 1px solid var(--bcue-border);
	border-radius: var(--bcue-radius);
	padding: var(--bcue-gap-md);
	display: flex;
	flex-direction: column;
	gap: var(--bcue-gap-sm);
	transition:
		border-color 0.15s,
		box-shadow 0.15s;
}
.bcue-w--layout-cards .bcue-item:hover {
	border-color: var(--bcue-accent);
	box-shadow: var(--bcue-shadow-md);
}
.bcue-w--layout-cards .bcue-item__media {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 8px;
	background: var(--bcue-surface);
}
.bcue-w--layout-cards .bcue-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* List */
.bcue-w--layout-list .bcue-w__grid {
	display: flex;
	flex-direction: column;
	gap: var(--bcue-gap-sm);
}
/* Dos columnas (imagen + cuerpo): la tercera, vacía, sumaba un hueco a la
   derecha y descuadraba precios y contador. Sin imagen, una sola columna
   (antes el cuerpo caía en la de 64 px de la imagen). */
.bcue-w--layout-list .bcue-item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: var(--bcue-gap-md);
	align-items: center;
	padding: var(--bcue-pad-card-sm);
	background: #fff;
	border: 1px solid var(--bcue-border);
	border-radius: 10px;
}
.bcue-w--layout-list .bcue-item:not(:has(.bcue-item__media)) {
	grid-template-columns: minmax(0, 1fr);
}
.bcue-w--layout-list .bcue-item__media img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

/* Compact */
.bcue-w--layout-compact .bcue-w__grid {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.bcue-w--layout-compact .bcue-item {
	display: flex;
	gap: 0.65rem;
	align-items: center;
	padding: 0.55rem 0.75rem;
	border-bottom: 1px solid var(--bcue-border);
}
.bcue-w--layout-compact .bcue-item:last-child {
	border-bottom: 0;
}
.bcue-w--layout-compact .bcue-item__media {
	display: none;
}

/* Accordion */
.bcue-w--layout-accordion .bcue-group {
	border: 1px solid var(--bcue-border);
	border-radius: 8px;
	padding: 0;
	margin-bottom: 0.5rem;
	overflow: hidden;
}
.bcue-w--layout-accordion .bcue-group__legend {
	background: var(--bcue-surface);
	padding: 0.6rem 0.9rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.bcue-w--layout-accordion .bcue-group__legend::after {
	content: '\002B';
	font-size: 18px;
	color: var(--bcue-muted);
}
.bcue-w--layout-accordion .bcue-group.is-open .bcue-group__legend::after {
	content: '\2212';
}
.bcue-w--layout-accordion .bcue-group .bcue-item {
	display: none;
	padding: 0.6rem 0.9rem;
	border-top: 1px solid var(--bcue-border);
}
.bcue-w--layout-accordion .bcue-group.is-open .bcue-item {
	display: flex;
}

/* Accordion + list with image: collapsible groups, each item as a clickable
   row [check/radio][thumb][name · price]. The accordion class is also emitted
   so the toggle JS and the inline-notice logic keep working unchanged. */
.bcue-w--layout-accordion-list .bcue-w__grid {
	display: flex;
	flex-direction: column;
	gap: var(--bcue-gap-sm);
}
/* Filas sueltas (obligatorios, servicio): sin borde, solo fondo. */
.bcue-w--layout-accordion-list .bcue-w__grid > .bcue-item {
	border: 0 !important;
	border-radius: 10px;
}
/* Borde con box-shadow: el <legend> del fieldset corta un border real */
.bcue-w--layout-accordion-list .bcue-group {
	margin-bottom: 0;
	border: 0;
	border-radius: 10px;
	box-shadow: 0 0 0 1px var(--bcue-border);
	background: #fff;
}
.bcue-w--layout-accordion-list .bcue-group.has-error {
	box-shadow: 0 0 0 1px var(--bcue-err);
}
/* float: un legend flotado deja de ser el "rendered legend" que se monta
   sobre el borde del fieldset y pasa a ser una fila normal del grupo. */
.bcue-w--layout-accordion-list .bcue-group__legend {
	float: left;
	width: 100%;
	box-sizing: border-box;
	padding: var(--bcue-gap-md) var(--bcue-inset);
	background: #fff;
	align-items: center;
}
.bcue-w--layout-accordion-list .bcue-group.is-open .bcue-group__legend {
	border-bottom: 1px solid var(--bcue-border);
}
.bcue-w--layout-accordion-list .bcue-group__legend strong {
	font-size: 0.95rem;
}
.bcue-w--layout-accordion-list .bcue-group__rule {
	font-size: 0.7rem;
}
/* Contador gris hasta que hay algo elegido */
.bcue-w--layout-accordion-list .bcue-group__counter {
	background: var(--bcue-border);
	color: var(--bcue-text);
}
.bcue-w--layout-accordion-list .bcue-group:has(.bcue-toggle__input:checked) .bcue-group__counter {
	background: var(--bcue-accent);
	color: #fff;
}
.bcue-w--layout-accordion-list .bcue-w__grid > .bcue-item,
.bcue-w--layout-accordion-list .bcue-group.is-open .bcue-item {
	position: relative;
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: var(--bcue-gap-md);
	align-items: center;
	padding: var(--bcue-gap-md) var(--bcue-inset) var(--bcue-gap-md)
		calc(var(--bcue-inset) + var(--bcue-toggle-size) + var(--bcue-gap-md));
	background: #fff;
	cursor: pointer;
	transition: background 0.12s, box-shadow 0.12s;
}
.bcue-w--layout-accordion-list .bcue-group .bcue-item + .bcue-item {
	border-top: 1px solid var(--bcue-border);
}
.bcue-w--layout-accordion-list .bcue-group .bcue-item:first-of-type {
	border-top: 0;
}
.bcue-w--layout-accordion-list .bcue-item:not(:has(.bcue-item__media)) {
	grid-template-columns: 1fr;
}
.bcue-w--layout-accordion-list .bcue-w__grid .bcue-item:hover {
	background: var(--bcue-surface);
}
.bcue-w--layout-accordion-list .bcue-item:has(.bcue-toggle__input:checked) {
	background: var(--bcue-selected-bg);
}
.bcue-w--layout-accordion-list .bcue-w__grid > .bcue-item:not(:has(.bcue-toggle__input:checked)) {
	background: var(--bcue-surface);
}
.bcue-w--layout-accordion-list .bcue-item--required {
	cursor: default;
}
.bcue-w--layout-accordion-list .bcue-item--out-of-stock {
	cursor: not-allowed;
}
/* La casilla/disco se saca a la izquierda de la fila, centrada en vertical */
.bcue-w--layout-accordion-list .bcue-item .bcue-toggle__box {
	position: absolute;
	left: var(--bcue-inset);
	top: 50%;
	margin-top: calc(var(--bcue-toggle-size) / -2);
}
.bcue-w--layout-accordion-list .bcue-item__media {
	width: 56px;
	height: 56px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--bcue-surface);
}
.bcue-w--layout-accordion-list .bcue-item__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.bcue-w--layout-accordion-list .bcue-item__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}
.bcue-w--layout-accordion-list .bcue-item__name {
	font-weight: 500;
	font-size: 0.9rem;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.bcue-w--layout-accordion-list .bcue-item__row--extras {
	justify-content: flex-start;
}
/* Combinación + unidades + etiquetas + aviso: bajan de línea si no caben */
.bcue-item__row--extras {
	flex-wrap: wrap;
}
.bcue-w--layout-accordion-list .bcue-item__row--extras:not(:has(*)) {
	display: none;
}
.bcue-w--layout-accordion-list .bcue-stepper button {
	width: 28px;
	height: 28px;
}

/* Grid visual — cuadrícula con cards visuales (imagen banner) */
.bcue-w--layout-grid .bcue-w__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bcue-gap-lg);
}
@container (min-width: 420px) {
	.bcue-w--layout-grid .bcue-w__grid {
		grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	}
}
@supports not (container-type: inline-size) {
	.bcue-w--layout-grid .bcue-w__grid {
		grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	}
}
.bcue-w--layout-grid .bcue-item {
	border: 1px solid var(--bcue-border);
	border-radius: 10px;
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition:
		transform 0.15s,
		box-shadow 0.15s;
}
.bcue-w--layout-grid .bcue-item:hover {
	transform: translateY(-2px);
	box-shadow: var(--bcue-shadow-md);
}
.bcue-w--layout-grid .bcue-item__media {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--bcue-surface);
	overflow: hidden;
}
.bcue-w--layout-grid .bcue-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bcue-w--layout-grid .bcue-item__body {
	padding: 0.65rem 0.9rem;
}

/* ─────────────────────────────────────────────────────────────────────
   7. GRUPOS DE COMPONENTES
   ───────────────────────────────────────────────────────────────────── */
.bcue-group {
	grid-column: 1 / -1;
	padding: 0.9rem;
	border: 1px dashed var(--bcue-border);
	border-radius: var(--bcue-radius);
	margin: 0;
	display: grid;
	gap: 0.5rem;
}
/* float + ancho completo: el legend deja de montarse sobre el borde y ocupa
   la fila entera, así el contador puede ir pegado al final de la caja. */
.bcue-group__legend {
	float: left;
	width: 100%;
	box-sizing: border-box;
	padding: 0 0.4rem;
	font-size: 0.8rem;
	color: var(--bcue-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
	flex-wrap: wrap;
}
.bcue-group__legend strong {
	color: var(--bcue-text);
	text-transform: none;
	letter-spacing: 0;
	font-size: 1rem;
}
.bcue-group__rule {
	color: var(--bcue-muted);
	display: inline-flex;
	gap: 0.35rem;
	align-items: center;
}
.bcue-group__counter {
	margin-left: auto;
	align-self: center;
	background: var(--bcue-accent);
	color: #fff;
	padding: 1px 8px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 11px;
}
.bcue-group.has-error {
	border-color: var(--bcue-err);
	background: #fef2f2;
}
.bcue-group.is-locked .bcue-toggle__input:not(:checked) {
	opacity: 0.4;
	cursor: not-allowed;
}
.bcue-group.is-locked .bcue-item:has(.bcue-toggle__input:not(:checked)) {
	opacity: 0.6;
}

/* ─────────────────────────────────────────────────────────────────────
   8. ITEM (componente estándar)
   ───────────────────────────────────────────────────────────────────── */
.bcue-item__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}
.bcue-item__name {
	font-weight: 600;
	font-size: 0.95rem;
}
/* Una sola línea en todas las piezas: [-15 %] [tachado] [precio]. Así
   ninguna tarjeta crece por tener rebaja o varias unidades. */
.bcue-item__price {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 0.45rem;
	font-weight: 700;
	color: var(--bcue-accent);
	white-space: nowrap;
	text-align: right;
}
/* Rebaja: "-15 %" + precio original tachado sobre el precio final */
.bcue-item__price-was {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.75rem;
	font-weight: 400;
}
.bcue-item__price-old {
	color: var(--bcue-muted);
	text-decoration: line-through;
}
.bcue-item__discount {
	padding: 0.05rem 0.4rem;
	border-radius: 4px;
	background: var(--bcue-accent);
	color: #fff;
	font-weight: 700;
	line-height: 1.3;
}
/* Unidades (−/+ o "N unidades") siempre a la derecha de la fila, con el
   "3 × 2,90 €" delante: mismo sitio tenga o no selector de combinación. */
.bcue-item__qty {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}
/* Tarjeta estrecha (móvil, columna lateral): talla y −/+ en UNA línea.
   Sobran la etiqueta «TALLAS» (el select la lleva en aria-label) y el
   "N × unidad"; así ninguna tarjeta crece por bajar de línea. */
.bcue-item__body {
	container-type: inline-size;
	/* Con contención de inline-size el cuerpo mide 0 de ancho intrínseco: en
	   layouts donde la pieza es flex (acordeón) hay que dejarlo crecer o se
	   queda sin título, precio ni casilla. */
	flex: 1 1 auto;
	min-width: 0;
}
@container (max-width: 380px) {
	.bcue-item__qty .bcue-item__price-unit,
	.bcue-variant__label {
		display: none;
	}
	.bcue-item__row--extras {
		flex-wrap: nowrap;
	}
	.bcue-w .bcue-variant__select {
		min-width: 0;
		max-width: 9rem;
	}
}
/* "3 × 2,90 €" junto a las unidades */
.bcue-item__price-unit {
	white-space: nowrap;
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--bcue-muted);
}
/* Cantidad fija (> 1) cuando el cliente no la elige */
.bcue-item__units {
	display: inline-block;
	padding: 0.1rem 0.5rem;
	border-radius: 6px;
	background: var(--bcue-surface);
	border: 1px solid var(--bcue-border);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--bcue-text);
}
.bcue-item__desc {
	margin: 0.2rem 0 0;
	font-size: 0.85rem;
	color: var(--bcue-muted);
	line-height: 1.4;
}
.bcue-item__tag {
	display: inline-block;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 600;
	background: rgba(16, 185, 129, 0.1);
	color: #065f46;
	border-radius: 999px;
}
.bcue-item__tag--service {
	background: rgba(245, 158, 11, 0.12);
	color: #92400e;
}
.bcue-item__tag--nostock {
	background: #fef2f2;
	color: #991b1b;
}
.bcue-item--required {
	background: rgba(0, 0, 0, 0.015);
}
.bcue-item--custom {
	background: #fffbeb;
	border-color: #fde68a !important;
}
.bcue-item--service {
	background: rgba(245, 158, 11, 0.04);
	border-color: #fde68a !important;
}
.bcue-item--out-of-stock {
	opacity: 0.55;
}
.bcue-item--out-of-stock .bcue-toggle {
	cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────────────────
   9. TOGGLE (checkbox personalizado)
   ───────────────────────────────────────────────────────────────────── */
.bcue-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	user-select: none;
	margin: 0;
}
.bcue-toggle__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.bcue-toggle__input--hidden {
	display: none;
}
.bcue-toggle__box {
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	border: 2px solid var(--bcue-border);
	border-radius: 6px;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition:
		background 0.15s,
		border-color 0.15s;
}
.bcue-toggle__box::after {
	content: '';
	width: 12px;
	height: 7px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg) scale(0);
	transition: transform 0.15s;
	margin-top: -2px;
}
/* Solo :checked pinta la marca. Obligatorios/servicios llegan checked+disabled;
   un input solo disabled (sin stock) debe verse vacío. */
.bcue-toggle__input:checked + .bcue-toggle__box {
	background: var(--bcue-accent);
	border-color: var(--bcue-accent);
}
.bcue-toggle__input:checked + .bcue-toggle__box::after {
	transform: rotate(-45deg) scale(1);
}
.bcue-toggle__input:disabled:not(:checked) + .bcue-toggle__box {
	background: var(--bcue-surface);
}
.bcue-toggle__input:focus-visible + .bcue-toggle__box {
	outline: 2px solid var(--bcue-accent);
	outline-offset: 2px;
}

/* Radio (grupos de una sola opción): disco con punto central */
.bcue-toggle__box--radio {
	border-radius: 50%;
}
.bcue-toggle__box--radio::after {
	width: 8px;
	height: 8px;
	margin-top: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	transform: scale(0);
}
.bcue-toggle__input:checked + .bcue-toggle__box--radio::after {
	transform: scale(1);
}

/* ─────────────────────────────────────────────────────────────────────
   10. STEPPER (+/-)
   ───────────────────────────────────────────────────────────────────── */
/* Selector de combinación (talla, color…) de una pieza */
.bcue-variant {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	font-size: 0.8rem;
	color: var(--bcue-muted);
}
.bcue-variant__label {
	text-transform: uppercase;
	letter-spacing: 0.4px;
	font-size: 0.7rem;
}
/* Flecha propia: sin appearance la del navegador desaparece y el fondo
   (shorthand) pisa la flecha que el tema pone a todos los select. */
.bcue-w .bcue-variant__select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	min-width: 5.5rem;
	height: 34px;
	padding: 0 2rem 0 0.7rem;
	border: 1px solid var(--bcue-border);
	border-radius: 8px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.65rem center / 12px 12px;
	box-shadow: none;
	color: var(--bcue-text);
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}
.bcue-w .bcue-variant__select::-ms-expand {
	display: none;
}
.bcue-w .bcue-variant__select:hover {
	border-color: var(--bcue-muted);
}
.bcue-w .bcue-variant__select:focus-visible {
	outline: 2px solid var(--bcue-accent);
	outline-offset: 1px;
}
/* Aviso al pulsar + en el tope (stock o máximo del pack): globo encima
   del −/+, fuera del flujo, para que nada de la fila se desplace. */
.bcue-stepper-wrap {
	position: relative;
	display: inline-flex;
}
.bcue-qty-hint {
	position: absolute;
	right: 0;
	bottom: calc(100% + 8px);
	z-index: 5;
	padding: 0.3rem 0.6rem;
	border-radius: 6px;
	background: #b91c1c;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	pointer-events: none;
}
.bcue-qty-hint::after {
	content: '';
	position: absolute;
	top: 100%;
	right: 14px;
	border: 5px solid transparent;
	border-top-color: #b91c1c;
}
.bcue-stepper.is-capped {
	animation: bcue-capped 0.35s ease-in-out;
	border-color: var(--bcue-err, #b91c1c);
}
@keyframes bcue-capped {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-3px); }
	75% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
	.bcue-stepper.is-capped { animation: none; }
}
.bcue-stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--bcue-border);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}
.bcue-stepper button {
	width: 32px;
	height: 32px;
	border: 0;
	background: var(--bcue-surface);
	cursor: pointer;
	font-size: 17px;
	font-weight: 600;
	color: var(--bcue-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.12s;
}
.bcue-stepper button:hover {
	background: #f3f4f6;
}
.bcue-stepper button:active {
	background: #e5e7eb;
}
.bcue-stepper button:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}
.bcue-stepper input {
	width: 44px;
	height: 32px;
	border: 0;
	text-align: center;
	font-weight: 600;
	-moz-appearance: textfield;
	font-size: 0.9rem;
}
.bcue-stepper input::-webkit-outer-spin-button,
.bcue-stepper input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   11. PIE DEL WIDGET
   ───────────────────────────────────────────────────────────────────── */
.bcue-w__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--bcue-border);
	flex-wrap: wrap;
}
.bcue-w__total {
	display: flex;
	flex-direction: column;
	min-width: 110px;
}
.bcue-w__total-label {
	font-size: 0.75rem;
	color: var(--bcue-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 0.1rem;
}
.bcue-w__total-amount {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--bcue-text);
	transition: color 0.25s;
}
.bcue-w__total-amount.is-updated {
	color: var(--bcue-accent);
}
.bcue-w__total-breakdown {
	display: block;
	font-size: 0.72rem;
	color: var(--bcue-muted);
	margin-top: 0.15rem;
	font-weight: 500;
}
.bcue-w__total-breakdown .js-bcue-upgrade-cost {
	font-weight: 700;
	color: var(--bcue-text);
}
/* Resumen de compra: producto × cantidad, pack y total con nº de artículos */
.bcue-w__summary {
	flex: 1 1 100%;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 0.75rem 0.9rem;
	background: var(--bcue-surface);
	border-radius: 10px;
}
.bcue-w__line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	font-size: 0.88rem;
	color: var(--bcue-muted);
}
.bcue-w__line-label {
	min-width: 0;
}
.bcue-w__line-qty {
	color: var(--bcue-muted);
	white-space: nowrap;
}
.bcue-w__line-amount {
	color: var(--bcue-text);
	font-weight: 600;
	white-space: nowrap;
}
.bcue-w__line--total {
	color: var(--bcue-text);
	font-weight: 600;
	align-items: center;
}
/* Separador solo si hay líneas de desglose visibles encima */
.bcue-w__line:not(.bcue-hidden) ~ .bcue-w__line--total {
	margin-top: 0.2rem;
	padding-top: 0.45rem;
	border-top: 1px solid var(--bcue-border);
}
/* Cifras de ancho fijo: los importes no bailan al recalcularse */
.bcue-w__line-amount,
.bcue-w__total-amount,
.bcue-w__total-full,
.bcue-w__save,
.bcue-item__price,
.bcue-main-save,
.bcue-bar-save {
	font-variant-numeric: tabular-nums;
}
.bcue-w__line--total .bcue-w__total-amount {
	font-size: 1.45rem;
	white-space: nowrap;
}
@media (max-width: 480px) {
	.bcue-w__summary {
		padding: 0.65rem 0.75rem;
	}
	.bcue-w__line--total .bcue-w__total-amount {
		font-size: 1.25rem;
	}
}

/* Precio principal de la ficha sustituido por el total con pack */
.bcue-main-count {
	margin-left: 0.4rem;
	font-size: 0.95rem;
	font-weight: 400;
	color: var(--bcue-muted, #6b7280);
	white-space: nowrap;
}
/* Total sin descuentos tachado + "-N %" delante del total de la ficha */
.bcue-main-save {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-right: 0.5rem;
	vertical-align: middle;
	white-space: nowrap;
}
.bcue-main-save__old {
	font-size: 0.95rem;
	font-weight: 400;
	color: var(--bcue-muted, #6b7280);
}
.bcue-main-save__off {
	padding: 0.1rem 0.45rem;
	border-radius: 4px;
	background: var(--bcue-accent, #c41e1e);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
}

/* Resumen: total sin descuentos tachado y "Ahorras X € (-N %)" */
.bcue-w__line--savings {
	justify-content: flex-end;
	gap: 0.6rem;
}
.bcue-w__total-full {
	font-size: 0.85rem;
	color: var(--bcue-muted);
}
.bcue-w__save {
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var(--bcue-accent);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
	white-space: nowrap;
}
@supports (background: color-mix(in srgb, red 10%, white)) {
	.bcue-w__save {
		background: color-mix(in srgb, var(--bcue-accent) 12%, #fff);
		color: var(--bcue-accent);
		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bcue-accent) 30%, #fff);
	}
}
/* Barra flotante: total sin descuentos tachado + "-N %" tras el nº de artículos */
.bcue-bar-save {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-left: 0.5rem;
	vertical-align: middle;
	white-space: nowrap;
}
.bcue-bar-save__old {
	font-size: 0.85em;
	color: var(--bcue-muted, #6b7280);
}
.bcue-bar-save__off {
	padding: 0.05rem 0.4rem;
	border-radius: 4px;
	background: var(--bcue-accent, #c41e1e);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
}
/* Pulso al crecer el ahorro (se reinicia en cada cambio) */
.bcue-w__save.is-updated {
	animation: bcue-save-pulse 0.45s ease-out;
}
@keyframes bcue-save-pulse {
	0% { transform: scale(1); }
	40% { transform: scale(1.12); }
	100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.bcue-w__save.is-updated { animation: none; }
}

/* Total repetido bajo el precio principal de la ficha (solo con pack) */
.bcue-price-total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem;
	margin: 0.35rem 0 0.6rem;
	font-size: 0.95rem;
	color: var(--bcue-muted, #6b7280);
}
.bcue-price-total__amount {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--bcue-text, #111827);
}

.bcue-w__hint {
	flex: 1;
	margin: 0;
	min-width: 200px;
	color: var(--bcue-muted);
	font-size: 0.85rem;
	display: flex;
	align-items: center;
	gap: 0.35rem;
}
.bcue-w__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.35rem;
	border: 0;
	border-radius: 10px;
	background: var(--bcue-accent);
	color: #fff;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	transition:
		opacity 0.15s,
		transform 0.1s;
	white-space: nowrap;
}
.bcue-w__cta:hover:not(:disabled) {
	opacity: 0.92;
	transform: translateY(-1px);
}
.bcue-w__cta:active:not(:disabled) {
	transform: translateY(0);
}
.bcue-w__cta:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────────────────
   12. PACK UPGRADE — LAYOUTS
   5 variantes seleccionables desde el admin (BCUE_UPGRADE_LAYOUT):
     - cards     → tarjetas en columna con foto, precio, descripción y piezas
     - list      → fila horizontal compacta (thumb 56px + meta)
     - compact   → líneas pegadas sin imagen ni desc
     - accordion → solo el seleccionado expande desc+piezas
     - grid      → cuadrícula 2/3 cols con imagen banner arriba

   Spacing uniforme entre los 5 layouts vía --bcue-gap-* / --bcue-pad-*.
   Responsive con @container (el widget se adapta a SU contenedor, no al
   viewport) — clave para temas que ponen el widget en sidebar estrecho.
   ───────────────────────────────────────────────────────────────────── */

/* Default (cards) — flujo vertical en columna */
.bcue-w--upgrade .bcue-w__grid {
	display: flex;
	flex-direction: column;
	gap: var(--bcue-gap-md);
}

/* CRÍTICO: el TPL _upgrade_widget envuelve todas las opciones en un
   <div class="bcue-upw"> intermedio. Sin esto, los `display: grid` del
   `.bcue-w__grid` solo veían un hijo (el wrapper) y no podían distribuir
   las tarjetas. `display: contents` hace que el wrapper desaparezca del
   árbol de renderizado: sus hijos pasan a ser hijos directos del grid. */
.bcue-w--upgrade .bcue-w__grid > .bcue-upw {
	display: contents;
}
/* El wrapper de la fila de presets también es transparente por defecto;
   solo en móvil + acordeón se materializa como slider horizontal. */
.bcue-upw__row {
	display: contents;
}

/* ── "Sin upgrade" — barra horizontal SIEMPRE encima (todos los layouts) ──
   Es una meta-opción, no un upgrade más: visualmente debe quedar separada
   del resto. order:-1 fuerza que vaya antes aunque el HTML la coloque en
   otra posición; en layouts grid/accordion ocupa todo el ancho. */
.bcue-w--upgrade .bcue-upw__option--none {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	text-align: left;
	gap: var(--bcue-gap-sm);
	min-height: 0;
	padding: var(--bcue-pad-card-sm);
	margin-bottom: var(--bcue-gap-xs);
	grid-column: 1 / -1 !important; /* full-width en layouts de grid */
	order: -1 !important;
	grid-template-columns: none !important; /* anula grid heredado del default */
}
.bcue-w--upgrade .bcue-upw__option--none .bcue-upw__radio-box {
	position: static !important;
	box-shadow: none !important;
}
.bcue-w--upgrade .bcue-upw__option--none .bcue-upw__img {
	display: none !important;
}
.bcue-w--upgrade .bcue-upw__option--none .bcue-upw__body {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: var(--bcue-gap-sm);
	flex: 1;
	width: auto !important;
	padding: 0 !important;
}
.bcue-w--upgrade .bcue-upw__option--none .bcue-upw__top {
	flex-direction: row !important;
	align-items: center !important;
	gap: var(--bcue-gap-xs);
	width: auto !important;
}
.bcue-w--upgrade .bcue-upw__option--none .bcue-upw__name {
	font-size: 0.95rem;
}

/* ── LIST ────────────────────────────────────────────────────────────── */
.bcue-w--upgrade.bcue-w--layout-list .bcue-w__grid {
	gap: var(--bcue-gap-xs);
}
.bcue-w--upgrade.bcue-w--layout-list .bcue-upw__option {
	grid-template-columns: 24px 56px 1fr;
	column-gap: var(--bcue-gap-sm);
	padding: var(--bcue-pad-card-sm);
	border-radius: 8px;
}
.bcue-w--upgrade.bcue-w--layout-list .bcue-upw__img,
.bcue-w--upgrade.bcue-w--layout-list .bcue-upw__img img {
	width: 56px;
	height: 56px;
}
.bcue-w--upgrade.bcue-w--layout-list .bcue-upw__desc {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-height: 1.4em;
	font-size: 0.78rem;
}
.bcue-w--upgrade.bcue-w--layout-list .bcue-upw__parts {
	display: none;
}
.bcue-w--upgrade.bcue-w--layout-list .bcue-upw__option--noimg {
	grid-template-columns: 24px 1fr;
}

/* ── COMPACT ─────────────────────────────────────────────────────────── */
.bcue-w--upgrade.bcue-w--layout-compact .bcue-w__grid {
	gap: 0;
}
.bcue-w--upgrade.bcue-w--layout-compact .bcue-upw__option {
	grid-template-columns: 24px 1fr;
	padding: 0.55rem var(--bcue-gap-md);
	border-radius: 0;
	border-width: 1px;
	border-top: 0;
}
.bcue-w--upgrade.bcue-w--layout-compact .bcue-upw__option:first-child {
	border-top-width: 1px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}
.bcue-w--upgrade.bcue-w--layout-compact .bcue-upw__option:last-child {
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}
.bcue-w--upgrade.bcue-w--layout-compact .bcue-upw__img,
.bcue-w--upgrade.bcue-w--layout-compact .bcue-upw__desc,
.bcue-w--upgrade.bcue-w--layout-compact .bcue-upw__parts,
.bcue-w--upgrade.bcue-w--layout-compact .bcue-upw__labor {
	display: none;
}
.bcue-w--upgrade.bcue-w--layout-compact .bcue-upw__top {
	row-gap: 0.1rem;
}

/* ── ACCORDION ───────────────────────────────────────────────────────── */
/* Diseño "tiles + drawer":
     fila superior de tarjetas cuadradas con imagen / nombre / precio,
     drawer único debajo que se expande con descripción + mano de obra +
     piezas de la opción seleccionada. "Sin upgrade" colapsa el drawer. */
.bcue-w--upgrade.bcue-w--layout-accordion .bcue-w__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0.6rem;
}
/* ── ACCORDION · MÓVIL: mismo tile que en PC, pero en un slider ──────────
   Las tiles NO cambian de aspecto respecto a escritorio (imagen arriba,
   nombre y precio debajo). Solo dejan de apilarse en grid: una sola fila
   horizontal con scroll-snap (~2 tarjetas + un pequeño asomo de la siguiente
   que invita a deslizar). El detalle sigue en el drawer. */
@media (max-width: 600px) {
	.bcue-w--upgrade.bcue-w--layout-accordion .bcue-w__grid {
		display: block;
	}
	.bcue-w--upgrade.bcue-w--layout-accordion .bcue-upw__row {
		display: flex;
		flex-wrap: nowrap;
		gap: 0.5rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.4rem; /* aire para la barra de scroll */
		scrollbar-width: thin;
	}
	.bcue-w--upgrade.bcue-w--layout-accordion .bcue-upw__row .bcue-upw__option {
		flex: 0 0 44%;
		max-width: 44%;
		scroll-snap-align: start;
	}
	/* "Sin upgrade" y drawer: bloques a todo el ancho fuera del slider */
	.bcue-w--upgrade.bcue-w--layout-accordion .bcue-upw__option--none {
		margin-bottom: 0.5rem;
	}
	.bcue-w--upgrade.bcue-w--layout-accordion .bcue-upw__drawer.is-open {
		margin-top: 0.4rem;
		padding: 0.8rem 0.9rem;
	}
}
.bcue-w--upgrade.bcue-w--layout-accordion .bcue-upw__option {
	/* Cada opción es una tile compacta — solo head visible. */
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 0.65rem;
	border-radius: 10px;
	position: relative;
	min-height: 150px;
	text-align: center;
	grid-template-columns: none; /* anula el grid heredado del default */
}
.bcue-w--upgrade.bcue-w--layout-accordion .bcue-upw__radio-box {
	position: absolute;
	top: 0.45rem;
	left: 0.45rem;
	z-index: 2;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.bcue-w--upgrade.bcue-w--layout-accordion .bcue-upw__img {
	width: 100%;
	height: 78px;
	margin: 0 0 0.5rem;
	background: var(--bcue-surface);
	border-radius: 6px;
	overflow: hidden;
}
.bcue-w--upgrade.bcue-w--layout-accordion .bcue-upw__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bcue-w--upgrade.bcue-w--layout-accordion .bcue-upw__option--noimg .bcue-upw__img {
	display: none;
}
.bcue-w--upgrade.bcue-w--layout-accordion .bcue-upw__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	flex: 1;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}
.bcue-w--upgrade.bcue-w--layout-accordion .bcue-upw__top {
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	width: 100%;
}
.bcue-w--upgrade.bcue-w--layout-accordion .bcue-upw__name {
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.25;
}
/* Precio en UNA línea: antes (tachado) · ahora · −descuento%. */
.bcue-w--upgrade.bcue-w--layout-accordion .bcue-upw__price-group {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 0.3rem;
}
.bcue-w--upgrade.bcue-w--layout-accordion .bcue-upw__price {
	font-size: 0.92rem;
}
.bcue-w--upgrade.bcue-w--layout-accordion .bcue-upw__price-badge {
	align-self: center;
}
/* Dentro de cada tile NO mostramos desc/labor/parts: van al drawer. */
.bcue-w--upgrade.bcue-w--layout-accordion .bcue-upw__option .bcue-upw__desc,
.bcue-w--upgrade.bcue-w--layout-accordion .bcue-upw__option .bcue-upw__labor,
.bcue-w--upgrade.bcue-w--layout-accordion .bcue-upw__option .bcue-upw__parts {
	display: none;
}

/* "Sin upgrade" en acordeón: fila compacta a todo el ancho — solo la línea
   de texto + padding, en vez de una tile alta como las de los presets. */
.bcue-w--upgrade.bcue-w--layout-accordion .bcue-upw__option--none {
	grid-column: 1 / -1;
	min-height: 0;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 0.55rem;
	padding: 0.5rem 0.75rem;
	text-align: left;
}
.bcue-w--upgrade.bcue-w--layout-accordion .bcue-upw__option--none .bcue-upw__radio-box {
	position: static;
	box-shadow: none;
	flex: 0 0 auto;
}
.bcue-w--upgrade.bcue-w--layout-accordion .bcue-upw__option--none .bcue-upw__body {
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 0.55rem;
}
.bcue-w--upgrade.bcue-w--layout-accordion .bcue-upw__option--none .bcue-upw__top {
	flex-direction: row;
	align-items: center;
	width: auto;
	gap: 0.55rem;
}
/* La descripción "No añadir ninguna actualización" sobra en la fila compacta. */
.bcue-w--upgrade.bcue-w--layout-accordion .bcue-upw__option--none .bcue-upw__desc {
	display: none;
}

/* Drawer compartido bajo la fila — el JS le clona desc/labor/parts del
   preset seleccionado y le pone .is-open. "Sin upgrade" → vacío + hidden. */
.bcue-upw__drawer {
	grid-column: 1 / -1;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	margin: 0;
	padding: 0;
	background: var(--bcue-surface);
	border-radius: var(--bcue-radius);
	transition:
		max-height 0.3s ease,
		opacity 0.25s,
		padding 0.25s,
		margin 0.25s,
		border-color 0.25s;
	border: 0 solid transparent;
}
.bcue-upw__drawer.is-open {
	max-height: 1200px;
	opacity: 1;
	margin-top: 0.6rem;
	padding: 1rem 1.2rem;
	border: 1px solid var(--bcue-border);
}
.bcue-upw__drawer-inner {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}
.bcue-upw__drawer .bcue-upw__desc {
	font-size: 0.92rem;
	color: var(--bcue-text);
	line-height: 1.5;
	display: block;
}
.bcue-upw__drawer .bcue-upw__parts {
	margin: 0;
}
.bcue-upw__drawer .bcue-upw__labor {
	margin: 0;
}

/* Otros layouts: drawer queda oculto */
.bcue-w--upgrade:not(.bcue-w--layout-accordion) .bcue-upw__drawer {
	display: none !important;
}
.bcue-w--upgrade.bcue-w--layout-accordion .bcue-upw__drawer[hidden] {
	display: block;
}

/* ── GRID ────────────────────────────────────────────────────────────── */
/* Cuadrícula responsiva por CONTAINER queries — se adapta al ancho del
   widget (sidebar/columna principal/full-width) y no al viewport.
   Cada card: imagen banner arriba + body debajo + radio flotante. */
.bcue-w--upgrade.bcue-w--layout-grid .bcue-w__grid {
	display: grid;
	grid-template-columns: 1fr; /* default: 1 col en sidebars angostos */
	gap: var(--bcue-gap-md);
}
@container (min-width: 460px) {
	.bcue-w--upgrade.bcue-w--layout-grid .bcue-w__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@container (min-width: 760px) {
	.bcue-w--upgrade.bcue-w--layout-grid .bcue-w__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
/* Fallback para navegadores sin container queries: usa media queries. */
@supports not (container-type: inline-size) {
	@media (min-width: 600px) {
		.bcue-w--upgrade.bcue-w--layout-grid .bcue-w__grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}
	@media (min-width: 1100px) {
		.bcue-w--upgrade.bcue-w--layout-grid .bcue-w__grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}
}

/* Card individual del grid: rompe el grid-template-columns horizontal
   del default (.bcue-upw__option) con un display:flex columna y un
   reset explícito de grid-template-columns para Safari/iOS antiguos
   que respetan el valor heredado dentro de flex. */
.bcue-w--upgrade.bcue-w--layout-grid .bcue-upw__option {
	display: flex;
	flex-direction: column;
	grid-template-columns: none;
	padding: 0;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
}
.bcue-w--upgrade.bcue-w--layout-grid .bcue-upw__radio-box {
	position: absolute;
	top: var(--bcue-gap-sm);
	left: var(--bcue-gap-sm);
	z-index: 2;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.bcue-w--upgrade.bcue-w--layout-grid .bcue-upw__img {
	width: 100%;
	height: 140px;
	border-radius: 0;
	background: var(--bcue-surface);
	flex-shrink: 0;
}
.bcue-w--upgrade.bcue-w--layout-grid .bcue-upw__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bcue-w--upgrade.bcue-w--layout-grid .bcue-upw__option--noimg .bcue-upw__img,
.bcue-w--upgrade.bcue-w--layout-grid .bcue-upw__option--none .bcue-upw__img {
	display: none;
}
.bcue-w--upgrade.bcue-w--layout-grid .bcue-upw__body {
	padding: var(--bcue-gap-md) var(--bcue-pad-card) var(--bcue-pad-card);
	display: flex;
	flex-direction: column;
	gap: var(--bcue-gap-xs);
	flex: 1;
	min-width: 0;
}
.bcue-w--upgrade.bcue-w--layout-grid .bcue-upw__option--noimg .bcue-upw__body {
	padding-top: 2.5rem; /* hueco para el radio flotante */
}
.bcue-w--upgrade.bcue-w--layout-grid .bcue-upw__top {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
}
/* En grid las cards son estrechas (hasta 3 columnas): mantenemos las filas
   compactas ocultando la miniatura por pieza, pero conservando filas
   uniformes a todo el ancho con badge · nombre enlazado · precio. */
.bcue-w--upgrade.bcue-w--layout-grid .bcue-upw__part-img {
	display: none;
}

/* ─────────────────────────────────────────────────────────────────────
   13. PACK UPGRADE — OPCIÓN DE PRESET
   Estructura de columnas:
     col 1 (24px) → radio-box
     col 2 (88px) → imagen del preset (solo si .bcue-upw__option tiene imagen)
     col 3 (1fr)  → cuerpo (nombre / precio / desc / piezas)
   Cuando NO hay imagen (.bcue-upw__option--noimg) el body salta a col 2.
   Modifier explícito, no `:has()` — compatibilidad con Firefox < 121 y Safari < 15.4.
   ───────────────────────────────────────────────────────────────────── */
.bcue-upw__option {
	display: grid;
	grid-template-columns: 24px 88px 1fr;
	grid-template-rows: auto;
	column-gap: var(--bcue-gap-md);
	row-gap: var(--bcue-gap-xs);
	align-items: start;
	padding: var(--bcue-pad-card);
	cursor: pointer;
	border: 2px solid var(--bcue-border);
	border-radius: var(--bcue-radius);
	background: #fff;
	transition:
		border-color 0.18s,
		box-shadow 0.18s,
		background 0.18s;
	position: relative;
}
.bcue-upw__option:hover {
	border-color: var(--bcue-accent);
	box-shadow: var(--bcue-shadow-sm);
}
.bcue-upw__option.is-selected {
	border-color: var(--bcue-accent);
	background: var(--bcue-selected-bg);
	box-shadow:
		0 0 0 1px var(--bcue-accent),
		var(--bcue-shadow-sm);
}
.bcue-upw__option--none {
	background: var(--bcue-surface);
	border-style: dashed;
}
.bcue-upw__option--none.is-selected {
	border-style: solid;
}
/* Preset con alguna pieza sin stock: look apagado pero SELECCIONABLE
   (el cliente puede desplegarlo y ver qué incluye); el añadir al carrito
   se bloquea en JS + servidor. */
.bcue-upw__option--nostock {
	opacity: 0.65;
	filter: grayscale(0.35);
	background: var(--bcue-surface);
}
/* Los precios se apagan del todo: que NO parezca comprable. Anula el rojo
   de la rebaja y el badge de descuento. */
.bcue-upw__option--nostock .bcue-upw__price,
.bcue-upw__option--nostock .bcue-upw__price--reduced,
.bcue-upw__option--nostock .bcue-upw__price--free,
.bcue-upw__option--nostock .bcue-upw__price-strike,
.bcue-upw__option--nostock .bcue-upw__part-price,
.bcue-upw__option--nostock .bcue-upw__part-price--reduced {
	color: #9ca3af !important;
}
.bcue-upw__option--nostock .bcue-upw__price-badge {
	background: #f3f4f6 !important;
	color: #9ca3af !important;
	box-shadow: none;
}
/* Seleccionado para "ver contenido": estado AVISO, no estado compra.
   Borde y fondo rojizos en vez del acento — visualmente imposible de
   confundir con una selección normal. */
.bcue-upw__option--nostock.is-selected {
	opacity: 1;
	filter: grayscale(0.1);
	border-color: #dc2626 !important;
	background: #fef2f2 !important;
	box-shadow: 0 0 0 1px #dc2626 !important;
}
.bcue-upw__option--nostock.is-selected .bcue-upw__radio-box {
	border-color: #dc2626;
}
/* Banner dentro del drawer cuando el preset elegido está sin stock */
/* Si el drawer abre con el banner de sin stock, sus precios también se
   apagan (el contenido clonado ya no vive dentro de .option--nostock). */
.bcue-upw__drawer-nostock ~ * .bcue-upw__part-price,
.bcue-upw__drawer-nostock ~ * .bcue-upw__part-price--reduced,
.bcue-upw__drawer-nostock ~ .bcue-upw__parts .bcue-upw__part-price {
	color: #9ca3af !important;
}
.bcue-upw__drawer-nostock {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.8rem;
	background: #fef2f2;
	border: 1px solid #fca5a5;
	border-left: 4px solid #dc2626;
	border-radius: 6px;
	color: #991b1b;
	font-size: 0.88rem;
	font-weight: 700;
	line-height: 1.35;
}
.bcue-upw__nostock-badge {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 1px 7px;
	background: var(--bcue-err);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	border-radius: 4px;
	vertical-align: middle;
	text-transform: uppercase;
}
/* Sin imagen: colapsa la columna del thumb */
.bcue-upw__option--noimg {
	grid-template-columns: 24px 1fr;
}

/* Radio oculto + box visual */
.bcue-upw__radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.bcue-upw__radio-box {
	grid-column: 1;
	grid-row: 1;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border: 2px solid var(--bcue-border);
	border-radius: 50%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.15s;
	flex-shrink: 0;
}
.bcue-upw__radio-box::after {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--bcue-accent);
	transform: scale(0);
	transition: transform 0.15s;
}
.bcue-upw__option.is-selected .bcue-upw__radio-box {
	border-color: var(--bcue-accent);
}
.bcue-upw__option.is-selected .bcue-upw__radio-box::after {
	transform: scale(1);
}

/* Imagen del preset */
.bcue-upw__img {
	grid-column: 2;
	grid-row: 1 / span 2;
	width: 88px;
	height: 88px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--bcue-surface);
	flex-shrink: 0;
	align-self: start;
}
.bcue-upw__img img {
	width: 88px;
	height: 88px;
	object-fit: cover;
	display: block;
}

/* Contenido: nombre + precio + descripción + piezas */
.bcue-upw__body {
	grid-column: 3;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}
/* Sin imagen: el body ocupa desde col 2 (col 3 ya no existe) */
.bcue-upw__option--noimg .bcue-upw__body {
	grid-column: 2;
}

.bcue-upw__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.bcue-upw__name {
	font-weight: 700;
	font-size: 1rem;
	color: var(--bcue-text);
}
.bcue-upw__price {
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--bcue-accent);
	white-space: nowrap;
	flex-shrink: 0;
}
.bcue-upw__price--free {
	color: var(--bcue-ok);
	font-size: 0.85rem;
	font-weight: 600;
}
/* Grupo de precio con rebaja: tachado + nuevo precio + badge -X% */
.bcue-upw__price-group {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.bcue-upw__price-strike {
	color: var(--bcue-muted);
	font-size: 0.8rem;
	font-weight: 500;
	text-decoration: line-through;
}
.bcue-upw__price--reduced {
	color: var(--bcue-err);
}
.bcue-upw__price-badge {
	position: absolute;
	top: 5px;
	right: 5px;
	display: inline-block;
	background: var(--bcue-err);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 4px;
	line-height: 1.4;
}
.bcue-upw__part-price-strike {
	color: var(--bcue-muted);
	font-size: 0.68rem;
	text-decoration: line-through;
	margin-right: 0.15rem;
}
.bcue-upw__part-price--reduced {
	color: var(--bcue-err);
}
.bcue-upw__desc {
	font-size: 0.85rem;
	color: var(--bcue-muted);
	line-height: 1.4;
}
.bcue-upw__desc b,
.bcue-upw__desc strong {
	color: var(--bcue-text);
	font-weight: 700;
}
.bcue-upw__desc i,
.bcue-upw__desc em {
	font-style: italic;
}
.bcue-upw__desc u {
	text-decoration: underline;
}
.bcue-upw__desc p {
	margin: 0 0 0.35em;
}
.bcue-upw__desc p:last-child {
	margin-bottom: 0;
}
.bcue-upw__desc div {
	margin: 0;
}
/* Listas dentro de la descripción del upgrade */
.bcue-upw__desc ul,
.bcue-upw__desc ol {
	margin: 0.2em 0 0.35em;
	padding-left: 1.25em;
}
.bcue-upw__desc ul {
	list-style: disc;
}
.bcue-upw__desc ol {
	list-style: decimal;
}
.bcue-upw__desc li {
	margin: 0 0 0.1em;
}

/* Mano de obra: línea ligera (sin recuadro). Un punto de color + texto. */
.bcue-upw__labor {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	margin-top: 0.35rem;
	font-size: 0.78rem;
	line-height: 1.3;
	flex-wrap: wrap;
}
.bcue-upw__labor-dot {
	align-self: center;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex: 0 0 auto;
}
.bcue-upw__labor--free {
	color: #047857;
	font-weight: 600;
}
.bcue-upw__labor--free .bcue-upw__labor-dot {
	background: #10b981;
}
.bcue-upw__labor-note {
	color: var(--bcue-muted);
	font-weight: 400;
	font-size: 0.74rem;
}
.bcue-upw__labor--paid {
	color: var(--bcue-text);
}
.bcue-upw__labor--paid .bcue-upw__labor-dot {
	background: #f59e0b;
}
.bcue-upw__labor--paid strong {
	font-weight: 700;
}

/* Lista de piezas */
.bcue-upw__parts {
	list-style: none;
	margin: 0.3rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}
/* Cada pieza es una fila a TODO el ancho (todas iguales): badge · imagen ·
   nombre (crece) · precio (pegado a la derecha). */
.bcue-upw__part {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	width: 100%;
	font-size: 0.78rem;
	color: var(--bcue-muted);
	background: #f3f4f6;
	border-radius: 6px;
	padding: 3px 7px;
	line-height: 1.3;
}
/* Nombre = enlace al producto; ocupa el espacio sobrante y empuja el
   precio a la derecha. min-width:0 permite el truncado del texto largo. */
.bcue-upw__part-name {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--bcue-text);
	text-decoration: none;
}
/* Botón "ver producto" (enlace ofuscado, sin href) */
.bcue-go {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 6px;
	background: transparent;
	color: var(--bcue-muted);
	cursor: pointer;
}
.bcue-item__row > .bcue-toggle {
	flex: 1 1 auto;
	min-width: 0;
}
/* El botón va SIEMPRE en la última columna de la fila (tras el precio): queda
   alineado en vertical en todas las piezas, tenga el nombre una o dos líneas. */
.bcue-item__row > .bcue-go {
	order: 3;
	margin: 0 0 0 0.1rem;
}
.bcue-item__row > .bcue-item__price {
	order: 2;
}
.bcue-upw__part > .bcue-go {
	order: 9;
	width: 22px;
	height: 22px;
}
.bcue-go:hover,
.bcue-go:focus-visible {
	color: var(--bcue-accent);
	border-color: currentColor;
}
.bcue-upw__part-img {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: 5px;
	display: block;
	flex: 0 0 auto;
	border: 1px solid var(--bcue-border);
	background: #fff;
}
/* Badge de cantidad — SIEMPRE visible delante de la pieza ("1×", "2×"…).
   Llamativo: pill con el color de acento; si hay más de una unidad sube
   a rojo para que no se escape. */
.bcue-upw__part-qtybadge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	padding: 1px 6px;
	background: var(--bcue-accent, #0f766e);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 1.5;
	border-radius: 999px;
	letter-spacing: 0.02em;
}
.bcue-upw__part-qtybadge--multi {
	background: #dc2626;
	font-size: 0.78rem;
	box-shadow: 0 1px 3px rgba(220, 38, 38, 0.35);
}
/* (legacy) qty al final de la línea — ya no se renderiza, se mantiene por
   si hay HTML cacheado de versiones anteriores. */
.bcue-upw__part-qty {
	font-weight: 700;
	color: var(--bcue-text);
}
.bcue-upw__part-price {
	font-weight: 700;
	color: var(--bcue-accent);
	font-size: 0.72rem;
	white-space: nowrap;
	padding-left: 0.15rem;
}
.bcue-upw__part-nostock {
	color: var(--bcue-err);
	font-weight: 600;
	font-size: 0.7rem;
	background: #fef2f2;
	border-radius: 4px;
	padding: 1px 5px;
}
.bcue-upw__empty {
	color: var(--bcue-muted);
	font-style: italic;
	padding: 0.75rem 0;
	grid-column: 1 / -1;
}

/* Imagen de preset (alias legacy para compatibilidad) */
.bcue-upw__cover {
	width: 88px;
	height: 88px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--bcue-surface);
	flex-shrink: 0;
}
.bcue-upw__cover img {
	width: 88px;
	height: 88px;
	object-fit: cover;
	display: block;
}

/* ─────────────────────────────────────────────────────────────────────
   14. BADGE EN CARRITO (contexto pack/upgrade)
   ───────────────────────────────────────────────────────────────────── */
.bcue-cart-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-top: 0.4rem;
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.5;
}
.bcue-cart-badge--pack {
	background: #f0fdf4;
	color: #065f46;
	border: 1px solid #86efac;
}
.bcue-cart-badge--upgrade {
	background: #eff6ff;
	color: #1e40af;
	border: 1px solid #93c5fd;
}
.bcue-cart-badge--upgrade-part {
	background: #f5f3ff;
	color: #5b21b6;
	border-color: #c4b5fd;
	font-weight: 500;
}

/* Indentación visual de piezas del upgrade bajo la base.
   Selector doble (clase + atributo) para máxima compatibilidad: si algún
   tema custom resetea las clases o las purga durante re-render del SPA,
   el data-attribute sobrevive y el estilo sigue aplicándose.
   !important en propiedades clave porque temas custom suelen ganar la
   especificidad con selectores como .cart-grid-body .cart-item. */
.bcue-cart-row--upgrade-part,
[data-bcue-upgrade-role='part'] {
	background: linear-gradient(90deg, rgba(124, 58, 237, 0.07) 0, transparent 80%) !important;
	border-left: 4px solid #8b5cf6 !important;
	padding-left: 1.5rem !important;
	margin-left: 1.5rem !important;
	position: relative !important;
}
.bcue-cart-row--upgrade-part::before,
[data-bcue-upgrade-role='part']::before {
	content: '↳' !important;
	position: absolute !important;
	left: 0.4rem !important;
	top: 1rem !important;
	color: #8b5cf6 !important;
	font-weight: 700 !important;
	font-size: 1.2rem !important;
	line-height: 1 !important;
	pointer-events: none;
}
.bcue-cart-row--upgrade-base,
[data-bcue-upgrade-role='base'] {
	border-left: 4px solid #3b82f6 !important;
	background: rgba(59, 130, 246, 0.05) !important;
	padding-left: 0.75rem !important;
}

/* ─────────────────────────────────────────────────────────────────────
   15. RESPONSIVE
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.bcue-w {
		padding: 0.9rem;
	}
	.bcue-w__foot {
		flex-direction: column;
		align-items: stretch;
	}
	.bcue-w__hint {
		min-width: 0;
	}
	.bcue-w__cta {
		justify-content: center;
	}
	.bcue-upw__option {
		grid-template-columns: 24px 1fr;
	}
	.bcue-upw__body {
		grid-column: 2;
	}
	.bcue-upw__top {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.2rem;
	}
}

@container (max-width: 420px) {
	.bcue-upw__option {
		grid-template-columns: 24px 1fr;
	}
	.bcue-upw__img {
		display: none;
	}
	.bcue-upw__body {
		grid-column: 2;
	}
}

/* ─────────────────────────────────────────────────────────────────────
   17. TOAST DE FEEDBACK (showToast() en bcue-front.js)
   ───────────────────────────────────────────────────────────────────── */
.bcue-toast-host {
	position: fixed;
	bottom: 1.25rem;
	right: 1.25rem;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	pointer-events: none;
}
.bcue-toast {
	background: #111827;
	color: #fff;
	padding: 0.75rem 1.1rem;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 500;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	opacity: 0;
	transform: translateY(8px);
	transition:
		opacity 0.22s,
		transform 0.22s;
	max-width: 320px;
}
.bcue-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}
@media (max-width: 480px) {
	.bcue-toast-host {
		left: 1rem;
		right: 1rem;
		bottom: 1rem;
		align-items: center;
	}
	.bcue-toast {
		max-width: 100%;
		width: 100%;
		text-align: center;
	}
}

/* ─────────────────────────────────────────────────────────────────────
   18. BADGE DEL CARRITO (displayCartExtraProductActions)
   Renderizado por HookDispatcher::displayCartExtraProductActions debajo
   de cada línea del carrito/checkout indicando bundle/upgrade asociado.
   ───────────────────────────────────────────────────────────────────── */
.bcue-cart-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.6rem;
	margin: 0.35rem 0 0;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.2;
	border-radius: 999px;
	background: var(--bcue-selected-bg, #eff6ff);
	color: var(--bcue-accent, #1f2937);
	border: 1px solid color-mix(in srgb, var(--bcue-accent, #1f2937) 30%, transparent);
}
.bcue-cart-badge--upgrade {
	background: #ecfdf5;
	color: #047857;
	border-color: #a7f3d0;
}
.bcue-cart-badge__icon {
	font-size: 1rem;
	line-height: 1;
}

/* ─────────────────────────────────────────────────────────────────────
   19. RESUMEN DE CONFIGURACIÓN EN CHECKOUT (displayCheckoutSummaryTop)
   Réplica/producto base + componentes del pack/upgrade con sangría.
   ───────────────────────────────────────────────────────────────────── */
.bcue-co {
	margin: 0 0 1rem;
	padding: 0.85rem 1rem;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	background: #f9fafb;
}
.bcue-co__title {
	margin: 0 0 0.6rem;
	font-size: 0.95rem;
	font-weight: 700;
	color: #111827;
}
.bcue-co__bundle {
	margin: 0 0 0.75rem;
}
.bcue-co__bundle:last-child {
	margin-bottom: 0;
}
.bcue-co__base {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-weight: 600;
	color: #111827;
}
.bcue-co__icon {
	line-height: 1;
}
.bcue-co__preset {
	font-size: 0.8rem;
	font-weight: 600;
	padding: 0.1rem 0.55rem;
	border-radius: 999px;
	background: #ecfdf5;
	color: #047857;
	border: 1px solid #a7f3d0;
}
.bcue-co__items {
	list-style: none;
	margin: 0.35rem 0 0;
	padding: 0 0 0 1.4rem; /* sangría de los componentes */
}
.bcue-co__item {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.12rem 0;
	font-size: 0.85rem;
	color: #374151;
}
.bcue-co__item-arrow {
	color: #9ca3af;
}
.bcue-co__qty {
	font-weight: 600;
	color: #111827;
}
.bcue-co__svc,
.bcue-co__item--free .bcue-co__qty {
	font-size: 0.75rem;
	color: #6b7280;
}
.bcue-co__item--labor {
	font-style: italic;
}

/* Aviso al cliente cuando un pack contenedor se cambia por sus piezas */
.bcue-notice {
	margin-bottom: 1rem;
}

/* ─────────────────────────────────────────────────────────────────────
   MÁRGENES UNIFICADOS (1.2.8) — todos los diseños menos los acordeones,
   que ya van a ras.
   - Las tarjetas de pieza, sueltas o dentro de un grupo, comparten los
     mismos bordes izquierdo y derecho: la rejilla tiene el mismo sangrado
     que el interior de un grupo (padding + 1 px de borde) y los grupos lo
     anulan con margen negativo para seguir a ras del borde exterior, como
     el resumen. Así los precios y los −/+ caen en la misma vertical.
   - La cabecera del grupo usa el mismo sangrado interior que una tarjeta:
     título y contador alineados con el contenido de las piezas.
   - Entre piezas de un grupo, el mismo espacio que entre piezas sueltas.
   ───────────────────────────────────────────────────────────────────── */
.bcue-w {
	--bcue-group-pad: 0.9rem;
	--bcue-group-inset: calc(var(--bcue-group-pad) + 1px);
}
.bcue-w:not(.bcue-w--layout-accordion) .bcue-w__grid {
	padding-inline: var(--bcue-group-inset);
}
.bcue-w:not(.bcue-w--layout-accordion) .bcue-w__grid > .bcue-group {
	margin-inline: calc(-1 * var(--bcue-group-inset));
	padding: var(--bcue-group-pad);
	gap: inherit;
}
.bcue-w:not(.bcue-w--layout-accordion) .bcue-group__legend {
	padding-inline: var(--bcue-gap-md);
}

/* ─────────────────────────────────────────────────────────────────────
   FLUJO GUIADO (1.3.0): pasos que se despliegan y se pliegan.
   Lo activa el JS (clase .bcue-w--steps); sin JS todo queda desplegado.
   Funciona igual en todos los layouts: solo se oculta el contenido del
   grupo plegado y se anima la altura del propio grupo.
   ───────────────────────────────────────────────────────────────────── */
.bcue-w--steps .bcue-group {
	box-sizing: border-box;
	min-width: 0; /* el fieldset mide min-content por defecto */
	max-width: 100%;
	/* La pista automática del grid crece con el texto sin cortar del resumen */
	grid-template-columns: minmax(0, 1fr);
	border-style: solid;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.bcue-w--steps .bcue-group.is-animating {
	overflow: hidden;
}
.bcue-w--steps .bcue-group:not(.is-collapsed):not(.is-closing) {
	border-color: var(--bcue-accent);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}
.bcue-w--steps .bcue-group.is-complete.is-collapsed {
	background: var(--bcue-surface);
}
.bcue-w--steps .bcue-group.is-collapsed > .bcue-item,
.bcue-w--steps .bcue-group.is-collapsed > .bcue-step__actions {
	display: none !important;
}
.bcue-w--steps .bcue-group.has-error {
	border-color: var(--bcue-err);
}

/* Cabecera del paso (la leyenda es el botón). */
.bcue-w.bcue-w--steps .bcue-group .bcue-group__legend {
	padding-right: 2.5rem; /* hueco para el chevron: el contador no se le sube encima */
}
.bcue-w--steps .bcue-group__legend {
	justify-content: flex-start;
	position: relative;
	align-items: center;
	padding-right: 2.25rem;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	border-radius: 8px;
}
.bcue-w--steps .bcue-group__legend::after {
	content: none !important; /* el +/− del layout acordeón sobra */
}
.bcue-w--steps .bcue-group__legend:focus-visible {
	outline: 2px solid var(--bcue-accent);
	outline-offset: 2px;
}
.bcue-step__num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	box-sizing: border-box;
	border: 1.5px solid var(--bcue-border);
	border-radius: 50%;
	background: #fff;
	color: var(--bcue-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.bcue-group:not(.is-collapsed) .bcue-step__num {
	border-color: var(--bcue-accent);
	color: var(--bcue-accent);
}
.bcue-group.is-complete .bcue-step__num {
	background: var(--bcue-accent);
	border-color: var(--bcue-accent);
}
.bcue-group.is-complete .bcue-step__num::before {
	content: '';
	width: 0.3rem;
	height: 0.55rem;
	margin-top: -2px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.bcue-step__chev {
	position: absolute;
	right: 0.6rem;
	top: 50%;
	width: 0.5rem;
	height: 0.5rem;
	margin-top: -0.4rem;
	border-right: 2px solid var(--bcue-muted);
	border-bottom: 2px solid var(--bcue-muted);
	transform: rotate(-135deg);
	transition: transform 0.25s ease;
}
.bcue-group.is-collapsed .bcue-step__chev,
.bcue-group.is-closing .bcue-step__chev {
	transform: rotate(45deg);
	margin-top: -0.6rem;
}

/* Resumen en vivo: solo con el paso plegado. */
.bcue-step__sum {
	order: 9;
	min-width: 0; /* sin esto un resumen largo ensancha la caja y rompe el diseño */
	overflow: hidden;
	font-family: inherit;
	flex: 0 0 100%;
	display: none;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0.1rem 0 0 2.25rem;
	max-width: calc(100% - 2.25rem);
	box-sizing: border-box;
	font-size: 0.88rem;
	line-height: 1.35;
	text-transform: none;
	letter-spacing: 0;
	color: var(--bcue-text);
}
.bcue-group.is-collapsed .bcue-step__sum,
.bcue-group.is-closing .bcue-step__sum {
	display: flex;
}
.bcue-step__sum-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
}
.bcue-step__sum-text.is-muted {
	color: var(--bcue-muted);
	font-weight: 400;
}
.bcue-step__sum-price {
	flex: 0 0 auto;
	font-weight: 700;
	color: var(--bcue-accent);
}
.bcue-w--steps .bcue-group--nocounter .bcue-group__counter {
	display: none;
}
.bcue-group.is-collapsed .bcue-group__rule,
.bcue-group.is-closing .bcue-group__rule,
.bcue-group.is-collapsed .bcue-group__counter,
.bcue-group.is-closing .bcue-group__counter {
	display: none;
}

/* Botón "Continuar / Listo". */
.bcue-step__actions {
	grid-column: 1 / -1;
	display: flex;
	justify-content: flex-end;
	padding-top: 0.25rem;
}
.bcue-step__actions[hidden] {
	display: none !important;
}
.bcue-step__next {
	appearance: none;
	border: 0;
	border-radius: 999px;
	padding: 0.5rem 1.2rem;
	background: var(--bcue-accent);
	color: #fff;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.15s ease;
}
.bcue-step__next:hover {
	filter: brightness(1.08);
}
.bcue-step__next:active {
	transform: scale(0.97);
}
.bcue-step__next:focus-visible {
	outline: 2px solid var(--bcue-accent);
	outline-offset: 2px;
}

/* ── Upgrades: la lista se pliega a la opción elegida ────────────────── */
.bcue-upw__option.is-folded {
	display: none !important;
}
.bcue-upw__option.is-animating {
	overflow: hidden;
	box-sizing: border-box;
	pointer-events: none;
}
.bcue-upw__bar {
	grid-column: 1 / -1;
	display: flex;
	justify-content: flex-start;
	margin-top: 0.4rem;
}
.bcue-upw__bar[hidden] {
	display: none;
}
.bcue-upw__change {
	position: relative;
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 1.4rem;
	padding: 0.45rem 2.2rem 0.45rem 1rem;
	border: 1px solid var(--bcue-border);
	border-radius: 999px;
	background: #fff;
	color: var(--bcue-text);
	font-size: 0.88rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.bcue-upw__change:hover,
.bcue-upw__change:focus-visible {
	border-color: var(--bcue-accent);
	color: var(--bcue-accent);
}
.bcue-upw__change .bcue-step__chev {
	right: 0.9rem;
	transform: rotate(45deg);
	margin-top: -0.6rem;
}
/* Con una sola tarjeta visible ocupa todo el ancho en cualquier layout
   (en el acordeón de "tiles" conserva su tamaño de tarjeta). */
.bcue-w--upgrade.is-picked .bcue-w__grid {
	grid-template-columns: minmax(0, 1fr) !important;
}
.bcue-w--upgrade.bcue-w--layout-accordion.is-picked .bcue-upw__option:not(.is-folded) {
	width: 100%;
	max-width: 15rem;
	justify-self: start;
}

@media (prefers-reduced-motion: reduce) {
	.bcue-w--steps .bcue-group,
	.bcue-step__num,
	.bcue-step__chev,
	.bcue-step__next,
	.bcue-upw__change {
		transition: none;
	}
}