/**
 * Innova Shop - front end.
 *
 * Esto se ve en la tienda de ANCERS, no en una pantalla nuestra, así que acá NO
 * va branding de Innova Style: el label tiene que verse parte del diseño del
 * cliente. Por eso hereda el color del texto que lo rodea en vez de fijar uno,
 * y por eso el archivo es lo bastante chico como para pisarlo desde Oxygen sin
 * pelearse con él.
 */

/* "(6 unidades)" es el dato de apoyo de "1 caja": va más chico, igual que en
   la ficha y en el carrito. Acá cubre las pantallas donde la cantidad va
   pegada al nombre dentro de <strong class="product-quantity">: el resumen
   del checkout, el pedido recibido y el pedido en el panel del cliente. */
.product-quantity .is-lote__unidades {
	font-size: 10px;
}

/* Salvo cuando está solo: en un Set comprado de a set el renglón dice "2 sets"
   y eso es la cantidad, no un dato de apoyo. */
.product-quantity .is-lote__unidades:only-child {
	font-size: inherit;
}

.is-price-label {
	display: inline-block;
	margin-left: 6px;
	font-size: 0.72em;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: currentColor;
	opacity: 0.65;
	vertical-align: middle;
	white-space: nowrap;
}

/* On cards the price often wraps: give the label its own line instead of
   pushing the price out of the container. */
.woocommerce ul.products li.product .is-price-label {
	display: block;
	margin-left: 0;
	margin-top: 2px;
}

@media screen and (max-width: 480px) {
	.is-price-label {
		display: block;
		margin-left: 0;
		margin-top: 2px;
	}
}

/* ==========================================================================
   Aviso de arriba del registro mayorista.
   Estilo mínimo y neutro a propósito: esto se ve dentro del diseño de Ancers,
   así que hereda su tipografía y sus colores en vez de imponer los nuestros.
   ========================================================================== */

.is-registro-aviso {
	margin: 0 0 24px;
	padding: 16px 18px;
	border-left: 3px solid currentColor;
	background: rgba(0, 0, 0, 0.03);
	font-size: 0.92em;
	line-height: 1.55;
}

.is-registro-aviso p {
	margin: 0 0 8px;
}

.is-registro-aviso p:last-child {
	margin-bottom: 0;
}

.is-registro-aviso__titulo {
	font-weight: 700;
}

/* ==========================================================================
   Pronto Pago, en el checkout.
   Neutro a propósito: vive dentro del diseño de Ancers, así que hereda su
   tipografía y su color en vez de imponer los nuestros.
   ========================================================================== */

.is-pronto-pago {
	margin: 0 0 18px;
	padding: 14px 16px;
	border: 1px solid #ddd;
	font-size: 0.94em;
	line-height: 1.5;
	transition: border-color 0.15s ease;
}

/*
 * Elegido: el borde se oscurece. En este checkout es la ÚNICA señal de que el
 * descuento quedó tildado, porque la hoja de Oxygen esconde todas las casillas
 * nativas del checkout (`.oxy-woo-checkout input[type="checkbox"]` en
 * display:none) y dibuja un cuadradito propio solo para las etiquetas de
 * WooCommerce, que esta no es.
 *
 * Dos caminos para el mismo estado. :has() cambia el borde en el mismo clic.
 * La clase la pone el servidor al redibujar el bloque, que WooCommerce hace en
 * cada recálculo, así que un navegador sin :has() llega al mismo borde apenas
 * termina de recalcular el total.
 */
.is-pronto-pago.is-elegido,
.is-pronto-pago:has( input:checked ) {
	border-color: #231f20;
}

.is-pronto-pago.is-oculto {
	display: none;
}

/*
 * Hijo directo a propósito. El checkout clásico dibuja la etiqueta pegada al
 * borde de la caja, pero el de bloques mete adentro el CheckboxControl de
 * WooCommerce, que trae su propia etiqueta, su propio input escondido y su
 * tilde en SVG encima. Sin el `>`, estas dos reglas se le meterían adentro y
 * le desarmarían el control. Con el `>` alcanzan lo nuestro y nada más: la
 * etiqueta del clásico y la casilla de reserva que dibuja la pantalla de
 * bloques cuando WooCommerce no expone su control.
 */
.is-pronto-pago > label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	margin: 0;
}

.is-pronto-pago > label input {
	margin-top: 3px;
	flex: 0 0 auto;
}

/*
 * La aclaración y la línea de solo lectura del carrito. En el checkout clásico
 * es un <em> adentro de la etiqueta; en el de bloques es un <p> hermano del
 * control, porque ahí la etiqueta la arma WooCommerce y no admite marcado
 * nuestro adentro. Las dos formas se ven igual.
 */
.is-pronto-pago em,
.is-pronto-pago__aclaracion {
	display: block;
	margin: 3px 0 0;
	font-style: normal;
	opacity: 0.75;
	font-size: 0.92em;
}

/*
 * La línea del carrito no tiene nada arriba, así que no necesita el margen que
 * la separa del control.
 */
.is-pronto-pago--aviso .is-pronto-pago__aclaracion {
	margin: 0;
}

/*
 * El control de bloques queda pegado al borde de la caja, sin el margen que
 * WooCommerce le pone entre campos de un formulario.
 */
.is-pronto-pago__casilla {
	margin: 0;
}

/* ---------------------------------------------------------- Breadcrumb --- */

/*
 * El espaciado del breadcrumb de la ficha.
 *
 * Oxygen ya le puso `display:flex; gap:10px` al nav en su universal.css, pero
 * el gap salía disparejo porque WooCommerce imprimía el separador y el último
 * tramo como texto suelto, y flex los junta en un solo item anónimo. El HTML
 * lo arregla IS_Ficha::breadcrumb_args(); acá va nomás la medida.
 *
 * El doble selector (`.woocommerce-breadcrumb.is-bc`) es para ganarle en
 * especificidad a la regla de Oxygen sin !important: si esto se escribiera con
 * un solo selector, Oxygen carga después y quedaría en empate.
 *
 * Para cambiar el aire, se toca UN número: --is-bc-gap.
 */
.woocommerce-breadcrumb.is-bc {
	--is-bc-gap: 14px;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 4px var(--is-bc-gap);
}

/* El separador no se selecciona con el texto al copiar la ruta, y no frena el
   click de los enlaces de al lado. */
.woocommerce-breadcrumb.is-bc .is-bc__sep {
	user-select: none;
	pointer-events: none;
	opacity: .6;
}

/* En mobile el nombre del producto es largo y el breadcrumb pasa a dos
   renglones: con el gap de escritorio se lee como si faltara un tramo. */
@media screen and (max-width: 767px) {
	.woocommerce-breadcrumb.is-bc {
		--is-bc-gap: 10px;
	}
}

/* ==========================================================================
   Las fotos, un poco más difíciles de llevarse.
   La mitad que le toca al CSS: el arrastre al escritorio y, en el teléfono, el
   menú de mantener apretado, que es lo único que escucha touch-callout. El
   botón derecho lo cancela imagenes.js. Ninguna de las dos cosas protege la
   foto (el archivo sigue siendo público en su URL): frenan al visitante
   distraído, que es de lo que se trata.
   ========================================================================== */

img {
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}

/* ==========================================================================
   El aviso con la cara del sitio (aviso.js).
   Un cartel centrado sobre un velo. Lo usan la ficha, cuando la combinación
   elegida no existe, y el checkout, cuando el pedido no se puede tomar: por
   eso vive en la hoja global y no en la de una pantalla. Los colores salen del
   panel del carrito, que es el otro elemento del sitio que se superpone a la
   página: mismo velo, mismo negro, mismo gris de texto.
   ========================================================================== */

.is-aviso {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(238, 238, 238, 0.75);
}

.is-aviso__caja {
	width: 100%;
	max-width: 380px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 28px 26px 22px;
	background: #eee;
	border: 0.5px solid #ccc;
	box-shadow: 0 12px 40px rgba(35, 31, 32, 0.12);
	text-align: center;
}

/* Con una lista adentro (los errores del checkout) el cartel es más ancho y se
   lee de izquierda a derecha: una lista centrada no se puede recorrer con la
   vista. El botón sigue centrado. */
.is-aviso__caja--lista {
	max-width: 460px;
	text-align: left;
}

.is-aviso__caja--lista .is-aviso__boton {
	display: block;
	margin: 0 auto;
}

.is-aviso__titulo {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: #231f20;
}

.is-aviso__texto {
	margin: 0 0 22px;
	font-size: 14px;
	line-height: 1.5;
	color: #231f20;
}

/* La lista de errores que arma WooCommerce, adentro del cartel. Trae de fábrica
   el aspecto de un banner (fondo gris, borde de color arriba, un ícono y una
   sangría grande a la izquierda), que adentro de un cartel sobra. Tres clases
   para ganarle a woocommerce.css y a Oxygen sin !important. */
.is-aviso .is-aviso__contenido ul.woocommerce-error {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	list-style: none;
	color: #231f20;
	font-size: 14px;
	line-height: 1.5;
}

.is-aviso .is-aviso__contenido ul.woocommerce-error::before {
	content: none;
}

.is-aviso .is-aviso__contenido ul.woocommerce-error li {
	margin: 0;
	padding: 7px 0;
	/* Sobre el fondo #eee del cartel, el #e2e2e2 de antes no se distinguía. */
	border-top: 0.5px solid #cfcfcf;
}

.is-aviso .is-aviso__contenido ul.woocommerce-error li:first-child {
	border-top: 0;
}

.is-aviso .is-aviso__contenido ul.woocommerce-error a {
	color: inherit;
	text-decoration: none;
}

.is-aviso .is-aviso__contenido ul.woocommerce-error a:hover,
.is-aviso .is-aviso__contenido ul.woocommerce-error a:focus-visible {
	text-decoration: underline;
}

.is-aviso__contenido {
	margin: 0 0 22px;
}

/* El botón repite el de "agregar al carrito": negro, minúscula y sin bordes
   redondeados, que es como se ven todas las acciones del sitio. Lleva un borde
   del mismo negro para que al pasar el mouse, cuando el fondo se vuelve
   transparente, el botón siga teniendo su contorno y no cambie de tamaño. */
.is-aviso__boton {
	display: inline-block;
	min-width: 130px;
	padding: 11px 22px;
	border: 1px solid #231f20;
	background: #231f20;
	color: #fff;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0.02em;
	cursor: pointer;
}

/* Al pasar el mouse se invierte: fondo transparente y letra negra. El foco
   del teclado se ve igual que el mouse, para que quien navega con Tab sepa
   dónde está. */
.is-aviso__boton:hover,
.is-aviso__boton:focus-visible {
	background: transparent;
	color: #231f20;
}

@media (max-width: 480px) {
	.is-aviso__caja {
		padding: 24px 20px 20px;
	}

	.is-aviso__boton,
	.is-aviso__caja--lista .is-aviso__boton {
		width: 100%;
	}
}