/**
 * Armador de combo indoor.
 */

.hbg-wizard {
	max-width: var(--hbg-ancho-max);
	margin-inline: auto;
	/* Espacio al pie para que la barra flotante no tape el último botón. */
	padding-bottom: 120px;
}

/* =========================================================================
   BARRA DE PROGRESO

   Los seis pasos son botones reales y siempre navegables: el armador no
   obliga a completar nada, así que bloquear los pasos siguientes sería
   mentirle al cliente sobre lo que puede hacer.
   ========================================================================= */

.hbg-wizard__progreso {
	position: sticky;
	/* Debajo del header fijo. */
	top: 190px;
	z-index: 30;
	margin-bottom: var(--hbg-e6);
	padding-block: var(--hbg-e3);
	background: var(--hbg-negro);
}

@media (max-width: 921px) {
	.hbg-wizard__progreso {
		top: 0;
	}
}

.hbg-wizard__pasos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--hbg-e2);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
}

.hbg-wizard__paso {
	flex: 1 0 auto;
	min-width: 0;
}

.hbg-wizard__boton {
	display: flex;
	align-items: center;
	gap: var(--hbg-e2);
	width: 100%;
	min-height: 52px;
	padding: var(--hbg-e2) var(--hbg-e3);
	background: var(--hbg-superficie-1);
	border: 1px solid var(--hbg-borde);
	border-radius: 0;
	color: var(--hbg-texto-suave);
	font-family: var(--hbg-fuente-titulo);
	font-size: 0.85rem;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color var(--hbg-transicion),
	            color var(--hbg-transicion),
	            background-color var(--hbg-transicion);
}

.hbg-wizard__boton:hover {
	border-color: var(--hbg-neon);
	color: var(--hbg-texto);
}

.hbg-wizard__boton.is-actual,
.hbg-wizard__boton[aria-current="step"] {
	background: rgba(57, 255, 20, 0.09);
	border-color: var(--hbg-neon);
	color: var(--hbg-neon);
}

.hbg-wizard__n {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	background: var(--hbg-superficie-3);
	border-radius: 50%;
	font-size: 0.78rem;
	font-weight: 800;
}

.hbg-wizard__boton.is-actual .hbg-wizard__n,
.hbg-wizard__boton[aria-current="step"] .hbg-wizard__n {
	background: var(--hbg-neon);
	color: var(--hbg-negro);
}

/* =========================================================================
   PANEL DE PASO
   ========================================================================= */

.hbg-wizard__cabecera {
	margin-bottom: var(--hbg-e6);
}

.hbg-wizard__contador {
	margin: 0 0 var(--hbg-e1);
	color: var(--hbg-neon);
	font-family: var(--hbg-fuente-titulo);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.hbg-wizard__titulo {
	margin: 0 0 var(--hbg-e2);
	font-family: var(--hbg-fuente-titulo);
	font-size: clamp(1.6rem, 4vw, 2.3rem);
	font-weight: 800;
	color: var(--hbg-texto);
}

.hbg-wizard__ayuda {
	margin: 0 0 var(--hbg-e2);
	max-width: 62ch;
	color: var(--hbg-texto-suave);
	line-height: 1.55;
}

.hbg-wizard__saltable {
	margin: 0;
	color: var(--hbg-texto-tenue);
	font-size: 0.85rem;
}

/* =========================================================================
   SECCIONES Y GRILLA
   ========================================================================= */

.hbg-combo-seccion {
	margin-bottom: var(--hbg-e7);
}

.hbg-combo-seccion__titulo {
	display: flex;
	align-items: center;
	gap: var(--hbg-e3);
	margin: 0 0 var(--hbg-e2);
	padding-bottom: var(--hbg-e2);
	border-bottom: 1px solid var(--hbg-borde);
	font-family: var(--hbg-fuente-titulo);
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--hbg-texto);
}

.hbg-combo-seccion__opcional {
	padding: 3px var(--hbg-e2);
	background: rgba(57, 255, 20, 0.12);
	border: 1px solid rgba(57, 255, 20, 0.4);
	color: var(--hbg-neon);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hbg-combo-seccion__nota {
	margin: 0 0 var(--hbg-e4);
	color: var(--hbg-texto-tenue);
	font-size: 0.88rem;
}

.hbg-combo-seccion__mas {
	margin: var(--hbg-e4) 0 0;
}

.hbg-combo-seccion__mas a {
	color: var(--hbg-neon);
	font-size: 0.88rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hbg-combo-grilla {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--hbg-e4);
}

/* =========================================================================
   TARJETA
   ========================================================================= */

.hbg-combo-item {
	display: flex;
	flex-direction: column;
	background: var(--hbg-superficie-1);
	border: 1px solid var(--hbg-borde);
	transition: border-color var(--hbg-transicion), box-shadow var(--hbg-transicion);
}

.hbg-combo-item.is-elegido {
	border-color: var(--hbg-neon);
	box-shadow: 0 0 0 1px var(--hbg-neon) inset, var(--hbg-glow-fuerte);
}

.hbg-combo-item__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--hbg-negro);
}

.hbg-combo-item__cuerpo {
	display: flex;
	flex-direction: column;
	gap: var(--hbg-e2);
	flex: 1 1 auto;
	padding: var(--hbg-e3);
}

.hbg-combo-item__nombre {
	margin: 0;
	font-family: var(--hbg-fuente-titulo);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--hbg-texto);
}

.hbg-combo-item__variante select {
	width: 100%;
	min-height: 38px;
	padding-inline: var(--hbg-e2);
	background: var(--hbg-superficie-2);
	border: 1px solid var(--hbg-borde-fuerte);
	border-radius: 0;
	color: var(--hbg-texto);
	font-size: 0.85rem;
}

.hbg-combo-item__precio {
	margin: 0;
	color: var(--hbg-neon);
	font-family: var(--hbg-fuente-titulo);
	font-size: 1.05rem;
	font-weight: 800;
}

.hbg-combo-item__accion {
	margin-top: auto;
	padding-top: var(--hbg-e2);
}

.hbg-combo-item__agregar {
	width: 100%;
	min-height: 42px;
	background: #ffffff;
	border: 1px solid #ffffff;
	border-radius: 0;
	color: var(--hbg-negro);
	font-family: var(--hbg-fuente-titulo);
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color var(--hbg-transicion),
	            border-color var(--hbg-transicion),
	            color var(--hbg-transicion);
}

.hbg-combo-item__agregar:hover,
.hbg-combo-item__agregar:focus-visible {
	background: var(--hbg-neon);
	border-color: var(--hbg-neon);
	color: #ffffff;
}

/* ------------------------------- stepper ------------------------------- */

.hbg-combo-stepper {
	display: grid;
	grid-template-columns: 42px 1fr 42px;
	align-items: center;
	gap: 1px;
	background: var(--hbg-borde);
	border: 1px solid var(--hbg-neon);
}

.hbg-combo-stepper[hidden] {
	display: none;
}

.hbg-combo-stepper__b {
	min-height: 42px;
	background: var(--hbg-superficie-2);
	border: none;
	color: var(--hbg-neon);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--hbg-transicion);
}

.hbg-combo-stepper__b:hover {
	background: rgba(57, 255, 20, 0.16);
}

.hbg-combo-stepper__n {
	display: grid;
	place-items: center;
	min-height: 42px;
	background: var(--hbg-superficie-2);
	color: var(--hbg-texto);
	font-family: var(--hbg-fuente-titulo);
	font-size: 1rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.hbg-combo-stepper__quitar {
	grid-column: 1 / -1;
	min-height: 34px;
	background: var(--hbg-superficie-1);
	border: none;
	color: var(--hbg-texto-tenue);
	font-size: 0.76rem;
	cursor: pointer;
	transition: color var(--hbg-transicion);
}

.hbg-combo-stepper__quitar:hover {
	color: var(--hbg-error);
}

/* =========================================================================
   NAVEGACIÓN DEL PASO
   ========================================================================= */

.hbg-wizard__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hbg-e3);
	margin-top: var(--hbg-e6);
	padding-top: var(--hbg-e5);
	border-top: 1px solid var(--hbg-borde);
}

.hbg-boton-marca--fantasma {
	background: transparent;
	border-color: var(--hbg-borde-fuerte);
	color: var(--hbg-texto-suave);
}

.hbg-boton-marca--fantasma:hover,
.hbg-boton-marca--fantasma:focus-visible {
	background: var(--hbg-neon);
	border-color: var(--hbg-neon);
	color: #ffffff;
}

/* =========================================================================
   RESUMEN
   ========================================================================= */

.hbg-resumen__grupo {
	margin-bottom: var(--hbg-e6);
}

.hbg-resumen__paso {
	margin: 0 0 var(--hbg-e3);
	padding-bottom: var(--hbg-e2);
	border-bottom: 1px solid var(--hbg-borde);
	color: var(--hbg-neon);
	font-family: var(--hbg-fuente-titulo);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.hbg-resumen__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--hbg-e2);
}

.hbg-resumen__linea {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--hbg-e3);
	padding: var(--hbg-e2);
	background: var(--hbg-superficie-1);
	border: 1px solid var(--hbg-borde);
}

.hbg-resumen__linea img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	background: var(--hbg-negro);
}

.hbg-resumen__cuerpo {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.hbg-resumen__nombre {
	color: var(--hbg-texto);
	font-size: 0.92rem;
	line-height: 1.35;
}

.hbg-resumen__detalle {
	color: var(--hbg-texto-tenue);
	font-size: 0.82rem;
}

.hbg-resumen__sub {
	color: var(--hbg-texto);
	font-family: var(--hbg-fuente-titulo);
	font-weight: 700;
	white-space: nowrap;
}

.hbg-resumen__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--hbg-e3);
	margin: var(--hbg-e6) 0 var(--hbg-e5);
	padding-top: var(--hbg-e4);
	border-top: 2px solid var(--hbg-neon);
	font-family: var(--hbg-fuente-titulo);
	font-size: 1.1rem;
}

.hbg-resumen__total strong {
	color: var(--hbg-neon);
	font-size: 1.7rem;
	font-weight: 800;
}

.hbg-resumen__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hbg-e3);
}

/* ------------------------------- vacío --------------------------------- */

.hbg-resumen__vacio {
	padding: var(--hbg-e7) var(--hbg-e5);
	background: var(--hbg-superficie-1);
	border: 1px dashed var(--hbg-borde-fuerte);
	text-align: center;
	color: var(--hbg-texto-suave);
}

.hbg-resumen__vacio[hidden] {
	display: none;
}

.hbg-resumen__vacio-titulo {
	margin: 0 0 var(--hbg-e2);
	font-family: var(--hbg-fuente-titulo);
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--hbg-texto);
}

.hbg-resumen__vacio p {
	max-width: 52ch;
	margin-inline: auto;
}

.hbg-resumen__vacio .hbg-boton-marca {
	margin-top: var(--hbg-e5);
}

/* =========================================================================
   MINI CARRITO DEL COMBO

   Fija al pie y visible desde cualquiera de los seis pasos.
   ========================================================================= */

.hbg-combo-barra {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	/* Por encima del contenido, por debajo de los cajones (900) y del aviso
	   de edad (99999). */
	z-index: 600;
	background: var(--hbg-superficie-1);
	border-top: 1px solid var(--hbg-neon);
	box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.55);
}

.hbg-combo-barra[hidden] {
	display: none;
}

.hbg-combo-barra__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--hbg-e3);
	max-width: var(--hbg-ancho-max);
	margin-inline: auto;
	padding: var(--hbg-e3) var(--hbg-e5);
}

.hbg-combo-barra__datos {
	margin: 0;
	color: var(--hbg-texto-suave);
	font-size: 0.95rem;
}

.hbg-combo-barra__datos strong {
	color: var(--hbg-texto);
	font-family: var(--hbg-fuente-titulo);
	font-weight: 800;
}

.hbg-combo-barra__datos strong[data-hbg-barra-total] {
	color: var(--hbg-neon);
	font-size: 1.15rem;
}

.hbg-combo-barra__sep {
	margin-inline: var(--hbg-e2);
	color: var(--hbg-borde-fuerte);
}

.hbg-combo-barra__acciones {
	display: flex;
	align-items: center;
	gap: var(--hbg-e3);
}

.hbg-combo-barra__vaciar {
	background: none;
	border: none;
	color: var(--hbg-texto-tenue);
	font-size: 0.85rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.hbg-combo-barra__vaciar:hover {
	color: var(--hbg-error);
}

/* =========================================================================
   MÓVIL
   ========================================================================= */

@media (max-width: 600px) {
	.hbg-wizard__etiqueta {
		display: none;
	}

	.hbg-wizard__boton {
		justify-content: center;
		min-width: 48px;
	}

	.hbg-wizard__paso--resumen .hbg-wizard__etiqueta {
		display: inline;
	}

	.hbg-wizard__nav {
		flex-direction: column-reverse;
	}

	.hbg-wizard__nav .hbg-boton-marca {
		width: 100%;
	}

	.hbg-resumen__acciones .hbg-boton-marca {
		width: 100%;
	}

	.hbg-combo-barra__inner {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.hbg-combo-barra__acciones {
		justify-content: space-between;
	}
}

/* =========================================================================
   AVISO DE PRODUCTOS OMITIDOS

   Se muestra en carrito y checkout cuando el combo dejó algo afuera. Va acá y
   no por `wc_add_notice` porque el bloque de carrito de WooCommerce no pinta
   los avisos de sesión.
   ========================================================================= */

.hbg-combo-omitidos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hbg-e2);
	max-width: var(--hbg-ancho-max);
	margin: 0 auto var(--hbg-e5);
	padding: var(--hbg-e4) var(--hbg-e5);
	background: var(--hbg-superficie-1);
	border: 1px solid var(--hbg-borde);
	border-inline-start: 3px solid #f5b342;
	color: var(--hbg-texto-suave);
	font-size: 0.92rem;
}

.hbg-combo-omitidos strong {
	color: var(--hbg-texto);
}