/* Lenguaje de diseño Sortícula aplicado a TODA la tienda.
 *
 * El tema trae su propio sistema: tipografías de los ajustes del panel, colores
 * fijos generados en style-colors.scss.tpl y bandas claras. Nuestra paleta, en
 * cambio, cambia por visita y suele ser oscura, así que sin esta capa las
 * páginas internas quedaban con otra tipografía y con textos negros sobre
 * fondos oscuros —nombres de producto y precios literalmente invisibles
 * (contraste medido de 1.08:1)—.
 *
 * Esta hoja se carga en todas las plantillas, después del CSS del tema, y
 * reexpresa sus componentes con nuestros tokens. Todo lo específico de una
 * plantilla vive en su propia hoja (product.css, etc.).
 */

/* --- Base -------------------------------------------------------------
   El tema construye TODA su tipografía sobre estos dos tokens, alimentados por
   los ajustes del panel. Redefinirlos aquí impone el sistema de la marca en
   cada componente del tema de una sola vez, sin peleas de especificidad: era
   lo que dejaba `select.form-select` y `.form-quantity` en Space Grotesk. */

:root {
	--heading-font: var(--serif);
	--body-font: var(--sans);

	/* El puente con la escala del tema base. `style-tokens.tpl` deriva TODOS sus
	   tamaños de dos ajustes del panel (headings_size 28, font_rest_size 14), y
	   las plantillas los consumen por clase de utilidad: 133 usos de
	   `.font-small` (12px), 11 de `.font-smallest` (10px)… Sin este mapeo el
	   cuerpo real de la tienda —precios, envíos, notas del carrito— vivía en
	   10-12px mientras la marca decía 17px. Remapeando los tokens en un solo
	   sitio entran en la escala las 36 reglas de `style-critical.tpl` y los 176
	   usos de clase, sin tocar ni una plantilla. */
	--h1: var(--fs-h1);
	--h1-huge: var(--fs-display);
	--h1-huge-md: var(--fs-display);
	--h2: var(--fs-h2);
	--h3: var(--fs-h3);
	--h4: var(--fs-h4);
	--h5: var(--fs-lg);
	--h6: var(--fs-body);
	--h6-small: var(--fs-sm);

	--font-huge: var(--fs-h3);
	--font-large: var(--fs-lg);
	--font-big: var(--fs-body);
	--font-base: var(--fs-body);
	--font-small: var(--fs-sm);
	--font-smallest: var(--fs-label);

	/* Instrument Serif sólo existe en 400. Con el ajuste "Negrita" del panel
	   activo, el tema pedía 700 y el navegador lo sintetizaba: un bold falso,
	   deforme, en el logo del checkout y en `.h1-huge`. */
	--title-font-weight: 400;
}

/* Que un faux bold no vuelva a colarse sin que nadie lo note. */
body {
	font-synthesis: none;
}

body {
	background: var(--bg);
	color: var(--fg);
	font-family: var(--sans);
}

/* El tema fija sus fuentes desde los ajustes (Rubik, Space Grotesk…). Aquí se
   impone el sistema de la marca: serif para títulos, Syne para el resto. */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.h1-huge {
	font-family: var(--serif);
	font-weight: 400;
	color: var(--fg);
	/* El `letter-spacing: 0` que había aquí estaba para matar las versalitas del
	   tema, pero eso ya lo resuelve `text-transform: none`. De paso se comía el
	   -0.01em del prototipo en TODOS los titulares de sección —que son <h2> sin
	   tracking propio—: casi 1px por letra a 88px. */
	letter-spacing: var(--track-title);
}

p,
li,
td,
th,
label,
span,
div,
input,
select,
textarea,
button {
	font-family: var(--sans);
}

/* …pero no dentro de un titular. La regla de arriba matchea el <span> directo y
   la herencia siempre pierde contra una regla que matchea: por eso la palabra
   en cursiva de cada titular —"tiempo <i>toma forma</i>", "Qué <i>incluye</i>"—
   salía en Syne en vez de en la itálica de Instrument Serif. Se veía bien en el
   prototipo y se perdió al portar. */
:is(h1, h2, h3, h4, h5, h6, .title, .h1-huge) :is(span, em, i, b, strong) {
	font-family: inherit;
}

a {
	color: var(--fg);
	text-decoration-color: color-mix(in srgb, var(--fg) 40%, transparent);
}

a:hover {
	color: var(--accent);
}

/* --- Cabeceras de página ----------------------------------------------
   Venían con una banda de color propia que cortaba el fondo de la paleta. */

.page-header,
.page-header-container {
	background: transparent;
	border-color: var(--line);
}

.page-header h1,
.category-name {
	font-family: var(--serif);
	font-weight: 400;
	text-transform: none !important;
	letter-spacing: var(--track-title);
	color: var(--fg);
	font-size: var(--fs-h1);
	line-height: var(--lh-title);
}

.breadcrumbs,
.breadcrumbs a,
.breadcrumbs span {
	color: var(--fg-muted);
	font-family: var(--sans);
	font-size: var(--fs-label);
	letter-spacing: var(--track-caps-sm);
}

/* La barra de filtros y orden de categoría venía con fondo blanco fijo: el
   título de la categoría, en hueso, quedaba en 1.18:1 sobre ella. */
.category-controls,
.js-category-controls {
	background: var(--bg);
	border-color: var(--line);
}

/* --- Rejilla de productos ---------------------------------------------
   Era el peor fallo de contraste del sitio: nombre y precio en negro fijo. */

.item-name,
.js-item-name {
	font-family: var(--serif);
	font-size: var(--fs-h4);
	/* Heredaba el 1.6 del body: Instrument Serif a 20px con 32px de interlínea
	   dejaba los nombres de dos líneas desarmados. Todos los demás titulares
	   serif del sitio van entre 0.92 y 1.05. */
	line-height: var(--lh-heading);
	letter-spacing: var(--track-title);
	color: var(--fg);
	text-transform: none;
}

.item-price,
/* El precio quedaba con el `.font-large !important` de la plantilla: más chico
   que el nombre del producto. En una joyería es información de primer nivel. */
.js-price-display {
	color: var(--fg);
	font-weight: 600;
	font-size: var(--fs-lg);
	line-height: var(--lh-ui);
}

.price-compare,
.js-compare-price-display {
	color: var(--fg-muted);
	text-decoration: line-through;
}

.item-product,
.item-image {
	background: transparent;
}

/* --- Acento y fondos del panel ------------------------------------------
   Última familia del mismo problema que los iconos negros y los botones
   amarillos: el tema compila `.text-accent { color: $accent-color !important }`
   —y `.bg-primary` y `.text-secondary`— desde los colores del PANEL, que son
   uno solo para toda la tienda. La paleta cambia; estas reglas no. En la línea
   del carrito se ve directo: la etiqueta de promoción, el rótulo "Regalo" y el
   "-N%" salían siempre del mismo color, daba igual la luz que le tocara a la
   página.

   Lleva `!important` porque la regla base también lo lleva y no hay forma de
   ganarle por especificidad: la hoja del tema se sirve desde el CDN y se
   compila después. */

.text-accent,
.product-installments.installment-no-interest {
	color: var(--accent) !important;
}

.bg-primary {
	background-color: var(--accent) !important;
	color: var(--accent-ink) !important;
}

.bg-primary a {
	color: var(--accent-ink) !important;
}

.text-secondary {
	color: var(--fg-muted);
}

.background-main {
	background-color: var(--bg);
}

/* --- Botones ------------------------------------------------------------ */

/* El color del botón sale de `settings.button_background_color`, un valor fijo
   del panel (hoy un amarillo) que no tiene relación con la paleta activa. La
   hoja compilada del tema gana a la nuestra pese a cargar antes, y al servirse
   desde el CDN no se puede inspeccionar por CORS para afinar el selector, así
   que aquí se fija el color de forma determinista. */
.btn-primary,
.btn-add-to-cart {
	background: var(--accent) !important;
	border-color: var(--accent) !important;
	color: var(--accent-ink) !important;
	font-family: var(--sans);
	font-weight: 600;
	letter-spacing: var(--track-caps-sm);
	text-transform: uppercase;
}

.btn-primary:hover,
.btn-add-to-cart:hover {
	background: var(--accent-deep, var(--accent)) !important;
	border-color: var(--accent-deep, var(--accent)) !important;
	color: var(--accent-ink) !important;
}

.btn-default,
.btn-secondary {
	background: transparent;
	border-color: var(--line-strong, var(--line));
	color: var(--fg);
}

.btn-link {
	color: var(--fg);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.btn-link:hover {
	color: var(--accent);
}

/* --- Formularios -------------------------------------------------------- */

input,
select,
textarea,
.form-control,
.form-select,
.form-select-options,
/* `.form-quantity` es la cápsula de − 1 + y venía quedándose fuera de esta
   lista. El tema la compila con los TRES colores del panel a la vez —texto,
   relleno de sus SVG y fondo opaco— más el filete de `$border-color`, así que
   la cápsula entera salía idéntica bajo las cinco paletas: un recuadro claro
   con signos negros plantado en medio de la tarjeta oscura del carrito. Es la
   misma familia de los iconos negros de la entrega, solo que acá lo que no se
   movía era el bloque completo. */
.form-quantity {
	background: transparent;
	color: var(--fg);
	border-color: var(--line);
	font-family: var(--sans);
	/* Safari iOS hace zoom al enfocar cualquier campo por debajo de 16px, y el
	   tema los dejaba en 14. Afectaba al buscador, al selector de cantidad, al
	   newsletter y a todo formulario de la tienda. El checkout ya lo tenía
	   resuelto; la tienda no. */
	font-size: var(--fs-input);
}

/* El contenedor que el tema mete entre la cápsula y el campo (`form-input.tpl`
   lo dibuja solo cuando hay prepend/append, es decir justo en el selector de
   cantidad) hereda el mismo fondo opaco. */
.form-quantity .form-control-container,
.form-quantity .form-control {
	background: transparent;
	color: var(--fg);
}

input::placeholder,
textarea::placeholder {
	color: var(--fg-muted);
}

.form-label,
label {
	color: var(--fg-muted);
	font-family: var(--sans);
	font-size: var(--fs-label);
	letter-spacing: var(--track-caps-sm);
	text-transform: uppercase;
}

/* --- Líneas divisorias --------------------------------------------------
   El tema las pinta con un color fijo que desaparecía sobre fondo oscuro. */

.bottom-line,
.top-line,
.right-line,
.left-line,
.bottom-line-md,
.top-line-md,
.right-line-md,
.left-line-md,
hr {
	border-color: var(--line);
}

/* --- Avisos -------------------------------------------------------------
   El tema pinta los avisos con colores semánticos fijos (un azul para la
   información, etc.) que no dependen del fondo. Sobre la paleta el resultado
   era ilegible: "El carrito de compras está vacío" salía en azul sobre naranja,
   a 1.24:1. El texto pasa a usar el color de la paleta y la semántica se
   conserva en el borde lateral. */

.alert {
	background: var(--surface, color-mix(in srgb, var(--fg) 6%, transparent));
	color: var(--fg);
	border: 1px solid var(--line);
	border-left-width: 3px;
	border-radius: 4px;
	padding: var(--space-4) var(--space-5);
}

.alert a {
	color: var(--fg);
	text-decoration: underline;
}

/* El icono venía con el mismo color semántico fijo que el texto */
.alert svg,
.alert svg path {
	fill: currentColor;
	color: inherit;
}

.alert-info {
	border-left-color: var(--accent);
}

.alert-success {
	border-left-color: var(--accent);
}

.alert-danger,
.alert-error {
	border-left-color: #ff5a52;
}

.alert-warning {
	border-left-color: #ffb020;
}

/* --- Modales y paneles ------------------------------------------------
   Filtros, buscador, menú y carrito abren en paneles del tema con fondo blanco.
   Como el resto del sitio va con la paleta —normalmente oscura— el contraste se
   invertía: el panel de filtros salía blanco con las opciones en gris casi
   ilegible. No lo detectaba la auditoría porque están ocultos al cargar. */

.modal,
.modal-content,
.modal-body,
.modal-header,
.modal-footer,
.modal-scrollable-area,
.fullscreen-modal {
	background: var(--bg);
	color: var(--fg);
	border-color: var(--line);
}

.modal-overlay,
.modal-overlay-md {
	background: color-mix(in srgb, var(--bg) 75%, transparent);
}

.modal a,
.modal label,
.modal span,
.modal div,
.modal li {
	color: var(--fg);
}

/* Las opciones no elegidas se atenúan, pero sin bajar de AA */
.modal .js-filter-option,
.modal .filter-option {
	color: var(--fg-muted);
}

.modal .modal-close,
.modal .modal-header {
	color: var(--fg);
}

.modal h1,
.modal h2,
.modal h3,
.modal h4,
.modal .modal-title {
	color: var(--fg);
	font-family: var(--serif);
}

/* La casilla del tema es un cuadro blanco sólido: sobre paletas oscuras eran
   manchas brillantes que dominaban el panel de filtros. */
.checkbox-icon {
	background: transparent;
	border: 1.5px solid var(--line-strong, var(--line));
	border-radius: 3px;
}

input:checked + .checkbox-icon,
.checked .checkbox-icon,
.selected .checkbox-icon {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}

/* --- Página no encontrada ---------------------------------------------- */

.sc-error {
	padding: calc(var(--section-y) * 1.2) var(--pad);
	background: var(--bg);
	color: var(--fg);
	min-height: 60vh;
	display: flex;
	align-items: center;
}

.sc-error .title {
	font-family: var(--serif);
	font-size: var(--fs-h2);
	font-weight: 400;
	line-height: 0.98;
	margin: 0 0 var(--space-5);
}

.sc-error .ital {
	font-style: italic;
	color: var(--accent);
}

.sc-error .intro {
	max-width: var(--measure);
	color: var(--fg-muted);
	margin: 0 0 var(--space-7);
	line-height: 1.6;
}

.sc-error .acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

/* La utilidad .btn de los tokens solo aporta tipografía; fuera de las secciones
   de la home nadie le daba caja, así que los enlaces salían como texto suelto. */
.sc-error .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--btn-pad-md);
	border-radius: 100px;
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: var(--track-caps-sm);
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.sc-error .btn.primary {
	background: var(--accent);
	border: 1.5px solid var(--accent);
	color: var(--accent-ink);
}

.sc-error .btn.ghost {
	background: transparent;
	border: 1.5px solid var(--line-strong, var(--line));
	color: var(--fg);
}

.sc-error .btn.ghost:hover {
	border-color: var(--fg);
}

@media (prefers-reduced-motion: reduce) {
	.sc-error .btn {
		transition: none;
	}
}

/* --- Botón flotante de WhatsApp ---------------------------------------
   Venía con el verde de marca de WhatsApp, que chocaba con las cinco paletas y
   era lo primero que rompía la armonía en cualquier pantalla. Se le pone el
   acento de la paleta activa; el icono ya se entiende sin el color corporativo. */

.btn-whatsapp {
	background: var(--accent) !important;
	color: var(--accent-ink) !important;
	border: 1px solid var(--accent);
	box-shadow: 0 6px 24px color-mix(in srgb, var(--accent) 30%, transparent);
	transition: transform 0.25s var(--ease, ease), background 0.25s;
}

.btn-whatsapp:hover {
	transform: translateY(-2px);
}

.btn-whatsapp svg,
.btn-whatsapp path {
	fill: var(--accent-ink) !important;
	color: var(--accent-ink) !important;
}

@media (prefers-reduced-motion: reduce) {
	.btn-whatsapp {
		transition: none;
	}

	.btn-whatsapp:hover {
		transform: none;
	}
}

/* --- Iconos -------------------------------------------------------------
   El tema base solo pinta los SVG que llegan con una de sus tres clases de
   color (`svg-icon-text`, `-accent`, `-invert`). Media docena de controles se
   incluyen únicamente con `icon-inline` —los signos − y + del selector de
   cantidad (`snipplets/svg/minus.tpl`, `plus.tpl`) y la papelera de cada línea
   del carrito (`cart-item-ajax.tpl`)—, así que no reciben `fill` de nadie y
   caen al negro por defecto del navegador. Sobre el hueso del tema base eso
   pasa inadvertido; sobre nuestras paletas oscuras el control desaparece.

   Por eso el `fill` va en el selector de elemento, con la especificidad más
   baja posible: alcanza a todo SVG del tema, presente y futuro, y pierde
   contra cualquier regla que sí quiera un color propio (los iconos de marca de
   las redes, por ejemplo, que el tema fija por clase).

   Las tres clases del tema se reexpresan justo debajo —y en este orden, que a
   igual especificidad decide— porque sus valores salen de los ajustes de color
   del panel y no de la paleta viva. */

svg {
	color: inherit;
	fill: currentColor;
}

.svg-icon-text {
	fill: currentColor;
}

.svg-icon-accent {
	fill: var(--accent);
}

.svg-icon-invert {
	fill: var(--bg);
}

/* El tema le fija a `.btn-link` un `fill` heredado de `settings.text_color`, y
   ahí cuelgan la papelera del carrito y el "Ver carrito" de la ficha. El
   `color` ya se reexpresa en la sección de botones; esto completa el par. */
.btn-link {
	fill: currentColor;
}

/* --- Selector de cantidad ----------------------------------------------
   El tema lo arma como una celda de tabla: una caja blanca con borde negro y
   tres celdas separadas por filetes. Sobre la paleta era el peor contraste que
   quedaba en la ficha — el número y los signos salen en hueso, y sobre ese
   blanco quedaban ilegibles.

   El referente de layout lo dibuja como cápsula, igual que el resto de los
   botones del sitio. Llegar ahí es solo CSS: las funciones viven en
   `LS.plusQuantity` y en las clases `js-quantity-*`, que no se tocan. Vale para
   las dos apariciones: la ficha de producto y cada línea del carrito.

   La cápsula se dibuja sobre el .form-group y no sobre el .form-row de dentro,
   porque ese lleva `right-line` del tema y al neutralizar el filete se llevaba
   por delante el borde de la propia cápsula. */

/* Doble clase sobre el mismo elemento (lleva `form-group form-quantity`) para
   ganarle al borde de 1px del tema: su hoja va con `media=print onload`, o sea
   que se aplica DESPUÉS de ésta y a igual especificidad se lleva el premio.

   El aire lateral no es decorativo: con el radio de 100px, un − y un + pegados
   al canto caen justo sobre la curva y la cápsula se lee como dos paréntesis
   sueltos alrededor del número. */
.form-quantity.form-group {
	display: inline-flex;
	align-items: center;
	width: auto;
	background: var(--surface);
	border: 1.5px solid var(--line);
	border-radius: 100px;
	overflow: hidden;
	padding: 0 var(--space-1);
}

/* Los signos, redondos como la cápsula que los contiene: así el hover no
   dibuja una esquina cuadrada dentro de una curva. */
.form-quantity .form-quantity-icon {
	border-radius: 50%;
	color: var(--fg-muted);
	transition:
		background 0.25s,
		color 0.25s;
}

/* El tema los sirve a 17px, más gruesos y más largos que la propia cifra: la
   jerarquía quedaba al revés, con dos signos gritando al lado del número que es
   lo único que hay que leer. */
.form-quantity .form-quantity-icon svg {
	width: 13px;
	height: 13px;
}

.form-quantity .form-quantity-icon:hover {
	background: color-mix(in srgb, var(--fg) 10%, transparent);
	color: var(--fg);
}

.form-quantity .form-quantity-icon:active {
	background: var(--accent);
	color: var(--accent-ink);
}

/* Los filetes internos partían la cápsula en tres. Los selectores llevan dos
   clases en el mismo elemento a propósito: product.css y cart.css neutralizan
   los filetes del tema con `.template-* .right-line`, que empata en
   especificidad y carga después, así que un `.form-quantity .right-line` a
   secas perdía. */
.form-quantity .form-row.right-line,
.form-quantity .row.right-line,
.form-quantity .row.top-line-md,
.form-quantity .row.bottom-line-md,
.form-quantity .form-row.top-line-md,
.form-quantity .form-row.bottom-line-md,
.form-quantity .form-quantity-icon.right-line,
.form-quantity .form-quantity-icon.left-line {
	border-color: transparent;
}

/* El anillo de foco de los − / + debe caber dentro de la cápsula: el
   `overflow: hidden` de arriba recorta cualquier outline hacia afuera. */
.form-quantity .form-quantity-icon:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
	color: var(--accent);
}

/* Dentro de la línea del carrito la celda es estrecha y la cápsula se partía
   en dos filas: el − arriba y el + abajo. */
/* En la ficha el envoltorio interno es .form-row y en el carrito es .row: son
   dos plantillas distintas y hay que nombrar los dos, o la cápsula del carrito
   se parte en dos filas —el − arriba y el + abajo— y el radio de 100px la
   convierte en una elipse. */
.form-quantity,
.form-quantity > .form-row,
.form-quantity > .row,
.form-quantity .form-control-container ~ *,
.form-quantity .form-row,
.form-quantity .row {
	flex-wrap: nowrap;
	margin: 0;
	width: auto;
}

.form-quantity .form-quantity-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 42px;
	height: 42px;
	margin: 0;
	color: var(--fg);
	cursor: pointer;
	transition:
		color 0.25s,
		background 0.25s;
}

.form-quantity .form-quantity-icon:hover {
	color: var(--accent);
	background: color-mix(in srgb, var(--fg) 8%, transparent);
}

.form-quantity .form-control-container {
	flex: none;
	width: 44px;
	padding: 0;
}

/* El input traía el fondo y el borde del tema, y las flechitas del type=number
   asomaban dentro de la cápsula. */
.form-quantity .form-control {
	background: transparent;
	border: 0;
	color: var(--fg);
	font-family: var(--sans);
	font-weight: 600;
	/* La cifra es lo único que hay que leer aquí: por encima de --fs-input, que
	   es el piso que evita el zoom de iOS. */
	font-size: var(--fs-lg);
	text-align: center;
	padding: 0;
	height: 42px;
	appearance: textfield;
}

.form-quantity .form-control::-webkit-outer-spin-button,
.form-quantity .form-control::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.form-quantity .form-control:focus {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
	.form-quantity .form-quantity-icon {
		transition: none;
	}
}

/* El "$900.000 con Efectivo" de las tarjetas de producto (categoría, búsqueda,
   filtros). El componente de la plataforma pinta sus spans con el color fijo
   del panel —negro—, que sobre las cinco paletas oscuras quedaba en 1,1:1.
   Apareció el día que el efectivo tuvo porcentaje. */
.sc-item-pago,
.sc-item-pago span {
	color: var(--fg-muted);
}