/* ============================================================
   Estilos exclusivos para la categoría "autos a batería" y sus
   productos. Se aplican SOLO dentro de elementos con la clase
   .is-autos-bateria, agregada condicionalmente desde:
     - theme/templates/category.tpl (category.handle / category.top.handle == 'autos-bateria')
     - theme/templates/product.tpl  (product.category.handle / product.category.top.handle == 'autos-bateria')
   Diseño de referencia: referencia-diseno/hilux.html + hilux.css
   (reestilado sobre el markup NATIVO de Brasilia, no copiado)
   No modifica ningún otro archivo CSS del theme.
   Ver REGISTRO-AUTOS-BATERIA.md para la guía completa reusable.
   ============================================================ */

@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('../fonts/space-grotesk.woff2') format('woff2');
}

/* ------------------------------------------------------------
   1) Paleta y tipografía, todo scopeado bajo .is-autos-bateria
   ------------------------------------------------------------
   Dos capas de variables:
   a) --ab-* : paleta propia del diseño hilux (carbón + celeste),
      usada por los bloques NUEVOS (métricas, ficha técnica, etc).
   b) Las custom properties propias del theme Brasilia
      (--main-background, --accent-color, --button-background...)
      redefinidas con los mismos valores: como casi todo el CSS
      base de Brasilia ya usa esas variables, esto retema
      automáticamente los componentes NATIVOS reusados (botones,
      precio, texto) sin pisar selector por selector ni !important.
*/

.is-autos-bateria {
	--ab-carbon:       #0C0D10;
	--ab-carbon-alto:  #14181B;
	--ab-carbon-card:  #1A1F23;
	--ab-linea:        #272D32;
	--ab-celeste:      #9FC6CB;
	--ab-celeste-tenue:#5E7C80;
	--ab-texto:        #FFFFFF;
	--ab-texto-2:      #A9B6B9;
	--ab-texto-3:      #71807F;
	--ab-texto-suave:  #E8EEEF;

	/* Retema del theme base (ver nota arriba) */
	--main-background: var(--ab-carbon);
	--main-foreground: var(--ab-texto);
	--accent-color: var(--ab-celeste);
	--button-background: var(--ab-celeste);
	--button-foreground: var(--ab-carbon);
	--heading-font: 'Space Grotesk', sans-serif;
	--body-font: 'Space Grotesk', sans-serif;

	/* Avisa al navegador de que acá adentro el fondo es oscuro, para que los
	   controles que dibuja ÉL y no el CSS -la lista desplegable de un <select>,
	   los checkboxes de los filtros, las barras de scroll- se pinten en su
	   variante oscura. Sin esto el tema sólo cambia lo que puede alcanzar con
	   selectores, y los widgets nativos siguen asumiendo fondo claro. */
	color-scheme: dark;

	background-color: var(--main-background);
	color: var(--main-foreground);
}

/* Lista desplegable de los <select> (el "Ordenar por" del listado y los
   selectores de variante de las tarjetas).
   -------------------------------------------------------------------
   El bloque de arriba pone `--main-foreground` en blanco, y las <option>
   heredan ese color. Pero el desplegable abierto lo dibuja el navegador con
   su propio fondo, que por omisión es claro: resultado, texto blanco sobre
   blanco, ilegible hasta que el resaltado del mouse pasa por encima.

   `color-scheme: dark` ya lo resuelve en los navegadores que lo aplican al
   popup. Esto es el refuerzo explícito para los que no: se le da a cada
   opción el fondo y el color de la paleta, en vez de dejarla heredando sólo
   el color del texto. Chromium en Windows/Android respeta estos dos valores
   en la lista abierta; en macOS el popup es del sistema y los ignora, pero
   ahí también ignora el blanco heredado, así que se ve igual de bien. */
.is-autos-bateria select option,
.is-autos-bateria select optgroup {
	color: var(--ab-texto);
	background-color: var(--ab-carbon-card);
}

/* Título de categoría (listado): sin mayúsculas forzadas. */
.is-autos-bateria .category-body > .container > .grid h1.h4 {
	font-weight: 400;
	letter-spacing: .005em;
}

/* Ocultar header + navbar completos SOLO en el DETALLE de producto de
   "autos a batería" — pedido explícito del usuario. Todo el header
   (logo, buscador, menú mobile Y navegación desktop) vive junto adentro
   de un único <header>, snipplets/header/header.tpl, sin tocar — y se
   renderiza ANTES de `#single-product` en el HTML (layout.tpl), así que
   no hay forma de alcanzarlo con un selector descendiente normal a
   partir de `.is-autos-bateria` en un elemento posterior. Se usa
   `:has()` (soportado en todos los navegadores evergreen desde 2022/23)
   para que <body> "mire hacia adelante": si en algún lugar de la
   página existe `#single-product.is-autos-bateria`, se oculta el
   header. El ID `#single-product` solo existe en la ficha de producto
   (product.tpl) — el LISTADO de la categoría "autos a batería"
   (category.tpl, que también usa la clase `.is-autos-bateria` pero en
   otro contenedor, `.category-body`) no lo tiene, así que esta regla
   no lo afecta: solo el detalle de cada producto. No se tocó ningún
   .tpl compartido (layout.tpl/header.tpl). */
body:has(#single-product.is-autos-bateria) header.js-head-main {
	display: none;
}

/* ------------------------------------------------------------
   LISTADO de "autos a batería": sin header ni banner, nav oscuro
   ------------------------------------------------------------
   Pedido: entrando a /autos-a-bateria/ no se muestra el header, solo la
   barra de navegación, en oscuro y con las letras en blanco; el banner de
   la categoría tampoco se muestra. El objetivo es que el cliente vea los
   productos sin scrollear.

   El gancho es `.category-body.is-autos-bateria`, que category.tpl pone en
   el <section> del listado. Como el <header> se renderiza ANTES en el HTML,
   hace falta el mismo `:has()` que la regla de arriba para que <body> mire
   hacia adelante. Ojo: `#single-product` NO existe en el listado y
   `.category-body` NO existe en el detalle, así que las dos reglas son
   mutuamente excluyentes y ninguna pisa a la otra.

   POR QUÉ NO SE JUNTAN LOS SELECTORES EN UNA LISTA
   -------------------------------------------------
   Sería tentador sumar este selector a la lista del bloque de paleta de la
   L35. No se puede: si el navegador no soporta `:has()`, una lista separada
   por comas con UN selector inválido se descarta ENTERA, y se perdería
   también la paleta del detalle de producto. Por eso cada `:has()` vive en
   su propia regla y la degradación queda acotada. */

/* 1) Se va el contenido del header; queda la navegación.
      Se ocultan los HIJOS de la fila y no la fila entera, a propósito: el
      contenedor del aviso de "producto agregado al carrito"
      (`.js-alert-add-to-cart-private`) también cuelga de `.head-row`, y es
      `position: fixed` — no depende del alto de la fila, pero un
      `display: none` en la fila se lo llevaría puesto y el listado perdería
      el feedback del quick-shop. Ocultando los hijos uno por uno, el aviso
      sobrevive. */

body:has(.category-body.is-autos-bateria) .js-adbar,
body:has(.category-body.is-autos-bateria) .js-head-row > .menu-container,
body:has(.category-body.is-autos-bateria) .js-head-row > .js-logo-container,
body:has(.category-body.is-autos-bateria) .js-head-row > .search-container,
body:has(.category-body.is-autos-bateria) .js-head-row > .utilities-container {
	display: none;
}

/* Vaciada la fila, lo único que le queda es su propio padding. A cero, para
   que el nav suba hasta el borde de la pantalla. */
body:has(.category-body.is-autos-bateria) .js-head-row {
	padding-top: 0;
	padding-bottom: 0;
}

/* 2) El nav en oscuro, con las letras en blanco.
      No se pisa selector por selector: se reasignan los TOKENS nativos sobre
      el <header> y la cascada hace el resto, que es el mismo criterio que usa
      el bloque de paleta de la L35. Con esto quedan cubiertos de una sola vez
      el fondo del nav (`.head-colors .nav-desktop-container` usa
      `--header-background`), sus links (`--header-foreground`), el panel
      desplegable del mega-menú (`.desktop-dropdown` usa `--main-background` y
      sus links `--main-foreground`), la tira de categorías de mobile y el
      fondo del propio <header>. Cero `!important` y cero peleas de
      especificidad.

      Las opacidades derivadas se reasignan sobre BLANCO: el tema las calcula
      a partir del color de texto, que en claro es casi negro. Sin esto, los
      bordes y los fondos de hover del mega-menú (que `autos-bateria.css` toma
      de `--main-foreground-opacity-05/10/40`) quedarían negro sobre negro,
      invisibles. */

body:has(.category-body.is-autos-bateria) header.js-head-main {
	/* Mismos valores que el bloque de paleta de la L35; se repiten porque el
	   <header> está fuera de `.is-autos-bateria` y no hereda sus variables. */
	--ab-carbon-alto: #14181B;
	--ab-texto: #FFFFFF;

	--main-background: var(--ab-carbon-alto);
	--main-foreground: var(--ab-texto);
	--header-background: var(--ab-carbon-alto);
	--header-foreground: var(--ab-texto);

	--main-foreground-opacity-03: rgba(255, 255, 255, .03);
	--main-foreground-opacity-05: rgba(255, 255, 255, .05);
	--main-foreground-opacity-10: rgba(255, 255, 255, .10);
	--main-foreground-opacity-20: rgba(255, 255, 255, .20);
	--main-foreground-opacity-30: rgba(255, 255, 255, .30);
	--main-foreground-opacity-40: rgba(255, 255, 255, .40);
	--main-foreground-opacity-50: rgba(255, 255, 255, .50);
	--main-foreground-opacity-60: rgba(255, 255, 255, .60);

	--header-foreground-opacity-10: rgba(255, 255, 255, .10);
	--header-foreground-opacity-20: rgba(255, 255, 255, .20);
	--header-foreground-opacity-30: rgba(255, 255, 255, .30);
	--header-foreground-opacity-50: rgba(255, 255, 255, .50);
}

/* 3) Fuera el banner de la categoría.
      Acá no hace falta `:has()`: el banner está DENTRO de `.category-body`,
      o sea que un selector descendiente normal lo alcanza. Menos frágil. */
.is-autos-bateria .category-banner {
	display: none;
}

/* ------------------------------------------------------------
   2) Precio y compra — look ".compra" del modelo hilux
   ------------------------------------------------------------
   Estructura real de theme/snipplets/product/product-form.tpl (sin tocar
   el archivo): h1.js-product-name -> .price-container -> (opcional)
   .js-product-payments-container -> <form id="product_form"> (variantes,
   cantidad, botón real). Se reestila cada pieza con su clase real; el
   "rótulo" del diseño hilux es directamente product.name (ya incluye
   nombre + voltaje en esta tienda, ej. "Auto Ferrari a batería 12V" —
   no hace falta ningún dato nuevo). El precio queda en blanco/negrita y
   el celeste se reserva para cuotas/descuentos/CTA, igual que en hilux
   (.precio .valor no lleva color propio en la referencia).
*/

/* Se saca de la vista el nombre (arriba del precio) por pedido
   explícito del usuario — ya se muestra grande en el hero. Se lo oculta
   visualmente en vez de borrarlo o usar display:none: sigue siendo el
   <h1> semántico real de la página (el único en toda la ficha), lo
   necesitan tanto el SEO (motores de búsqueda) como lectores de
   pantalla — display:none lo hubiera sacado de ambos circuitos. Técnica
   estándar "visually hidden": ocupa 1px, sin desbordar layout, pero
   sigue presente en el documento. */
#single-product.is-autos-bateria .js-product-name {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Layout de precio/compra apilado en una sola columna, como tarjetas
   redondeadas independientes — pedido explícito del usuario con imagen
   de referencia (estilo app nativa: "Precio" chico + precio grande;
   tarjeta de cuotas con ícono y flecha; texto de compra protegida;
   variante de color; aviso de stock; cantidad + botón lado a lado;
   cambios y devoluciones). Reemplaza el grid de 2 columnas del intento
   anterior (ver REGISTRO-AUTOS-BATERIA.md secciones 34/36) — TERCER
   intento de este bloque; acá no hace falta grid en absoluto, `.pt-md-3`
   vuelve al apilado simple nativo (sin ninguna regla propia), cada
   pieza es su propia tarjeta con su propio margen. Los divs
   `.autos-bateria-price-col`/`.autos-bateria-action-col` siguen en
   product-form.tpl (no hacía falta sacarlos, quedan como contenedores
   sin estilo — no afectan nada). Breadcrumbs y el nombre siguen ocultos
   (secciones 34/38). */

.is-autos-bateria .price-container {
	position: relative;
	background-color: var(--ab-carbon-alto);
	border: 1px solid var(--ab-linea);
	border-radius: 4px;
	padding: 1.25rem 1.5rem;
}

.is-autos-bateria .price-container::before {
	content: "Precio";
	display: block;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--ab-celeste);
	margin-bottom: .3rem;
}

/* Precio +30% de tamaño y +15% de "grosor" (pedido explícito). El
   tamaño escala directo (clamp original * 1.3). El grosor: la fuente
   Space Grotesk está cargada como variable con rango 300–700
   (@font-face de la sección 1, mismo archivo que trae hilux.css) —
   700 ya es el extremo más pesado que el archivo tiene, así que
   font-weight no puede subir más (un valor mayor se clampea a 700 sin
   ningún cambio visual). Para lograr el engrosado igual, se usa
   -webkit-text-stroke (repasa el trazo de cada letra) sumado al
   font-weight ya al máximo — no es una "verdadera" instancia de fuente
   más pesada, pero es el único camino real con esta fuente cargada. */
.is-autos-bateria .js-price-display {
	font-size: clamp(2.4rem, 7.8vw, 3.25rem);
	font-weight: 700;
	-webkit-text-stroke: .4px var(--ab-texto);
	letter-spacing: -.02em;
	color: var(--ab-texto);
}

.is-autos-bateria .price-compare {
	color: var(--ab-texto-2);
}

/* Tarjeta de cuotas/descuento: ícono en círculo + texto + flecha,
   clickeable de verdad (mismo target/modal nativo que ya traía este
   contenedor: data-target="#installments-modal"). El ícono es el
   símbolo #credit-card, ya existe en el sprite SVG del theme
   (theme/snipplets/svg/icons.tpl) — no es un archivo nuevo.

   ⚠️ El padding horizontal necesita `!important`: el div nativo ya
   trae la clase `px-0` (product-form.tpl, sin tocar — utilitario de
   Brasilia) que en style-utilities.scss es
   `padding-left/right: 0 !important`. Sin el `!important` acá, ese
   utilitario le sigue ganando a cualquier padding propio (confirmado
   con el inspector del navegador: el padding horizontal quedaba en
   0px pese a la regla de abajo) — por eso el ícono y la flecha
   quedaban pegados al borde. El 5rem de la vuelta anterior quedó
   demasiado espaciado (confirmado por el usuario con una captura de
   referencia) — se bajó a un padding de tarjeta normal. */
.is-autos-bateria .js-product-payments-container {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: .85rem;
	background-color: var(--ab-carbon-alto);
	border: 1px solid var(--ab-linea);
	border-radius: 4px;
	padding: .9rem 1.25rem !important;
	color: var(--ab-texto);
	font-weight: 500;
	cursor: pointer;
}

/* Ícono, texto y flecha SIEMPRE en una sola fila horizontal — pedido
   explícito del usuario, el ícono no se puede desplazar nunca. Antes
   había `flex-wrap:wrap` acá y en el contenedor de arriba: si el texto
   no entraba, bajaba a una segunda línea y el `align-items:center` del
   padre recentraba el ícono contra el alto total (2 líneas), corriendo
   su posición respecto del texto. Con `nowrap` + `white-space:nowrap`
   el texto nunca se parte en más de una línea; si no entra en el
   ancho disponible, se recorta con scroll horizontal en vez de
   empujar el layout o mover el ícono. */
.is-autos-bateria .autos-bateria-payments-text {
	text-align: center;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	overflow-x: auto;
}

/* El texto real de cuotas/descuento vive en 2 divs internos del
   componente nativo `installments` (.js-max-installments-container) y
   del contenedor de descuento (.js-product-discount-container), AMBOS
   con la clase nativa `.font-medium` (style-critical.scss:
   `font-size: var(--font-medium) !important`). El font-size puesto en
   el wrapper de arriba nunca llegaba a mostrarse: cada uno de esos 2
   hijos tiene su PROPIO font-size con !important, que gana sin
   importar qué diga el padre (la herencia de font-size no aplica
   cuando el hijo ya trae un valor explícito propio). Hace falta
   apuntarles directo, con más especificidad Y !important, para
   ganarle al !important nativo.

   Tamaño con `clamp()` en vez de un `rem` fijo — pedido explícito del
   usuario: el texto tiene que adaptarse a la pantalla, nunca quedar
   fijo a un tamaño que obligue a hacer scroll horizontal para leerlo
   completo (el `overflow-x:auto` de la regla de arriba queda como
   última red de seguridad, no como comportamiento esperado).
   `clamp(.72rem, 3.6vw, 1.28rem)`: los 3 valores del clamp original
   (.9rem/4.5vw/1.6rem) reducidos un 20% parejo, pedido explícito del
   usuario — se achica solo en pantallas angostas (mínimo .72rem) y no
   pasa de 1.28rem en pantallas anchas. */
.is-autos-bateria .autos-bateria-payments-text .font-medium {
	font-size: clamp(.72rem, 3.6vw, 1.28rem) !important;
}

.is-autos-bateria .autos-bateria-payments-icon {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--ab-celeste-tenue);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Ícono provisorio (tornillo.svg, mismo criterio que el hero — sección
   16): se pinta celeste recortando el SVG con mask-image en vez de
   fill, porque se referencia como asset estático. Cuando lo
   reemplacen por el ícono definitivo, alcanza con cambiar el
   `static_url` en product-form.tpl, esta regla no se toca. El
   contenedor ya centra su contenido (align-items/justify-content:center
   de arriba). */
.is-autos-bateria .autos-bateria-payments-icon-mark {
	width: 18px;
	height: 18px;
	background-color: var(--ab-celeste);
	-webkit-mask-image: var(--ab-payments-icon);
	mask-image: var(--ab-payments-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.is-autos-bateria .autos-bateria-payments-text {
	flex: 1 1 auto;
	min-width: 0;
}

.is-autos-bateria .js-product-payments-container::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-left: auto;
	border-right: 2px solid var(--ab-texto-2);
	border-bottom: 2px solid var(--ab-texto-2);
	transform: rotate(-45deg);
}

.is-autos-bateria .js-product-discount-container .text-accent {
	color: var(--ab-celeste);
	font-weight: 700;
}

/* Negrita en la cantidad de cuotas ("6") y en el valor de cada cuota
   ("$X"), pedido explícito — clases reales del componente nativo
   `installments` (verificadas contra el HTML servido, no adivinadas).
   La palabra "cuotas" en sí queda dentro de un <span> sin clase propia
   compartido con "sin interés de" en el mismo componente nativo (no es
   un .tpl editable) — no hay forma de aislarla sola por CSS sin poner
   en negrita también "sin interés de", que no se pidió. */
.is-autos-bateria .product-installment-amount,
.is-autos-bateria .product-installment-value {
	font-weight: 700;
}

/* El link "Ver medios de pago"/"Ver más detalles" queda oculto
   visualmente (mismo criterio que el nombre, sección 38): la tarjeta
   entera ya es clickeable (data-target="#installments-modal" en
   .js-product-payments-container) y la flecha de arriba ya comunica
   "hay más info acá" — mostrar además el texto del link duplicaría la
   affordance sin agregar nada. Sigue en el DOM, funciona igual al
   activarse por teclado/lector de pantalla. */
.is-autos-bateria #btn-installments {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Aviso de stock bajo ("¡Solo quedan X en stock!", settings nativos de
   Brasilia — texto configurable por el merchant, no inventado): misma
   tarjeta oscura que el resto (sin colores nuevos fuera de la paleta
   de hilux), texto en celeste para que se note como el resto de la
   info destacada de la ficha (cuotas, specs). */
.is-autos-bateria .text-stock {
	display: flex;
	align-items: center;
	gap: .6rem;
	background-color: var(--ab-carbon-alto);
	border: 1px solid var(--ab-linea);
	border-radius: 4px;
	padding: .75rem 1rem;
	color: var(--ab-celeste);
	font-weight: 600;
}

/* Botón "Agregar al carrito" (real, nativo): el fondo celeste / texto
   carbón ya llegan solos desde --button-background/--button-foreground
   (retema general de la sección 1). Acá solo tipografía + forma, como
   .btn-primario en hilux. */
.is-autos-bateria .btn-primary {
	font-weight: 700;
	letter-spacing: .01em;
	border-radius: 3px;
}

.is-autos-bateria .btn-secondary {
	border-radius: 3px;
	transition: var(--transition-normal);
}

.is-autos-bateria .btn-secondary:hover {
	border-color: var(--ab-celeste);
	color: var(--ab-celeste);
}

/* Selector de cantidad (-, 1, +): borde redondeado a juego con el
   resto de las tarjetas, mismo componente nativo (product-quantity.tpl). */
.is-autos-bateria .form-quantity {
	border: 1px solid var(--ab-linea);
	border-radius: 3px;
	overflow: hidden;
}

/* Se oculta el título "Descripción" + el texto de la descripción del
   producto (product-description.tpl, sin tocar) — pedido explícito del
   usuario: es redundante con el hero/ficha técnica/equipamiento, que ya
   muestran toda la info estructurada. Selector por el atributo
   data-store (único, con el id del producto de sufijo) en vez de por
   clase, para no arriesgar pisar algo de otra sección con clases
   genéricas como .font-weight-bold. Reseñas (#reviewsapp) siguen
   mostrándose normal; compartir en redes se oculta aparte, abajo
   (pedido explícito del usuario en un pedido posterior). */
.is-autos-bateria [data-store^="product-description-"] > .font-weight-bold,
.is-autos-bateria [data-store^="product-description-"] > .user-content {
	display: none;
}

/* Sección "Compartir en redes" (íconos de WhatsApp/Facebook/Twitter/
   Pinterest, snipplets/social/social-share.tpl, sin tocar) — pedido
   explícito del usuario, se oculta por completo. Clase propia y única
   del componente, no hace falta ningún selector más específico. */
.is-autos-bateria .social-share {
	display: none;
}

/* ------------------------------------------------------------
   3) Galería nativa (product-image.tpl / product-image-thumbs.tpl)
   ------------------------------------------------------------
   Solo estilos visuales sobre el swiper nativo: NO se toca su
   estructura ni su cantidad de columnas (sigue siendo un carrusel,
   soporta cualquier cantidad de fotos). Look "tarjeta" con borde
   celeste al pasar el mouse / en la miniatura activa, igual
   espíritu que .tira/.tira:hover del diseño hilux.
*/
.is-autos-bateria .product-thumb {
	background-color: var(--ab-carbon-alto);
	border: 1px solid var(--ab-linea);
	border-radius: 3px;
	overflow: hidden;
	transition: border-color .18s ease;
}

.is-autos-bateria .product-thumb:hover,
.is-autos-bateria .product-thumb.selected {
	border-color: var(--ab-celeste);
}

/* Flechas de la galería a los costados (izquierda/derecha), no arriba
   y abajo — porque la tira de miniaturas es HORIZONTAL en cualquier
   ancho de pantalla (mobile y desktop, ver el bloque de la galería más
   abajo). Nativamente son botones "inline" (clase .swiper-button-inline
   de Brasilia: position:relative — quedan en el flujo normal, debajo de
   la tira, pensado para la tira VERTICAL original) y están ocultos en
   mobile (.d-none, con !important — por eso hace falta más
   especificidad + !important propio para mostrarlos siempre). El ícono
   nativo (#arrow-long-down, apunta abajo, con icon-flip-vertical para
   que "prev" apunte arriba) se rota 90° para que apunte a
   izquierda/derecha. */
.is-autos-bateria .js-swiper-product-thumbs-prev,
.is-autos-bateria .js-swiper-product-thumbs-next {
	display: flex !important;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--ab-carbon-alto);
	border: 1px solid var(--ab-linea);
	color: var(--ab-texto);
}

.is-autos-bateria .js-swiper-product-thumbs-prev {
	left: .35rem;
}

.is-autos-bateria .js-swiper-product-thumbs-next {
	right: .35rem;
}

.is-autos-bateria .js-swiper-product-thumbs-prev svg,
.is-autos-bateria .js-swiper-product-thumbs-next svg {
	width: 16px;
	height: 16px;
}

.is-autos-bateria .js-swiper-product-thumbs-prev svg {
	transform: rotate(90deg);
}

.is-autos-bateria .js-swiper-product-thumbs-next svg {
	transform: rotate(-90deg);
}

.is-autos-bateria .js-swiper-product-thumbs-prev:hover,
.is-autos-bateria .js-swiper-product-thumbs-next:hover {
	color: var(--ab-celeste);
	border-color: var(--ab-celeste);
}

/* Fracción de paginación del slider principal ("2 / 5") */
.is-autos-bateria .swiper-fractions {
	color: var(--ab-texto-2);
}

/* Columna de fotos y columna de info/compra — apiladas en mobile,
   2 columnas de verdad en desktop (sección 82 del registro: se
   restaura el layout nativo de Brasilia lado a lado, 60/40, que se
   había apagado por completo — sin media query — en la sección 22
   porque en ese momento el hero vivía DENTRO de .product-images y la
   dejaba desproporcionadamente alta contra .product-info. Ahora el
   hero es HERMANO DIRECTO de .product-images/.product-info (se movió
   de product-image.tpl a product.tpl) — eso es justamente lo que
   permite ponerlo en la columna derecha junto al precio en desktop,
   cosa que no se podía lograr solo con CSS mientras estaba anidado
   dentro de la columna de fotos.

   Mobile (default, sin media query): `.product-columns` es un flex en
   columna, con `order` explícito en sus 3 hijos directos — mismo
   resultado visual de siempre (imagen+galería, hero, precio, apilados
   en ese orden), ya no depende de que el hero esté anidado en
   `.product-images` para lograrlo.

   Desktop (`min-width:768px`, el mismo breakpoint nativo de Brasilia
   donde el theme original ya ponía galería y compra lado a lado):
   grid de 2 columnas — galería a la izquierda (ocupa las 2 filas que
   usa la columna derecha, `grid-row:1/span 2`, así su alto no fuerza
   ninguna fila fantasma), hero + precio apilados uno debajo del otro
   a la derecha. `align-items:start` es necesario para que cada
   columna mida su propio contenido en vez de estirarse a la altura de
   la más alta — es lo que evitó el problema de huecos/desalineación
   que rompió los intentos anteriores de esta ficha (secciones 13/34). */
.is-autos-bateria .product-columns {
	display: flex;
	flex-direction: column;
}

.is-autos-bateria .product-columns > .product-images {
	order: 1;
	width: 100% !important;
	flex: none !important;
}

.is-autos-bateria .product-columns > .autos-bateria-hero {
	order: 2;
	width: 100%;
	margin-top: 1rem;
}

.is-autos-bateria .product-columns > .product-info {
	order: 3;
	width: 100% !important;
	flex: none !important;
	margin-top: 2rem;
}

@media (min-width: 768px) {
	.is-autos-bateria .product-columns {
		display: grid;
		grid-template-columns: 55% 1fr;
		column-gap: 1rem;
		align-items: start;
	}

	.is-autos-bateria .product-columns > .product-images {
		grid-column: 1;
		grid-row: 1 / span 2;
		width: 100% !important;
	}

	.is-autos-bateria .product-columns > .autos-bateria-hero {
		grid-column: 2;
		grid-row: 1;
		width: 100%;
		margin-top: 0;
	}

	.is-autos-bateria .product-columns > .product-info {
		grid-column: 2;
		grid-row: 2;
		margin-top: 1.5rem;
	}
}

/* Ancho máximo del `.container` — restaurado SOLO en la ficha de autos
   a batería.

   Causa: el CSS global que la Tienda B carga desde el admin
   (Configuración avanzada → CSS, inyectado en layout.tpl L50-52 DESPUÉS
   de todas las hojas del theme) trae
   `body .container { position:relative; width:100%; max-width:100% }`.
   Ese `max-width:100%` pisa los 5 `max-width` responsivos nativos de
   Brasilia y deja el `.container` a todo el ancho en TODA la tienda. Es
   el diseño del cliente para el resto del sitio: no se toca.

   Fix: se repiten los 5 breakpoints nativos, copiados tal cual de
   style-critical.scss L2604-2640 (540/720/960/1140/1300 en
   576/768/992/1200/1400) — no son anchos inventados — bajo un selector
   más específico.

   Sin `!important`: `body .container` es especificidad (0,1,1) y este
   selector es (1,2,0); gana por el `#id` solo. Se resuelve por
   especificidad, no por orden de carga (que perderíamos: el <style> del
   admin va último).

   Por qué `#single-product` y no `.is-autos-bateria` a secas: esa clase
   se usa TAMBIÉN en el listado de la categoría (category.tpl L18, sobre
   `.category-body`), que tiene su propio `.container` en L19 — un
   `.is-autos-bateria .container` pelado le devolvería el ancho máximo a
   esa página también. `#single-product` solo existe en el detalle
   (product.tpl L4).

   El `>` es literal: el `.container` es hijo DIRECTO de
   `#single-product` (product.tpl L21) y es el único `.container` de la
   ficha (verificado en los 6 snipplets que incluye).

   No se tocan `padding` ni `margin`: la regla del admin no los
   sobreescribe, así que el `padding: 0 var(--gutter-container)` y el
   `margin: 0 auto` nativos (style-critical.scss L109-113) siguen
   vigentes — con el `max-width` de vuelta, el centrado sale solo. */
@media (min-width: 576px) {
	#single-product.is-autos-bateria > .container {
		max-width: 540px;
	}
}

@media (min-width: 768px) {
	#single-product.is-autos-bateria > .container {
		max-width: 720px;
	}
}

@media (min-width: 992px) {
	#single-product.is-autos-bateria > .container {
		max-width: 960px;
	}
}

@media (min-width: 1200px) {
	#single-product.is-autos-bateria > .container {
		max-width: 1140px;
	}
}

@media (min-width: 1400px) {
	#single-product.is-autos-bateria > .container {
		max-width: 1300px;
	}
}

/* "Hasta el borde" en mobile — pedido explícito del usuario: que el
   resto de las secciones (imagen, hero, galería, tarjetas de
   precio/cuotas/stock) lleguen al borde de la pantalla igual que ya
   lo hacen Ficha técnica/Equipamiento/Multimedia (autos-bateria-extras.tpl,
   secciones `<section>` que viven FUERA de `.container` en product.tpl,
   por eso ya tocaban el borde sin necesitar ningún ajuste). El resto
   del bloque de producto vive DENTRO de `.container`, que trae relleno
   horizontal nativo (`.container{padding:0 var(--gutter-container)}`,
   style-critical.scss) — eso es lo que dejaba un margen visible en los
   costados que Ficha técnica/Equipamiento no tienen.
   Fix: se estira `.product-columns` (contenedor directo de imagen,
   hero, galería y precio/compra) con márgenes negativos usando la
   variable nativa `--gutter-negative` (ya definida por el theme,
   style-tokens.tpl, mismo valor que el padding que hay que cancelar)
   — reclama el espacio del padding del `.container` sin tocar esa
   clase compartida con TODA la tienda. Solo en mobile (`max-width:767px`):
   en desktop el `.container` ya tiene un margen automático mucho más
   grande (centrado, con max-width), no tendría sentido ahí.
   Además, para que las tarjetas (hero, precio, cuotas, stock) se vean
   "a borde" de verdad y no como tarjetas redondeadas flotando pegadas
   al borde, se les saca el `border-radius` en este mismo ancho —
   mismo criterio visual que ya usan Ficha técnica/Equipamiento (sin
   bordes redondeados, todo en escuadra). El padding INTERNO de cada
   una (el texto/contenido) no se toca, solo el borde/esquinas. */
@media (max-width: 767px) {
	.is-autos-bateria .product-columns {
		margin-left: var(--gutter-negative);
		margin-right: var(--gutter-negative);
	}

	.is-autos-bateria .autos-bateria-hero,
	.is-autos-bateria .price-container,
	.is-autos-bateria .js-product-payments-container,
	.is-autos-bateria .text-stock {
		border-radius: 0;
	}
}

/* Ficha técnica / Equipamiento / Multimedia, centradas y con margen en
   desktop — pedido explícito del usuario. Estas 3 secciones viven
   FUERA de `.container` (autos-bateria-extras.tpl, incluido en
   product.tpl después de que cierra `.container` — así llegan solas
   al borde en mobile, sección 78) y por eso no tenían ningún límite de
   ancho ni centrado propio: en pantallas grandes se estiraban a todo
   el viewport, mientras el resto de la ficha (imagen, hero, precio)
   vive DENTRO de `.container` — centrado, con un ancho máximo — y
   quedaba visualmente descentrado/desalineado respecto de estas 3.
   Se replican EXACTAMENTE los mismos anchos máximos que usa `.container`
   en style-critical.scss (540/720/960/1140/1300px en los mismos 5
   breakpoints) para que el borde de estas secciones coincida pixel a
   pixel con el borde del resto del contenido de arriba — no un ancho
   inventado. Solo desde 768px: en mobile siguen a borde completo,
   sin tocar nada de la sección 78. */
@media (min-width: 768px) {
	.is-autos-bateria .autos-bateria-tecnica,
	.is-autos-bateria .autos-bateria-equipo,
	.is-autos-bateria .autos-bateria-multimedia,
	.is-autos-bateria .autos-bateria-video,
	.is-autos-bateria .autos-bateria-galeria {
		max-width: 720px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (min-width: 992px) {
	.is-autos-bateria .autos-bateria-tecnica,
	.is-autos-bateria .autos-bateria-equipo,
	.is-autos-bateria .autos-bateria-multimedia,
	.is-autos-bateria .autos-bateria-video,
	.is-autos-bateria .autos-bateria-galeria {
		max-width: 960px;
	}
}

@media (min-width: 1200px) {
	.is-autos-bateria .autos-bateria-tecnica,
	.is-autos-bateria .autos-bateria-equipo,
	.is-autos-bateria .autos-bateria-multimedia,
	.is-autos-bateria .autos-bateria-video,
	.is-autos-bateria .autos-bateria-galeria {
		max-width: 1140px;
	}
}

@media (min-width: 1400px) {
	.is-autos-bateria .autos-bateria-tecnica,
	.is-autos-bateria .autos-bateria-equipo,
	.is-autos-bateria .autos-bateria-multimedia,
	.is-autos-bateria .autos-bateria-video,
	.is-autos-bateria .autos-bateria-galeria {
		max-width: 1300px;
	}
}

/* Foto principal arriba -> tira de miniaturas HORIZONTAL abajo, a todo
   el ancho de la columna de imagen — en MOBILE Y EN DESKTOP por igual
   (pedido explícito del usuario). Estas reglas estuvieron un tiempo
   scopeadas a `@media (max-width:767px)` mientras el desktop usaba la
   tira vertical nativa a la izquierda; al volver a pedir la tira
   horizontal abajo, la forma más simple es sacarles el media query:
   vuelven a aplicar en cualquier ancho, que es como estaban antes.

   Todas estas reglas le ganan a las nativas de desktop
   (style-critical.scss, dentro de su propio `@media (min-width:768px)`:
   `.product-images-thumbs{width:60px}`,
   `.product-images-slider{width:calc(100% - 76px)}`,
   `.product-thumb-container{width:auto}`) por especificidad: las de acá
   llevan `.is-autos-bateria` adelante (2 clases) contra 1 sola de las
   nativas, así que no hace falta ningún `!important` ni repetir el
   media query.

   El hero NO vive acá adentro (se movió a product.tpl como hermano
   directo de .product-images/.product-info — sección 84 del registro).
   Pura reordenación visual por flexbox, sin tocar la estructura nativa
   de la galería: swiper, zoom y cantidad de fotos siguen intactos. La
   DIRECCIÓN del swiper de miniaturas (horizontal/vertical) no se
   controla por CSS sino por JS, en store.js.tpl. */
.is-autos-bateria .product-images {
	display: flex;
	flex-direction: column;
}

.is-autos-bateria .product-images-slider {
	order: 1;
	width: 100%;
}

.is-autos-bateria .product-images-thumbs {
	order: 2;
	width: 100%;
	margin-top: 1rem;
	position: relative;
}

/* Sección "Galería": la tira de miniaturas dejó de vivir adentro de la
   columna de la imagen y pasó a ser una sección propia, a todo el ancho
   (autos-bateria-galeria.tpl, incluido desde autos-bateria-extras.tpl,
   entre Multimedia y el video). Fondo carbón puro para alternar con
   Multimedia, que va justo arriba y es carbón alto. */
.is-autos-bateria .autos-bateria-galeria {
	background-color: var(--ab-carbon);
	padding: clamp(2.75rem, 7vw, 4.5rem) clamp(1.25rem, 4.5vw, 3rem);
}

.is-autos-bateria .autos-bateria-galeria .product-images-thumbs {
	margin-top: .25rem;
}

/* Deja lugar a los costados para que las flechas (absolutas, a
   izquierda y derecha) no queden tapando la primera/última miniatura. */
.is-autos-bateria .js-swiper-product-thumbs {
	padding: 0 2.5rem;
}

.is-autos-bateria .swiper-product-thumb {
	height: auto;
	max-height: 420px;
}

/* Ancho de cada miniatura — o sea, qué tan grande se ve cada foto. El
   swiper usa `slidesPerView:'auto'`, así que toma este ancho del CSS;
   las que no entran quedan para scrollear con las flechas.

   La tanda anterior era "N por fila": `(100% - 16px*(N-1)) / N`, con
   N=3 en mobile y N=5 desde 768px (16px es el `spaceBetween` del
   swiper, ver store.js.tpl; para N por fila hay N-1 espacios).

   El usuario pidió después un 40% más grandes, así que acá está esa
   misma expresión multiplicada por 1.4, distribuida sobre sus dos
   términos — más exacto que buscar un N entero, que solo permite
   saltos gruesos (de 5 a 4 por fila son +27%, a 3 son +73%). Equivale
   a ~2,2 miniaturas por fila en mobile y ~3,6 desde 768px: que la
   última quede cortada es intencional, avisa que la tira sigue. */
.is-autos-bateria .product-thumb-container {
	width: calc(46.667% - 14.93px);
}

@media (min-width: 768px) {
	.is-autos-bateria .product-thumb-container {
		width: calc(28% - 17.92px);
	}
}

/* Relación de aspecto fija para imagen principal (4:3) y miniaturas
   (1:1 — pedido explícito del usuario, "para que se vea prolijo").
   Nativamente Brasilia arma la caja de cada foto con un `padding-bottom`
   INLINE calculado en Twig a partir del alto/ancho REAL de esa foto
   puntual (ver product-image.tpl / product-image-thumbs.tpl), y la
   imagen se ajusta "a medida" (height:auto, sin recortar) — si las
   fotos de un producto no son todas exactamente la misma proporción,
   cada slide/miniatura queda de un tamaño distinto. Acá se fuerza un
   aspecto fijo, recortando (object-fit:cover, centrado) lo que sobre.
   El `padding-bottom` inline solo se puede pisar con `!important`. */

.is-autos-bateria .product-images-slider .js-product-slide-link {
	padding-bottom: 75% !important; /* 4:3 en mobile */
}

/* En desktop la imagen principal prueba 1:1 (cuadrada) — pedido
   explícito del usuario, en reemplazo del 2:3 anterior. Va DESPUÉS de
   la regla de arriba y en su propio @media (en vez de agregar el media
   query a la regla base) para que gane por orden de cascada — misma
   selectividad y ambas `!important`, así que la que aparece después en
   el archivo es la que manda cuando el media query aplica. */
@media (min-width: 768px) {
	.is-autos-bateria .product-images-slider .js-product-slide-link {
		padding-bottom: 100% !important; /* 1:1 */
	}
}

.is-autos-bateria .product-images-slider .js-product-slide-link img.img-absolute {
	height: 100%;
	object-fit: cover;
}

/* OJO: el ancho de `.product-thumb-container` (calc((100% - 80px)/6),
   pensado para 6 miniaturas en fila horizontal) vive SOLO dentro del
   bloque `@media (max-width:767px)` de más arriba (junto con el resto
   del apilado mobile) — acá abajo NO se repite. Repetirlo sin media
   query fue justo el bug que hizo desaparecer la galería en desktop
   (ver el comentario grande más arriba): esta regla, sin scope, le
   ganaba en desktop al `width:auto` nativo y encogía cada miniatura a
   un ancho negativo/inválido dentro de la tira angosta vertical. En
   desktop el ancho lo resuelve `width:auto` nativo (style-critical.scss). */

.is-autos-bateria .product-thumb {
	padding-bottom: 100% !important; /* 1:1 */
}

.is-autos-bateria .product-thumb img.img-absolute {
	height: 100%;
	object-fit: cover;
}

/* ------------------------------------------------------------
   4) Listado de categoría (grilla nativa de product-item)
   ------------------------------------------------------------
*/
/* Foto de cada tarjeta a 1:1 fijo. A diferencia de la galería de la
   ficha de producto (sección 20/32, que pisa un `padding-bottom`
   INLINE), acá el contenedor nativo (`.product-item-image-container`,
   componente `product-item`, no es un archivo .tpl legible/editable)
   no fuerza ningún aspecto — el alto real depende de cada foto
   (`.product-item-image{height:100%;width:auto;object-fit:contain}`,
   sin recortar), por eso cada tarjeta de la grilla terminaba con una
   proporción de imagen distinta. Se fuerza `aspect-ratio:1/1` en el
   contenedor (sin necesidad de `!important`: acá no hay ningún estilo
   inline con el que pelear) y se pisa el `object-fit:contain` nativo
   por `cover` para que la foto recorte y llene la caja fija en vez de
   dejar franjas vacías con las fotos que no sean cuadradas. */
.is-autos-bateria .product-item-image-container {
	aspect-ratio: 1 / 1;
	height: auto;
}

.is-autos-bateria .product-item-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.is-autos-bateria .product-item {
	background-color: var(--ab-carbon-card);
	border: 1px solid var(--ab-linea);
	padding: var(--spacing-2);
	border-radius: 3px;
	transition: var(--transition-normal);
	/* Truco clásico de CSS Grid: por default, un ítem de grid no encoge
	   por debajo del ancho mínimo de SU contenido (min-width:auto), sin
	   importar que la columna sea 1fr — si algo adentro no puede
	   partirse (precio en negrita, nombre largo sin espacios, etc.) el
	   ítem entero empuja la fila más allá del ancho de la pantalla en
	   vez de recortarse. min-width:0 le devuelve al grid el control
	   real del ancho; overflow-wrap para que un texto largo sin
	   espacios (nombre de producto) rompa igual en vez de desbordar. */
	min-width: 0;
	overflow-wrap: break-word;
}

.is-autos-bateria .product-item:hover {
	border-color: var(--ab-celeste);
}

.is-autos-bateria .product-item-price {
	color: var(--ab-texto);
	font-weight: 700;
}

.is-autos-bateria .product-item-discount {
	color: var(--ab-celeste);
}

/* Precio + % de descuento vivían en un grid nativo de 3 columnas
   (auto 1fr auto, .product-item-price-container) pensado para el ancho
   de tarjeta "por defecto" de Brasilia. El fix de min-width:0 de
   arriba evita que la FILA de la grilla se desborde de la pantalla,
   pero adentro de cada tarjeta ese grid seguía intentando poner precio
   y % de descuento en la misma línea a su ancho "natural" — si no
   entraban, se recortaban/desbordaban del borde de la tarjeta. Pasa lo
   mismo en las 4 columnas de desktop (grid-md-4) que en las 2 de
   mobile — por eso este bloque NO está atado a un @media, se aplica
   siempre. Se lo pasa a flex con wrap (el descuento baja de línea si
   hace falta) y se usa `clamp()` para el tamaño de precio/descuento en
   vez de un valor fijo por breakpoint — escala solo con el ancho real
   disponible, así no hay que acordarse de replicar la regla para cada
   media query nueva (ver REGISTRO-AUTOS-BATERIA.md sección 30 — la
   versión anterior de este fix solo cubría mobile). */
.is-autos-bateria .product-item-price-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: .15rem;
}

.is-autos-bateria .product-item-price {
	font-size: clamp(1rem, 3vw, 1.35rem);
}

.is-autos-bateria .product-item-price-compare {
	font-size: clamp(.75rem, 2vw, .85rem);
	color: var(--ab-texto-2);
}

.is-autos-bateria .product-item-discount {
	font-size: clamp(.75rem, 2vw, .9rem);
	margin-left: 0;
}

/* "Productos relacionados"/"Productos complementarios" (carrusel al pie
   de la ficha de producto, product-related.tpl): vive FUERA de
   `#single-product` en el DOM (product.tpl lo incluye después de que
   cierra ese div), así que nunca heredó `.is-autos-bateria` por
   ancestro — por eso se veía con fondo blanco pese a que el resto de
   la ficha ya es oscuro. Se le agregó la clase `is-autos-bateria`
   DIRECTO a la sección (product-related.tpl, `section_class`), no como
   descendiente — pedido explícito del usuario: "que no sea blanco,
   parecido a la paleta oscura, no necesariamente el mismo". Al llevar
   la clase, la sección hereda automáticamente todo el retema de
   variables nativas de la sección 1 (`--main-background`,
   `--main-foreground`, `--accent-color`, etc.) y las reglas de tarjeta
   de esta sección 4 (`.product-item`, imagen 1:1) — mismo mecanismo ya
   probado en el listado de categoría, sin escribir reglas nuevas card
   por card. El fondo propio de la sección usa `--ab-carbon-alto` (un
   tono más claro que el carbón puro del fondo general) para que se
   note como una sección propia, distinta pero de la misma paleta. */
.is-autos-bateria.js-related-products,
.is-autos-bateria.js-complementary-products {
	background-color: var(--ab-carbon-alto);
	padding-top: 1.5rem;
}

/* Sacar la franja blanca que quedaba ENTRE la ficha y "Productos
   relacionados" — pedido explícito del usuario. La causa era colapso de
   márgenes: el título de la sección trae la clase nativa `mt-3`
   (`margin-top` con !important) y la sección no tenía `padding-top`
   propio, así que ese margen se "escapaba" hacia afuera del <section>
   en vez de quedar adentro — empujaba la sección hacia abajo y en ese
   espacio se veía el fondo del <body>, que es blanco. Con el
   `padding-top` de la regla de arriba el margen ya no puede colapsar
   hacia afuera, y acá se anula el `mt-3` para que no sume DOS
   separaciones. Hace falta `!important` porque el utilitario nativo
   (style-utilities.scss) ya lo trae. */
.is-autos-bateria.js-related-products .products-section-title,
.is-autos-bateria.js-complementary-products .products-section-title {
	margin-top: 0 !important;
}

/* Red de seguridad para cualquier otro hueco entre secciones oscuras:
   se pinta el fondo de la página del mismo carbón, así nunca puede
   asomar el blanco del theme base. Misma técnica `:has()` que se usa
   para ocultar el header (ver sección 1) — el <body> no lleva la clase
   `.is-autos-bateria`, así que las variables `--ab-*` no están
   disponibles acá y el color va literal (mismo valor que --ab-carbon).
   Solo cambia el color de fondo: no se tocan las variables del theme,
   para no arrastrar el resto de la página (modales, notificaciones) a
   la paleta oscura sin que se haya pedido. El footer pinta su propio
   fondo (`.footer-colors`), así que no se ve afectado. */
body:has(#single-product.is-autos-bateria) {
	background-color: #0C0D10;
}

/* ==============================================================
   5) Bloques nuevos — sin equivalente nativo en Brasilia.
      Vienen del snippet theme/snipplets/product/autos-bateria-extras.tpl
      y usan clases propias (prefijo autos-bateria-) para no
      chocar con ninguna clase existente del theme. Fieles al
      lenguaje visual de hilux.css (.eyebrow, .metricas, .tabla,
      .lista, .chips) pero con nombres propios.
   ============================================================== */

.autos-bateria-eyebrow {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ab-celeste);
	margin-bottom: .85rem;
}

.autos-bateria-titulo-seccion {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: var(--h3, 1.75rem);
	color: var(--ab-texto);
	margin-bottom: 1.5rem;
}

/* ---- Hero (título gigante + subtítulo + specs con íconos + barra) ----
   Tarjeta oscura del ancho del contenedor de producto (no full-bleed a
   viewport: mismo criterio que .price-container en la sección 2), con
   la barra celeste fija pegada abajo, como en hilux. Fuente de los
   íconos: theme/static/images/tornillo.svg (provisorio, ver mapa
   icon_map en el snippet), pintado celeste con mask-image en vez de
   fill, porque se referencia como asset estático (no se embebe inline
   el SVG). */

.is-autos-bateria .autos-bateria-hero {
	margin-top: 2rem;
	background-color: var(--ab-carbon-alto);
	border: 1px solid var(--ab-linea);
	border-radius: 4px;
	overflow: hidden;
}

.autos-bateria-hero-inner {
	padding: clamp(2.25rem, 6vw, 3.5rem) clamp(1.5rem, 4.5vw, 3rem);
}

.autos-bateria-hero-titulo {
	font-family: 'Space Grotesk', sans-serif;
	font-size: clamp(2.25rem, 6vw, 4rem);
	font-weight: 700;
	letter-spacing: -.018em;
	line-height: 1;
	color: var(--ab-texto);
}

.autos-bateria-hero-claim {
	margin-top: 1rem;
	font-size: clamp(1.05rem, 2.2vw, 1.35rem);
	color: var(--ab-texto-suave);
}

.autos-bateria-hero-specs {
	margin-top: 2.5rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1.5rem 1rem;
}

.autos-bateria-hero-spec {
	display: flex;
	align-items: center;
	gap: .8rem;
}

.autos-bateria-hero-spec-text {
	display: flex;
	flex-direction: column;
	gap: .15rem;
}

.autos-bateria-hero-spec-label {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--ab-texto-2);
}

.autos-bateria-hero-spec-valor {
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.15;
	color: var(--ab-texto);
}

.autos-bateria-hero-icon {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	background-color: var(--ab-celeste);
	-webkit-mask-image: var(--ab-hero-icon);
	mask-image: var(--ab-hero-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.autos-bateria-hero-dim {
	margin-top: 2rem;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.5rem;
	font-size: 1.1rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--ab-texto);
}

.autos-bateria-hero-barra {
	background: var(--ab-celeste);
	color: var(--ab-carbon);
	text-align: center;
	font-weight: 700;
	letter-spacing: .01em;
	padding: .85rem 1rem;
	font-size: clamp(.8rem, 2vw, 1rem);
}

/* Barra celeste arriba de todo, antes de la imagen principal — pedido
   explícito del usuario, igual a la `.barra` del modelo hilux (que en
   el diseño de referencia va justo arriba de la foto grande). Mismo
   look que la barra del hero (celeste + texto carbón + negrita).

   De borde a borde de la pantalla — pedido explícito del usuario. NO
   se hace con el truco de márgenes negativos + 100vw desde adentro del
   `.container`: ese `100vw` incluye el ancho de la barra de scroll del
   navegador, así que suele dejar unos pixeles de scroll horizontal en
   toda la página. En vez de eso, la barra se movió en product.tpl para
   afuera del `.container`, como hija directa de `#single-product`, que
   ya ocupa todo el ancho — ancho completo sin ningún hack y sin riesgo
   de scroll horizontal. Por eso tampoco lleva border-radius: pegada a
   los dos bordes, las esquinas redondeadas no tendrían sentido.

   Letra grande que llena el alto de la barra + marquesina (el texto se
   desplaza) — pedido explícito del usuario. La barra no tiene alto
   propio: el alto sale del tamaño de letra (font-size con
   `line-height` ajustado y padding en `em`, o sea proporcional a la
   letra misma). Como a ese tamaño la frase no entra en pantalla, se
   desplaza en loop.

   Cómo cicla sin saltos: el track tiene 3 copias de la frase
   (product.tpl) y se anima hasta `translateX(calc(-100% / 3))`, o sea
   exactamente el ancho de UNA copia — al terminar, la copia 2 quedó
   justo donde estaba la 1, así que reiniciar la animación no se nota.
   Se usa `calc(-100% / 3)` en vez de `-33.333%` para que no haya
   deriva por redondeo. `width: max-content` es lo que permite que el
   track sea más ancho que la barra en vez de comprimir el texto. */
.is-autos-bateria .autos-bateria-barra-top {
	background: var(--ab-celeste);
	color: var(--ab-carbon);
	overflow: hidden;
}

.is-autos-bateria .autos-bateria-barra-top-track {
	display: flex;
	width: max-content;
	animation: autos-bateria-barra-top-scroll 22s linear infinite;
}

.is-autos-bateria .autos-bateria-barra-top-item {
	flex: 0 0 auto;
	padding: .12em .6em;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.1;
	white-space: nowrap;
	font-size: clamp(1.05rem, 3.2vw, 1.75rem);
}

@keyframes autos-bateria-barra-top-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(-100% / 3));
	}
}

/* Accesibilidad: si el visitante pidió menos movimiento en su sistema,
   no se anima nada. En ese caso la marquesina no sirve (el texto que
   sobra nunca llegaría a verse), así que se muestra una sola copia,
   centrada, con letra más chica para que entre completa. */
@media (prefers-reduced-motion: reduce) {
	.is-autos-bateria .autos-bateria-barra-top-track {
		animation: none;
		width: 100%;
		justify-content: center;
	}

	.is-autos-bateria .autos-bateria-barra-top-item {
		font-size: clamp(.8rem, 2vw, 1rem);
		padding: .85rem 1rem;
		white-space: normal;
		text-align: center;
		overflow-wrap: break-word;
	}

	.is-autos-bateria .autos-bateria-barra-top-item[aria-hidden="true"] {
		display: none;
	}
}

/* Zona superior más compacta en DESKTOP (hero + precio/cuotas) — pedido
   explícito del usuario: que la galería + panel de compra entren en la
   pantalla sin scroll, reduciendo tamaño de textos e íconos si hace
   falta. No se saca ni oculta ningún dato, solo se achican tipografía,
   íconos y separaciones entre bloques. Mobile no se toca (sigue usando
   los tamaños originales de arriba/sección 2). */
@media (min-width: 768px) {
	.autos-bateria-hero-inner {
		padding: 1.25rem 1.5rem;
	}

	.autos-bateria-hero-titulo {
		font-size: clamp(1.5rem, 2.4vw, 2rem);
	}

	.autos-bateria-hero-claim {
		margin-top: .5rem;
		font-size: .95rem;
	}

	.autos-bateria-hero-specs {
		margin-top: 1.25rem;
		gap: .85rem .75rem;
	}

	.autos-bateria-hero-spec-label {
		font-size: .62rem;
	}

	.autos-bateria-hero-spec-valor {
		font-size: .88rem;
	}

	.autos-bateria-hero-icon {
		width: 26px;
		height: 26px;
	}

	.autos-bateria-hero-dim {
		margin-top: 1rem;
		font-size: .85rem;
		gap: .3rem 1rem;
	}

	.autos-bateria-hero-barra {
		padding: .55rem 1rem;
		font-size: .78rem;
	}

	.is-autos-bateria .price-container {
		padding: .85rem 1.1rem;
		margin-bottom: .75rem !important;
	}

	.is-autos-bateria .price-container::before {
		font-size: .7rem;
		margin-bottom: .15rem;
	}

	.is-autos-bateria .js-price-display {
		font-size: 1.9rem;
	}

	.is-autos-bateria .js-product-payments-container {
		padding: .6rem 1rem !important;
		margin-top: .5rem !important;
		margin-bottom: .75rem !important;
	}

	.is-autos-bateria .autos-bateria-payments-icon {
		width: 28px;
		height: 28px;
	}

	.is-autos-bateria .autos-bateria-payments-icon-mark {
		width: 14px;
		height: 14px;
	}

	.is-autos-bateria .text-stock {
		padding: .5rem .85rem;
		margin-bottom: .75rem !important;
	}

	/* Resto del formulario de compra (mensaje de envío gratis, aviso de
	   regalo, form de variantes/cantidad/botón): mismos textos, márgenes
	   más chicos entre bloques para ganar altura. */
	.is-autos-bateria #product_form {
		margin-top: .5rem !important;
	}

	.is-autos-bateria .free-shipping-message,
	.is-autos-bateria .gift-promotion-message {
		margin-bottom: .75rem !important;
	}

	.is-autos-bateria .grid-auto-1 {
		margin-bottom: .5rem !important;
	}
}

/* ---- Métricas (números grandes) ---- */

.is-autos-bateria .autos-bateria-metricas {
	position: relative;
	isolation: isolate;
	background-color: var(--ab-carbon);
	padding: clamp(2.75rem, 7vw, 4.5rem) clamp(1.25rem, 4.5vw, 3rem);
	margin-top: 2rem;
}

.is-autos-bateria .autos-bateria-metricas::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--autos-bateria-metrica-bg);
	background-size: cover;
	background-position: center;
}

.is-autos-bateria .autos-bateria-metricas::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to bottom,
		rgba(12, 13, 16, .90) 0%, rgba(12, 13, 16, .58) 40%,
		rgba(12, 13, 16, .68) 70%, rgba(12, 13, 16, .94) 100%);
}

.autos-bateria-metricas-grilla {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 4px;
	overflow: hidden;
}

.autos-bateria-metrica {
	background: rgba(12, 13, 16, .46);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	padding: 1.9rem 1.35rem;
	text-align: center;
}

.autos-bateria-metrica-n {
	font-size: clamp(2.1rem, 5.5vw, 3.1rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	color: var(--ab-texto);
}

.autos-bateria-metrica-u {
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--ab-celeste);
	margin-left: .12em;
}

.autos-bateria-metrica-et {
	margin-top: .6rem;
	font-size: .8rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--ab-texto-3);
}

/* ---- Ficha técnica (dl/dt/dd) ---- */

.is-autos-bateria .autos-bateria-tecnica {
	background-color: var(--ab-carbon-alto);
	border-top: 1px solid var(--ab-linea);
	padding: clamp(2.75rem, 7vw, 4.5rem) clamp(1.25rem, 4.5vw, 3rem);
}

.autos-bateria-tabla {
	border-top: 1px solid var(--ab-linea);
}

.autos-bateria-fila {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	justify-content: space-between;
	padding: 1.05rem .25rem;
	border-bottom: 1px solid var(--ab-linea);
}

.autos-bateria-fila dt {
	color: var(--ab-texto-2);
	font-size: 1rem;
}

.autos-bateria-fila dd {
	font-weight: 600;
	font-size: 1rem;
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--ab-texto);
}

/* ---- Equipamiento (lista) ---- */

.is-autos-bateria .autos-bateria-equipo {
	background-color: var(--ab-carbon);
	padding: clamp(2.75rem, 7vw, 4.5rem) clamp(1.25rem, 4.5vw, 3rem);
}

.autos-bateria-lista {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: .1rem 2.25rem;
	margin: 0;
	padding: 0;
}

.autos-bateria-lista li {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	padding: .72rem 0;
	border-bottom: 1px solid var(--ab-linea);
	font-size: 1rem;
	color: var(--ab-texto);
}

.autos-bateria-lista li::before {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	margin-top: .55rem;
	background: var(--ab-celeste);
	border-radius: 50%;
}

/* ---- Multimedia (chips) ---- */

.is-autos-bateria .autos-bateria-multimedia {
	background-color: var(--ab-carbon-alto);
	border-top: 1px solid var(--ab-linea);
	border-bottom: 1px solid var(--ab-linea);
	padding: clamp(2.75rem, 7vw, 4.5rem) clamp(1.25rem, 4.5vw, 3rem);
}

/* ---- Video del producto ----
   Última sección de la ficha, justo antes de "Productos relacionados"
   (autos-bateria-extras.tpl es lo último que se renderiza adentro de
   `#single-product`, y el carrusel de relacionados va después, ya
   afuera). Fondo carbón puro para alternar con el `--ab-carbon-alto`
   de Multimedia, que queda inmediatamente arriba.

   El reproductor mantiene la proporción 16:9 con `aspect-ratio` sobre
   el marco y el iframe estirado adentro — no hace falta el truco viejo
   de `padding-bottom:56.25%` porque acá no hay ningún estilo inline
   con el que pelear (a diferencia de la galería, secciones 20/32). */
.is-autos-bateria .autos-bateria-video {
	background-color: var(--ab-carbon);
	/* La Galería, que ahora va justo arriba, también es carbón puro — sin
	   esta línea las dos secciones se leerían como un solo bloque. */
	border-top: 1px solid var(--ab-linea);
	padding: clamp(2.75rem, 7vw, 4.5rem) clamp(1.25rem, 4.5vw, 3rem);
}

/* La proporción por defecto es 16:9, pero un video SUBIDO a TiendaNube
   puede tener cualquier forma (el de camioneta-4x4-24v es panorámico).
   En ese caso el .tpl pasa la proporción real del video por la variable
   `--ab-video-aspecto` como estilo inline; acá se usa esa variable con
   16/9 de fallback, así el marco calza justo con el video y no quedan
   franjas negras arriba y abajo. */
.is-autos-bateria .autos-bateria-video-marco {
	position: relative;
	aspect-ratio: var(--ab-video-aspecto, 16 / 9);
	margin-top: .25rem;
	border: 1px solid var(--ab-linea);
	border-radius: 4px;
	overflow: hidden;
	background-color: var(--ab-carbon-alto);
}

.is-autos-bateria .autos-bateria-video-marco iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.autos-bateria-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: .25rem;
}

.autos-bateria-chip {
	display: inline-block;
	border: 1px solid var(--ab-linea);
	border-radius: 999px;
	padding: .55rem 1.1rem;
	font-size: .95rem;
	font-weight: 500;
	color: var(--ab-texto-2);
}

.autos-bateria-chip.is-destacado {
	border-color: var(--ab-celeste-tenue);
	color: var(--ab-celeste);
}

/* === NAV DESKTOP - MEGA-MENU DE GRUPOS COLAPSABLES ===========
   La distribucion en columnas del paso anterior se mantiene tal cual:
   el grupo (encabezado de nivel 1 + sus hijos) sigue siendo atomico y no
   se parte entre columnas. Lo que cambia es que ahora cada grupo arranca
   COLAPSADO: en reposo se ve solo el encabezado con una flecha al lado, y
   la lista de nivel 2 se despliega in-place al pasar el mouse, empujando
   hacia abajo lo que sigue.

   ESTRUCTURA DEL PANEL: GRID, NO MULTICOLUMNA
   --------------------------------------------
   El contenedor es una grilla de `repeat(auto-fill, minmax(200px, 1fr))`,
   asi que el layout no depende de un numero fijo de categorias: entran
   tantas columnas como quepan. Da 3 a 768px (688px utiles de container),
   4 a 1024px (928px) y 5 a 1280px y 1440px (1108px y 1268px). El <ul>
   sigue siendo un flex item que se encoge si el banner del menu esta
   cargado: por eso `min-width: 0`, sin el cual un flex item no puede
   achicarse por debajo de su contenido.

   POR QUE GRID Y NO `column-width`
   ---------------------------------
   Antes esto era multicolumna, y con los grupos colapsados se rompia: el
   <ul> es un flex item y sin declarar nada hereda `align-self: stretch`,
   lo que le da una ALTURA DEFINIDA. Un contenedor multicolumna con altura
   definida no crece hacia abajo: llena columnas hasta esa altura y manda
   el resto a columnas nuevas hacia la derecha, fuera del ancho del
   contenedor, donde no se ven. Con todo expandido el problema no aparecia
   porque la altura que fijaba el flex ya incluia todo el contenido.

   Grid no tiene esa clase de falla: un item de grilla es atomico y la
   grilla no puede generar pistas invisibles de desborde. De paso resuelve
   otras dos cosas. Una, el grupo no se parte nunca entre columnas -antes
   eso dependia de `break-inside: avoid`, que aca ya no hace falta y por
   eso se saco en vez de dejarlo colgando-. Dos, desaparece el rebalanceo:
   multicolumna usa `column-fill: balance` y al abrir un grupo reacomodaba
   las columnas enteras, con lo cual un grupo podia saltar de columna,
   irse de abajo del puntero, cerrarse y oscilar. En grid la celda no
   cambia de columna ni de fila al abrirse: el encabezado queda quieto y
   solo se empuja hacia abajo lo que sigue, que es el comportamiento
   buscado.

   El costo de grid es que las filas se alinean a la altura de la celda
   mas alta, asi que un grupo abierto deja blanco al lado de los cerrados
   de su misma fila. `align-items: start` evita que las celdas se estiren,
   y `align-content: start` que las filas se separen para llenar un alto
   sobrante.

   APERTURA
   --------
   Mismo mecanismo que se uso para el colapso original: `display: none` /
   `display: block`, con los tres caminos en reglas SEPARADAS -`.active`
   que pone el JS, `:hover` como respaldo si el JS async no corrio, y
   `:focus-within` para teclado-. Separadas a proposito: un
   pseudo-selector no soportado invalida la regla entera, y asi cada
   camino falla solo en vez de llevarse puestos a los otros.

   El area sensible es el <li> completo. El <ul> de nivel 2 es hijo en
   flujo normal del <li>, con lo cual al abrirse el <li> crece y lo
   contiene: bajar del encabezado a los hijos no pierde el hover. El
   `margin-bottom` del encabezado queda entre dos hermanos DENTRO del
   <li>, asi que tampoco hay hueco ahi. No hace falta ningun puente.

   No hay logica de exclusividad: si el mouse pasa por varios grupos, cada
   uno abre y cierra por su cuenta.

   ALTURA
   ------
   No se toca nada. El `max-height` inline que fija store.js.tpl:288-312 y
   el `overflow-y: auto` de style-critical.scss:2906 y :2916 quedan como
   estan: si al abrir un grupo el contenido pasa el alto del panel,
   scrollea con el mecanismo nativo del tema. No se recorta nada, porque
   `overflow-y: auto` es scroll, no clip. Y como en reposo el panel es
   mucho mas bajo que antes (solo encabezados), hay bastante mas margen
   de crecimiento que en cualquier version anterior.

   PALETA
   ------
   Sin colores nuevos: `--main-foreground-opacity-05/10/40` para fondos y
   bordes, `--main-foreground` para el anillo de foco. Todos de
   style-tokens.tpl. */

@media (min-width: 768px) {

	/* 1) El panel como grilla que se acomoda sola. `auto-fill` y no
	   `auto-fit`: con pocas categorias, `auto-fit` colapsa las pistas
	   vacias y estira los grupos a lo ancho de todo el panel; `auto-fill`
	   las conserva y los grupos mantienen su ancho.

	   El `column-count: 5` que el tema pone en esta misma clase
	   (style-async.scss:1409) queda inerte solo: un contenedor de grilla
	   no es un contenedor multicolumna, asi que esas propiedades no se
	   aplican. `align-self: flex-start` es lo que impide que el flex lo
	   estire, que fue la causa del bug de las filas que no se veian. */

	.desktop-list-subitems {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: var(--spacing-4);
		align-items: start;
		align-content: start;
		align-self: flex-start;
		width: 100%;
		min-width: 0;
		padding: 0;
		text-align: left;
	}

	/* 2) El grupo (encabezado + hijos) es una celda de la grilla, o sea
	   atomico por construccion: no se parte entre columnas ni colapsado ni
	   abierto, sin necesidad de `break-inside`. La separacion entre grupos
	   la da el `gap` del contenedor, asi que aca el margen va en cero. */

	.desktop-list-subitems > .nav-item {
		display: block;
		margin: 0;
		padding: 0;
	}

	/* 3) Nivel 1 = encabezado del grupo. Sigue siendo un link a su
	   categoria. Las dos formas de markup: link directo del <li> en el
	   arbol de categorias, y envuelto en `.nav-item-container` en el
	   mega-menu del admin. */

	.desktop-list-subitems > .nav-item > .nav-list-link,
	.desktop-list-subitems > .nav-item > .nav-item-container > .nav-list-link {
		display: block;
		margin: 0 0 var(--spacing-2);
		padding: var(--spacing-1) var(--spacing-2);
		font-size: var(--font-medium);
		font-weight: 700;
		line-height: 1.3;
		border-bottom: var(--border-solid) var(--main-foreground-opacity-10);
		transition: background-color .15s ease, border-color .15s ease;
	}

	/* Con el setting `desktop_main_nav_uppercase` activo, el tema aplica
	   `.nav-desktop-uppercase .desktop-list-subitems .nav-item
	   .nav-list-link { font-size: var(--font-small) }`
	   (style-async.scss:1428), que con sus 4 clases le gana a la regla de
	   arriba (3 clases) y aplastaria la diferencia de tamano entre padre e
	   hijo. No se puede saber desde el repo si el setting esta prendido
	   -vive en el admin-, asi que se cubre el caso. */

	.nav-desktop-uppercase .desktop-list-subitems > .nav-item > .nav-list-link,
	.nav-desktop-uppercase .desktop-list-subitems > .nav-item > .nav-item-container > .nav-list-link {
		font-size: var(--font-medium);
	}

	/* 4) Nivel 2 colapsado por defecto. */

	.desktop-list-subitems > .nav-item > .list-subitems {
		display: none;
		margin: 0;
		padding: 0;
	}

	/* 4a/4b/4c) Los tres caminos de apertura, en reglas separadas. */

	.desktop-list-subitems > .nav-item.active > .list-subitems {
		display: block;
	}

	.desktop-list-subitems > .nav-item:hover > .list-subitems {
		display: block;
	}

	.desktop-list-subitems > .nav-item:focus-within > .list-subitems {
		display: block;
	}

	/* 5) Filas de nivel 2. En el mega-menu del admin un item de nivel 2
	   lleva `.nav-item-container` solo si tiene hijos propios; si es hoja,
	   el link cuelga directo del <li>. Por eso las dos formas tambien
	   aca. */

	.desktop-list-subitems > .nav-item > .list-subitems > .nav-item {
		display: block;
		margin: 0;
		padding: 0;
	}

	.desktop-list-subitems > .nav-item > .list-subitems > .nav-item > .nav-list-link,
	.desktop-list-subitems > .nav-item > .list-subitems > .nav-item > .nav-item-container > .nav-list-link {
		display: block;
		margin: 0;
		padding: var(--spacing-1) var(--spacing-2);
		font-size: var(--font-small);
		font-weight: 400;
		line-height: 1.4;
		text-transform: initial;
		border-radius: var(--border-radius-small);
		transition: background-color .15s ease;
	}

	/* 6) Nivel 3 y mas abajo, oculto: se baja desde la pagina de
	   categoria. El selector se ancla con `>` desde la raiz a proposito.
	   Un `.list-subitems .list-subitems` a secas no serviria: el <ul>
	   raiz lleva las dos clases (`desktop-list-subitems list-subitems`),
	   con lo cual tomaria tambien al nivel 2. */

	.desktop-list-subitems > .nav-item > .list-subitems .list-subitems {
		display: none;
	}

	/* 7) Flecha indicadora, solo en grupos que tienen hijos. Hace falta
	   `:has()` porque en el arbol de categorias
	   (navigation-categories-list-desktop.tpl:2) TODOS los <li> reciben
	   las mismas clases tengan o no subcategorias: no hay ninguna marca en
	   el markup que los distinga. */

	.desktop-list-subitems > .nav-item:has(> .list-subitems) > .nav-list-link::after,
	.desktop-list-subitems > .nav-item:has(> .list-subitems) > .nav-item-container > .nav-list-link::after {
		content: "";
		display: inline-block;
		width: .38em;
		height: .38em;
		margin-left: .45em;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: translateY(-.12em) rotate(45deg);
		opacity: .55;
		transition: transform .18s ease;
	}

	/* Respaldo para navegadores sin `:has()`: en el mega-menu del admin el
	   markup SI marca los items con hijos (`.item-with-subitems` en
	   navigation-list-megamenu.tpl:17). Va en su propia regla y no en la
	   lista de arriba a proposito: un `:has()` desconocido invalida la
	   regla entera, y esta tiene que sobrevivir. El arbol de categorias se
	   queda sin flecha en esos navegadores, que es una degradacion
	   aceptable: la apertura no depende de `:has()`. */

	.desktop-list-subitems > .nav-item.item-with-subitems > .nav-item-container > .nav-list-link::after {
		content: "";
		display: inline-block;
		width: .38em;
		height: .38em;
		margin-left: .45em;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: translateY(-.12em) rotate(45deg);
		opacity: .55;
		transition: transform .18s ease;
	}

	/* 7a/7b/7c) Flecha dada vuelta con el grupo abierto, un camino por
	   regla igual que la apertura. No hace falta `:has()`: si el grupo no
	   tiene hijos no hay ::after y la regla no hace nada. */

	.desktop-list-subitems > .nav-item.active > .nav-list-link::after,
	.desktop-list-subitems > .nav-item.active > .nav-item-container > .nav-list-link::after {
		transform: translateY(.12em) rotate(-135deg);
		opacity: .9;
	}

	.desktop-list-subitems > .nav-item:hover > .nav-list-link::after,
	.desktop-list-subitems > .nav-item:hover > .nav-item-container > .nav-list-link::after {
		transform: translateY(.12em) rotate(-135deg);
		opacity: .9;
	}

	.desktop-list-subitems > .nav-item:focus-within > .nav-list-link::after,
	.desktop-list-subitems > .nav-item:focus-within > .nav-item-container > .nav-list-link::after {
		transform: translateY(.12em) rotate(-135deg);
		opacity: .9;
	}

	/* 8) Resaltados. El encabezado tiene estado propio, distinto del de
	   los hijos, para que no se confundan al pasar el mouse. */

	.desktop-list-subitems > .nav-item > .nav-list-link:hover,
	.desktop-list-subitems > .nav-item > .nav-item-container > .nav-list-link:hover {
		background-color: var(--main-foreground-opacity-05);
		border-bottom-color: var(--main-foreground-opacity-40);
	}

	.desktop-list-subitems > .nav-item > .list-subitems > .nav-item > .nav-list-link:hover,
	.desktop-list-subitems > .nav-item > .list-subitems > .nav-item > .nav-item-container > .nav-list-link:hover {
		background-color: var(--main-foreground-opacity-10);
	}

	.desktop-list-subitems > .nav-item > .list-subitems > .nav-item > .nav-list-link:focus,
	.desktop-list-subitems > .nav-item > .list-subitems > .nav-item > .nav-item-container > .nav-list-link:focus {
		background-color: var(--main-foreground-opacity-10);
	}

	/* Anillo de foco para todo el panel, encabezados incluidos. Va en su
	   propia regla porque un `:focus-visible` no soportado invalidaria la
	   regla entera y se llevaria puestos los fondos de arriba. */

	.desktop-list-subitems .nav-list-link:focus-visible {
		outline: 2px solid var(--main-foreground);
		outline-offset: -2px;
	}

	/* Accesibilidad: mismo criterio que el resto del archivo. */

	@media (prefers-reduced-motion: reduce) {
		.desktop-list-subitems > .nav-item > .nav-list-link,
		.desktop-list-subitems > .nav-item > .nav-item-container > .nav-list-link,
		.desktop-list-subitems > .nav-item > .list-subitems > .nav-item > .nav-list-link,
		.desktop-list-subitems > .nav-item > .list-subitems > .nav-item > .nav-item-container > .nav-list-link {
			transition: none;
		}

		.desktop-list-subitems > .nav-item:has(> .list-subitems) > .nav-list-link::after,
		.desktop-list-subitems > .nav-item:has(> .list-subitems) > .nav-item-container > .nav-list-link::after,
		.desktop-list-subitems > .nav-item.item-with-subitems > .nav-item-container > .nav-list-link::after {
			transition: none;
		}
	}
}