/*
 * Puente entre WooCommerce y los tokens del tema.
 *
 * Se carga SOLO en paginas de tienda (ver inc/woocommerce.php).
 *
 * WooCommerce trae sus propios colores en variables CSS. Este archivo las
 * reapunta a los tokens del tema para que la tienda no aparezca con el violeta
 * de WooCommerce en un sitio que no lo usa.
 *
 * PROVISORIO: escrito antes de instalar WooCommerce. Debe verificarse pantalla
 * por pantalla en la etapa 08, y completarse en la 14 al alcanzar la paridad
 * con el prototipo.
 */

.woocommerce,
.woocommerce-page,
.wc-block-components-notice-banner,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	--woocommerce: var(--wp--preset--color--accent);
	--wc-green: var(--wp--preset--color--success);
	--wc-red: var(--wp--preset--color--danger);
	--wc-orange: var(--wp--preset--color--notice);
	--wc-blue: var(--wp--preset--color--accent);
	--wc-primary: var(--wp--preset--color--accent);
	--wc-primary-text: var(--wp--preset--color--accent-contrast);
	--wc-secondary: var(--wp--preset--color--base-alt);
	--wc-secondary-text: var(--wp--preset--color--contrast);
	--wc-highlight: var(--wp--preset--color--accent-strong);
	--wc-content-bg: var(--wp--preset--color--surface);
	--wc-subtext: var(--wp--preset--color--contrast-muted);
	--wc-form-border-color: var(--wp--preset--color--hairline);
	--wc-form-color-background: var(--wp--preset--color--surface);
	--wc-form-color-text: var(--wp--preset--color--contrast);
}

/*
 * Los mensajes de WooCommerce usan los colores de estado del sistema, no los
 * suyos. Un "producto agregado" y un "pedido confirmado" tienen que verse
 * iguales en toda la tienda.
 */
.woocommerce-message {
	border-top-color: var(--wp--preset--color--success);
	background-color: var(--wp--preset--color--success-surface);
}

.woocommerce-info {
	border-top-color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--accent-surface);
}

.woocommerce-error {
	border-top-color: var(--wp--preset--color--danger);
	background-color: var(--wp--preset--color--danger-surface);
}

/* Los precios heredan la tipografia del sistema, no la del plugin. */
.woocommerce .price,
.wc-block-components-product-price {
	font-family: var(--wp--preset--font-family--base);
	color: var(--wp--preset--color--contrast);
}

.woocommerce del,
.wc-block-components-product-price del {
	color: var(--wp--preset--color--contrast-muted);
}

/*
 * Tarjetas de producto (etapa 08, tanda "tarjetas").
 *
 * Copiado propiedad por propiedad de _project/prototipo/css/style.css
 * (`.product-card` y vecinos) y _project/prototipo/css/tokens.css, con los
 * valores EXACTOS del prototipo -colores, tamanios, radios, sombras,
 * tiempos de animacion-, no la version mas cercana entre los tokens del
 * tema. El tema quedo neutro a proposito hasta la etapa de marca (ver
 * etapa 05), pero Adriano pidio expresamente que nada de la tarjeta quede
 * a criterio del tema ni de WooCommerce: donde el prototipo ya decidio un
 * valor, ese valor se copia tal cual. Consecuencia real: esta pantalla usa
 * el rojo de marca (#CE2731) antes de la etapa de marca. Avisado en el
 * registro de avance.
 *
 * Las variables --pc-* (product card) son las de tokens.css renombradas
 * para no chocar con --wp--preset--*; no son un sistema nuevo, es una copia.
 *
 * La plantilla usa el catalogo clasico de WooCommerce
 * (`woocommerce/legacy-template`) con `woocommerce/content-product.php`
 * propio en vez del bloque Coleccion de productos: ese bloque no permite
 * este markup exacto (corazon y compartir flotando, selector de cantidad).
 *
 * Dos cosas del prototipo que la tarjeta real no puede tener todavia, por
 * falta de dato, no por decision de diseno: la marca (`.brand`, las listas
 * de precios del comercio no traen marca por fila) y el precio mayorista
 * (`.price-mayorista`, llega con el perfil del comercio en la etapa 07).
 *
 * `.wc-block-mini-cart__drawer` se agrega a esta lista porque el panel del
 * carrito vive en la cabecera y aparece en TODAS las paginas, no solo en las
 * de tienda: sin este selector, los tokens solo existian cuando el body
 * tenia `.woocommerce-page` (tienda, producto, checkout) y el panel se veia
 * sin marca -blanco y negro por defecto de WooCommerce- en cualquier otra
 * pagina, por ejemplo el blog o el inicio.
 *
 * `.ace-product-grid` se agrega por el mismo motivo, encontrado el
 * 31/08/2026 (Adriano, sub-etapa 14.02 tanda 2: "y la sombra hover en los
 * carruseles?"): las tarjetas de "Ofertas destacadas"/"Productos
 * destacados"/"Mas pedidos" viven en la Inicio, una pagina sin
 * `.woocommerce-page` en el body -a diferencia de `/ofertas/` o la ficha de
 * producto, que si la tienen-. Sin este selector la transicion y el
 * `transform: translateY(-3px)` del hover se veian, pero `box-shadow` salia
 * `none`: la variable no resolvia y el navegador descarta toda la
 * declaracion que la usa.
 *
 * `.info-page` se agrega el 01/09/2026 (sub-etapa 14.09, Envios y pagos):
 * es la primera de las cinco paginas de "Informacion y legales", ninguna
 * es de tienda, y todas comparten el mismo molde de tarjetas/aviso legal
 * del prototipo -mismo motivo que `.ace-product-grid` arriba-.
 */
.woocommerce,
.woocommerce-page,
.wc-block-mini-cart__drawer,
.ace-product-grid,
.info-page {
	--pc-primary: #ce2731;
	--pc-primary-dark: #a61f27;
	--pc-black: #1c1c1c;
	--pc-dark-gray: #3a3a3a;
	--pc-gray: #b3b3b3;
	--pc-light-gray: #e6e6e6;
	--pc-bg: #f6f5f4;
	--pc-white: #fafaf9;
	--pc-success: #1b8a3d;
	--pc-warning-bg: #fff4e5;
	--pc-fs-xs: 0.75rem;
	/*
	 * 1rem/16px: piso de legibilidad para texto de lectura recomendado por
	 * las guias de referencia (Google/W3C y Nielsen Norman Group piden 16px
	 * como minimo de cuerpo de texto en la web; Apple HIG ronda lo mismo,
	 * ~11pt/14.7px). Antes era 0.875rem/14px en escritorio -de ahi salia el
	 * nombre de la tarjeta calculado en ~10.5px, ilegible- y solo se subia
	 * en movil; ahora es el mismo piso en cualquier tamanio de pantalla.
	 */
	--pc-fs-sm: 1rem;
	--pc-fs-lg: 1.125rem;
	--pc-radius-md: 10px;
	--pc-radius-lg: 16px;
	--pc-radius-pill: 999px;
	--pc-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
	--pc-shadow-card-hover: 0 8px 20px rgba(0, 0, 0, 0.1);
	--pc-shadow-popover: 0 12px 32px rgba(0, 0, 0, 0.16);
	--pc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--pc-dur-fast: 150ms;
	--pc-dur-slow: 320ms;
}

/*
 * `.product-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2px}`
 * en el prototipo esta escrito de mas ancho a mas angosto (6 columnas de
 * base, las media queries van bajando la cuenta): se copia en ese mismo
 * orden, no al reves.
 */
ul.products {
	display: grid !important;
	grid-auto-flow: row;
	justify-items: stretch;
	grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
	gap: 2px;
	list-style: none;
	margin: 0 !important;
	padding: 0;
}

/*
 * Causa real del "falta una tarjeta" en la primera fila y la ultima: el CSS
 * clasico de WooCommerce le pone contenido invisible antes y despues de la
 * lista (`ul.products::before,::after{content:" "}`), un truco viejo
 * -"clearfix"- para contener flotantes. En una lista con `display:grid` ese
 * contenido invisible pasa a ser un elemento mas de la grilla: ocupaba la
 * primera casilla (corriendo el primer producto un lugar) y la ultima
 * (dejando un hueco al final). No hace falta contener nada: no hay
 * flotantes en una grilla.
 */
ul.products::before,
ul.products::after {
	content: none !important;
	display: none !important;
}

@media (max-width: 1200px) {
	ul.products {
		grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 1024px) {
	ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 768px) {
	ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/*
 * WooCommerce trae su propio CSS clasico de grilla
 * (`plugins/woocommerce/assets/css/woocommerce-layout.css`), pensado para
 * flotantes: `.woocommerce ul.products li.product{float:left;width:22.05%}`.
 * Esa regla pesa mas que una clase sola (tres clases contra una) y le gana
 * a cualquier ancho propio sin !important, sea cual sea el que se ponga:
 * por eso la tarjeta quedaba angosta aunque la grilla ya estuviera bien.
 * float y width van forzados a anular esa regla; el resto de las
 * propiedades del bloque no choca con nada y no necesita !important.
 */
.ace-product-card {
	float: none !important;
	width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	background: var(--pc-white) !important;
	border: 1px solid var(--pc-light-gray) !important;
	/*
	 * Menos redondeado que el resto de las cajas del sitio (--pc-radius-md,
	 * 10px) -pedido de Adriano, 23/09/2026: con las tarjetas tan juntas
	 * (2px de separacion) una esquina muy curva se notaba de mas-.
	 */
	border-radius: 4px !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	position: relative !important;
	font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif !important;
	transition: box-shadow var(--pc-dur-fast) var(--pc-ease-out), transform var(--pc-dur-fast) var(--pc-ease-out) !important;
}

.ace-product-card:hover {
	box-shadow: var(--pc-shadow-card-hover) !important;
	transform: translateY(-3px) !important;
}

.ace-product-card__media {
	position: relative !important;
	aspect-ratio: 1 / 1 !important;
	overflow: hidden !important;
	background: var(--pc-bg) !important;
}

.ace-product-card__media-link {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
}

/*
 * `.woocommerce ul.products li.product a img{height:auto;margin:0 0 1em}`
 * -CSS clasico de WooCommerce, pensado para una imagen de alto libre en un
 * listado sin recorte- pesa mas (seis pasos en la cadena de selectores)
 * que una clase sola y gana en `height` y `margin`, asi que la imagen no
 * llenaba el cuadro cuadrado y dejaba un espacio en blanco abajo.
 */
.ace-product-card__img {
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	object-fit: cover;
}

/*
 * Esquina inferior izquierda, con la mitad del margen que tenia arriba
 * (5px en vez de 10px) -pedido de Adriano, 23/09/2026: antes competia con el
 * corazon/compartir que ocupaban la esquina superior derecha; sacados esos
 * botones de la tarjeta, el sello se reubica abajo para no tapar el nombre
 * del producto al entrar en la imagen.
 */
/*
 * Rectangulo con esquinas apenas curvadas, no una pildora -pedido de
 * Adriano, 23/09/2026-: aplica tambien al futuro chip de "Destacado" que
 * use esta misma clase.
 */
.ace-product-card__badge {
	position: absolute !important;
	bottom: 5px !important;
	left: 5px !important;
	background: var(--pc-primary) !important;
	color: var(--pc-white) !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	padding: 4px 10px !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 4px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.03em !important;
	z-index: 2;
}

/*
 * Los dos iconos que le quedan a la tarjeta son ".icon-sm" en el prototipo
 * (18x18, trazo 1.8, flex-shrink:0), no un tamanio propio por icono.
 */
.ace-product-card__qty-icon,
.ace-product-card__add-icon {
	width: 18px !important;
	height: 18px !important;
	max-width: 18px !important;
	flex-shrink: 0;
}

.ace-product-card__body {
	padding: 12px !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	flex: 1;
}

/*
 * 14px fijo en cualquier tamanio de pantalla: mas chico que antes de la
 * marca (16px de cuerpo de texto general) para que la categoria y el precio
 * se destaquen mas, pero sin bajar del piso legible para texto de lectura
 * (Apple HIG ronda los 11pt/14.7px de minimo). Antes salia de una formula
 * atada a `--pc-fs-sm` (0.875rem * 0.75 = ~10.5px en escritorio) que
 * quedaba ilegible apenas se subia esa base para otra cosa de la tarjeta;
 * ahora es un valor fijo, independiente de esa variable.
 */
.ace-product-card__name {
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	min-height: 2.6em !important;
	color: var(--pc-black) !important;
	text-decoration: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/*
 * El nombre no tiene hover en el prototipo (no hay `.name:hover` en
 * style.css): sin esto, el subrayado-al-pasar-el-mouse que el tema pone por
 * defecto en cualquier enlace se cuela en la tarjeta.
 */
.ace-product-card__name:hover {
	color: var(--pc-black) !important;
	text-decoration: none !important;
}

/* Mismo criterio y mismo tamanio que la categoria: ver el comentario de ahi arriba. */
.ace-product-card__unit {
	font-size: 12px !important;
	color: var(--pc-dark-gray) !important;
	margin: 0 !important;
	display: block !important;
}

.ace-product-card__price-row {
	margin-top: 6px !important;
	margin-bottom: 0 !important;
	display: flex !important;
	align-items: baseline !important;
	gap: 8px !important;
	flex-wrap: wrap !important;
}

/*
 * `.woocommerce ul.products li.product .price{display:block;font-weight:400;
 * margin-bottom:.5em;font-size:.857em}` -CSS clasico de WooCommerce- pesa
 * mas (cuatro clases en cadena) que ".ace-product-card__price-row .price"
 * (dos clases) y gana en tamanio, peso y display: por eso el precio salia
 * mas chico y mas fino de lo que pide el prototipo (fs-lg, weight 600), y
 * en su propia linea en vez de alineado con el precio tachado.
 */
/* Un tercio mayor que el 1.125rem original del prototipo (pedido de Adriano). El tachado (del, mas abajo) no cambia. */
.ace-product-card__price-row .price {
	display: inline !important;
	font-size: calc(var(--pc-fs-lg) * 4 / 3) !important;
	font-weight: 600 !important;
	margin: 0 !important;
	color: var(--pc-black) !important;
}

.ace-product-card__price-row del {
	display: inline-block !important;
	font-size: var(--pc-fs-xs) !important;
	font-weight: 400 !important;
	color: var(--pc-gray) !important;
	opacity: 1 !important;
	text-decoration: line-through !important;
}

.ace-product-card__price-row ins {
	display: inline-block !important;
	font-weight: 600 !important;
	background: none !important;
	text-decoration: none !important;
}

.ace-product-card__consult {
	margin: 6px 0 0 !important;
	font-size: var(--pc-fs-sm) !important;
	color: var(--pc-dark-gray) !important;
}

/* Contador y boton de agregar van en una sola linea (pedido de Adriano). */
.ace-product-card__actions {
	margin-top: auto !important;
	padding: 0 12px 12px !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 8px !important;
}

.ace-product-card__qty {
	flex: 1 1 auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid var(--pc-light-gray) !important;
	border-radius: var(--pc-radius-md) !important;
	overflow: hidden !important;
}

.ace-product-card__qty button {
	flex: 0 0 38px !important;
	height: 36px !important;
	width: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	min-inline-size: 0 !important;
	min-block-size: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--pc-bg) !important;
	border: none !important;
	color: var(--pc-black) !important;
	cursor: pointer;
}

.ace-product-card__qty button:hover {
	background: var(--pc-light-gray) !important;
}

.ace-product-card__qty-value {
	flex: 1;
	text-align: center !important;
	font-weight: 400 !important;
	font-size: var(--pc-fs-sm) !important;
	margin: 0 !important;
}

/* Circulo perfecto, solo icono, al lado del contador (pedido de Adriano). */
.ace-product-card__add {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 38px !important;
	width: 38px !important;
	height: 38px !important;
	gap: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	text-decoration: none !important;
	text-transform: none !important;
	border: 2px solid transparent !important;
	border-radius: var(--pc-radius-pill) !important;
	background: var(--pc-light-gray) !important;
	color: var(--pc-dark-gray) !important;
	cursor: pointer;
	transition: transform var(--pc-dur-fast) var(--pc-ease-out), background var(--pc-dur-fast), box-shadow var(--pc-dur-fast);
}

.ace-product-card__add:hover {
	background: var(--pc-dark-gray) !important;
	color: var(--pc-white) !important;
}

.ace-product-card__add:active {
	transform: scale(0.97) !important;
}

/* Breakpoint angosto del prototipo: `@media (max-width:480px)`. */
@media (max-width: 480px) {
	.ace-product-card__body {
		padding: 8px;
		gap: 2px;
	}

	.ace-product-card__price-row {
		margin-top: 4px;
	}

	.ace-product-card__actions {
		padding: 0 8px 8px;
		gap: 6px;
	}

	.ace-product-card__add {
		flex-basis: 34px;
		width: 34px;
		height: 34px;
	}
}

/*
 * Paginado del catalogo. El prototipo no llego a disenar esta pantalla con
 * datos reales -nunca tuvo mas de una pagina de productos de muestra-, asi
 * que no hay una captura para calcar: se viste con el mismo lenguaje que el
 * resto de la tarjeta (pastillas, tokens de espaciado y de color) en vez de
 * dejar el estilo por defecto de WooCommerce, que no usa ningun token del
 * tema.
 */
/*
 * El prototipo nunca diseno esta pantalla con datos reales, asi que no hay
 * una captura para calcar; se resuelve con el mismo lenguaje visual de la
 * tarjeta (pastilla circular).
 *
 * Causa real del cuadro con bordes y el circulo ovalado: WooCommerce trae su
 * propio CSS de paginado clasico (`plugins/woocommerce/assets/css/
 * woocommerce.css`), pensado para verse como una sola barra con separadores:
 * `.woocommerce nav.woocommerce-pagination ul{border:1px solid #cfc8d8}`,
 * `...ul li{border-right:1px solid #cfc8d8}`,
 * `...ul li a,...span{padding:.5em;min-width:1em;display:block}`. Esa cadena
 * de selectores (nav+ul+li+a, cuatro etiquetas) pesa mas que la nuestra
 * (.woocommerce-pagination .page-numbers, dos clases) y le gana: por eso
 * quedaban los bordes y el circulo se deformaba en numeros de dos cifras,
 * pase lo que pasara del lado nuestro. Va con !important donde WooCommerce
 * define esas mismas propiedades, no en todo el bloque.
 */
.woocommerce-pagination {
	margin-top: var(--wp--preset--spacing--40);
	border: none !important;
}

.woocommerce-pagination .page-numbers {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	white-space: normal !important;
}

.woocommerce-pagination .page-numbers li {
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-right: none !important;
	float: none !important;
	display: block !important;
	overflow: visible !important;
	list-style: none;
}

.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 2.25rem !important;
	min-width: 2.25rem !important;
	aspect-ratio: 1 / 1;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 400;
	color: var(--wp--preset--color--contrast) !important;
	background: none !important;
	text-decoration: none;
	line-height: 1;
}

.woocommerce-pagination a.page-numbers:hover,
.woocommerce-pagination a.page-numbers:focus {
	background: var(--wp--preset--color--base-alt) !important;
	color: var(--wp--preset--color--contrast) !important;
}

.woocommerce-pagination span.page-numbers.current {
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--accent-contrast) !important;
	font-weight: 600;
}

.woocommerce-pagination .page-numbers.dots {
	color: var(--wp--preset--color--contrast-muted);
}

/*
 * Migas de pan, titulo y barra de orden del catalogo. Calcado de
 * _project/prototipo/css/style.css (.breadcrumb, .cat-hero h1,
 * .results-toolbar): sin esto quedan con la tipografia y el select por
 * defecto de WooCommerce, no con el sistema del sitio.
 */
.woocommerce-breadcrumb {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-muted);
	padding: var(--wp--preset--spacing--30) 0;
}

.woocommerce-breadcrumb a {
	color: var(--wp--preset--color--contrast-muted);
}

.woocommerce-breadcrumb a:hover {
	color: var(--wp--preset--color--accent);
}

.woocommerce-products-header__title.page-title {
	font-size: var(--wp--preset--font-size--x-large);
	margin-bottom: var(--wp--preset--spacing--40);
}

.woocommerce-result-count {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
	margin: 0;
}

.woocommerce-ordering {
	margin: 0 0 var(--wp--preset--spacing--30);
}

.woocommerce-ordering .orderby {
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--preset--border-radius--small);
	padding: 0.5rem 0.75rem;
	font-family: var(--wp--preset--font-family--base);
	font-size: var(--wp--preset--font-size--small);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}

/*
 * Panel del carrito (mini-cart de WooCommerce): pedido de Adriano del
 * 24/08 para que use el mismo lenguaje visual que la tarjeta de producto
 * -titulo, precio, contador, icono de basurero- en vez del estilo por
 * defecto de WooCommerce, que no toma ningun token del tema.
 *
 * El titulo del cajon trae `font-size:2em` de WooCommerce (heredado del
 * tamanio base de la pagina): en el prototipo del catalogo eso da un titulo
 * enorme, sobre todo en celular donde el cajon es angosto y el texto pasa a
 * dos lineas. Mismo tamanio que el titulo del panel de filtros
 * (`.ace-filter-modal__header h3`), para que ningun panel deslizable del
 * sitio tenga un titulo mas grande que otro solo por venir de un plugin
 * distinto.
 */
.wc-block-mini-cart__title {
	align-items: center !important;
	display: flex !important;
	font-size: var(--wp--preset--font-size--medium, 1.125rem) !important;
	gap: 0.5rem !important;
}

/*
 * WooCommerce no dibuja ningun icono en el titulo del panel: es "Tu
 * carrito (articulos: N)", solo texto. El prototipo lleva el icono de
 * carrito (Lucide, lucide.dev) pegado al titulo (`<h2><svg>...`) - mismo
 * criterio que el icono de basurero en "Quitar producto", mas abajo: se
 * dibuja como mascara CSS en vez de un archivo aparte, para heredar el
 * color del texto sin pedir un SVG nuevo.
 */
.wc-block-mini-cart__title::before {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/*
 * WooCommerce arma cada fila del panel con una grilla propia de solo DOS
 * columnas fijas -imagen (80px) y "producto" (132px)-, pensada para su
 * propio precio chico (14px). El precio de la tarjeta (24px, en negrita) no
 * entra en esos 132px junto con el nombre y el contador: se cortaba contra
 * el borde del panel, esa es la causa real de "el precio gigante" -no era
 * el tamanio en si, era que no habia lugar para el en la grilla de
 * WooCommerce-. Se define una grilla propia de TRES columnas -imagen,
 * producto, precio- para darle su propio espacio.
 */
.wc-block-cart-items__row {
	grid-template-columns: 64px 1fr auto !important;
	column-gap: 12px !important;
	align-items: start !important;
}

.wc-block-cart-item__image {
	grid-column: 1 !important;
	grid-row: 1 !important;
}

.wc-block-cart-item__product {
	grid-column: 2 !important;
	grid-row: 1 !important;
}

.wc-block-cart-item__total {
	grid-column: 3 !important;
	grid-row: 1 !important;
}

/*
 * WooCommerce muestra el precio dos veces por producto: el precio unitario
 * chico pegado al nombre (`.wc-block-cart-item__prices`) y el total de esa
 * linea a la derecha (`.wc-block-cart-item__total`, precio x cantidad). Con
 * el contador ya a la vista, mostrar las dos plata es informacion repetida:
 * se saca el precio unitario y queda solo el total de la linea.
 *
 * El tamanio NO es el mismo 24px de la tarjeta (`--pc-fs-lg * 4/3`): ese
 * valor se penso para una tarjeta con una fila entera para el precio solo.
 * Ac­á comparte fila con la imagen y el nombre en un panel angosto -18px
 * (`--pc-fs-lg`, sin el aumento) es el limite para que nunca se corte,
 * incluso en un celular chico-. Mismo color y peso que la tarjeta.
 */
.wc-block-cart-item__prices {
	display: none !important;
}

.wc-block-cart-item__total {
	font-size: var(--pc-fs-lg) !important;
	font-weight: 600 !important;
	color: var(--pc-black) !important;
	white-space: nowrap !important;
	text-align: right !important;
}

/*
 * Mismo tratamiento que `.ace-product-card__name` -copiado tal cual, no por
 * formula-: 14px fijo, ni un pelo mas.
 */
.wc-block-components-product-name {
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	color: var(--pc-black) !important;
	text-decoration: none !important;
}

/*
 * Selector de cantidad: mismas medidas que `.ace-product-card__qty` (marco
 * gris redondeado, botones de 38px de ancho por 36px de alto, sin fondo
 * propio) para que el contador del carrito se vea como el mismo componente
 * que el de la tarjeta, no como uno nuevo.
 *
 * El "-"/"+" de WooCommerce es texto, no un icono SVG como en la tarjeta
 * (`font-size:.9em` en su CSS de origen, relativo al tamanio de letra que
 * hereda de alrededor): por eso se veian chicos y, sin `display:flex` propio
 * en el boton, el texto no quedaba centrado en el marco de 36px -de ahi el
 * "desalineados"-. Se fija el tamanio en 18px -mismo tamanio que cualquier
 * icono svg de la tarjeta- y se centra con flex en los dos ejes.
 */
.wc-block-components-quantity-selector {
	border: 1px solid var(--pc-light-gray) !important;
	border-radius: var(--pc-radius-md) !important;
	background: none !important;
}

.wc-block-components-quantity-selector__button {
	height: 36px !important;
	min-width: 38px !important;
	opacity: 1 !important;
	color: var(--pc-black) !important;
	font-size: 18px !important;
	line-height: 1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.wc-block-components-quantity-selector__button:hover {
	background: var(--pc-light-gray) !important;
}

.wc-block-components-quantity-selector__input {
	font-size: var(--pc-fs-sm) !important;
	color: var(--pc-black) !important;
}

/*
 * "Quitar producto": mismo circulo que `.ace-product-card__add` -el boton
 * redondo de agregar de la tarjeta- (38x38, fondo gris claro, oscurece al
 * tocar). Se ve siempre (no solo al pasar el mouse: en celular no hay
 * mouse).
 *
 * El dibujo de adentro es el icono "Trash 2" de Lucide (lucide.dev), pedido
 * explicito de Adriano: nunca se inventa un icono nuevo, todos salen de esa
 * biblioteca. Se reemplaza el SVG propio de WooCommerce -ocultandolo- por
 * este mismo, puesto como mascara CSS para que herede el color del boton
 * (gris oscuro en reposo, blanco al tocar) sin depender de un archivo
 * aparte.
 */
.wc-block-cart-item__remove-link {
	visibility: visible !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 38px !important;
	width: 38px !important;
	height: 38px !important;
	border-radius: var(--pc-radius-pill) !important;
	background: var(--pc-light-gray) !important;
	color: var(--pc-dark-gray) !important;
	transition: background var(--pc-dur-fast), color var(--pc-dur-fast);
}

.wc-block-cart-item__remove-link svg {
	display: none !important;
}

.wc-block-cart-item__remove-link::after {
	content: '';
	display: block;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.wc-block-cart-item__remove-link:hover {
	background: var(--pc-dark-gray) !important;
	color: var(--pc-white) !important;
}

/*
 * Celular chico (mismo quiebre que la tarjeta, `max-width:480px`): la
 * imagen se achica un poco mas y el precio baja un escalon para no
 * apretar tanto una fila que ahora tiene tres columnas en vez de dos.
 */
@media (max-width: 480px) {
	.wc-block-cart-items__row {
		grid-template-columns: 56px 1fr auto !important;
		column-gap: 8px !important;
	}

	.wc-block-cart-item__total {
		font-size: var(--pc-fs-sm) !important;
	}

	.wc-block-components-quantity-selector__button {
		min-width: 34px !important;
	}

	.wc-block-cart-item__remove-link {
		flex-basis: 34px !important;
		width: 34px !important;
		height: 34px !important;
	}
}

/*
 * Boton "Ver mi carrito": lleva a la pagina /carrito, que muestra lo mismo
 * que ya se esta viendo en este panel -pedido de Adriano, tiene razon-. Se
 * saca y queda solo "Ir a finalizar compra", que si lleva a un lugar nuevo.
 * Los dos botones ya usan `flex-grow:1` (CSS del bloque), asi que el que
 * queda ocupa todo el ancho solo con sacar el otro.
 */
.wc-block-mini-cart__footer-cart {
	display: none !important;
}

/*
 * El icono propio del bloque `woocommerce/mini-cart` (carrito + globito) no
 * se muestra: el disparador visible es el boton "Pedido" de la cabecera
 * propia (`ace-commerce-widgets`, mismo globito con el numero real, ya
 * puesto junto a Favoritos y Mi cuenta). El bloque de WooCommerce sigue
 * montado igual -su panel es el que se abre-, solo que su propio boton
 * queda invisible y sin ocupar lugar; `assets/js/mini-cart-bridge.js` es
 * quien traduce un clic en "Pedido" en un clic en este boton escondido.
 */
.wc-block-mini-cart__button {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/*
 * El boton de adentro quedo achicado a 1px, pero el CONTENEDOR del bloque
 * (`.wp-block-woocommerce-mini-cart`) es `display:inline-block` por su
 * cuenta: adentro de la cabecera pegada -`display:block`- eso arma una
 * "linea de texto" invisible con la altura de letra que WooCommerce le puso
 * (`font-size` propio, ver el estilo en linea que trae el bloque), aunque no
 * se vea nada adentro. Eran los 24px transparentes de mas al final de la
 * cabecera pegada, por donde se veia el contenido de abajo transparentando
 * -no era una sombra corrida, era directamente un agujero-. Se lo fuerza a
 * ocupar exactamente cero espacio.
 */
.wp-block-woocommerce-mini-cart {
	display: block !important;
	block-size: 0 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	overflow: hidden !important;
}

/*
 * WordPress engancha `woocommerce/customer-account` junto al carrito, en el
 * mismo bloque de navegacion -mismo motivo que `.wc-block-mini-cart__button`
 * arriba-, pero acá no hace falta ni esconderlo con cuidado: "Mi cuenta" de
 * la cabecera propia ya es un enlace de verdad a la misma pagina
 * (`Header\Component::account_url()`), no un panel que haya que abrir. Se
 * saca directamente en vez de dejarlo invisible sin uso.
 */
.wp-block-woocommerce-customer-account {
	display: none !important;
}

/*
 * WooCommerce agrega solo un enlace "View cart" (`a.added_to_cart`, en ingles)
 * pegado al boton de la tarjeta cuando se agrega un producto sin recargar la
 * pagina. En este sitio el pedido se revisa en el panel de la cabecera y el
 * aviso ya lo da el toast, asi que ese enlace sobra (pedido de Adriano,
 * 21/09/2026: aparecia al agregar el primer producto y ensanchaba la fila de
 * la tarjeta). Se esconde en vez de sacarlo por JS porque WooCommerce lo
 * inserta despues de cada agregado y CSS lo cubre siempre.
 */
a.added_to_cart {
	display: none !important;
}