/* ============================================================
   ChronoSave — Design System v1.0
   Único archivo de tokens del proyecto. Todo color, tamaño y
   espaciado del sitio sale de aquí. Encolado después de Flatsome.
   ============================================================ */

/* ── Tipografía autoalojada (sin dependencia de Google) ────── */
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/ibm-plex-sans-500-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/ibm-plex-sans-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/ibm-plex-sans-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}

/* ── Tokens ──────────────────────────────────────────────────
   --cs-brand es el color del logo (dorado champán), sustituye
   al azul provisional del sistema original. Todo lo demás
   deriva de aquí. ──────────────────────────────────────────── */
:root {
	/* Neutros */
	--cs-ink-900:   #0F1519;
	--cs-ink-700:   #2B3640;
	--cs-ink-500:   #5A6875;
	--cs-ink-300:   #97A3AE;
	--cs-line:      #DDE3E8;
	--cs-line-soft: #E8ECF0;
	--cs-surface:   #FFFFFF;
	--cs-surface-2: #F5F7F9;
	--cs-bg:        #F4F6F8;

	/* Marca — dorado real del logo (sustituye al azul provisional) */
	--cs-brand:      #C0A06F;
	--cs-brand-600:  #A6844F;
	--cs-brand-050:  #F5EEE1;
	--cs-on-brand:   #241C0E; /* texto sobre fondo dorado */

	/* Semántico — cada color significa una cosa y solo una */
	--cs-ok:      #12734F;
	--cs-ok-bg:   #E7F3EC;
	--cs-warn:    #8A5A00;
	--cs-warn-bg: #FBF0DC;
	--cs-danger:  #A22C33;
	--cs-danger-bg: #FBE9EA;
	--cs-sale:    #B4232B;

	/* Tipografía */
	--cs-font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--cs-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

	/* Espaciado — base 4px */
	--cs-sp-1: 4px;
	--cs-sp-2: 8px;
	--cs-sp-3: 12px;
	--cs-sp-4: 16px;
	--cs-sp-6: 24px;
	--cs-sp-8: 32px;
	--cs-sp-12: 48px;
	--cs-sp-16: 64px;
	--cs-sp-24: 96px;

	/* Radios — discretos a propósito */
	--cs-radius-sm: 4px;
	--cs-radius-md: 6px;
	--cs-radius-lg: 10px;
	--cs-shadow: 0 1px 2px rgba(15,21,25,.05);
}

/* ── Base tipográfica ────────────────────────────────────────── */
/* !important necesario: las Theme Options de Flatsome inyectan un
   <style> con "Lato" para body/headings/nav SIN !important, pero
   se encola después de esta hoja y gana por orden de cascada. */
body,
.nav > li > a,
.mobile-sidebar-levels-2 .nav > li > ul > li > a,
p, input, textarea, select, button {
	font-family: var(--cs-font-sans) !important;
}
body {
	font-size: 16px;
	line-height: 1.55;
	color: var(--cs-ink-900);
	background: var(--cs-surface);
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.heading-font,
.product_title,
.entry-title {
	font-family: var(--cs-font-sans) !important;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--cs-ink-900);
}

/* Referencias, SKU, EAN y precios en tabular-nums: alinean en columna */
.sku, .pcard__ref, .cs-mono,
.price, .price-rrp, .price-margin,
.woocommerce-Price-amount {
	font-variant-numeric: tabular-nums;
}
.sku, .pcard__ref, .cs-mono {
	font-family: var(--cs-font-mono) !important;
}

/* ── Botones — uno primario por pantalla ────────────────────── */
.button,
button,
input[type="submit"],
.add_to_cart_button,
.single_add_to_cart_button,
.chronosave-register-btn {
	background: var(--cs-brand);
	border-color: var(--cs-brand);
	color: var(--cs-on-brand);
	font-family: var(--cs-font-sans);
	font-weight: 600;
	letter-spacing: 0;
	border-radius: var(--cs-radius-md);
	min-height: 44px;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.chronosave-register-btn:hover {
	background: var(--cs-brand-600);
	border-color: var(--cs-brand-600);
	color: #FFFFFF;
}

/* ── Precio B2B — lo que paga, lo que gana ──────────────────── */
.price {
	font-family: var(--cs-font-sans);
	font-weight: 600;
	font-size: 22px;
	letter-spacing: -0.02em;
	color: var(--cs-ink-900);
}
.price del {
	font-family: var(--cs-font-sans);
	font-weight: 400;
	font-size: 13px;
	color: var(--cs-ink-500);
	opacity: 1;
	text-decoration: line-through;
}
.price ins {
	text-decoration: none;
}
.chronosave-rrp-label {
	font-family: var(--cs-font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cs-ink-500);
}
.chronosave-wholesale-label {
	font-family: var(--cs-font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cs-brand-600);
}
.chronosave-hidden-price {
	font-family: var(--cs-font-sans);
	color: var(--cs-ink-500);
	font-style: normal;
	font-weight: 500;
}

/* ── Header / footer — carbón (--cs-ink-900), no dorado plano ── */
#header,
#header .header-bg-color,
#footer,
#footer .footer-widgets,
#footer .absolute-footer {
	background-color: var(--cs-ink-900) !important;
}
#header a,
#footer a {
	color: #EDEFF1;
	font-family: var(--cs-font-sans);
}
#header a:hover,
#header .nav-top-link:hover,
#footer a:hover {
	color: var(--cs-brand) !important;
}
/* El desplegable "Shop" se abre sobre fondo blanco (superficie clara,
   no la barra oscura del header): necesita su propio contraste,
   texto oscuro con hover en dorado — igual que cualquier enlace
   sobre superficie clara del sistema. */
#header .nav-dropdown a {
	color: var(--cs-ink-900) !important;
}
#header .nav-dropdown a:hover {
	color: var(--cs-brand-600) !important;
}

/* ── Enlaces ─────────────────────────────────────────────────── */
a { color: var(--cs-ink-900); }
a:hover { color: var(--cs-brand-600) !important; }
a:focus-visible, button:focus-visible {
	outline: 2px solid var(--cs-brand-600);
	outline-offset: 2px;
}

/* ── Imágenes de producto uniformes ─────────────────────────── */
.products .product-small .box-image,
.related .product-small .box-image,
.up-sells .product-small .box-image {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--cs-surface-2);
}
.products .product-small .box-image img,
.related .product-small .box-image img,
.up-sells .product-small .box-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* ── Badges de estado — cada color significa una cosa ───────── */
.cs-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	font-family: var(--cs-font-sans);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: var(--cs-radius-sm);
	white-space: nowrap;
}
.cs-badge--stock { background: var(--cs-ok-bg); color: var(--cs-ok); }
.cs-badge--low   { background: var(--cs-warn-bg); color: var(--cs-warn); }
.cs-badge--out   { background: var(--cs-danger-bg); color: var(--cs-danger); }
.cs-badge--new   { background: var(--cs-ink-900); color: #FFFFFF; }

/* Insignia "¡Oferta!" nativa de Flatsome oculta: la sustituye el
   bloque de precio PVP/mayorista, más preciso para este comprador. */
.badge-inner.on-sale {
	display: none !important;
}

/* ── Buscador ─────────────────────────────────────────────────
   PENDIENTE: el sistema pide un buscador ancho siempre visible,
   nunca tras un icono. Un primer intento de forzar el dropdown
   de Flatsome a quedar abierto rompía el menú principal (su JS de
   desbordamiento no lo esperaba) — revertido para no dejar la nav
   rota. Requiere una solución estructural (hook de header propio),
   no solo CSS. Ver nota en /Users/carlos/claude/audit_design.md. */
.searchform-wrapper input.search-field {
	font-family: var(--cs-font-sans);
}

/* Selector de idioma oculto: sin segundo idioma real configurado */
.trp-language-switcher {
	display: none !important;
}

/* Fondo alterno tipo marfil, para secciones que quieran destacar sobre el blanco */
.bg-ivory {
	background-color: var(--cs-surface-2) !important;
}