/**
 * MLC Toolkit — Tokens de diseño
 * ---------------------------------------------------------------------------
 * Fuente única de verdad del sistema visual. Todos los valores están extraídos
 * de los HTML maquetados de referencia (feed, carrusel de categorías y barra de
 * filtros) y de las imágenes de diseño.
 *
 * Ningún módulo debe escribir un color, un tamaño de fuente o un espaciado
 * "a mano": todos consumen estas variables.
 */

:root {
	/* --- Tipografía ----------------------------------------------------- */
	--mlc-font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	/* La referencia de la ficha de producto usa Inter en el breadcrumb, la tabla
	   de especificaciones y el bloque de resena. */
	--mlc-font-family-alt: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	--mlc-fw-regular: 400 !important;
	--mlc-fw-semibold: 600 !important;
	--mlc-fw-bold: 700 !important;

	/* --- Paleta ---------------------------------------------------------- */
	--mlc-color-text: #313131 !important;
	--mlc-color-text-soft: rgba(49, 49, 49, 0.5) !important;
	--mlc-color-sale: #f13030 !important;
	--mlc-color-star: #ee9e13 !important;
	--mlc-color-star-empty: #cccccc !important;
	--mlc-color-bg: #f2f2f2 !important;
	--mlc-color-surface: #ffffff !important;
	--mlc-color-border: #cccccc !important;
	--mlc-color-line: rgba(49, 49, 49, 0.1) !important;
	--mlc-color-white: #ffffff !important;
	--mlc-color-accent: #f18f30 !important;         /* naranja de enlaces activos, slider y tags */
	--mlc-color-accent-soft: rgba(241, 143, 48, 0.1) !important;
	--mlc-color-overlay: rgba(0, 0, 0, 0.55) !important;

	/* Degradado sutil sobre la imagen de producto (ver HTML del feed). */
	--mlc-media-overlay: linear-gradient(180deg, rgba(241, 143, 48, 0) 0%, rgba(241, 143, 48, 0.1) 100%) !important;

	/* Degradado vertical de los slides de categoría. */
	/* El maquetado original oscurecía el slide entero (0.8 arriba, 0.3 en el
	   centro y 0.8 abajo), lo que dejaba las fotos casi negras. Aquí el
	   degradado solo oscurece donde de verdad hace falta: la franja baja, que
	   es donde van el título y el botón. El resto de la imagen queda limpio. */
	--mlc-slide-overlay: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.12) 0%,
		rgba(0, 0, 0, 0) 30%,
		rgba(0, 0, 0, 0.12) 55%,
		rgba(0, 0, 0, 0.62) 100%
	) !important;

	/* --- Escala tipográfica --------------------------------------------- */
	--mlc-fs-section: 30px !important;              /* título de sección "PRODUCTOS DESTACADOS" */
	--mlc-lh-section: 1 !important;
	--mlc-ls-section: -0.5px !important;

	--mlc-fs-brand: 11px !important;                /* marca, mayúsculas */
	--mlc-lh-brand: 1.4 !important;
	--mlc-ls-brand: 0.7px !important;

	--mlc-fs-badge: 11px !important;                /* badge de descuento */
	--mlc-ls-badge: 0.4px !important;

	--mlc-fs-name: 15px !important;                 /* nombre de producto */
	--mlc-lh-name: 1.3 !important;

	--mlc-fs-price-old: 11.9px !important;
	--mlc-fs-price: 14px !important;
	--mlc-lh-price: 1.5 !important;

	--mlc-fs-more: 12px !important;                 /* enlace "+N" de swatches */
	--mlc-fs-small: 13px !important;
	--mlc-fs-base: 16px !important;
	--mlc-fs-tag: 12px !important;

	/* --- Card de producto ------------------------------------------------ */
	--mlc-card-pad: 15px !important;                /* padding lateral del contenido */
	--mlc-card-gap: 6px !important;                 /* separación entre líneas de texto */
	--mlc-card-media-radius: 0px !important;
	--mlc-badge-height: 21px !important;
	--mlc-badge-pad: 6px !important;
	--mlc-badge-offset: 10px !important;            /* separación del badge respecto a la imagen */

	--mlc-swatch-size: 30px !important;
	--mlc-swatch-inner: 26px !important;
	--mlc-swatch-gap: 4px !important;

	--mlc-stars-width: 71.67px !important;
	--mlc-stars-height: 14.3px !important;

	/* --- Rejilla y contenedores ------------------------------------------ */
	--mlc-container: 1478px !important;             /* ancho de contenido del diseño original */
	--mlc-grid-gap-x: 6.29% !important;             /* 93px sobre 1478px */
	--mlc-grid-gap-y: 42px !important;

	/* --- Carrusel --------------------------------------------------------- */
	--mlc-carousel-gap: 19px !important;
	--mlc-carousel-dot-width: 25px !important;
	--mlc-carousel-dot-height: 4px !important;
	--mlc-carousel-dot-gap: 7px !important;
	--mlc-slide-ratio: 480 / 590 !important;

	/* --- Interfaz --------------------------------------------------------- */
	--mlc-radius: 0px !important;
	--mlc-radius-pill: 999px !important;
	--mlc-shadow-thumb: 5px 5px 11.3px 0 rgba(0, 0, 0, 0.5) !important;
	--mlc-shadow-panel: 0 0 40px rgba(0, 0, 0, 0.18) !important;
	--mlc-transition: 0.25s ease !important;
	--mlc-transition-slide: 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
	--mlc-z-dropdown: 99990 !important;            /* desplegables del header: por encima del menú, por debajo del mini-carrito */
	--mlc-z-overlay: 99998 !important;
	--mlc-z-panel: 99999 !important;

	/* --- Ficha de producto ------------------------------------------------ */
	--mlc-pd-gap: 7.9% !important;                  /* separacion entre galeria y datos */
	--mlc-pd-thumb-col: 15.3% !important;           /* 128px sobre los 834px de la galeria */
	--mlc-pd-thumb-gap: 1.7% !important;            /* 14px sobre 834px */
	--mlc-pd-accent: #f18f30 !important;            /* naranja de la ficha: marca, precio, CTA */
	--mlc-pd-line: #adadad !important;              /* linea de la tabla de especificaciones */
	--mlc-pd-field-border: #e2e2e2 !important;      /* borde del selector de cantidad */
	--mlc-pd-crumbs: #737373 !important;
	--mlc-pd-control-height: 52px !important;

	/* --- Espaciado -------------------------------------------------------- */
	--mlc-space-xs: 4px !important;
	--mlc-space-sm: 8px !important;
	--mlc-space-md: 16px !important;
	--mlc-space-lg: 24px !important;
	--mlc-space-xl: 40px !important;
}

/* Ajustes de rejilla por breakpoint: las separaciones porcentuales del diseño
   original resultan enormes en pantallas pequeñas. */
@media (max-width: 1024px) {
	:root {
		--mlc-grid-gap-x: 24px !important;
		--mlc-grid-gap-y: 32px !important;
	}
}

@media (max-width: 600px) {
	:root {
		--mlc-grid-gap-x: 14px !important;
		--mlc-grid-gap-y: 24px !important;
		--mlc-swatch-size: 26px !important;
		--mlc-swatch-inner: 22px !important;
		--mlc-carousel-gap: 12px !important;
	}
}