/**
 * Innova Shop - el carrito lateral del navbar.
 *
 * Esto se ve en la tienda de ANCERS, así que acá no va branding nuestro: los
 * tamaños y los colores salen del Figma del cliente (frame 1440).
 *
 * No se declara font-family en ningún lado: la tipografía es la del sitio
 * (Sailec) y se hereda. Declararla acá crearía una segunda definición que se
 * desincroniza el día que el sitio cambie de fuente.
 */

/* ---------------------------------------------- El ícono en el navbar --- */

.is-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
}

/* El ícono se ve siempre, también con el carrito vacío. Lo que no se dibuja es
   el globito: un "0" colgado del ícono se lee como un error, y el ícono solo ya
   dice todo lo que hay que decir. */
.is-cart[data-items="0"] .is-cart__badge {
	display: none;
}

.is-cart__toggle {
	position: relative;
	display: block;
	padding: 0;
	border: 0;
	background: none;
	color: #231f20;
	line-height: 0;
	cursor: pointer;
}

.is-cart__icono {
	display: block;
	width: 20px;
	height: 19px;
}

/* El globito se apoya sobre el vértice inferior derecho del ícono, como en el
   Figma: 12px de lado, arrancando en 12,12 sobre un ícono de 20x19. */
.is-cart__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 12px;
	height: 12px;
	border-radius: 7px;
	background: #231f20;
	color: #fff;
	font-size: 8px;
	line-height: 5px;
	text-transform: uppercase;
}

/* ------------------------------------------------------- El panel --- */

/* El panel se despliega de arriba hacia abajo animando max-height, igual que
   los desplegables del resto del sitio.

   Por qué max-height y no display: display no se puede animar, así que el panel
   pasa a esconderse con visibility. Y por qué no una altura fija: la caja crece
   con la cantidad de productos, y una altura fija habría que recalcularla desde
   JavaScript en cada cambio del carrito.

   La duración vive acá, una sola vez, y de acá la leen las tres transiciones. */
.is-cart-panel {
	--is-cart-despliegue: 0.6s;
	position: fixed;
	inset: 0;
	z-index: 9999;
	visibility: hidden;
	/* Cerrado no puede tragarse los clicks: el panel ocupa toda la pantalla, y
	   la visibilidad todavía tarda en apagarse mientras se pliega. */
	pointer-events: none;
	/* El retraso es solo para esconderlo. Al cerrar, la visibilidad espera a que
	   termine el plegado, o el panel desaparecería de golpe antes de plegarse. */
	transition: visibility 0s linear var(--is-cart-despliegue);
}

.is-cart-panel.is-abierto {
	visibility: visible;
	pointer-events: auto;
	/* Al abrir, en cambio, se ve en el acto: lo que se anima es el desplegado. */
	transition-delay: 0s;
}

/* De 992px para arriba el panel arranca donde termina el navbar, y ese borde no
   es un número fijo: la barra de Ancers mide 100px en reposo y se achica a 80px
   al hacer scroll, con una transición de 0,3s.

   Por eso el valor no está escrito acá sino en --is-cart-top, que carrito.js
   mide de la barra real y reescribe en cada cuadro de ese achique. Un 100px a
   mano dejaba al panel clavado en el alto de reposo: al achicarse la barra
   quedaba una franja de página asomando arriba, y sin velo que la tapara.

   El alto no hace falta declararlo: el inset: 0 de arriba ya deja bottom en 0,
   así que mover el top ya estira o encoge el panel por su cuenta.

   El 0px de reserva es para una página sin navbar que seguir, donde el panel
   ocupa la pantalla entera. Es el mismo caso que abajo de 992px, donde la barra
   pasa a su versión compacta y el panel la tapa entera, como siempre. */
@media (min-width: 992px) {
	.is-cart-panel {
		top: var( --is-cart-top, 0px );
	}
}

.is-cart-panel__velo {
	position: absolute;
	inset: 0;
	background: rgba(238, 238, 238, 0.75);
	opacity: 0;
	/* El velo acompaña al desplegado. Apareciendo de golpe contra una caja que
	   tarda 600ms en bajar, el fondo se oscurece antes de que haya panel. */
	transition: opacity var(--is-cart-despliegue) ease-out;
}

.is-cart-panel.is-abierto .is-cart-panel__velo {
	opacity: 1;
}

.is-cart-panel__caja {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 658.5px;
	max-width: 100%;
	max-height: 0;
	padding: 27px;
	overflow: hidden;
	background: #eee;
	transition: max-height var(--is-cart-despliegue) ease-out;
}

.is-cart-panel.is-abierto .is-cart-panel__caja {
	max-height: 100vh;
}

/* Mientras se despliega, el contenido se recorta. Con el scroll activo durante
   esos 600ms aparece una barra que cambia de tamaño en cada cuadro. Ya abierta y
   quieta, la caja recupera su scroll, que es la red para una pantalla baja donde
   el contenido no entra. */
.is-cart-panel.is-abierto:not(.is-animando) .is-cart-panel__caja {
	overflow-y: auto;
}

/* Cada respuesta del servidor reemplaza el panel entero, así que sin esto un
   toque de flecha reproduciría los 600ms de apertura de nuevo. Lo pone el
   JavaScript para reabrir después de un reemplazo, y lo saca en el cuadro
   siguiente para que el próximo cierre sí se anime. */
.is-cart-panel.is-sin-animacion,
.is-cart-panel.is-sin-animacion .is-cart-panel__velo,
.is-cart-panel.is-sin-animacion .is-cart-panel__caja {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.is-cart-panel,
	.is-cart-panel__velo,
	.is-cart-panel__caja {
		transition: none;
	}

	/* Sin transición no llega el evento que saca is-animando, así que la caja se
	   quedaría recortada esperándolo. */
	.is-cart-panel.is-abierto .is-cart-panel__caja {
		overflow-y: auto;
	}
}

.is-cart-panel__cerrar {
	position: absolute;
	top: 27px;
	right: 27px;
	padding: 0;
	border: 0;
	background: none;
	color: #666;
	font-size: 14px;
	line-height: 10px;
	cursor: pointer;
}

/* ----------------------------------------------------- La lista --- */

/* El alto fijo viene del Figma. Con un solo ítem queda un hueco abajo; con
   muchos aparece el scroll interno. Está anotado como riesgo 4 del spec. */
.is-cart-panel__lista {
	height: 450px;
	overflow-y: auto;
}

.is-cart-panel__encabezado,
.is-cart-fila {
	display: grid;
	grid-template-columns: auto 100px 0.75fr 0.35fr 0.27fr 0.27fr;
	column-gap: 15px;
	align-items: center;
	border-bottom: 0.5px solid #454343;
}

.is-cart-panel__encabezado {
	height: 30px;
}

/* El rótulo no se le aplica al hueco de la primera columna: ese conserva la
   geometría del botón de quitar, que es justamente de donde copia el ancho. */
.is-cart-panel__encabezado > span:not(.is-cart-fila__quitar) {
	font-size: 11px;
	line-height: 10px;
	color: #666;
}

.is-cart-fila {
	padding: 15px 0;
}

.is-cart-fila__quitar {
	padding: 0 0 0 15px;
	border: 0;
	background: none;
	color: #666;
	font-size: 14px;
	line-height: 10px;
	cursor: pointer;
}

/* El hueco del encabezado, que alinea "producto" con los nombres de los
   productos. Ocupa el lugar del botón de quitar sin verse.

   visibility: hidden y no display: none, porque lo único que se le pide es
   ocupar espacio. Con display: none la columna volvería a medir cero y el
   encabezado se correría de nuevo, que es el problema que esto resuelve. */
.is-cart-fila__quitar--hueco {
	visibility: hidden;
	cursor: default;
}

.is-cart-fila__foto {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
	align-self: start;
	overflow: hidden;
}

.is-cart-fila__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.is-cart-fila__nombre,
.is-cart-fila__precio,
.is-cart-fila__total {
	font-size: 12px;
	color: #666;
}

/* Estas dos celdas van SIEMPRE en minúscula. La regla vieja las ponía en
   mayúsculas, y mientras solo tenían un importe formateado no se notaba: un
   precio no tiene letras. Desde que el precio lleva su unidad al lado ("por
   set", "por caja") la regla se volvía visible y gritaba. Va "none" y no se
   borra la declaración, porque text-transform se hereda: sin ella, una regla
   de un ancestro del tema volvería a subirlas sin que nada en este archivo lo
   explique. */
.is-cart-fila__precio,
.is-cart-fila__total {
	text-transform: none;
}

/* La foto y el nombre llevan a la ficha, con el color que esta en el carrito
   ya elegido. El enlace no se pinta ni se subraya: la fila entera ya se lee
   como una unidad, y dos enlaces marcados al lado del otro la ensucian. El
   subrayado aparece al pasar por encima, que es donde hace falta la senal. */
.is-cart-fila__enlace {
	color: inherit;
	text-decoration: none;
}

.is-cart-fila__nombre .is-cart-fila__enlace:hover,
.is-cart-fila__nombre .is-cart-fila__enlace:focus-visible {
	text-decoration: underline;
}

/* La foto es un enlace, así que necesita ocupar su caja entera o el area
   clickeable queda del tamano del <img> y no del hueco de la foto. */
.is-cart-fila__foto .is-cart-fila__enlace {
	display: block;
}

/* La caja de cada fila del panel. Va debajo del nombre, no al lado del
   precio: al lado del precio compite con el número que importa. */
.is-cart-panel__lote {
	font-size: 12px;
	color: #666;
	margin-top: 2px;
}

/* "(6 unidades)" es el dato de apoyo de "1 caja", igual que en la ficha. */
.is-cart-panel__lote .is-lote__unidades {
	font-size: 10px;
}

/* Y del mismo tamaño que el renglón cuando está solo, que es el Set comprado
   de a set: ahí "2 sets" es la cantidad, no un dato de apoyo. */
.is-cart-panel__lote .is-lote__unidades:only-child {
	font-size: inherit;
}

/* WooCommerce mete su propio marcado adentro del precio. Se lo neutraliza para
   que no arrastre márgenes ni tamaños del tema. */
.is-cart-fila__precio .amount,
.is-cart-fila__total .amount,
.is-cart-panel__monto .amount {
	margin: 0;
	font-size: inherit;
	color: inherit;
}

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

.is-cart-fila__cantidad {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	justify-self: start;
	gap: 10px;
	padding: 10px;
	border: 0.5px solid #666;
}

.is-cart-fila__numero {
	font-size: 12px;
	line-height: 1;
	color: #666;
	text-transform: uppercase;
}

.is-cart-fila__flechas {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	width: 10px;
	height: 22px;
}

.is-cart-fila__flecha {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/* Las flechas se dibujan con bordes de CSS y no con un glifo de tipografía.
   Es la misma decisión que se tomó en 1.9.1 para las flechas de la galería, y
   por el mismo motivo: un glifo cambia de forma según lo que cargue el tema. */
.is-cart-fila__chevron {
	display: block;
	width: 6px;
	height: 6px;
	border-top: 1px solid #666;
	border-right: 1px solid #666;
}

.is-cart-fila__flecha--mas .is-cart-fila__chevron {
	transform: rotate(-45deg) translate(-1px, 1px);
}

.is-cart-fila__flecha--menos .is-cart-fila__chevron {
	transform: rotate(135deg) translate(-1px, 1px);
}

/* ------------------------------ Mientras el servidor todavía no contestó --- */

.is-cart-fila.is-ocupada {
	opacity: 0.55;
}

.is-cart-fila.is-ocupada .is-cart-fila__flecha,
.is-cart-fila.is-ocupada .is-cart-fila__quitar {
	pointer-events: none;
}

/* El aviso lo inserta el JavaScript, no el servidor: es transitorio. Cae en una
   segunda fila del grid, alineado con el nombre. */
.is-cart-fila__aviso {
	grid-column: 3 / -1;
	margin: 6px 0 0;
	font-size: 10px;
	line-height: 10px;
	color: #231f20;
}

.is-cart-panel__error {
	margin: 0;
	font-size: 10px;
	line-height: 12px;
	color: #231f20;
}

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

/* Ocupa el lugar de la lista y del pie a la vez, así que no hereda el alto de
   ninguno de los dos: sin este mínimo, el panel abierto es una franja de 80px
   que se lee como un panel a medio desplegar. */
.is-cart-panel__vacio {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	min-height: 220px;
	text-align: center;
}

.is-cart-panel__vacio-texto {
	margin: 0;
	font-size: 11px;
	line-height: 16px;
	color: #666;
}

/* El botón del pie se estira para repartir el ancho con su hermano. Acá está
   solo y en una columna, así que ese mismo flex: 1 0 0 le estiraría el ALTO de
   punta a punta. Por eso se le fija el ancho y se le apaga el crecimiento. */
.is-cart-panel__vacio .is-cart-panel__boton {
	flex: 0 0 auto;
	width: 240px;
}

/* --------------------------------------------------------- El pie --- */

.is-cart-panel__pie {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.is-cart-panel__subtotal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 11px;
	line-height: 10px;
	color: #000;
}

.is-cart-panel__iva {
	margin: -10px 0 0;
	font-size: 10px;
	line-height: 10px;
	color: #666;
}

.is-cart-panel__botones {
	display: flex;
	align-items: center;
	gap: 32px;
}

.is-cart-panel__boton {
	display: flex;
	flex: 1 0 0;
	min-width: 0;
	align-items: center;
	justify-content: center;
	padding: 8px 25px;
	border: 1px solid #666;
	background: transparent;
	color: #666;
	font-size: 11px;
	line-height: 10px;
	text-decoration: none;
}

.is-cart-panel__boton--primario {
	border-color: #231f20;
	background: #231f20;
	color: #fff;
}

.is-cart-panel__boton:hover,
.is-cart-panel__boton:focus-visible {
	text-decoration: none;
}

.is-cart__toggle:focus-visible,
.is-cart-panel__cerrar:focus-visible,
.is-cart-fila__quitar:focus-visible,
.is-cart-fila__flecha:focus-visible,
.is-cart-panel__boton:focus-visible {
	outline: 2px solid #231f20;
	outline-offset: 2px;
}

/* El error de "no se pudo agregar", arriba del bloque de compra de la ficha. */
.is-cart-error {
	margin: 0 0 10px;
	font-size: 11px;
	line-height: 14px;
	color: #231f20;
}

/* ====================================================== Mobile ========= */

/* ⚠️ Algunas reglas de acá abajo llevan tres clases
   (.is-cart-panel .is-cart-panel__caja .is-cart-fila...) y no una.
   No es un capricho: en el sitio hay un Code Block de Oxygen con este CSS,
   escrito cuando la fila de mobile todavía era la de escritorio:

     @media (max-width: 768px) {
       .is-cart-panel .is-cart-fila { grid-template-areas: ... }
       .is-cart-panel .is-cart-fila__cantidad { height: auto; }
       .is-cart-panel .is-cart-fila__precio { display: none; }
       .is-cart-panel .is-cart-panel__lote { margin-top: unset; }
       .is-cart-panel .is-cart-panel__lista { overflow: hidden; }
       .is-cart-panel .is-cart-fila__total::before { content: "total: "; }
     }

   Oxygen encola su hoja DESPUÉS de esta, así que con igual especificidad gana
   él: la fila quedaba armada con las áreas viejas y sin precio. Estas reglas
   le ganan por especificidad. Lo correcto es borrar ese bloque del builder;
   mientras siga ahí, esto es lo que sostiene el diseño. */

/* La equis del carrito, igual a la del menú hamburguesa.
 *
 * Abajo de 991px la cabecera muestra el hamburguesa, y ese botón se convierte
 * en una equis cuando el menú se abre: dos barras de 2px en un cuadrado de
 * 26px, color #616161, girando en un cuarto de segundo. El carrito cerraba con
 * una "x" de texto de 14px en otro lugar, así que la misma pantalla mostraba
 * dos formas distintas de cerrar. Esto las iguala: mismo dibujo, mismo giro y
 * mismas coordenadas que el hamburguesa (pedido de Leandro, 28/09/2026).
 *
 * El 991px no es el 768px del resto de este archivo a propósito: el que manda
 * acá es el ancho en el que la cabecera cambia a hamburguesa, no el ancho en
 * el que el panel pasa a pantalla completa.
 *
 * La letra "x" del botón sigue en el HTML y se esconde con font-size: 0. El
 * nombre accesible del botón no depende de ella: lo da su aria-label.
 */
@media screen and (max-width: 991px) {

	.is-cart-panel__cerrar {
		/* Las coordenadas salen del botón del hamburguesa, medido en vivo por
		   carrito.js (publicarCierre): vive en la barra, y la barra se achica
		   al scrollear, así que un número escrito a mano acertaría en un solo
		   estado. Los valores de respaldo son los del diseño, para cuando la
		   cabecera no tenga ese botón. */
		top: var( --is-cart-cierre-top, 40px );
		right: var( --is-cart-cierre-derecha, 24px );
		width: var( --is-cart-cierre-lado, 26px );
		height: var( --is-cart-cierre-lado, 26px );
		font-size: 0;

		/* Este es el estado CERRADO, y es el que gobierna la vuelta: la equis
		   gira de nuevo a la cruz y, mientras gira, se desvanece. Sin eso, el
		   último cuadro del cierre es una cruz perfecta y se lee como un "más"
		   (28/09/2026). El hamburguesa no lleva esto: allá la cruz vuelve a ser
		   el menú, que es lo que tiene que quedar a la vista. */
		opacity: 0;
		transition-property: transform, opacity;

		/* El giro dura lo mismo que el del hamburguesa, pero la opacidad se va
		   en menos de la mitad: si las dos duraran igual, la equis todavía se
		   ve cuando ya volvió a ser una cruz. */
		transition-duration: 0.25s, 0.1s;
	}

	/* Las dos barras, cruzadas en ángulo recto: una cruz. La equis sale de
	   girar el botón entero 45 grados, igual que el hamburguesa, que gira su
	   span y deja las barras en 0 y en 90. */
	.is-cart-panel__cerrar::before,
	.is-cart-panel__cerrar::after {
		content: "";
		position: absolute;
		top: calc( 50% - 1px );
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #616161;
	}

	.is-cart-panel__cerrar::after {
		transform: rotate( 90deg );
	}

	/* El giro: un solo rotate de 45 grados sobre el botón, en el mismo cuarto
	   de segundo que usa el hamburguesa. */
	.is-cart-panel.is-abierto .is-cart-panel__cerrar {
		transform: rotate( 45deg );

		/* Al abrir aparece de una y solo se ve el giro, que es como estaba: el
		   cero de la segunda duración es el de la opacidad. */
		opacity: 1;
		transition-duration: 0.25s, 0s;
	}
}

@media screen and (max-width: 768px) {

	/* A pantalla completa: en 375px un panel al costado deja una franja de
	   velo inútil de 20px.

	   El max-height NO se suelta acá: es lo que se anima, y con `none` el panel
	   aparecería de golpe en mobile. El height: 100% queda recortado por el
	   max-height mientras se despliega, que es justo lo que se busca. */
	.is-cart-panel__caja {
		width: 100%;
		height: 100%;

		/* El primer producto arranca por debajo de la equis de cerrar, que en
		   el teléfono vive donde el menú hamburguesa. Antes la equis caía
		   encima del primer renglón (28/09/2026). Se calcula con las mismas
		   variables que ubican la equis, así que sigue valiendo si la barra se
		   achica al scrollear. */
		padding-top: calc( var( --is-cart-cierre-top, 40px ) + var( --is-cart-cierre-lado, 26px ) + 14px );
	}

	/* Sin columnas no hay nada que rotular. */
	.is-cart-panel__encabezado {
		display: none;
	}

	/* El alto fijo de 450px es del Figma de desktop. Acá la lista se estira y
	   el pie queda siempre a la vista. */
	.is-cart-panel .is-cart-panel__caja .is-cart-panel__lista {
		flex: 1 1 auto;
		height: auto;
		min-height: 0;
		/* Con overflow oculto, los productos que no entran no se pueden
		   alcanzar. Ver la nota de arriba sobre el bloque de Oxygen. */
		overflow-y: auto;
	}

	/* Igual que la lista: el aviso queda centrado en la pantalla y no pegado
	   arriba, que es donde lo dejaría el min-height de desktop. */
	.is-cart-panel__vacio {
		flex: 1 1 auto;
	}

	/* La lista compacta (mockup C, elegido por Leandro el 28/09/2026).
	 *
	 * Hasta la 1.46.3 la fila usaba en el teléfono la misma grilla que el
	 * escritorio: foto de 100px, contador vertical de 62px de alto y la "x" de
	 * quitar suelta abajo a la derecha, lejos del producto que quita. Entraba
	 * un producto y medio por pantalla.
	 *
	 * Ahora la foto es de 56px, el texto va en tres renglones cortos pegados y
	 * la columna de la derecha junta el contador y el total. Entran tres
	 * productos sin deslizar.
	 */
	.is-cart-panel .is-cart-panel__caja .is-cart-fila {
		grid-template-columns: 56px minmax(0, 1fr) auto;
		grid-template-areas:
			"foto nombre  quitar"
			"foto caja    cantidad"
			"foto precio  total"
			"foto aviso   aviso";
		column-gap: 10px;
		row-gap: 4px;
		align-items: center;
		padding: 14px 0;
	}

	/* Una línea arriba del primer producto: sin ella se pega a la equis de
	   cerrar y parece parte de ella.
	
	   Van los dos selectores porque el primer hijo de la lista NO es una fila:
	   es el encabezado de columnas, que en el teléfono está escondido pero
	   sigue en el HTML. Con `:first-child` solo, la regla no pintaba nunca. */
	.is-cart-panel .is-cart-panel__caja .is-cart-fila:first-child,
	.is-cart-panel .is-cart-panel__caja .is-cart-panel__encabezado + .is-cart-fila {
		border-top: 0.5px solid #454343;
	}

	.is-cart-fila__foto {
		grid-area: foto;
		align-self: start;
		/* El 100x100 de escritorio se desbordaba sobre el texto: la columna es
		   de 56px y la foto seguía midiendo 100. */
		width: 56px;
		height: 56px;
	}

	.is-cart-fila__foto .is-cart-fila__enlace {
		width: 100%;
		height: 100%;
	}

	/* El nombre deja de ser una celda y se vuelve transparente para la grilla:
	   así su enlace y la caja que lleva adentro se ubican por su cuenta, y la
	   caja puede compartir renglón con el precio, como en el mockup. El
	   marcado no cambia. */
	.is-cart-fila__nombre {
		display: contents;
	}

	.is-cart-fila__nombre > .is-cart-fila__enlace {
		grid-area: nombre;
		align-self: end;
	}

	.is-cart-panel .is-cart-panel__caja .is-cart-panel__lote {
		grid-area: caja;
		margin: 0;
		align-self: start;
	}

	.is-cart-panel .is-cart-panel__caja .is-cart-fila__precio {
		display: block;
		grid-area: precio;
		font-size: 12px;
		justify-self: start;
	}

	.is-cart-panel .is-cart-panel__caja .is-cart-fila__cantidad {
		grid-area: cantidad;
		justify-self: end;
	}

	.is-cart-fila__total {
		grid-area: total;
		text-align: right;
		align-self: start;
	}

	.is-cart-fila__quitar {
		grid-area: quitar;
		justify-self: end;
		align-self: start;
		padding: 0;
	}

	.is-cart-fila__aviso {
		grid-area: aviso;
		margin: 0;
	}

	/* El alto lo fija el contador, no el contenido. */
	.is-cart-panel .is-cart-panel__caja .is-cart-fila__cantidad {
		height: 32px;
	}

	/* El contador, igual al de la ficha del producto: una caja de borde fino
	   con el menos a la izquierda y el más a la derecha (pedido de Leandro,
	   28/09/2026). Los chevrones de escritorio se esconden y en su lugar van
	   los dos signos.

	   El orden de los botones lo decide el CSS y no el HTML: el marcado se
	   queda como está para no tocar el JavaScript ni el foco, que los buscan
	   por clase. */
	.is-cart-fila__cantidad {
		gap: 0;
		padding: 0;
		height: 32px;
		border: 1px solid #ddd;
	}

	.is-cart-fila__flechas {
		display: contents;
	}

	.is-cart-fila__flecha {
		position: relative;
		width: 32px;
		height: 30px;
		font-size: 15px;
		line-height: 1;
		color: #231f20;
	}

	.is-cart-fila__flecha[disabled] {
		opacity: 0.3;
	}

	.is-cart-fila__flecha--menos {
		order: -1;
	}

	.is-cart-fila__chevron {
		display: none;
	}

	.is-cart-fila__flecha--menos::before {
		content: "\2212"; /* menos de verdad, no un guion */
	}

	.is-cart-fila__flecha--mas::before {
		content: "+";
	}

	.is-cart-fila__numero {
		min-width: 34px;
		text-align: center;
		align-self: stretch;
		display: grid;
		place-items: center;
	}

	.is-cart-fila__flecha::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 32px;
		height: 44px;
		transform: translate(-50%, -50%);
	}

	/* Quitar sube al renglón del nombre, al lado del producto que quita, y se
	   dibuja como un tacho: la "x" de la fila se confundía con la equis que
	   cierra el carrito, que está a centímetros y hace otra cosa.

	   El tacho es una imagen de fondo y no un cambio de marcado: así el
	   escritorio se queda con su "x" y el JavaScript sigue encontrando el
	   mismo botón. La letra se esconde con font-size, no con display, para que
	   el botón conserve su caja.

	   Sigue siendo un gesto aparte del contador: el "−" nunca saca el
	   producto (ver actualizarFlechaMenos en carrito.js). */
	.is-cart-fila__quitar {
		position: relative;
		width: 20px;
		height: 20px;
		font-size: 0;
		background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a6a6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 7V4h4v3M6 7l1 14h10l1-14'/%3E%3C/svg%3E" );
		background-repeat: no-repeat;
		background-position: center;
		background-size: 18px 18px;
	}

	.is-cart-fila__quitar::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 44px;
		height: 44px;
		transform: translate(-50%, -50%);
	}

	/* Dos botones de mitad y mitad quedan de 150px en un celular. Apilados
	   entran enteros y el primario queda abajo, que es donde cae el pulgar. */
	.is-cart-panel__botones {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	/* En columna, el flex: 1 0 0 de desktop repartiría el alto en vez del
	   ancho, que es para lo que existe. Se lo suelta: cada botón toma el alto
	   de su contenido. */
	.is-cart-panel__boton {
		flex: none;
		padding: 14px 25px;
	}
}


/* ============================================ La página /carro/ ========= */

/*
 * La misma fila que el panel, en la página del carrito (pedido de Leandro,
 * 28/09/2026).
 *
 * La página del carrito es la tabla de WooCommerce, no nuestro panel: en el
 * teléfono se desarma en una pila de celdas con sus rótulos ("Precio",
 * "Cantidad"), que no se parece en nada al panel. Acá esa tabla se vuelve la
 * misma grilla de la fila del panel: foto de 56px, nombre con el tacho a la
 * derecha, caja y contador, precio y total.
 *
 * Los selectores arrancan en `body.woocommerce-cart` a propósito. El sitio
 * tiene un Code Block de Oxygen con reglas de tres clases para esta misma
 * tabla (`.carrito-page-section .woocommerce .woocommerce-cart-form ...`), y
 * Oxygen encola su hoja después de esta: sin la clase de más, gana él. Lo
 * correcto es mudar ese bloque acá; mientras siga en el builder, esto es lo
 * que sostiene el diseño.
 *
 * Lo que NO se toca: el campo de cantidad sigue siendo el de WooCommerce (un
 * número con sus flechas, más el botón "Actualizar carrito"). El menos y el
 * más del panel son nuestros y hablan por AJAX; traerlos acá es cambiar cómo
 * funciona la página, no cómo se ve.
 */

@media screen and (max-width: 768px) {

	/* La columna del carrito y la de los totales, una debajo de la otra. En el
	   builder esto es una grilla de dos columnas que en el teléfono se
	   reacomoda sola; en flex el orden es el del HTML y no hay huecos de
	   grilla que rellenar. */
	body.woocommerce-cart .carrito-page-section .woocommerce {
		display: flex;
		flex-direction: column;
	}

	/* Los avisos de WooCommerce ("carrito actualizado", "producto eliminado")
	   no se le muestran al cliente, como en el resto de la tienda. */
	body.woocommerce-cart .carrito-page-section .woocommerce .woocommerce-notices-wrapper {
		display: none;
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table {
		padding: 0;
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table,
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tbody,
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tr,
	body.woocommerce-cart .woocommerce-cart-form table.shop_table td {
		display: block;
		width: auto;
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table thead {
		display: none;
	}

	/* Los rótulos que WooCommerce inventa para la tabla apilada ("Precio",
	   "Cantidad"): el panel no los tiene y acá tampoco hacen falta, porque
	   cada dato ya está donde se lo espera. */
	body.woocommerce-cart .woocommerce-cart-form table.shop_table td::before {
		display: none !important;
	}

	/* WooCommerce, cuando apila la tabla, alinea TODAS las celdas a la derecha
	   con !important, y esconde la foto. Las dos cosas se deshacen acá: la
	   fila es una grilla, no una pila, y la foto es media fila. */
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tr.cart_item td {
		text-align: left !important;
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table tr.cart_item td.product-subtotal {
		text-align: right !important;
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table tr.cart_item {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr) auto;
		grid-template-areas:
			"foto nombre  quitar"
			"foto caja    cantidad"
			"foto precio  total";
		column-gap: 10px;
		row-gap: 4px;
		align-items: center;
		padding: 14px 0;
		border-bottom: 1px solid #cfcfcf;
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table tr.cart_item:first-child {
		border-top: 0.5px solid #454343;
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-thumbnail {
		display: block !important;
		grid-area: foto;
		align-self: start;
		width: 56px;
		height: 56px;
		margin: 0 !important;
		padding: 0;
	}

	/* El min-width y el min-height son los que impedían achicar la foto: el
	   CSS del sitio se los pone a todas las imágenes de producto
	   (`.woocommerce-cart table.cart img { min-width: 64px; min-height: 64px;
	   border: 1px solid #d3ced2 }`), así que la imagen no bajaba de 64 y se
	   comía el hueco que la separa del texto. Lo encontró Leandro el
	   28/09/2026. El borde se va por lo mismo: el panel no lo tiene. */
	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-thumbnail img {
		width: 56px !important;
		max-width: 56px !important;
		min-width: 0 !important;
		height: 56px !important;
		max-height: 56px !important;
		min-height: 0 !important;
		border: 0 !important;
		object-fit: cover;
		margin: 0 !important;
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-thumbnail a {
		display: block;
		width: 56px;
		height: 56px;
	}

	/* La celda del nombre lleva adentro el nombre Y la caja. Se vuelve
	   transparente para la grilla y cada uno se ubica solo, igual que en el
	   panel. */
	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-name {
		display: contents;
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-name > a {
		grid-area: nombre;
		align-self: end;
		/* Los mismos 12px del panel: con 14 el renglón crecía y la caja de
		   abajo quedaba más separada que allá. */
		font-size: 12px;
		line-height: 16px;
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-name .is-cart-panel__lote {
		grid-area: caja;
		align-self: start;
		margin: 0;
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-price {
		grid-area: precio;
		justify-self: start;
		padding: 0;
		font-size: 12px;
		color: #666;
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-quantity {
		grid-area: cantidad;
		justify-self: end;
		padding: 0;
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-subtotal {
		grid-area: total;
		justify-self: end;
		padding: 0;
		font-size: 12px;
	}

	/* El panel dibuja los importes en 12px y peso liviano (viene del CSS del
	   sitio). Acá se repite para que los dos digan el precio igual. */
	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-price .woocommerce-Price-amount,
	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-subtotal .woocommerce-Price-amount {
		font-size: 12px;
		font-weight: 300;
	}

	/* El tacho, el mismo del panel, arriba a la derecha. */
	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-remove {
		grid-area: quitar;
		justify-self: end;
		align-self: start;
		padding: 0;
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-remove a.remove {
		display: block;
		width: 20px;
		height: 20px;
		font-size: 0 !important;
		background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a6a6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 7V4h4v3M6 7l1 14h10l1-14'/%3E%3C/svg%3E" );
		background-repeat: no-repeat;
		background-position: center;
		background-size: 18px 18px;
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-remove a.remove::after {
		content: none;
	}

	/* WooCommerce le pone fondo rojo a la "x" cuando el puntero pasa por
	   encima, y ese fondo, al ser un atajo, se lleva puesta la imagen del
	   tacho: el ícono desaparecía. Acá se repone. */
	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-remove a.remove:hover,
	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-remove a.remove:focus {
		background-color: transparent !important;
		background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a6a6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 7V4h4v3M6 7l1 14h10l1-14'/%3E%3C/svg%3E" ) !important;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 18px 18px;
	}

	/* El total, con el mismo rótulo que el panel. */
	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-subtotal::before {
		content: "total: ";
		display: inline !important;
		font-weight: 400;
		float: none;
		color: #666;
	}

	/* El contador, el mismo del panel: menos, número y más en una caja de
	   borde fino. Los botones los dibuja IS_Lote_Hooks alrededor del campo de
	   WooCommerce. */
	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-quantity .is-cart-qty {
		display: flex;
		align-items: center;
		height: 32px;
		border: 1px solid #ddd;
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-quantity .quantity {
		display: block;
		width: 38px;
		margin: 0;
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-quantity input.qty {
		width: 38px !important;
		min-width: 0 !important;
		max-width: 38px;
		height: 30px;
		padding: 0 !important;
		border: 0 !important;
		background: none !important;
		text-align: center;
		/* Los mismos 12px del número del panel. */
		font-size: 12px;
		/* Sin las flechas del campo nativo: para eso están el menos y el más. */
		appearance: textfield;
		-moz-appearance: textfield;
	}

	/* El mismo campo, con el selector del builder adelante.
	 *
	 * El Code Block de Oxygen le pone al campo `padding: 12px 10px 12px 0` y
	 * `min-width: 48px !important`, y con ese relleno a la derecha el número
	 * quedaba corrido dentro de la caja (28/09/2026). La regla de arriba ya
	 * debería ganarle, pero el bloque del builder existe en dos copias (la
	 * hoja universal y el <style> de la página) y no siempre pesan lo mismo.
	 * Esta repite las medidas que importan con el camino completo, así no
	 * depende de cuál de las dos copias llegue.
	 *
	 * Las tres medidas de abajo las probó Leandro contra el sitio real: el
	 * ancho lo suelta el campo (`unset`) con un tope de 47px, y el número se
	 * apoya a la derecha. Con ancho fijo y centrado seguía sin quedar donde
	 * tiene que quedar. */
	html body.woocommerce-cart .carrito-page-section .woocommerce .woocommerce-cart-form table.shop_table td.product-quantity input.qty {
		box-sizing: border-box;
		width: unset !important;
		min-width: 0 !important;
		max-width: 47px !important;
		padding: 0 !important;
		text-align: right !important;
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-quantity input.qty::-webkit-outer-spin-button,
	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-quantity input.qty::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-quantity .is-cart-qty__boton {
		width: 32px;
		height: 30px;
		padding: 0;
		border: 0;
		background: none;
		font-size: 15px;
		line-height: 1;
		color: #231f20;
		cursor: pointer;
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-quantity .is-cart-qty__boton[disabled] {
		opacity: 0.3;
	}

	/* El renglón del cupón y de "Actualizar carrito" deja de ser una celda más
	   de la pila y se separa del último producto. */
	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.actions {
		padding-top: 16px;
	}
}

/*
 * El recuadro de los totales, sin caja.
 *
 * Pedido de Leandro (28/09/2026): sin borde, sin relleno y sin el margen de
 * abajo. Los tres salen del Code Block de Oxygen, así que esto los apaga desde
 * acá con una clase más.
 */
body.woocommerce-cart .carrito-page-section .woocommerce .cart-collaterals {
	border: 0;
	padding: 0;
	margin-bottom: 0;
}