/**
 * 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;
}

/* El panel tapa la pantalla entera en todos los anchos, navbar incluido
   (1.49.0, 02/10/2026). Hasta la 1.48 arrancaba abajo de la barra: al agregar
   un producto se abría solo y un cliente no encontraba cómo volver a la
   tienda, porque el carrito parecía una parte más de la página. Ahora el velo
   cubre toda la pantalla, barra incluida, y la caja baja desde el techo con la
   equis grande donde estaba el ícono del carrito.

   El z-index le gana al del Code Block de Oxygen (.is-cart-panel.is-abierto,
   9999999) y al botón de WhatsApp, que usa ese mismo número y quedaba encima
   del botón "Finalizar la compra". Lleva html body para ganarle por
   especificidad y no con !important. */
html body .is-cart-panel.is-abierto {
	z-index: 2147483000;
}

.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;
}

/* La caja es la columna de la derecha y el velo queda a la vista al costado.
   El ancho de escritorio lo pone el Code Block de Oxygen (613px y 670px desde
   1150px, con !important); el de acá es el del Figma, para cuando ese bloque
   no esté. El alto es el de la pantalla entera, de techo a piso.

   El relleno de arriba deja el primer renglón debajo de la equis. Se calcula
   con las mismas variables que la ubican, así que acompaña a la barra cuando
   se achica al scrollear. */
.is-cart-panel__caja {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 658.5px;
	height: 100%;
	max-width: 100%;
	max-height: 0;
	padding: 27px;
	padding-top: calc( var( --is-cart-cierre-top, 40px ) + var( --is-cart-cierre-lado, 26px ) + 14px );
	overflow: hidden;
	background: #eee;
	transition: max-height var(--is-cart-despliegue) ease-out;
}

/* Desde 1150px la caja mide 708px y no los 670px del Code Block de Oxygen: con
   670px el arranque de la descripción de la ficha (título y texto) asomaba
   unos 50px a la izquierda de la caja, detrás del velo (pedido de Leandro,
   02/10/2026). Ese bloque pone su ancho con !important y carga después que
   esta hoja, así que acá va con html body para ganarle por especificidad. Si
   el bloque pasa a decir 708px, esta regla sobra. */
/* En escritorio el contenido arranca a la altura de la foto del producto en la
   ficha (pedido de Leandro, 07/10/2026). El número es el que Leandro midió
   contra el sitio real, 106px; el 135px que salió de medir la foto en un
   navegador sin sesión quedaba bajo. Abajo de 992px manda la cuenta de la
   equis, que vive donde el hamburguesa. */
@media (min-width: 992px) {
	.is-cart-panel__caja {
		padding-top: 106px;
	}
}

@media (min-width: 1150px) {
	html body .is-cart-panel .is-cart-panel__caja {
		width: 708px !important;
	}
}

.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;
	}
}

/* La equis del carrito, igual a la del menú hamburguesa, en todos los anchos.
 *
 * 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, así que la misma pantalla mostraba dos formas
 * distintas de cerrar (pedido de Leandro, 28/09/2026).
 *
 * Desde la 1.49.0 es la misma equis también en escritorio, donde antes seguía
 * la "x" de texto: era tan chica que un cliente no la encontró. En el teléfono
 * se para encima del hamburguesa; en escritorio, que no tiene hamburguesa,
 * encima del ícono del carrito, que es el botón que abrió la pantalla. Las
 * coordenadas las mide carrito.js (publicarCierre) del botón real, porque los
 * dos viven en la barra y la barra se achica al scrollear. Los valores de
 * respaldo son los del diseño, para cuando no haya qué medir.
 *
 * 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.
 */
.is-cart-panel__cerrar {
	position: absolute;
	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 );
	padding: 0;
	border: 0;
	background: none;
	font-size: 0;
	cursor: pointer;

	/* 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;
	transition: background-color 0.2s ease;
}

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

/* Al pasar el mouse la equis se oscurece al negro del sitio (pedido de
   Leandro, 07/10/2026): sin cambio, no se lee como algo que se puede tocar. */
.is-cart-panel__cerrar:hover::before,
.is-cart-panel__cerrar:hover::after,
.is-cart-panel__cerrar:focus-visible::before,
.is-cart-panel__cerrar:focus-visible::after {
	background-color: #231f20;
}

/* 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: el cero de la segunda
	   duración es el de la opacidad. */
	opacity: 1;
	transition-duration: 0.25s, 0s;
}

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

/* La lista se estira hasta el pie, que queda siempre abajo de todo, y con
   muchos productos aparece el scroll interno. Hasta la 1.48 medía 450px fijos,
   que era el alto del Figma para un panel que no llegaba al piso.

   Lleva tres clases por el Code Block de Oxygen (ver la nota de Mobile). */
.is-cart-panel .is-cart-panel__caja .is-cart-panel__lista {
	flex: 1 1 auto;
	height: auto;
	min-height: 0;
	overflow-y: auto;
	/* El área táctil del tacho (44px, más ancha que el ícono) se salía 12px
	   por la derecha y la lista mostraba una barra horizontal (14/10/2026). */
	overflow-x: hidden;
}

/* La fila, con el diseño de Mercado Libre, en todos los anchos (pedido de
 * Leandro, 07/10/2026).
 *
 *   foto | nombre            | tacho
 *   foto | Color: Amarillo   |
 *   foto | 17 cajas (102 u.) |
 *   foto | − 17 +            | total
 *
 * La foto ocupa el alto entero de la fila y es cuadrada; a la derecha, todo lo
 * demás. Hasta la 1.53 el escritorio era una tabla con columnas (quitar, foto,
 * producto, precio por caja, cantidad, total) y el teléfono una lista
 * compacta: ahora es una sola fila para los dos, y el precio por caja se fue.
 * Los elementos son los mismos de antes, salvo ese: cambió dónde va cada uno.
 *
 * El ancho de la foto vive en --is-cart-foto, que es lo único que cambia
 * entre el teléfono y el escritorio. Es el alto que mide el texto de la fila
 * con un nombre de un renglón, medido en un navegador (110px en escritorio,
 * 102px en el teléfono; en /carro/, 119px y 115px), así la foto queda cuadrada
 * y del alto entero de la fila.
 *
 * Tres clases en el selector por el Code Block de Oxygen (ver la nota de
 * Mobile): el bloque viejo le pone otras áreas a la fila abajo de 768px. */
.is-cart-panel .is-cart-panel__caja .is-cart-fila {
	--is-cart-foto: 110px;
	display: grid;
	grid-template-columns: var(--is-cart-foto) minmax(0, 1fr) auto;
	grid-template-rows: auto auto auto 1fr;
	grid-template-areas:
		"foto nombre   quitar"
		"foto color    ."
		"foto caja     ."
		"foto cantidad total"
		".    aviso    aviso";
	column-gap: 16px;
	row-gap: 4px;
	align-items: start;
	padding: 16px 0;
	border-bottom: 0.5px solid #454343;
}

/* Sin columnas no hay nada que rotular: la fila de títulos ("producto",
   "precio", "cantidad", "total") se esconde. Queda en el HTML, sin uso. */
.is-cart-panel__encabezado {
	display: none;
}

/* 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 es el encabezado escondido, no una fila. */
.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;
}

/* La foto ocupa el alto entero de la fila: se estira de arriba a abajo con
   la grilla (align-self: stretch), y la imagen llena su caja. El ancho es
   --is-cart-foto, medido para que con un nombre de un renglón la foto quede
   cuadrada; si el nombre ocupa dos renglones la fila crece y la foto la
   acompaña, recortando un poco los costados (pedido de Leandro, 07/10/2026:
   "que la imagen tome el 100% del container"). */
.is-cart-fila__foto {
	grid-area: foto;
	grid-row: 1 / 5;
	align-self: stretch;
	width: var(--is-cart-foto, 110px);
	min-height: var(--is-cart-foto, 110px);
	position: relative;
	overflow: hidden;
}

/* La imagen va posicionada sobre la caja y no adentro del flujo: si
   contara para el alto, una foto cuadrada empujaría la fila hacia abajo y
   la fila más alta estiraría la foto otra vez. Así el alto lo pone el texto
   y la foto lo llena. */
.is-cart-fila__foto .is-cart-fila__enlace {
	position: absolute;
	inset: 0;
	display: block;
}

/* El CSS del sitio le pone un mínimo de 64px y un borde a las imágenes de
   producto; acá la medida es la de la fila. */
.is-cart-fila__foto img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	border: 0 !important;
	object-fit: cover;
}

/* El nombre deja de ser una celda y se vuelve transparente para la grilla:
   el enlace, el color y la caja que lleva adentro se ubican cada uno en su
   renglón. El marcado no cambia. */
.is-cart-fila__nombre {
	display: contents;
}

/* Los textos conservan la letra que tenían antes de la 1.54.0: 12px y #666.
   Solo cambió dónde va cada uno. */
.is-cart-fila__nombre,
.is-cart-fila__total {
	font-size: 12px;
	color: #666;
}

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

/* El renglón nuevo del color, con la misma letra que el de la caja. */
.is-cart-fila__color {
	grid-area: color;
	font-size: 12px;
	color: #666;
}

.is-cart-panel .is-cart-panel__caja .is-cart-panel__lote {
	grid-area: caja;
	margin: 0;
	font-size: 12px;
	color: #666;
}

/* "(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;
}

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

.is-cart-fila__total {
	grid-area: total;
	align-self: end;
	justify-self: end;
	padding-bottom: 8px;
	text-align: right;
	text-transform: none;
	white-space: nowrap;
}

/* Sin la columna "total" de la tabla vieja, el número lleva su rótulo, el
   mismo que ya tenía en el teléfono. */
.is-cart-panel .is-cart-panel__caja .is-cart-fila__total::before {
	content: "total: ";
}

/* 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;
}

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

/* Quitar es un tacho arriba a la derecha, al lado del nombre del producto que
   quita: una "x" ahí se confundía con la equis que cierra el carrito.

   El tacho es una imagen de fondo y no un cambio de marcado: 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 {
	grid-area: quitar;
	justify-self: end;
	position: relative;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	font-size: 0;
	cursor: pointer;
	background-color: transparent;
	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;
}

/* El área tocable crece a 44px sin mover el dibujo. */
.is-cart-fila__quitar::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate( -50%, -50% );
}

/* El hueco del encabezado escondido, que copia la caja del botón de quitar. */
.is-cart-fila__quitar--hueco {
	visibility: hidden;
	cursor: default;
}

/* ---------------------------------------------------- El contador --- */

/* "− 17 +", el mismo de la ficha del producto, en todos los anchos: una caja
   de borde fino con el menos a la izquierda y el más a la derecha. Hasta la
   1.53 el escritorio tenía dos chevrones apilados al lado del número.

   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 {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0;
	border: 1px solid #ddd;
}

.is-cart-fila__numero {
	display: grid;
	place-items: center;
	align-self: stretch;
	min-width: 34px;
	font-size: 12px;
	line-height: 1;
	color: #666;
	text-align: center;
}

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

.is-cart-fila__flecha {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 30px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 15px;
	line-height: 1;
	color: #231f20;
	cursor: pointer;
}

.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: "+";
}

/* El área tocable crece a 44px de alto sin agrandar la caja. */
.is-cart-fila__flecha::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 44px;
	transform: translate( -50%, -50% );
}

/* ------------------------------ 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-area: aviso;
	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 se estira como la
   lista: el aviso queda centrado en la pantalla y no pegado arriba. */
.is-cart-panel__vacio {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	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 este archivo 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. 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. */

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

	/* A pantalla completa: en 375px un panel al costado deja una franja de
	   velo inútil de 20px. */
	.is-cart-panel__caja {
		width: 100%;
	}

	/* En el teléfono la foto es más chica y el aire entre columnas también:
	   en 360px el nombre necesita el ancho. */
	.is-cart-panel .is-cart-panel__caja .is-cart-fila {
		--is-cart-foto: 102px;
		column-gap: 12px;
		padding: 14px 0;
	}

	/* El total alineado a la izquierda (14/10/2026, pedido de Leandro): con
	   descuento lleva la lista tachada encima, y los dos renglones quedan
	   parejos del lado izquierdo. */
	.is-cart-panel .is-cart-panel__caja .is-cart-fila__total {
		text-align: left;
	}

	/* 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, en todos los anchos
 * (diseño de Mercado Libre, pedido de Leandro del 07/10/2026; hasta la 1.53
 * esto valía solo abajo de 768px).
 *
 * La página del carrito es la tabla de WooCommerce que arma Oxygen, no nuestro
 * panel. No se reemplaza: la tabla se vuelve la misma grilla de la fila del
 * panel con CSS, así lo que Oxygen tenga alrededor (los totales, los botones)
 * sigue igual. El precio por caja se esconde, como en el panel.
 *
 * 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.
 *
 * El campo de cantidad sigue siendo el de WooCommerce, con el menos y el más
 * que le dibuja IS_Lote_Hooks alrededor.
 */

body.woocommerce-cart .woocommerce-cart-form table.shop_table {
	padding: 0;
	border: 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"): 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á. */
body.woocommerce-cart .woocommerce-cart-form table.shop_table tr.cart_item td {
	text-align: left !important;
	border: 0;
}

body.woocommerce-cart .woocommerce-cart-form table.shop_table tr.cart_item {
	--is-cart-foto: 119px;
	display: grid;
	grid-template-columns: var(--is-cart-foto) minmax(0, 1fr) auto;
	grid-template-rows: auto auto auto 1fr;
	grid-template-areas:
		"foto nombre   quitar"
		"foto color    ."
		"foto caja     ."
		"foto cantidad total";
	column-gap: 16px;
	row-gap: 4px;
	align-items: start;
	padding: 16px 0;
	border-bottom: 0.5px solid #454343;
}

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

/* El precio por caja se fue de la fila (07/10/2026): queda solo el total. */
body.woocommerce-cart .woocommerce-cart-form table.shop_table tr.cart_item td.product-price {
	display: none !important;
}

body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-thumbnail {
	display: block !important;
	grid-area: foto;
	grid-row: 1 / 5;
	align-self: stretch;
	width: var(--is-cart-foto);
	min-height: var(--is-cart-foto);
	margin: 0 !important;
	padding: 0;
}

/* Posicionada sobre la celda por lo mismo que en el panel: el alto lo pone
   el texto y la foto lo llena. */
body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-thumbnail {
	position: relative;
}

body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-thumbnail a {
	position: absolute;
	inset: 0;
	display: block;
}

/* 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 }`). 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: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	height: 100% !important;
	max-height: none !important;
	min-height: 0 !important;
	border: 0 !important;
	object-fit: cover;
	margin: 0 !important;
}

/* La celda del nombre lleva adentro el nombre, el color 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;
}

/* Los mismos 12px del panel, con la altura de renglón de antes. */
body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-name > a {
	grid-area: nombre;
	font-size: 12px;
	line-height: 16px;
}

body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-name .is-cart-fila__color {
	grid-area: color;
}

body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-name .is-cart-panel__lote {
	grid-area: caja;
	align-self: start;
	margin: 0;
	font-size: 12px;
	color: #666;
}

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

/* El builder le da a esta celda un ancho en porcentaje que, adentro de la
   grilla, la dejaba en 15px: el total se salía de la fila y se montaba sobre
   el recuadro de los totales (visto a 1440px, 07/10/2026). */
body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-subtotal {
	grid-area: total;
	align-self: end;
	justify-self: end;
	width: auto !important;
	min-width: max-content;
	padding: 0 0 8px;
	font-size: 12px;
	text-align: right !important;
	white-space: nowrap;
}

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

/* 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 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 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;
}

@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;
	}

	/* En el teléfono, /carro/ es la misma fila que el carrito lateral, medida
	   elemento por elemento contra él en un navegador a 500px (pedido de
	   Leandro, 07/10/2026): la foto de 102px, los renglones con su altura de
	   1.6 (la página heredaba 24px y cada renglón crecía 5px), el contador del
	   mismo ancho y los importes en el mismo peso liviano. */
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tr.cart_item {
		--is-cart-foto: 102px;
		column-gap: 12px;
		/* 4px más abajo que arriba: la fila del panel tiene un renglón más,
		   vacío, para el aviso de stock, y su separación suma esos 4px. */
		padding: 14px 0 18px;
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-name > a,
	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-name .is-cart-fila__color,
	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-name .is-cart-panel__lote,
	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-subtotal {
		line-height: 1.6;
	}

	/* El contador mide lo mismo que el del panel, 100px. El campo de número
	   de Chrome no baja de 38px sin recortar el número (con 34 se leía "3(" en
	   vez de "30"), así que los 4px salen de los botones: 30px cada uno en vez
	   de 32. El número va centrado y en peso normal, como el del panel. */
	html body.woocommerce-cart .carrito-page-section .woocommerce .woocommerce-cart-form table.shop_table td.product-quantity .quantity,
	html body.woocommerce-cart .carrito-page-section .woocommerce .woocommerce-cart-form table.shop_table td.product-quantity input.qty {
		width: 38px !important;
		max-width: 38px !important;
	}

	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-quantity .is-cart-qty__boton {
		width: 30px;
	}

	/* Las flechas nativas del campo, fuera del todo: aunque no se vean siguen
	   reservando su lugar a la derecha, y el número quedaba corrido a la
	   izquierda de su hueco. */
	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 {
		display: none;
	}

	/* Una sola línea entre producto y producto, como en el panel: el builder
	   le pone además un borde arriba a cada fila después de la primera, y se
	   veía doble. */
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tr.cart_item + tr.cart_item {
		border-top: 0;
	}

	html body.woocommerce-cart .carrito-page-section .woocommerce .woocommerce-cart-form table.shop_table td.product-quantity input.qty {
		text-align: center !important;
		font-weight: 400 !important;
	}

	html body.woocommerce-cart .carrito-page-section .woocommerce .woocommerce-cart-form table.shop_table td.product-subtotal .woocommerce-Price-amount {
		font-weight: 300 !important;
	}
}

/*
 * 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;
}

/* En minúscula, como el resto de los botones del sitio ("agregar al
   carrito", "realizar el pedido"): los dos del carrito lateral y el de
   finalizar la compra de /carro/ (14/10/2026, pedido de Leandro). */
html body .is-cart-panel__boton,
html body.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	text-transform: lowercase;
}