/* Bloque de precio: ficha de producto Y tarjetas del catalogo.
 *
 * Lo pinta `na-core/includes/shop/na-precio-bloque.php`. Ver ahi por que el
 * aviso de NutriClub se pintaba encima del precio real y por que se envuelve
 * todo en `.na-precio`.
 *
 * Estructura, identica en ficha, home, tienda, relacionados y sugerencias:
 *   .na-precio
 *   ├── .na-precio__fila      ins · del · chip −N%
 *   ├── .na-precio__ahorro    «Ahorras $X»
 *   └── .nutriclub-price-hint tarjeta de NutriClub
 *
 * Por que no hay guerra de especificidad
 * --------------------------------------
 * El tema declara `.price` como flex con `wrap` y reparte `order` entre sus
 * hijos, con selectores de hasta 0-7-2 (cuatro variantes de widget). No se
 * pelea ninguno: `.price` pasa a tener UN solo hijo (`.na-precio`), asi que su
 * `inline-flex` y su `flex-wrap` no pueden partir ni reordenar nada. Dentro de
 * `.na-precio` no hay reglas del tema.
 *
 * Del tema se aprovechan dos cosas en lugar de neutralizarlas:
 *   - `.price ins { margin-right: 5px|10px }` hace de separacion entre el precio
 *     y el tachado, asi que `.na-precio__fila` va con `gap: 0`.
 *   - `.price ins { order:1 }` / `.price del { order:2 }` siguen aplicando dentro
 *     de la fila (que si es flex), y por eso al chip se le da `order: 3`.
 *
 * TRES tamanos, un solo lenguaje visual
 * -------------------------------------
 *   1. NUCLEO      — estructura y color, compartidos.
 *   2. FICHA       — `.single-product` (fuera de tarjetas): cifras grandes.
 *   3. TARJETA     — `li.product` y `.na-cc-card`: compacto, aviso de UNA linea.
 * El aviso de socio (`.nutriclub-saving`) se oculta en tarjeta por CSS, sin rama
 * en PHP: es lo que iguala las alturas de las filas del catalogo.
 */

/* ===========================================================================
 * 1. NUCLEO
 * ======================================================================== */

.na-precio {
	display: block;
	/* `.price` sigue siendo flex en muchas superficies; que el envoltorio ocupe
	 * la linea completa y pueda encogerse sin desbordar. */
	flex: 1 1 100%;
	min-width: 0;
}

.na-precio__fila {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	/* gap 0: la separacion precio/tachado ya la pone el `margin-right` que el
	 * tema aplica a `ins`. Duplicarla daba 20px. */
	gap: 0;
}

/* El tema ordena los hijos del precio con `ins { order:1 }` y `del { order:2 }`.
 * El chip, sin `order` propio, se quedaba en 0 y se pintaba ANTES del precio
 * (verificado en produccion: chip en x=785, precio en x=846). */
.na-precio__pct {
	order: 3;
	display: inline-block;
	flex: 0 0 auto;
	border-radius: 999px;
	/* El amarillo #ffd100 es el token de senal de compra del sitio; sobre
	 * #002842 da contraste alto. No se usa `accent_1` de fondo: 2,3:1, falla. */
	background-color: #ffd100;
	color: var( --e-global-color-vamtam_accent_2, #002842 );
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
	text-decoration: none;
}

.na-precio__ahorro {
	display: block;
	margin: 0;
	font-weight: 400;
	color: var( --e-global-color-vamtam_accent_3, #59606D );
}

.na-precio__ahorro strong {
	font-weight: 700;
	color: var( --e-global-color-na28600a, #28600A );
}

/* --- Familia: los importes en la fuente de DISPLAY ----------------------- *
 *
 * El usuario pidio los precios de las tarjetas en Fredoka One. Se declara en el
 * NUCLEO y no en la seccion 3 para que ficha y tarjeta hablen el mismo idioma
 * visual: el modulo unifico los dos bloques justamente para eso, y tener la
 * cifra grande de la ficha en Nunito y la de la tarjeta en Fredoka One seria
 * volver a separarlos.
 *
 * SIN `!important`, Y NO ES UN OLVIDO — no lo anadas por reflejo
 * ------------------------------------------------------------------------
 * `na-tipografia.css` se encola en prioridad 100 y esta hoja en 40, asi que
 * na-tipografia carga DESPUES y a igualdad de peso ganaria ella. Pero su CAPA 2
 * (la lista con `!important`) NO incluye `.na-precio` ni ninguno de sus hijos:
 * esta fuera de esa lista a proposito. Lo unico que la roza es el bloque de
 * WooCommerce (`.woocommerce .price`, `.woocommerce .amount`), y ese caso ya
 * esta resuelto en su propia hoja con una regla de EXCEPCION que devuelve la
 * familia de titulos a estos mismos selectores — buscala por «EXCEPCION — los
 * IMPORTES» en `na-tipografia.css`. Con eso, aqui basta una regla normal.
 *
 * Si alguna vez ves los precios en Nunito, el fallo NO es la falta de
 * `!important`: es que la excepcion de `na-tipografia.css` se perdio, o que hay
 * una superficie nueva fuera de `.woocommerce`. Arregla eso, no esto.
 *
 * `.nutriclub-price-hint` se queda FUERA: es texto corrido explicativo, no una
 * cifra de display, y Fredoka One (un solo peso, mas ancha) lo hace mas duro de
 * leer a 13px. Sigue en Nunito, que es lo que ya hereda. */
.na-precio > .woocommerce-Price-amount,
.na-precio :is( ins, del ),
.na-precio :is( ins, del ) .woocommerce-Price-amount,
.na-precio__pct,
.na-precio__ahorro,
.na-precio__ahorro .woocommerce-Price-amount {
	font-family: var( --na-fuente-titulos, 'Fredoka One', sans-serif );
}

/* Las cifras heredan de su contenedor, no del kit. */
.na-precio__ahorro .woocommerce-Price-amount,
.na-precio :is( del, ins ) .woocommerce-Price-amount,
.na-precio .nutriclub-price-hint .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

/* Precio anterior: atenuado, para que informe sin competir. Antes `del` e `ins`
 * compartian `color: #000` y el tachado pesaba igual que el precio vigente. */
.na-precio del {
	font-weight: 400;
	color: var( --e-global-color-vamtam_accent_3, #59606D );
	opacity: 0.7;
	text-decoration: line-through;
}

.na-precio ins {
	font-weight: 700;
	color: var( --e-global-color-vamtam_accent_2, #002842 );
	text-decoration: none;
}

/* --- El aviso de NutriClub, como tarjeta propia -------------------------- */

/* Deja de ser una linea suelta pegada al precio (y, en el catalogo, pegada
 * literalmente sin espacio: se leia «$247.50★ Miembros NutriClub: $222.75»).
 * #28600A da 7,59:1 sobre blanco. */
.na-precio .nutriclub-price-hint {
	display: block;
	box-sizing: border-box;
	border-left: 3px solid var( --e-global-color-na28600a, #28600A );
	border-radius: 4px 8px 8px 4px;
	background-color: rgba( 141, 189, 47, 0.10 );
	font-weight: 500;
	line-height: 1.45;
	color: var( --e-global-color-na28600a, #28600A );
}

.na-precio .nutriclub-price-hint .nutriclub-icon {
	margin-right: 6px;
	color: var( --e-global-color-vamtam_accent_1, #8dbd2f );
}

.na-precio .nutriclub-price-hint strong {
	font-weight: 700;
}

/* WooCommerce (nucleo, no el tema) declara
 *   `.woocommerce ul.products li.product strong { display: block }`   <- 0-3-3
 * asi que en las tarjetas el importe del aviso y el de «Ahorras $X» caian a su
 * propia linea: el aviso medía 48px y la linea de ahorro 33px.
 *
 * Cuidado al contar: `:is( li.product, .na-cc-card )` aporta 0-1-1 (el argumento
 * mas especifico), asi que `.woocommerce :is(…) .na-precio strong` se queda en
 * 0-3-2 y PIERDE. Hay que llegar a 0-4-3, y de ahi el `ul.products li.product`
 * explicito mas la clase del bloque interior. La regla generica cubre la ficha y
 * las sugerencias del carrito, donde nadie compite. */
.woocommerce ul.products li.product .na-precio :is( .nutriclub-price-hint, .na-precio__ahorro ) strong,
.na-precio strong {
	display: inline;
}

/* Caso socio: `nutriclub_variacion_ahorro_socio()` escribe aqui «Ahorras $X con
 * NutriClub, sobre el precio oficial». Este modificador no tenia NINGUNA regla
 * propia. Es confirmacion, no invitacion, asi que va mas sobrio. */
.na-precio .nutriclub-price-hint--socio {
	font-weight: 500;
	background-color: rgba( 141, 189, 47, 0.08 );
}

/* ===========================================================================
 * 2. FICHA — el bloque de precio del resumen y el de la variacion elegida.
 *    Se excluyen las tarjetas de relacionados/upsell, que viven en la misma
 *    pagina y llevan la variante compacta.
 * ======================================================================== */

.single-product :is( .entry-summary, .elementor-widget-woocommerce-product-price, .elementor-widget-woocommerce-product-add-to-cart ) .na-precio__fila {
	margin: 0 0 6px;
}

.single-product :is( .entry-summary, .elementor-widget-woocommerce-product-price, .elementor-widget-woocommerce-product-add-to-cart ) .na-precio ins,
.single-product :is( .entry-summary, .elementor-widget-woocommerce-product-price, .elementor-widget-woocommerce-product-add-to-cart ) .na-precio > .woocommerce-Price-amount {
	font-size: 32px;
	line-height: 1.15;
}

.single-product :is( .entry-summary, .elementor-widget-woocommerce-product-price, .elementor-widget-woocommerce-product-add-to-cart ) .na-precio del {
	font-size: 18px;
	line-height: 1.2;
}

.single-product :is( .entry-summary, .elementor-widget-woocommerce-product-price, .elementor-widget-woocommerce-product-add-to-cart ) .na-precio__pct {
	margin-left: 10px;
	padding: 3px 10px;
	font-size: 14px;
	line-height: 1.4;
	/* Compensa el `align-items: baseline`: el chip tiene padding y su base cae
	 * mas abajo que la de las cifras. */
	transform: translateY(-2px);
}

.single-product :is( .entry-summary, .elementor-widget-woocommerce-product-price, .elementor-widget-woocommerce-product-add-to-cart ) .na-precio__ahorro {
	font-size: 14px;
	line-height: 1.35;
}

.single-product :is( .entry-summary, .elementor-widget-woocommerce-product-price, .elementor-widget-woocommerce-product-add-to-cart ) .na-precio .nutriclub-price-hint {
	width: 100%;
	max-width: 420px;
	margin: 10px 0 0;
	padding: 10px 14px;
	font-size: 15px;
}

.single-product :is( .entry-summary, .elementor-widget-woocommerce-product-price, .elementor-widget-woocommerce-product-add-to-cart ) .na-precio .nutriclub-price-hint strong {
	font-size: 17px;
}

/* En la ficha el ahorro de socio SI se muestra, en su propia linea: en el mismo
 * renglon obligaba a leer dos cifras seguidas y en movil desbordaba. */
.single-product :is( .entry-summary, .elementor-widget-woocommerce-product-price, .elementor-widget-woocommerce-product-add-to-cart ) .na-precio .nutriclub-saving {
	display: block;
	margin: 2px 0 0;
	font-size: 13px;
	font-weight: 400;
	opacity: 0.85;
}

.single-product :is( .entry-summary, .elementor-widget-woocommerce-product-price, .elementor-widget-woocommerce-product-add-to-cart ) .na-precio .nutriclub-price-hint--socio {
	font-size: 14px;
}

.single-product :is( .entry-summary, .elementor-widget-woocommerce-product-price, .elementor-widget-woocommerce-product-add-to-cart ) .na-precio .nutriclub-price-hint--socio strong {
	font-size: 15px;
}

/* ===========================================================================
 * 3. TARJETA — catalogo (home, tienda, relacionados, upsell) y las sugerencias
 *    propias del carrito. Compacto, y el aviso SIEMPRE de una linea.
 * ======================================================================== */

:is( li.product, .na-cc-card ) .na-precio__fila {
	margin: 0 0 4px;
}

:is( li.product, .na-cc-card ) .na-precio ins,
:is( li.product, .na-cc-card ) .na-precio > .woocommerce-Price-amount {
	font-size: 20px;
	line-height: 1.2;
}

:is( li.product, .na-cc-card ) .na-precio del {
	font-size: 14px;
	line-height: 1.2;
}

:is( li.product, .na-cc-card ) .na-precio__pct {
	margin-left: 8px;
	padding: 1px 7px;
	font-size: 12px;
	line-height: 1.35;
	transform: translateY(-1px);
}

:is( li.product, .na-cc-card ) .na-precio__ahorro {
	font-size: 12.5px;
	line-height: 1.3;
}

:is( li.product, .na-cc-card ) .na-precio .nutriclub-price-hint {
	margin: 6px 0 0;
	padding: 6px 10px;
	font-size: 13px;
	line-height: 1.35;
	/* Aqui hubo un `white-space: nowrap; text-overflow: ellipsis` buscando una
	 * sola linea. Se retiro: «★ Miembros NutriClub: $222.75» a 13px NO cabe en
	 * una tarjeta de 165px (tienda, 2 columnas en movil), y la elipsis recortaba
	 * justamente el importe — el unico dato que el aviso existe para dar.
	 *
	 * Lo que iguala las filas del catalogo no es el numero de lineas, sino que
	 * todas las tarjetas tengan el MISMO contenido: por eso se oculta
	 * `.nutriclub-saving` (mas abajo), que era lo que hacia que unos avisos
	 * midieran 68px y otros 91px. Con eso el alto ya es uniforme (48px a 1440,
	 * 43px a 390, medido en produccion) y los botones quedan alineados. */
	overflow-wrap: break-word;
}

:is( li.product, .na-cc-card ) .na-precio .nutriclub-price-hint strong {
	font-size: 14px;
}

/* El ahorro de socio no cabe en una tarjeta sin partirla en 3-4 lineas. Se
 * oculta aqui, no en PHP: el mismo markup sirve para las dos superficies. */
:is( li.product, .na-cc-card ) .na-precio .nutriclub-saving {
	display: none;
}

/* Las tarjetas del catalogo suelen ir centradas (`.na-cc-card` lo esta por
 * `text-align:center`); el aviso, al ser una caja con borde a la izquierda, se
 * lee mejor alineado al texto de la tarjeta. */
.na-cc-card .na-precio .nutriclub-price-hint {
	text-align: left;
}

/* ===========================================================================
 * 4. MOVIL
 * ======================================================================== */

@media ( max-width: 767px ) {

	.single-product :is( .entry-summary, .elementor-widget-woocommerce-product-price, .elementor-widget-woocommerce-product-add-to-cart ) .na-precio ins,
.single-product :is( .entry-summary, .elementor-widget-woocommerce-product-price, .elementor-widget-woocommerce-product-add-to-cart ) .na-precio > .woocommerce-Price-amount {
		font-size: 27px;
	}

	.single-product :is( .entry-summary, .elementor-widget-woocommerce-product-price, .elementor-widget-woocommerce-product-add-to-cart ) .na-precio del {
		font-size: 16px;
	}

	.single-product :is( .entry-summary, .elementor-widget-woocommerce-product-price, .elementor-widget-woocommerce-product-add-to-cart ) .na-precio .nutriclub-price-hint {
		max-width: none;
		padding: 9px 12px;
		font-size: 14px;
	}

	.single-product :is( .entry-summary, .elementor-widget-woocommerce-product-price, .elementor-widget-woocommerce-product-add-to-cart ) .na-precio .nutriclub-price-hint strong {
		font-size: 16px;
	}

	/* Tarjeta a 165px de ancho (tienda, 2 columnas): es el caso mas apretado.
	 * El aviso ya es de una linea; se baja el cuerpo para que el importe no se
	 * corte con la elipsis. */
	:is( li.product, .na-cc-card ) .na-precio ins,
:is( li.product, .na-cc-card ) .na-precio > .woocommerce-Price-amount {
		font-size: 18px;
	}

	:is( li.product, .na-cc-card ) .na-precio del {
		font-size: 13px;
	}

	:is( li.product, .na-cc-card ) .na-precio__pct {
		margin-left: 6px;
		padding: 1px 6px;
		font-size: 11px;
	}

	:is( li.product, .na-cc-card ) .na-precio .nutriclub-price-hint {
		padding: 5px 8px;
		font-size: 12px;
	}

	:is( li.product, .na-cc-card ) .na-precio .nutriclub-price-hint strong {
		font-size: 12.5px;
	}
}