/* ==========================================================================
   tienda-365 — base.css
   Variables, reset, tipografía, layout primitivo y componentes compartidos
   (header, footer, botones, inputs, badges, cards). Mobile-first.
   ========================================================================== */

:root {
	--color-bg: #0a0a0a;
	--color-bg-elevated: #141414;
	--color-border: #d9a300;
	--color-border-soft: rgba(217, 163, 0, 0.35);
	--color-accent: #ffd400;
	--color-accent-dark: #c79743;
	--color-text: #f5f5f5;
	--color-text-muted: #b3b3b3;
	--color-danger: #ff5a5a;
	--color-success: #4caf50;

	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 18px;

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;

	--container-max: 1320px;
	--font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--shadow-glow: 0 0 0 1px var(--color-border-soft), 0 4px 18px rgba(217, 163, 0, 0.12);
	--shadow-glow-strong: 0 0 0 1px var(--color-accent), 0 0 24px rgba(255, 212, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.4);
	--text-glow: 0 0 12px rgba(255, 212, 0, 0.55), 0 0 32px rgba(255, 212, 0, 0.25);
	--transition-fast: 150ms ease;
	--transition-smooth: 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
	:root { --transition-fast: 0ms; --transition-smooth: 0ms; }
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---- Reset mínimo ---- */
*, *::before, *::after { box-sizing: border-box; }
html {
	-webkit-text-size-adjust: 100%;
	/* Cursor de "pelota de tenis" con el brillo dorado del branding, en vez
	   de la flechita del sistema — dibujado en SVG (sin archivo externo).
	   El navegador le pone su propio cursor (pointer) a los links, botones
	   y campos de formulario por default, que le gana a esto por herencia
	   — por eso más abajo se los hace heredar explícitamente. */
	cursor:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18' fill='none' stroke='%23ffd400' stroke-width='1.5' opacity='0.35'/%3E%3Ccircle cx='20' cy='20' r='15' fill='%23ffd400' opacity='0.22'/%3E%3Ccircle cx='20' cy='20' r='10.5' fill='%23d4ff33' stroke='%23a6c400' stroke-width='1'/%3E%3Cpath d='M11 12 Q20 20 11 28' stroke='%23ffffff' stroke-width='1.6' fill='none'/%3E%3Cpath d='M29 12 Q20 20 29 28' stroke='%23ffffff' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") 20 20,
		auto;
}
body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-base);
	font-size: 16px;
	line-height: 1.5;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; cursor: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
/* El navegador le pone fondo blanco/gris, borde y padding a <button> por
   defecto — sin esto, cualquier botón sin estilo propio explícito (ej. el
   de "Mi carrito") se ve como una cajita blanca en vez de heredar el fondo
   oscuro del sitio. Los componentes que sí quieren su propio fondo/borde
   (.btn, .carousel__nav button, etc.) lo redefinen ellos mismos después. */
button {
	font-family: inherit;
	cursor: inherit;
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	appearance: none;
}
input, select, textarea { font-family: inherit; font-size: 1rem; cursor: inherit; }
img { cursor: inherit; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-accent); }

/* Foco visible siempre (accesibilidad) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Layout ---- */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--space-4);
}
@media (min-width: 1024px) {
	.container { padding-inline: var(--space-6); }
}

/* Ninguna página debe scrollear horizontalmente */
html, body { overflow-x: hidden; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- Botones ----
   .button es la clase que pone WooCommerce por defecto (Añadir al carrito
   en las cards, "Ver carrito", etc.) — se une acá para que tenga el mismo
   estilo dorado y relleno que el resto de los botones del sitio en vez del
   look sin estilo del navegador. */
.btn,
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 44px;
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
	border: 1px solid transparent;
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-smooth), transform var(--transition-smooth);
}
.btn--primary,
.button {
	background: var(--color-accent);
	color: #111;
	box-shadow: 0 0 0 rgba(255, 212, 0, 0);
}
.btn--primary:hover,
.button:hover {
	background: #ffe14d;
	box-shadow: var(--shadow-glow-strong);
	transform: translateY(-1px);
}
.btn--primary:active,
.button:active { transform: translateY(0); }
.btn--secondary {
	background: transparent;
	color: var(--color-accent);
	border-color: var(--color-border);
}
.btn--secondary:hover { background: rgba(217, 163, 0, 0.08); border-color: var(--color-accent); box-shadow: 0 0 14px rgba(255, 212, 0, 0.2); transform: translateY(-1px); }
.btn--secondary:active { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn--block { width: 100%; }
.btn--sm { min-height: 36px; padding: var(--space-2) var(--space-4); font-size: 0.75rem; }

/* Glow sutil y constante en el CTA principal del hero (llama la atención sin ser un parpadeo molesto) */
@keyframes tienda365-pulse-glow {
	0%, 100% { box-shadow: 0 0 0 rgba(255, 212, 0, 0.25); }
	50% { box-shadow: 0 0 18px rgba(255, 212, 0, 0.45); }
}
.btn--glow { animation: tienda365-pulse-glow 2.4s ease-in-out infinite; }

/* ---- Inputs ---- */
.field {
	display: block;
	margin-bottom: var(--space-4);
}
.field__label {
	display: block;
	margin-bottom: var(--space-2);
	font-size: 0.85rem;
	color: var(--color-text-muted);
}
.field__input {
	width: 100%;
	min-height: 44px;
	padding: var(--space-3);
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-sm);
	color: var(--color-text);
}
.field__input:focus { border-color: var(--color-accent); }

/* ---- Cards con borde amarillo ---- */
.card {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-glow);
	transition: box-shadow var(--transition-smooth), border-color var(--transition-smooth), transform var(--transition-smooth);
}
a.card:hover,
.card--interactive:hover {
	border-color: var(--color-border);
	box-shadow: var(--shadow-glow-strong);
	transform: translateY(-3px);
}

/* ---- Texto con brillo neón (títulos destacados) ---- */
.glow-text {
	color: var(--color-accent);
	text-shadow: var(--text-glow);
}

/* ---- Scroll reveal: las secciones aparecen suavemente al entrar en pantalla.
   Sin JS, queda visible igual (progressive enhancement) — .js-reveal-ready
   lo agrega main.js recién cuando el IntersectionObserver está listo. ---- */
.js-reveal-ready .reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--transition-smooth), transform var(--transition-smooth);
}
.js-reveal-ready .reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ---- Badges ---- */
.badge-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}
.badge {
	display: inline-block;
	padding: var(--space-1) var(--space-3);
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.badge--sale { background: var(--color-accent); color: #111; }
.badge--out-of-stock { background: #3a3a3a; color: var(--color-text-muted); }
.badge--shipping { background: #1f6f3b; color: #fff; }
.badge--gift { background: var(--color-accent-dark); color: #111; }
/* ---- Cucardas administrables (CPT "Cucardas"): imagen posicionada sobre
   una esquina de la miniatura del producto (card del catálogo) o de la
   galería (PDP). El wrapper lo agregan hooks en inc/woocommerce.php sin
   sobrescribir el template de WooCommerce. ---- */
.tienda365-media-wrap { position: relative; }
.tienda365-cucarda {
	position: absolute;
	z-index: 5;
	width: 25%;
	max-width: 90px;
	height: auto;
	pointer-events: none;
}
.tienda365-cucarda--top-left { top: var(--space-2); left: var(--space-2); }
.tienda365-cucarda--top-right { top: var(--space-2); right: var(--space-2); }
.tienda365-cucarda--bottom-left { bottom: var(--space-2); left: var(--space-2); }
.tienda365-cucarda--bottom-right { bottom: var(--space-2); right: var(--space-2); }

.badge--black-friday {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #000;
	color: var(--color-accent);
	border: 2px solid var(--color-accent);
	border-radius: 50%;
	width: 64px; height: 64px;
	font-size: 0.65rem;
	text-align: center;
	line-height: 1.1;
}

/* ---- Barra promocional ---- */
.promo-bar {
	background: #111;
	color: var(--color-accent);
	font-size: 0.75rem;
	font-weight: 700;
	padding-block: var(--space-2);
}
.promo-bar__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}
.promo-bar__text { white-space: nowrap; }
.promo-bar__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
}
.promo-bar__menu li {
	position: relative;
	padding-inline: var(--space-3);
}
.promo-bar__menu li:first-child { padding-left: 0; }
.promo-bar__menu li:not(:last-child)::after {
	content: '|';
	position: absolute;
	right: 0;
	color: var(--color-border-soft);
	font-weight: 400;
}
.promo-bar__menu a {
	color: var(--color-text-muted);
	text-transform: uppercase;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.promo-bar__menu a:hover { color: var(--color-accent); }

/* ---- Header ---- */
.site-header {
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border-soft);
	position: sticky;
	top: 0;
	z-index: 40;
}
.site-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-4);
}
.site-header__logo img { max-height: 44px; width: auto; }
.site-header__search {
	flex: 1 1 auto;
	display: none;
}
@media (min-width: 1024px) {
	.site-header__search { display: flex; max-width: 480px; }
}
.site-header__search-form {
	display: flex;
	width: 100%;
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.site-header__search-form input[type="search"] {
	flex: 1;
	border: 0;
	background: var(--color-bg-elevated);
	color: var(--color-text);
	padding: var(--space-3);
}
.site-header__search-form button {
	background: var(--color-accent);
	color: #111;
	border: 0;
	padding-inline: var(--space-4);
	font-weight: 700;
}
.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}
.site-header__icon-link {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
	font-size: 0.7rem;
	color: var(--color-text-muted);
}
.site-header__icon-link:hover { color: var(--color-accent); }
.site-header__icon {
	display: block;
	width: 22px;
	height: 22px;
}
.site-header__icon-badge {
	position: absolute;
	top: -6px; right: -10px;
	background: var(--color-accent);
	color: #111;
	border-radius: 999px;
	font-size: 0.65rem;
	font-weight: 700;
	min-width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: 4px;
}

.site-nav { border-top: 1px solid var(--color-border-soft); }
.site-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: none;
	border: 0;
	color: var(--color-text);
	padding: var(--space-3) 0;
}
@media (min-width: 1024px) {
	.site-nav__toggle { display: none; }
}
/* Mientras el drawer mobile está abierto, el mismo botón ☰ pasa a flotar
   como ✕ fijo arriba de todo (el drawer ocupa toda la pantalla, así que
   no queda otro lugar visible para cerrar salvo tocar afuera/Escape). */
.site-nav__toggle[aria-expanded="true"] {
	position: fixed;
	top: var(--space-4);
	right: var(--space-4);
	z-index: 52;
	width: 44px; height: 44px;
	justify-content: center;
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border-soft);
	border-radius: 50%;
	padding: 0;
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-label { display: none; }
@media (min-width: 1024px) {
	.site-nav__toggle[aria-expanded="true"] { position: static; width: auto; height: auto; background: none; border: 0; border-radius: 0; }
}

/* ---- Drawer del menú mobile: hamburguesa que ocupa toda la pantalla,
   se desliza desde el costado (mismo patrón que el mini-cart/filtros).
   En desktop deja de ser un drawer y vuelve a ser la barra horizontal. ---- */
.site-nav__drawer {
	position: fixed;
	top: 0; right: 0;
	height: 100%;
	width: min(420px, 100%);
	background: var(--color-bg-elevated);
	border-left: 1px solid var(--color-border-soft);
	z-index: 51;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform var(--transition-fast), visibility var(--transition-fast);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}
.site-nav__drawer.is-open { transform: translateX(0); visibility: visible; }
.site-nav__menu {
	display: flex;
	flex-direction: column;
	/* El botón ✕ para cerrar queda flotando fijo arriba a la derecha
	   (top: var(--space-4) + 44px de alto) mientras el drawer está
	   abierto — sin este padding de arriba, el primer ítem del menú
	   queda tapado debajo del botón. */
	padding: 76px var(--space-4) var(--space-6);
}
.site-nav__menu a {
	display: block;
	padding: var(--space-3) 0;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.85rem;
	color: var(--color-text);
}
.site-nav__menu a:hover,
.site-nav__menu .current-menu-item > a {
	color: var(--color-accent);
}
.site-nav__item-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}
.site-nav__item-row a { flex: 1; }
.nav-mega__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	flex-shrink: 0;
	background: none;
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	transition: transform var(--transition-smooth);
}
.site-nav__menu li.has-mega.is-mega-open > .site-nav__item-row .nav-mega__toggle { transform: rotate(180deg); }

@media (min-width: 1024px) {
	.site-nav__drawer {
		position: static;
		height: auto;
		width: auto;
		background: none;
		border-left: 0;
		transform: none;
		visibility: visible;
		transition: none;
		overflow: visible;
		display: block;
	}
	.site-nav__menu {
		flex-direction: row;
		justify-content: center;
		gap: var(--space-5);
		padding: 0;
	}
	.site-nav__menu a {
		padding: var(--space-2) 0;
		font-size: 0.78rem;
	}
	.site-nav__item-row { gap: var(--space-1); }
	.nav-mega__toggle { display: none; }
}

/* ---- Mega-menú (flyer de categoría + grilla de marcas + franja de promos).
   Desktop: panel flotante al pasar el mouse. Mobile: acordeón dentro del
   drawer (misma clase .is-mega-open agregada por JS en ambos casos). ---- */
.nav-mega { display: none; }
.site-nav__menu li.has-mega.is-mega-open .nav-mega { display: block; }

/* Grilla de marcas: la usa "Comprá por marca" (home), la landing de
   categoría y el mega-menú del header (global, todas las páginas) — por eso
   vive acá y no en home.css. */
.brand-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
}
@media (min-width: 768px) {
	.brand-grid { grid-template-columns: repeat(4, 1fr); }
}
.brand-grid__item {
	padding: var(--space-4);
	text-align: center;
}
.brand-grid__item img { max-height: 32px; margin-inline: auto; }

.nav-mega__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-4) 0;
}
.nav-mega__row {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.nav-mega__visual {
	position: relative;
	display: block;
	min-height: 200px;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: #111;
}
.nav-mega__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nav-mega__brands .brand-grid { grid-template-columns: repeat(2, 1fr); }
.nav-mega__promos {
	border-top: 1px solid var(--color-border-soft);
	padding-top: var(--space-4);
}

/* ---- Franja de promos (hasta 3, ícono + texto + cuenta regresiva
   opcional). Usada en la home, la landing de categoría y dentro del
   mega-menú del header — por eso vive acá y no en home.css: el header
   (y su mega-menú) es global, aparece en todas las páginas. ---- */
.promo-strip {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-5) var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-glow-strong);
	background: var(--color-bg-elevated);
}
@media (min-width: 640px) {
	.promo-strip {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 0;
	}
}
/* .promo-strip__track solo existe en la home/landing (ver
   template-parts/promo-strip.php) — el mega-menú reusa .promo-strip con
   los ítems directamente adentro, sin track, así que "display: contents"
   por default no cambia nada ahí. Los ítems duplicados (.promo-strip__track-dup)
   solo se usan para el loop continuo en mobile (ver media query abajo). */
.promo-strip__track { display: contents; }
.promo-strip__track-dup { display: none; }
@media (max-width: 639px) {
	/* En mobile las 3 promos no entran en una fila normal — en vez de
	   apilarlas (se hacía muy largo), se muestran en una sola línea que
	   se desliza sola en loop, como una cinta. */
	.promo-strip {
		display: block;
		overflow: hidden;
		padding: var(--space-3) 0;
	}
	.promo-strip__track {
		display: flex;
		align-items: center;
		gap: var(--space-6);
		width: max-content;
		animation: tienda365-promo-scroll 14s linear infinite;
	}
	.promo-strip__track-dup {
		display: flex;
		align-items: center;
		gap: var(--space-6);
	}
	.promo-strip__item {
		flex: 0 0 auto;
		white-space: nowrap;
	}
	@keyframes tienda365-promo-scroll {
		from { transform: translateX(0); }
		to { transform: translateX(-50%); }
	}
	@media (prefers-reduced-motion: reduce) {
		.promo-strip { overflow-x: auto; }
		.promo-strip__track { animation: none; }
	}
}
.promo-strip__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-6);
}
@media (min-width: 640px) {
	.promo-strip__item { border-left: 1px solid var(--color-border-soft); }
	.promo-strip__item:first-child { border-left: 0; }
}
.promo-strip__icon {
	flex-shrink: 0;
	width: 32px; height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-accent);
}
.promo-strip__icon svg { width: 30px; height: 30px; }
.promo-strip__title {
	display: block;
	color: var(--color-accent);
	font-size: 0.9rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.promo-strip__text {
	font-size: 0.7rem;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
/* Dentro del mega-menú el panel ya tiene su propia caja con borde/glow
   (.nav-mega__inner) — acá la franja va sin caja propia para no duplicar. */
.nav-mega__promos .promo-strip {
	border: 0;
	box-shadow: none;
	background: none;
	border-radius: 0;
	padding: 0;
}
.promo-strip__countdown {
	display: flex;
	gap: var(--space-2);
	font-size: 0.75rem;
	color: var(--color-text);
	font-variant-numeric: tabular-nums;
}
.promo-strip__countdown strong { color: var(--color-accent); font-size: 0.95rem; }

@media (min-width: 1024px) {
	/* El panel siempre se ancla al mismo lugar (el borde izquierdo del
	   propio menú), sin importar qué categoría lo dispara — así no "salta"
	   de posición ni se corta cerca del borde derecho de la pantalla. */
	.site-nav__menu { position: relative; }
	.nav-mega {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 30;
		width: min(920px, 90vw);
		/* padding (no margin): el hueco visual queda DENTRO de .nav-mega, así
		   que sigue siendo parte del área con hover del <li> — si fuera
		   margin, ese hueco no tendría hover y el panel se cerraba al pasar
		   el mouse en diagonal desde el link hacia el panel. */
		padding-top: var(--space-3);
		opacity: 0;
		visibility: hidden;
		transform: translateY(8px);
		transition: opacity var(--transition-smooth), transform var(--transition-smooth), visibility var(--transition-smooth);
	}
	.site-nav__menu li.has-mega:hover .nav-mega,
	.site-nav__menu li.has-mega:focus-within .nav-mega,
	.site-nav__menu li.has-mega.is-mega-open .nav-mega {
		display: block;
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	.nav-mega__inner {
		background: var(--color-bg-elevated);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-glow-strong);
		padding: var(--space-5);
	}
	.nav-mega__row { flex-direction: row; gap: var(--space-5); }
	.nav-mega__visual { flex: 0 0 260px; min-height: 300px; }
	.nav-mega__brands { flex: 1; }
	.nav-mega__brands .brand-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Paginación (catálogo, blog, búsqueda). WooCommerce y WordPress core
   comparten la clase .page-numbers pero con markup distinto (<ul><li> vs.
   spans/links sueltos) — sin este bloque quedaba apilada verticalmente con
   el estilo por default del navegador. ---- */
.woocommerce-pagination,
.navigation.pagination {
	margin-block: var(--space-6);
}
.woocommerce-pagination ul.page-numbers,
.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	list-style: none;
	padding: 0;
	margin: 0;
}
/* a.page-numbers / span.page-numbers (no ".page-numbers" a secas): el <ul>
   que envuelve la lista en WooCommerce también lleva la clase "page-numbers"
   sin calificar, así que un selector sin "a"/"span" le pondría el mismo
   borde/caja a todo el contenedor completo. */
a.page-numbers,
span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--space-3);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	font-weight: 700;
	font-size: 0.85rem;
	transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}
a.page-numbers:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}
span.page-numbers.current {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: #111;
}
span.page-numbers.dots {
	border-color: transparent;
	color: var(--color-text-muted);
}

/* ---- Footer ---- */
.site-footer {
	border-top: 1px solid var(--color-border-soft);
	margin-top: var(--space-7);
	padding-block: var(--space-6);
}
.site-footer__grid {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.site-footer__grid { grid-template-columns: repeat(4, 1fr); }
}
.site-footer__heading {
	color: var(--color-accent);
	text-transform: uppercase;
	font-size: 0.85rem;
	margin-bottom: var(--space-3);
}
.site-footer__payment-icons,
.site-footer__shipping-icons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}
.site-footer__payment-icons img,
.site-footer__shipping-icons img {
	height: 24px;
	width: auto;
	background: #fff;
	border-radius: 4px;
	padding: 2px 4px;
}

/* ---- Drawer genérico (mini-cart, filtros) ---- */
.drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 50;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition-fast);
}
.drawer-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}
.drawer {
	position: fixed;
	top: 0; right: 0;
	height: 100%;
	width: min(420px, 100%);
	background: var(--color-bg-elevated);
	border-left: 1px solid var(--color-border-soft);
	z-index: 51;
	transform: translateX(100%);
	transition: transform var(--transition-fast);
	display: flex;
	flex-direction: column;
}
.drawer.is-open { transform: translateX(0); }
.drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4);
	border-bottom: 1px solid var(--color-border-soft);
}
.drawer__close {
	background: none;
	border: 0;
	color: var(--color-text);
	font-size: 1.5rem;
	line-height: 1;
	min-width: 44px;
	min-height: 44px;
}
.drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-4);
}
.drawer__footer {
	padding: var(--space-4);
	border-top: 1px solid var(--color-border-soft);
}
body.has-open-drawer { overflow: hidden; }
body.has-intro-splash { overflow: hidden; }

/* ---- Botón flotante de WhatsApp ---- */
.whatsapp-float {
	position: fixed;
	right: var(--space-4);
	bottom: var(--space-4);
	z-index: 45;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--transition-smooth);
}
.whatsapp-float:hover { transform: scale(1.06); }

/* Botón "volver arriba" — mismo lugar/tamaño que el de WhatsApp pero del
   otro lado, con los colores propios del sitio en vez de verde. Aparece
   solo después de scrollear (ver .js-back-to-top en main.js). */
.back-to-top {
	position: fixed;
	left: var(--space-4);
	bottom: var(--space-4);
	z-index: 45;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-accent);
	color: var(--color-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-glow-strong);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--transition-smooth), transform var(--transition-smooth), visibility var(--transition-smooth);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { transform: translateY(-2px); }

/* Utilidades */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.text-muted { color: var(--color-text-muted); }
.mt-0 { margin-top: 0; }