/*
 * Sigase Badmeubel Configurator — estilos (task 019, UX redesign).
 *
 * Layout (DEC-019-11):
 *   Mobile : 1 col (visual, flow, upsell) con sticky-bottom CTAs.
 *   Desktop: 2 col 5/7: .__visual (sticky) | .__flow (stepper+panel+summary).
 *            Upsell full-width bajo ambas.
 *
 * BEM: prefijo sigase-badmeubel-cfg__ (DEC-019-3, no se refactoriza).
 * Respeta prefers-reduced-motion, env(safe-area-inset-bottom).
 */

/* ══ 1. Variables ══════════════════════════════════════════════════════ */
.sigase-badmeubel-cfg {
	/* Identidad Sigase (child theme) */
	--sbc-accent: var(--sigase-green, #6ba368);
	--sbc-accent-dark: var(--sigase-green-dark, #2f4f2c);
	--sbc-bg-soft: var(--sigase-green-bg, #f4faf3);

	/* Heredado del tema padre miniture */
	--sbc-surface: var(--site-bg-color, #ffffff);
	--sbc-surface-alt: #fafbfa;
	--sbc-border: var(--site-border-color, rgba(0, 0, 0, 0.12));
	--sbc-border-strong: rgba(0, 0, 0, 0.24);
	--sbc-text: var(--site-text-color, #1a1a1a);
	--sbc-heading: var(--site-heading-color, #181818);
	--sbc-text-muted: #5a5a5a;
	--sbc-price-color: var(--site-wc-price, var(--sbc-heading));
	--sbc-danger: #b3261e;

	/* Botones */
	--sbc-btn-primary-bg: var(--site-primary-button-bg, var(--sbc-accent-dark));
	--sbc-btn-primary-color: var(--site-primary-button-color, #ffffff);
	--sbc-btn-secondary-bg: var(--site-secondary-button-bg, transparent);
	--sbc-btn-secondary-color: var(--site-secondary-button-color, var(--sbc-accent-dark));

	/* Radius */
	--sbc-radius: 10px;
	--sbc-radius-sm: var(--site-field-radius, 6px);
	--sbc-btn-radius: var(--site-button-radius, var(--sbc-radius-sm));

	/* Spacing */
	--sbc-gap: 1rem;
	--sbc-gap-sm: 0.5rem;
	--sbc-gap-lg: 1.5rem;
	--sbc-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);

	/* Tipografía (hereda, sin override font-family) */
	--sbc-fs-xs: 0.75rem;
	--sbc-fs-sm: 0.875rem;
	--sbc-fs-base: 1rem;
	--sbc-fs-lg: 1.25rem;
	--sbc-fs-xl: 1.75rem;
	--sbc-fs-xxl: 2.25rem;

	/* Chips: fallback RGBA + progressive enhancement color-mix (DEC-019 C9) */
	--sbc-chip-bg: rgba(107, 163, 104, 0.14);
	--sbc-chip-bg: color-mix(in srgb, var(--sbc-accent) 14%, transparent);
	--sbc-chip-bg-hover: rgba(107, 163, 104, 0.26);
	--sbc-chip-bg-hover: color-mix(in srgb, var(--sbc-accent) 26%, transparent);

	/* Sticky offset bajo header Elementor/miniture */
	--sbc-sticky-offset: calc(var(--site-header-height, 100px) + var(--sbc-gap));

	display: block;
	color: var(--sbc-text);
	font-size: var(--sbc-fs-base);
	line-height: 1.5;
}

.sigase-badmeubel-cfg *,
.sigase-badmeubel-cfg *::before,
.sigase-badmeubel-cfg *::after {
	box-sizing: border-box;
}

/* A5-2: miniture aplica `text-transform: capitalize` a botones del tema
 * (selector `body .button, body button, body input[type=submit]` — specificity
 * 0,1,1). Rompe ortografía NL en valores dinámicos. Override puntual con
 * specificity 0,2,0 para ganar al tema sin `!important`. */
.sigase-badmeubel-cfg .sigase-badmeubel-cfg__chip,
.sigase-badmeubel-cfg .sigase-badmeubel-cfg__stepper-value,
.sigase-badmeubel-cfg .sigase-badmeubel-cfg__upsell-cta,
.sigase-badmeubel-cfg .sigase-badmeubel-cfg__btn--next,
.sigase-badmeubel-teaser .sigase-badmeubel-teaser__cta {
	text-transform: none;
}

/* ══ 2. Header + chips recap ═══════════════════════════════════════════ */
.sigase-badmeubel-cfg__header {
	margin: 0 0 var(--sbc-gap-lg);
}
.sigase-badmeubel-cfg__title {
	margin: 0 0 0.25rem;
	font-size: var(--sbc-fs-xl);
	line-height: 1.2;
	color: var(--sbc-heading);
	font-family: var(--site-secondary-font, inherit);
}
.sigase-badmeubel-cfg__lead {
	margin: 0 0 0.75rem;
	color: var(--sbc-text-muted);
	font-size: var(--sbc-fs-sm);
	max-width: 60ch;
}
.sigase-badmeubel-cfg__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sbc-gap-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}
.sigase-badmeubel-cfg__chips[hidden] {
	display: none;
}
.sigase-badmeubel-cfg__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	background: var(--sbc-chip-bg);
	color: var(--sbc-accent-dark);
	font-size: var(--sbc-fs-sm);
	border: 0;
	cursor: pointer;
	transition: background-color 120ms ease;
	font: inherit;
}
.sigase-badmeubel-cfg__chip:hover,
.sigase-badmeubel-cfg__chip:focus-visible {
	background: var(--sbc-chip-bg-hover);
}
.sigase-badmeubel-cfg__chip:focus-visible {
	outline: 2px solid var(--sbc-accent-dark);
	outline-offset: 2px;
}
.sigase-badmeubel-cfg__chip-close {
	font-size: var(--sbc-fs-base);
	line-height: 1;
	opacity: 0.7;
}

/* ══ 3. Layout principal (mobile-first) ═══════════════════════════════ */
.sigase-badmeubel-cfg__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sbc-gap-lg);
}
/* Defensivo: el tema padre (kitify/miniture) aplica `grid-area: visual` y
 * `order` inverso a los `<aside>` dentro de layouts grid. Reset con
 * specificity 0,2,0 aplicado en todos los viewports. En mobile orden
 * natural (visual primero, flow después); desktop se redefine en el
 * media query 960px de abajo. Detectado post-deploy PROD 2026-04-23. */
.sigase-badmeubel-cfg .sigase-badmeubel-cfg__visual,
.sigase-badmeubel-cfg .sigase-badmeubel-cfg__flow {
	grid-area: auto;
	grid-column: auto;
	grid-row: auto;
	order: 0;
}

/* ══ 4. Visual (imagen + thumbs) ══════════════════════════════════════ */
.sigase-badmeubel-cfg__visual {
	display: flex;
	flex-direction: column;
	gap: var(--sbc-gap-sm);
}
.sigase-badmeubel-cfg__image-wrap {
	margin: 0;
	padding: 0;
	aspect-ratio: 1 / 1;
	background: var(--sbc-bg-soft);
	border: 1px solid var(--sbc-border);
	border-radius: var(--sbc-radius);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sigase-badmeubel-cfg__image {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: 1;
	transition: opacity 180ms ease-in-out;
}
.sigase-badmeubel-cfg__image.is-loading {
	opacity: 0;
}
.sigase-badmeubel-cfg__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	gap: var(--sbc-gap-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}
.sigase-badmeubel-cfg__thumbs[hidden] {
	display: none;
}
.sigase-badmeubel-cfg__thumb {
	aspect-ratio: 1 / 1;
	border: 1px solid var(--sbc-border);
	border-radius: var(--sbc-radius-sm);
	overflow: hidden;
	padding: 0;
	background: var(--sbc-surface);
	cursor: pointer;
	transition: border-color 120ms ease;
}
.sigase-badmeubel-cfg__thumb:hover,
.sigase-badmeubel-cfg__thumb.is-active {
	border-color: var(--sbc-accent-dark);
}
.sigase-badmeubel-cfg__thumb:focus-visible {
	outline: 2px solid var(--sbc-accent-dark);
	outline-offset: 2px;
}
.sigase-badmeubel-cfg__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ══ 5. Flow column ═══════════════════════════════════════════════════ */
.sigase-badmeubel-cfg__flow {
	display: flex;
	flex-direction: column;
	gap: var(--sbc-gap-lg);
}

/* ══ 6. Stepper + progress ════════════════════════════════════════════ */
.sigase-badmeubel-cfg__stepper {
	display: flex;
	flex-direction: column;
	gap: var(--sbc-gap-sm);
}
.sigase-badmeubel-cfg__stepper-list {
	display: grid;
	grid-template-columns: repeat(var(--sbc-stepper-cols, 4), 1fr);
	gap: var(--sbc-gap-sm);
	list-style: none;
	margin: 0;
	padding: 0;
}
.sigase-badmeubel-cfg__stepper-btn {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--sbc-border);
	border-radius: var(--sbc-radius-sm);
	background: var(--sbc-surface);
	color: var(--sbc-text-muted);
	cursor: pointer;
	font: inherit;
	text-align: left;
	transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
	min-height: 44px;
}
.sigase-badmeubel-cfg__stepper-btn:hover {
	border-color: var(--sbc-accent);
}
.sigase-badmeubel-cfg__stepper-btn:focus-visible {
	outline: 2px solid var(--sbc-accent-dark);
	outline-offset: 2px;
}
.sigase-badmeubel-cfg__stepper-btn.is-active {
	border-color: var(--sbc-accent-dark);
	background: var(--sbc-bg-soft);
	color: var(--sbc-accent-dark);
	font-weight: 600;
}
.sigase-badmeubel-cfg__stepper-btn.is-complete {
	color: var(--sbc-accent-dark);
	border-color: var(--sbc-accent);
}
.sigase-badmeubel-cfg__stepper-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--sbc-border);
	color: var(--sbc-text);
	font-size: var(--sbc-fs-sm);
	font-weight: 700;
	flex-shrink: 0;
}
.sigase-badmeubel-cfg__stepper-btn.is-active .sigase-badmeubel-cfg__stepper-number {
	background: var(--sbc-accent-dark);
	color: #fff;
}
.sigase-badmeubel-cfg__stepper-btn.is-complete .sigase-badmeubel-cfg__stepper-number {
	background: var(--sbc-accent);
	color: #fff;
}
.sigase-badmeubel-cfg__stepper-btn.is-complete .sigase-badmeubel-cfg__stepper-number::before {
	content: "✓";
}
.sigase-badmeubel-cfg__stepper-btn.is-complete .sigase-badmeubel-cfg__stepper-number span {
	display: none;
}
.sigase-badmeubel-cfg__stepper-label {
	font-size: var(--sbc-fs-sm);
	font-weight: 600;
	flex-shrink: 0;
}
.sigase-badmeubel-cfg__stepper-value {
	font-size: var(--sbc-fs-xs);
	color: var(--sbc-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.sigase-badmeubel-cfg__stepper-btn.is-active .sigase-badmeubel-cfg__stepper-value,
.sigase-badmeubel-cfg__stepper-btn.is-complete .sigase-badmeubel-cfg__stepper-value {
	color: var(--sbc-accent-dark);
}
.sigase-badmeubel-cfg__progress {
	height: 4px;
	background: var(--sbc-border);
	border-radius: 999px;
	overflow: hidden;
}
.sigase-badmeubel-cfg__progress-bar {
	height: 100%;
	width: var(--progress, 0%);
	background: var(--sbc-accent-dark);
	transition: width 240ms ease;
	border-radius: 999px;
}
.sigase-badmeubel-cfg__progress-label {
	margin: 0;
	font-size: var(--sbc-fs-sm);
	color: var(--sbc-text-muted);
}

/* ══ 7. Panels + step (fieldset) ══════════════════════════════════════ */
.sigase-badmeubel-cfg__panels {
	display: block;
}
.sigase-badmeubel-cfg__panel {
	padding: 0;
	margin: 0;
}
.sigase-badmeubel-cfg__panel[hidden] {
	display: none;
}
.sigase-badmeubel-cfg__step {
	margin: 0;
	padding: var(--sbc-gap);
	border: 1px solid var(--sbc-border);
	border-radius: var(--sbc-radius);
	background: var(--sbc-surface);
}
.sigase-badmeubel-cfg__legend {
	display: flex;
	align-items: center;
	gap: var(--sbc-gap-sm);
	padding: 0;
	margin: 0 0 var(--sbc-gap);
	font-size: var(--sbc-fs-lg);
	font-weight: 600;
	color: var(--sbc-heading);
}
.sigase-badmeubel-cfg__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	background: var(--sbc-accent-dark);
	color: #fff;
	border-radius: 50%;
	font-size: var(--sbc-fs-sm);
	font-weight: 700;
	flex-shrink: 0;
}
.sigase-badmeubel-cfg__single-note {
	margin: var(--sbc-gap-sm) 0 0;
	color: var(--sbc-text-muted);
	font-size: var(--sbc-fs-sm);
	font-style: italic;
}
.sigase-badmeubel-cfg__panel-nav {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--sbc-gap);
}

/* ══ 8. Options (radio custom) ════════════════════════════════════════ */
.sigase-badmeubel-cfg__options {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: var(--sbc-gap-sm);
}
.sigase-badmeubel-cfg__option {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--sbc-border);
	border-radius: var(--sbc-radius-sm);
	background: var(--sbc-surface);
	cursor: pointer;
	transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
	user-select: none;
}
.sigase-badmeubel-cfg__option:hover:not(.is-disabled) {
	border-color: var(--sbc-accent);
	background: var(--sbc-bg-soft);
}
.sigase-badmeubel-cfg__option input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.sigase-badmeubel-cfg__option input[type="radio"]:focus-visible + .sigase-badmeubel-cfg__option-label,
.sigase-badmeubel-cfg__option input[type="radio"]:focus-visible + .sigase-badmeubel-cfg__swatch,
.sigase-badmeubel-cfg__option:has(input:focus-visible) {
	outline: 2px solid var(--sbc-accent-dark);
	outline-offset: 2px;
}
.sigase-badmeubel-cfg__option:has(input:checked) {
	border-color: var(--sbc-accent-dark);
	background: var(--sbc-bg-soft);
	border-width: 2px;
	padding: calc(0.6rem - 1px) calc(0.75rem - 1px);
}
.sigase-badmeubel-cfg__option:has(input:checked)::after {
	content: "✓";
	position: absolute;
	top: 4px;
	right: 6px;
	font-size: var(--sbc-fs-xs);
	font-weight: 700;
	color: var(--sbc-accent-dark);
	line-height: 1;
}
.sigase-badmeubel-cfg__option.is-disabled {
	cursor: not-allowed;
	opacity: 0.4;
	background: var(--sbc-surface-alt);
	filter: grayscale(0.5);
}
.sigase-badmeubel-cfg__option.is-disabled:hover {
	border-color: var(--sbc-border);
	background: var(--sbc-surface-alt);
}
.sigase-badmeubel-cfg__option.is-just-appeared {
	animation: sbc-fade-in 200ms ease-out;
}
.sigase-badmeubel-cfg__option-label {
	font-size: var(--sbc-fs-sm);
	font-weight: 500;
	color: var(--sbc-text);
}

/* ══ 9. Swatches (colores) ════════════════════════════════════════════ */
.sigase-badmeubel-cfg__options--swatches {
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
}
.sigase-badmeubel-cfg__options--swatches .sigase-badmeubel-cfg__option {
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.6rem 0.4rem;
	min-height: 96px;
}
.sigase-badmeubel-cfg__swatch {
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--swatch-color, #ccc);
	border: 1px solid var(--sbc-border-strong);
	position: relative;
	flex-shrink: 0;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.sigase-badmeubel-cfg__swatch[data-type="gloss"]::before {
	content: "";
	position: absolute;
	inset: 2px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 45%);
	pointer-events: none;
}
.sigase-badmeubel-cfg__swatch[data-type="wood"] {
	background-image: linear-gradient(135deg, var(--swatch-color, #ccc) 0%, rgba(0, 0, 0, 0.15) 100%);
}
/* task 025 F3: si el color define --swatch-image, se usa como textura encima del
   hex base (que queda como fallback si la imagen falla). Sobreescribe tanto el
   gradient de wood como el color sólido de matte. */
.sigase-badmeubel-cfg__swatch[style*="--swatch-image"] {
	background-image: var(--swatch-image);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.sigase-badmeubel-cfg__options--swatches .sigase-badmeubel-cfg__option-label {
	font-size: var(--sbc-fs-xs);
	text-align: center;
	line-height: 1.2;
}

/* ══ 10. Summary ══════════════════════════════════════════════════════ */
.sigase-badmeubel-cfg__summary {
	padding: var(--sbc-gap-lg);
	background: var(--sbc-surface);
	border: 1px solid var(--sbc-border);
	border-radius: var(--sbc-radius);
	box-shadow: var(--sbc-shadow);
	display: flex;
	flex-direction: column;
	gap: var(--sbc-gap);
}
.sigase-badmeubel-cfg__summary-anchor {
	margin: 0;
	color: var(--sbc-text-muted);
	font-size: var(--sbc-fs-sm);
}
.sigase-badmeubel-cfg__summary-anchor[hidden] {
	display: none;
}
.sigase-badmeubel-cfg__summary-header {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.sigase-badmeubel-cfg__summary-name {
	font-size: var(--sbc-fs-lg);
	font-weight: 700;
	color: var(--sbc-heading);
	line-height: 1.3;
}
.sigase-badmeubel-cfg__summary-sku {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var(--sbc-fs-xs);
	color: var(--sbc-text-muted);
	background: var(--sbc-surface-alt);
	padding: 0.125rem 0.4rem;
	border-radius: var(--sbc-radius-sm);
	align-self: flex-start;
}
.sigase-badmeubel-cfg__summary-sku[hidden] {
	display: none;
}
.sigase-badmeubel-cfg__summary-price-row {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: var(--sbc-gap) 0;
	border-top: 1px solid var(--sbc-border);
	border-bottom: 1px solid var(--sbc-border);
}
.sigase-badmeubel-cfg__summary-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--sbc-gap-sm);
}
.sigase-badmeubel-cfg__summary-label {
	color: var(--sbc-text-muted);
	font-size: var(--sbc-fs-sm);
}
.sigase-badmeubel-cfg__summary-price {
	font-size: var(--sbc-fs-xxl);
	font-weight: 800;
	color: var(--sbc-price-color);
	line-height: 1.1;
}
.sigase-badmeubel-cfg__summary-price.is-loading {
	background: linear-gradient(90deg, var(--sbc-border) 0%, var(--sbc-surface-alt) 50%, var(--sbc-border) 100%);
	background-size: 200% 100%;
	animation: sbc-shimmer 1.2s ease-in-out infinite;
	color: transparent;
	border-radius: var(--sbc-radius-sm);
}
.sigase-badmeubel-cfg__summary-delivery {
	font-size: var(--sbc-fs-sm);
	font-weight: 500;
}
.sigase-badmeubel-cfg__summary-hint,
.sigase-badmeubel-cfg__summary-unavailable,
.sigase-badmeubel-cfg__summary-stock,
.sigase-badmeubel-cfg__summary-session {
	margin: 0;
	padding: 0.6rem 0.8rem;
	border-radius: var(--sbc-radius-sm);
	font-size: var(--sbc-fs-sm);
}
.sigase-badmeubel-cfg__summary-hint {
	background: var(--sbc-bg-soft);
	color: var(--sbc-accent-dark);
}
.sigase-badmeubel-cfg__summary-unavailable {
	background: #fff4f4;
	color: var(--sbc-danger);
	border-left: 3px solid var(--sbc-danger);
}
.sigase-badmeubel-cfg__summary-stock,
.sigase-badmeubel-cfg__summary-session {
	background: #fff8e1;
	color: #7a4a00;
	border-left: 3px solid #d89000;
}
.sigase-badmeubel-cfg__summary-hint[hidden],
.sigase-badmeubel-cfg__summary-unavailable[hidden],
.sigase-badmeubel-cfg__summary-stock[hidden],
.sigase-badmeubel-cfg__summary-session[hidden] {
	display: none;
}
.sigase-badmeubel-cfg__summary-cta {
	display: flex;
	flex-direction: column;
	gap: var(--sbc-gap-sm);
}

/* ══ 11. Trust signals + details ══════════════════════════════════════ */
.sigase-badmeubel-cfg__trust {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-size: var(--sbc-fs-sm);
	color: var(--sbc-text-muted);
}
.sigase-badmeubel-cfg__trust li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.sigase-badmeubel-cfg__trust li::before {
	content: "✓";
	color: var(--sbc-accent-dark);
	font-weight: 700;
	flex-shrink: 0;
}
.sigase-badmeubel-cfg__details {
	border-top: 1px solid var(--sbc-border);
	padding-top: var(--sbc-gap);
}
.sigase-badmeubel-cfg__details[hidden] {
	display: none;
}
.sigase-badmeubel-cfg__details summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--sbc-heading);
	padding: 0.25rem 0;
}
.sigase-badmeubel-cfg__details summary:focus-visible {
	outline: 2px solid var(--sbc-accent-dark);
	outline-offset: 2px;
	border-radius: var(--sbc-radius-sm);
}
.sigase-badmeubel-cfg__details-list {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--sbc-gap);
	row-gap: 0.35rem;
	margin: var(--sbc-gap-sm) 0 0;
}
.sigase-badmeubel-cfg__details-list dt {
	font-weight: 600;
	color: var(--sbc-text-muted);
	font-size: var(--sbc-fs-sm);
}
.sigase-badmeubel-cfg__details-list dd {
	margin: 0;
	font-size: var(--sbc-fs-sm);
	color: var(--sbc-text);
}

/* ══ 12. Botones ══════════════════════════════════════════════════════ */
.sigase-badmeubel-cfg__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 48px;
	padding: 0.65rem 1.25rem;
	border-radius: var(--sbc-btn-radius);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 120ms ease, opacity 120ms ease, filter 120ms ease;
	border: 1px solid transparent;
	font: inherit;
	font-weight: 600;
}
.sigase-badmeubel-cfg__btn.is-disabled,
.sigase-badmeubel-cfg__btn[aria-disabled="true"] {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}
.sigase-badmeubel-cfg__btn--primary {
	background: var(--sbc-btn-primary-bg);
	color: var(--sbc-btn-primary-color);
	border-color: var(--sbc-btn-primary-bg);
}
.sigase-badmeubel-cfg__btn--primary:hover:not([aria-disabled="true"]) {
	filter: brightness(0.92);
}
.sigase-badmeubel-cfg__btn--alt {
	background: var(--sbc-btn-secondary-bg);
	color: var(--sbc-btn-secondary-color);
	border-color: var(--sbc-btn-secondary-color);
}
.sigase-badmeubel-cfg__btn--alt:hover:not([aria-disabled="true"]) {
	background: var(--sbc-bg-soft);
}
.sigase-badmeubel-cfg__btn--next {
	background: transparent;
	color: var(--sbc-accent-dark);
	border-color: var(--sbc-accent-dark);
	min-height: 44px;
	padding: 0.5rem 1rem;
}
.sigase-badmeubel-cfg__btn--next:not([aria-disabled="true"]):hover {
	background: var(--sbc-bg-soft);
}
.sigase-badmeubel-cfg__btn:focus-visible {
	outline: 2px solid var(--sbc-accent-dark);
	outline-offset: 2px;
}

/* ══ 13. Upsell strip (full-width) ════════════════════════════════════ */
.sigase-badmeubel-cfg__upsell {
	margin-top: var(--sbc-gap-lg);
	padding: var(--sbc-gap-lg);
	border: 1px solid var(--sbc-border);
	border-radius: var(--sbc-radius);
	background: var(--sbc-bg-soft);
}
.sigase-badmeubel-cfg__upsell[hidden] {
	display: none;
}
.sigase-badmeubel-cfg__upsell-title {
	margin: 0 0 var(--sbc-gap);
	font-size: var(--sbc-fs-lg);
	color: var(--sbc-heading);
}
.sigase-badmeubel-cfg__upsell-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--sbc-gap);
	margin: 0 0 var(--sbc-gap);
	padding: 0;
	list-style: none;
}
.sigase-badmeubel-cfg__upsell-card {
	display: flex;
	flex-direction: column;
	gap: var(--sbc-gap-sm);
	padding: var(--sbc-gap);
	background: var(--sbc-surface);
	border: 1px solid var(--sbc-border);
	border-radius: var(--sbc-radius-sm);
	transition: border-color 120ms ease;
}
.sigase-badmeubel-cfg__upsell-card:has(input:checked) {
	border-color: var(--sbc-accent-dark);
}
.sigase-badmeubel-cfg__upsell-img {
	aspect-ratio: 1 / 1;
	background: var(--sbc-surface-alt);
	border-radius: var(--sbc-radius-sm);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sigase-badmeubel-cfg__upsell-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sigase-badmeubel-cfg__upsell-name {
	font-size: var(--sbc-fs-sm);
	font-weight: 600;
	color: var(--sbc-heading);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.5em;
	line-height: 1.25;
}
.sigase-badmeubel-cfg__upsell-category {
	font-size: var(--sbc-fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--sbc-text-muted);
}
.sigase-badmeubel-cfg__upsell-price {
	font-size: var(--sbc-fs-base);
	font-weight: 700;
	color: var(--sbc-price-color);
}
.sigase-badmeubel-cfg__upsell-check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	font-size: var(--sbc-fs-sm);
	user-select: none;
}
.sigase-badmeubel-cfg__upsell-check input[type="checkbox"] {
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--sbc-accent-dark);
}
.sigase-badmeubel-cfg__upsell-cta {
	width: 100%;
}

/* ══ 14. Toast ════════════════════════════════════════════════════════ */
.sbc-toast {
	position: fixed;
	left: 50%;
	bottom: 2rem;
	transform: translateX(-50%);
	z-index: 9999;
	padding: 0.75rem 1.25rem;
	background: var(--sbc-heading, #181818);
	color: #fff;
	border-radius: var(--sbc-radius-sm, 6px);
	font-size: 0.9rem;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
	animation: sbc-toast-in 220ms ease-out;
}
.sbc-toast--error {
	background: var(--sbc-danger, #b3261e);
}
.sbc-toast--success {
	background: var(--sbc-accent-dark, #2f4f2c);
}
/* task 025 F4: variante info (azul suave) para avisos no críticos,
   p.ej. cuando el resolver anula selecciones por conflicto. */
.sbc-toast--info {
	background: var(--sbc-info, #1f4e79);
	color: #fff;
}

/* ══ 15. Empty state ══════════════════════════════════════════════════ */
.sigase-badmeubel-empty,
.sigase-badmeubel-noscript {
	padding: var(--sbc-gap);
	background: var(--sbc-bg-soft, #f4faf3);
	border: 1px solid var(--sbc-border, #ddd);
	border-radius: var(--sbc-radius, 8px);
	color: var(--sbc-text-muted, #5a5a5a);
}

/* ══ 16. Animaciones ══════════════════════════════════════════════════ */
@keyframes sbc-fade-in {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes sbc-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
@keyframes sbc-toast-in {
	from { opacity: 0; transform: translate(-50%, 10px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ══ 17. Responsive ═══════════════════════════════════════════════════ */

/* Tablet + */
@media (min-width: 600px) {
	.sigase-badmeubel-cfg__options {
		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	}
	.sigase-badmeubel-cfg__options--swatches {
		grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	}
}

/* Desktop (DEC-019-11): 2 col 5/7 con imagen sticky izquierda */
@media (min-width: 960px) {
	.sigase-badmeubel-cfg__layout {
		grid-template-columns: minmax(320px, 5fr) minmax(0, 7fr);
		gap: calc(var(--sbc-gap-lg) * 1.5);
		align-items: start;
	}
	/* Desktop: imagen izquierda (5fr), flow derecha (7fr) según DEC-019-11.
	 * El reset general está arriba (regla base); aquí solo el order final. */
	.sigase-badmeubel-cfg .sigase-badmeubel-cfg__visual { order: 0; }
	.sigase-badmeubel-cfg .sigase-badmeubel-cfg__flow { order: 1; }
	.sigase-badmeubel-cfg__visual {
		position: sticky;
		top: var(--sbc-sticky-offset);
		scroll-margin-top: var(--sbc-sticky-offset);
	}
	.sigase-badmeubel-cfg__summary-cta {
		flex-direction: row;
	}
	.sigase-badmeubel-cfg__summary-cta .sigase-badmeubel-cfg__btn {
		flex: 1 1 0;
	}
}

/* Mobile (<600px): wizard con sticky-bottom summary */
@media (max-width: 599px) {
	.sigase-badmeubel-cfg__summary {
		/* `fixed` (no `sticky`) porque el sticky-bottom con parent `__flow`
		 * colapsa cuando el contenido termina antes del viewport. `fixed`
		 * garantiza que el precio + CTAs queden siempre pinned al bottom.
		 * `.__panels` tiene padding-bottom: 160px para evitar solapamiento. */
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10;
		background: var(--sbc-surface);
		border-top: 1px solid var(--sbc-border);
		padding: var(--sbc-gap);
		padding-bottom: calc(var(--sbc-gap) + env(safe-area-inset-bottom, 0));
		box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
	}
	.sigase-badmeubel-cfg__summary-cta {
		flex-direction: row;
	}
	.sigase-badmeubel-cfg__summary-cta .sigase-badmeubel-cfg__btn {
		flex: 1 1 0;
		min-height: 44px;
		padding: 0.5rem 0.75rem;
		font-size: var(--sbc-fs-sm);
	}
	.sigase-badmeubel-cfg__trust,
	.sigase-badmeubel-cfg__details,
	/* A5-4: compactar summary fixed para que ocupe ≤25% del viewport — DEC-019-13
	 * pide precio grande + 2 CTAs, sin anchor/sku/labels/hint redundantes. */
	.sigase-badmeubel-cfg__summary-anchor,
	.sigase-badmeubel-cfg__summary-sku,
	.sigase-badmeubel-cfg__summary-hint,
	.sigase-badmeubel-cfg__summary-label {
		display: none;
	}
	.sigase-badmeubel-cfg__summary {
		gap: var(--sbc-gap-sm);
	}
	.sigase-badmeubel-cfg__summary-price-row {
		padding: 0;
		border: 0;
	}
	/* Panel deja espacio al sticky-bottom en la última opción del step. */
	.sigase-badmeubel-cfg__panels {
		padding-bottom: 140px;
	}
	/* A5-5: upsell también — sin esto, las últimas cards quedan bajo el sticky
	 * fixed (~140px) cuando el user scrollea al final de la lista. */
	.sigase-badmeubel-cfg__upsell {
		margin-bottom: 140px;
	}
	/* Stepper compacto en mobile */
	.sigase-badmeubel-cfg__stepper-list {
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: minmax(100px, 1fr);
		overflow-x: auto;
		scrollbar-width: thin;
		padding-bottom: 4px;
	}
	.sigase-badmeubel-cfg__stepper-btn {
		padding: 0.5rem;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}
	.sigase-badmeubel-cfg__stepper-value {
		display: none;
	}
	.sigase-badmeubel-cfg__summary-price {
		font-size: var(--sbc-fs-xl);
	}
	.sigase-badmeubel-cfg__title {
		font-size: var(--sbc-fs-lg);
	}
}

/* Landscape mobile con poco alto: summary compacto */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 959px) {
	.sigase-badmeubel-cfg__summary-anchor,
	.sigase-badmeubel-cfg__summary-hint,
	.sigase-badmeubel-cfg__trust,
	.sigase-badmeubel-cfg__details {
		display: none;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.sigase-badmeubel-cfg__image,
	.sigase-badmeubel-cfg__option,
	.sigase-badmeubel-cfg__btn,
	.sigase-badmeubel-cfg__progress-bar,
	.sigase-badmeubel-cfg__stepper-btn {
		transition: none !important;
	}
	.sigase-badmeubel-cfg__option.is-just-appeared,
	.sigase-badmeubel-cfg__summary-price.is-loading,
	.sbc-toast {
		animation: none !important;
	}
}

@media print {
	.sigase-badmeubel-cfg {
		display: none;
	}
}

/* ══ 18. Teaser single-product (task 019 Fase F) ══════════════════════ */
.sigase-badmeubel-teaser {
	--sbct-accent: var(--sigase-green, #6ba368);
	--sbct-accent-dark: var(--sigase-green-dark, #2f4f2c);
	--sbct-bg: var(--sigase-green-bg, #f4faf3);
	--sbct-border: rgba(0, 0, 0, 0.1);

	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 2rem 0;
	padding: 1.25rem 1.5rem;
	background: var(--sbct-bg);
	border: 1px solid var(--sbct-border);
	border-left: 4px solid var(--sbct-accent);
	border-radius: 8px;
	flex-wrap: wrap;
}
.sigase-badmeubel-teaser__icon {
	font-size: 1.5rem;
	line-height: 1;
	flex-shrink: 0;
}
.sigase-badmeubel-teaser__body {
	flex: 1 1 240px;
	min-width: 0;
}
.sigase-badmeubel-teaser__title {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--sbct-accent-dark);
	font-size: 1.05rem;
}
.sigase-badmeubel-teaser__lead {
	margin: 0;
	color: #3d4d3b;
	font-size: 0.9rem;
	line-height: 1.45;
}
.sigase-badmeubel-teaser__lead span {
	font-weight: 600;
}
.sigase-badmeubel-teaser__cta {
	flex-shrink: 0;
	min-height: 44px;
	padding: 0.65rem 1.25rem;
	background: var(--sbct-accent-dark);
	color: #fff;
	border-radius: 6px;
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	transition: background-color 150ms ease;
}
.sigase-badmeubel-teaser__cta:hover,
.sigase-badmeubel-teaser__cta:focus {
	background: var(--sbct-accent);
	color: #fff;
}
.sigase-badmeubel-teaser__cta:focus-visible {
	outline: 2px solid var(--sbct-accent-dark);
	outline-offset: 2px;
}
@media (max-width: 599px) {
	.sigase-badmeubel-teaser {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}
	.sigase-badmeubel-teaser__cta {
		width: 100%;
		justify-content: center;
	}
}