/**
 * WapuCommerce — Design System
 * ─────────────────────────────────────────────────────────────
 * Tokens canónicos del theme. Es el ÚNICO lugar que define
 * colores, tipografía, espaciado, radios y motion.
 *
 * Los otros CSS (archive, single-product, cart, account, header,
 * checkout, main) consumen estos tokens. NUNCA deben hardcodear
 * valores ni definir tokens propios.
 *
 * Reglas:
 *   - Colores: solo semánticos (ink, surface, success, danger, warning).
 *   - Tipografía: 3 familias (text=Manrope, display=Poppins, num=Inter).
 *   - Spacing: múltiplos de 8 (con 4 como sub-unidad).
 *   - Tamaños: rem (base 16px) para que todo sea responsive.
 *   - Radios: sm 8 / md 12 / lg 16 / xl 20 / pill 100px.
 *
 * @since 3.0.0
 */

:root {

	/* ═══ FUENTES ════════════════════════════════════════ */
	--ds-font-text:    'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--ds-font-display: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--ds-font-num:     'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* ═══ TYPE SCALE (rem, base 16px) ════════════════════ */
	--ds-fs-11: 0.6875rem;  /* 11px */
	--ds-fs-12: 0.75rem;    /* 12px */
	--ds-fs-13: 0.8125rem;  /* 13px */
	--ds-fs-14: 0.875rem;   /* 14px */
	--ds-fs-15: 0.9375rem;  /* 15px */
	--ds-fs-16: 1rem;       /* 16px */
	--ds-fs-18: 1.125rem;   /* 18px */
	--ds-fs-22: 1.375rem;   /* 22px */
	--ds-fs-28: 1.75rem;    /* 28px */
	--ds-fs-36: 2.25rem;    /* 36px */

	/* ═══ LINE HEIGHTS ═══════════════════════════════════ */
	--ds-lh-tight: 1.2;
	--ds-lh-snug:  1.35;
	--ds-lh-base:  1.5;
	--ds-lh-relax: 1.65;

	/* ═══ LETTER SPACING ═════════════════════════════════ */
	--ds-ls-tighter: -0.02em;
	--ds-ls-tight:   -0.01em;
	--ds-ls-normal:  0;
	--ds-ls-wide:    0.04em;
	--ds-ls-wider:   0.08em;

	/* ═══ COLORES — TEXTO ════════════════════════════════ */
	--ds-ink:   #111827;   /* más oscuro — títulos, precios */
	--ds-ink-2: #374151;   /* cuerpo fuerte */
	--ds-ink-3: #6b7280;   /* muted — labels, meta */
	--ds-ink-4: #9ca3af;   /* hint — placeholder, disabled */

	/* ═══ COLORES — SUPERFICIES ══════════════════════════ */
	--ds-surface:   #ffffff;  /* cards, modales */
	--ds-surface-2: #f9fafb;  /* bg de sección */
	--ds-surface-3: #f3f4f6;  /* bg de input/placeholder image */
	--ds-surface-4: #F2F2F7;  /* bg mobile app-like */

	/* ═══ COLORES — LÍNEAS ═══════════════════════════════ */
	--ds-line:        rgba(0, 0, 0, .06);
	--ds-line-strong: rgba(0, 0, 0, .12);

	/* ═══ COLORES — SEMÁNTICOS ═══════════════════════════ */
	--ds-accent:       #111827;
	--ds-accent-soft:  rgba(17, 24, 39, .06);

	--ds-success:      #166534;
	--ds-success-soft: #dcfce7;

	--ds-danger:       #991b1b;
	--ds-danger-soft:  #fee2e2;

	--ds-warning:      #854d0e;
	--ds-warning-soft: #fef3c7;

	--ds-info:         #1e40af;
	--ds-info-soft:    #dbeafe;

	/* Action — azul de acciones de compra/checkout (CTAs de commerce).
	   NO responde al drop: es consistente siempre para mantener la identidad
	   del checkout-button a través de cualquier drop activo.
	   Semánticamente distinto de --ds-info (mensajes informativos) aunque
	   en light coincidan en hex. */
	--ds-action:       #2563eb;
	--ds-action-hover: #1d4ed8;
	--ds-action-deep:  #1e40af;
	--ds-action-soft:  #dbeafe;

	/* ═══ SPACING — BASE 8 (+4 sub) ══════════════════════ */
	--ds-s-0:  0;
	--ds-s-1:  0.25rem;  /*  4px */
	--ds-s-2:  0.5rem;   /*  8px */
	--ds-s-3:  0.75rem;  /* 12px */
	--ds-s-4:  1rem;     /* 16px */
	--ds-s-5:  1.5rem;   /* 24px */
	--ds-s-6:  2rem;     /* 32px */
	--ds-s-7:  2.5rem;   /* 40px */
	--ds-s-8:  3rem;     /* 48px */
	--ds-s-9:  4rem;     /* 64px */
	--ds-s-10: 5rem;     /* 80px — secciones grandes */

	/* ═══ RADII ══════════════════════════════════════════ */
	--ds-r-xs:   0.25rem; /*  4px */
	--ds-r-sm:   0.5rem;  /*  8px */
	--ds-r-md:   0.75rem; /* 12px */
	--ds-r-lg:   1rem;    /* 16px */
	--ds-r-xl:   1.25rem; /* 20px */
	--ds-r-2xl:  1.5rem;  /* 24px */
	--ds-r-pill: 100px;

	/* ═══ SHADOWS ════════════════════════════════════════ */
	--ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
	--ds-shadow-md: 0 2px 8px rgba(0, 0, 0, .06);
	--ds-shadow-lg: 0 6px 24px rgba(0, 0, 0, .08);
	--ds-shadow-xl: 0 16px 48px rgba(0, 0, 0, .10);

	/* ═══ MOTION ═════════════════════════════════════════ */
	--ds-ease:     cubic-bezier(.22, 1, .36, 1);
	--ds-ease-in:  cubic-bezier(.4, 0, 1, 1);
	--ds-ease-out: cubic-bezier(0, 0, .2, 1);
	--ds-dur-fast: 120ms;
	--ds-dur:      180ms;
	--ds-dur-slow: 280ms;

	/* ═══ Z-INDEX ════════════════════════════════════════ */
	--ds-z-base:    1;
	--ds-z-dropdown: 100;
	--ds-z-sticky:   200;
	--ds-z-overlay:  900;
	--ds-z-modal:   1000;
	--ds-z-toast:   1200;

	/* ═══ BREAKPOINTS (para usar con clamp si se requieren) ═ */
	--ds-bp-sm: 480px;
	--ds-bp-md: 768px;
	--ds-bp-lg: 1024px;
	--ds-bp-xl: 1440px;


	/* ═══════════════════════════════════════════════════════
	 * ALIASES para tokens legacy.
	 * Mantienen compatibilidad con CSS existentes sin tocarlos.
	 * A medida que migramos, estos pueden ir desapareciendo.
	 * ═══════════════════════════════════════════════════════ */

	/* Fuentes legacy */
	--font-sans:    var(--ds-font-text);
	--font-display: var(--ds-font-display);

	/* Colores wapu-* */
	--wapu-black:       var(--ds-ink);
	--wapu-text-muted:  var(--ds-ink-3);
	--wapu-white:       var(--ds-surface);
	--wapu-bg:          var(--ds-surface-2);
	--wapu-bg-light:    var(--ds-surface-2);
	--wapu-border:      var(--ds-line-strong);
	--wapu-gray-100:    var(--ds-surface-3);
	--wapu-gray-200:    #e5e7eb;
	--wapu-gray-300:    #d1d5db;
	--wapu-brand-color: var(--ds-ink-3);
	--wapu-hint:        var(--ds-ink-4);
	--wapu-success:     var(--ds-success);
	--wapu-warning:     #eab308;
	--wapu-danger:      var(--ds-danger);
	--wapu-danger-bg:   var(--ds-danger-soft);
	--wapu-success-bg:  var(--ds-success-soft);
	--wapu-warning-bg:  var(--ds-warning-soft);
	--wapu-btn-dark:    var(--ds-ink);
	--wapu-action:      var(--ds-accent);
	--wapu-active:      var(--ds-accent);
	--wapu-active-bg:   var(--ds-accent-soft);
	--wapu-mobile-bg:   var(--ds-surface-4);

	/* Tokens --sp-* del single-product */
	--sp-font-ui:   var(--ds-font-display);
	--sp-font-body: var(--ds-font-text);
	--sp-font-num:  var(--ds-font-num);
	--sp-black:     var(--ds-ink);
	--sp-white:     var(--ds-surface);
	--sp-bg:        var(--ds-surface-2);
	--sp-gray-50:   var(--ds-surface-2);
	--sp-gray-100:  var(--ds-surface-3);
	--sp-gray-200:  #e5e7eb;
	--sp-gray-400:  var(--ds-ink-4);
	--sp-gray-600:  var(--ds-ink-3);
	--sp-gray-800:  var(--ds-ink-2);
	--sp-success:   var(--ds-success);
	--sp-sale:      var(--ds-danger);
	--sp-r:         var(--ds-r-lg);
	--sp-r-sm:      var(--ds-r-sm);
	--sp-r-pill:    var(--ds-r-pill);
	--sp-ease:      var(--ds-dur-slow) var(--ds-ease);

	/* iOS font legacy — ahora usa text */
	--ios-font:  var(--ds-font-text);
	--ios-bg:    var(--ds-surface-4);
	--ios-card:  var(--ds-surface);
	--ios-label: var(--ds-ink);
}


/* ═══════════════════════════════════════════════════════════
 *  BASE — aplicar fuente text a todo el body
 *  Las overrides específicas (display, num) las hacen los
 *  componentes con clases.
 * ═══════════════════════════════════════════════════════════ */

html {
	font-family: var(--ds-font-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body {
	font-family: var(--ds-font-text);
	font-size: var(--ds-fs-14);
	line-height: var(--ds-lh-base);
	color: var(--ds-ink);
}

/* Números en Inter por default. Proportional (natural en línea).
 * Para alineación de columna (summaries, tablas), usar .wapu-tabular. */
.woocommerce-Price-amount,
.woocommerce-Price-amount bdi,
.amount,
.amount bdi,
.wapu-num,
.wapu-price__current,
.wapu-price__old,
.wapu-price__cents,
.wapu-price__from {
	font-family: var(--ds-font-num) !important;
	letter-spacing: var(--ds-ls-tight);
}

/* Utility: activa tabular-nums donde sí se necesita (summaries, tablas, orders)
 *
 * Aplicación manual:    <div class="wapu-tabular">...</div>
 * Aplicación automática: listamos aquí los contextos conocidos del theme
 *                        que necesitan alineación de columna.
 */
.wapu-tabular,
.wapu-tabular .woocommerce-Price-amount,
.wapu-tabular .amount,
.wapu-tabular bdi,
/* Cart & checkout summaries — columna derecha de precios */
.woocommerce-checkout-review-order-table,
.woocommerce-checkout-review-order-table .woocommerce-Price-amount,
.woocommerce-checkout-review-order-table .amount,
.cart_totals,
.cart_totals .woocommerce-Price-amount,
.cart_totals .amount,
.wapu-checkout__summary,
.wapu-checkout__summary .woocommerce-Price-amount,
.wapu-checkout__summary .amount,
/* Order totals / thankyou / view-order */
.woocommerce-order-details,
.woocommerce-order-details .woocommerce-Price-amount,
.woocommerce-order-overview,
.woocommerce-order-overview .woocommerce-Price-amount,
/* Account orders list — columna de totales */
.wapu-account-orders,
.wapu-account-orders .woocommerce-Price-amount,
.wapu-account-orders .amount,
/* Cart items — subtotales y totales */
.wapu-cart__totals,
.wapu-cart__totals .woocommerce-Price-amount,
.wapu-cart-item__subtotal,
.wapu-cart-item__subtotal .woocommerce-Price-amount,
/* Cart-edit-modal — precio unitario */
.wapu-cart-edit-modal__price,
.wapu-cart-edit-modal__price .woocommerce-Price-amount {
	font-variant-numeric: tabular-nums;
}

/* Títulos de sección — display font por default (peso 500 "medium") */
.wapu-display,
h1.wapu-title,
h2.wapu-title,
h3.wapu-title {
	font-family: var(--ds-font-display);
	font-weight: 500;
	letter-spacing: var(--ds-ls-tight);
	line-height: var(--ds-lh-tight);
}


/* ═══════════════════════════════════════════════════════════
 *  UTILIDADES TIPOGRÁFICAS
 *  Clases opcionales para aplicar sizes y pesos del sistema.
 * ═══════════════════════════════════════════════════════════ */

/* Text (body copy, UI) */
.ds-t-body-lg  { font-family: var(--ds-font-text); font-size: var(--ds-fs-16); font-weight: 400; line-height: var(--ds-lh-relax); }
.ds-t-body-md  { font-family: var(--ds-font-text); font-size: var(--ds-fs-14); font-weight: 400; line-height: var(--ds-lh-base); }
.ds-t-body-sm  { font-family: var(--ds-font-text); font-size: var(--ds-fs-13); font-weight: 400; line-height: var(--ds-lh-snug); }
.ds-t-body-xs  { font-family: var(--ds-font-text); font-size: var(--ds-fs-12); font-weight: 400; line-height: var(--ds-lh-snug); }
.ds-t-body-strong { font-family: var(--ds-font-text); font-weight: 500; letter-spacing: var(--ds-ls-tight); }

/* Labels (uppercase, tight) */
.ds-t-label {
	font-family: var(--ds-font-text);
	font-size: var(--ds-fs-12);
	font-weight: 500;
	letter-spacing: var(--ds-ls-wide);
	text-transform: uppercase;
	color: var(--ds-ink-3);
}

/* Display (h1, h2, h3)
 * Default 500 "medium" para look editorial refinado.
 * h1/h2 suben a 600 donde necesitan más presencia — usar --strong variant. */
.ds-t-display-xl { font-family: var(--ds-font-display); font-size: var(--ds-fs-36); font-weight: 500; letter-spacing: var(--ds-ls-tighter); line-height: var(--ds-lh-tight); }
.ds-t-display-lg { font-family: var(--ds-font-display); font-size: var(--ds-fs-28); font-weight: 500; letter-spacing: var(--ds-ls-tighter); line-height: var(--ds-lh-tight); }
.ds-t-display-md { font-family: var(--ds-font-display); font-size: var(--ds-fs-22); font-weight: 500; letter-spacing: var(--ds-ls-tight); line-height: var(--ds-lh-snug); }
.ds-t-display-sm { font-family: var(--ds-font-display); font-size: var(--ds-fs-18); font-weight: 500; letter-spacing: var(--ds-ls-tight); line-height: var(--ds-lh-snug); }
/* Strong variants — para h1/h2 donde necesitan más peso visual */
.ds-t-display-xl-strong { font-family: var(--ds-font-display); font-size: var(--ds-fs-36); font-weight: 600; letter-spacing: var(--ds-ls-tighter); line-height: var(--ds-lh-tight); }
.ds-t-display-lg-strong { font-family: var(--ds-font-display); font-size: var(--ds-fs-28); font-weight: 600; letter-spacing: var(--ds-ls-tighter); line-height: var(--ds-lh-tight); }
.ds-t-display-md-strong { font-family: var(--ds-font-display); font-size: var(--ds-fs-22); font-weight: 600; letter-spacing: var(--ds-ls-tight); line-height: var(--ds-lh-snug); }

/* Números (precios, cantidades, porcentajes) — proportional por default */
.ds-t-num-xl { font-family: var(--ds-font-num); font-size: var(--ds-fs-28); font-weight: 700; letter-spacing: var(--ds-ls-tighter); line-height: 1; }
.ds-t-num-lg { font-family: var(--ds-font-num); font-size: var(--ds-fs-18); font-weight: 700; letter-spacing: var(--ds-ls-tight); line-height: 1.1; }
.ds-t-num-md { font-family: var(--ds-font-num); font-size: var(--ds-fs-14); font-weight: 600; letter-spacing: var(--ds-ls-tight); line-height: 1.2; }
.ds-t-num-sm { font-family: var(--ds-font-num); font-size: var(--ds-fs-12); font-weight: 500; }
.ds-t-num-tag { font-family: var(--ds-font-num); font-size: var(--ds-fs-11); font-weight: 600; font-variant-numeric: tabular-nums; }


/* ═══════════════════════════════════════════════════════════
 *  COMPONENTES BASE — botones, inputs, pills
 *  Reutilizables via clases .wapu-btn, .wapu-input, .wapu-pill.
 * ═══════════════════════════════════════════════════════════ */

.wapu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ds-s-2);
	padding: var(--ds-s-3) var(--ds-s-5);
	border-radius: var(--ds-r-pill);
	font-family: var(--ds-font-text);
	font-size: var(--ds-fs-14);
	font-weight: 600;
	letter-spacing: var(--ds-ls-tight);
	line-height: 1;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: transform var(--ds-dur) var(--ds-ease),
	            background var(--ds-dur) var(--ds-ease),
	            opacity var(--ds-dur) var(--ds-ease);
	white-space: nowrap;
	user-select: none;
}
.wapu-btn--primary { background: var(--ds-accent); color: var(--ds-surface); }
.wapu-btn--primary:hover:not(:disabled) { opacity: .9; }
.wapu-btn--secondary { background: transparent; color: var(--ds-ink); border: 0.5px solid var(--ds-line-strong); }
.wapu-btn--secondary:hover:not(:disabled) { background: var(--ds-surface-3); }
.wapu-btn--ghost { background: transparent; color: var(--ds-ink); padding-left: var(--ds-s-3); padding-right: var(--ds-s-3); }
.wapu-btn--ghost:hover:not(:disabled) { background: var(--ds-surface-3); }
.wapu-btn:active:not(:disabled) { transform: scale(.97); }
.wapu-btn:disabled { opacity: .5; cursor: not-allowed; }
.wapu-btn--sm { padding: var(--ds-s-2) var(--ds-s-4); font-size: var(--ds-fs-13); }
.wapu-btn--lg { padding: var(--ds-s-4) var(--ds-s-6); font-size: var(--ds-fs-15); }


.wapu-input {
	width: 100%;
	height: 2.75rem;              /* 44px — touch friendly */
	padding: 0 var(--ds-s-3);
	border-radius: var(--ds-r-md);
	border: 0.5px solid var(--ds-line-strong);
	background: var(--ds-surface);
	font-family: var(--ds-font-text);
	font-size: var(--ds-fs-14);
	color: var(--ds-ink);
	line-height: 1;
	transition: border-color var(--ds-dur) var(--ds-ease),
	            box-shadow var(--ds-dur) var(--ds-ease);
	outline: none;
}
.wapu-input:focus {
	border-color: var(--ds-accent);
	box-shadow: 0 0 0 3px var(--ds-accent-soft);
}
.wapu-input::placeholder { color: var(--ds-ink-4); }
.wapu-input:disabled { opacity: .5; cursor: not-allowed; }


.wapu-field {
	display: flex;
	flex-direction: column;
	gap: var(--ds-s-1);
}
.wapu-field__label {
	font-family: var(--ds-font-text);
	font-size: var(--ds-fs-12);
	font-weight: 500;
	color: var(--ds-ink-2);
	letter-spacing: var(--ds-ls-tight);
}


.wapu-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--ds-s-1);
	padding: var(--ds-s-1) var(--ds-s-3);
	border-radius: var(--ds-r-pill);
	font-family: var(--ds-font-text);
	font-size: var(--ds-fs-12);
	font-weight: 500;
	letter-spacing: var(--ds-ls-tight);
	background: var(--ds-surface);
	border: 0.5px solid var(--ds-line-strong);
	color: var(--ds-ink);
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--ds-dur) var(--ds-ease),
	            border-color var(--ds-dur) var(--ds-ease);
}
.wapu-pill:hover { border-color: var(--ds-ink-4); }
.wapu-pill--active { background: var(--ds-ink); color: var(--ds-surface); border-color: var(--ds-ink); }


/* Badges semánticos (sale, sold out, new, pre-order) */
.wapu-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px var(--ds-s-2);
	border-radius: var(--ds-r-pill);
	font-family: var(--ds-font-num);
	font-size: var(--ds-fs-11);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--ds-ls-normal);
	line-height: 1.4;
}
.wapu-badge--success { background: var(--ds-success-soft); color: var(--ds-success); }
.wapu-badge--danger  { background: var(--ds-danger-soft);  color: var(--ds-danger); }
.wapu-badge--warning { background: var(--ds-warning-soft); color: var(--ds-warning); }
.wapu-badge--info    { background: var(--ds-info-soft);    color: var(--ds-info); }
.wapu-badge--neutral { background: var(--ds-surface-3);    color: var(--ds-ink-2); }


/* ═══════════════════════════════════════════════════════════
 *  RESPONSIVE — ajustes del ROOT
 *  En mobile la unidad base no cambia (16px), pero los
 *  componentes que usen clamp() pueden responder solos.
 * ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
	:root {
		--ds-fs-36: 2rem;      /* 32px */
		--ds-fs-28: 1.5rem;    /* 24px */
		--ds-fs-22: 1.25rem;   /* 20px */
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--ds-dur-fast: 0ms;
		--ds-dur:      0ms;
		--ds-dur-slow: 0ms;
	}
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}


/* ═══════════════════════════════════════════════════════════
 *  DARK MODE
 *
 *  Estrategia: los tokens de COLOR se redefinen; el resto
 *  (fuentes, spacing, radios, motion) se mantiene igual.
 *
 *  Trigger único: <html data-theme="dark"> — opt-in manual del user
 *  vía .wapu-theme-toggle. No seguimos prefers-color-scheme del OS:
 *  en ecommerce preferimos experiencia predecible y luminosa por
 *  default para que las fotos de producto luzcan bien. Dark es una
 *  feature consciente, no un default sorpresivo.
 * ═══════════════════════════════════════════════════════════ */

/* Override manual — único activador de dark mode */
:root[data-theme="dark"] {
	--ds-ink:   #f9fafb;
	--ds-ink-2: #e5e7eb;
	--ds-ink-3: #9ca3af;
	--ds-ink-4: #6b7280;
	--ds-surface:   #0a0a0a;
	--ds-surface-2: #000000;
	--ds-surface-3: #1a1a1a;
	--ds-surface-4: #000000;
	--ds-line:        rgba(255, 255, 255, .08);
	--ds-line-strong: rgba(255, 255, 255, .16);
	--ds-accent:      #f9fafb;
	--ds-accent-soft: rgba(249, 250, 251, .08);
	--ds-success:      #4ade80;
	--ds-success-soft: rgba(74, 222, 128, .12);
	--ds-danger:       #fca5a5;
	--ds-danger-soft:  rgba(252, 165, 165, .10);
	--ds-warning:      #fbbf24;
	--ds-warning-soft: rgba(251, 191, 36, .12);
	--ds-info:         #93c5fd;
	--ds-info-soft:    rgba(147, 197, 253, .12);

	/* Action en dark — shift a tonos más claros para contraste sobre negro */
	--ds-action:       #3b82f6;
	--ds-action-hover: #60a5fa;
	--ds-action-deep:  #2563eb;
	--ds-action-soft:  rgba(59, 130, 246, .14);

	--wapu-black:       var(--ds-ink);
	--wapu-white:       var(--ds-surface);
	--wapu-text-muted:  var(--ds-ink-3);
	--wapu-bg:          var(--ds-surface-2);
	--wapu-bg-light:    var(--ds-surface-2);
	--wapu-border:      var(--ds-line-strong);
	--wapu-gray-100:    var(--ds-surface-3);
	--wapu-gray-200:    #333;
	--wapu-gray-300:    #444;
	--wapu-hint:        var(--ds-ink-4);
	--wapu-btn-dark:    var(--ds-ink);
	--wapu-brand-color: var(--ds-ink-3);
	--wapu-mobile-bg:   var(--ds-surface-2);

	--sp-black:     var(--ds-ink);
	--sp-white:     var(--ds-surface);
	--sp-bg:        var(--ds-surface-2);
	--sp-gray-50:   var(--ds-surface-3);
	--sp-gray-100:  var(--ds-surface-3);
	--sp-gray-200:  #333;
	--sp-gray-400:  var(--ds-ink-4);
	--sp-gray-600:  var(--ds-ink-3);
	--sp-gray-800:  var(--ds-ink-2);

	--ios-bg:    var(--ds-surface-2);
	--ios-card:  var(--ds-surface);
	--ios-label: var(--ds-ink);

	color-scheme: dark;
}

/* Transición suave al cambiar de tema manualmente */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
	transition: background-color var(--ds-dur) var(--ds-ease),
	            color var(--ds-dur) var(--ds-ease),
	            border-color var(--ds-dur) var(--ds-ease),
	            box-shadow var(--ds-dur) var(--ds-ease) !important;
}

/* ═══════════════════════════════════════════════════════════
 *  DARK MODE — Fixes visuales P0
 *  Las imágenes con fondo blanco (PNG sin transparencia) son
 *  el problema #1 en dark — blasts of white contra el negro.
 *  mix-blend-mode: multiply hace que el blanco se funda con
 *  el fondo oscuro automáticamente, sin tocar el asset.
 * ═══════════════════════════════════════════════════════════ */

/* Wrappers de imagen tomen color de la card (no blanco) */
:root[data-theme="dark"] .wapu-product-card__img-wrap,
:root[data-theme="dark"] .wapu-sw__wrap,
:root[data-theme="dark"] .wapu-single__main-image,
:root[data-theme="dark"] .wapu-single__thumb,
:root[data-theme="dark"] .wapu-cart-item__thumb,
:root[data-theme="dark"] .wapu-single__related-thumb {
	background: var(--ds-surface-3);
}

/* Imágenes de productos con fondo blanco → multiply funde el blanco
   con el oscuro del wrap sin tocar colores reales del producto. */
:root[data-theme="dark"] .wapu-product-card__img-wrap img,
:root[data-theme="dark"] .wapu-sw__img,
:root[data-theme="dark"] .wapu-single__main-img,
:root[data-theme="dark"] .wapu-single__thumb img {
	mix-blend-mode: multiply;
	filter: brightness(1.02) contrast(1.02);
}

/* Border sutil en cards dark para definir límite sin sombras */
:root[data-theme="dark"] .wapu-product-card {
	border: 0.5px solid rgba(255, 255, 255, 0.05);
}


/* ═══════════════════════════════════════════════════════════
 *  THEME TOGGLE — botón para switch manual
 * ═══════════════════════════════════════════════════════════ */

.wapu-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--ds-r-pill);
	background: transparent;
	border: none;
	color: var(--ds-ink);
	cursor: pointer;
	padding: 0;
	transition: background var(--ds-dur) var(--ds-ease);
}
.wapu-theme-toggle:hover {
	background: var(--ds-surface-3);
}
.wapu-theme-toggle svg {
	width: 18px;
	height: 18px;
}

/* Mostrar solo el icono correspondiente al tema opuesto
   (estamos en light → mostramos luna; estamos en dark → mostramos sol) */
.wapu-theme-toggle__sun  { display: none; }
.wapu-theme-toggle__moon { display: block; }
:root[data-theme="dark"] .wapu-theme-toggle__sun  { display: block; }
:root[data-theme="dark"] .wapu-theme-toggle__moon { display: none; }


/* ═══════════════════════════════════════════════════════════
 *  PREFERENCES ROW + SEGMENTED CONTROL
 *  Usados en /mi-cuenta/ para configurar tema y futuros settings.
 * ═══════════════════════════════════════════════════════════ */

.wapu-account-logged__preferences {
	max-width: 1180px;
	margin: var(--ds-s-8) auto 0;
	padding: 0 var(--ds-s-5);
}

.wapu-account-logged__preferences-title {
	font-family: var(--ds-font-display);
	font-size: var(--ds-fs-22);
	font-weight: 600;
	color: var(--ds-ink);
	letter-spacing: var(--ds-ls-tight);
	margin: 0 0 var(--ds-s-4);
	line-height: var(--ds-lh-tight);
}

.wapu-account-logged__preferences-list {
	background: var(--ds-surface);
	border: 0.5px solid var(--ds-line);
	border-radius: var(--ds-r-lg);
	overflow: hidden;
}

.wapu-pref-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ds-s-4);
	padding: var(--ds-s-4) var(--ds-s-5);
	border-bottom: 0.5px solid var(--ds-line);
}
.wapu-pref-row:last-child { border-bottom: 0; }

.wapu-pref-row__copy {
	display: flex;
	flex-direction: column;
	gap: var(--ds-s-1);
	min-width: 0;
	flex: 1;
}

.wapu-pref-row__title {
	font-family: var(--ds-font-text);
	font-size: var(--ds-fs-14);
	font-weight: 500;
	color: var(--ds-ink);
	letter-spacing: var(--ds-ls-tight);
	line-height: var(--ds-lh-snug);
}

.wapu-pref-row__desc {
	font-family: var(--ds-font-text);
	font-size: var(--ds-fs-12);
	font-weight: 400;
	color: var(--ds-ink-3);
	letter-spacing: var(--ds-ls-tight);
	line-height: var(--ds-lh-base);
}

.wapu-pref-row__control {
	flex-shrink: 0;
}

/* ─── Segmented control (Claro · Oscuro · Auto) ─── */
.wapu-theme-segment {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	background: var(--ds-surface-3);
	border-radius: var(--ds-r-md);
}

.wapu-theme-segment__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ds-s-1);
	padding: var(--ds-s-2) var(--ds-s-3);
	border: none;
	border-radius: var(--ds-r-sm);
	background: transparent;
	color: var(--ds-ink-3);
	font-family: var(--ds-font-text);
	font-size: var(--ds-fs-12);
	font-weight: 500;
	letter-spacing: var(--ds-ls-tight);
	line-height: 1;
	cursor: pointer;
	transition: background var(--ds-dur) var(--ds-ease),
	            color var(--ds-dur) var(--ds-ease),
	            box-shadow var(--ds-dur) var(--ds-ease);
	white-space: nowrap;
}

.wapu-theme-segment__btn:hover {
	color: var(--ds-ink);
}

.wapu-theme-segment__btn[aria-checked="true"] {
	background: var(--ds-surface);
	color: var(--ds-ink);
	box-shadow: var(--ds-shadow-sm);
}

.wapu-theme-segment__btn svg {
	flex-shrink: 0;
}

@media (max-width: 600px) {
	.wapu-pref-row {
		flex-direction: column;
		align-items: stretch;
		gap: var(--ds-s-3);
	}
	.wapu-pref-row__control {
		width: 100%;
	}
	.wapu-theme-segment {
		width: 100%;
	}
	.wapu-theme-segment__btn {
		flex: 1;
	}
	.wapu-theme-segment__btn span {
		display: none;
	}
	.wapu-theme-segment__btn svg {
		width: 18px;
		height: 18px;
	}
}


/* ═══════════════════════════════════════════════════════════
 *  P0 — Card spacing cohesion
 *  El gap entre swatch row e info estaba muy espacioso, la
 *  card se sentía rota en dos bloques.
 * ═══════════════════════════════════════════════════════════ */

.wapu-product-card {
	gap: var(--ds-s-2);              /* 8px entre bloques dentro de la card */
}
.wapu-product-card__info {
	gap: var(--ds-s-1);              /* 4px entre brand/name/price */
}


/* ═══════════════════════════════════════════════════════════
 *  P1 — Jerarquía de precio "Desde $X"
 *  "Desde" era co-protagonista del número. Ahora es meta-dato.
 * ═══════════════════════════════════════════════════════════ */

.wapu-price__from {
	font-family: var(--ds-font-text);
	font-size: var(--ds-fs-11);
	font-weight: 400;
	color: var(--ds-ink-4);
	letter-spacing: 0;
	margin-right: var(--ds-s-1);
	text-transform: lowercase;
	line-height: 1;
}

/* El precio siempre protagonista */
.wapu-price--card .wapu-price__current,
.wapu-price--mini .wapu-price__current,
.wapu-price--related .wapu-price__current {
	font-family: var(--ds-font-num);
	font-size: var(--ds-fs-14);
	font-weight: 600;
	color: var(--ds-ink);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--ds-ls-tight);
}


/* ═══════════════════════════════════════════════════════════
 *  P1 — Nav categorías: color principal en vez de muted
 *  Las categorías son navegación primaria, no meta info.
 *  Usamos ink con opacity 0.75 para dar respiro sin hacerlas
 *  secundarias.
 * ═══════════════════════════════════════════════════════════ */

.nav-menu a,
.nav-link,
.nav-menu__link,
.wapu-header__nav-link {
	color: var(--ds-ink);
	font-weight: 500;
	letter-spacing: 0.02em;
	opacity: 0.72;
	transition: opacity var(--ds-dur) var(--ds-ease);
}
.nav-menu a:hover,
.nav-link:hover,
.nav-menu__link:hover,
.wapu-header__nav-link:hover {
	opacity: 1;
}
.nav-menu .current-menu-item a,
.nav-link.is-active {
	opacity: 1;
	font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════
 *  DROPS BRIDGE — Playground integration
 *
 *  Cuando hay drop activo de Playground, pisamos SOLO los tokens
 *  de acento y radius. NO tocamos tipografías, superficies, ni
 *  tokens semánticos.
 *
 *  Filosofía: drops dan firma puntual (botones + accent), no
 *  repintan la tienda. Legibilidad y estructura son neutras.
 *
 *  Activación: el plugin wapu-playground pone [data-wapu-drop] en
 *  el <html> cuando hay drop activo. Sin drop activo, el tema usa
 *  sus tokens por default.
 *
 *  Requiere companion change en el plugin wapu-playground (repo
 *  aparte): inyectar data-wapu-drop="<id>" en <html> cuando hay
 *  drop activo. Sin ese cambio, este bloque es no-op (los tokens
 *  --wp-* no existen → fallback al default del tema vía var()).
 *
 *  @since 3.1.0
 * ═══════════════════════════════════════════════════════════ */

:root[data-wapu-drop] {
	--ds-accent:      var(--wp-primary, #111827);
	--ds-accent-soft: var(--wp-accent-soft, rgba(17, 24, 39, .06));
	--ds-r-lg:        var(--wp-radius, 16px);
	--ds-r-sm:        var(--wp-radius-sm, 8px);

	/* INTENCIONALMENTE NO tocamos:
	   --ds-font-text, --ds-font-display, --ds-font-num   (legibilidad)
	   --ds-ink, --ds-ink-2, --ds-ink-3, --ds-ink-4       (textos)
	   --ds-surface, --ds-surface-2, --ds-surface-3       (fondos)
	   --ds-success, --ds-danger, --ds-warning            (semántica universal)
	   --ds-line, --ds-line-strong                        (bordes)
	   --ds-s-* (spacings)                                (grid estructural)
	*/
}