/*
 * NA Core — Mini carrito.
 *
 * Reglas deliberadamente ancladas a clases PROPIAS (.na-mini-cart__*) y a clases de
 * WooCommerce/Elementor, NUNCA a wrappers de Petio (.cart-popup, .cart_list, .mini-cart):
 * el tema va a cambiar a vamtam-petmania y cualquier ancla al tema moriría en silencio.
 */

/* --------------------------------------------------------------------------
 * 1. Los iconos rotos: los dos círculos rojos sólidos.
 *
 * El template de mini carrito de Elementor Pro emite el enlace de quitar VACIO y
 * cuenta con el CSS de su widget Menu Cart para pintarle el icono. Ese CSS no se
 * encola en nuestro header, así que solo queda el círculo rojo del tema. Se le pinta
 * una equis desde aquí, y solo cuando el enlace está vacío (:empty), para no
 * duplicar el icono en los temas/templates que ya meten un <i> dentro.
 * -------------------------------------------------------------------------- */
a.remove_from_cart_button:empty::before,
a.elementor_remove_from_cart_button:empty::before,
.woocommerce-mini-cart .remove:empty::before {
	content: "\00d7"; /* × — carácter, no webfont: no depende de la fuente de iconos del tema. */
	display: block;
	width: 100%;
	line-height: inherit;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.25em;
	font-weight: 400;
	text-align: center;
	color: #fff;
}

a.remove_from_cart_button:empty,
a.elementor_remove_from_cart_button:empty,
.woocommerce-mini-cart .remove:empty {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

/*
 * Elementor emite DOS enlaces de quitar por línea (el suyo para AJAX y el estándar de
 * Woo). Con el CSS de su widget solo se ve uno; sin él se ven los dos círculos. Se
 * oculta todo enlace que no sea el primero de la celda de "quitar".
 */
.elementor-menu-cart__product-remove > a:not(:first-child) {
	display: none !important;
}

/* --------------------------------------------------------------------------
 * 2. Estado de carrito vacío.
 * -------------------------------------------------------------------------- */
.na-mini-cart__vacio {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 28px 20px;
	text-align: center;
}

.na-mini-cart__vacio .na-mini-cart__icono {
	color: #b9c2bd;
	flex: 0 0 auto;
	/* Glifo de la fuente `theme-icons`: el tamano se da con font-size, no con width. */
	display: block;
	font-size: 48px;
	line-height: 1;
	font-style: normal;
}

.na-mini-cart__vacio-texto {
	margin: 0;
	font-size: 15px;
	line-height: 1.4;
	color: #4a4a4a;
}

.na-mini-cart__vacio-enlace {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: #7ab648; /* verde de marca NA */
}

.na-mini-cart__vacio-enlace:hover,
.na-mini-cart__vacio-enlace:focus {
	color: #5f9235;
	text-decoration: none;
}

.na-mini-cart__vacio-enlace .na-mini-cart__flecha {
	transition: transform 0.15s ease;
	display: inline-block;
	font-size: 16px;
	line-height: 1;
	font-style: normal;
}

.na-mini-cart__vacio-enlace:hover .na-mini-cart__flecha {
	transform: translateX(3px);
}

/* --------------------------------------------------------------------------
 * 3. Aviso de envío gratis.
 * -------------------------------------------------------------------------- */
.na-mini-cart__envio {
	margin-top: 14px;
	padding: 12px 14px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
	color: #4a4a4a;
}

.na-mini-cart__envio span {
	display: inline;
	font-weight: 700;
	color: #7ab648; /* verde de marca NA */
}

@media (prefers-reduced-motion: reduce) {
	.na-mini-cart__vacio-enlace .na-mini-cart__flecha {
		transition: none;
	}
	.na-mini-cart__vacio-enlace:hover .na-mini-cart__flecha {
		transform: none;
	}
}