/**
 * HF Tecnología — "Armá tu PC".
 *
 * Estética alineada al resto del sitio: limpio, mucho blanco, bordes suaves y un
 * solo acento de color. No se reutilizan clases de Salient a propósito: son
 * internas del tema y cambian sin aviso entre versiones (mismo criterio que se
 * documentó en hf-filtros-sidebar.js). Todo el módulo vive bajo .hf-atp.
 */

/*
 * Sin footer mientras se arma la PC: el flujo termina en una barra fija abajo y
 * el footer del sitio aparecía justo detrás. De esto se encarga la plantilla
 * "No Footer" de Salient (ver hf-atp-shortcode.php), que directamente no lo
 * imprime; esta regla es el respaldo para cuando el tema no sea ese.
 */
.hf-atp-sin-footer #footer-outer {
	display: none;
}

/*
 * El modal se monta en <body> y no dentro de .hf-atp —tiene que quedar por
 * encima del header fijo de Salient, y anidado heredaría cualquier overflow o
 * transform de los contenedores del tema—, así que necesita su propia copia de
 * las variables: si no, dentro del modal `var(--hf-atp-acento)` no resuelve y
 * los botones quedan sin fondo (texto blanco sobre blanco) y las tablas sin
 * líneas.
 */
.hf-atp,
.hf-atp__modal {
	--hf-atp-acento: #0f6fd6;
	--hf-atp-ok: #00a650;
	--hf-atp-no: #d92d20;
	--hf-atp-quiza: #b54708;
	--hf-atp-borde: #e6e6e6;
	--hf-atp-texto: #1a1a1a;
	--hf-atp-suave: #666;
	--hf-atp-fondo: #f5f5f5;
	--hf-atp-radio: 8px;

	color: var(--hf-atp-texto);
	font-size: 15px;
	line-height: 1.5;
}

.hf-atp *,
.hf-atp *::before,
.hf-atp *::after,
.hf-atp__modal *,
.hf-atp__modal *::before,
.hf-atp__modal *::after {
	box-sizing: border-box;
}

.hf-atp__modal {
	color: var(--hf-atp-texto);
	font-size: 15px;
	line-height: 1.5;
}

.hf-atp__modal ul,
.hf-atp__modal ol,
.hf-atp__modal ul > li,
.hf-atp__modal ol > li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Reset de listas del módulo.
 *
 * Salient da estilo a `ul li` / `ol li` con selectores de elemento, que le ganan
 * a una clase puesta en el contenedor: sin esto aparecen viñetas y numeración
 * del tema dentro del stepper, del panel y de las razones de compatibilidad.
 * Se listan los `li` explícitamente para subir la especificidad.
 * Las listas que SÍ quieren viñeta (los avisos) la reponen más abajo.
 */
.hf-atp ul,
.hf-atp ol,
.hf-atp ul > li,
.hf-atp ol > li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hf-atp ul > li::before,
.hf-atp ol > li::before {
	content: none;
}

/*
 * Reset de párrafos.
 *
 * Salient le da `padding-bottom: 30px` a todos los <p> del sitio. Dentro de una
 * card eso son treinta píxeles muertos debajo de la marca, del precio y de cada
 * línea suelta: el contenido queda flotando y la ficha crece al pedo. Acá el
 * espaciado lo maneja el `gap` de los contenedores flex, que es uniforme y se
 * ajusta en un solo lugar.
 */
.hf-atp p,
.hf-atp__modal p {
	margin: 0;
	padding: 0;
}

.hf-atp__noscript,
.hf-atp__cargando {
	padding: 24px;
	background: var(--hf-atp-fondo);
	border-radius: var(--hf-atp-radio);
}

.hf-atp__pasos-estaticos {
	color: var(--hf-atp-suave);
	margin: 12px 0 0;
	padding-left: 20px;
}

/* Layout ------------------------------------------------------------------ */

.hf-atp__grilla {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

@media (max-width: 900px) {
	.hf-atp__grilla {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Stepper ----------------------------------------------------------------- */

.hf-atp__stepper {
	margin-bottom: 16px;
	border-bottom: 1px solid var(--hf-atp-borde);
	padding-bottom: 12px;
}

/*
 * El stepper es un <ol> por semántica (los pasos van en orden), pero la
 * numeración la dibujamos nosotros en un círculo. Salient numera los <li> de
 * cualquier lista ordenada con un selector de elemento, que le gana a una clase
 * puesta solo en el <ol>: sin el list-style en el propio <li> aparecían los
 * "1." "2." "3." del navegador encima de nuestros círculos, pisando el texto.
 */
.hf-atp__stepper-lista,
.hf-atp__stepper-lista > li {
	list-style: none;
}

.hf-atp__stepper-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 0;
}

.hf-atp__stepper-item {
	margin: 0;
	padding: 0;
}

.hf-atp__stepper-item::before,
.hf-atp__stepper-item::marker {
	content: none;
}

.hf-atp__stepper-boton {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	background: none;
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--hf-atp-suave);
	cursor: pointer;
	font-size: 13px;
	line-height: 1.2;
}

.hf-atp__stepper-boton:hover {
	background: var(--hf-atp-fondo);
}

.hf-atp__stepper-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 11px;
	flex: 0 0 auto;
}

.hf-atp__stepper-item.es-completo .hf-atp__stepper-boton {
	color: var(--hf-atp-ok);
}

.hf-atp__stepper-item.es-actual .hf-atp__stepper-boton {
	background: var(--hf-atp-acento);
	border-color: var(--hf-atp-acento);
	color: #fff;
	font-weight: 600;
}

.hf-atp__stepper-compacto {
	display: none;
	font-weight: 600;
	margin: 0;
}

/* En mobile once pasos no entran en una fila: se muestra solo la posición. */
@media (max-width: 700px) {
	.hf-atp__stepper-lista {
		display: none;
	}

	.hf-atp__stepper-compacto {
		display: block;
	}
}

/* Paso -------------------------------------------------------------------- */

.hf-atp__paso-titulo {
	font-size: 24px;
	margin: 0 0 4px;
}

/* Sin límite de ancho: la descripción del paso es una línea corta y con 65ch
   se partía en dos desaprovechando la pantalla. */
.hf-atp__paso-desc {
	color: var(--hf-atp-suave);
	margin: 0 0 4px;
}

.hf-atp__paso-nota {
	color: var(--hf-atp-acento);
	font-size: 13px;
	margin: 0;
}

.hf-atp__paso-cab {
	margin-bottom: 0;
}

.hf-atp__estado,
.hf-atp__panel-vacio {
	color: var(--hf-atp-suave);
	padding: 24px 0;
}

.hf-atp__aviso {
	background: #fff8e6;
	border: 1px solid #ffd98c;
	border-radius: var(--hf-atp-radio);
	margin-bottom: 20px;
	padding: 12px 16px;
}

.hf-atp__aviso--error {
	background: #fef3f2;
	border-color: #fda29b;
}

.hf-atp__aviso p {
	margin: 0 0 4px;
}

/* Acá la viñeta sí ayuda a leer: son varias cosas que el usuario tiene que
   resolver, y el reset de arriba se las había sacado. */
.hf-atp__aviso ul,
.hf-atp__aviso ul > li {
	list-style: disc;
}

.hf-atp__aviso ul {
	padding-left: 20px;
}

.hf-atp__pasos-estaticos,
.hf-atp__pasos-estaticos > li {
	list-style: decimal;
}

.hf-atp__error {
	padding: 24px 0;
}

/* Grilla de productos ----------------------------------------------------- */

/* El aire entre la cabecera del paso y los productos vive acá y no en
   .hf-atp__paso-cab, para que los avisos que se intercalan entre ambos (el de
   "ninguna opción compatible", por ejemplo) no queden pegados al título. */
.hf-atp__productos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	margin-top: 16px;
}

.hf-atp__card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--hf-atp-borde);
	border-radius: var(--hf-atp-radio);
	overflow: hidden;
	transition: border-color .15s, box-shadow .15s;
}

.hf-atp__card:hover {
	box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}

.hf-atp__card.es-elegido {
	border-color: var(--hf-atp-acento);
	box-shadow: 0 0 0 1px var(--hf-atp-acento);
}

/*
 * Los incompatibles se atenúan pero NO se esconden: si el producto que el
 * usuario vino a buscar desaparece de la lista, no tiene forma de entender que
 * el problema es una pieza que eligió antes.
 *
 * Quedan apagados de punta a punta y sin acciones (el JS no les dibuja botones):
 * una card que no lleva a ningún lado no debe invitar a que le hagan clic.
 */
.hf-atp__card.es-bloqueada {
	background: #fafafa;
	opacity: .72;
}

.hf-atp__card.es-bloqueada .hf-atp__card-img {
	filter: grayscale(.65);
}

.hf-atp__card.es-bloqueada .hf-atp__card-nombre,
.hf-atp__card.es-bloqueada .hf-atp__card-precio {
	color: var(--hf-atp-suave);
}

.hf-atp__card.es-bloqueada:hover {
	box-shadow: none;
}

.hf-atp__card-medios {
	position: relative;
}

/* El badge se apoya sobre la esquina de la imagen: es lo primero que hay que
   poder leer de la card, antes que el nombre y el precio. */
.hf-atp__card-medios .hf-atp__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1;
	margin: 0;
	padding: 2px 6px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
}

.hf-atp__card-img {
	display: block;
	width: 100%;
	height: 160px;
	object-fit: contain;
	background: #fff;
	padding: 12px;
}

.hf-atp__card-cuerpo {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 10px 12px 12px;
	flex: 1;
}

/*
 * El botón de acción se apoya en el fondo de la tarjeta; el enlace a la ficha
 * queda pegado abajo de él.
 *
 * Va con `auto` y no con un margen fijo porque las tarjetas de una fila miden
 * todas lo mismo pero su contenido no: con un margen fijo, el botón arrancaba
 * donde terminaba el texto y cada tarjeta lo dejaba a una altura distinta.
 */
.hf-atp__card-cuerpo .hf-atp__boton--elegir {
	margin-top: auto;
}

.hf-atp__card-marca {
	color: var(--hf-atp-suave);
	font-size: 12px;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: .03em;
}

/*
 * El nombre ocupa dos líneas, ni más ni menos.
 *
 * Es lo único de la tarjeta con alto variable, y en una fila con títulos de
 * una, dos y tres líneas el precio, el selector y el botón terminaban cada uno
 * a su altura. Por eso el alto es fijo y no un máximo: con `min-height` los
 * títulos cortos tampoco suben el resto. El nombre completo sigue disponible
 * en el `title` de la tarjeta y en la ficha.
 */
.hf-atp__card-nombre {
	font-size: 14px;
	line-height: 18px;
	font-weight: 400;
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	min-height: 36px;
	overflow: hidden;
}

.hf-atp__card-precio {
	font-size: 16px;
	line-height: 18px;
	font-weight: 500;
	margin: 0;
}

.hf-atp__card-stock {
	color: var(--hf-atp-no);
	font-size: 13px;
	font-weight: 600;
	margin: 0;
}

.hf-atp__badge {
	align-self: flex-start;
	border-radius: 4px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.5;
	margin: 0;
	padding: 2px 8px;
}

/* Sobre la imagen el fondo tiene que ser opaco para que el badge se lea igual
   con cualquier foto de producto abajo. */
.hf-atp__badge--compatible {
	background: #e0f5e9;
	color: #007a3d;
}

.hf-atp__badge--incompatible {
	background: #fde7e5;
	color: #b42318;
}

.hf-atp__badge--desconocido {
	background: #fdf0d5;
	color: var(--hf-atp-quiza);
}

.hf-atp__card-razones {
	color: var(--hf-atp-suave);
	font-size: 12.5px;
	line-height: 1.4;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hf-atp__card-razones li + li {
	margin-top: 3px;
}

.hf-atp__card-link {
	background: none;
	border: 0;
	color: var(--hf-atp-suave);
	cursor: pointer;
	font-size: 12.5px;
	padding: 4px 0 0;
	text-align: center;
	text-decoration: underline;
	width: 100%;
}

.hf-atp__card-link:hover {
	color: var(--hf-atp-acento);
}

/* -------------------------------------------------------------------------
 * Ficha rápida (modal)
 *
 * La ficha se abre acá y no en una pestaña nueva: mandar al usuario al
 * permalink en mitad del armado es hacerle perder el hilo, y volver implica
 * confiar en que use el botón atrás.
 * ------------------------------------------------------------------------- */

.hf-atp-modal-abierto {
	overflow: hidden;
}

.hf-atp__modal {
	position: fixed;
	inset: 0;
	z-index: 100000; /* Por encima del header fijo de Salient. */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.hf-atp__modal-fondo {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .55);
}

.hf-atp__modal-caja {
	position: relative;
	background: #fff;
	border-radius: var(--hf-atp-radio);
	box-shadow: 0 12px 48px rgba(0, 0, 0, .25);
	max-width: 900px;
	width: 100%;
	max-height: 88vh;
	overflow-y: auto;
}

.hf-atp__modal-cerrar {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: 34px;
	height: 34px;
	background: #fff;
	border: 1px solid var(--hf-atp-borde);
	border-radius: 50%;
	color: var(--hf-atp-texto);
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
}

.hf-atp__modal-cerrar:hover {
	background: var(--hf-atp-fondo);
}

.hf-atp__modal-contenido {
	padding: 24px;
}

.hf-atp__ficha {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 28px;
}

.hf-atp__ficha-img {
	width: 100%;
	height: 300px;
	object-fit: contain;
	background: #fff;
}

.hf-atp__ficha-minis {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

/*
 * Miniaturas cuadradas.
 *
 * El sitio usa botones de tipo píldora y Salient lo impone con
 * `border-radius: 200px !important` desde salient-dynamic-styles.css (la regla
 * de `body[data-button-style^="rounded"]`). En un botón de 54×54 eso da un
 * círculo y la foto del producto queda recortada en redondo.
 *
 * Es el único !important del módulo y va acá porque contra un !important del
 * tema no hay especificidad que alcance; la alternativa sería dejar de usar
 * <button> para la miniatura y perder el manejo de teclado.
 */
.hf-atp__modal .hf-atp__ficha-mini {
	width: 54px;
	height: 54px;
	padding: 2px;
	background: #fff;
	border: 1px solid var(--hf-atp-borde);
	border-radius: 4px !important;
	cursor: pointer;
	overflow: hidden;
}

.hf-atp__modal .hf-atp__ficha-mini.es-activa {
	border-color: var(--hf-atp-acento);
	box-shadow: 0 0 0 1px var(--hf-atp-acento);
}

.hf-atp__modal .hf-atp__ficha-mini img {
	border-radius: 0;
}

.hf-atp__ficha-mini img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* El botón de cerrar flota sobre esta esquina: sin la sangría le come la última
   palabra al título. */
.hf-atp__ficha-nombre {
	font-size: 20px;
	line-height: 1.3;
	margin: 0 0 8px;
	padding-right: 40px;
}

.hf-atp__ficha-precio {
	font-size: 26px;
	font-weight: 600;
	margin: 0 0 4px;
}

.hf-atp__ficha-precio {
	margin-bottom: 14px;
}

.hf-atp__ficha-desc {
	color: var(--hf-atp-texto);
	font-size: 14px;
	margin-bottom: 16px;
}

.hf-atp__ficha-subtitulo {
	font-size: 15px;
	margin: 0 0 8px;
}

.hf-atp__ficha-specs {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	margin: 0 0 18px;
	font-size: 13.5px;
}

.hf-atp__ficha-specs dt,
.hf-atp__ficha-specs dd {
	border-bottom: 1px solid var(--hf-atp-borde);
	margin: 0;
	padding: 6px 0;
}

.hf-atp__ficha-specs dt {
	color: var(--hf-atp-suave);
	padding-right: 10px;
}

.hf-atp__ficha-datos .hf-atp__boton {
	width: 100%;
}

.hf-atp__ficha-link {
	color: var(--hf-atp-suave);
	display: inline-block;
	font-size: 12.5px;
	margin-top: 10px;
	text-decoration: underline;
}

@media (max-width: 700px) {
	.hf-atp__modal {
		padding: 0;
	}

	.hf-atp__modal-caja {
		max-height: 100vh;
		border-radius: 0;
	}

	.hf-atp__modal-contenido {
		padding: 18px;
	}

	.hf-atp__ficha {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.hf-atp__ficha-img {
		height: 220px;
	}
}

/* Botones ----------------------------------------------------------------- */

.hf-atp__boton {
	background: var(--hf-atp-acento);
	border: 1px solid var(--hf-atp-acento);
	border-radius: 6px;
	color: #fff;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	padding: 9px 18px;
	transition: opacity .15s;
}

.hf-atp__boton:hover:not(:disabled) {
	opacity: .88;
}

.hf-atp__boton:disabled {
	cursor: not-allowed;
	opacity: .45;
}

.hf-atp__boton--elegir {
	margin-top: auto;
	width: 100%;
}

/*
 * "Quitar" no es lo mismo que "Elegir" y no puede verse igual.
 *
 * Con el mismo azul, la única diferencia entre el componente ya elegido y los
 * demás era la palabra del botón: en una grilla de seis productos eso se pasa
 * por alto. En azul oscuro el elegido se distingue de un vistazo y el clic
 * destructivo deja de parecer la acción principal.
 */
.hf-atp__boton--quitar {
	background: #10243e;
	border-color: #10243e;
}

.hf-atp__boton--fantasma {
	background: none;
	border-color: var(--hf-atp-borde);
	color: var(--hf-atp-texto);
}

.hf-atp__boton--principal {
	font-size: 16px;
	padding: 12px 26px;
}

.hf-atp__enlace {
	background: none;
	border: 0;
	color: var(--hf-atp-acento);
	cursor: pointer;
	font-size: 13px;
	padding: 0;
	text-decoration: underline;
}

/*
 * Barra de acciones anclada al borde inferior.
 *
 * Con listas largas —periféricos son casi cincuenta productos— "Volver" y
 * "Siguiente/Saltear" quedaban al final del scroll: para saltear un paso había
 * que recorrer toda la grilla primero.
 *
 * Va con `fixed` y no con `sticky`, que sería lo natural, porque Salient le
 * pone `overflow: hidden` al <body> (lo necesita para el menú off-canvas) y eso
 * anula el sticky de todos sus descendientes sin dar ningún error: la barra
 * simplemente se iba con el scroll. Tocar el overflow del tema para arreglarlo
 * rompería el menú, así que se resuelve del lado del módulo.
 *
 * El padding lateral con max() hace dos cosas a la vez: el fondo llega de punta
 * a punta de la pantalla y los botones quedan alineados con la columna de
 * contenido, sin necesidad de un contenedor extra en el HTML.
 */
.hf-atp__acciones {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	padding: 12px max(20px, calc((100vw - 1280px) / 2));
	background: #fff;
	border-top: 1px solid var(--hf-atp-borde);
	box-shadow: 0 -4px 18px rgba(0, 0, 0, .1);
}

/*
 * En el primer paso no hay "Volver", y con space-between el único botón que
 * queda —"Siguiente"— se iba al borde izquierdo. La acción de avanzar tiene que
 * estar siempre en el mismo lugar: si no hay botón a la izquierda, ese lado
 * queda vacío.
 */
.hf-atp__acciones > .hf-atp__boton:only-child {
	margin-left: auto;
}

/*
 * Aire al final del contenido para que la barra no tape la última fila de
 * productos ni el botón de "Ver resumen" del panel.
 */
.hf-atp {
	padding-bottom: 88px;
}

/* Panel lateral ----------------------------------------------------------- */

/*
 * OJO: este `sticky` hoy NO tiene efecto — el <body> de Salient lleva
 * `overflow: hidden` y eso anula el posicionamiento pegajoso de todos sus
 * descendientes (ver la nota larga en .hf-atp__acciones). El panel scrollea
 * junto con el resto de la página.
 *
 * Se deja declarado a propósito: el día que el tema deje de recortar el
 * overflow, el comportamiento deseado vuelve solo. Si se decide que el panel
 * tiene que acompañar al scroll sí o sí, hay que pasarlo a `fixed` como se hizo
 * con la barra de acciones —y entonces hay que resolver qué pasa en mobile,
 * donde no hay ancho para una columna fija.
 */
.hf-atp__panel {
	background: #fff;
	border: 1px solid var(--hf-atp-borde);
	border-radius: var(--hf-atp-radio);
	padding: 16px;
	position: sticky;
	top: 20px;
}

.hf-atp__panel-titulo {
	font-size: 16px;
	margin: 0 0 12px;
}

.hf-atp__panel-lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hf-atp__panel-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2px 8px;
	border-bottom: 1px solid var(--hf-atp-borde);
	padding: 8px 0;
}

.hf-atp__panel-item.es-problema {
	border-left: 3px solid var(--hf-atp-no);
	padding-left: 8px;
}

.hf-atp__panel-paso {
	color: var(--hf-atp-suave);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .03em;
	grid-column: 1;
}

.hf-atp__panel-nombre {
	font-size: 13px;
	grid-column: 1;
	line-height: 1.3;
}

.hf-atp__panel-razon {
	color: var(--hf-atp-no);
	font-size: 12px;
	grid-column: 1 / -1;
}

.hf-atp__panel-editar {
	background: none;
	border: 0;
	color: var(--hf-atp-acento);
	cursor: pointer;
	font-size: 12px;
	grid-column: 2;
	grid-row: 1 / 3;
	padding: 0;
	align-self: center;
}

.hf-atp__panel-pie {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 14px;
}

/*
 * Lleva el `p` en el selector a propósito. La caja de watts es un párrafo, y
 * unas líneas más arriba de esta hoja está `.hf-atp p { padding: 0 }`, que con
 * una clase más un elemento le gana a una clase sola: sin el `p` acá, el padding
 * de abajo no se aplica nunca. Es el mismo choque que hubo con el título del
 * aviso post-compra, y se resuelve igual (no con !important).
 */
p.hf-atp__panel-watts {
	background: var(--hf-atp-fondo);
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 8px 10px;
}

.hf-atp__panel-watts-num {
	font-size: 18px;
	font-weight: 600;
}

.hf-atp__panel-watts-txt {
	color: var(--hf-atp-suave);
	font-size: 11.5px;
}

.hf-atp__panel-subtotal {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0;
}

.hf-atp__panel-subtotal strong {
	font-size: 20px;
}

/*
 * En mobile el panel deja de ser una columna lateral y se apoya abajo de todo,
 * después del paso: arriba ocuparía la primera pantalla entera y empujaría los
 * productos fuera de la vista.
 */
@media (max-width: 900px) {
	.hf-atp__panel {
		position: static;
		order: 2;
	}

	.hf-atp__principal {
		order: 1;
	}
}

/* Resumen final ----------------------------------------------------------- */

.hf-atp__resumen-lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hf-atp__resumen-item {
	align-items: center;
	border-bottom: 1px solid var(--hf-atp-borde);
	display: grid;
	gap: 4px 12px;
	grid-template-columns: 150px minmax(0, 1fr) auto;
	padding: 10px 0;
}

.hf-atp__resumen-paso {
	color: var(--hf-atp-suave);
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.hf-atp__resumen-nombre {
	font-size: 14px;
}

.hf-atp__resumen-item.es-vacio .hf-atp__resumen-nombre {
	color: var(--hf-atp-suave);
	font-style: italic;
}

@media (max-width: 600px) {
	.hf-atp__resumen-item {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.hf-atp__resumen-paso {
		grid-column: 1 / -1;
	}
}

/*
 * Mobile: dos columnas y fichas más bajas.
 *
 * Con el mínimo de 220px la grilla cae a una sola columna en un teléfono, y con
 * la imagen de 160px cada producto ocupa casi una pantalla: recorrer seis
 * procesadores eran seis scrolls completos. Dos columnas con la imagen más baja
 * dejan ver tres o cuatro opciones de una, que es lo que hace comparable un
 * listado.
 */
@media (max-width: 600px) {
	.hf-atp__productos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.hf-atp__card-img {
		height: 110px;
		padding: 8px;
	}

	.hf-atp__card-cuerpo {
		padding: 10px;
		gap: 5px;
	}

	/* El nombre y el precio conservan su tamaño en mobile: son los dos datos
	   que se comparan entre productos y achicarlos los vuelve ilegibles. */

	.hf-atp__card-razones {
		font-size: 11.5px;
	}

	.hf-atp__boton {
		padding: 8px 14px;
	}

	.hf-atp__paso-titulo {
		font-size: 20px;
	}

	/* En mobile la barra fija ocupa el ancho completo y los botones se
	   reparten el espacio: son el control principal del paso. */
	.hf-atp__acciones {
		gap: 8px;
		padding: 10px 14px;
	}

	/*
	 * Prolonga el fondo blanco por debajo de la barra.
	 *
	 * En Safari de iPhone, entre la barra y el borde de la pantalla queda una
	 * franja de unos 30px —la del indicador de inicio— por la que se veía pasar
	 * la grilla de productos al scrollear. Pasa porque `bottom: 0` se resuelve
	 * contra el viewport de layout, que en iOS no coincide con lo que se ve
	 * mientras la barra de direcciones se contrae.
	 *
	 * Lo canónico sería `env(safe-area-inset-bottom)`, pero devuelve 0 salvo que
	 * el meta viewport lleve `viewport-fit=cover`, y ese meta lo emite Salient
	 * para todo el sitio: cambiarlo por esta franja arrastraría a cada página a
	 * dibujarse bajo los bordes redondeados de la pantalla.
	 *
	 * Así que se pinta y listo. Los 140px cubren la franja con margen de sobra y
	 * en cualquier otro navegador quedan fuera de la pantalla, invisibles.
	 */
	.hf-atp__acciones::after {
		content: '';
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: 140px;
		background: #fff;
		pointer-events: none;
	}

	.hf-atp__acciones .hf-atp__boton {
		flex: 1;
		padding: 11px 10px;
	}

	.hf-atp {
		padding-bottom: 76px;
	}
}

/* En pantallas muy angostas, dos columnas aprietan demasiado el nombre. */
@media (max-width: 359px) {
	.hf-atp__productos {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * Selector de cantidad
 *
 * El control es el de Salient, el mismo de la ficha de producto y del carrito:
 * stepperCantidad() emite su markup y el theme lo pinta con `.cart
 * div.quantity`. Acá abajo no se define nada de su aspecto a propósito —si HF
 * cambia el estilo de botones desde el panel del theme, este selector cambia
 * con el resto de la tienda—. Lo único propio es dónde se apoya en la tarjeta.
 */
.hf-atp__cantidad {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

/*
 * En los pasos con unidades el stepper va arriba del botón: primero se elige
 * cuántas, después se agregan. Eso mueve el "empujar hasta el fondo de la
 * tarjeta" del botón al stepper, que ahora es el primero de los dos, y sin eso
 * las tarjetas de una grilla dejan de alinear sus botones entre sí.
 */
.hf-atp__card-cuerpo .hf-atp__cantidad {
	margin-top: auto;
	padding-top: 10px;
}

.hf-atp__cantidad + .hf-atp__boton--elegir {
	margin-top: 8px;
}

/* Salient le da 110px fijos; sin esto, el flex del contenedor lo aplasta. */
.hf-atp__cantidad .quantity {
	flex: 0 0 auto;
}

/*
 * Elección de quién arma el equipo
 *
 * Es obligatoria y va al final del resumen, justo antes del botón de carrito:
 * es la última decisión que queda por tomar y la única que cambia la garantía
 * de lo que se está comprando.
 */
/*
 * Sin padding lateral: las dos opciones tienen que medir lo mismo que la lista
 * de pasos de arriba y que el panel "Tu equipo" de abajo. Con padding, este
 * bloque las metía 18px para adentro de cada lado y quedaban visiblemente más
 * angostas que todo lo demás de la columna. El fondo es el mismo gris de la
 * página, así que el recuadro no se percibía como caja: lo único que se notaba
 * era el escalón.
 */
.hf-atp__armado {
	margin: 20px 0 0;
	padding: 16px 0;
}

.hf-atp__armado-titulo {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 12px;
}

.hf-atp__armado-opciones {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/*
 * Cada opción es una tarjeta y no una línea suelta: son dos alternativas que se
 * comparan entre sí —cambia la garantía, no el precio— y el borde deja ver de un
 * vistazo cuál está elegida y cuál no.
 */
.hf-atp__armado-opcion {
	align-items: flex-start;
	background: #fff;
	border: 1px solid var(--hf-atp-borde);
	border-radius: var(--hf-atp-radio);
	cursor: pointer;
	display: flex;
	gap: 10px;
	padding: 14px 16px;
}

.hf-atp__armado-opcion:hover {
	border-color: var(--hf-atp-acento);
}

.hf-atp__armado-opcion.es-elegida {
	border-color: var(--hf-atp-acento);
	box-shadow: 0 0 0 1px var(--hf-atp-acento);
}

/* El radio de fábrica sale de 13px y al lado de un texto de 15 queda perdido.
   accent-color lo pinta con el azul de HF sin tener que dibujarlo a mano. */
.hf-atp__armado-check {
	accent-color: var(--hf-atp-acento);
	cursor: pointer;
	/* Empuja el control a la altura de la primera línea del texto, que con
	   align-items: flex-start queda arriba de todo. */
	margin: 2px 0 0;
	height: 18px;
	width: 18px;
	flex: 0 0 auto;
}

.hf-atp__armado-texto {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hf-atp__armado-etiqueta {
	font-size: 15px;
	font-weight: 600;
}

.hf-atp__armado-nota {
	color: var(--hf-atp-suave);
	font-size: 13.5px;
	line-height: 1.5;
}

/*
 * El aviso de que falta elegir. No es un error —el usuario todavía no hizo nada
 * mal— así que va en el naranja de "revisá esto" y no en el rojo de rechazo.
 */
.hf-atp__armado-falta {
	color: var(--hf-atp-quiza);
	font-size: 13.5px;
	margin: 12px 0 0;
}

/* Contenedor de la galería de la ficha: la imagen grande y las miniaturas ya
   traen su propio estilo, acá solo se apilan. */
.hf-atp__ficha-galeria {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Filtro por tipo -----------------------------------------------------------
 *
 * Solo aparece en los pasos que juntan categorías distintas y tienen volumen
 * (hoy, Periféricos). Va entre la descripción del paso y la grilla: es el orden
 * en que se lee la pantalla —qué estoy eligiendo, cómo lo acoto, qué hay—.
 *
 * Se envuelve en varias líneas en vez de hacer scroll horizontal: son cuatro o
 * cinco píldoras cortas, y una fila que se desplaza esconde opciones sin avisar.
 */
.hf-atp__filtro {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.hf-atp__filtro-item {
	align-items: center;
	background: #fff;
	border: 1px solid var(--hf-atp-borde);
	/* Cápsula, no el radio general: la diferencia de forma ayuda a leerlas como
	   un control de filtro y no como botones de acción. */
	border-radius: 999px;
	color: var(--hf-atp-texto);
	cursor: pointer;
	display: inline-flex;
	font-size: 14px;
	gap: 6px;
	line-height: 1;
	padding: 8px 14px;
	transition: border-color .15s ease, background-color .15s ease;
}

.hf-atp__filtro-item:hover {
	border-color: var(--hf-atp-acento);
}

.hf-atp__filtro-item.es-activa {
	background: var(--hf-atp-acento);
	border-color: var(--hf-atp-acento);
	color: #fff;
}

/* El conteo es un dato de apoyo: se atenúa para que el nombre siga siendo lo
   primero que se lee. Sobre la píldora activa el gris no llegaría al contraste
   mínimo contra el azul, así que ahí va blanco con opacidad. */
.hf-atp__filtro-cuenta {
	color: var(--hf-atp-suave);
	font-size: 13px;
}

.hf-atp__filtro-item.es-activa .hf-atp__filtro-cuenta {
	color: #fff;
	opacity: .75;
}

@media (prefers-reduced-motion: reduce) {
	.hf-atp__filtro-item {
		transition: none;
	}
}