/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://web-er.local
 Description:  Tema hijo de GeneratePress para EnviaRegalos.pe — implementa el Brand Book & Digital Design System V2.0.
 Author:       Web-ER
 Template:     generatepress
 Version:      2.0.0
 Text Domain:  generatepress-child
*/

/* -----------------------------------------------------------------------
   Design tokens — EnviaRegalos.pe Brand Book & Digital Design System V2.0
   Fuente de verdad: 01_BrandBook/EnviaRegalos_BrandBook_DigitalDesignSystem_FINAL.pdf
----------------------------------------------------------------------- */
:root {
	/* Color */
	--color-obsidian: #171515;
	--color-ivory: #FAF7F2;
	--color-rose: #D9899B;
	--color-rose-hover: #c96f83;
	/* Same hue as --color-rose, darkened until it clears WCAG AA (4.5:1)
	   for normal text on white/ivory/soft-rose — --color-rose itself only
	   reaches ~2.6:1 and is fine for large UI (buttons, borders, icons)
	   but not for body-sized links (QA P1 #73, accesibilidad/contraste). */
	--color-rose-text: #a83d56;
	/* Foreground token for content placed ON TOP of --color-rose as a
	   fill (buttons, solid badges) — white-on-rose only reaches ~2.6:1,
	   obsidian-on-rose reaches 6.9:1. Keeps --color-rose itself exactly
	   the brand swatch; only the text/icon color on top of it changes. */
	--color-on-rose: var(--color-obsidian);
	--color-soft-rose: #F6E7E9;
	--color-champagne: #D8C2A6;
	--color-white: #FFFFFF;

	--color-text: var(--color-obsidian);
	--color-text-muted: #6b6560;
	--color-bg: var(--color-white);
	--color-bg-alt: var(--color-ivory);
	--color-border: #e7e0d8;

	/* Semantic (functional states only — not part of the identity palette) */
	--color-success: #2f7a4f;
	--color-error: #b3312c;
	--color-warning: #a6650f;

	/* Typography */
	--font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
	--font-body: 'DM Sans', Arial, -apple-system, BlinkMacSystemFont, sans-serif;

	/* Spacing (base 4px, rhythm 8px) */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-6: 24px;
	--space-8: 32px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;

	/* Radius */
	--radius-control: 8px;
	--radius-card: 12px;
	--radius-panel: 20px;

	/* Layout */
	--container-width: 1280px;
	--touch-min: 44px;

	/* Motion */
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--duration: 0.18s;

	--container-width-legacy: var(--container-width);
	--color-primary: var(--color-rose);
	--color-primary-hover: var(--color-rose-hover);
	--color-accent: var(--color-obsidian);
	--radius: var(--radius-control);
}

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

/* -----------------------------------------------------------------------
   Reset & base
----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* The mini-cart drawer sits off-canvas via position:fixed + right:0 +
   transform:translateX(100%) when closed — browsers still count that
   translated box toward the page's scrollable area, so the (invisible)
   drawer alone stretched document.documentElement.scrollWidth past the
   real viewport width on every single page (mobile audit, UI-056 "cero
   overflow horizontal"). Guard at the root instead of chasing every
   individual off-canvas element. */
/* overflow-x on BOTH html and body breaks .site-header's position:sticky
   (Chrome stops treating html as the viewport-establishing root scroller
   once any non-visible overflow is set on it) — body alone is enough to
   clip the drawer and keeps html at its default so stickiness survives. */
body { overflow-x: hidden; }

body {
	color: var(--color-text);
	background: var(--color-bg);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--color-rose-text); text-decoration: none; transition: color var(--duration) var(--ease); }
a:hover { color: var(--color-rose-hover); }

h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--color-obsidian);
	line-height: 1.2;
	margin: 0 0 var(--space-4);
}
h4, h5, h6 {
	font-family: var(--font-body);
	font-weight: 700;
	color: var(--color-obsidian);
	line-height: 1.3;
	margin: 0 0 var(--space-3);
}

h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }

p { margin: 0 0 var(--space-4); }

.eyebrow {
	display: block;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-rose-text);
	margin-bottom: var(--space-2);
}

/* Visible focus for keyboard users everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--color-obsidian);
	outline-offset: 2px;
}

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

/* -----------------------------------------------------------------------
   Layout containers
----------------------------------------------------------------------- */
/* GeneratePress's `.site-content` is a flex row; its normal CSS only
   grows the child that carries its own `#primary`/`.content-area`
   markup. Our full custom templates use a plain `<main id="content">`,
   so without this the content column shrinks to fit instead of filling
   the page (see functions.php's `generate_sidebar_layout` filter too). */
.site-content > * {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
}

.inside-footer-widgets,
.inside-site-info,
.site-content .inside-article,
.paging-navigation .inside-paging-navigation {
	max-width: var(--container-width);
}

/* The header row (logo/search/actions) and the nav row underneath it
   get their OWN, deliberately wider cap than page content — a header
   is allowed to use more of a very wide screen than a column of body
   copy or a product grid should. At 1920px this leaves roughly
   32-60px of breathing room at each edge instead of the ~220px empty
   margin the shared 1280px content width produced up there. */
.inside-header,
.inside-navigation {
	max-width: 1800px;
}

/* GeneratePress's own Customizer "Container Width" setting (1200px by
   default) caps #page itself — a constraint that sits OUTSIDE every one
   of our own per-page width systems above, silently overriding all of
   them (including full-bleed sections, which need this ancestor
   completely unconstrained to actually reach the real viewport edge).
   Each inner element already controls its own width (.er-container,
   .inside-header, etc. above) or is deliberately full-bleed, so the
   outer wrapper doesn't need a cap of its own. */
.site.grid-container { max-width: none; }

.er-container {
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--space-4);
}

@media (min-width: 768px) {
	.er-container { padding-inline: var(--space-8); }
}

/* -----------------------------------------------------------------------
   Buttons
----------------------------------------------------------------------- */
.button,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link,
.er-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	background: var(--color-obsidian);
	color: var(--color-white) !important;
	border: 1px solid var(--color-obsidian);
	border-radius: var(--radius-control);
	padding: 0.85em 1.75em;
	min-height: var(--touch-min);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease), opacity var(--duration) var(--ease);
}

.button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover, .er-btn:hover {
	background: #000;
	border-color: #000;
	color: var(--color-white) !important;
}

.button:disabled, button:disabled, .er-btn[disabled], .er-btn.is-loading {
	opacity: 0.55;
	cursor: not-allowed;
}

.er-btn-secondary {
	background: transparent;
	color: var(--color-rose-text) !important;
	border-color: var(--color-rose);
}
.er-btn-secondary:hover {
	background: var(--color-soft-rose);
	border-color: var(--color-rose-hover);
	color: var(--color-rose-hover) !important;
}

.er-btn-rose {
	background: var(--color-rose);
	border-color: var(--color-rose);
	color: var(--color-on-rose) !important;
}
.er-btn-rose:hover {
	background: var(--color-rose-hover);
	border-color: var(--color-rose-hover);
	color: var(--color-on-rose) !important;
}

.er-btn-block { width: 100%; }
.er-btn-sm { padding: 0.55em 1.1em; min-height: 36px; font-size: 0.8125rem; }

.er-btn.is-loading { position: relative; color: transparent !important; }
.er-btn.is-loading::after {
	content: "";
	position: absolute;
	width: 16px; height: 16px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,0.4);
	border-top-color: #fff;
	animation: er-spin 0.7s linear infinite;
}
@keyframes er-spin { to { transform: rotate(360deg); } }

/* -----------------------------------------------------------------------
   Forms
----------------------------------------------------------------------- */
label, .er-label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--color-obsidian);
	margin-bottom: var(--space-2);
}

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="search"], input[type="date"], input[type="url"],
textarea, select {
	appearance: none;
	border: 1px solid var(--color-border);
	background: var(--color-white);
	border-radius: var(--radius-control);
	padding: 0.7em 0.9em;
	min-height: var(--touch-min);
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-text);
	width: 100%;
	transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

input:focus, textarea:focus, select:focus {
	border-color: var(--color-rose);
	box-shadow: 0 0 0 3px var(--color-soft-rose);
	outline: none;
}

.er-field { margin-bottom: var(--space-4); }
.er-field-error input,
.er-field-error select,
.er-field-error textarea { border-color: var(--color-error); }
.er-field-error-msg {
	color: var(--color-error);
	font-size: 0.8125rem;
	margin-top: var(--space-1);
	display: block;
}

/* -----------------------------------------------------------------------
   Cards
----------------------------------------------------------------------- */
.er-card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	overflow: hidden;
}

/* -----------------------------------------------------------------------
   Breadcrumbs + empty states (shared across many templates)
----------------------------------------------------------------------- */
.er-breadcrumbs { padding: var(--space-4) 0 0; margin: 0; font-family: var(--font-body); font-size: 11px; font-weight: 400; }
.er-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.er-breadcrumbs li { display: inline-flex; align-items: center; gap: 7px; }
.er-breadcrumbs a { color: var(--color-text-muted); }
.er-breadcrumbs a:hover { color: rgba(23, 21, 21, 0.75); }
.er-breadcrumbs span[aria-current] { color: rgba(23, 21, 21, 0.75); }
.er-breadcrumbs .er-breadcrumb-sep { color: var(--color-text-muted); opacity: 0.65; font-size: 0.9em; }

.er-empty-state { text-align: center; padding: var(--space-16) var(--space-4); }
.er-empty-state h2 { margin-bottom: var(--space-2); }
.er-empty-state p { color: var(--color-text-muted); margin-bottom: var(--space-6); }

/* -----------------------------------------------------------------------
   Trust badges (shared component)
----------------------------------------------------------------------- */
.er-trust-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-4);
	padding-block: var(--space-6);
}
.er-trust-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-size: 0.875rem;
	color: var(--color-text-muted);
}
.er-trust-item svg { flex: none; color: var(--color-rose-text); }
.er-trust-item strong { display: block; color: var(--color-obsidian); font-size: 0.875rem; }

/* -----------------------------------------------------------------------
   Header
----------------------------------------------------------------------- */
.er-topbar {
	background: var(--color-obsidian);
	color: var(--color-ivory);
	font-size: 0.8125rem;
}
.er-topbar-inner {
	max-width: 1800px;
	margin-inline: auto;
	padding: var(--space-2) var(--space-4);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	flex-wrap: wrap;
}
.er-topbar-shipping { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.er-topbar-item { display: inline-flex; align-items: center; gap: 6px; }
.er-topbar-links { display: flex; gap: var(--space-4); }
.er-topbar a { color: var(--color-ivory); opacity: 0.85; }
.er-topbar a:hover { opacity: 1; color: var(--color-rose-text); }

@media (max-width: 767px) {
	/* Con logística pendiente no hay mensajes para el rotador. La barra
	   conservaría 42px negros vacíos porque los enlaces de ayuda se ocultan
	   en móvil; en ese estado se elimina por completo. */
	.er-topbar--links-only { display: none; }
	.er-topbar-inner { justify-content: center; text-align: center; }
	.er-topbar-links { display: none; }

	/* MOBILE: una sola fila compacta (~42px), un solo mensaje a la vez —
	   nunca dos líneas. Los dos claims se apilan en el mismo hueco
	   (position:absolute) y global.js los alterna con un fundido; sin JS
	   solo se ve el primero. Fondo negro y estilo intactos. */
	.er-topbar { font-size: clamp(0.6875rem, 3vw, 0.8125rem); }
	.er-topbar-inner { min-height: 42px; padding-top: 0; padding-bottom: 0; }
	.er-topbar-shipping {
		position: relative;
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
		min-height: 42px;
		justify-content: center;
		gap: 0;
		overflow: hidden; /* ningún claim puede desbordar el hueco del rotador */
	}
	.er-topbar-item {
		position: absolute;
		inset: 0;
		justify-content: center;
		gap: 7px;
		padding: 0 10px;
		white-space: nowrap;
		opacity: 0;
		pointer-events: none;
	}
	.er-topbar-item > svg { flex: none; }
	/* Fallback sin JS / reduced-motion / al no rotar: solo el primer claim,
	   sin fundido en la carga (la transición vive solo mientras rota). */
	.er-topbar-item:first-child { opacity: 1; }
	/* Fundido SECUENCIAL, nunca cruzado: el claim saliente se desvanece
	   primero (0→350ms) y el entrante aparece DESPUÉS (delay 350ms), así
	   nunca hay dos textos superpuestos en el mismo hueco absoluto. */
	.er-topbar-shipping.is-rotating .er-topbar-item {
		opacity: 0;
		transition: opacity 320ms ease;
	}
	.er-topbar-shipping.is-rotating .er-topbar-item.is-active {
		opacity: 1;
		transition: opacity 320ms ease 340ms;
	}
}

.site-header {
	background: var(--color-white);
	border-bottom: 1px solid var(--color-border);
	position: sticky;
	top: 0;
	z-index: 999;
}

.inside-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* This gap is also the vertical space between the logo/search/actions
	   row and the nav row below it (nav wraps onto its own line inside
	   this same flex container) — trimmed so both read as one header
	   instead of two separated modules. */
	gap: 10px var(--space-6);
	flex-wrap: wrap;
	padding-block: 9px;
}

/* 54px keeps the whole header row inside the ~72–82px budget (Handoff
   header spec) once the row's own vertical padding is added — the
   previous 84px logo alone nearly filled that budget before any
   padding, which is what made the header read as oversized. */
.site-logo img { max-height: 51px; width: auto; }
.site-header .site-description,
.site-header .main-title { display: none; } /* the logo image already includes wordmark + tagline */

.er-header-search {
	position: relative;
	min-width: 200px;
	display: flex;
	align-items: center;
}
.er-header-search svg { position: absolute; left: 14px; color: var(--color-text-muted); pointer-events: none; }
.er-header-search input[type="search"] {
	width: 100%;
	min-height: 42px;
	padding-left: 42px;
	border-radius: var(--radius-control);
	background: var(--color-white);
	border-color: var(--color-border);
}
/* The sitewide input:focus rule (var(--color-rose) border + a solid
   3px soft-rose ring) is tuned for form fields, not a header search box
   — here it read as a thick, heavy border. A translucent 2px ring keeps
   the same Rose accent but much more discreet. */
.er-header-search input[type="search"]:focus {
	background: var(--color-white);
	border-color: var(--color-rose);
	box-shadow: 0 0 0 2px rgba(217, 137, 155, 0.14);
}

@media (max-width: 900px) {
	.er-header-search { order: 3; flex-basis: 100%; max-width: none; }
	.er-header-actions { order: 2; }
}

/* -----------------------------------------------------------------------
   Header row as composition, not fill: logo / search / actions as three
   real grid columns instead of one flex row stretched with big gaps to
   cover the width. The search column has its own sane min/max — it does
   not grow just because the row has room — and the nav below shares the
   header's own left edge instead of being centered under the search. */
@media (min-width: 901px) {
	.inside-header {
		display: grid;
		grid-template-columns: minmax(200px, 1fr) minmax(380px, 560px) minmax(280px, 1fr);
		column-gap: clamp(28px, 3.5vw, 64px);
		row-gap: 2px;
	}
	.site-branding-container { grid-column: 1; }
	.er-header-search { grid-column: 2; justify-self: center; width: 100%; max-width: 560px; }
	.er-header-actions { grid-column: 3; justify-self: end; }
	.main-navigation.mobile-menu-control-wrapper { display: none; }
	/* Spans the full row. GeneratePress's "nav-float-right" body class
	   (a legacy float-based layout option, unrelated to this grid)
	   floats .main-navigation itself, which shrink-wraps it to its own
	   content width and pushes it to the right — exactly backwards from
	   "align with the logo on the left". Neutralize the float so it
	   stretches across the grid row like everything else here; the ul's
	   own width:fit-content + justify-content:flex-start is what keeps
	   the actual links left-aligned and compact inside that full row. */
	.main-navigation.sub-menu-right { grid-column: 1 / -1; float: none; width: 100%; }
}

/* -----------------------------------------------------------------------
   Header — MOBILE (≤767px), SITEWIDE. Antes esta versión refinada vivía
   solo en home.css (is_front_page()); ahora aplica en todas las páginas.
   Dos filas:
     [ logo .......... ♡ cuenta carrito ☰ ]
     [ 🔍 buscador, ancho completo          ]
   Logo compacto y fluido, hamburguesa con el mismo peso visual que los
   iconos (sin la tarjeta gris de GeneratePress), buscador a ancho
   completo en su propia fila. GeneratePress ya pasa .inside-header a
   flex-direction:column bajo 768px; aquí se fuerza row+wrap.
----------------------------------------------------------------------- */
@media (max-width: 767px) {
	/* Un solo valor gobierna cada inset lateral mobile — header, buscador,
	   contenedores de sección. En <body> porque el header vive fuera del
	   wrapper de contenido. Escalonado (16 / 20 / 24px) en overrides más
	   abajo. */
	body { --fa-gutter: 20px; }

	.site-header .inside-header {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		padding-inline: var(--fa-gutter);
		/* Header ligeramente más compacto: se recorta el espacio vertical
		   sobrante (fila 1 ↔ fila 2 del buscador y padding del bloque) sin
		   tocar el tamaño del logo ni de los iconos. El padding-block-end
		   (debajo del buscador) baja a 2px para acercar el contenido del
		   catálogo; el de arriba (bajo la topbar) se mantiene en 6px. */
		row-gap: 6px;
		column-gap: clamp(2px, 1.2vw, 8px);
		padding-block: 6px 2px;
	}
	/* flex-grow:0 + margin-right:auto — el contenedor NO absorbe la fila
	   (con flex-grow:1 se comía el ancho y la hamburguesa saltaba a una
	   segunda fila entre ~380–420px); el espacio libre va al margen y
	   empuja el grupo de iconos al borde derecho. */
	.site-branding-container { order: 1; flex: 0 1 auto; min-width: 0; margin-right: auto; gap: 0; }
	.site-header .site-branding-container,
	.site-header .site-logo { margin-block: 0; }
	.site-header .site-logo { margin-inline: 0; }

	/* Logo fluido, más pequeño que el tope mobile anterior (42px): ~23px
	   a 320px hasta 33px (≈-21%) en mobile grande, para que logo + iconos
	   quepan siempre en una fila. Se escala el lockup completo. */
	.site-header .site-logo img { height: clamp(23px, 7.5vw, 33px); max-height: none; width: auto; }

	/* .site-header … : sube la especificidad a 0,2,0 para ganar a la regla
	   base .er-header-actions { gap: var(--space-4); margin-left:
	   var(--space-4) } que aparece MÁS ABAJO en este archivo — ese
	   16 + 16px extra era lo que empujaba la hamburguesa a una fila
	   propia en 320–412px. */
	.site-header .er-header-actions { order: 2; margin-left: 0; gap: clamp(2px, 1vw, 5px); }
	.site-header .er-header-actions .er-header-icon { min-width: 0; width: clamp(30px, 9vw, 38px); min-height: var(--touch-min); }

	/* Hamburguesa: mismo peso visual que los demás iconos — sin tarjeta
	   gris ni caja de padding gigante (GP le mete flex-grow:1,
	   padding 0 20px, radio 8px, fondo rgba(0,0,0,.02) y line-height:60px). */
	.main-navigation.mobile-menu-control-wrapper { order: 3; flex: none; margin: 0; }
	.inside-header .mobile-menu-control-wrapper .menu-toggle,
	.inside-header .mobile-menu-control-wrapper .menu-toggle:hover,
	.inside-header .mobile-menu-control-wrapper .menu-toggle:focus {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		border-radius: 0;
		flex-grow: 0;
		padding: 0;
		line-height: 1;
		width: clamp(30px, 9vw, 38px);
		min-height: var(--touch-min);
	}
	.inside-header .mobile-menu-control-wrapper .menu-toggle .gp-icon { font-size: 24px; line-height: 1; }

	/* El toggle es un <button> pelado → la regla global de botones le mete
	   color:var(--color-white) !important (icono blanco sobre header
	   blanco = invisible). Se restaura obsidiano con !important + mayor
	   especificidad (0,3,0 gana). El SVG rellena desde currentColor. */
	.inside-header .main-navigation .menu-toggle,
	.inside-header .main-navigation button.menu-toggle:hover,
	.inside-header .main-navigation button.menu-toggle:focus,
	.inside-header .main-navigation button.menu-toggle:focus-visible {
		color: var(--color-obsidian) !important;
	}

	/* Fila 2: buscador a ancho completo, alineado al mismo gutter. Altura
	   cómoda (~48px) pero sin el aire de más alrededor: el recorte real
	   viene del row-gap/padding-block del .inside-header, no de encoger
	   el campo. */
	.er-header-search { order: 4; flex-basis: 100%; width: 100%; min-width: 0; }
	.er-header-search input[type="search"] { min-height: 48px; }

	/* El menú de categorías colapsable mantiene su propia fila al abrirse. */
	.main-navigation.sub-menu-right { order: 5; }

	/* La barra de campaña (solo se renderiza en el home) comparte el
	   gutter del header; en el resto de páginas es un no-op. */
	.er-fa-topbar-inner { padding-inline: var(--fa-gutter); }
}

/* Gutter escalonado: 16px en teléfonos pequeños, 24px en mobile grande.
   DESPUÉS del bloque ≤767 para ganar por orden de cascada; ≤375 y 430–767
   son mutuamente excluyentes. */
@media (max-width: 375px) {
	body { --fa-gutter: 16px; }
}
@media (min-width: 430px) and (max-width: 767px) {
	body { --fa-gutter: 24px; }
}

.main-title a {
	font-family: var(--font-display);
	color: var(--color-obsidian);
	font-weight: 400;
	font-size: 1.6rem;
	letter-spacing: -0.01em;
}

.site-description {
	font-family: var(--font-body);
	color: var(--color-rose-text);
	font-style: italic;
	font-size: 0.8125rem;
}

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

/* Spread the category links out instead of letting them cluster into a
   tight left-aligned knot — a wide, gapped row reads as a real
   navigation bar, not a leftover list — but close enough together that
   it still reads as ONE coherent group, not scattered items. */
/* width:fit-content so this reads as one compact navigation group with
   its own natural size — not a flex row stretched to the container's
   full width with the links floating apart to fill it. */
.main-navigation .main-nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	width: fit-content;
	gap: 0 clamp(0.35rem, 0.8vw, 0.9rem);
}

/* GeneratePress's own default nav-link padding (~20px block) is what
   was inflating this row well past the ~44–50px the header spec budgets
   for it — override explicitly instead of relying on GP's default.
   display:inline-block gives the ::after underline below a predictable
   containing block sized to the link's own box. */
/* Padding is deliberately asymmetric (not padding-block) — equal 13px/13px
   read as sitting high in the row with too much air below before the
   hero starts. More above, less below settles the links optically
   centered in their own row without changing the row's total height. */
.main-navigation .main-nav ul li a {
	position: relative;
	display: inline-block;
	color: var(--color-obsidian);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: none;
	padding-top: 16px;
	padding-bottom: 10px;
	padding-left: 12px;
	padding-right: 12px;
	line-height: 1.3;
}
/* Hover/active indicator: a thin Rose underline, not a color or
   background change — Rose stays an accent, not the link's resting or
   hovered text color. current-menu-item/-parent covers WordPress's own
   "you are here" classes on the real category pages. */
.main-navigation .main-nav ul li a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 8px;
	width: 100%;
	height: 1px;
	background: var(--color-rose-text);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--duration, 180ms) var(--ease, ease);
}
.main-navigation .main-nav ul li a:hover::after,
.main-navigation .main-nav ul li a:focus-visible::after,
.main-navigation .main-nav ul li.current-menu-item > a::after,
.main-navigation .main-nav ul li.current-menu-parent > a::after,
.main-navigation .main-nav ul li.current-product_cat-ancestor > a::after {
	transform: scaleX(1);
}
/* GeneratePress's own Customizer "Navigation" colors (its classic
   #1e73be blue) ship as inline overrides in <head> and otherwise win
   on :hover/:focus AND on the current/active item — pin all three back
   to Obsidian so Rose stays the only accent, per brand rules. */
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-parent > a,
.main-navigation .main-nav ul li.current-product_cat-ancestor > a {
	color: var(--color-obsidian) !important;
}

.main-navigation .inside-navigation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

/* GeneratePress renders the real nav menu as a flex ITEM inside
   .inside-header (alongside branding + search/actions), not as a
   separate row below it — it only dropped onto its own line before
   because its old, taller default sizing happened to overflow the row.
   Shrinking that sizing (header-height fix above) freed up just enough
   width for flexbox to fit it on the same row instead, which visually
   crushed logo/search/actions together. flex-basis:100% forces it onto
   its own row unconditionally, matching the header spec's two-row
   layout regardless of how nav-item widths change later. */
.main-navigation.sub-menu-right { flex-basis: 100%; }

/* Header icon actions (search / favorites / account / cart) */
.er-header-actions {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-left: var(--space-4);
}
.er-header-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-width: var(--touch-min);
	min-height: var(--touch-min);
	color: var(--color-obsidian);
	font-size: 0.8125rem;
	font-weight: 600;
	white-space: nowrap;
}
.er-header-icon:hover { color: var(--color-rose-text); }
.er-header-icon-glyph { position: relative; display: inline-flex; }
.er-header-icon .er-badge-count {
	position: absolute;
	top: -6px; right: -8px;
	min-width: 16px; height: 16px;
	padding: 0 3px;
	border-radius: 999px;
	background: var(--color-rose-text);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

.header-cart-icon .cart-count {
	position: absolute; top: -8px; right: -10px;
	min-width: 18px; height: 18px; padding: 0 4px;
	border-radius: 999px; background: var(--color-rose-text); color: #fff;
	font-size: 0.7rem; font-weight: 700; line-height: 18px; text-align: center;
}

/* Text labels ride along the icons on desktop (approved mockup); below
   1024px there isn't room for both the search bar and labelled actions,
   so it collapses back to icon-only touch targets. */
@media (max-width: 1023px) {
	.er-header-icon-label { display: none; }
	.er-header-icon { width: var(--touch-min); }
}

@media (max-width: 768px) {
	.has-inline-mobile-toggle #site-navigation .inside-navigation > .header-cart-icon {
		display: inline-flex !important;
		margin-left: auto;
	}
}

/* -----------------------------------------------------------------------
   Footer
----------------------------------------------------------------------- */
.site-footer { background: var(--color-obsidian); color: rgba(250,247,242,0.75); font-size: 0.875rem; }
.site-footer a { color: rgba(250,247,242,0.75); }
.site-footer a:hover { color: var(--color-rose-text); }

.er-footer-top { padding: var(--space-12) 0 var(--space-8); }
.er-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(4, 1fr);
	gap: var(--space-8);
}
@media (max-width: 1023px) { .er-footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .er-footer-grid { grid-template-columns: 1fr; } }

.er-footer-brand .site-logo-footer { max-width: 180px; margin-bottom: var(--space-4); }
.er-footer-brand p { color: rgba(250,247,242,0.6); font-size: 0.8125rem; }
.er-footer-col h4 { color: var(--color-ivory); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-4); }
.er-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.er-footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.er-footer-social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 50%;
	border: 1px solid rgba(250,247,242,0.25);
}
.er-footer-social a:hover { border-color: var(--color-rose); }

.er-footer-badges {
	border-top: 1px solid rgba(250,247,242,0.12);
	padding: var(--space-6) 0;
}
.er-footer-badges .er-trust-item { color: rgba(250,247,242,0.75); }
.er-footer-badges .er-trust-item strong { color: var(--color-ivory); }
.er-footer-badges .er-trust-item svg { color: var(--color-rose-text); }

.er-footer-bottom {
	border-top: 1px solid rgba(250,247,242,0.12);
	padding-block: var(--space-4);
	font-size: 0.75rem;
	color: rgba(250,247,242,0.55);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-2);
}

/* -----------------------------------------------------------------------
   Footer — MOBILE (≤767px): compacto y premium. TODO vive en este
   @media y bajo .site-footer / .er-footer-* → desktop, tablet y el
   resto del sitio quedan exactamente igual. Las 4 columnas de
   categorías se colapsan en acordeones vía initFooterAccordions()
   (global.js); sin JS las listas quedan visibles (no reciben la clase
   .er-footer-col--acc, así que no se colapsan).
----------------------------------------------------------------------- */
@media (max-width: 767px) {
	/* Padding lateral = gutter mobile del home (20px), no uno propio. */
	.site-footer .er-container { padding-inline: 20px; }

	/* 1 · Encabezado: logo + mensaje, aire ceñido. Sin padding-bottom en
	   .er-footer-top: el borde superior de .er-footer-badges cierra el
	   grupo de acordeones. */
	.er-footer-top { padding: 28px 0 0; }
	.er-footer-grid { gap: 0; }
	.er-footer-brand { margin-bottom: 15px; }   /* transición descripción → acordeón "COMPRAR": 38px → 31px (−18%). No toca el espacio interno del bloque logo+descripción. */
	.er-footer-brand .site-logo-footer { max-width: 144px; margin-bottom: 12px; }
	.er-footer-brand p { font-size: 0.8125rem; line-height: 1.5; margin: 0; }
	.er-footer-social { margin-top: 16px; gap: 10px; }

	/* 2 · Acordeones (COMPRAR / OCASIONES / AYUDA / NOSOTROS).
	   .er-footer-col--acc la añade el JS solo en mobile. */
	.er-footer-col--acc { border-top: 1px solid rgba(250, 247, 242, 0.12); }
	.er-footer-col--acc h4 {
		margin: 0;
		min-height: 58px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		color: var(--color-white);
		font-weight: 700;
		font-size: 0.9375rem;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.er-footer-col--acc h4::after {
		content: "+";
		color: var(--color-rose-text);
		font-size: 1.375rem;
		font-weight: 400;
		line-height: 1;
	}
	.er-footer-col--acc.is-open h4::after { content: "\2013"; }
	.er-footer-col--acc h4:focus-visible {
		outline: 2px solid var(--color-rose);
		outline-offset: -3px;
		border-radius: 2px;
	}
	.er-footer-col--acc ul {
		gap: 0;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		padding-bottom: 0;
		transition: max-height 0.3s ease, opacity 0.2s ease, padding-bottom 0.3s ease;
	}
	.er-footer-col--acc.is-open ul {
		max-height: 340px;
		opacity: 1;
		padding-bottom: 14px;
	}
	.er-footer-col--acc ul li a {
		display: block;
		padding: 9px 0;
		font-size: 0.9375rem;
	}

	/* 3 · Beneficios: 1 columna, separación homogénea, icono alineado
	   con su texto. */
	.er-footer-badges { padding: 20px 0; }
	.er-footer-badges .er-trust-row {
		grid-template-columns: 1fr;
		gap: 16px;
		padding-block: 0;
	}
	.er-footer-badges .er-trust-item { align-items: center; gap: 12px; }
	.er-footer-badges .er-trust-item svg { width: 22px; height: 22px; }
	.er-footer-badges .er-trust-item span { line-height: 1.35; }
	.er-footer-badges .er-trust-item strong { font-size: 0.875rem; margin-bottom: 1px; }

	/* 4 · Cierre legal: apilado, sin overflow, legible. */
	.er-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		padding-block: 16px;
		font-size: 0.8125rem;
		line-height: 1.5;
	}
	.er-footer-bottom span { display: block; }
}

/* -----------------------------------------------------------------------
   WooCommerce — shop grid & cards
----------------------------------------------------------------------- */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: var(--space-6);
	margin: 0 0 var(--space-8) !important;
}
/* WooCommerce core still ships a float-era clearfix (content:" ";
   display:table) on ul.products — with a real, non-empty `content` it
   becomes an actual (invisible) grid item once the container is
   display:grid, silently eating the first cell and pushing every real
   product over by one column. Some counts wrap a lone card alone onto
   its own row with a large gap under it (Ronda 2.1 UI-014/UI-025,
   catalog and related-products grids). Grid doesn't need a clearfix at
   all (nothing here floats), so just turn it off. */
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; display: none; }

.woocommerce ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100% !important;
	margin: 0 !important;
	text-align: left;
	background: var(--color-white);
	border: 1px solid rgba(23, 21, 21, 0.08);
	border-radius: var(--radius-card);
	overflow: hidden; /* keeps the flush image's corners clipped to the card's own radius */
	padding: 0;
	transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.er-card-fav { position: absolute; top: 14px; right: 14px; z-index: 2; }
/* Explicit width/height (not padding) + box-sizing:border-box is what
   guarantees a mathematically perfect circle — the 1px border sits
   inside the 34px box instead of adding to it, so width and height
   never drift apart. */
.er-fav-btn {
	position: relative;
	box-sizing: border-box;
	display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; min-height: 0; min-width: 0; aspect-ratio: 1 / 1; flex: 0 0 34px;
	padding: 0; border-radius: 50%;
	border: 1px solid var(--color-border);
	background: rgba(255, 255, 255, 0.94);
	color: var(--color-obsidian) !important;
	box-shadow: 0 1px 3px rgba(23, 21, 21, 0.08);
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
/* Invisible ~44px touch target around the 34px visible circle (5px each
   side), via a pseudo-element rather than enlarging the button itself —
   clicks on it still bubble to the button, so the hit area grows without
   the circle looking bigger. */
.er-fav-btn::before { content: ""; position: absolute; inset: -5px; }
.er-fav-btn svg { width: 18px; height: 18px; }
.er-fav-btn.is-active { color: var(--color-rose-text) !important; }
.er-fav-btn:hover {
	color: var(--color-rose-text) !important;
	background: rgba(255, 255, 255, 1);
	border-color: var(--color-rose);
}

@media (hover: hover) {
	.woocommerce ul.products li.product:hover {
		border-color: rgba(23, 21, 21, 0.18);
		box-shadow: 0 6px 16px -12px rgba(23, 21, 21, 0.3);
		transform: translateY(-2px);
	}
	.woocommerce ul.products li.product:hover a:first-of-type img { transform: scale(1.015); }
}

/* Flush to the card's own top/left/right edges — no white padding moat
   around the photo — via the shared card overflow:hidden above; the
   180-220ms transform hover lives on the image itself. */
.woocommerce ul.products li.product > a:first-of-type { display: block; }
.woocommerce ul.products li.product a img {
	background: var(--color-bg-alt);
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	display: block;
	margin: 0;
	transition: transform 220ms ease;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--color-obsidian);
	font-size: 1rem;
	line-height: 1.25;
	/* Reserves 2 lines even for a 1-line name, so price/rating start at
	   the same Y across every card in the row regardless of title length. */
	min-height: calc(1.25em * 2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	padding: 12px 14px 0;
}

.woocommerce ul.products li.product .star-rating {
	margin: 6px 14px 0;
	font-size: 0.75rem;
	color: var(--color-rose-text);
	width: 5.4em;
}
.woocommerce ul.products li.product .star-rating::before { color: var(--color-border); }
.woocommerce ul.products li.product .star-rating span::before { color: var(--color-rose-text); }

.woocommerce ul.products li.product .price {
	display: block;
	color: var(--color-obsidian);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1.0625rem;
	margin: 0;
}
.woocommerce ul.products li.product .price del { color: var(--color-text-muted); font-weight: 400; opacity: 0.7; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--color-rose-hover); }

.er-card-delivery {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 4px;
	color: var(--color-text-muted);
	font-size: 0.75rem;
}
.er-card-delivery svg { flex: none; color: var(--color-rose-text); }

/* Footer anclado al fondo de la card vía margin-top:auto (li.product ya
   es flex-column) — precio, envío y el botón + son hermanos reales aquí
   (ver inc/woocommerce-product-cart.php), así que la altura del footer
   depende solo de su propio padding + el diámetro fijo del botón, nunca
   de si el título ocupa 1-2 líneas, si hay "Envío hoy" o si el precio
   lleva tachado de oferta. Eso es lo que garantiza que el + quede a la
   misma distancia del borde derecho/inferior y alineado entre las tres
   cards de una fila, sin offsets por producto. */
.er-card-footer {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: 10px 14px 14px;
}
.er-card-footer-info { min-width: 0; }

/* Badges — real data only (onsale = WooCommerce native; .er-badge-tag =
   is_featured()/fecha de publicación, ver inc/woocommerce-product-cart.php).
   Same corner, same look, mutually exclusive so they never stack. */
.woocommerce span.onsale,
.er-badge-tag {
	background: var(--color-rose-text);
	color: var(--color-white);
	border-radius: var(--radius-control);
	min-height: auto; min-width: auto;
	padding: 4px 8px;
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	position: absolute;
	top: var(--space-3); left: var(--space-3);
	line-height: 1.4;
	z-index: 1;
}
.er-badge-new { background: var(--color-rose); }

/* Circular Rose "+" — vive dentro de .er-card-footer (flex row) como
   hermano normal del precio, ya no position:absolute sobre el resto de
   la card, así que su posición no depende de la altura del contenido de
   arriba. El texto real ("Añadir al carrito") sigue en el DOM para el
   aria-label/lectores de pantalla (woocommerce_loop_add_to_cart_args en
   inc/woocommerce-product-cart.php) pero queda oculto visualmente. El
   "+" es un SVG vía background-image, no un glifo de texto — centrado
   geométrico exacto (background-position:center), sin la ambigüedad de
   métricas de fuente que desalineaba el signo dentro del círculo. La
   circunferencia visible es más chica que el área táctil — un ::before
   invisible (inset -7px) mantiene el hit area en 44px, mismo patrón que
   .er-fav-btn arriba. */
.woocommerce ul.products li.product .button {
	position: relative;
	flex: none;
	width: 30px; height: 30px; min-height: 0; min-width: 0;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	font-size: 0;
	line-height: 0;
	background-color: var(--color-rose) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 13px 13px !important;
	border-color: var(--color-rose) !important;
	color: transparent !important;
	transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.woocommerce ul.products li.product .button::before { content: ""; position: absolute; inset: -7px; }
.woocommerce ul.products li.product .button:hover {
	background-color: var(--color-rose-hover) !important;
	border-color: var(--color-rose-hover) !important;
	transform: scale(1.06);
}
.woocommerce ul.products li.product .button.loading {
	background-image: none !important; /* el spinner de abajo reemplaza al "+" mientras carga */
}
.woocommerce ul.products li.product .button.loading::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.5); border-top-color: #fff; animation: er-spin 0.7s linear infinite; }
/* El enlace "Ver carrito" que WooCommerce inyecta junto al botón tras un
   add-to-cart AJAX exitoso queda oculto: el drawer del mini-carrito ya se
   abre solo (initCartDrawer en global.js), así que ese enlace es
   redundante — y al ser ahora .button un hermano flex real dentro de
   .er-card-footer, dejarlo visible correría el layout de esa card
   (justify-content:space-between con 3 items en vez de 2) y desalinearía
   su + respecto a las otras cards de la fila mientras esté presente. */
.woocommerce ul.products li.product .added_to_cart { display: none; }

/* -----------------------------------------------------------------------
   WooCommerce – single product & cart (native fallback styling)
----------------------------------------------------------------------- */
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--color-obsidian); }

.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce .single_add_to_cart_button {
	background: var(--color-obsidian);
	color: #fff;
	border-radius: var(--radius-control);
}
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce .single_add_to_cart_button:hover {
	background: #000;
	color: #fff;
}

.woocommerce table.shop_table { border-color: var(--color-border); }

/* =======================================================================
   Sistema de avisos (notices) — EnviaRegalos.pe
   Un único lenguaje visual para éxito/compra · error · aviso · info.
   Reemplaza el aspecto por defecto de WooCommerce (borde grueso arriba,
   fondo gris, glifo de la fuente de iconos WC, botón negro interno) SIN
   tocar su lógica ni su markup. Global: tienda, ficha, carrito, checkout,
   cuenta y avisos de bloque (mini-cart / carrito-checkout en bloques).

   Estado = acento + icono + tinte:
     éxito / confirmación de compra → rosa de marca
     error                          → --color-error
     aviso / advertencia            → --color-warning
     info                           → gris neutro
======================================================================= */
.woocommerce-notices-wrapper:empty { display: none; }

/* En la ficha de producto el contenedor de avisos iba full-width (pegado
   a los bordes del viewport). Se le da EXACTAMENTE la misma caja
   horizontal que usan el breadcrumb, el título y el hero/galería
   (.er-container / .er-pdp-hero): mismo max-width, centrado y gutter, de
   modo que los bordes izq./der. del aviso quedan alineados con los de la
   imagen principal. No toca su diseño interno ni su altura. */
.single-product .woocommerce-notices-wrapper {
	box-sizing: border-box;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--space-4);
}
@media (min-width: 768px) {
	.single-product .woocommerce-notices-wrapper { padding-inline: var(--space-8); }
}
/* Separación vertical entre el aviso y la galería en mobile: el hero solo
   aporta ~4px de padding-top, así que el aire lo pone el margen inferior
   del propio aviso → ~24–28px de separación con la imagen. */
@media (max-width: 767px) {
	.single-product .woocommerce-message,
	.single-product .woocommerce-error,
	.single-product .woocommerce-info { margin-bottom: 22px; }
}

/* Tarjeta COMPACTA: notificación, no sección de contenido.
   Layout genérico = icono + mensaje en 1–2 líneas, centrado
   verticalmente. Sin outline negro (WC enfoca el aviso con tabindex="-1"
   → anillo de foco del navegador = ese "borde negro / doble borde"). */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	align-items: center;
	column-gap: 10px;
	row-gap: 2px;
	margin: 0 0 var(--space-3);
	padding: 10px 14px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-control);
	outline: none;
	box-shadow: none;
	color: var(--color-obsidian);
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.4;
	list-style: none;
	overflow-wrap: anywhere;
}
.woocommerce-message:focus,
.woocommerce-error:focus,
.woocommerce-info:focus,
.woocommerce-message:focus-visible,
.woocommerce-error:focus-visible,
.woocommerce-info:focus-visible { outline: none; box-shadow: none; }

/* Icono lineal (SVG máscara) — anula el glifo de la fuente de iconos WC. */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
	content: "";
	position: static;
	left: auto;
	top: auto;
	grid-column: 1;
	align-self: center;
	width: 20px;
	height: 20px;
	margin: 0;
	background-color: currentColor;
	-webkit-mask: var(--er-notice-icon) center / 20px 20px no-repeat;
	        mask: var(--er-notice-icon) center / 20px 20px no-repeat;
}
/* Mensajes de varias líneas (lista de errores): el icono sube arriba. */
.woocommerce-error:has(> li + li)::before { align-self: start; margin-top: 1px; }

/* Contenido genérico → 2ª columna. Funciona con <div>…</div> y con
   <ul><li>…</li></ul>. */
.woocommerce-message > *,
.woocommerce-error > *,
.woocommerce-info > * {
	grid-column: 2;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce-error > li + li { margin-top: 2px; }

/* === Aviso "añadido al carrito" (tiene .er-notice-title): composición
   propia, compacta. Mobile = máx. 2 líneas; desktop = una sola fila. === */
.woocommerce-message:has(.er-notice-title) {
	grid-template-columns: 20px minmax(0, 1fr) auto;
	grid-template-areas:
		"ic title title"
		".  sub   cta";
	align-items: center;
	row-gap: 1px;
	padding: 12px 14px;
}
.woocommerce-message:has(.er-notice-title)::before { grid-area: ic; align-self: center; }
.woocommerce-message .er-notice-title {
	grid-area: title;
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.3;
}
.woocommerce-message .er-notice-sub {
	grid-area: sub;
	color: var(--color-text-muted);
	line-height: 1.3;
}
.woocommerce-message:has(.er-notice-title) .button.wc-forward {
	grid-area: cta;
	justify-self: end;
	align-self: center;
	white-space: nowrap;
}

@media (min-width: 768px) {
	/* Desktop/tablet ancho: TODO en una fila, centrado (~60–68px). */
	.woocommerce-message:has(.er-notice-title) {
		grid-template-columns: 20px auto minmax(0, 1fr) auto;
		grid-template-areas: "ic title sub cta";
		row-gap: 0;
		column-gap: 8px;
		min-height: 60px;          /* objetivo ~64–72px, contenido centrado */
		padding: 12px 18px;
	}
	.woocommerce-message:has(.er-notice-title) .er-notice-sub::before {
		content: "·";
		margin-right: 6px;
		color: var(--color-border);
	}
}

/* Sin soporte de :has() (navegadores antiguos): flex-wrap para que el
   título/sub queden juntos y el CTA a la derecha, evitando el apilado en
   3 filas. */
@supports not selector(:has(*)) {
	.woocommerce-message {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		column-gap: 8px;
	}
	.woocommerce-message::before { flex: none; }
	.woocommerce-message .er-notice-title { flex: 1 1 100%; }
	.woocommerce-message .button.wc-forward { margin-left: auto !important; }
}

/* --- Éxito / confirmación de compra → rosa de marca (los selectores
   .woocommerce … igualan la especificidad de la regla base para que
   gane el tinte del estado). --- */
.woocommerce-message,
.woocommerce .woocommerce-message {
	border-color: #e7c7ce;
	background: #fbf4f5;
	--er-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.4 12.3 2.4 2.4 4.8-5.4'/%3E%3C/svg%3E");
}
.woocommerce-message::before,
.woocommerce .woocommerce-message::before { color: var(--color-rose-text); }

/* --- Error --- */
.woocommerce-error,
.woocommerce .woocommerce-error {
	border-color: #e8c4c1;
	background: #fcf4f3;
	--er-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.5h.01'/%3E%3C/svg%3E");
}
.woocommerce-error::before,
.woocommerce .woocommerce-error::before { color: var(--color-error); }

/* --- Info (neutro) --- */
.woocommerce-info,
.woocommerce .woocommerce-info {
	border-color: var(--color-border);
	background: var(--color-white);
	--er-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}
.woocommerce-info::before,
.woocommerce .woocommerce-info::before { color: var(--color-text-muted); }

/* --- Aviso / advertencia: WooCommerce clásico no tiene clase propia
   (wc_add_notice($m,'notice') = .woocommerce-info). Misma arquitectura,
   solo cambia acento + icono, disponible vía modificador o data-attr. --- */
.woocommerce-info.er-notice--warning,
.woocommerce-info[data-notice-type="warning"] {
	border-color: #e7d6bc;
	background: #fcf7ef;
	--er-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
.woocommerce-info.er-notice--warning::before,
.woocommerce-info[data-notice-type="warning"]::before { color: var(--color-warning); }

/* --- Acción interna del aviso ("Ver carrito", "Seguir comprando"…):
   enlace compacto rosa oscuro con flecha. NUNCA el botón negro grande —
   no debe competir con el CTA "Añadir al carrito" de la ficha. --- */
.woocommerce-message .button,
.woocommerce-message a.button,
.woocommerce-error .button,
.woocommerce-error a.button,
.woocommerce-info .button,
.woocommerce-info a.button,
.woocommerce .woocommerce-message a.button,
.woocommerce .woocommerce-error a.button,
.woocommerce .woocommerce-info a.button {
	float: none !important;
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
	width: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--color-rose-text) !important;
	font-family: var(--font-body) !important;
	font-size: 0.8125rem !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	text-decoration: none !important;
}
.woocommerce-message .button.wc-forward::after,
.woocommerce-error .button.wc-forward::after,
.woocommerce-info .button.wc-forward::after { content: "\00a0\2192"; font-weight: 400; }
.woocommerce-message .button:hover,
.woocommerce-error .button:hover,
.woocommerce-info .button:hover { color: var(--color-obsidian) !important; text-decoration: underline; }

/* --- Avisos de bloque (mini-cart, carrito/checkout en bloques) --- */
.wc-block-components-notice-banner {
	border: 1px solid var(--color-border) !important;
	border-radius: var(--radius-control) !important;
	box-shadow: none !important;
	padding: 12px 14px !important;
	background: var(--color-white) !important;
	color: var(--color-obsidian) !important;
	font-family: var(--font-body) !important;
	font-size: 0.875rem !important;
	line-height: 1.45 !important;
}
.wc-block-components-notice-banner svg {
	width: 20px !important;
	height: 20px !important;
	margin-right: 10px !important;
	flex: none !important;
}
.wc-block-components-notice-banner.is-success { border-color: #e7c7ce !important; background: #fbf4f5 !important; }
.wc-block-components-notice-banner.is-success svg { fill: var(--color-rose-text) !important; }
.wc-block-components-notice-banner.is-error { border-color: #e8c4c1 !important; background: #fcf4f3 !important; }
.wc-block-components-notice-banner.is-error svg { fill: var(--color-error) !important; }
.wc-block-components-notice-banner.is-warning { border-color: #e7d6bc !important; background: #fcf7ef !important; }
.wc-block-components-notice-banner.is-warning svg { fill: var(--color-warning) !important; }
.wc-block-components-notice-banner.is-info svg { fill: var(--color-text-muted) !important; }
.wc-block-components-notice-banner__content { font-size: 0.875rem !important; }

/* --- Barra de aviso de tienda (si se activa desde Ajustes) --- */
.woocommerce-store-notice,
p.demo_store {
	background: var(--color-obsidian);
	color: var(--color-ivory);
	font-family: var(--font-body);
	font-size: 0.8125rem;
	box-shadow: none;
}
.woocommerce-store-notice a,
p.demo_store a { color: var(--color-ivory); text-decoration: underline; }

/* -----------------------------------------------------------------------
   WhatsApp contextual box — used on the product page (product.css'
   context) and the order confirmation page (checkout context), so this
   also has to live in the always-loaded stylesheet.
----------------------------------------------------------------------- */
.er-whatsapp-inline {
	display: flex; align-items: center; gap: var(--space-3);
	background: var(--color-soft-rose);
	border-radius: var(--radius-control);
	padding: var(--space-3) var(--space-4);
	margin: var(--space-2) 0 var(--space-6);
	color: var(--color-obsidian) !important;
	font-size: 0.8125rem;
}
.er-whatsapp-inline svg { color: #25D366; flex: none; }
.er-whatsapp-inline strong { color: var(--color-obsidian); }

/* -----------------------------------------------------------------------
   Complementos ("Complementa tu regalo") — shared by the product page
   and the cart page, so (like the mini-cart drawer) this must live in
   the always-loaded stylesheet rather than either page-specific one.
----------------------------------------------------------------------- */
.er-complements { margin-top: var(--space-8); }
.er-complements h3 { margin-bottom: 2px; }
.er-complements .er-sub { color: var(--color-text-muted); font-size: 0.8125rem; margin-bottom: var(--space-4); }
.er-complements-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 200px)); gap: var(--space-3); }
.er-complement-card { border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-2); position: relative; }
.er-complement-media img, .er-complement-media .er-img-placeholder { border-radius: var(--radius-control); aspect-ratio: 1; object-fit: cover; }
.er-complement-title { display: block; font-size: 0.8125rem; font-weight: 700; color: var(--color-obsidian); margin-top: var(--space-2); }
.er-complement-price { font-size: 0.8125rem; font-weight: 700; margin: 2px 0 var(--space-2); }
.er-complement-card .er-btn { position: absolute; top: var(--space-2); right: var(--space-2); width: 28px; height: 28px; min-height: 28px; padding: 0; border-radius: 50%; }

/* -----------------------------------------------------------------------
   Quantity stepper — enhances WooCommerce's native .quantity/input.qty
   on both the product page and the cart, so lives in the shared sheet.
----------------------------------------------------------------------- */
/* Tres celdas idénticas: [ − | n | + ]. El contenedor lleva el borde y el
   radio (solo en las esquinas exteriores, vía overflow:hidden); las celdas
   internas nunca tienen radio propio. Los signos + / − se DIBUJAN con
   pseudo-elementos (barras de currentColor centradas con inset:0;margin:auto),
   así que su centrado es geométrico exacto — no depende del line-height ni
   de las métricas de la fuente, y no hay desplazamiento óptico. */
.quantity.er-stepper {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-control);
	overflow: hidden;
	width: fit-content;
	box-sizing: border-box;
}
.er-stepper-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	min-height: 44px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--color-bg-alt) !important;
	color: var(--color-obsidian) !important;
	font-size: 0 !important;               /* oculta el glifo de texto que inserta el JS */
	line-height: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.er-stepper-btn:hover { background: var(--color-soft-rose) !important; }
.er-stepper-btn::before,
.er-stepper-plus::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background: currentColor;
	border-radius: 1px;
}
.er-stepper-btn::before { width: 11px; height: 2px; }   /* barra horizontal (− y parte del +) */
.er-stepper-plus::after { width: 2px; height: 11px; }   /* barra vertical del + */
.quantity.er-stepper input.qty {
	flex: none;
	width: 46px;
	min-height: 44px;
	text-align: center;
	border: 0;
	border-left: 1px solid var(--color-border);
	border-right: 1px solid var(--color-border);
	border-radius: 0;
	background: transparent;
	font-size: 0.9375rem;
	padding: 0;
	-moz-appearance: textfield;
}
.quantity.er-stepper input.qty::-webkit-inner-spin-button,
.quantity.er-stepper input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* -----------------------------------------------------------------------
   Mini-cart drawer — markup is printed in wp_footer on every page (the
   header cart icon can open it from anywhere), so its CSS must be global
   rather than in the cart/checkout-only stylesheet.
----------------------------------------------------------------------- */
.er-cart-drawer { position: fixed; inset: 0; z-index: 2000; visibility: hidden; }
.er-cart-drawer.is-open { visibility: visible; }
.er-cart-drawer-overlay { position: absolute; inset: 0; background: rgba(23,21,21,0.45); opacity: 0; transition: opacity var(--duration) var(--ease); }
.er-cart-drawer.is-open .er-cart-drawer-overlay { opacity: 1; }
.er-cart-drawer-panel {
	position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
	background: var(--color-white);
	display: flex; flex-direction: column;
	transform: translateX(100%);
	transition: transform var(--duration) var(--ease);
}
.er-cart-drawer.is-open .er-cart-drawer-panel { transform: translateX(0); }
.er-cart-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border); }
.er-cart-drawer-head h2 { margin: 0; font-size: 1.125rem; }
.er-cart-drawer-close { background: none; border: none; font-size: 1.75rem; line-height: 1; padding: 0; min-height: auto; color: var(--color-obsidian) !important; }
.er-cart-drawer-body { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-6); display: flex; flex-direction: column; }

.er-mini-cart-item { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); align-items: start; }
.er-mini-cart-item-media img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-control); }
.er-mini-cart-item-body a { color: var(--color-obsidian); font-weight: 700; font-size: 0.875rem; }
.er-mini-cart-item-meta, .er-mini-cart-item-meta p { font-size: 0.75rem; color: var(--color-text-muted); margin: 2px 0; }
.er-mini-cart-item-qty { font-size: 0.75rem; color: var(--color-text-muted); }
.er-mini-cart-item-remove { color: var(--color-text-muted); font-size: 1.1rem; line-height: 1; }
.er-mini-cart-footer { margin-top: auto; padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.er-mini-cart-total { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: var(--space-2); }
.er-mini-cart-empty { text-align: center; padding: var(--space-12) 0; color: var(--color-text-muted); }
.er-mini-cart-empty .er-btn { margin-top: var(--space-4); }

/* -----------------------------------------------------------------------
   WhatsApp floating button (global)
----------------------------------------------------------------------- */
.er-whatsapp-float {
	position: fixed;
	right: var(--space-4);
	bottom: var(--space-4);
	z-index: 900;
}
.er-whatsapp-bubble {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: #25D366;
	color: #fff !important;
	border-radius: 999px;
	padding: 12px;
	box-shadow: 0 10px 24px -8px rgba(23,21,21,0.4);
	transition: padding var(--duration) var(--ease);
}
.er-whatsapp-bubble svg { flex: none; }
.er-whatsapp-bubble .er-wa-text {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	font-size: 0.8125rem;
	font-weight: 700;
	transition: max-width var(--duration) var(--ease);
}
@media (hover: hover) {
	.er-whatsapp-bubble:hover { padding-right: 16px; }
	.er-whatsapp-bubble:hover .er-wa-text { max-width: 160px; }
}
@media (max-width: 767px) {
	/* Botón circular flotante — NUNCA una barra verde horizontal. El
	   <span class="er-wa-tooltip"> solo tiene estilos ≥768px, así que en
	   mobile quedaba como texto suelto dentro de la burbuja flex y la
	   estiraba a una barra que pisaba las fotos del catálogo. Se oculta:
	   en mobile la burbuja es solo el icono en un círculo verde. */
	/* Botón circular flotante — mismo tratamiento que el home (home.css):
	   círculo perfecto de 56px (width/height, no padding), icono 26px,
	   esquina inferior derecha con safe-area. En mobile .er-wa-tooltip se
	   renderizaba como texto suelto y estiraba la burbuja a una barra
	   verde horizontal sobre las fotos — por eso se oculta. */
	.er-whatsapp-float {
		right: calc(16px + env(safe-area-inset-right));
		bottom: calc(16px + env(safe-area-inset-bottom));
	}
	.er-whatsapp-bubble {
		box-sizing: border-box;
		width: 56px;
		height: 56px;
		padding: 0;
		gap: 0;
		justify-content: center;
		border-radius: 999px;
		box-shadow: 0 6px 18px -6px rgba(23, 21, 21, 0.4);
	}
	.er-whatsapp-bubble svg { width: 26px; height: 26px; }
	.er-wa-tooltip { display: none; }
}
/* Never cover the mobile sticky purchase bar or footer bar */
body.single-product .er-whatsapp-float,
body.woocommerce-cart .er-whatsapp-float,
body.front-page .er-whatsapp-float {
	bottom: calc(var(--space-4) + 64px);
}
@media (max-width: 767px) {
	body.single-product .er-whatsapp-float,
	body.woocommerce-cart .er-whatsapp-float,
	body.front-page .er-whatsapp-float {
		bottom: calc(var(--space-3) + 72px);
	}
}

/* -----------------------------------------------------------------------
   WhatsApp floating button — desktop refinement. Mobile (<768px) keeps
   the rules above untouched (own pass later); this only retargets the
   circle for pointer/hover viewports: smaller, lighter shadow, and a
   contextual tooltip to the left instead of the pill expanding in place.
----------------------------------------------------------------------- */
@media (min-width: 768px) {
	.er-whatsapp-float { right: clamp(24px, 2vw, 32px); bottom: clamp(24px, 2vw, 32px); }
	/* The mobile-only offsets above (avoiding the sticky purchase/cart
	   bar) don't apply here — nothing fixed sits at the bottom of these
	   pages at this width, so desktop always gets the plain clamp() inset. */
	body.single-product .er-whatsapp-float,
	body.woocommerce-cart .er-whatsapp-float,
	body.front-page .er-whatsapp-float {
		bottom: clamp(24px, 2vw, 32px);
	}
	/* Explicit width/height + box-sizing:border-box, same approach as the
	   ♡ button, for a mathematically perfect circle — not built from
	   padding, which is why padding:0 here regardless of what the
	   mobile/pill rules above set. */
	.er-whatsapp-bubble {
		position: relative;
		box-sizing: border-box;
		width: 50px;
		height: 50px;
		aspect-ratio: 1 / 1;
		justify-content: center;
		padding: 0;
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
		transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
	}
	.er-whatsapp-bubble:hover { padding-right: 0; background: #22bf5b; transform: scale(1.03); }
	.er-whatsapp-bubble:focus-visible { outline: 2px solid var(--color-obsidian); outline-offset: 3px; }
	.er-whatsapp-bubble svg { width: 24px; height: 24px; }
	/* The inline expanding label ("Escríbenos") is a mobile/no-hover
	   fallback — desktop shows .er-wa-tooltip instead. */
	.er-whatsapp-bubble .er-wa-text { display: none; }

	.er-wa-tooltip {
		position: absolute;
		top: 50%;
		right: calc(100% + 8px);
		transform: translateY(-50%) translateX(4px);
		background: var(--color-obsidian);
		color: var(--color-ivory);
		font-family: var(--font-body);
		font-size: 0.8125rem;
		font-weight: 600;
		white-space: nowrap;
		padding: 8px 12px;
		border-radius: var(--radius-control);
		opacity: 0;
		pointer-events: none;
		transition: opacity 180ms ease, transform 180ms ease;
	}
	.er-whatsapp-bubble:hover .er-wa-tooltip,
	.er-whatsapp-bubble:focus-visible .er-wa-tooltip {
		opacity: 1;
		transform: translateY(-50%) translateX(0);
	}
}

/* -----------------------------------------------------------------------
   Checkout: minimal header — no category nav/search competing with the
   purchase flow (Handoff: "cero navegación comercial"; QA P0 #40).
----------------------------------------------------------------------- */
.woocommerce-checkout-page .main-navigation,
.woocommerce-checkout-page .er-header-search,
.woocommerce-checkout-page .er-header-icon[aria-label="Favoritos"] {
	display: none !important;
}
.woocommerce-checkout-page .site-footer .er-footer-top,
.woocommerce-checkout-page .site-footer .er-footer-badges { display: none; }
.woocommerce-checkout-page .site-footer .er-footer-bottom { min-height: 64px; justify-content: center; }
/* visibility:hidden kept the shipping text's own line-height, so the
   topbar still rendered as a tall, completely empty band on checkout —
   on mobile, worse still, since .er-topbar-links (its only remaining
   content) is ALSO hidden below 767px, leaving nothing in the bar at
   all (mobile audit: solid empty band at the very top of checkout).
   display:none actually removes it from layout instead of just hiding
   its content. */
.woocommerce-checkout-page .er-topbar-shipping { display: none; }
.woocommerce-checkout-page .er-topbar-links::after {
	content: "Compra con confianza";
	color: var(--color-ivory);
	font-weight: 700;
}
@media (max-width: 767px) {
	/* .er-topbar-links (the security-badge replacement) is already
	   hidden site-wide below 767px, so on mobile checkout the topbar
	   would have nothing left to show — collapse it entirely instead of
	   leaving an empty bar. */
	.woocommerce-checkout-page .er-topbar { display: none; }
}

/* -----------------------------------------------------------------------
   Cart/checkout/account/B2B pages render their own <h1> inside our
   custom layout — hide GeneratePress's default page-title block so the
   plain WP page title (e.g. "Carrito") doesn't print a second, unstyled
   heading above it.
----------------------------------------------------------------------- */
.woocommerce-cart .entry-header,
.woocommerce-checkout-page .entry-header,
.woocommerce-account .entry-header,
.page-template-empresas .entry-header {
	display: none;
}

/* -----------------------------------------------------------------------
   Skip link
----------------------------------------------------------------------- */
.er-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-obsidian);
	color: #fff;
	padding: var(--space-3) var(--space-4);
	z-index: 10000;
	border-radius: 0 0 var(--radius-control) 0;
}
.er-skip-link:focus { left: 0; }

/* -----------------------------------------------------------------------
   Generic stacked-section layout — used by any page template built as a
   sequence of <section class="er-section">...</section> blocks (home,
   B2B, and any future one), not just a single page.
----------------------------------------------------------------------- */
.er-section { padding: var(--space-12) 0; }
.er-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.er-section-head h2 { margin: 0; }
.er-link-more { font-weight: 700; font-size: 0.875rem; white-space: nowrap; }

/* Seasonal campaign entry in the primary navigation. */
.main-navigation .main-nav a[href*="/dia-de-las-flores-amarillas/"] {
	margin: 5px 0 3px;
	padding-top: 10px;
	padding-bottom: 8px;
	color: #5b430b !important;
	background: #fff7d8;
	border: 1px solid #ead88b;
	border-radius: 9px;
	box-shadow: 0 4px 14px rgba(109, 82, 13, 0.08);
	font-weight: 700;
}

.main-navigation .main-nav a[href*="/dia-de-las-flores-amarillas/"]::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 7px;
	border-radius: 50%;
	background: #d9a91f;
	vertical-align: 1px;
}

.main-navigation .main-nav a[href*="/dia-de-las-flores-amarillas/"]::after {
	display: none;
}

.main-navigation .main-nav a[href*="/dia-de-las-flores-amarillas/"]:hover,
.main-navigation .main-nav a[href*="/dia-de-las-flores-amarillas/"]:focus-visible {
	color: #332604 !important;
	background: #f9e99f;
	border-color: #ddc35b;
}