/*
Theme Name: Hairstore Barcelona V2
Template: storefront
Version: 2.0.0
Text Domain: hairstore-barcelona
Description: Rediseño claro/editorial de Hairstore Barcelona, sobre la misma base funcional (WooCommerce, filtros, mega-menú, favoritos, ficha de producto) que la v1, con estética informada por referencias reales de e-commerce de moda (no ThemeForest).
*/

/* ==========================================================================
   Design tokens — V2, paleta clara/editorial
   Se mantienen los MISMOS nombres de variable que la v1 (--hb-negro,
   --hb-nude, etc.) para no tener que tocar functions.php, pero el SIGNIFICADO
   cambia: "--hb-negro" ahora es el color de TEXTO oscuro (antes era el fondo
   oscuro), "--hb-blanco"/"--hb-nude" son los fondos claros (antes eran texto
   claro). Cualquier regla nueva de este fichero parte de estos tokens, nunca
   de un hex suelto, para poder reajustar la paleta entera desde aquí.
   ========================================================================== */
:root{
	/* Paleta y tipografía sacadas directamente del Figma "CEIN — Fashion
	   E-commerce" (get_design_context sobre el nodo "Landing - desktop"), no
	   inventadas: fondo blanco puro, texto negro puro, gris de borde #DDDDDD,
	   franja alterna #F5F4F4, gris de metadatos #565656. Único añadido propio:
	   un acento cálido terracota (CEIN no lleva color de marca, todo es
	   blanco/negro/foto) — coherente con el resto de la investigación de este
	   proyecto sobre tono cálido/no clínico para el público oncológico.
	   Los NOMBRES de variable se mantienen en --hb-* (v1) para no reescribir
	   functions.php; el valor y el rol es nuevo. */
	/* Dirección v4 (2026-07-18): valores EXACTOS del código fuente de Your
	   Next Store (scratchpad/yns/app/globals.css, paleta neutral Tailwind en
	   oklch → hex): texto #0a0a0a (neutral-950), botón primario #171717
	   (neutral-900), superficie de imagen/franja #f5f5f5 (neutral-100), borde
	   #e5e5e5 (neutral-200), gris de metadatos #737373 (neutral-500). El
	   acento terracota se conserva como color de marca para CTAs de consulta
	   (YNS no lleva acento; decisión propia documentada en MASTER_SPEC). */
	--hb-negro: #FFFFFF;        /* FONDO principal */
	--hb-blanco: #0a0a0a;       /* TEXTO principal (YNS foreground) */
	--hb-nude: #0a0a0a;         /* mismo texto (--hb-blanco y --hb-nude se usan indistintamente en el CSS heredado) */
	--hb-lila-1: #e5e5e5;       /* borde/división (YNS border) */
	--hb-lila-2: #B3562E;       /* acento cálido terracota propio — hover, focus, consulta */
	--hb-white: #FFFFFF;
	--hb-gris-azul: #737373;    /* gris de metadatos (YNS muted-foreground) */
	--hb-bg-alt: #f5f5f5;       /* superficie alterna / fondo de foto (YNS secondary) */
	--hb-primary: #171717;      /* botón primario sólido (YNS primary) */
	--hb-radius: 10px;          /* YNS --radius 0.625rem */
	--hb-radius-lg: 16px;       /* YNS rounded-2xl (fotos de tarjeta) */

	/* Skin YNS v4: Geist, la fuente REAL de Your Next Store (variable, OFL,
	   extraída del propio proyecto YNS a fonts/geist-*.woff2 — el @font-face
	   vive en cein.css, que carga en todas las páginas junto a este archivo). */
	--hb-font: "Geist", "Rethink Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Escala tipográfica de YNS (leída de las clases Tailwind del código
	   fuente): hero text-5xl/6xl, títulos de sección text-3xl (30px), nombre
	   de tarjeta text-base (16px) medium, nav text-sm (14px), botones
	   text-base (16px). Mucho más generosa que la de CEIN (24/18/16/13) —
	   además alineada con el objetivo senior-friendly del proyecto. */
	--hb-h1: clamp(36px, 4vw, 56px);  /* titular del hero (YNS text-5xl/6xl) */
	--hb-h2: 30px;       /* títulos de sección (YNS text-3xl) */
	--hb-h3: 20px;
	--hb-h5: 16px;       /* nombre de producto/categoría en tarjeta (YNS text-base) */
	--hb-body-1: 16px;   /* botones (YNS text-base) */
	--hb-body-2: 16px;   /* párrafos/intro */
	--hb-body-3: 14px;   /* enlaces de menú (YNS text-sm), texto pequeño */
	--hb-footer: 13px;   /* copyright, metadatos mínimos */

	/* Rejilla de YNS (max-w-7xl = 1280px, padding lateral lg:px-8 = 32px,
	   gap-8 = 32px entre tarjetas). */
	--hb-container-max: 1280px;
	--hb-container-pad: 32px;
	--hb-gutter: 32px;

	/* Margen real desde el borde de la ventana hasta la columna de contenido:
	   normalmente --hb-container-pad, pero en pantallas más anchas que
	   --hb-container-max crece para alinearse con la columna centrada de 1920px
	   (mismo margen que las cards, el header, etc.) en vez de pegarse al borde real. */
	--hb-inset: max(var(--hb-container-pad), calc(50vw - (var(--hb-container-max) / 2) + var(--hb-container-pad)));

	/* Alto real de ".hb-top-bar" (medido: 38.5px, estable en desktop y móvil
	   porque siempre es una sola línea de texto). "#masthead" lo usa como su
	   "top" para quedar siempre pegado justo debajo de la franja negra, nunca
	   solapado con ella. */
	--hb-topbar-h: 39px;

	/* Alto real de "#masthead" (medido: ~95px, min-height:90px + el poco extra
	   que añaden line-height/padding). Ahora que "#masthead" es "fixed" en
	   todas las páginas (ver más abajo, ".hb-top-bar"/"#masthead"), páginas sin
	   foto de portada necesitan reservar este hueco a mano — antes lo hacía
	   solo "sticky", pero eso no funciona en este sitio (ver el porqué junto a
	   "#masthead"). */
	--hb-masthead-h: 96px;
}

/* El plegado de fotos (cards de categoría, rejilla de productos) hace que el
   navegador "compense" el scroll por su cuenta (scroll anchoring) para que el
   contenido bajo el cursor no se mueva — pero esa compensación es una serie de
   saltos abruptos, no una animación, y encima compite con nuestro propio
   scroll suave calculado a mano. Como todo el scroll relevante ya lo
   controlamos nosotros (scrollWindowTo), se desactiva el anchoring nativo del
   navegador para que solo se mueva la página cuando lo decimos nosotros. */
html{ overflow-anchor: none; }

/* ==========================================================================
   Contenedor único: MISMO margen lateral en todas las secciones de la web
   (header, hero, secciones de contenido, footer). Antes cada bloque tenía
   su propio padding suelto (1.5em, 2em, 3em...) y no cuadraban los bordes.
   ========================================================================== */
.col-full{
	max-width: var(--hb-container-max) !important;
	padding: 0 var(--hb-container-pad) !important;
	box-sizing: border-box;
}
/* Storefront pinta ".col-full:before/:after{content:...;display:table/block}"
   para el clearfix de su layout original con "float" (que aquí no usamos, ver
   comentario de arriba: todo es flex/grid). Donde un ".col-full" concreto pasa
   a "display:flex" (la cabecera, la fila de navegación+iconos...) esos pseudo-
   elementos cuentan como items de más del flex — el ":after" final, sobre
   todo, se come un "gap" entero antes de sí mismo y deja el último elemento
   real (iconos de cuenta/carrito, etc.) corto respecto al borde derecho real. */
.col-full::before,
.col-full::after{
	content: none;
}
.hb-container{
	/* "--hb-inset" (responsivo, crece con el ancho de ventana), no el
	   "--hb-container-pad" plano de 32px: ese valor es el margen real del
	   LIENZO de Figma (1400px) — en una pantalla más ancha (1440, 1920,
	   2560px, las habituales), un margen fijo de 32px se queda clavado casi
	   a sangre completa y se siente agobiante. "--hb-inset" mantiene el
	   mismo 32px hasta 1400px y va abriendo hueco a partir de ahí. */
	max-width: none;
	margin: 0 auto;
	padding: 0 var(--hb-inset);
	box-sizing: border-box;
}
@media (max-width: 900px){
	:root{ --hb-container-pad: 24px; }
}

/* Rejilla real de 12 columnas para grids de tarjetas: cada tarjeta ocupa 3 columnas (4 por fila) */
.hb-grid12{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--hb-gutter);
}
.hb-grid12 > *{ grid-column: span 3; }
@media (max-width: 900px){
	.hb-grid12 > *{ grid-column: span 6; }
}

@font-face{
	font-family: "Rethink Sans";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("fonts/RethinkSans-Variable.woff2") format("woff2");
}
@font-face{
	font-family: "Rethink Sans";
	font-style: italic;
	font-weight: 400 800;
	font-display: swap;
	src: url("fonts/RethinkSans-Italic-Variable.woff2") format("woff2");
}

/* ==========================================================================
   Base
   ========================================================================== */
body{
	font-family: var(--hb-font);
	background-color: var(--hb-negro);
	color: var(--hb-nude);
	font-size: var(--hb-body-2);
	line-height: 1.5;
	overflow-anchor: none;
}

h1,h2,h3,h4,h5,h6{
	font-family: var(--hb-font);
	font-weight: 500;
	color: var(--hb-nude);
}
h1{ font-size: var(--hb-h1); line-height: 1.1; }
h2{ font-size: var(--hb-h2); line-height: 1.15; }
h3{ font-size: var(--hb-h3); line-height: 1.15; }

a{ color: var(--hb-nude); }
a:hover{ color: var(--hb-lila-2); }

/* ==========================================================================
   Header / navegación
   ========================================================================== */
/* Header sólido y estático (como CEIN): fondo blanco liso con línea inferior,
   SIEMPRE igual en todas las páginas — se acabó el header flotando
   semitransparente sobre la foto de portada de la v1. CEIN no superpone el
   header a la foto del hero; el hero empieza DEBAJO del header, en flujo
   normal. Esto simplifica mucho la cabecera: ya no hace falta position:fixed
   ni la clase ".hb-scrolled" ni el "containing block" del menú móvil. */
#masthead,
.site-header{
	background-color: var(--hb-negro);
	border-bottom: 1px solid var(--hb-lila-1);
	z-index: 200;
}
/* Storefront (tema padre) trae "a:focus,button:focus{outline:2px solid
   #7f54b3}" para TODO el sitio — de ahí el recuadro/óvalo morado nativo del
   navegador que no encaja con el tamaño real del logo, los enlaces del menú
   o los botones del mega-menú, y que iba saliendo uno a uno según se
   probaba cada elemento. Se anula aquí de golpe para toda la cabecera (clic
   con ratón) y se sustituye por un contorno propio, más discreto, solo al
   navegar por teclado (":focus-visible"). Los componentes que ya tienen su
   propio indicador de foco (p. ej. ".hb-mega-menu-group" vía ".is-active",
   los enlaces del menú principal vía color+subrayado) simplemente suman
   este contorno al suyo, sin conflicto. */
.site-header a:focus,
.site-header button:focus{
	outline: none;
}
.site-header a:focus-visible,
.site-header button:focus-visible{
	outline: 2px solid var(--hb-lila-2);
	outline-offset: 3px;
	border-radius: 3px;
}
/* ".storefront-primary-navigation" vive DENTRO de "#masthead": si pintase su
   propio fondo aquí encima, ambas capas semitransparentes se apilarían y esa
   franja (justo donde está la fila de enlaces) se vería más clara que el
   resto de la cabecera — la "pastilla" que no encajaba con el resto. Por eso
   va siempre transparente; el fondo lo pone únicamente "#masthead". */
.storefront-primary-navigation{
	background-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom: none;
}
/* "#masthead" ya no necesita salir del flujo: al ser sólido y estar SIEMPRE
   antes del hero (nunca superpuesto), basta con "sticky" normal — nada de
   "fixed", nada de contabilizar backdrop-filter como "containing block" del
   menú móvil. OJO: ".hb-top-bar" (la franja de contacto de arriba) SÍ sigue
   siendo "position:fixed" (ver su regla, más abajo) — al salir del flujo no
   reserva su propio hueco, así que "body" necesita este padding-top y
   "#masthead" necesita "top: var(--hb-topbar-h)" en su sticky; si no, el
   masthead arranca en la misma franja (y=0) que la barra de contacto fija y
   ambos se pisan, recortando la mitad de arriba del logo (bug real, visto
   en pantalla). */
body{ padding-top: var(--hb-topbar-h); }
#masthead{
	position: sticky;
	top: var(--hb-topbar-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 2em;
	min-height: 90px;
	box-sizing: border-box;
	padding: 18px var(--hb-inset) !important;
}
/* Storefront pinta un clearfix (":before{content:"";display:table}") pensado
   para layouts con "float" — aquí "#masthead" es flex, así que ese pseudo-
   elemento pasa a contar como un item más del flex (ancho 0 pero con su
   "gap" delante del logo), desplazándolo ~32px a la derecha del borde de
   relleno real. Sin el clearfix (innecesario en flex) el logo vuelve a
   quedar exactamente al ras del "padding" y alineado con la barra de
   contacto de arriba. */
#masthead::before,
#masthead::after{
	content: none;
}
/* En shop/categoría (no en la home) el hero se reduce bastante: es lo que
   más espacio vertical se comía antes de llegar a los filtros y la
   primera fila de cards, que ahora debe entrar entera sin scroll. Aquí no
   hay pestañas superpuestas (eso es solo cosa de la home), así que se
   puede encoger sin que nada se salga del hero. */
@media (min-width: 701px){
	body.tax-product_cat .hb-hero,
	body.woocommerce-shop .hb-hero{
		height: min(19vw, 27vh);
		min-height: 258px;
	}
	/* El texto centrado verticalmente (regla base de ".hb-hero-text") se
	   solapaba con la cabecera fija de encima al bajar tanto el alto del
	   hero — se ancla abajo del todo en su lugar, lejos de la cabecera pase
	   lo que pase su altura exacta en cada resolución. */
	body.tax-product_cat .hb-hero-text,
	body.woocommerce-shop .hb-hero-text{
		top: auto;
		bottom: 24px;
		transform: none;
	}
	/* El párrafo descriptivo (repite lo que ya dice el título + la miga de
	   pan de justo debajo) es lo que más alto añadía al bloque de texto —
	   se quita aquí para que el título+botón quepan de sobra en un hero
	   ya mucho más bajo, sin acercarse a la cabecera. */
	body.tax-product_cat .hb-hero-text p,
	body.woocommerce-shop .hb-hero-text p{
		display: none;
	}
}
/* La barra de navegación es hija de #masthead pero pinta su propio fondo;
   en portada (y shop/categoría) debe ser transparente también, como el resto
   del header-overlay. */
body.home .storefront-primary-navigation,
body.tax-product_cat .storefront-primary-navigation,
body.woocommerce-shop .storefront-primary-navigation{
	background-color: transparent;
	border-bottom: none;
	/* Mismo motivo que en "#masthead" más arriba: sin anular esto, este
	   elemento (ancestro del cajón de menú móvil más cercano que #masthead)
	   se queda con el backdrop-filter de la regla general y atrapa el cajón
	   position:fixed dentro de su propia altura. */
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
/* (Bloque "body.home #masthead.hb-scrolled..." de la v1 eliminado: era
   específico del header flotante/transparente sobre la foto de portada, que
   ya no existe — el header ahora es sólido siempre, en toda página,
   #masthead ya no lleva "position:fixed" ni backdrop-filter. Los enlaces del
   menú usan el mismo color en todas las páginas, heredado del texto normal. ) */
#masthead > .col-full{
	max-width: none !important;
	width: auto;
	padding: 0 !important;
	margin: 0;
	flex: 0 0 auto;
}
.site-header .site-search{ display: none; } /* oculto por ahora: el input de búsqueda de Storefront no cabe en la fila compacta de Figma */

/* Logo "HAIRSTORE / BARCELONA" a medida (independiente del site_title largo de SEO) */
.hb-site-branding{ margin: 0 !important; float: none; width: auto; }
.hb-logo-link{
	display: inline-flex;
	flex-direction: column;
	/* "BARCELONA" es más estrecho que "HAIRSTORE" — sin esto se quedaba a
	   ras del mismo borde izquierdo en vez de centrado bajo el nombre. */
	align-items: center;
	line-height: 1.27;
	text-decoration: none;
	/* La "H" de Rethink Sans deja ~33px de hueco óptico antes de la tinta a este
	   tamaño/peso; se compensa para que el logo quede a ras del mismo margen
	   que el texto del hero, los botones y las cards. */
	margin-left: 0; /* antes -33px de compensación óptica v1: rompía la alineación exacta con la línea de contenido */
}
.hb-logo-main{
	font-family: var(--hb-font);
	font-weight: 700;
	font-size: 38.76px;
	letter-spacing: 1.94px;
	color: var(--hb-nude);
	white-space: nowrap;
	transition: color .35s ease;
}
.hb-logo-sub{
	font-family: var(--hb-font);
	font-size: 14px;
	letter-spacing: 3.22px;
	color: var(--hb-nude);
	white-space: nowrap;
	/* Menos aire respecto a "HAIRSTORE" — el line-height de cada línea por
	   separado dejaba más hueco del que hacía falta entre ambas. */
	margin-top: -9px;
	transition: color .35s ease;
}

.storefront-primary-navigation{
	flex: 1 1 auto;
	border-bottom: none;
	clear: none;
	min-width: 0;
}
.storefront-primary-navigation .col-full{
	max-width: none !important;
	padding: 0 !important;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 25px;
	flex-wrap: nowrap;
}
/* Navegación centrada: logo a la izquierda, menú centrado, idioma+
   buscador+cuenta+carrito a la derecha — antes todo (incluida la nav)
   quedaba pegado al lado derecho junto al buscador. */
.main-navigation{ float: none; width: auto; margin: 0; flex: 1; }
.main-navigation ul.menu,
.main-navigation ul.nav-menu{ display: flex; align-items: center; justify-content: center; gap: 24px; }
.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a{
	/* QA final (2026-07): con "padding:4px" el objetivo táctil real medía
	   32px de alto, por debajo del umbral de 40px de la auditoría. Se sube el
	   padding vertical a 8px (horizontal se deja en 4px, el ancho ya superaba
	   40px en todos los ítems) y se cancela con margen negativo igual y de
	   signo contrario, para que el <li>/la fila de navegación no crezca ni
	   empuje el resto de la cabecera — el área pulsable extra queda
	   invisible, solapando un poco por encima/debajo sin efecto visual. */
	padding: 8px 4px !important;
	margin: -4px 0;
	font-size: 16px;
	white-space: nowrap;
}
.site-header-cart{ float: none; width: auto; margin: 0 !important; white-space: nowrap; }

/* Cuenta + carrito junto al buscador (el carrito se había quitado antes a
   propósito — "el header de Figma no lleva icono de carrito" — se repone
   aquí a petición expresa, con el mismo trazo que el resto de iconos). */
/* Antes sin padding: el área pulsable real era el icono a secas (18x18px),
   muy por debajo del mínimo recomendado (WCAG 2.5.8 AA pide 24x24px como
   mínimo) — 9px de padding lo dejaba en 36x36px, cómodo para el dedo sin
   obligar a la fila compacta de móvil (logo + botón "Menú" + estos 3
   iconos, todo en una sola línea) a partirse en dos. */
/* QA final (2026-07): 36x36 seguía 4px por debajo del umbral de 40x40 usado
   en la auditoría (score.js) — se sube a 11px de padding (18+22=40x40) sin
   tocar el tamaño visual del icono ni obligar a la fila de móvil a partirse
   en dos (mismo margen de sobra que tenía a 36px). */
/* "background/border-radius:none/0" hacen falta aquí: el reset genérico
   "button{background-color:var(--hb-nude);border-radius:999px}" (más abajo,
   sección "Botones") se comía estas dos propiedades en ".hb-open-search" (el
   ÚNICO de los 3 iconos que es un <button> de verdad, no un <a> — cuenta y
   carrito son enlaces, por eso no les afectaba) — con 0 padding antes era
   una píldora de 18x18px indistinguible del propio icono; al crecer el área
   pulsable se veía ya claramente como un óvalo sólido tapando la lupa. */
.hb-header-icon-btn{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--hb-nude);
	padding: 11px;
	background: none;
	border-radius: 0;
}
.hb-header-icon-btn:hover{ color: var(--hb-lila-2); background: none; }
.hb-header-icon-btn svg{ width: 18px; height: 18px; flex-shrink: 0; }
/* Mismo bug que ".hb-favorite-btn svg" (ver su comentario más abajo): dentro
   de un contenedor flex encogido (fila compacta de móvil, ver
   "@media(max-width:1150px)"), el ancho intrínseco de una imagen tampoco
   cuenta para el eje principal del flex y colapsaba a 0 (el alto sí se
   respetaba) — la lupa desaparecía del todo, no solo se veía tapada. */
.hb-search-icon{ flex-shrink: 0; }
/* Compartido por el badge de carrito Y el de favoritos (ver
   "hb_render_header_cart_count_badge"/"hb_render_header_favorites_count_badge"
   en functions.php) — mismo círculo numérico, misma posición sobre el icono,
   una sola regla en vez de duplicarla para el segundo badge. */
.hb-header-cart-count,
.hb-header-favorites-count{
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 15px;
	height: 15px;
	padding: 0 3px;
	border-radius: 999px;
	background: var(--hb-lila-2);
	color: var(--hb-negro);
	font-size: 10px;
	font-weight: 700;
	line-height: 15px;
	text-align: center;
}
/* Se pintan siempre en el DOM (ver comentario de "hb_render_header_cart_count_badge"
   en functions.php) — solo se ocultan visualmente cuando el recuento es 0, vía
   el "data-count" que WooCommerce (carrito) o "hb-favorites.js" (favoritos)
   actualizan cada uno por su lado. */
.hb-header-cart-count[data-count="0"],
.hb-header-favorites-count[data-count="0"]{ display: none; }

/* ==========================================================================
   Barra de contacto por encima de la cabecera (dirección + teléfono +
   WhatsApp), al estilo La Maison del Cabello — ver "hb_top_contact_bar" en
   functions.php para los datos reales del negocio.
   ========================================================================== */
.hb-top-bar{
	/* "fixed", no "sticky": "sticky" no se pega de verdad en este sitio (ver
	   el porqué junto a "#masthead" más arriba — "overflow-x:hidden" en
	   "body"/".site", cosa de Storefront, fuerza "overflow-y:auto" ahí por la
	   spec de CSS y eso rompe cualquier "sticky" dentro). Al ser "fixed" en
	   todas las páginas, el resto del contenido necesita el "padding-top"
	   compensatorio de "body" que ya se añade junto a "#masthead". */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 220;
	background: var(--hb-negro);
	border-bottom: 1px solid rgba(36,31,27,0.12);
	color: var(--hb-nude);
	font-size: 13px;
}
.hb-top-bar-inner{
	/* Mismo ancho/relleno EXACTOS que ".col-full" (donde vive el logo), no
	   "--hb-inset" — si no, esta barra y el logo de abajo no quedan
	   alineados en el borde izquierdo aunque los dos parezcan "centrados". */
	max-width: var(--hb-container-max);
	margin: 0 auto;
	padding: 9px var(--hb-container-pad);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5em;
}
/* El logo lleva "margin-left:-33px" para compensar el hueco óptico que deja
   la "H" de Rethink Sans a su tamaño (ver ".hb-logo-link" más abajo) —
   mismo ajuste aquí para que el borde izquierdo del texto de la dirección
   quede exactamente donde empieza la "H" del logo. */
.hb-top-bar-address{ margin-left: 0; /* antes -33px de compensación óptica v1: rompía la alineación exacta con la línea de contenido */ opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-top-bar-contacts{ display: flex; align-items: center; gap: 1.6em; flex: none; }
.hb-top-bar-contact{
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var(--hb-nude);
	text-decoration: none;
	white-space: nowrap;
	/* QA final (2026-07): objetivo táctil real de 19.5px de alto (solo el
	   texto), por debajo del umbral de 40px de la auditoría — el padding
	   vertical agranda el área pulsable, y el margen negativo igual y de
	   signo contrario cancela ese padding en el flujo (mismo truco que
	   ".hb-mega-menu-col a"/".hb-footer-menu a" más abajo), así que la barra
	   de contacto no crece ni un píxel visualmente. */
	padding: 11px 0;
	margin: -11px 0;
}
.hb-top-bar-contact:hover{ color: var(--hb-lila-2); }
.hb-top-bar-contact svg{ width: 15px; height: 15px; flex: none; }
@media (max-width: 900px){
	.hb-top-bar-address{ display: none; }
	.hb-top-bar-inner{ justify-content: flex-end; }
}

.hb-lang-search{
	display: flex;
	align-items: center;
	gap: 15px;
	flex: 0 0 auto;
	font-family: var(--hb-font);
	font-size: 16px;
	color: var(--hb-nude);
	white-space: nowrap;
}
/* QA final (2026-07): 15x15 dejaba el botón "Buscar" (".hb-header-icon-btn",
   padding:9px) en 33x33px, algo por debajo de los otros iconos del header
   (carrito/favoritos/cuenta, 18x18 + el mismo padding = 36x36). Se sube a
   18x18 para que las cuatro áreas pulsables del header sean iguales. */
.hb-search-icon{ width: 18px; height: 18px; color: var(--hb-nude); }

.main-navigation ul li a{
	font-family: var(--hb-font);
	font-size: 16px;
	color: var(--hb-nude);
	transition: color .2s ease;
}
/* Antes el hover pasaba de "--hb-nude" (#F7F4EE) a "--hb-white" (#FFFFFF):
   dos blancos casi idénticos, así que el efecto era invisible. Ahora usa el
   lila de acento del resto del sitio (bien distinto, no solo "más blanco")
   más un subrayado, para que se note tanto al pasar el ratón como al
   navegar con teclado. */
.main-navigation ul.menu > li > a:hover,
.main-navigation ul.menu > li > a:focus-visible{
	color: var(--hb-lila-2);
	text-decoration: underline;
	text-underline-offset: 4px;
}
/* Sección actual: el <li> de nivel superior correspondiente a la página en la
   que se está (o su ancestro, p. ej. "Productos" al ver una categoría) no
   tenía NINGÚN estilo distinto — no había forma de saber dónde se estaba. */
.main-navigation ul.menu > li.current-menu-item > a,
.main-navigation ul.menu > li.current-menu-ancestor > a,
.main-navigation ul.menu > li.current-menu-parent > a,
.main-navigation ul.menu > li.current_page_item > a,
.main-navigation ul.menu > li.current_page_ancestor > a,
.main-navigation ul.menu > li.current_page_parent > a{
	color: var(--hb-lila-2);
	text-decoration: underline;
	text-underline-offset: 4px;
}
/* Grupo activo dentro del mega-menú (Pelucas/Oncológico/Accesorios): mismo
   lenguaje visual que "current page" de arriba, mientras el panel está
   mostrando su contenido. */
.hb-group-link.is-active{ color: var(--hb-lila-2); }

/* Mega-menú desplegable "Productos": panel de cristal esmerilado sobre el hero, como en Figma
   (Frame 235, nodo 297:8523: rgba(169,174,196,.8) + blur(5px), padding 20px, gap 5px, texto #FFFBF3)
   !important necesario: el customizer de Storefront inyecta un <style> inline con
   ".main-navigation ul.menu ul.sub-menu{background-color:#f0f0f0}", más específico que
   nuestra regla, que ganaba el color pese a cargar después. */
/* Storefront muestra/oculta el desplegable moviéndolo con "left" entre
   -9999px y 0 (un salto seco, sin transición ni fundido — de ahí la
   sensación "cutre"). Se fija left:0 siempre y se anima con opacity +
   translateY en su lugar, con un pequeño retraso al ocultar para que la
   visibilidad no corte la transición a media animación. */
.main-navigation ul ul{
	left: 0 !important;
	background-color: rgba(255,255,255,1) !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	border-radius: 7px;
	padding: 20px;
	min-width: 252px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	box-shadow: 0 10px 30px rgba(28,21,34,0.25);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(6px);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
}
.main-navigation ul ul li a{
	width: auto;
	padding: 4px !important;
	color: #FFFBF3;
	font-size: 16px;
	white-space: nowrap;
}
.main-navigation ul ul li a:hover{ color: var(--hb-blanco); }
.main-navigation ul ul li{ display: block; }
/* "Pelucas naturales" es el primer ítem, destacado con flecha en Figma */
.main-navigation ul ul li:first-child > a{
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 5px !important;
}
.main-navigation ul ul li:first-child > a::before{
	content: "";
	display: inline-block;
	width: 17px;
	height: 12px;
	background: url("images/icon-arrow-menu.svg") no-repeat center / contain;
	flex-shrink: 0;
}

/* "Productos" ya no usa el desplegable plano genérico de arriba — tiene su
   propio mega-menú (ver ".hb-mega-menu" más abajo), así que se anula el
   desplegable por defecto solo para este ítem. SOLO en escritorio: en móvil
   el mega-menú se oculta entero (ver su media query) y es esta MISMA lista
   plana la que sigue haciendo falta dentro del cajón ".toggled" — anularla
   ahí habría dejado "Productos" sin ninguna categoría navegable en móvil. */
@media (min-width: 701px){
	.main-navigation ul li.hb-has-mega:hover > ul,
	.main-navigation ul li.hb-has-mega.focus > ul{
		display: none;
	}
}

/* ==========================================================================
   Mega-menú "Productos" — reconstruido literalmente sobre CEIN
   (get_design_context, nodo "Dropdown - desktop"): 3 (+1) columnas de
   enlaces de texto plano SIEMPRE visibles a la vez, sin botones que cambian
   de grupo ni fotos que cruzan en fundido — solo una foto fija a la derecha.
   Vive dentro de "#masthead" (ver hb_product_mega_menu en functions.php),
   que ahora es "position:sticky" — "position:absolute; top:100%" lo coloca
   justo debajo de la cabecera, sea cual sea su alto. */
.hb-mega-menu{
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background-color: var(--hb-negro);
	border-top: 1px solid var(--hb-lila-1);
	border-bottom: 1px solid var(--hb-lila-1);
	z-index: 300;
	box-sizing: border-box;
	overflow: hidden;
	height: 0;
	pointer-events: none;
	transition: height .45s cubic-bezier(0.22, 1, 0.36, 1);
}
.hb-mega-menu-inner{
	padding: 2.5em var(--hb-inset);
	display: grid;
	grid-template-columns: repeat(4, 200px) 1fr;
	gap: 2.5em;
}
.hb-mega-menu.is-open{ pointer-events: auto; }
.hb-mega-menu-groups{ display: contents; }
.hb-mega-menu-col{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.85em;
}
.hb-mega-menu-col-title{
	margin: 0 0 0.3em;
	color: var(--hb-gris-azul);
	font-size: var(--hb-footer);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.hb-mega-menu-col a{
	color: var(--hb-nude);
	font-size: var(--hb-body-2);
	/* QA final (2026-07): objetivo táctil real de 24px de alto (solo la línea
	   de texto), por debajo del umbral de 40px de la auditoría — mismo truco
	   padding+margen negativo que ".hb-top-bar-contact" más arriba, así que
	   las columnas del mega-menú no cambian de alto ni de espaciado visual. */
	padding: 8px 0;
	margin: -8px 0;
}
.hb-mega-menu-col a:hover{ color: var(--hb-lila-2); }
.hb-mega-menu-photo-col{
	position: relative;
	min-height: 260px;
	border-radius: 4px;
	overflow: hidden;
	background-color: var(--hb-bg-alt);
}
.hb-mega-menu-photo{
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}
@media (max-width: 1100px){
	.hb-mega-menu-inner{ grid-template-columns: repeat(2, 1fr); }
	.hb-mega-menu-photo-col{ display: none !important; }
}
@media (max-width: 1150px){
	/* En móvil el menú es el cajón a pantalla completa de Storefront
	   (".main-navigation.toggled"), no este mega-menú de escritorio. */
	.hb-mega-menu{ display: none !important; }
}

@media (max-width: 1100px){
	#masthead{ padding: 20px !important; flex-wrap: wrap; }
	.storefront-primary-navigation .col-full{ flex-wrap: wrap; justify-content: flex-start; }
}

/* Menú en móvil: por debajo de este ancho no cabe la fila de escritorio (logo +
   enlaces + idioma/buscador), y encima esa fila no tiene wrap propio (solo el
   contenedor exterior lo tenía), así que el menú acababa saliéndose de
   pantalla en vez de colapsar al botón de "Menú" que Storefront ya trae de
   serie. Aquí se oculta la fila de escritorio y se usa ese botón + el propio
   JS de Storefront (navigation.js, ya cargado) que añade la clase "toggled"
   al pulsarlo — solo hay que darle estilo de cajón a pantalla completa.
   Antes este bloque cortaba en 700px, pero Storefront (tema padre) muestra su
   PROPIO menú de escritorio ya desde 768px ("@media(min-width:768px)" en su
   style.css), y ese menú de escritorio (enlaces "Pelucas/Oncológico/
   Accesorios/Marcas/Mantenimiento/Blog/Contáctanos") no cabe de verdad en una
   sola fila hasta pasados los 1150px (medido: a 1100px el header aún envuelve
   a 162px de alto en vez de los 94px de una fila; a 1150px ya baja a 94px) —
   entre 701 y 1150px convivía el menú de escritorio de Storefront (sin sitio
   real para desplegarse, envolviendo en varias filas dentro de un header
   "position:fixed" que no reserva su propio hueco) con el hero de debajo,
   quedando literalmente encima de su texto. Igualarlo a 1150px hace que un
   único ancho decida "menú compacto sí/no" en todo el sitio. */
@media (max-width: 1150px){
	#masthead{
		padding: 14px var(--hb-inset) !important;
		min-height: auto;
		flex-wrap: nowrap;
		gap: 0.8em;
	}
	/* BUG (Playwright a 375/390/414/428px, ver "supervisor punch list" del
	   mini-carrito): "flex:1 1 auto" + "width:100%!important" le daban a este
	   contenedor (el envoltorio del logo, único hijo visible real) una
	   "flex-basis" igual al 100% del ancho de la fila entera — literalmente
	   tanto como el propio "#masthead" — así que en el reparto de "shrink"
	   entre este y ".storefront-primary-navigation" (el otro hijo flex, que
	   lleva el botón "Menú" + buscador/cuenta/carrito) este se quedaba con
	   más de la mitad del hueco real aunque el logo en sí (".hb-site-branding",
	   ~127px con la tipografía reducida de aquí abajo) no necesitara tanto,
	   dejando a los 3 iconos sin sitio real y empujándolos fuera del
	   viewport. Sin "width" aquí, la "flex-basis" vuelve a ser el ancho de
	   contenido real del logo (mismo comportamiento que fuera de esta media
	   query), y el resto del hueco pasa a la fila de iconos. */
	#masthead > .col-full{
		flex: 0 1 auto;
		max-width: 100% !important;
		min-width: 0;
	}
	.hb-site-branding{ flex: 0 0 auto; min-width: 0; }
	.hb-logo-link{ margin-left: 0; }
	.hb-logo-main{ font-size: 22px; letter-spacing: 1px; }
	.hb-logo-sub{ font-size: 9px; letter-spacing: 2px; }

	.storefront-primary-navigation{ flex: 1 1 auto; min-width: 0; }
	.storefront-primary-navigation .col-full{
		flex-wrap: nowrap;
		justify-content: flex-end;
		gap: 10px;
		min-width: 0;
	}
	/* "flex:0 0 auto" (antes "0 1 auto" + "min-width:0"): con la fila entera
	   sin espacio de sobra (logo + botón "Menú" + idioma/iconos no caben en
	   una sola línea a partir de cierto ancho), el "min-width:0" dejaba que
	   este contenedor se encogiera hasta 0 — el botón "Menú" seguía
	   pintándose a su tamaño real (no se encoge) pero DESDE una caja de
	   ancho 0, montado encima de lo que hubiera al lado (el logo). El botón
	   nunca debe encogerse: es la única forma de abrir el menú en móvil. */
	.main-navigation{ flex: 0 0 auto; display: flex; align-items: center; }
	.main-navigation .handheld-navigation{ display: none; }
	/* "ESP/CAT/ENG" es solo texto decorativo (no hay selector de idioma real
	   todavía, ver "hb_header_lang_search" en functions.php) — en la fila
	   compacta, donde ya cuesta encajar el resto, no aporta nada y sí quita
	   sitio; se oculta aquí y el resto (buscador/cuenta/carrito) puede
	   partirse en una segunda línea si hiciera falta en vez de solaparse. */
	.hb-lang{ display: none; }
	/* El comentario de arriba habla de partir esto en una segunda línea si
	   hiciera falta, pero con la "flex-basis" de "#masthead > .col-full" ya
	   corregida (ver su comentario, más arriba) sobra sitio de sobra en una
	   sola fila para los 3 iconos a 375-428px (medido con Playwright) — no
	   ha hecho falta tocar nada aquí. */
	.hb-lang-search{ font-size: 13px; gap: 6px; flex: 0 1 auto; min-width: 0; }
	.site-header-cart{ display: none; } /* no hay compra online por ahora; no ocupa sitio en una fila ya justa */

	/* El botón "Menú" de Storefront viene pensado para flotar a la derecha de
	   una fila ancha (padding-left grande para su icono ::before/::after) — en
	   nuestra fila compacta se redibuja como una simple píldora con texto.
	   Selector "button.menu-toggle" (no solo ".menu-toggle") a propósito:
	   Storefront define "button.menu-toggle{float:right;position:relative;
	   max-width:120px}" con esa misma especificidad (tipo+clase) — con solo
	   la clase perdíamos ese empate y "float:right" quedaba activo, sacando
	   el botón de su sitio en el flex y montándolo encima del logo/menú de
	   idioma (bug encontrado por el usuario). */
	button.menu-toggle{
		display: inline-flex !important;
		position: static !important;
		float: none !important;
		max-width: none !important;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		background: none;
		border: 1px solid currentColor;
		border-radius: 999px;
		padding: 0.5em 1.1em;
		font-size: 13px;
		color: inherit;
	}
	button.menu-toggle::before,
	button.menu-toggle::after,
	button.menu-toggle span::before{ display: none !important; }

	/* Menú desplegable a pantalla completa, en columna (sin hover: aquí no
	   aplica el mega-menú flotante de escritorio). */
	.main-navigation .primary-navigation{ display: none; }
	.main-navigation.toggled .primary-navigation{
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		padding: calc(64px + 2em) var(--hb-inset) 2em;
		background-color: var(--hb-negro);
		overflow-y: auto;
		z-index: 250;
	}
	.main-navigation.toggled ul.menu{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1.3em;
	}
	.main-navigation.toggled ul.menu > li > a{
		color: var(--hb-nude);
		font-size: 22px;
		padding: 0 !important;
	}
	/* Sin hover en táctil: el submenú "Productos" se muestra siempre
	   desplegado en línea bajo su padre, no como panel flotante. */
	.main-navigation.toggled ul ul{
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		transform: none !important;
		background: none !important;
		backdrop-filter: none !important;
		box-shadow: none;
		padding: 0.8em 0 0 1.2em;
		min-width: 0;
	}
	.main-navigation.toggled ul ul li a{
		color: var(--hb-nude);
		font-size: 17px;
	}

	/* BUG (encontrado en el pase móvil): el cajón (".primary-navigation",
	   position:fixed, z-index:250) vive DENTRO de "#masthead", que tiene su
	   propio z-index:200 — ese 200, no el 250, es lo que cuenta al comparar
	   con ".hb-top-bar" (fixed, z-index:220, hermano de #masthead), así que
	   la barra de teléfono/WhatsApp se colaba visualmente POR ENCIMA del
	   cajón entero en vez de quedar tapada por él. Al abrir el menú, subimos
	   el contexto de apilamiento de toda la cabecera por encima de esa barra
	   para que el cajón a pantalla completa la tape del todo, como debe. */
	#masthead:has(.main-navigation.toggled){ z-index: 260; }

	/* BUG más grave (mismo pase): dentro de ese contexto, el propio botón
	   "Menú" (position:static, sin z-index) queda por debajo del cajón
	   (z-index:250) — desaparece visualmente y, al no haber ningún otro
	   control para cerrar, el menú quedaba atascado abierto sin forma de
	   cerrarlo salvo recargar la página. El JS de Storefront ya interpreta
	   un segundo clic sobre ".menu-toggle" como "cerrar" (alterna la clase
	   "toggled"): basta con fijarlo en la esquina y subirlo por encima del
	   cajón para que se pueda pulsar. Mismo lenguaje visual que el resto de
	   cierres del sitio (".hb-modal-close": "×", 1.6em, var(--hb-nude)). */
	.main-navigation.toggled button.menu-toggle{
		position: fixed !important;
		top: 14px;
		right: var(--hb-inset);
		z-index: 260;
		/* "color:transparent" en vez de "font-size:0": el padding del botón
		   está en "em" (0.5em 1.1em, regla de arriba), así que ponerlo a
		   "font-size:0" también aplastaba ese padding a 0 y dejaba un
		   objetivo táctil de 2×2px, casi invisible — el bug que se ve en
		   "live-menu-fixed-375.png". "color:transparent" oculta el texto
		   "Menú" sin tocar el tamaño de fuente/padding, y el ancho/alto
		   mínimo de 44px asegura un objetivo táctil decente. */
		color: transparent;
		border-color: var(--hb-nude);
		min-width: 44px;
		min-height: 44px;
	}
	.main-navigation.toggled button.menu-toggle::after{
		/* "!important" en "display" a propósito: la regla genérica de arriba
		   ("button.menu-toggle::after{ display:none !important }") también
		   usa "!important" — sin él aquí, esa gana igual pese a la mayor
		   especificidad de este selector (los "!important" se comparan
		   entre sí antes que la especificidad). "width"/"height" también
		   explícitos: Storefront (tema padre) ya usa este mismo pseudo-
		   elemento para una de las dos barritas del icono "hamburguesa"
		   (14px×2px, position:absolute) — "inset:0" por sí solo no las
		   pisa porque son propiedades distintas que esta regla no tocaba, y
		   sin anularlas la "×" salía diminuta y descentrada arriba a la
		   izquierda del botón en vez de ocupar el círculo entero. Tampoco
		   basta con anular "width/height": Storefront además convierte esa
		   misma barrita en la mitad de su animación "hamburguesa → X" con
		   "background-color:#333" + "transform:rotate(-45deg)" en el
		   estado "toggled" — sin anular ambas propiedades aquí, la "×" salía
		   dibujada sobre un rombo gris oscuro girado. */
		content: "\00d7";
		display: flex !important;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		transform: none !important;
		background: none !important;
		align-items: center;
		justify-content: center;
		font-size: 1.6rem;
		line-height: 1;
		color: var(--hb-nude);
	}

}

/* ==========================================================================
   Botones
   ========================================================================== */
.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit{
	font-family: var(--hb-font);
	background-color: var(--hb-nude);
	color: var(--hb-negro);
	border-radius: 999px;
	border: none;
	padding: 0.8em 1.6em;
	font-size: var(--hb-body-3);
	transition: background-color .2s ease;
}
.button:hover,
button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover{
	background-color: var(--hb-lila-2);
	color: var(--hb-negro);
}
.button.hb-secondary{
	background-color: transparent;
	color: var(--hb-nude);
	border: 1px solid var(--hb-nude);
}
/* CTA cuadrado y sólido, DISTINTO de la píldora redondeada de arriba —
   convención ya usada suelta en ".hb-cart-checkout a.checkout-button"
   (Carrito) y ".hb-minicart-checkout-btn" (mini-cart): mismos valores
   exactos, aquí puestos en una clase compartida de verdad para que el
   Filter drawer (botón "Ver resultados") no invente una tercera variante de
   botón negro suelta. Los otros dos sitios no se tocan en este pase (fuera
   del alcance de esta tarea) pero ya podrían adoptar esta misma clase sin
   cambiar nada visualmente. */
.hb-btn-primary{
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	background-color: var(--hb-nude);
	color: var(--hb-negro);
	border: none;
	border-radius: 0;
	padding: 0.95em 1.5em;
	font-size: var(--hb-body-1);
	cursor: pointer;
	text-decoration: none;
}
.hb-btn-primary:hover{ background-color: var(--hb-lila-2); color: var(--hb-negro); }

/* WooCommerce inyecta un botón "mostrar contraseña" (".show-password-input",
   ver assets/js/frontend/woocommerce.js) dentro de TODOS los campos de
   contraseña del sitio (login, registro, checkout, editar cuenta) — pero el
   CSS compilado de este WooCommerce instalado no incluye la regla para esa
   clase (solo está en el ".scss" fuente del plugin, no en el ".css" que de
   verdad se sirve), así que sin esto el botón heredaba el "button{...}"
   genérico de arriba (pastilla negra grande) tapando el campo en vez de un
   icono de ojo pequeño dentro de él. Mismos SVG que trae el propio
   WooCommerce (icono ojo/ojo tachado), solo re-posicionados con nuestros
   tokens de color. */
.password-input{ position: relative; }
.password-input input[type="password"]{ padding-right: 2.6em; }
.show-password-input{
	position: absolute;
	top: 50%;
	right: 0.7em;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	min-width: 0;
	padding: 0;
	margin: 0;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	color: var(--hb-gris-azul);
	cursor: pointer;
}
.show-password-input:hover{ background-color: transparent; }
.show-password-input::before{
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z" fill="%23565656"/></svg>');
}
.show-password-input.display-password::before{
	background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 9.49999C15 4.89999 8.50002 3.79999 3.90002 7.19999C2.70002 8.09999 1.70002 9.29999 0.900024 10.6C1.10002 11 1.40002 11.4 1.70002 11.8C5.00002 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.79999 18.3 9.49999ZM10.1 7.19999C10.6 6.69999 11.4 6.69999 11.9 7.19999C12.4 7.69999 12.4 8.49999 11.9 8.99999C11.4 9.49999 10.6 9.49999 10.1 8.99999C9.60003 8.49999 9.60003 7.69999 10.1 7.19999ZM10 14.9C6.90002 14.9 4.00002 13.3 2.30002 10.7C3.50002 8.99999 5.10002 7.79999 7.00002 7.19999C6.30002 7.99999 6.00002 8.89999 6.00002 9.89999C6.00002 12.1 7.70002 14 10 14C12.2 14 14.1 12.3 14.1 9.99999V9.89999C14.1 8.89999 13.7 7.89999 13 7.19999C14.9 7.79999 16.5 8.99999 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z" fill="%23565656"/></svg>');
}

/* ==========================================================================
   Tarjetas de categoría / producto (overlay oscuro, como en Figma)
   ========================================================================== */
/* Card plana (como CEIN): CEIN NO tiene tarjetas con borde/sombra/esquinas
   redondeadas ni animación de "levitar" al hover — es foto + texto a secas,
   sin caja. Nada de eso es fiel a la v1, se quita entero. */
.hb-card{
	display: flex;
	flex-direction: column;
}
.hb-card-photo{
	background-color: var(--hb-white);
	/* Las fotos reales son retrato (550x820, ratio ~0.67). */
	aspect-ratio: 3/4;
	overflow: hidden;
	transition: height .5s cubic-bezier(0.65, 0, 0.35, 1), opacity .35s ease;
}
.hb-card-photo img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
/* Caption de las tarjetas de PRODUCTO (home/tienda/relacionados): sin caja de
   color, el texto va directo sobre el fondo de la página — mismo patrón que
   el "detail" de CEIN bajo cada foto de producto. */
.hb-card.hb-product-card .hb-card-caption{
	background: none;
	color: var(--hb-nude);
	padding: 0.85em 0 0;
	display: flex;
	flex-direction: column;
	gap: 0.3em;
}
.hb-card.hb-product-card .hb-card-caption h3{
	color: var(--hb-nude);
	font-size: var(--hb-body-1);
	line-height: 1.35;
	margin: 0;
	font-weight: 500;
}

/* Tarjetas de CATEGORÍA ("Categorías" de la home, hb_render_card en
   functions.php): reconstruidas como el "Collection banner" real de CEIN
   (get_design_context) — el texto va SUPERPUESTO a la foto, abajo, sobre un
   degradado oscuro, no en una caja de texto aparte debajo. Sin descripción
   larga ni círculo de flecha (CEIN no los lleva): solo el nombre. */
.hb-card:not(.hb-product-card){
	position: relative;
}
.hb-card:not(.hb-product-card) .hb-card-photo{
	aspect-ratio: 3/4;
	position: relative;
}
.hb-card:not(.hb-product-card) .hb-card-photo::after{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 100%);
	pointer-events: none;
}
.hb-card:not(.hb-product-card) .hb-card-caption{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.5em;
	color: var(--hb-white);
	z-index: 1;
}
.hb-card:not(.hb-product-card) .hb-card-caption h3{
	color: var(--hb-white);
	font-size: var(--hb-body-1);
	font-weight: 500;
	margin: 0;
}
/* La descripción larga y la flecha ya no encajan en el patrón de CEIN (solo
   nombre superpuesto a la foto) — se ocultan visualmente, sin quitarlas del
   HTML (las sigue leyendo un lector de pantalla/buscador). */
.hb-card:not(.hb-product-card) .hb-card-caption p,
.hb-card:not(.hb-product-card) .hb-card-arrow{
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* Grid de categorías (4 columnas en escritorio) */
.hb-grid{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--hb-gutter);
}
@media (max-width: 800px){
	.hb-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* Bloque "Lo más buscado" (home): productos reales con precio, entre las
   categorías y el CTA de "Reservar consulta" — antes la home no enseñaba
   ningún producto concreto con su precio antes de ese CTA. */
.hb-home-bestsellers{ padding: 1em 0 2.5em; }
.hb-bestsellers-head{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 1em;
}
.hb-bestsellers-head h2{ margin: 0; }
.hb-bestsellers-viewall{ color: var(--hb-nude); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.hb-bestsellers-grid{ grid-template-columns: repeat(4, 1fr); }
/* Fila de 5 (CEIN "What to Wear Now", home reconstruida — Fase 2 prioridad 1):
   ".hb-grid" de base ya es de 5 columnas, así que esto solo anula el 4 de
   ".hb-bestsellers-grid" cuando el shortcode pide "limit=5". */
.hb-bestsellers-grid--5{ grid-template-columns: repeat(5, 1fr); }
@media (max-width: 800px){
	.hb-bestsellers-grid{ grid-template-columns: repeat(2, 1fr); }
}
.hb-bestseller-cat{ color: var(--hb-gris-azul) !important; font-size: var(--hb-footer) !important; margin: 0.2em 0 0 !important; }
.hb-bestseller-price{ display: block; margin-top: 0.5em; font-weight: 700; color: var(--hb-nude); }
/* Base de ".hb-catalog-cta" (functions.php la mete donde iría el precio, en
   CUALQUIER contexto — grid de tienda, cards propias, bloques nativos de
   WooCommerce...): sin "color:inherit" de base, algunos de esos contextos
   (el bloque nativo "Carrito vacío" de WooCommerce entre ellos, ver más
   abajo) la dejaban con el gris casi negro por defecto de WooCommerce sobre
   nuestro fondo oscuro — prácticamente ilegible (bug de la auditoría). */
.hb-catalog-cta{ color: inherit; opacity: 0.75; }
/* Producto sin venta online activada (el resto del catálogo): "Llámanos..."
   no debería competir visualmente con un precio real en negrita. */
.hb-bestseller-price .hb-catalog-cta{ font-weight: 400; font-size: var(--hb-footer); opacity: 0.75; }

/* Card de producto compartida ("hb_render_product_card" en functions.php):
   foto+nombre+precio+favorito, usada tanto en "Lo más buscado" (home) como en
   "También te puede interesar" — foto y caption van cada una en su propio
   <a> (no toda la card en uno solo) porque el botón de favorito vive DENTRO
   del área de la foto y anidar un <button> dentro de un <a> es HTML
   inválido. */
/* "!important" necesario: Storefront trae ".hentry .entry-content a{text-decoration:underline}"
   (la home es una Page normal, WordPress le pone "hentry"/"entry-content" de
   serie) con más especificidad (2 clases + etiqueta) que un simple
   ".hb-card-caption-link" de una sola clase — sin esto el título y la
   categoría de cada card salían subrayados. */
.hb-card-caption-link{ display: block; color: inherit; text-decoration: none !important; }
.hb-product-card .hb-card-photo{ position: relative; }
/* Mismo botón redondo con borde que en la ficha de producto, pero aquí
   flotando sobre la foto: fondo blanco translúcido para que se lea el trazo
   sobre cualquier foto, con o sin fondo claro. */
/* QA final (2026-07): estaba en 34x34px, por debajo del objetivo táctil de
   40px que sí cumple este mismo botón en la ficha de producto (regla base
   ".hb-favorite-btn" más abajo en este fichero) — se sube a 40x40 aquí
   también para que las tres acciones de la card (favorito/vista
   rápida/pedir información) sean igual de fáciles de tocar, sobre todo para
   el público senior que marca MASTER_SPEC como prioridad. */
.hb-product-card .hb-favorite-btn{
	position: absolute;
	top: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	background: rgba(255,255,255,0.85);
	border-color: transparent;
}
.hb-product-card .hb-favorite-btn:hover{ background: var(--hb-white); }

/* Botón "+" de añadir rápido (referencia: CEIN/Krist) — esquina inferior
   derecha de la foto, mismo trazo circular que el corazón. */
/* QA final (2026-07): 34x34px → 40x40 (mismo motivo que ".hb-favorite-btn"
   de la card, ver su comentario arriba). El botón de "Vista rápida" de al
   lado ajusta su "right" para mantener el hueco de 10px entre los dos
   círculos. */
.hb-card-quickadd{
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 40px;
	height: 40px;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: none;
	background: var(--hb-blanco);
	color: var(--hb-negro);
	cursor: pointer;
	text-decoration: none !important;
	transition: transform .2s ease, background-color .2s ease;
}
.hb-card-quickadd:hover{ background: var(--hb-lila-2); color: var(--hb-white); transform: scale(1.08); }
.hb-card-quickadd svg{ width: 18px; height: 18px; flex-shrink: 0; }
.hb-card-quickadd.added::after{ content: "\2713"; } /* WooCommerce añade esta clase tras el AJAX de "añadir" */

/* Botón "Vista rápida" (referencia: CEIN) — mismo círculo que el "+" de
   añadir rápido, a su izquierda. Igual que ese y el corazón de favoritos,
   siempre visible (no oculto tras hover): esta card ya abandonó ese patrón
   para las otras dos acciones, así que la tercera sigue el mismo criterio. */
.hb-card-quickview{
	position: absolute;
	right: 60px;
	bottom: 10px;
	width: 40px;
	height: 40px;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: none;
	background: var(--hb-blanco);
	color: var(--hb-negro);
	cursor: pointer;
	transition: transform .2s ease, background-color .2s ease;
}
.hb-card-quickview:hover{ background: var(--hb-lila-2); color: var(--hb-white); transform: scale(1.08); }
.hb-card-quickview svg{ width: 18px; height: 18px; flex-shrink: 0; }

/* Puntitos de color (referencia: CEIN) — ocultos por defecto, aparecen solo
   al pasar el ratón por la tarjeta: no compiten con la foto en el estado de
   reposo, pero dejan claro que hay más colores sin tener que entrar a la ficha. */
.hb-card-swatches{
	position: absolute;
	left: 10px;
	bottom: 10px;
	display: flex;
	gap: 6px;
	padding: 6px 8px;
	border-radius: 999px;
	background: rgba(255,255,255,0.9);
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}
.hb-card:hover .hb-card-swatches{ opacity: 1; transform: translateY(0); }
.hb-card-swatch-dot{
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,0.15);
	flex: none;
}

/* Fila de tarjetas deslizable horizontalmente (como anam.ai): arranca alineada
   con el margen normal de la página pero se sale del viewport por la derecha,
   dejando intuir que hay más tarjetas al deslizar/arrastrar. */
.hb-scroll-row{
	display: flex;
	gap: var(--hb-gutter);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-top: 1em;
	padding-bottom: 3em;
	scrollbar-width: none;
	cursor: grab;
}
/* Cuando las cards visibles (tras filtrar por audiencia, p. ej.) no llegan a
   desbordar la fila, quedarse en "flex-start" (el valor por defecto, pensado
   para cuando SÍ desborda) deja un hueco vacío a la derecha. JS decide esto
   dinámicamente (ver "updateScrollRowAlignment" en hb-tabs.js) marcando esta
   clase cuando no hace falta scroll. */
.hb-scroll-row.is-centered{ justify-content: center; }
/* La card que queda en el borde encoge y pierde opacidad a la vez (calculado
   por JS según su posición), para que se sienta como que la propia tarjeta
   se aleja/desaparece, no como una sombra o degradado superpuesto. */
.hb-scroll-row > .hb-card{ transition: opacity .15s ease, transform .45s cubic-bezier(0.34, 1.56, 0.64, 1), border-color .3s ease; }
.hb-scroll-row::-webkit-scrollbar{ display: none; }
.hb-scroll-row.is-dragging{ cursor: grabbing; }
/* padding-left/right no funciona de forma fiable en un contenedor flex con
   overflow (el navegador ignora el padding en el eje del scroll); en su lugar
   usamos espaciadores invisibles como primer/último elemento de la fila.
   Sin scroll-snap (quitado: peleaba con el desplazamiento por JS del scroll
   vertical y el arrastre, deshaciéndolos en cada tick). */
.hb-scroll-spacer{ flex: 0 0 var(--hb-inset); }
.hb-scroll-row > .hb-card{
	flex: 0 0 320px;
	scroll-snap-align: start;
}
/* En móvil, 407px fijos son MÁS ANCHOS que la pantalla entera: apenas se ve
   una card (y a medias) por pantalla, y el difuminado de "se acerca al
   borde" (pensado para ~220px) se activa casi todo el tiempo porque 220px es
   más de la mitad del propio viewport. Un ancho relativo deja ver algo de la
   siguiente card, igual que en escritorio. */
@media (max-width: 700px){
	.hb-scroll-row > .hb-card{ flex: 0 0 78vw; }
}

/* Cards de la fila de "Categorías" (home): sin foto, como un botón de texto
   más — píldora compacta (mismo tamaño/borde que tenían antes las opciones
   de filtro tipo "Media melena"/"Black"/"EasiHair"), no el tamaño de card
   grande que tenía antes.
   Ya no es ".hb-scroll-row" (dejó de necesitar scroll lateral al ser
   píldoras pequeñas en vez de fotos grandes) — envuelve en varias líneas y
   centra, con su propio "display:flex" en vez de heredarlo de esa clase. */
/* ".hb-categorias-bg" es ".hb-full-bleed", y ".hb-full-bleed > .hb-container"
   ya pone 3em de padding-bottom (ver esa regla más abajo) — sumado al
   padding propio de esta fila daba un hueco doble (72px) antes de llegar a
   las píldoras. Se quita aquí esa mitad redundante — con las TRES clases
   (mismo patrón que ".hb-quienes-bg.hb-full-bleed > .hb-container" más
   abajo), si no, empataba en especificidad con la regla genérica y esta
   perdía por venir antes en el archivo. */
.hb-categorias-bg.hb-full-bleed > .hb-container{ padding-bottom: 0; }
/* "#hb-inline-category" (el panel que se abre al clicar una categoría)
   ya no tiene cabecera propia (nombre/contador/cerrar viven ahora arriba,
   en ".hb-cat-heading") — se queda con el padding-top genérico de
   ".hb-full-bleed > .hb-container" (3em) como único hueco antes de la
   rejilla de productos. */
#hb-categorias-scroll-row .hb-card-photo{ display: none; }
#hb-categorias-scroll-row .hb-card{
	flex: 0 0 auto;
	border-radius: 999px;
	border-color: rgba(36,31,27,0.4);
	text-decoration: none;
}
/* Solo el nombre, sin párrafo ni flecha — mismo peso visual que un chip de
   filtro normal, no un botón grande con icono. */
#hb-categorias-scroll-row .hb-card-caption p,
#hb-categorias-scroll-row .hb-card-arrow{ display: none; }
#hb-categorias-scroll-row .hb-card-caption{
	padding: 0.4em 0.9em;
	flex-direction: row;
	align-items: center;
}
#hb-categorias-scroll-row .hb-card-caption h3{
	font-size: var(--hb-body-3);
	font-weight: 400;
	text-decoration: none;
	transition: color .3s ease;
}
/* El carrusel de "todos los productos" (estado por defecto) se oculta
   mientras hay una categoría abierta abajo — mostrar ambos a la vez sería
   redundante. Reutiliza la clase "is-collapsed" que ya marca ese momento
   (se activa al clicar cualquier card, incluidas las de este mismo
   carrusel, ver "hb-tabs.js"). */
.hb-categorias-bg:has(#hb-categorias-scroll-row.is-collapsed) #hb-home-products-carousel{
	display: none;
}
/* Mismo lenguaje morado que el resto de filtros de la sección (fila de
   Todas/Pelucas/... y los triggers "Longitud →"/"Color →" del panel, ver
   ".hb-cat-prefilter button" y ".hb-quickfilter-toggle" más abajo): hover
   es solo un aviso sutil (borde+texto), el relleno morado SÓLIDO se
   reserva para el estado realmente marcado — así se distingue pasar el
   ratón por encima de tener la categoría seleccionada de verdad. La marca
   ".is-selected" la pone JS al clicar una card (ver "selectCardBySlug" en
   hb-tabs.js) y la quita al cerrar el panel o cambiar de categoría. */
#hb-categorias-scroll-row .hb-card:hover{ border-color: var(--hb-lila-2); }
#hb-categorias-scroll-row .hb-card:hover .hb-card-caption h3{ color: var(--hb-lila-2); }
#hb-categorias-scroll-row .hb-card.is-selected{ border-color: var(--hb-lila-2); }
#hb-categorias-scroll-row .hb-card.is-selected .hb-card-caption{
	background-color: var(--hb-lila-2);
	transition: background-color .2s ease;
}
#hb-categorias-scroll-row .hb-card.is-selected .hb-card-caption h3{ color: var(--hb-negro); }
/* "×" para cerrar la categoría abierta de un clic — clicar la card YA
   seleccionada cierra el panel en vez de volver a abrirlo (ver el "click"
   de ".hb-card" en hb-tabs.js); la "×" es solo la pista visual de ese
   comportamiento, mismo criterio que el botón de grupo activo de arriba. */
#hb-categorias-scroll-row .hb-card.is-selected .hb-card-caption h3::after{
	content: "×";
	margin-left: 0.5em;
	font-size: 1.3em;
	line-height: 1;
	vertical-align: middle;
}

/* Panel de categoría en línea en la Home (se rellena por AJAX al hacer clic
   en una card de categoría; no navega, no recarga, no cambia la URL). */
.hb-inline-category{
	padding-bottom: 3em;
	/* El panel aparecía de golpe (innerHTML + hidden=false, sin transición
	   ninguna) justo cuando terminaba de plegarse la fila y arrancaba el
	   scroll — dos movimientos secos y desconectados en vez de uno solo
	   fluido. Con este fundido + pequeño desplazamiento, entra suave y a la
	   vez que el scroll, en lugar de "primero un salto, luego otro". */
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .4s ease, transform .4s ease;
}
.hb-inline-category.is-visible{ opacity: 1; transform: translateY(0); }
/* Reutilizadas tal cual desde ".hb-cat-heading-meta" arriba (nombre,
   contador, cerrar) — antes vivían dentro de ".hb-inline-cat-head", ahora
   eliminada junto con el resto de la cabecera propia del panel. */
.hb-inline-cat-count{ color: var(--hb-nude); opacity: 0.7; font-size: var(--hb-body-3); white-space: nowrap; }
.hb-inline-cat-close{
	box-sizing: border-box;
	background: none;
	border: 1px solid var(--hb-nude);
	color: var(--hb-nude);
	border-radius: 50%;
	width: 32px;
	height: 32px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	flex: 0 0 auto;
}
/* El acordeón en sí ("hb-accordion-item"/"hb-accordion-head"/
   "hb-filter-option"...) es el MISMO componente que pinta el cajón "Todos
   los filtros" de la tienda (ver "hb_render_filter_checkboxes" en
   functions.php) — su CSS ya existe más abajo en este archivo, no hace
   falta redefinirlo aquí. Solo el espacio antes de la rejilla de productos
   es propio de este panel. */
.hb-inline-cat-empty{ color: var(--hb-nude); opacity: 0.8; }

/* Miga de pan "Productos / Categoría / Producto" de la ficha de producto real
   (ver "hb_product_ficha_breadcrumb" en functions.php), en la misma fila que
   "Producto anterior/Siguiente producto" (".hb-product-head-nav" más abajo).
   Trunca a una sola línea con "…" en vez de envolver: una miga larga (categoría
   o nombre de producto largos) no debe volver esta fila más alta que de
   costumbre. */
.hb-inline-product-breadcrumb{
	color: var(--hb-nude);
	opacity: 0.6;
	font-size: var(--hb-body-3);
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* "Productos / Categoría / Producto": los dos primeros tramos navegan (el
   último, el producto actual, es solo texto). */
.hb-inline-breadcrumb-link{
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.hb-inline-breadcrumb-link:hover{ background: none; color: inherit; opacity: 0.8; }

/* ==========================================================================
   Secciones generales / Hero / Tabs / Reseñas (Home)
   ========================================================================== */
.hb-section{ padding: 3em 0; }
/* La franja de marcas es lo último del contenido de la home, y justo
   después Storefront añade ~110px de margen/relleno propios (de
   ".site-main"/".content-area", genéricos de cualquier página, no algo
   nuestro) antes del footer. El hueco real de ARRIBA no es solo el margen
   entre secciones (48px): hay que sumarle el propio "padding-top" de
   ".hb-section" (otros 48px) hasta llegar a la franja — 96px en total. Se
   resta de esos ~158px de abajo solo lo necesario para igualar los 96px de
   arriba, no todo el sobrante. */
.hb-section:has(.hb-brands-ticker){ margin-bottom: -62px; }
/* La fila de categorías de arriba (".hb-categorias-bg") reserva más espacio
   real por debajo de las cards (zona de difuminado del scroll) que el
   "padding" normal de sección — el hueco de verdad hasta "Reservar
   consulta" mide 96px (medido hasta la card más baja del todo, no
   necesariamente la última del DOM) frente a los 48px que hay entre la
   franja y "Opiniones". Margen POSITIVO (nunca solapa nada, a diferencia de
   uno negativo) para igualar ambos a 96px. */
.hb-section:has(.hb-ticker){ margin-bottom: 48px; }

.hb-hero{
	position: relative;
	background-size: cover;
	background-position: center;
	/* Figma: 958px de alto sobre un lienzo de 1920px = 49.9vw. Se acota con vh
	   para que en pantallas bajas (portátil) no ocupe toda la ventana. */
	height: min(38vw, 48vh);
	min-height: 320px;
	display: flex;
	align-items: center;
}
.hb-hero::before{
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(28,21,34,.35) 0, rgba(28,21,34,0) 160px),
		linear-gradient(90deg, rgba(28,21,34,.25) 0%, rgba(28,21,34,.08) 40%, rgba(28,21,34,0) 60%);
}
/* Anclado ABAJO a la izquierda (CEIN: p-[64px], gap-[20px]). El padding
   horizontal NO es 64px fijos: en CEIN (lienzo 1400) 64px = margen de
   contenido (32) + 32 extra; en pantallas más anchas el margen de contenido
   crece (--hb-inset), así que se calcula igual — si no, el texto del hero se
   quedaba pegado al borde real de la pantalla mientras el resto del
   contenido va por la línea centrada de 1400px (desalineación detectada por
   el owner a ~2000px). El max-width crece en la misma medida para no
   comerse ancho de texto (mismo bug de "letra a letra" que ya pasó en v1). */
.hb-hero-text{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 64px calc(var(--hb-inset) + 32px);
	box-sizing: border-box;
	max-width: calc(556px + var(--hb-inset) + 32px);
	display: flex;
	flex-direction: column;
	gap: 20px;
	color: var(--hb-white);
	z-index: 1;
}
.hb-hero-text h1{ color: var(--hb-white); margin: 0; font-size: var(--hb-h1); line-height: 32px; }
.hb-hero-text p{ font-size: var(--hb-body-2); margin: 0; color: var(--hb-white); }
.hb-hero-btn{
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: #F8F9FA; /* botón "Shop Now" exacto de CEIN: gris muy claro, no hueco/borde */
	border: none;
	border-radius: 0; /* CEIN no redondea sus botones */
	padding: 11px 18px; /* px-18 py-11 exactos de CEIN */
	color: var(--hb-blanco);
	font-size: var(--hb-body-1); /* 15px, tamaño exacto de botón en CEIN */
	/* Como <button> (shop/categoría, ver ".hb-cat-desc-toggle") el texto SÍ
	   envuelve en línea por defecto (a diferencia del <a> de la home) — con
	   "Ver menos ↑" el texto ya no cabía en una sola línea dentro del ancho
	   que se había ajustado justo para "Ver más →", partiéndose en dos y
	   recortando la píldora. */
	white-space: nowrap;
	/* "!important" hace falta: mismo bug de especificidad de Storefront que
	   ".hb-card-caption-link"/".hb-collection-banner" (".hentry .entry-content
	   a{text-decoration:underline}") — sin esto el botón del hero (un <a> en
	   la home) salía subrayado. */
	text-decoration: none !important;
}
/* En shop/categoría "Ver más" es un <button> (despliega el panel de
   descripción de más abajo), no un <a> — hay que resetear los estilos por
   defecto del navegador para que sea idéntico al de la home. */
button.hb-hero-btn{
	background: none;
	cursor: pointer;
	font-family: var(--hb-font);
	/* Storefront trae varias reglas de color para "button" a secas (algunas
	   con !important en su propia hoja) que le ganaban por especificidad al
	   ".hb-hero-btn" de más arriba en cuanto el elemento es un <button> de
	   verdad — el texto salía casi negro sobre la foto en vez de en color
	   nude. */
	color: var(--hb-nude) !important;
}
/* Mismo bug de Storefront que en el resto del sitio: "button:focus" trae de
   serie un contorno morado que no encaja con el diseño. */
.hb-cat-desc-toggle:focus{ outline: none; }
.hb-cat-desc-toggle:focus-visible{
	outline: 2px solid var(--hb-lila-2);
	outline-offset: 3px;
}

/* Pestañas superpuestas en el borde inferior del hero: píldoras separadas (como en Figma) */
.hb-hero-tabs-nav{
	position: absolute;
	left: var(--hb-inset); right: var(--hb-inset); bottom: 8%;
	display: flex;
	gap: 30px;
	backdrop-filter: blur(5px);
}
.hb-hero-tabs-nav button{
	flex: 1;
	font-family: var(--hb-font);
	background: rgba(169,174,196,0.8);
	border: none;
	border-radius: 25px;
	padding: 10px 20px;
	cursor: pointer;
	color: var(--hb-nude);
	font-size: var(--hb-h5);
}
.hb-hero-tabs-nav button.is-active{
	background-color: rgba(28,21,34,0.8);
}
/* Botón "fijado" (clic, no solo hover): el panel se queda desplegado para
   todo el mundo y el propio botón gana una "✕" para poder cerrarlo — mismo
   patrón que "✕ Cerrar" en ".hb-cat-desc-toggle". Storefront trae un reset
   global "button::after{display:none}" (spinner de "añadir al carrito"); al
   no fijar "display" nunca lo pisábamos, aunque nuestro selector fuera más
   específico — el cascade resuelve cada propiedad por su cuenta, no la
   regla entera. */
.hb-hero-tabs-nav button.is-pinned::after{
	display: inline;
	content: "\2715";
	margin-left: 8px;
	font-size: 0.85em;
}

/* El anclaje ahora es SIEMPRE abajo-izquierda con padding fijo (regla base
   ".hb-hero-text", igual que CEIN) — ya no depende de centrar verticalmente
   ni de calcular a mano dónde queda la cabecera, así que no hace falta un
   bloque de excepciones por ancho de pantalla como en la v1. En móvil se
   reduce el padding (64px es demasiado en una pantalla de 375px de ancho). */
@media (max-width: 640px){
	.hb-hero-text{ padding: 32px; max-width: none; }
}

/* Fondo gris-azul de las pestañas (Quiénes somos / Qué ofrecemos / Qué vendemos) */
.hb-quienes-bg{ background-color: var(--hb-gris-azul); }
/* Anula el padding genérico de .hb-full-bleed > .hb-container (3em arriba/abajo):
   aquí el padding vive dentro de .hb-tabs-panel-inner para que desaparezca
   del todo cuando el panel está plegado, sin dejar una franja de color. */
.hb-quienes-bg.hb-full-bleed > .hb-container{ padding-top: 0; padding-bottom: 0; }
.hb-quienes-bg .hb-scroll-arrow{ margin-top: 0.6em; }
/* Plegado por defecto: SIN franja visible en absoluto (ni texto ni padding).
   Se despliega con una animación suave al pasar el ratón o hacer clic en un
   botón, y se repliega igual de suave al salir. Nunca se ven varios paneles
   a la vez.
   El JS mide la altura real del contenido (scrollHeight) y anima la altura
   del viewport hasta ese valor exacto (tiene que ser "height", no
   "max-height": los paneles van con position:absolute para poder apilarse,
   así que quedan fuera del flujo y nunca aportan altura real al viewport;
   con max-height la caja se quedaba siempre en 0 aunque el texto tuviera
   opacity:1). Los paneles están apilados unos sobre otros dentro del
   viewport y el JS anima su transform + opacity de forma coordinada: el
   saliente y el entrante se mueven en la MISMA dirección (arriba si vas de
   un botón a otro a su derecha, abajo si vas hacia la izquierda), en vez de
   que cada uno colapse por su cuenta (eso era lo que causaba que un texto
   se viera encima del otro). */
.hb-tabs-panel-viewport{
	position: relative;
	max-width: 780px;
	margin: 0 auto;
	overflow: hidden;
	height: 0;
	transition: height .45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* ".hb-tabs-panel" lo reutilizan DOS sistemas de pestañas distintos: las del
   hero (Quiénes somos/Qué ofrecemos/Qué vendemos), que SÍ van dentro de un
   ".hb-tabs-panel-viewport" y necesitan el apilado en absoluto + fundido
   cruzado de abajo; y las pestañas sueltas de otras páginas (p. ej.
   Mantenimiento: "Pelucas naturales/sintéticas"), que NO tienen ese viewport
   — con "position:absolute" sin un ancestro posicionado cercano, esos paneles
   se posicionaban respecto a la ventana entera y aparecían superpuestos
   arriba del todo de la página. Por defecto, pues, un simple mostrar/ocultar
   en el flujo normal; el apilado en absoluto solo se activa dentro del
   viewport de las pestañas del hero. */
.hb-tabs-panel{ display: none; }
.hb-tabs-panel.is-active{ display: block; }
.hb-tabs-panel-viewport .hb-tabs-panel{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	text-align: center;
	opacity: 0;
	transform: translateY(0);
	transition: transform .4s ease, opacity .4s ease;
	pointer-events: none;
}
.hb-tabs-panel-viewport .hb-tabs-panel.is-entering-up{ transform: translateY(24px); transition: none; }
.hb-tabs-panel-viewport .hb-tabs-panel.is-entering-down{ transform: translateY(-24px); transition: none; }
.hb-tabs-panel-viewport .hb-tabs-panel.is-active{ opacity: 1; transform: translateY(0); pointer-events: auto; }
.hb-tabs-panel-viewport .hb-tabs-panel.is-leaving-up{ opacity: 0; transform: translateY(-24px); }
.hb-tabs-panel-viewport .hb-tabs-panel.is-leaving-down{ opacity: 0; transform: translateY(24px); }
.hb-tabs-panel-inner{ padding: 2em 0; }
.hb-tabs-panel h2{ color: var(--hb-nude); }
/* Bug de la v1→v2 (Fase 2, punto 4 de MASTER_SPEC.md): este "#E7E6E4" era
   texto casi blanco pensado para el fondo oscuro de la v1 y nunca se migró a
   un token al aclarar la web — con "h2"/"a" de esta misma regla ya en
   "--hb-nude" (texto oscuro), este "p" se quedó como el único suelto,
   prácticamente invisible sobre blanco (p. ej. el panel "Consejos" de
   Mantenimiento). */
.hb-tabs-panel p{ color: var(--hb-nude); }
.hb-tabs-panel a{ color: var(--hb-blanco); text-decoration: underline; }
/* QA final (2026-07): el comentario anterior asumía que el texto oscuro
   "mantiene contraste de sobra" también sobre el fondo medio de
   ".hb-quienes-bg" (#565656, panel "Ver más" de Shop/categoría) — medido,
   es falso: #14110E sobre #565656 da un ratio de 2.56:1, muy por debajo del
   mínimo WCAG AA (4.5:1). Este único uso real de ".hb-tabs-panel" hoy en el
   sitio es precisamente ese panel (ver "hb_shop_category_hero" en
   functions.php), así que se sobreescribe aquí a texto claro — sin tocar la
   regla base de arriba, que sigue sirviendo si este componente se reutiliza
   algún día sobre un fondo blanco. */
.hb-quienes-bg .hb-tabs-panel h2,
.hb-quienes-bg .hb-tabs-panel p{ color: var(--hb-negro); }
.hb-quienes-bg .hb-tabs-panel a{ color: var(--hb-negro); }

/* Fondo negro de la sección de Categorías — todo justificado a la
   izquierda (título incluido, ya no llevaba "text-align:center" inline) y
   con una línea fina que separa el bloque de filtros del título, mismo
   estilo que usa el panel "Coleteros"/".hb-filterbar" al filtrar. */
.hb-categorias-bg{ background-color: var(--hb-negro); }
.hb-categorias-bg h2{ color: var(--hb-nude); text-align: left; margin: 0; }

/* Título "Categorías" ↔ breadcrumb "Categorías / Coletas": la identidad de
   la categoría abierta (nombre, contador, cerrar) vivía antes en su propia
   cabecera dentro del panel de abajo (".hb-inline-cat-head", eliminada) —
   ahora vive aquí arriba, junto al propio filtro. El panel de abajo pasa a
   ser solo la rejilla de productos. JS (loadCategory/closeCategoryPanelFn
   en hb-tabs.js) rellena/vacía "hb-cat-heading-current" y muestra/oculta
   el separador y el bloque de la derecha. */
.hb-cat-heading{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
}
.hb-cat-heading-base{
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}
.hb-cat-heading-sep{ color: var(--hb-nude); opacity: 0.5; }
.hb-cat-heading-current{ color: var(--hb-nude); }
/* ":not([hidden])" — si no, un [hidden] del user-agent pierde contra
   cualquier regla de autor que fije "display" con la misma especificidad:
   el bloque se vería aunque nadie hubiera abierto una categoría. */
.hb-cat-heading-meta:not([hidden]){
	display: flex;
	align-items: center;
	gap: 1em;
	flex: 0 0 auto;
}

/* Grupo (Todas/Pelucas/Oncológico/Accesorios) y subcategorías en la MISMA
   fila, separados por una línea vertical — antes eran dos filas aparte,
   con un hueco vacío grande a la derecha del grupo en cuanto había una
   categoría concreta elegida (las subcategorías, en su propia fila, no
   podían "subir" a rellenar ese hueco). Uniendo las dos en el mismo flujo
   flex: con un grupo elegido, sus ~4 subcategorías entran justo detrás en
   la misma línea; con "Todas" (12 subcategorías) simplemente envuelve a
   una segunda línea, igual que ya hacía antes la fila de resultados por
   sí sola. */
.hb-cat-filterrow{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8em;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	padding-top: 1.2em;
	border-top: 1px solid rgba(36,31,27,0.15);
}
/* ".hb-cat-prefilter" y "#hb-categorias-scroll-row" siguen existiendo tal
   cual en el HTML (el JS los sigue usando de referencia — filtro por
   grupo, "selectCardBySlug"...), pero ya no pintan su propia caja: sus
   botones/cards pasan a ser hijos directos del flex de arriba, en el
   mismo flujo/wrap que el resto. */
.hb-cat-prefilter,
#hb-categorias-scroll-row{
	display: contents;
}
.hb-cat-divider{
	align-self: stretch;
	width: 1px;
	background-color: rgba(36,31,27,0.15);
}
/* Con "Todas" no hay subcategorías que mostrar (ver "applyGroup" en
   hb-tabs.js) — la línea divisoria, sin nada detrás, quedaría suelta. */
.hb-cat-divider:has(+ #hb-categorias-scroll-row.is-empty){ display: none; }

/* Hueco donde JS mueve ".hb-filterbar" (Longitud →/Color →/Material →/
   Marca →/Todos los filtros ⚙) al abrir una categoría — ver
   "moveFilterBarOut" en hb-tabs.js. "margin-left:auto" lo empuja al
   extremo derecho de la fila, vacío no ocupa espacio ni descuadra nada. */
.hb-cat-filterbar-slot{ margin-left: auto; }
/* Dentro de este hueco, ".hb-filterbar" ya no necesita sus propias líneas
   arriba/abajo ni margen — esta fila entera ya tiene su propia línea
   divisoria por encima (ver ".hb-cat-filterrow"); las suyas se verían
   como una segunda línea redundante flotando a mitad de fila. */
.hb-cat-filterbar-slot .hb-filterbar{
	border: none;
	margin: 0;
	padding: 0;
}
/* Grupo + subcategorías + los 4 triggers rápidos ya no caben cómodos en
   pantallas medianas (mismo corte que usa el resto de la cabecera, ver
   "@media (max-width: 1100px)" más abajo) — se ocultan los triggers
   sueltos y se deja "Todos los filtros ⚙" como único acceso, que ya cubre
   exactamente las mismas opciones. */
@media (max-width: 1100px){
	.hb-cat-filterbar-slot .hb-quickfilter{ display: none; }
}
/* "Filtros seleccionados: ... Borrar filtros" va justo debajo de "Filtrar
   por" — que vive empujado al extremo derecho de la fila de arriba (ver
   ".hb-cat-filterbar-slot") — así que también se alinea a la derecha, en
   vez de arrancar por defecto desde el margen izquierdo de la sección. */
.hb-cat-activefilters-slot{
	display: flex;
	justify-content: flex-end;
}

/* Botones de grupo (Todas/Pelucas/Oncológico/Accesorios): mismo
   tratamiento gráfico que los triggers "Longitud →"/"Color →" del panel de
   filtros (ver ".hb-filterbar-trigger" más abajo) — texto plano sin borde
   en reposo, solo se convierten en píldora morada sólida al pasar el
   ratón (aviso) o al quedar seleccionados (marcado persistente). Sin el
   truco de margen negativo que usa ".hb-filterbar-trigger": aquí el
   padding es fijo (no cambia entre reposo y hover, nada que compensar) y,
   combinado con "display:contents" en el padre, ese margen negativo
   generaba un solape real entre botones en vez de compensar nada. */
.hb-cat-prefilter button{
	background: none;
	border: none;
	border-radius: 999px;
	font-family: var(--hb-font);
	font-size: var(--hb-body-3);
	color: var(--hb-nude);
	cursor: pointer;
	padding: 0.4em 0.9em;
	transition: background-color .15s ease, color .15s ease;
}
/* "background-color" explícito: hay una regla genérica
   "button:hover{background-color:var(--hb-lila-2)}" en el resto del sitio
   (ver el mismo motivo documentado en ".hb-swatch:hover" más abajo) que,
   sin esto, pintaría el mismo morado de FONDO detrás de un texto que este
   propio hover ya pone en morado — texto invisible sobre su propio fondo. */
.hb-cat-prefilter button:hover{ color: var(--hb-lila-2); background-color: transparent; }
.hb-cat-prefilter button:focus{ outline: none; }
.hb-cat-prefilter button:focus-visible{ outline: 2px solid var(--hb-lila-2); outline-offset: 3px; }
/* Morado (--hb-lila-2), no nude: mismo color que usa la fila de resultados
   para marcar la categoría abierta (ver "#hb-categorias-scroll-row
   .hb-card.is-selected" más arriba). */
.hb-cat-prefilter button.is-active{ background-color: var(--hb-lila-2); color: var(--hb-negro); }
/* "×" para volver a "Todas" de un clic — solo en el botón de grupo
   realmente activo, nunca en "Todas" (su propio "data-group" vacío no
   coincide con ":not([data-group=''])"). El clic lo gestiona JS: clicar un
   botón de grupo YA ACTIVO deselecciona en vez de volver a aplicar el
   mismo filtro (ver el "click" de ".hb-cat-prefilter button" en
   hb-tabs.js) — la "×" es solo la pista visual de que ese clic quita el
   filtro, no hace falta un elemento aparte que enganchar. */
/* "display:inline" explícito: Storefront trae "button::after{display:none}"
   (reset global, para el spinner de "añadir al carrito") con más
   especificidad de tipo que gana por defecto — sin esto el "content" se
   fija pero no se pinta. */
.hb-cat-prefilter button.is-active[data-group]:not([data-group=""])::after{
	content: "×";
	display: inline;
	margin-left: 0.5em;
	font-size: 1.3em;
	line-height: 1;
	vertical-align: middle;
}

.hb-scroll-arrow{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	border: 1px solid var(--hb-nude);
	color: var(--hb-nude);
	margin-top: 1em;
}
/* Mientras su panel del hero está fijado (ver hb-tabs.js), la flecha "↓" pasa
   a texto "✕" y funciona también como cierre — mismo pin que el botón de la
   pestaña, así que hace falta que se vea clicable. */
.hb-scroll-arrow.is-pinned{
	cursor: pointer;
}
.hb-scroll-arrow.is-pinned:focus-visible{
	outline: 2px solid var(--hb-lila-2);
	outline-offset: 3px;
}

.hb-reviews{
	margin: 0 0 3em;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--hb-gutter);
	align-items: stretch;
}
.hb-reviews-photo img{ width: 100%; height: 100%; border-radius: 18px; display: block; object-fit: cover; }
.hb-reviews-photo{ order: 2; }
.hb-reviews-list{
	order: 1;
	/* Reskin claro (Home v3, MASTER_SPEC fila 7 "Opiniones"): el
	   "rgba(255,255,255,.18)" de antes daba un cristal translúcido pensado
	   para flotar sobre un fondo OSCURO (herencia de una versión previa del
	   sitio en negro) — sobre el fondo blanco actual quedaba prácticamente
	   invisible (blanco casi puro sobre blanco). Franja alterna sólida
	   "--hb-bg-alt", igual que el resto de tarjetas/paneles claros del sitio. */
	background-color: var(--hb-bg-alt);
	border-radius: 18px;
	padding: 2.5em 3em;
}
.hb-review{ padding: 1.2em 0; border-top: 1px solid rgba(36,31,27,0.15); }
.hb-review-head{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4em; }
.hb-review-stars{ color: var(--hb-lila-2); letter-spacing: 0.1em; }

/* Franja animada (mismo mecanismo que ".hb-ticker" de "Reservar consulta":
   ver "@keyframes hb-ticker-scroll" más abajo, reutilizada tal cual) — el
   HTML ya trae los logos DUPLICADOS una vez seguidos (ver el contenido de
   la página de inicio) para que el bucle de "translateX(-50%)" a
   "translateX(0)" quede continuo sin salto al reiniciar. */
.hb-brands-ticker{
	/* Reskin claro (Fase 2, punto 5): misma franja alterna "--hb-bg-alt"
	   que ".hb-ticker" de "Reservar consulta", ya no el fondo oscuro v1. */
	background-color: var(--hb-bg-alt);
	overflow: hidden;
	padding: 1em 0;
}
.hb-brands-ticker-track{
	display: inline-flex;
	align-items: center;
	gap: 3.5em;
	padding-right: 3.5em;
	animation: hb-ticker-scroll 40s linear infinite;
}
.hb-brands-ticker:hover .hb-brands-ticker-track{ animation-play-state: paused; }
.hb-brand-logo{ flex: none; }
/* Reskin claro (Fase 2, punto 5): los recortes en blanco puro ("-white.png",
   pensados para el fondo oscuro de la v1) quedaban invisibles sobre esta
   franja clara. Se usa el archivo ORIGINAL de cada marca (ya subido en
   uploads junto al recorte blanco, p.ej. "marca-amore.png" vs
   "marca-amore-white.png") — su logo real a color/negro, legible tal cual
   sobre fondo claro sin necesitar ningún filtro CSS de inversión. */
.hb-brand-logo img{ max-height: 40px; width: auto; opacity: 0.9; transition: opacity .2s ease; }
.hb-brand-logo:hover img{ opacity: 1; }

@media (max-width: 800px){
	.hb-reviews{ grid-template-columns: 1fr; }
	.hb-hero-tabs-nav{ font-size: 13px; }
	.hb-hero-tabs-nav button{ padding: 0.8em 0.5em; }
}

/* ==========================================================================
   Home reconstruida a la ARQUITECTURA de secciones de CEIN (Fase 2,
   prioridad 1 — feedback directo del owner: la home tenía tokens/estilo CEIN
   pero seguía con la composición de secciones de la v1). Orden y tipo de
   sección según "get_design_context" sobre el nodo "Landing - desktop"
   6:309 (capas reales), ver tabla en MASTER_SPEC.md → "Home — reconstrucción
   de COMPOSICIÓN a la estructura CEIN". Reutiliza tokens ya fijados
   (--hb-container-*, --hb-gutter, --hb-h1/h2/body-*, --hb-bg-alt,
   .hb-btn-primary, .hb-ticker, .hb-grid) — nada nuevo salvo el layout propio
   de "collection banner"/"banner gigante", que no existía como patrón.
   ========================================================================== */

/* #4 — Frase editorial como SECCIÓN propia bajo el hero (antes vivía dentro
   del propio hero, mezclada con el titular). Sección plana, sin franja de
   color ni imagen, solo tipografía centrada — igual que CEIN. */
.hb-editorial-phrase{ padding: 2.5em 0 3.5em; }
.hb-editorial-phrase p{
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
	font-size: var(--hb-h2); /* 18px, mismo tamaño que CEIN da a esta frase */
	line-height: 24px;
	color: var(--hb-nude);
}

/* #5 — 3 collection banners (Pelucas / Oncológico / Accesorios), sustituyen
   a las píldoras + fila de 12 categorías de la v1. Alto 532px exacto de
   CEIN, texto blanco sobre degradado, mismo tratamiento visual que ".hb-hero"
   pero repetido x3 en vez de un único full-bleed. */
.hb-collection-banners-head{ margin-bottom: 1.5em; }
.hb-collection-banners-head h2{ margin: 0; }
.hb-collection-banners-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--hb-gutter);
}
.hb-collection-banner{
	position: relative;
	display: block;
	height: 532px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	/* "!important" hace falta: Storefront trae ".hentry .entry-content a{
	   text-decoration:underline}" (la home es una Page normal, WordPress le
	   pone "hentry"/"entry-content" de serie) con más especificidad que este
	   simple ".hb-collection-banner" — mismo bug ya documentado y resuelto en
	   ".hb-card-caption-link" más arriba. Sin esto, el título/descripción
	   sobre la foto salían subrayados en blanco. */
	text-decoration: none !important;
}
.hb-collection-banner::before{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20,17,14,0) 45%, rgba(20,17,14,.68) 100%);
	transition: background-color .3s ease;
}
.hb-collection-banner:hover::before{ background-color: rgba(20,17,14,0.08); }
.hb-collection-banner-text{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 32px;
	box-sizing: border-box;
	z-index: 1;
}
.hb-collection-banner-text h3{ margin: 0 0 4px; font-size: var(--hb-h2); line-height: 24px; color: var(--hb-white); }
.hb-collection-banner-text p{ margin: 0; font-size: var(--hb-body-3); line-height: 20px; color: var(--hb-white); opacity: 0.9; }

@media (max-width: 800px){
	.hb-collection-banners-grid{ grid-template-columns: 1fr; }
	/* 343px exacto de CEIN mobile (nodo "Landing - mobile" 55:1995). */
	.hb-collection-banner{ height: 343px; }
}

/* #7 — 2 banners gigantes (719px alto exacto de CEIN). Uno informativo
   (Pelucas oncológicas/prótesis), el otro es el CTA "Reserva tu consulta" —
   el ticker "Reservar consulta" (antes una franja suelta aparte) se integra
   AQUÍ, pegado al borde inferior del banner CTA, en vez de vivir como
   sección independiente sin relación con nada (ver MASTER_SPEC.md, "el
   ticker... NO están en la landing CEIN: se integran en los huecos 7 y 9"). */
.hb-giant-banners-grid{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--hb-gutter);
}
.hb-giant-banner{
	position: relative;
	min-height: 719px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	display: flex;
	color: var(--hb-white);
	/* "!important" hace falta: mismo bug de especificidad de Storefront que
	   ".hb-collection-banner" arriba (".hentry .entry-content a{text-decoration:
	   underline}"). */
	text-decoration: none !important;
}
.hb-giant-banner::before{
	content: "";
	position: absolute;
	inset: 0;
	/* Verificado con Playwright a 375px: en desktop el contenido tiene mucho
	   hueco libre encima (ancla abajo con "align-self:flex-end"), así que un
	   degradado que se aclara del todo cerca de arriba bastaba — pero en
	   móvil el propio contenido (título de 3-4 líneas + párrafo + botón) casi
	   llena el alto entero del banner (719px → 420px), así que su parte de
	   arriba caía en la zona SIN oscurecer del degradado, sobre el fondo
	   claro de la foto: texto blanco casi invisible (no un recorte real,
	   contraste roto). Degradado sin ningún tramo totalmente transparente,
	   oscurece lo bastante en todo el alto para que el texto blanco se lea
	   arriba y abajo en los dos anchos. */
	background: linear-gradient(180deg, rgba(20,17,14,.4) 0%, rgba(20,17,14,.22) 45%, rgba(20,17,14,.55) 100%);
}
.hb-giant-banner-content{
	position: relative;
	z-index: 1;
	align-self: flex-end;
	padding: 48px;
	box-sizing: border-box;
	max-width: 520px;
}
.hb-giant-banner-content h3{ margin: 0 0 12px; font-size: var(--hb-h1); line-height: 32px; color: var(--hb-white); }
.hb-giant-banner-content p{ margin: 0 0 20px; font-size: var(--hb-body-2); color: var(--hb-white); }
/* Modificador de ".hb-btn-primary" (nunca una tercera variante de botón
   negro suelta, ver MASTER_SPEC.md): el original es "display:block;
   width:100%", aquí hace falta en línea y de ancho natural. */
.hb-btn-primary--inline{ display: inline-block; width: auto; }

/* Banner CTA: columna completa (foto + contenido arriba + ticker pegado
   abajo del todo), no solo el contenido anclado abajo como el otro banner. */
.hb-giant-banner-cta{
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
}
.hb-giant-banner-cta .hb-giant-banner-content{ align-self: auto; padding-bottom: 32px; }
.hb-giant-banner-cta .hb-ticker{
	position: relative;
	z-index: 1;
	background-color: var(--hb-bg-alt);
	/* ".hb-giant-banner" pone "color:--hb-white" para el título/párrafo sobre
	   la foto — sin esto el ticker heredaba ese blanco y quedaba casi
	   invisible sobre su propio fondo claro "--hb-bg-alt". */
	color: var(--hb-nude);
}

@media (max-width: 800px){
	.hb-giant-banners-grid{ grid-template-columns: 1fr; }
	.hb-giant-banner{ min-height: 420px; }
	.hb-giant-banner-content{ padding: 32px; }
}

/* #8 — Declaración editorial centrada sobre fondo "--hb-bg-alt" (franja
   alterna de siempre), 720px de ancho, sustituye a los 3 paneles
   "Quiénes somos/Qué ofrecemos/Qué vendemos" de la v1. */
.hb-editorial-statement{ background-color: var(--hb-bg-alt); text-align: center; }
.hb-editorial-statement-inner{ max-width: 720px; margin: 0 auto; }
.hb-editorial-statement h2{ margin: 0 0 16px; font-size: 24px; line-height: 32px; color: var(--hb-nude); }
.hb-editorial-statement p{ margin: 0; font-size: var(--hb-body-2); color: var(--hb-nude); }

/* #9 — Grid de 5 fotos reales de la tienda (equivalente a "Shop Instagram"
   de CEIN). Reutiliza ".hb-grid" tal cual (ya es de 5 columnas en escritorio,
   2 en móvil) — solo se ajusta la foto a cuadrado. El carrusel de marcas
   (antes franja suelta aparte) se integra justo debajo, dentro del mismo
   bloque social, en vez de vivir sin relación con nada. */
.hb-photo-grid-head{ margin-bottom: 1.5em; }
.hb-photo-grid-head h2{ margin: 0; }
.hb-photo-grid img{ width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }

/* ==========================================================================
   Blog — reskin editorial (CEIN): fondo claro, sin cards negras/radio grande,
   eyebrow en mayúsculas gris (mismo patrón que ".hb-bestseller-cat" en la
   card de producto) en vez de la píldora oscura de la v2 anterior. Reutiliza
   tokens existentes (--hb-h1/h2/h5, --hb-body-*, --hb-footer, --hb-gutter,
   --hb-gris-azul, --hb-lila-1) — no introduce ningún color/tamaño nuevo.
   Solo CSS/markup visual: page_for_posts, pills de categoría y el sistema de
   compartir (WhatsApp/Facebook) siguen exactamente igual que antes.
   ========================================================================== */
/* "#masthead" pinta ~39px más abajo de lo que le tocaría por flujo normal
   (mismo comportamiento en TODAS las páginas, no algo de esta plantilla —
   comprobado también en Preguntas frecuentes/Contáctanos, donde la propia
   miga de pan nativa de Storefront absorbe ese hueco sin que se note). Al
   quitar esa miga de pan duplicada aquí (ver "remove_action" en
   functions.php, sección Blog/Post), ese hueco quedaba al descubierto y se
   comía el eyebrow "Actualidad"/la primera línea del H1 bajo la cabecera.
   Se reserva a mano con el mismo margen extra. */
.hb-blog #main,
.hb-blog-single #main{ padding: calc(1.5em + 40px) 0 3em; }

/* Full-bleed edge-to-edge (referencia CEIN "16:1702"/"16:1927": la foto llega
   hasta el borde real del viewport, no solo hasta el gutter de ".col-full").
   Se marca también con la clase ".hb-full-bleed" ya existente en el markup
   (mismo patrón 100vw/-50vw que ".hb-hero"/".hb-quienes-bg" — ver esa regla
   más abajo) en vez de reinventar la técnica de breakout aquí. Altura 712px
   medida en píxeles reales sobre el frame desktop aplanado (712px exactos,
   coincide con lo documentado en MASTER_SPEC.md); en mobile, el frame CEIN
   de esta pantalla concreta está exportado a 543px de ancho (no los 375px
   habituales del resto de frames "-mobile" del archivo) con una foto de
   650px de alto — normalizado a los 375px de esos otros frames, 650 * (375/543)
   ≈ 449px (medido sobre el frame aplanado, ±unos px). */
.hb-blog-hero{
	background-size: cover;
	background-position: center;
	height: 712px;
}
@media (max-width: 640px){
	.hb-blog-hero{ height: 449px; }
}

/* Eyebrow reutilizado en 3 sitios: cabecera del listado, tag de categoría en
   el post y eyebrow de cada card de blog (listado + relacionados). */
.hb-blog-eyebrow{
	display: block;
	color: var(--hb-gris-azul);
	font-size: var(--hb-footer);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 0.5em;
}

.hb-blog-heading{ margin: 1.2em 0; }
.hb-blog-heading h1{ margin: 0; font-size: var(--hb-h1); color: var(--hb-nude); }

.hb-blog-filters{ display: flex; flex-wrap: wrap; gap: 0.6em; margin: 1.5em 0; }
.hb-blog-filters a{
	border: 1px solid var(--hb-lila-1);
	border-radius: 999px;
	padding: 0.6em 1.2em;
	font-size: var(--hb-body-3);
	color: var(--hb-nude);
}
.hb-blog-filters a.is-active{ background: var(--hb-nude); color: var(--hb-negro); border-color: var(--hb-nude); }

/* Banner de artículo destacado: foto full-width + card de texto blanca
   superpuesta (referencia CEIN "16:1702"/"16:1927" — ver MASTER_SPEC.md). */
.hb-blog-featured{ position: relative; display: block; margin-bottom: 2.5em; }
.hb-blog-featured-img{
	aspect-ratio: 21/9;
	background-size: cover;
	background-position: center;
}
.hb-blog-featured-card{
	position: relative;
	background: var(--hb-white);
	max-width: 460px;
	margin-top: -90px;
	margin-left: var(--hb-gutter);
	padding: 1.8em;
	box-sizing: border-box;
}
.hb-blog-featured-card h2{
	font-size: var(--hb-h2);
	line-height: 1.4;
	margin: 0 0 0.7em;
	color: var(--hb-nude);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hb-blog-featured-card .hb-blog-eyebrow{ margin-bottom: 0.7em; }
.hb-blog-featured-card .hb-blog-date{ margin: 0; }
@media (max-width: 640px){
	.hb-blog-featured-img{ aspect-ratio: 4/3; }
	.hb-blog-featured-card{ margin-top: -50px; margin-left: 16px; margin-right: 16px; max-width: none; padding: 1.3em; }
}

/* Card de artículo (listado + relacionados): foto arriba, sin borde/radio,
   caption plano debajo — mismo lenguaje "sin caja" que ".hb-card" de
   producto/categoría, con eyebrow de categoría en vez de precio. */
.hb-blog-grid{ grid-template-columns: repeat(3, 1fr); }
.hb-blog-card{ display: block; }
.hb-blog-card-img{ aspect-ratio: 4/3; background-size: cover; background-position: center; background-color: var(--hb-bg-alt); }
.hb-blog-card-body{ padding: 1em 0 0; }
.hb-blog-date{ display: block; font-size: var(--hb-footer); color: var(--hb-gris-azul); }
.hb-blog-card h3{
	font-size: var(--hb-h5);
	line-height: 1.4;
	color: var(--hb-nude);
	margin: 0 0 0.5em;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hb-blog-readmore{ display: inline-block; margin-top: 0.6em; font-size: var(--hb-body-3); font-weight: 600; text-decoration: underline; color: var(--hb-nude); }

.hb-blog-single-main h1{ margin: 0 0 0.3em; font-size: var(--hb-h1); color: var(--hb-nude); }
.hb-blog-single-main .woocommerce-breadcrumb{ margin: 1em 0; }
.hb-blog-tag{
	display: inline-block;
	color: var(--hb-gris-azul);
	font-size: var(--hb-footer);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 1.5em;
}
.hb-blog-single-layout{ max-width: 760px; margin: 0 auto; }
/* Foto del post más ancha que la columna de texto (referencia CEIN "16:2121":
   foto ~1259px medida sobre el frame desktop aplanado frente a una columna
   de texto ~785px, ambas centradas sobre el mismo eje — no es full-bleed de
   viewport como ".hb-blog-hero", solo más ancha que ".hb-blog-single-layout"
   dentro del ".col-full" de la página, que da de sobra de los 1259px). */
.hb-blog-single-media{ max-width: 1259px; margin: 0 auto 1.5em; }
.hb-blog-single-img{ width: 100%; margin-bottom: 0; display: block; }
.hb-blog-content{ font-size: var(--hb-body-2); line-height: 1.7; color: var(--hb-nude); }
.hb-blog-content p{ margin-bottom: 1.2em; }
.hb-blog-share{ display: flex; gap: 1em; align-items: center; margin: 2em 0; font-size: var(--hb-body-3); }
.hb-blog-share a{ color: var(--hb-nude); text-decoration: underline; }
.hb-blog-nav{ display: flex; justify-content: space-between; gap: 1em; border-top: 1px solid var(--hb-lila-1); padding-top: 1.5em; font-size: var(--hb-body-3); }
.hb-blog-nav a{ color: var(--hb-nude); }

/* Tira de relacionados a 4 columnas (antes: sidebar oscura de 3 tarjetas) —
   misma card de blog reskineada de arriba, a ancho completo bajo el
   artículo. */
.hb-blog-related{ margin: 3em 0 0; }
.hb-blog-related h3{ font-size: var(--hb-h2); margin: 0 0 1.2em; color: var(--hb-nude); }
.hb-blog-related-grid{ grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px){
	.hb-blog-grid{ grid-template-columns: repeat(2, 1fr); }
	.hb-blog-related-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
	.hb-blog-grid{ grid-template-columns: 1fr; }
	.hb-blog-related-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Página de Mantenimiento / Cuidados
   ========================================================================== */
.hb-maint-hero{
	background-size: cover;
	background-position: center;
	height: 320px;
	border-radius: 18px;
	display: flex;
	align-items: flex-end;
	padding: 2em;
	margin: 1.5em 0;
}
.hb-maint-hero h1{
	background-color: var(--hb-white);
	/* Bug de la v1→v2 (Fase 2, punto 4 de MASTER_SPEC.md): "--hb-negro" era el
	   color de TEXTO oscuro en v1 y ahora es el fondo blanco del sitio (ver
	   comentario de los tokens al principio de este archivo) — con el
	   significado nuevo, esta pastilla quedaba en texto blanco sobre fondo
	   blanco, invisible. El texto de la pastilla usa el token de texto oscuro
	   ("--hb-nude"), igual que el resto de etiquetas claras del sitio. */
	color: var(--hb-nude);
	padding: 0.6em 1.4em;
	border-radius: 999px;
	font-size: var(--hb-h5);
	/* Fase 2, punto 4 (punch list verificador): la página no tenía ningún
	   <h1> real (solo esta pastilla visual + el breadcrumb) — se convirtió el
	   span en <h1>Mantenimiento</h1> para dar estructura/SEO correctos sin
	   tocar el aspecto de pastilla; el reset de margin es necesario porque el
	   <h1> nativo trae margin propio que rompería el "align-items: flex-end"
	   del contenedor. */
	margin: 0;
	line-height: 1.3;
	font-weight: 500;
	display: inline-block;
}
.hb-maint-columns{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3em;
	align-items: start;
	margin-bottom: 2em;
}
.hb-maint-video{
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	background-color: var(--hb-negro);
	aspect-ratio: 16/10;
}
.hb-maint-video img{ width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }
.hb-maint-video .hb-play{
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%,-50%);
	width: 64px; height: 64px;
	border-radius: 50%;
	background: var(--hb-white);
	color: var(--hb-negro);
	display: flex; align-items: center; justify-content: center;
	font-size: 22px;
}

.hb-accordion-item{ border-top: 1px solid rgba(36,31,27,0.15); }
.hb-accordion-head{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1em 0;
	cursor: pointer;
	font-weight: 600;
}
.hb-accordion-head::after{ content: "+"; font-size: 1.3em; }
.hb-accordion-item.is-open .hb-accordion-head::after{ content: "\2212"; }
.hb-accordion-body{ display: none; padding-bottom: 1.2em; font-size: var(--hb-body-3); }
.hb-accordion-item.is-open .hb-accordion-body{ display: block; }

.hb-maint-contact{ text-align: center; margin: 3em auto; max-width: 600px; }
.hb-maint-contact .hb-contact-links{ justify-content: center; }

.hb-related-products .hb-card-tag{
	display: block;
	text-align: center;
	background: var(--hb-lila-2);
	color: var(--hb-negro);
	font-size: 12px;
	padding: 0.5em;
	border-radius: 10px 10px 0 0;
	margin-bottom: -10px;
}

@media (max-width: 800px){
	.hb-maint-columns{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Página de Contáctanos
   ========================================================================== */
.hb-contact-hero{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--hb-gutter);
	margin-top: -1.5em;
}
.hb-contact-hero-text{ padding: 2.5em 0; }
.hb-contact-hero-text h1{ margin-top: 0; }
.hb-contact-hero-map iframe{ width: 100%; height: 100%; min-height: 420px; border: 0; display: block; border-radius: 15px; }
.hb-contact-links{ display: flex; flex-wrap: wrap; gap: 0.8em; margin: 1.5em 0; }
.hb-contact-links a{
	border: 1px solid var(--hb-nude);
	border-radius: 999px;
	padding: 0.6em 1.2em;
	font-size: var(--hb-body-3);
	white-space: nowrap;
}

/* Sección de ancho completo (rompe el contenedor de 1720px hasta el borde del viewport) */
.hb-full-bleed{
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}
.hb-full-bleed > .hb-container{ padding-top: 3em; padding-bottom: 3em; }

.hb-contact-purple{
	/* Bug de la v1→v2 (Fase 2, punto 4 de MASTER_SPEC.md): este
	   "rgba(255,255,255,0.18)" era un lavado claro pensado para sentarse
	   SOBRE el fondo oscuro que tenía la v1 (de ahí el nombre de la clase,
	   heredado de cuando era lila-1 sólido en una web clara) — al volver la
	   web entera a fondo blanco, ese lavado casi transparente se volvía blanco
	   sobre blanco: la sección "¿Tiene más preguntas?" dejaba de leerse como
	   franja distinta del resto de la página. Se sustituye por el token de
	   franja alterna que ya usa el resto del sitio para este mismo propósito
	   ("--hb-bg-alt", #F5F4F4 — home, mega-menú, blog…), en vez de reinventar
	   un gris suelto. */
	background-color: var(--hb-bg-alt);
}
.hb-contact-purple > .hb-container{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3em;
}
.hb-contact-purple .wpcf7-form input,
.hb-contact-purple .wpcf7-form textarea{
	width: 100%;
	border: none;
	border-radius: 10px;
	padding: 0.9em 1.1em;
	margin-bottom: 1em;
	font-family: var(--hb-font);
}
.hb-howtoarrive dl{ margin: 1.5em 0 0; }
.hb-howtoarrive .hb-htw-row{
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 1em;
	padding: 1.1em 0;
	border-top: 1px solid rgba(36,31,27,0.15);
}
.hb-howtoarrive dt{ font-weight: 700; }
.hb-howtoarrive dd{ margin: 0; }

@media (max-width: 900px){
	.hb-contact-hero{ grid-template-columns: 1fr; }
	.hb-contact-purple > .hb-container{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Página de Quiénes somos (Fase 2, punto 4/3 de MASTER_SPEC.md — punch list
   verificador: la página solo tenía título + 1 párrafo corto, dejando cientos
   de px en blanco antes del footer en 1440 y 375). Mismo patrón de dos
   columnas que ".hb-contact-hero" (texto + foto real de la tienda), la misma
   franja "declaración editorial" que la home usa para esto (ver comentario
   "#8" junto a ".hb-editorial-statement": "sustituye a los 3 paneles Quiénes
   somos/Qué ofrecemos/Qué vendemos de la v1" — aquí se usa en la página que
   de verdad se llama así) y el mismo grid de fotos reales del showroom que
   la home (".hb-grid.hb-photo-grid"), con una variante de 3 columnas porque
   aquí solo hay 3 fotos, no 5. Ningún botón/tarjeta/modal nuevo: el cierre
   reutiliza ".hb-btn-primary--inline" tal cual. */
.hb-about-hero{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--hb-gutter);
	margin: 1.5em 0 3em;
	align-items: center;
}
.hb-about-hero-text{ padding: 1em 0; }
.hb-about-hero-text h2{ margin-top: 0; }
.hb-about-hero-photo img{ width: 100%; height: 100%; min-height: 320px; object-fit: cover; border-radius: 15px; display: block; }
.hb-photo-grid-head{ margin: 2.5em 0 1.5em; }
.hb-about-photo-grid{ grid-template-columns: repeat(3, 1fr); margin-bottom: 3em; }
.hb-about-cta{ text-align: center; margin: 3em 0 2.5em; }
.hb-about-cta p{ margin: 0 0 1em; font-size: var(--hb-body-2); }

@media (max-width: 900px){
	.hb-about-hero{ grid-template-columns: 1fr; }
	.hb-about-photo-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Página de Reserva showroom (mismo punto de la punch list: título + 1
   párrafo dejaba la página casi vacía). Se añade qué incluye la cita (grid
   de texto simple, sin tarjeta de producto — no aplica ".hb_render_product_
   card" porque no son productos), los pasos reutilizando TAL CUAL el
   acordeón de Mantenimiento (".hb-accordion-item/-head/-body", mismo JS
   "hbBindAccordion" ya enganchado a todo el documento) y, al cierre, el
   MISMO banner CTA "Reserva tu consulta" que ya existe en la home
   (".hb-giant-banner.hb-giant-banner-cta", ver home.php) en vez de inventar
   un tercer estilo de CTA — aquí solo, sin el grid de 2 columnas de la home
   (un único banner ocupa el ancho completo del contenedor sin más CSS). */
.hb-showroom-features{ margin: 2em 0 1em; }
.hb-showroom-features-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--hb-gutter);
}
.hb-showroom-feature h3{ margin: 0 0 0.5em; }
.hb-showroom-feature p{ margin: 0; font-size: var(--hb-body-3); color: var(--hb-gris-azul); }
.hb-showroom-steps{ margin: 3em 0; }
.hb-showroom-steps h2{ margin: 0 0 0.5em; }
.hb-showroom-steps-list{ margin-top: 1em; }
.hb-showroom-cta{ margin: 3em 0 2.5em; }

@media (max-width: 900px){
	.hb-showroom-features-grid{ grid-template-columns: 1fr; gap: 1.5em; }
}

/* ==========================================================================
   Página 404 (ver 404.php — override del de Storefront)
   Antes esta página no tenía NI UNA regla propia: buscador, "Nuevo en la
   tienda"/"Productos populares" y "Categorías de producto" salían con el
   HTML/CSS por defecto de Storefront/WooCommerce (caja de búsqueda gris sin
   forma de píldora, icono de carpeta en cada categoría) en vez del lenguaje
   del resto del sitio — no era un "oscuro sobrante" sino el otro síntoma del
   mismo problema (Fase 2, punto 4 de MASTER_SPEC.md): un sistema visual
   paralelo que nunca se tradujo a los tokens claros. Los grids de producto
   ("Nuevo en la tienda"/"Productos populares") no necesitan nada aquí: ya
   pintan con "hb_render_product_card()" a través de
   "woocommerce/content-product.php" — la MISMA tarjeta que el resto del
   sitio, ver ".woocommerce ul.products li.product" más abajo.
   ========================================================================== */
.error-404 .page-content h2{ margin: 1.5em 0 1em; }
.hb-404-search{ margin: 1.5em 0 2.5em; }
.hb-404-search .hb-search-form{ max-width: 480px; }
.hb-404-categories .widget_product_categories ul{ list-style: none; margin: 0; padding: 0; }
.hb-404-categories .widget_product_categories ul li{
	padding: 0.7em 0;
	border-top: 1px solid var(--hb-lila-1);
}
/* Quita el icono de carpeta que añade Storefront (Font Awesome ::before) — no
   hay iconos en ninguna otra lista del sitio (footer, "¿Cómo llegar?"…), así
   que aquí desentonaba como resto de la maquetación por defecto sin tocar. */
.hb-404-categories .widget_product_categories ul li::before{ content: none; }
.hb-404-categories .widget_product_categories a{ color: var(--hb-nude); font-size: var(--hb-body-3); }
.hb-404-categories .widget_product_categories .count{ color: var(--hb-gris-azul); }

/* ==========================================================================
   Página de Productos (shop)
   ========================================================================== */
/* El hero de shop/categoría reutiliza ".hb-hero" tal cual (ver
   hb_shop_category_hero en functions.php) — mismo tamaño, imagen y
   estructura que el de la home, sin un componente aparte que mantener. */
.hb-shop-subheading{ margin: 1.5em 0 1em; }
.hb-grid-bestsellers{ grid-template-columns: repeat(4, 1fr); margin-bottom: 2.5em; }
/* BUG (pase móvil): a diferencia de ".hb-bestsellers-grid" (mismo bloque
   "Lo más vendido" pero en la home), esta variante de la página de shop no
   tenía NINGÚN breakpoint — a 375px el grid se quedaba en 4 columnas
   forzando cada tarjeta a ~55px de ancho, con el título envuelto letra a
   letra y desbordando por encima del hero. Mismo criterio de 2 columnas ya
   usado para ".hb-grid"/".hb-bestsellers-grid" en el resto del sitio. */
@media (max-width: 800px){
	.hb-grid-bestsellers{ grid-template-columns: repeat(2, 1fr); }
}

/* WooCommerce/Storefront duplican el bloque de orden+resultados tras el loop cuando no hay paginación; lo ocultamos */
ul.products ~ .storefront-sorting{ display: none; }

/* Miga de pan de shop/categoría (ver "hb_shop_category_breadcrumb" en
   functions.php): antes vivía en un "storefront-breadcrumb > col-full"
   propio ANIDADO dentro del ".col-full" que ya envuelve toda la página —
   ese "col-full" repetido duplicaba el padding lateral y la desalineaba
   respecto al resto (miga de pan más metida hacia dentro que "Filtrar
   por"). Ahora es un wrapper simple, sin su propio "col-full", así que
   queda exactamente al mismo margen que todo lo demás. También se anula el
   "padding-top:40px" + "margin-bottom:1em" que trae WooCommerce/Storefront
   por defecto para la migas de pan, y el "padding-top" de "#main" — juntos
   dejaban un hueco negro enorme antes de "Filtrar por". */
.hb-shop-breadcrumb .woocommerce-breadcrumb{ padding-top: 0; margin: 0; }
.hb-shop-breadcrumb{ padding-top: 1.4em; margin-bottom: 1em; }
/* "woocommerce_breadcrumb()" mete su PROPIO ".storefront-breadcrumb >
   .col-full" alrededor del <nav> (vía el filtro de Storefront que cambia
   el delimitador de la miga de pan). Ese "col-full" interno repetía el
   padding lateral que ya pone el ".col-full" de la página (desalineaba la
   miga de pan respecto a "Filtrar por"), y el propio ".storefront-breadcrumb"
   trae SU PROPIO padding vertical + un "margin-bottom" de ~59px que —al no
   tener ".hb-shop-breadcrumb" ningún padding/borde inferior que lo
   contuviera— colapsaba hacia fuera empujando "Filtrar por" ~60px más
   abajo sin que ningún margen/padding de los elementos vecinos lo
   explicara. Los tres se anulan aquí, solo dentro de este wrapper. */
.hb-shop-breadcrumb .col-full{ padding: 0 !important; max-width: none !important; }
.hb-shop-breadcrumb .storefront-breadcrumb{ padding: 0; margin: 0; }
body.woocommerce-shop .site-main,
body.tax-product_cat .site-main{ padding-top: 0; }
/* "#primary" seguía con "float:left" — maquetación de Storefront pensada
   para una barra lateral que aquí no existe (nunca se pinta ningún
   sidebar en shop/categoría, ver "woocommerce_sidebar" en functions.php). */
body.woocommerce-shop #primary,
body.tax-product_cat #primary{ float: none; width: 100%; }

/* Pantalla de resultados de búsqueda (ver "hb_search_results_header" en
   functions.php) — MASTER_SPEC "Search + resultados": barra de búsqueda
   editable con la query + fila "N resultados" (izq) / "Ver todo" (der) con
   divisor inferior. Mismo lenguaje que ".hb-shop-subheading"/
   ".hb-active-filters" (tipografía/gris/borde ya usados en el resto de la
   barra de tienda), sin componente nuevo de cero.
   La barra reutiliza ".hb-search-form"/".hb-search-input" del modal de
   búsqueda de la cabecera (ver hb_render_search_modal) — aquí se anula su
   pastilla/borde/fondo (pensados para flotar sobre la caja blanca del
   modal) y se sube el tamaño a escala de título (mismo "--hb-h2" que antes
   llevaba el "<h1>" estático que sustituye), a base de un icono lupa como
   botón de submit + "×" para borrar (Figma 14:634/55:2882: icono + query +
   "×" en una sola fila, sin pastilla visible). */
.hb-search-results-form{
	display: flex;
	align-items: center;
	gap: 0.6em;
	width: 100%;
	margin: 1.2em 0 0.7em;
}
.hb-search-results-submit{
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--hb-nude);
}
.hb-search-results-submit img{ display: block; width: 20px; height: 20px; }
.hb-search-results-input{
	flex: 1;
	min-width: 0;
	border: none;
	border-radius: 0;
	background: none;
	padding: 0;
	font-size: var(--hb-h2);
	font-weight: 600;
	color: var(--hb-nude);
}
.hb-search-results-input::placeholder{ color: var(--hb-gris-azul); font-weight: 600; }
.hb-search-results-input:focus{ outline: none; }
.hb-search-results-clear{
	flex: none;
	font-size: 1.6em;
	line-height: 1;
	color: var(--hb-gris-azul);
	text-decoration: none;
}
.hb-search-results-clear:hover{ color: var(--hb-lila-2); }
.hb-search-results-meta{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding-bottom: 14px;
	margin-bottom: 1em;
	border-bottom: 1px solid var(--hb-lila-1);
}
.hb-search-results-count{ font-size: var(--hb-body-3); color: var(--hb-gris-azul); }
.hb-search-results-viewall{ font-size: var(--hb-body-3); font-weight: 600; text-decoration: underline; }
.hb-search-results-viewall:hover{ color: var(--hb-lila-2); }
/* En shop/categoría, ".hb-shop-breadcrumb"/"site-main" quedan a "padding-top:0"
   a propósito (ver esas reglas más arriba): el bug ya conocido de "#masthead"
   (sticky que no llega a pegarse de verdad, ver su comentario en la sección
   de cabecera) hace que su caja pintada invada 39px ("--hb-topbar-h") del
   contenido que viene justo después — invisible ahí porque lo que hay debajo
   es la FOTO de fondo del hero. La pantalla de resultados no tiene esa foto
   (ver checklist "no replicar el backdrop difuminado" de MASTER_SPEC), así
   que sin compensar esos 39px la miga de pan y "Resultados de búsqueda:…"
   quedaban tapados bajo la cabecera. Mismo valor exacto que compensa ese
   solape en el resto del sitio (donde SÍ hay hueco de sobra antes del
   contenido para absorberlo sin que se note). */
body.search .hb-shop-breadcrumb{ padding-top: calc(1.4em + var(--hb-topbar-h)); }

/* Estado "sin resultados" (0 productos, ver "loop/no-products-found.php" de
   WooCommerce — SIN override propio, se sigue usando la plantilla nativa,
   igual que ya se hace con "cart/cart-empty.php") — solo se retoca aquí el
   ".woocommerce-info" que WooCommerce pinta con su azul de stock, mismo
   criterio que "body.woocommerce-cart .woocommerce-info" ya usa arriba en
   la sección "Carrito" para el aviso de carrito vacío: se anula el
   recuadro/borde nativo y se deja como texto centrado con los tokens
   "--hb-" del resto del sitio, sin componente nuevo. WordPress añade
   "search"/"search-no-results" al body automáticamente en "get_body_class()"
   cuando "is_search()" no encuentra resultados, así que no hace falta
   ningún condicional extra en PHP para detectar este caso. */
body.search .woocommerce-info{
	text-align: center;
	max-width: 600px;
	margin: 3em auto 4em;
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
	font-size: var(--hb-body-2);
	color: var(--hb-nude);
	list-style: none;
}
/* Storefront le añade un icono decorativo vía "::before" (pensado para su
   caja azul con padding-left de sobra) — al quitar el padding/fondo de
   arriba se queda flotando suelto encima del texto si no se anula aquí
   también. */
body.search .woocommerce-info::before,
body.search .woocommerce-info::after{ content: none; }

/* Barra "Filtrar por" */
/* Píldoras con borde (medidas sobre la imagen de CEIN, nodo aplanado
   "Product Listing - desktop" 12:774 — categoría en pastillas + "Sort/
   Filter" a la derecha en texto plano, sin borde inferior en la fila). */
.hb-filterbar{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 16px 0;
}
.hb-filterbar-label{ display: none; } /* CEIN no repite "Filtrar por": las píldoras hablan solas */
.hb-filterbar-trigger{
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	background: none;
	border: 1px solid var(--hb-lila-1);
	border-radius: 999px;
	font-family: var(--hb-font);
	font-size: var(--hb-body-3);
	cursor: pointer;
	color: var(--hb-nude);
	padding: 8px 16px;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.hb-filterbar-trigger:hover{ border-color: var(--hb-nude); }
/* "Todos los filtros" (siempre el último trigger): sin borde propio, texto
   plano con icono ⚙ (mismo criterio que el "Filter" de CEIN). El empuje al
   borde derecho de la barra YA NO depende de ser ":last-child" — ver
   ".hb-quickfilter--sort" más abajo, que es quien ahora lleva el
   "margin-left:auto" (la píldora "Ordenar por" es la primera del grupo que
   queda pegado a la derecha junto con este botón). */
.hb-filterbar-trigger:last-child{ border: none; padding: 8px 0; }
/* "×" para quitar el filtro sin abrir el popover (ver
   "hb_render_filter_bar_contents" en functions.php / "hbBindQuickfilterToggles"
   en hb-filters.js) — solo existe cuando la taxonomía ya tiene algo
   seleccionado, así que no hace falta ningún estado "oculto" que gestionar. */
.hb-quickfilter-clear{ cursor: pointer; font-size: 1.4em; line-height: 1; }
/* Píldora morada mientras el popover está abierto o mientras esa
   taxonomía tiene un filtro activo (ver "has-active-filter" en
   "hb_render_filter_bar_contents") — antes el botón no daba ninguna pista
   de qué filtro estaba aplicado sin abrir el popover. El padding/margin
   negativo de arriba compensa para que el texto no se mueva al ganar el
   fondo: solo cambia el color, no el hueco que ocupa en la fila. */
.hb-quickfilter.is-open .hb-quickfilter-toggle,
.hb-quickfilter.has-active-filter .hb-quickfilter-toggle{
	background-color: var(--hb-lila-2);
	color: var(--hb-negro);
}
/* Mismo aviso sutil que el resto de filtros de la sección: sin relleno,
   solo el texto en morado (este botón no lleva borde propio, ver
   ".hb-filterbar-trigger" arriba). "background-color:transparent" explícito
   por el mismo motivo que ".hb-cat-prefilter button:hover" más arriba: la
   regla genérica "button:hover{background-color:var(--hb-lila-2)}" del
   resto del sitio pintaría el mismo morado de fondo detrás de este texto
   morado, dejándolo invisible. No se aplica si ya está abierto/activo
   (regla siguiente, con el relleno sólido de verdad). */
.hb-quickfilter-toggle:hover{ color: var(--hb-lila-2); background-color: transparent; }
.hb-quickfilter.is-open .hb-quickfilter-toggle:hover,
.hb-quickfilter.has-active-filter .hb-quickfilter-toggle:hover{ color: var(--hb-negro); }

.hb-quickfilter{ position: relative; }
.hb-quickfilter-popover{
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 50;
	background: var(--hb-negro);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.4);
	padding: 1em 1.4em;
	min-width: 260px;
	margin-top: 0.8em;
	max-height: 340px;
	overflow-y: auto;
}
.hb-quickfilter.is-open .hb-quickfilter-popover{ display: block; }
.hb-quickfilter-option{
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.5em 0;
	font-size: var(--hb-body-3);
	cursor: pointer;
	white-space: nowrap;
}
/* ":not(.hb-swatch-dot)" — si no, el "flex:1" también estiraría el círculo
   de color de las opciones de Color (ver más abajo), que necesita quedarse
   en su tamaño fijo de 20px en vez de crecer para ocupar el hueco. */
.hb-quickfilter-option span:not(.hb-swatch-dot){ flex: 1; }
.hb-quickfilter-option em{ font-style: normal; color: var(--hb-lila-2); }

/* Píldora "Ordenar por" (MASTER_SPEC "Sorting dropdown") — mismo
   ".hb-quickfilter"/".hb-quickfilter-popover" de arriba, con dos ajustes
   propios: (1) empuja este pill + "Todos los filtros" al borde derecho de
   la barra (ver comentario en ".hb-filterbar-trigger:last-child" más
   arriba); (2) el popover cuelga alineado por su BORDE DERECHO en vez de
   el izquierdo — a diferencia de Longitud/Color/Material/Marca, esta es la
   píldora más a la derecha, así que un popover que crece hacia la derecha
   (como el resto, "left:0") se saldría del viewport. */
.hb-quickfilter--sort{ margin-left: auto; }
.hb-quickfilter-popover--sort{ left: auto; right: 0; }
/* Radios nativos ocultos + selección en negrita — MISMO patrón que
   ".hb-filter-option input"/"input:checked ~ span" del cajón "Todos los
   filtros" (ver más abajo, ~L2419): el Figma (nodo 64:3539) no lleva ningún
   icono de check, la fila seleccionada se distingue solo por el peso de la
   tipografía. Escopado a ".hb-quickfilter-popover--sort" (no a
   ".hb-quickfilter-option" a secas) porque esta pasada solo toca el
   componente "Ordenar por" — el resto de popovers rápidos (Longitud/Color/
   Material/Marca) no forma parte de este encargo. */
.hb-quickfilter-popover--sort .hb-quickfilter-option{ position: relative; padding: 1.2em 0; }
.hb-quickfilter-popover--sort .hb-quickfilter-option input[type="radio"]{
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}
.hb-quickfilter-popover--sort .hb-quickfilter-option input:checked ~ span{ font-weight: 600; }
.hb-quickfilter-popover--sort .hb-quickfilter-option input:focus-visible ~ span{ outline: 2px solid var(--hb-lila-2); outline-offset: 3px; }
/* Cabecera móvil ("Ordenar por" + "×") y scrim: ocultos en escritorio, el
   popover se comporta exactamente como el resto (float flotante sin scrim,
   MASTER_SPEC: "resto de la página sigue interactiva"). Se activan solo en
   mobile, ver "@media(max-width:800px)" más abajo. */
.hb-quickfilter-sort-head{ display: none; }
.hb-quickfilter-popover-overlay{ display: none; }

@media (max-width: 800px){
	/* Mismo breakpoint que ".hb-grid" pasa a 2 columnas — la "vista mobile"
	   real de tienda/categoría, no un valor nuevo inventado. */
	.hb-quickfilter-popover-overlay{
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(28,21,34,0.6); /* mismo scrim que ".hb-modal-overlay" base */
		z-index: 900;
	}
	.hb-quickfilter.is-open .hb-quickfilter-popover-overlay{ display: block; }
	/* QA final móvil (375px): el resto de popovers rápidos (Longitud/
	   Categoría/Color/Material/Marca) no tenían NINGÚN tratamiento mobile —
	   seguían con "position:absolute; left:0" anclado al trigger (regla base
	   arriba), y con "min-width:260px" cualquier píldora situada hacia la
	   mitad/derecha de la barra (p.ej. "Categoría") abría un popover que se
	   salía por el borde derecho del viewport de 375px, dejando sus últimas
	   opciones inalcanzables (ni overflow-x en el body para alcanzarlas: el
	   popover es "position:absolute", no cuenta para el scroll de la
	   página). Mismo criterio "fixed + ancho de pantalla completo" que ya
	   usa ".hb-quickfilter-popover--sort" ahí abajo (para no salirse nunca
	   del viewport pase donde pase el trigger), pero SIN tocar esa regla
	   (ya trae su propia cabecera "Ordenar por"/"×" y scrim propios, ver
	   "hb_render_sort_quickfilter" en functions.php) ni la de Sort en sí:
	   ":not(.hb-quickfilter-popover--sort)" para que ambas convivan. */
	.hb-quickfilter-popover:not(.hb-quickfilter-popover--sort){
		position: fixed;
		left: 0;
		right: 0;
		top: auto;
		bottom: 0;
		margin: 0;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		max-height: 60vh;
		border-radius: 16px 16px 0 0;
		box-sizing: border-box;
		z-index: 901;
	}
	.hb-quickfilter-popover--sort{
		display: none; /* ".hb-quickfilter.is-open" lo vuelve a "block" más abajo, igual que en escritorio */
		position: fixed;
		left: 0;
		right: 0;
		top: auto;
		bottom: 0;
		margin: 0;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		max-height: 80vh;
		border-radius: 16px 16px 0 0;
		padding: 0 0 1.4em;
		z-index: 901;
	}
	.hb-quickfilter.is-open .hb-quickfilter-popover--sort{ display: block; }
	.hb-quickfilter-sort-head{
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		height: 62px;
		flex-shrink: 0;
		box-sizing: border-box;
		padding: 0 var(--hb-container-pad);
		border-bottom: 1px solid var(--hb-lila-1);
		margin-bottom: 0.5em;
	}
	.hb-quickfilter-sort-head span{ font-weight: 600; }
	/* Mismo botón "×" que el resto de modales (".hb-modal-close" base, ver
	   más abajo) — aquí solo se reposiciona dentro de esta cabecera propia
	   en vez de flotar sobre toda la caja. */
	.hb-quickfilter-sort-head .hb-modal-close{
		position: absolute;
		top: 50%;
		right: var(--hb-container-pad);
		transform: translateY(-50%);
		width: 24px;
		height: 24px;
		font-size: 1.1em;
	}
	.hb-quickfilter-popover--sort form{ padding: 0 var(--hb-container-pad); max-height: calc(80vh - 62px); overflow-y: auto; }
}

.hb-active-filters{ display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em; margin-bottom: 1.5em; }
.hb-active-filters > span:first-child{ font-size: var(--hb-body-3); color: #8a8a8a; }
.hb-filter-pill{
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	border: 1px solid var(--hb-nude);
	border-radius: 999px;
	padding: 0.4em 0.5em 0.4em 1em;
	font-size: var(--hb-body-3);
}
.hb-filter-pill-remove{ cursor: pointer; font-size: 1.3em; line-height: 1; color: var(--hb-nude); }
.hb-clear-filters{ font-size: var(--hb-body-3); text-decoration: underline; margin-left: 0.5em; }

/* Panel deslizante "Filtrar y clasificar" (reskin CEIN, MASTER_SPEC "Filter
   drawer" 64:4101/64:4244 — nodo aplanado, medidas ±unos px). Sigue siendo el
   MISMO ".hb-modal"/".hb-drawer" que desliza mini-cart/quick view, solo se
   retocan medidas/color aquí; el JS de apertura (hb-modal.js) no cambia. */
.hb-drawer .hb-modal-box{
	position: fixed;
	top: 0; right: 0; bottom: 0;
	margin: 0;
	width: 400px; /* Figma: panel ≈400px (antes 420px, valor sin medir) */
	max-width: 90vw;
	max-height: none;
	border-radius: 0;
	/* ".hb-modal-box" base trae "padding:2em" (32px) — sin resetearlo aquí se
	   SUMABA a los 32px propios de ".hb-drawer-head/-body/-footer" de abajo,
	   dejando un inset real de 64px en vez de los ~30px medidos en Figma.
	   Mismo criterio que ya usa "#hb-minicart-modal .hb-modal-box" (padding:0
	   + cada bloque interno gestiona su propio padding). */
	padding: 0;
	/* ".hb-modal-box" base también trae "overflow-y:auto" (pensado para los
	   modales centrados normales, que sí pueden crecer más que la pantalla).
	   Aquí el que tiene que scrollear es SOLO ".hb-drawer-body" (flex:1 +
	   min-height:0 + overflow-y:auto propio, ver más abajo) — con el
	   contenedor exterior también como "auto", un clic real en cualquier
	   checkbox (aunque esté visualmente oculto, ver ".hb-filter-option
	   input") hace que el navegador lo lleve a la vista enfocándolo, y con
	   DOS contenedores scrolleables anidados a veces termina scrolleando el
	   exterior en vez del interior — arrastrando cabecera y footer fuera de
	   la vista en vez de quedarse fijos arriba/abajo del panel. Sin scroll
	   propio en el exterior, no hay ambigüedad posible. */
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform .25s ease;
}
.hb-drawer.is-open .hb-modal-box{ transform: translateX(0); }
/* Mobile: "mismo contenido a pantalla completa en vez de panel de 400px"
   (MASTER_SPEC) — mismo criterio/breakpoint que ya usa el mini-cart
   (".hb-minicart-box .hb-modal-box" más abajo) para su propio full-bleed. */
@media (max-width: 480px){
	.hb-drawer .hb-modal-box{ width: 100vw; max-width: 100vw; }
}
/* Cabecera: título centrado + "×" ~24×24 en la esquina (antes label a la
   izquierda / cierre a la derecha, sin centrar) — fila fija ≈63px medida en
   Figma, inset lateral con el token de página en vez de un valor "1.5em"
   suelto. */
.hb-drawer-head{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 63px;
	flex-shrink: 0;
	box-sizing: border-box;
	padding: 0 var(--hb-container-pad);
	border-bottom: 1px solid var(--hb-lila-1); /* #DDDDDD exacto de Figma */
}
.hb-drawer-head h3{ margin: 0; text-align: center; }
.hb-drawer-head .hb-modal-close{
	position: absolute;
	top: 50%;
	right: var(--hb-container-pad);
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	font-size: 1.1em;
}
/* BUG descubierto al probar el drawer de verdad (clic real en un swatch —
   el navegador auto-scrollea el checkbox enfocado, hasta entonces invisible
   sin efecto): "flex:1" solo, sin "min-height:0", deja que este hijo crezca
   a la altura de SU CONTENIDO en vez de encogerse al hueco disponible — con
   pocas secciones (antes, con Material/Color colapsados por defecto) el
   contenido cabía de sobra y el overflow-y de aquí nunca llegaba a activarse
   de verdad; con TODAS las secciones siempre visibles (reskin CEIN, ver
   "[data-filter-key]" más arriba) el contenido ya no cabe, y sin
   "min-height:0" es el ".hb-modal-box" exterior (que también hereda
   "overflow-y:auto" de la regla base) el que termina haciendo de scroll,
   arrastrando cabecera/footer consigo en vez de quedar fijos arriba/abajo. */
.hb-drawer-body{ padding: 0 var(--hb-container-pad); overflow-y: auto; flex: 1; min-height: 0; }
.hb-drawer-footer{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.9em;
	padding: var(--hb-container-pad);
	border-top: 1px solid var(--hb-lila-1);
	flex-shrink: 0;
}
.hb-drawer-footer .hb-clear-filters{ align-self: center; margin-left: 0; }
.hb-filter-summary{ color: var(--hb-lila-2); font-size: 12px; text-transform: capitalize; }
/* Secciones de taxonomía (Color/Longitud/Material/...): "labels planas" sin
   chevron de acordeón ni colapso — CEIN no oculta Material/Size detrás de un
   toggle, se ven siempre. Escopado con "[data-filter-key]" (solo lo pone
   "hb_render_filter_checkboxes") para NO tocar la sección "Ordenar por" (sin
   ese atributo): esa sigue colapsable tal cual hasta que se promueva a su
   propia píldora (ver checklist "Sorting dropdown" en MASTER_SPEC, tarea
   aparte). El JS de acordeón (hb-accordion.js) sigue enganchado sin cambios:
   un clic en la cabecera sigue alternando ".is-open" sin ningún efecto
   visible ahora que el cuerpo ya está siempre abierto. */
.hb-filter-section[data-filter-key] > .hb-accordion-head{ cursor: default; }
.hb-filter-section[data-filter-key] > .hb-accordion-head::after{ content: none; }
.hb-filter-section[data-filter-key] .hb-accordion-body{ display: block; }
/* El resumen de tonos activos ("Color  Rubio, Castaño") tenía sentido cuando
   la sección estaba colapsada — con el cuerpo siempre visible debajo (ver
   regla de arriba) ya no aporta nada, solo duplica lo que ya se ve en el
   anillo del swatch/negrita de la fila. */
.hb-filter-section[data-filter-key] .hb-filter-summary{ display: none; }

.hb-filter-option{ position: relative; display: flex; align-items: center; gap: 0.6em; padding: 0.5em 0; font-size: var(--hb-body-3); cursor: pointer; }
/* CEIN: filas de texto plano con contador ("Cotton (4)"), sin cuadrito de
   checkbox visible — el checkbox sigue ahí (funcional, foco de teclado
   incluido) solo que visualmente oculto; el propio <label> ya cubre toda la
   fila así que el clic/tap no pierde área. La selección se indica con
   negrita (línea "input:checked ~ span" más abajo) en vez de un icono.
   BUG encontrado probando el drawer de verdad (clic real en un swatch):
   "position:absolute" SIN "top/left" deja que el navegador calcule la
   posición estática de forma "hipotética" (como si no hubiera scroll) en
   vez de mirar dónde está la fila REALMENTE en pantalla — con el cajón ya
   scrolleado (".hb-drawer-body" no es "position:relative", así que ese
   cálculo hipotético ignora su scroll), el checkbox terminaba con un
   "getBoundingClientRect" clavado en el punto de la lista SIN scrollear,
   muy lejos de donde se ve la fila. Al enfocarlo (clic en la label), el
   navegador auto-scrollea ese punto "hasta la vista" — arrastrando cabecera
   y footer del cajón fuera de la pantalla. Con "top:0;left:0" fijo y la
   label ahora "position:relative" como su propio contenedor, el checkbox
   siempre coincide con la fila que se ve, sin cálculo hipotético que se
   pueda desincronizar del scroll. */
.hb-filter-option input[type="checkbox"],
.hb-filter-option input[type="radio"]{
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}
.hb-filter-option input:checked ~ span{ font-weight: 600; }
.hb-filter-option input:focus-visible ~ span{ outline: 2px solid var(--hb-lila-2); outline-offset: 3px; }
/* BUG descubierto al verificar este mismo reskin: Rethink Sans (variable)
   trae ligaduras por defecto que sustituyen "(4)"/"(8)"/etc. — un solo
   dígito entre paréntesis — por un glifo de "número en círculo" casi
   ilegible (se ve p.ej. en "Cuidado y Mantenimiento (4)"); con dos dígitos
   ("(10)") no hay ligadura definida y se ve bien. Con las secciones ahora
   siempre visibles (antes escondidas en el acordeón colapsado) el contador
   se ve constantemente, así que el glitch pasa de invisible a evidente.
   Apagar ligaduras en el contador basta para que TODOS los dígitos se vean
   como texto plano. */
.hb-filter-option em{ font-variant-ligatures: none; font-feature-settings: "liga" 0, "dlig" 0, "calt" 0; }
/* Filtro de Color: un puñado de grupos (Rubio/Castaño/Moreno/Pelirrojo/
   Plata) en vez de la lista larga y vertical de tonos de fábrica — caben
   bien envueltos en fila, como chips, en lugar de uno por línea. Gap ≈16px
   medido en Figma entre swatches. */
.hb-accordion-body--swatches{ display: flex; flex-wrap: wrap; gap: 16px; }
.hb-filter-option--swatch{ padding: 0.3em 0; }
/* Swatch circular agrandado a ~32px (antes "--sm" 20px, que sigue usando el
   popover de filtro rápido) — mismo anillo de selección que ya usan los
   swatches de la ficha de producto (".hb-swatch.is-active .hb-swatch-dot"),
   aplicado aquí vía "input:checked" en vez de una clase JS porque este es un
   checkbox real, no un botón con estado por JS. */
/* "span.hb-swatch-dot--md" (no solo ".hb-swatch-dot--md"): esta regla vive
   ANTES que ".hb-swatch-dot" base (definida más abajo, junto a los swatches
   de la ficha de producto) — con la misma especificidad de una sola clase,
   la regla base que viene DESPUÉS en el archivo ganaría el empate y dejaría
   el círculo en 56px en vez de 32px. Añadir el elemento "span" sube la
   especificidad (0,1,1 en vez de 0,1,0) y gana sin depender del orden. */
span.hb-swatch-dot--md{ width: 32px; height: 32px; flex-shrink: 0; }
.hb-filter-option--swatch:hover .hb-swatch-dot{ box-shadow: 0 0 0 2px var(--hb-lila-2); }
.hb-filter-option--swatch input:checked ~ .hb-swatch-dot{ box-shadow: 0 0 0 2px var(--hb-negro), 0 0 0 4px var(--hb-nude); }
.hb-filter-option--swatch input:focus-visible ~ .hb-swatch-dot{ box-shadow: 0 0 0 2px var(--hb-lila-2); }

/* ==========================================================================
   Tarjetas de producto WooCommerce (shop, relacionados, upsells)
   — mismo estilo que .hb-card: overlay oscuro sobre la imagen
   ========================================================================== */
.woocommerce ul.products{
	display: grid;
	/* Antes "repeat(4, 1fr)": la card se estiraba a lo que le tocara de las 4
	   columnas, un tamaño distinto según el ancho de pantalla — no el mismo
	   320px fijo que las cards de categorías de la home. Con un ancho mínimo
	   fijo (280px) las columnas se reparten el hueco disponible a partes
	   iguales, así la última card siempre queda pegada al margen derecho
	   igual que la primera al izquierdo (con "320px" fijo sobraba hueco a la
	   derecha si el ancho de página no era múltiplo exacto de card+gap). El
	   resultado ronda los 320px por card en el ancho de página habitual. */
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	/* Con el "--hb-gutter" general (32px) solo entraban 4 columnas en el
	   ancho de página habitual — con un hueco algo más ajustado (24px)
	   entra una 5ª. */
	gap: 24px;
	list-style: none;
	margin: 0 0 2em;
	padding: 0;
}
/* Storefront le pone a "ul.products" un clearfix (::before/::after con
   content:"" y display:table) pensado para su maquetación por floats — en un
   grid, ese pseudo-elemento generado cuenta como un hijo más y se cuela en la
   primera celda, empujando el primer producto de verdad a la segunda
   columna y dejando un hueco vacío. Con el grid no hace falta clearfix. */
.woocommerce ul.products::before,
.woocommerce ul.products::after{ display: none; content: none; }
/* Desde que "woocommerce/content-product.php" (override en el tema) usa
   "hb_render_product_card()" — la MISMA tarjeta que el resto del sitio — en
   vez de la pila de hooks nativa, todo el aspecto visual (fondo, borde,
   sombra, hover, radio) vive en ".hb-card" (ver más arriba). Este "<li>" es
   solo la celda del grid, sin estilo propio, para no duplicar el marco. */
.woocommerce ul.products li.product,
.site-main ul.products li.product{
	margin: 0 !important;
	width: 100% !important;
	float: none !important;
	list-style: none;
}
.woocommerce ul.products li.product .hb-card{ height: 100%; }

/* BUG (pase móvil): el "auto-fill, minmax(280px, 1fr)" de arriba está
   pensado para repartir columnas en desktop, pero con un mínimo de 280px no
   cabe una segunda columna en ningún móvil (a 375px el área de contenido
   ronda 327px) — el listado de productos, que en el mobile de referencia de
   Figma (Product Listing - mobile, 64:3064) es a 2 columnas como el resto
   de grids del sitio, caía a 1 sola columna. Mismo criterio de 2 columnas
   ya usado en ".hb-grid"/".hb-bestsellers-grid"/".hb-grid-bestsellers". */
@media (max-width: 800px){
	.woocommerce ul.products{ grid-template-columns: repeat(2, 1fr); }
}

/* Bloque nativo de Gutenberg "Carrito vacío" (WooCommerce Blocks, plantilla
   del carrito): usa sus PROPIAS clases ".wc-block-grid__*", nada que ver con
   ".woocommerce ul.products li.product" de arriba — sin esto, sus títulos de
   producto salían con el gris casi negro por defecto de WooCommerce Blocks
   sobre nuestro fondo oscuro, prácticamente ilegibles (bug de la auditoría,
   visible en /cart/ con el carrito vacío). */
.wc-block-grid__product-title{ color: var(--hb-nude); }
/* "!important" hace falta: WooCommerce Blocks trae su propia regla más
   específica ("...wc-block-grid__products .wc-block-grid__product .price",
   3 clases) fijando el mismo gris casi negro por defecto. */
.wc-block-grid__product-price{ color: var(--hb-lila-1) !important; }
/* La tarjeta ya es un enlace completo a la ficha; ocultamos el botón "Read more" duplicado */
.woocommerce ul.products li.product a.button.product_type_simple{ display: none; }
.woocommerce span.onsale{
	z-index: 2;
	background-color: var(--hb-lila-2);
	color: var(--hb-negro);
}

/* ==========================================================================
   Ficha de producto v3 (Krist, nodo 2:2732 APLANADO — ver MASTER_SPEC):
   galería a la IZQUIERDA con miniaturas en fila debajo, columna de compra a
   la derecha, pestañas + relacionados + franja de confianza a ancho completo
   ========================================================================== */
.single-product div.product{
	display: grid;
	position: relative;
	/* Krist reparte galería/columna de compra ~50/50 (556px / 561px sobre un
	   contenedor de 1132 a 1440 de viewport, medido en la imagen nativa). */
	grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
	/* "nav nav" (a todo lo ancho): miga de pan + anterior/siguiente.
	   Todo lo que viene tras las dos columnas (pestañas, relacionados,
	   franja de confianza, reseñas) va con grid-column:1/-1, sin filas con
	   nombre ni mecanismos de alineado por JS. */
	grid-template-areas:
		"nav nav"
		"gallery summary";
	column-gap: 3.5em;
	row-gap: 1.5em;
	align-items: start;
	background: none;
	padding: 0;
}
/* Todo lo que va después de las dos columnas (pestañas, relacionados, franja
   de confianza, upsells, reseñas...) ocupa el ancho completo — si no, el
   "auto-placement" del grid lo encajaría dentro de una de las dos columnas. */
.single-product div.product > .upsells.products,
.single-product div.product > .hb-product-tabs-v3,
.single-product div.product > .hb-product-related,
.single-product div.product > .hb-trust-strip-section,
.single-product div.product > .hb-product-reviews{
	grid-column: 1 / -1;
	/* min-width:0 por el mismo motivo que ".summary" (ver arriba): la barra
	   de pestañas con scroll horizontal, p.ej., mantendría su min-content
	   intrínseco y ensancharía el track en móvil. */
	min-width: 0;
}
/* La franja de confianza reutilizada de la home trae fondo gris a sangre
   completa (hb-full-bleed) — dentro de la ficha se le da un respiro extra
   sobre el footer y respecto a los relacionados. */
.single-product div.product > .hb-trust-strip-section{ margin-top: 2.5em; }
/* Título de sección grande alineado a la izquierda, como "Related Products"
   en Krist (~35px sobre 1440, medido en la imagen nativa ÷1.651). */
.hb-product-related{ margin-top: 1.5em; }
.hb-product-related h2{ color: var(--hb-nude); margin: 0 0 1em; font-size: var(--hb-h2); text-align: left; }
/* Mismo componente ".hb-card" que el resto del sitio — 4 columnas iguales a
   ancho completo (Krist: 4 cards de ~262px con gap ~29px). */
.hb-product-related .hb-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0; padding: 0; }
.hb-product-related .hb-card-caption{ padding: 1.1em 1.2em 1.2em; gap: 0.5em; }
.hb-product-related .hb-card-caption h3{ font-size: var(--hb-body-2); line-height: 1.3; }
.hb-product-related .hb-card-caption p{ font-size: var(--hb-footer); padding-right: 2em; }
.hb-product-related .hb-card-arrow{ width: 24px; height: 24px; right: 1.2em; bottom: 1.1em; font-size: 14px; }
/* Storefront trae su propio CSS de WooCommerce con reglas de ancho/float
   pensadas para su maquetación clásica (".summary{width:52.94%;float:right}",
   y una variante aún más específica cuando el body lleva su clase
   "storefront-full-width-content", que es nuestro caso). Igualar
   selector a selector es una carrera armamentística contra clases de body
   que Storefront pueda añadir; aquí el !important está justificado porque
   estamos anulando a propósito un sistema de columnas por floats que ya no
   pinta nada dentro de nuestro grid. */
.single-product div.product .summary{
	grid-area: summary;
	width: 100% !important;
	float: none !important;
	/* Sin esto, el mínimo automático del grid item es el min-content de su
	   contenido — y el listado de swatches (scroll container) mantiene su
	   tamaño intrínseco completo, ensanchando la columna entera (~950px en
	   móvil, ficha cortada). La columna de galería ya lleva su min-width:0
	   por el mismo motivo. */
	min-width: 0;
	display: flex;
	flex-direction: column;
	/* Krist apila la columna de compra bastante prieta (título → subtítulo →
	   estrellas → precio → párrafo → color → CTA, huecos de 12-22px). */
	gap: 1.2em;
}
/* Título + píldora "En stock" en la misma fila (Krist la lleva arriba a la
   derecha de la columna). */
.hb-product-title-row{ display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; }
.hb-product-title{ font-size: var(--hb-h1); line-height: 1.1; margin: 0; }
.hb-stock-badge{
	flex: none;
	margin-top: 0.4em;
	background: #E7F6EC;
	color: #1F7A3D;
	font-size: 13px;
	line-height: 1;
	padding: 6px 12px;
	border-radius: 999px;
	white-space: nowrap;
}
.hb-product-subtitle{ font-size: var(--hb-h3); line-height: 1.15; margin: 0.3em 0 0; font-weight: 400; opacity: 0.7; }
.hb-product-desc{ font-size: var(--hb-body-2); opacity: 0.9; }
.hb-product-desc p{ margin: 0 0 0.7em; }
.hb-product-characteristics{ display: flex; flex-direction: column; gap: 1.4em; }
.hb-product-characteristics h2{ font-size: var(--hb-h2); font-weight: 400; margin: 0; }
/* Tabla "Ficha técnica" (ver hb_product_ficha_characteristics): dos
   columnas, etiqueta | valor, una fila por spec — mismo patrón que la
   tabla de "Detalles del producto" que sirvió de referencia. */
.hb-product-specs-table{ width: 100%; border-collapse: collapse; }
.hb-product-specs-table tr{ border-bottom: 1px solid rgba(36,31,27,0.15); }
.hb-product-specs-table tr:last-child{ border-bottom: none; }
.hb-product-specs-table th,
.hb-product-specs-table td{
	text-align: left;
	vertical-align: top;
	padding: 0.7em 0;
	font-weight: 400;
	font-size: var(--hb-body-2);
}
/* "width:1%" + "white-space:nowrap" (en vez de un 40% fijo) hace que la
   columna de etiqueta se ajuste a la etiqueta más larga en vez de reservar
   siempre el 40% del ancho aunque el texto ("Marca", "Peso"...) sea mucho
   más corto — así el valor aprovecha el resto del ancho de la ficha en vez
   de dejar un hueco muerto en medio. */
.hb-product-specs-table th{ font-weight: 700; width: 1%; white-space: nowrap; padding-right: 2em; }
/* WordPress inyecta en el <head> de TODAS las páginas unos estilos globales
   del bloque nativo "Tabla" (Gutenberg) sin acotarlos a ".wp-block-table":
   "table:not(.has-background) th/td" y "tr:nth-child(2n) td" — un bug
   conocido del core que pinta fondos casi blancos en CUALQUIER <table> del
   sitio, no solo en tablas de Gutenberg. Como nuestro texto ya es un tono
   casi blanco (nude) sobre fondo oscuro, ese fondo case-blanco lo dejaba
   prácticamente ilegible. Hace falta más especificidad que la suya
   ("table:not(.has-background) th" pesa dos clases+dos etiquetas) para
   ganarle sin usar !important. */
.hb-product-tabs .hb-product-specs-table th,
.hb-product-tabs .hb-product-specs-table td,
.hb-product-tabs .hb-product-specs-table tbody tr:nth-child(2n) td{
	background-color: transparent;
}
/* Precio en su propia línea (Krist: ~25px bold, con el precio antiguo
   tachado en gris al lado cuando hay oferta real — el <del>/<ins> lo pinta
   WooCommerce solo con "sale_price" de verdad). */
.hb-product-price{ font-size: var(--hb-h3); font-weight: 600; }
.hb-product-price .price ins{ text-decoration: none; }
.hb-product-price .price del{ opacity: 0.45; font-weight: 400; margin-left: 0.5em; }
/* Extracto de descripción bajo el precio. */
.hb-product-short-desc{ font-size: var(--hb-body-2); opacity: 0.85; max-width: 60ch; }
.hb-product-short-desc p{ margin: 0 0 0.6em; }
.hb-product-short-desc p:last-child{ margin-bottom: 0; }
/* Etiqueta "Color" sobre los swatches (Krist). */
.hb-product-option-label{ font-weight: 700; margin: 0 0 0.2em; font-size: var(--hb-body-2); }
/* Fila de compra: cantidad (− input +) + Añadir al carrito + favorito. */
.hb-product-buy-row{ display: flex; align-items: center; gap: 0.8em; margin-top: 0.4em; }
.hb-product-buy-row form.cart{ display: flex; flex: 1 1 auto; align-items: center; gap: 0.8em; margin: 0; }
.hb-product-buy-row form.cart .quantity{
	flex: none;
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--hb-gris-azul);
	border-radius: 999px;
	overflow: hidden;
	height: 52px;
}
.hb-product-buy-row .quantity .qty{
	width: 3em;
	border: none;
	background: none;
	text-align: center;
	font-size: var(--hb-body-2);
	color: inherit;
	padding: 0;
	-moz-appearance: textfield;
	appearance: textfield;
}
.hb-product-buy-row .quantity .qty::-webkit-outer-spin-button,
.hb-product-buy-row .quantity .qty::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.hb-qty-btn{
	appearance: none;
	border: none;
	background: none;
	color: inherit;
	width: 40px;
	height: 100%;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.hb-qty-btn:hover{ background: var(--hb-lila-1); color: inherit; }
.hb-qty-btn:focus{ outline: none; }
.hb-qty-btn:focus-visible{ outline: 2px solid var(--hb-lila-2); outline-offset: -2px; }
/* El botón de compra crece hasta llenar la fila (Krist: CTA ancho dominante). */
.hb-product-buy-row .single_add_to_cart_button{
	flex: 1 1 auto;
	justify-content: center;
	height: 52px;
	font-size: var(--hb-body-2);
}
.hb-product-buy-row .hb-btn-compact{ height: 52px; }
.hb-product-buy-row .hb-favorite-btn{ width: 52px; height: 52px; }
/* Botón de compra/info junto al precio (en vez de en su propia fila) con
   icono, para que el texto pueda ir corto y quepa todo en una franja
   compacta. Se aplica tanto a nuestros botones (".hb-btn-compact") como al
   formulario nativo de WooCommerce (".single_add_to_cart_button"), que ya
   hereda el pildoreado de ".button" del resto del sitio y solo necesita el
   tamaño compacto + icono de más abajo. */
.hb-btn-compact,
.single_add_to_cart_button{
	display: inline-flex; align-items: center; gap: 0.45em;
	padding: 0.6em 1em; font-size: 0.9em; white-space: nowrap;
}
/* Icono de carrito vía mask (no hay forma sencilla de meter un <svg> dentro
   del texto del botón nativo de WooCommerce sin tocar su plantilla) —
   mismo trazo que el icono de "Añadir" de nuestros propios botones. */
.single_add_to_cart_button::before{
	content: "";
	width: 16px; height: 16px; flex: none;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 8h12l-1 12H7L6 8z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 8h12l-1 12H7L6 8z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-size: contain; mask-size: contain;
}
.hb-favorite-btn{
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--hb-gris-azul);
	background: none;
	color: var(--hb-nude);
	cursor: pointer;
}
.hb-favorite-btn:hover{ border-color: var(--hb-nude); }
.hb-favorite-btn.is-active{ border-color: #C9668A; color: #C9668A; }
.hb-favorite-btn.is-active svg path{ fill: currentColor; }
/* Mismo bug de Storefront de siempre ("button:focus{outline:2px solid
   #7f54b3}" gana por especificidad a un simple ".clase{outline:none}"): sin
   esto, "Añadir"/"Info"/el corazón de favoritos salían con un aro morado
   descentrado y más grande que el propio botón al hacer clic o tabular. */
.hb-btn-compact:focus,
.hb-favorite-btn:focus{ outline: none; }
.hb-btn-compact:focus-visible,
.hb-favorite-btn:focus-visible{
	outline: 2px solid var(--hb-lila-2);
	outline-offset: 3px;
	border-radius: 999px;
}
.hb-favorite-btn:focus-visible{ border-radius: 50%; }
/* El SVG solo llevaba width/height como atributos HTML (no CSS): dentro de
   un contenedor flex (".hb-favorite-btn"), el ancho intrínseco del SVG no
   se tenía en cuenta para el eje principal del flex y colapsaba a 0 (el
   alto sí se respetaba, por eso el corazón no se veía pero el botón
   circular sí). Se fija por CSS explícitamente, que sí participa en el
   cálculo de flex-basis. */
.hb-favorite-btn svg{ width: 18px; height: 18px; flex-shrink: 0; }

/* Fila superior de la ficha de producto: miga de pan a la izquierda + nav
   anterior/siguiente a la derecha, en la misma línea — la miga de pan
   crece/trunca para ocupar todo el sobrante ella sola y el nav se queda
   fijo, así el hueco entre las dos partes es siempre el mismo gap, sea cual
   sea la longitud de la categoría o el nombre del producto. */
.hb-product-head-nav{
	grid-area: nav;
	display: flex;
	align-items: center;
	gap: 1.5em;
	/* La miga de pan de Storefront que sustituye esta fila traía su propio
	   "padding-top:40px" — al quitarla, ese aire respecto a la cabecera fija
	   desapareció con ella y todo quedaba pegado al header. Se repone aquí. */
	margin-top: 2.5em;
	margin-bottom: 1.2em;
}
.hb-product-head-nav .hb-product-prev-next{ flex: 0 0 auto; white-space: nowrap; margin-bottom: 0; }
/* Navegación producto anterior/siguiente. */
.hb-product-prev-next{
	display: flex;
	justify-content: flex-start;
	gap: 2em;
	font-size: var(--hb-body-2);
}
.hb-product-prev-next a{ color: var(--hb-nude); display: inline-flex; align-items: center; gap: 0.4em; }
.hb-prevnext-arrow{ flex: none; }

/* Columna de galería: foto grande + miniaturas, con los colores justo debajo
   dentro de la MISMA columna (no como hermano aparte en el grid de 2
   columnas texto/galería) — así el hueco entre la galería y los colores no
   depende de lo alta que sea la columna de texto. */
.hb-product-gallery-col{
	grid-area: gallery;
	display: flex;
	flex-direction: column;
	min-width: 0;
}
/* Galería v3 (Krist): foto grande cuadrada con flechas superpuestas y
   contador + FILA de miniaturas cuadradas debajo (en Krist: 4 de ~122px con
   gap ~21px bajo una foto de 556×550, medido en la imagen nativa ÷1.651).
   El tamaño es puro CSS — el antiguo "sizeThumbs()" por JS (columna lateral
   que llenaba la altura de la foto) se retiró con este layout. */
.hb-gallery-v2-main-wrap{ min-width: 0; }
.hb-gallery-v2-main{
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	background: var(--hb-white);
}
.hb-gallery-v2-main img{ width: 100%; display: block; aspect-ratio: 1/1; object-fit: cover; object-position: top; }
/* QA final (2026-07): estas dos reglas usaban "--hb-nude" para el color de
   texto/icono — arrastre de la confusión de nombres heredada de la v1 (ver
   comentario junto a las variables, arriba de este fichero): "--hb-nude"
   vale #14110E (casi negro), no "nude claro" como sugiere el nombre. Sobre
   este fondo oscuro semitransparente (rgba(28,21,34,0.55)) daba un ratio de
   contraste de 1.06:1 — la flecha "←"/"→" y el contador eran prácticamente
   invisibles. Corregido a "--hb-negro" (el blanco real, #FFFFFF, pese a su
   nombre) para que se lean sobre el fondo oscuro de la foto. */
.hb-gallery-v2-arrow{
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 40px; height: 40px; border-radius: 50%; border: none;
	background: rgba(28,21,34,0.55); color: var(--hb-negro);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; font-size: 16px; backdrop-filter: blur(3px);
}
.hb-gallery-v2-arrow:hover{ background: rgba(28,21,34,0.8); }
.hb-gallery-v2-arrow-prev{ left: 14px; }
.hb-gallery-v2-arrow-next{ right: 14px; }
.hb-gallery-v2-arrow:focus{ outline: none; }
.hb-gallery-v2-arrow:focus-visible{ outline: 2px solid var(--hb-lila-2); outline-offset: 3px; }
.hb-gallery-v2-counter{
	position: absolute; bottom: 12px; right: 14px;
	background: rgba(28,21,34,0.55); color: var(--hb-negro);
	font-size: 12px; padding: 3px 9px; border-radius: 999px;
}
.hb-gallery-v2-thumbs-row{
	display: flex;
	gap: 1em;
	margin-top: 1em;
	/* Con más de 4 fotos, la fila se desplaza en horizontal en vez de
	   encoger las miniaturas hasta hacerlas ilegibles. */
	overflow-x: auto;
	scrollbar-width: none;
}
.hb-gallery-v2-thumbs-row::-webkit-scrollbar{ display: none; }
.hb-gallery-v2-thumb{
	/* 4 por fila como Krist: cada una un cuarto del ancho de la galería
	   (menos los 3 gaps), cuadradas vía aspect-ratio — aquí sí es estable
	   porque el ancho viene fijado por flex-basis, no por "flex:1" suelto. */
	flex: 0 0 calc((100% - 3em) / 4);
	aspect-ratio: 1/1;
	box-sizing: border-box;
	padding: 0; border-radius: 8px;
	overflow: hidden; cursor: pointer; background: none;
	border: 2px solid transparent; opacity: 0.6;
	transition: opacity .2s ease, border-color .2s ease;
}
.hb-gallery-v2-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-gallery-v2-thumb:hover{ opacity: 0.85; }
.hb-gallery-v2-thumb.is-active{ opacity: 1; border-color: var(--hb-lila-2); }
.hb-gallery-v2-thumb:focus{ outline: none; }
.hb-gallery-v2-thumb:focus-visible{ outline: 2px solid var(--hb-lila-2); outline-offset: 2px; }
@media (max-width: 900px){
	.single-product div.product{
		grid-template-columns: 1fr;
		grid-template-areas: "nav" "gallery" "summary";
	}
	/* "Producto anterior/Siguiente producto" llevaba "white-space:nowrap" y
	   flex-shrink:0 (línea de más arriba) para no partirse en desktop, donde
	   sobra sitio de sobra junto a la miga de pan. En móvil ese texto (341px)
	   no cabe ni él solo dentro del ancho disponible (~297px): forzaba el
	   grid entero de la ficha a quedarse a ~628px de ancho pasara lo que
	   pasara con el viewport, cortando media ficha fuera de la pantalla sin
	   scroll posible para verla. Aquí se deja que la fila envuelva y, sobre
	   todo, se oculta VISUALMENTE la etiqueta de texto de cada enlace
	   (queda solo la flecha) — el texto sigue ahí para lectores de pantalla. */
	.hb-product-head-nav{ flex-wrap: wrap; row-gap: 0.4em; min-width: 0; }
	.hb-prevnext-label{
		position: absolute;
		width: 1px; height: 1px;
		padding: 0; margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
	.hb-product-prev-next a{
		min-width: 40px; min-height: 40px;
		justify-content: center;
	}
	/* La fila de compra puede no caber en una sola línea con pantallas muy
	   estrechas — que envuelva sin aplastar el botón principal. */
	.hb-product-buy-row{ flex-wrap: wrap; }
	.hb-product-buy-row .single_add_to_cart_button{ min-width: 60%; }
	/* Relacionados: 2 columnas en móvil (Krist apila su grid igual). */
	.hb-product-related .hb-grid{ grid-template-columns: repeat(2, 1fr); }
	/* (La franja de confianza trae sus propios breakpoints — es el
	   componente compartido de la home, ver su bloque CSS más abajo.) */
	/* Pestañas: si las 3 etiquetas no caben, scroll horizontal antes que
	   partir las etiquetas en dos líneas. */
	.hb-product-tabs-v3 .hb-tabs-nav{ overflow-x: auto; scrollbar-width: none; }
	.hb-product-tabs-v3 .hb-tabs-nav::-webkit-scrollbar{ display: none; }
	.hb-product-tabs-v3 .hb-tabs-nav button{ white-space: nowrap; }
}

/* Separador "›" de la miga de pan (Ficha v3, Krist). */
.hb-crumb-sep{ opacity: 0.45; margin: 0 0.15em; }

/* Pestañas de la ficha v3 (Krist): barra horizontal con divisor inferior,
   pestaña activa en negrita con subrayado — reutiliza el mostrar/ocultar
   genérico de ".hb-tabs-panel" (más arriba), aquí solo la piel. */
.hb-product-tabs-v3{ margin-top: 1.5em; }
.hb-product-tabs-v3 .hb-tabs-nav{
	display: flex;
	gap: 2.5em;
	border-bottom: 1px solid var(--hb-lila-1);
}
.hb-product-tabs-v3 .hb-tabs-nav button{
	appearance: none;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	padding: 0 0 0.9em;
	font-family: inherit;
	font-size: var(--hb-body-1);
	color: inherit;
	opacity: 0.6;
	cursor: pointer;
	border-radius: 0;
}
/* La regla global "button:hover{background-color:...}" del sitio no aplica
   a estas etiquetas de pestaña. */
.hb-product-tabs-v3 .hb-tabs-nav button:hover{ background: none; color: inherit; opacity: 1; }
.hb-product-tabs-v3 .hb-tabs-nav button.is-active{ font-weight: 700; opacity: 1; border-bottom-color: currentColor; }
.hb-product-tabs-v3 .hb-tabs-nav button:focus{ outline: none; }
.hb-product-tabs-v3 .hb-tabs-nav button:focus-visible{ outline: 2px solid var(--hb-lila-2); outline-offset: 2px; }
.hb-product-tabs-v3 .hb-tabs-panel{ padding-top: 1.6em; max-width: 75ch; }
.hb-product-tabs-v3 .hb-tabs-panel > *:first-child{ margin-top: 0; }

/* (Franja de confianza: SIN CSS propio aquí — la ficha v3 reutiliza el
   componente compartido de la home, ".hb-trust-strip-section" definido más
   abajo con sus propios breakpoints.) */

.single-product .woocommerce-product-details__short-description ul{
	list-style: none;
	margin: 1.2em 0;
	padding: 0;
}
.single-product .woocommerce-product-details__short-description li{
	display: flex;
	justify-content: space-between;
	gap: 1em;
	padding: 0.7em 0;
	border-bottom: 1px solid rgba(36,31,27,0.15);
	font-size: var(--hb-body-3);
}
.single-product .woocommerce-product-details__short-description li strong{
	color: var(--hb-nude);
	font-weight: 600;
}

/* Selector de color (Ficha v3: vive en la columna de compra bajo la
   etiqueta "Color", ya no bajo la galería), con flechas a los lados para
   desplazar si hay más colores de los que caben en el ancho de la columna. */
.hb-color-swatches-row{
	display: flex;
	align-items: center;
	/* Antes 1.2em: con el anillo de selección del círculo activo (que
	   sobresale del propio círculo, ver ".hb-swatch.is-active .hb-swatch-dot")
	   la flecha quedaba tan pegada al primer color que parecía su propio
	   margen/borde en vez de un botón aparte. */
	gap: 1em;
	margin-top: 0;
}
.hb-color-swatches{
	/* Vuelve a crecer para llenar el ancho de la galería (petición expresa:
	   "debería ocupar siempre el ancho de la galería"). La vez anterior que
	   se probó esto dejaba una franja vacía al final porque los círculos
	   seguían apelotonados a la izquierda dentro de la caja ya ancha — esta
	   vez el reparto real del espacio lo hace "justify-content:space-between"
	   en ".hb-color-swatches-list" de aquí abajo, así que el hueco se
	   convierte en aire entre círculos, no en una franja muerta al final.
	   Con muchos colores (más de los que caben) space-between no tiene
	   espacio libre que repartir y no cambia nada: se comporta como antes,
	   apelotonados + scroll. */
	flex: 1 1 auto;
	max-width: 100%;
	min-width: 0;
	background: none;
	padding: 0;
}
.hb-color-swatches-list{
	display: flex;
	flex: 1 1 auto;
	/* Ficha v3: alineados a la izquierda (Krist), en la columna de compra —
	   el "center" de antes era para cuando ocupaban el ancho de la galería. */
	justify-content: flex-start;
	gap: 1.6em;
	overflow-x: auto;
	/* Si solo se fija overflow-x, la spec obliga a overflow-y:auto también
	   — y con eso el aro de :hover/.is-active (que sale un poco por fuera
	   del círculo) se recortaba por arriba. Con overflow-y:visible no. */
	overflow-y: visible;
	padding-top: 4px;
	scrollbar-width: none;
	/* Con scroll libre, el último círculo visible se cortaba a medias justo
	   pegado a la flecha "siguiente" — parecía un bug, no un "hay más
	   colores". Con scroll-snap el listado siempre para en un círculo
	   entero (arrastrando o con las flechas, ver JS en hb-tabs.js). */
	scroll-snap-type: x mandatory;
}
.hb-color-swatches-list::-webkit-scrollbar{ display: none; }
/* El snap evita parar a medias, pero con más colores de los que caben
   siempre puede asomar un trozo del siguiente pegado al borde — en vez de
   cortarlo en seco, se difumina con un degradado. SOLO cuando de verdad hay
   overflow (clase ".has-overflow", puesta por JS): con pocos colores no hay
   nada que recortar y el degradado solo apagaba el primer/último círculo
   sin motivo. */
.hb-color-swatches-list.has-overflow{
	-webkit-mask-image: linear-gradient(to right, transparent 0, black 32px, black calc(100% - 32px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, black 32px, black calc(100% - 32px), transparent 100%);
}
.hb-swatch{
	scroll-snap-align: start;
	/* Es un <button> (para poder clicarlo y cambiar las fotos), reseteado
	   para que se siga viendo como el simple círculo + nombre de antes —
	   sin el óvalo de foco/highlight nativo del navegador (appearance) ni
	   el anillo de foco por defecto (ya hay un indicador propio: el anillo
	   de .is-active). */
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: none;
	outline: none;
	padding: 0;
	font-family: inherit;
	color: inherit;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6em;
	/* Más pequeño que el body normal y con el nombre partiéndose en varias
	   líneas (max-width ajustado al círculo) — nombres largos como
	   "Chocolate Parfait Root" ya no fuerzan la fila entera a ser tan
	   ancha como su versión en una sola línea. */
	font-size: 13px;
	line-height: 1.25;
	text-align: center;
	flex: 0 0 auto;
	width: 84px;
}
/* La regla genérica "button:hover{background-color:var(--hb-lila-2)}" del
   resto del sitio pintaba un óvalo lila detrás de todo el botón (círculo +
   nombre) al pasar el ratón — aquí no aplica, el propio círculo ya tiene su
   color y el aro de .is-active para indicar selección. */
.hb-swatch:hover{ background: none; color: inherit; }
/* Storefront (tema padre) trae "button:focus{outline:2px solid #7f54b3}"
   con más especificidad que un simple ".hb-swatch{outline:none}" (type+pseudo
   vs. class), así que ganaba esa regla y salía un rectángulo/óvalo morado de
   fondo del navegador aunque aquí se pusiera outline:none. Con la propia
   clase + :focus ya sí se gana esa pelea. */
.hb-swatch:focus{ outline: none; }
.hb-swatch-dot{ width: 56px; height: 56px; border-radius: 50%; display: block; border: 1px solid rgba(0,0,0,.15); transition: box-shadow .15s ease; }
/* Mismo círculo pero pequeño, para las opciones de filtro por color (grupos
   Rubio/Castaño/Moreno/Pelirrojo/Plata) en vez del tamaño pensado para la
   fila de swatches de la ficha de producto. */
.hb-swatch-dot--sm{ width: 20px; height: 20px; flex-shrink: 0; }
/* Hover: solo contorno (mismo lenguaje que el resto de la web, p.ej. el
   borde morado de las cards al pasar el ratón), nada de fondo. */
.hb-swatch:hover .hb-swatch-dot{ box-shadow: 0 0 0 2px var(--hb-lila-2); }
.hb-swatch.is-active .hb-swatch-dot{ box-shadow: 0 0 0 2px var(--hb-negro), 0 0 0 4px var(--hb-nude); }
/* Foco por teclado (no por clic de ratón): mismo anillo que el hover. */
.hb-swatch:focus-visible .hb-swatch-dot{ box-shadow: 0 0 0 2px var(--hb-lila-2); }
.hb-swatch-arrow{
	/* La regla genérica de "button" pone padding: sin resetearlo aquí (y sin
	   border-box) el 35x35 declarado se queda solo en el content-box y el
	   padding lo ensancha, saliendo un óvalo en vez de un círculo. */
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 35px;
	height: 35px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--hb-nude);
	background: none;
	/* La regla genérica de "button" pone color:negro (pensada para el botón
	   nude por defecto) — aquí no hay fondo, así que la flecha necesita su
	   propio color para no perderse sobre la página oscura. */
	color: var(--hb-nude);
	cursor: pointer;
	font-size: 16px;
}
.hb-swatch-arrow:focus{ outline: none; }
.hb-swatch-arrow:focus-visible{
	outline: 2px solid var(--hb-lila-2);
	outline-offset: 3px;
}

.single-product .related.products,
.single-product .upsells.products{ margin-top: 3em; clear: both; }
.single-product .related.products > h2,
.single-product .upsells.products > h2{ text-align: center; margin-bottom: 1em; }

/* Ficha de producto más compacta en general (foto más pequeña + menos aire
   entre bloques) para que "También te puede interesar" quede lo más arriba
   posible — las cards de relacionados se quedan con su tamaño de siempre
   (320px, como en la home), el recorte es todo en la foto y los espaciados. */
@media (min-width: 901px){
	/* Intentos previos peor encaminados: limitar el ancho de la galería
	   (a 420px, o a un bloque centrado de 940px) — la foto quedaba pequeña
	   y dejaba huecos vacíos raros (a la derecha, o en medio con
	   "space-between"). La galería vuelve a ocupar TODO el resto del ancho
	   (columna "1fr" del diseño original, hasta el mismo margen derecho que
	   usa "ESP/CAT" en la cabecera) — el recorte de altura no sale de
	   estrechar la foto, sino de una proporción más panorámica (menos
	   cuadrada) para esa misma foto ancha: ver ".hb-product-gallery-main"
	   más abajo. */
	.single-product div.product{ row-gap: 1em; }
	.hb-product-head-nav{ margin-top: 1.2em; }
	.single-product div.product .summary{ gap: 1.3em; }
	.hb-product-characteristics{ gap: 0.8em; }
	/* Solo vertical aquí (longhand): con el shorthand "padding:0.45em 0"
	   se resetea también el padding-right del th a 0, anulando el hueco
	   entre etiqueta y valor de ".hb-product-specs-table th" de más abajo. */
	.hb-product-specs-table th, .hb-product-specs-table td{ padding-top: 0.45em; padding-bottom: 0.45em; }
	.single-product .related.products{ margin-top: 1.2em; }
	.single-product .related.products > h2{ margin-bottom: 0.6em; }
	.single-product .hb-color-swatches-row{ margin-top: 0.8em; }
	.single-product .hb-color-swatches{ padding-top: 0.4em; }
	/* La foto principal vuelve a ocupar todo el ancho de su columna (ver
	   arriba), pero con una proporción algo más panorámica que el 845:846
	   (casi cuadrado) del resto del sitio — a lo ancho, ese ratio la haría
	   altísima. 16:9 se probó primero y cortaba la cara entera (solo se veía
	   la parte de arriba de la cabeza) — mala idea cuando la foto ES el
	   producto; 6:5 da bastante más alto (~50% más que 16:9) sin volver al
	   cuadrado original. */
	.single-product .hb-gallery-v2-main img{ aspect-ratio: 6 / 5; }
	/* (El recorte "Ver más" de la pestaña Descripción — .hb-tab-desc-collapse
	   / .hb-product-desc-toggle — se retiró con la ficha v3: las pestañas van
	   a ancho completo y ya no hay que alinear nada con la galería.) */
}

/* "También te puede interesar", siempre en UNA fila de 4 centrada — con
   flex+wrap (intento anterior), 4 cards de 320px no cabían en una pantalla
   de portátil normal (1440px) y la 4ª se caía sola a una segunda fila,
   centrada por su cuenta (se veía rarísimo). Con grid de 4 columnas y
   "minmax(0, 320px)" las 4 caben siempre en una sola fila, encogiéndose
   juntas si hace falta en vez de partirse en dos filas. */
.single-product .related.products ul.products{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 320px));
	justify-content: center;
	gap: var(--hb-gutter);
}
.single-product .related.products ul.products li.product{
	width: auto !important;
}

/* ==========================================================================
   Modo catálogo (CatalogX) — CTA en vez de precio/Añadir al carrito
   ========================================================================== */
.single-product .hb-catalog-cta{
	display: inline-block;
	margin-top: 0.6em;
	font-size: var(--hb-body-3);
	font-weight: 600;
	color: var(--hb-nude);
}

/* ==========================================================================
   Ticker "Reservar consulta" / "Parking gratuito..."
   ========================================================================== */
.hb-ticker{
	/* Reskin claro (Fase 2, punto 5): franja alterna "--hb-bg-alt" (misma
	   que separa secciones en el resto del sitio, ver home/mega-menú/blog),
	   ya no el fondo oscuro de la v1 — así la franja se distingue del blanco
	   de las secciones de arriba/abajo sin recurrir a un morado sólido. */
	background-color: var(--hb-bg-alt);
	overflow: hidden;
	white-space: nowrap;
	padding: 1em 0;
}
.hb-ticker-track{
	display: inline-flex;
	/* De izquierda a derecha: arranca desplazada un 50% a la izquierda y
	   termina en su posición natural, así el contenido avanza hacia la
	   derecha (antes iba al revés, "from 0 to -50%" se movía a la izquierda). */
	animation: hb-ticker-scroll 30s linear infinite;
}
.hb-ticker-item{
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0 1.5em;
	font-size: var(--hb-h3);
	font-weight: 600;
	cursor: pointer;
	border-right: 1px solid rgba(36,31,27,0.2);
}
.hb-ticker-arrow{ color: var(--hb-nude); }
@keyframes hb-ticker-scroll{
	from{ transform: translateX(-50%); }
	to{ transform: translateX(0); }
}

/* ==========================================================================
   Modal "Reservar consulta"
   ========================================================================== */
.hb-modal{ display: none; }
.hb-modal.is-open{
	display: block;
	position: fixed;
	inset: 0;
	z-index: 1000;
}
.hb-modal-overlay{
	position: absolute;
	inset: 0;
	background: rgba(28,21,34,0.6);
}
.hb-modal-box{
	position: relative;
	max-width: 520px;
	margin: 6vh auto;
	background: var(--hb-negro);
	border-radius: 18px;
	padding: 2em;
	max-height: 88vh;
	overflow-y: auto;
}
.hb-modal-close{
	/* BUG (pase móvil, visto en el modal "Reservar consulta"): esta regla no
	   anulaba "padding" ni "display", así que heredaba el reset genérico de
	   más abajo (".button, button, ...{ padding:0.8em 1.6em }"), calculado
	   sobre SU PROPIO "font-size:1.6em" (25.6px) — 0.8em/1.6em de eso son
	   ~20px/41px de padding, una caja de ~97×66px para un simple carácter
	   "×". Al no centrarse ese texto verticalmente (un <button> normal, sin
	   flex), la "×" aparecía muy desplazada hacia abajo dentro de esa caja
	   invisible, superpuesta al título y al primer campo del formulario, y
	   con solo su mitad inferior visible se leía como un cheurón/"∨" suelto
	   en vez de una "×" en la esquina. "padding:0" + tamaño fijo 44×44 con
	   flex centra el glifo de verdad y de paso da un objetivo táctil
	   decente (mismo criterio que el botón de cerrar del menú móvil). Las
	   variantes más específicas (".hb-quickview-box .hb-modal-close" a
	   28×28, etc.) siguen pisando este tamaño sin problema. */
	position: absolute;
	top: 1em;
	right: 1em;
	width: 44px;
	height: 44px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	font-size: 1.6em;
	line-height: 1;
	cursor: pointer;
	color: var(--hb-nude);
}
.hb-modal-box h3{ margin-top: 0; }
.hb-modal-intro{ color: var(--hb-lila-1); font-size: var(--hb-body-3); margin: -0.5em 0 1.2em; }

/* ==========================================================================
   Modal "Vista rápida" (hb_render_quickview_modal / hb_render_quickview_content
   en functions.php — referencia: CEIN, nodo 75:3598). Mismo ".hb-modal-box"
   de base que el resto de modales, con una variante ".hb-quickview-box" más
   ancha (galería + detalles en dos columnas) en vez de la caja angosta de
   "Reservar consulta"/"Buscar". Medidas de columnas/gaps con los tokens del
   sitio (--hb-container-pad/--hb-gutter), no con los px crudos del
   flattened de Figma (900×641, foto 376×430…) — solo el max-width de la
   caja en sí se toma literal del layout de referencia. */
.hb-quickview-box{
	max-width: 900px;
	width: 90vw;
	padding: 0;
	display: grid;
	grid-template-columns: 42% 1fr;
	gap: 0;
	overflow: hidden;
}
.hb-quickview-box .hb-modal-close{
	top: 1em;
	right: 1em;
	z-index: 2;
	background: rgba(255,255,255,0.85);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	line-height: 1;
	font-size: 1.3em;
}
.hb-quickview-content{ display: contents; }
.hb-quickview-loading{ grid-column: 1 / -1; padding: var(--hb-container-pad); text-align: center; color: var(--hb-gris-azul); }
.hb-quickview-gallery{
	background: var(--hb-bg-alt);
	padding: var(--hb-gutter);
	display: flex;
	flex-direction: column;
	gap: 0.8em;
	max-height: 88vh;
	overflow-y: auto;
}
.hb-quickview-gallery-main{
	display: flex;
	align-items: center;
	justify-content: center;
}
.hb-quickview-main-img{ width: 100%; height: auto; object-fit: cover; }
.hb-quickview-gallery-dots{ display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.hb-quickview-dot{
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 1px solid var(--hb-gris-azul);
	background: transparent;
	padding: 0;
	cursor: pointer;
}
.hb-quickview-dot.is-active{ background: var(--hb-nude); border-color: var(--hb-nude); }
.hb-quickview-details{
	padding: var(--hb-container-pad);
	max-height: 88vh;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}
.hb-quickview-title{ font-size: var(--hb-h2); margin: 0 0 0.3em; }
.hb-quickview-price{ font-size: var(--hb-body-2); font-weight: 600; margin-bottom: 1em; }
.hb-quickview-attr{ margin-bottom: 1.2em; }
.hb-quickview-attr-label{ font-size: var(--hb-body-3); color: var(--hb-gris-azul); margin: 0 0 0.5em; }
.hb-quickview-attr-value{ color: var(--hb-nude); }
.hb-quickview-swatches{ display: flex; gap: 8px; flex-wrap: wrap; }
.hb-quickview-swatch{
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--hb-lila-1);
	padding: 0;
	cursor: pointer;
	box-shadow: 0 0 0 1px transparent;
}
.hb-quickview-swatch.is-active{ box-shadow: 0 0 0 2px var(--hb-negro), 0 0 0 3px var(--hb-nude); }
.hb-quickview-sizes{ display: flex; gap: 8px; flex-wrap: wrap; }
.hb-quickview-size{
	/* ANTES: "background: var(--hb-blanco); color: var(--hb-nude);". En el
	   remap de tokens de este tema "--hb-blanco" y "--hb-nude" son el MISMO
	   casi-negro (#14110E, ver el comentario junto a su definición un poco
	   más arriba en este archivo) — el botón salía como un rectángulo sólido
	   oscuro con texto oscuro sobre oscuro, ilegible. Mismo patrón que ya usan
	   los demás chips/píldoras del sitio (p.ej. ".hb-blog-filters a"): fondo
	   claro (color de página) + texto/borde oscuro en reposo, e invertido
	   (fondo oscuro + texto claro) cuando está seleccionado. */
	min-width: 44px;
	padding: 0.5em 0.8em;
	font-size: var(--hb-body-3);
	background: var(--hb-negro);
	color: var(--hb-nude);
	border: 1px solid var(--hb-lila-1);
	border-radius: 0;
	cursor: pointer;
}
.hb-quickview-size.is-active{
	background: var(--hb-nude);
	color: var(--hb-negro);
	border-color: var(--hb-nude);
	border-width: 2px;
}
.hb-quickview-actions{ margin-top: auto; padding-top: 0.5em; }
.hb-quickview-actions .cart{ display: flex; align-items: center; gap: 0.8em; }
.hb-quickview-actions .single_add_to_cart_button,
.hb-quickview-actions .hb-quickview-info-btn{ flex: 1; justify-content: center; width: 100%; }
.hb-quickview-full-link{
	display: inline-block;
	margin-top: 1em;
	font-size: var(--hb-body-3);
	color: var(--hb-nude);
	text-decoration: underline;
	text-underline-offset: 3px;
}
@media (max-width: 800px){
	.hb-quickview-box{
		grid-template-columns: 1fr;
		width: 100vw;
		max-width: 100vw;
		height: 100vh;
		max-height: 100vh;
		margin: 0;
		border-radius: 0;
	}
	.hb-quickview-gallery,
	.hb-quickview-details{ max-height: none; }
}

/* ==========================================================================
   Mini-cart / drawer del carrito (referencia: CEIN "Shopping bag", nodo
   28:1660/28:1910 — APLANADO, medidas visuales sobre la imagen, ver
   MASTER_SPEC.md). Reutiliza ".hb-modal"/".hb-drawer" (el mismo cajón lateral
   que ya usa "Filtrar y clasificar", ver ".hb-drawer .hb-modal-box" más
   arriba) — aquí solo el ancho propio (400px medido en Figma, algo más
   estrecho que los 420px genéricos del cajón de filtros) y las clases
   internas del contenido (hb_render_minicart_content en functions.php).
   ========================================================================== */
/* Overlay difuminado (ver MASTER_SPEC.md: "overlay oscuro difuminado") —
   variante SOLO de este drawer, no del ".hb-modal-overlay" genérico que
   comparten "Reservar consulta"/"Buscar"/"Vista rápida"/"Filtrar y
   clasificar" (esos no llevan blur en su spec). */
#hb-minicart-modal .hb-modal-overlay{
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
#hb-minicart-modal .hb-modal-box{
	width: 400px;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.hb-minicart-box .hb-modal-close{ top: 1.3em; right: 1.3em; z-index: 2; }
.hb-minicart-panel-content{ display: flex; flex-direction: column; height: 100%; min-height: 0; }
.hb-minicart-header{
	padding: 1.5em 1.5em 1.2em;
	border-bottom: 1px solid var(--hb-lila-1);
}
.hb-minicart-title{ margin: 0; font-size: var(--hb-h3); padding-right: 2em; }
.hb-minicart-body{ flex: 1; overflow-y: auto; padding: 0 1.5em; }
.hb-minicart-empty{ padding: 2em 0; color: var(--hb-gris-azul); font-size: var(--hb-body-2); }
.hb-minicart-line{
	position: relative;
	display: flex;
	gap: 20px;
	padding: 1.5em 0;
	border-bottom: 1px solid var(--hb-lila-1);
}
.hb-minicart-line.is-updating{ opacity: 0.5; pointer-events: none; }
.hb-minicart-body .hb-minicart-line:last-child{ border-bottom: none; }
.hb-minicart-line-thumb{
	flex: none;
	display: block;
	width: 100px;
	height: 100px;
	background: var(--hb-bg-alt);
	overflow: hidden;
}
.hb-minicart-line-thumb img{ width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.hb-minicart-line-info{ flex: 1; min-width: 0; padding-right: 1.6em; }
.hb-minicart-line-name{
	display: block;
	font-size: var(--hb-body-3);
	font-weight: 600;
	color: var(--hb-nude);
	text-decoration: none;
	margin: 0 0 0.5em;
}
.hb-minicart-line-price{ margin: 0 0 0.8em; font-size: var(--hb-body-3); color: var(--hb-gris-azul); }
/* Stepper píldora "− N +" (ver MASTER_SPEC.md: "stepper píldora ~24px alto")
   — mismo lenguaje visual que ".hb-filter-pill" (borde --hb-nude, radio 999px)
   en vez de inventar un componente nuevo. */
.hb-minicart-line-stepper{
	display: inline-flex;
	align-items: center;
	height: 24px;
	border: 1px solid var(--hb-nude);
	border-radius: 999px;
	overflow: hidden;
}
.hb-minicart-qty-btn{
	appearance: none;
	background: none;
	border: none;
	width: 24px;
	height: 24px;
	line-height: 1;
	font-size: var(--hb-body-3);
	color: var(--hb-nude);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.hb-minicart-qty-btn:disabled{ color: var(--hb-lila-1); cursor: default; }
/* Sobreescribe la regla genérica "button:hover{background-color:var(--hb-lila-2)}"
   (misma trampa ya documentada junto a ".hb-cat-prefilter button:hover" más
   arriba): sin esto, el "+"/"−" se pintaban con un fondo naranja sólido al
   pasar el ratón, rompiendo el criterio "monocromo" del stepper del Figma. */
.hb-minicart-qty-btn:hover{ background-color: transparent; }
.hb-minicart-qty-btn:not(:disabled):hover{ color: var(--hb-lila-2); }
.hb-minicart-qty-value{
	min-width: 1.6em;
	text-align: center;
	font-size: var(--hb-body-3);
	color: var(--hb-nude);
}
.hb-minicart-line-remove{
	position: absolute;
	top: 1.5em;
	right: 0;
	font-size: 1.2em;
	line-height: 1;
	color: var(--hb-nude);
	cursor: pointer;
}
.hb-minicart-line-remove:hover{ color: var(--hb-lila-2); }
.hb-minicart-footer{ padding: 1.5em; border-top: 1px solid var(--hb-lila-1); }
.hb-minicart-subtotal{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 0.6em;
	font-size: var(--hb-body-2);
	font-weight: 600;
	color: var(--hb-nude);
}
.hb-minicart-shipping-note{ margin: 0 0 1.2em; font-size: var(--hb-body-3); color: var(--hb-gris-azul); }
/* CTA único, cuadrado y sólido (mismo criterio que ".hb-cart-checkout
   a.checkout-button" en la sección "Carrito" más abajo — botón de checkout
   negro/cuadrado, distinto de la píldora de producto): full-width, con el
   total ya dentro del texto en vez de un botón secundario "Ver carrito"
   aparte (Figma "Go To Checkout $total" — un solo botón). */
.hb-minicart-checkout-btn{
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	background-color: var(--hb-nude);
	color: var(--hb-negro);
	border-radius: 0;
	padding: 0.95em 1.5em;
	font-size: var(--hb-body-1);
	text-decoration: none;
}
.hb-minicart-checkout-btn:hover{ background-color: var(--hb-lila-2); color: var(--hb-negro); }
@media (max-width: 480px){
	#hb-minicart-modal .hb-modal-box{ width: 100vw; max-width: 100vw; }
}

.hb-search-form{ display: flex; gap: 0.8em; }
.hb-search-input{
	flex: 1;
	font-family: var(--hb-font);
	font-size: 16px;
	padding: 0.9em 1.1em;
	border-radius: 999px;
	border: 1px solid var(--hb-gris-azul);
	background: rgba(36,31,27,0.06);
	color: var(--hb-nude);
}
.hb-search-input::placeholder{ color: var(--hb-gris-azul); }
.hb-search-input:focus{ outline: 2px solid var(--hb-lila-2); outline-offset: 2px; }
.hb-search-submit{ flex: none; }

/* Sello de reseñas de Google en la ficha de producto: justo debajo del
   título, antes de la descripción — prueba social inmediata sin salir del
   sitio (ver hb_render_google_reviews_badge). */
.hb-google-reviews-badge{
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0.4em 0 1em;
	text-decoration: none;
	color: var(--hb-nude);
	font-size: var(--hb-body-3);
}
.hb-google-reviews-stars{ color: #C9A24B; letter-spacing: 1px; }
.hb-google-reviews-text{ text-decoration: underline; text-underline-offset: 3px; }
.hb-google-reviews-badge:hover .hb-google-reviews-text{ color: var(--hb-lila-2); }

/* Bloque "Por qué elegirnos": lista de beneficios reales cerca del CTA. */
.hb-why-us{ margin-top: 1.4em; padding-top: 1.2em; border-top: 1px solid var(--hb-lila-1); }
.hb-why-us h2{ font-size: var(--hb-h5); margin: 0 0 0.6em; }
.hb-why-us ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5em; }
.hb-why-us li{ font-size: var(--hb-body-3); padding-left: 1.4em; position: relative; }
.hb-why-us li::before{ content: "✓"; position: absolute; left: 0; color: var(--hb-lila-2); font-weight: 700; }
.hb-why-us a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hb-shipping-note{ margin-top: 1em; font-size: var(--hb-footer); color: var(--hb-gris-azul); font-style: italic; }

/* Desplegables nativos <details>/<summary> (ver "hb_product_ficha_tabs" en
   functions.php — antes eran pestañas horizontales, cambiado por lo que
   documenta Baymard en "Avoid Horizontal Tabs"). Un solo diseño para todas
   las secciones, ya vengan abiertas por defecto ("Descripción") o cerradas
   ("Ficha técnica") — el propio navegador gestiona abrir/cerrar, sin JS. */
.hb-product-tabs{ margin-top: 1.2em; }
.hb-product-accordion-item{
	border-top: 1px solid rgba(36,31,27,0.15);
}
.hb-product-accordion-item:last-child{ border-bottom: 1px solid rgba(36,31,27,0.15); }
.hb-product-accordion-summary{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1em 0;
	cursor: pointer;
	font-family: var(--hb-font);
	font-size: var(--hb-h5);
	font-weight: 600;
	color: var(--hb-nude);
	list-style: none;
}
/* El triángulo de despliegue nativo del navegador no sigue el estilo del
   sitio (varía por navegador/SO) — se oculta y se sustituye por un "+"/"−"
   propio, mismo patrón que ya usan los desplegables de filtros. */
.hb-product-accordion-summary::-webkit-details-marker{ display: none; }
.hb-product-accordion-summary::marker{ content: ""; }
.hb-product-accordion-summary::after{ content: "+"; font-size: 1.3em; color: var(--hb-nude); }
.hb-product-accordion-item[open] > .hb-product-accordion-summary::after{ content: "\2212"; }
.hb-product-accordion-summary:focus{ outline: none; }
.hb-product-accordion-summary:focus-visible{
	outline: 2px solid var(--hb-lila-2);
	outline-offset: 3px;
}
.hb-product-accordion-body{ padding-bottom: 1.2em; }
.hb-product-accordion-body .hb-why-us{ border-top: none; padding-top: 0; margin-top: 0; }

/* Reseñas nativas de WooCommerce (ver hb_single_product_reviews_section):
   solo se visten aquí las clases estándar que ya pinta WooCommerce
   (#reviews, .commentlist, #review_form) — el formulario y el listado los
   sigue generando WooCommerce, esto es solo el tema visual oscuro del resto
   del sitio. */
.hb-product-reviews{ max-width: 760px; margin: 3em auto; padding: 0 var(--hb-inset); }
.hb-product-reviews #reviews > *{ max-width: 720px; }
.hb-product-reviews .woocommerce-Reviews-title,
.hb-product-reviews #reply-title{ font-size: var(--hb-h3); color: var(--hb-nude); margin: 0 0 0.8em; }
.hb-product-reviews .commentlist{ list-style: none; margin: 0 0 2em; padding: 0; display: flex; flex-direction: column; gap: 1.4em; }
.hb-product-reviews .commentlist li.review{ border-bottom: 1px solid var(--hb-gris-azul); padding-bottom: 1.4em; }
.hb-product-reviews .comment-text{ display: flex; flex-direction: column; gap: 0.4em; }
.hb-product-reviews .star-rating{ color: #C9A24B; font-size: var(--hb-body-3); }
.hb-product-reviews .star-rating::before{ content: "★★★★★"; letter-spacing: 2px; color: var(--hb-gris-azul); }
.hb-product-reviews .star-rating span{ overflow: hidden; display: block; }
.hb-product-reviews p.meta{ font-size: var(--hb-footer); color: var(--hb-gris-azul); margin: 0; }
.hb-product-reviews .description p{ color: #E7E6E4; margin: 0.3em 0 0; }
.hb-product-reviews .woocommerce-noreviews{ color: var(--hb-lila-1); }
.hb-product-reviews #review_form_wrapper #respond{ background: none; }
.hb-product-reviews .comment-form-rating label,
.hb-product-reviews .comment-form-comment label,
.hb-product-reviews .comment-form-author label,
.hb-product-reviews .comment-form-email label{ display: block; color: var(--hb-nude); font-size: var(--hb-body-3); margin-bottom: 0.3em; }
.hb-product-reviews #respond p{ margin: 0 0 1em; }
.hb-product-reviews .comment-form-rating select{ display: none; }
.hb-product-reviews textarea,
.hb-product-reviews input[type="text"],
.hb-product-reviews input[type="email"]{
	width: 100%;
	background: var(--bg-raised, #241B2C);
	background: rgba(36,31,27,0.06);
	border: 1px solid var(--hb-gris-azul);
	border-radius: 8px;
	padding: 0.7em 0.9em;
	color: var(--hb-nude);
	font-family: var(--hb-font);
	font-size: var(--hb-body-3);
}
.hb-product-reviews #respond .form-submit input{
	background: var(--hb-nude);
	color: var(--hb-negro);
	border: none;
	border-radius: 25px;
	padding: 10px 22px;
	font-family: var(--hb-font);
	font-size: var(--hb-body-3);
	cursor: pointer;
}
.hb-product-reviews #respond .form-submit input:hover{ background: var(--hb-lila-2); }

/* ==========================================================================
   Footer
   ========================================================================== */
#colophon,
.site-footer{
	/* CORRECCIÓN (Fase 2, home reconstruida a CEIN, prioridad 1 — feedback
	   directo del owner): el footer oscuro de arriba fue una decisión propia
	   equivocada, NO un dato de Figma. "get_design_context" sobre el nodo
	   "Landing - desktop" 6:309 (capas reales, no aplanado) da el footer de
	   CEIN como gris CLARO "#F5F4F4" (mismo token que ya usamos en el resto
	   del sitio como franja alterna, "--hb-bg-alt") con texto oscuro — no un
	   ancla oscura. Se revierte al mismo lenguaje claro/editorial que el
	   resto de la home en vez de una franja negra suelta al final. */
	background-color: var(--hb-bg-alt);
	color: var(--hb-nude);
	border-top: 1px solid var(--hb-lila-1);
	font-size: var(--hb-footer);
}
#colophon a,
.site-footer a{
	/* CORRECCIÓN (footer claro): antes "--hb-negro" (blanco puro) para
	   contrastar sobre el footer oscuro anterior — invisible sobre el nuevo
	   fondo claro. Mismo oscuro que el resto de enlaces del footer. */
	color: var(--hb-nude);
	opacity: 0.85;
}
#colophon a:hover,
.site-footer a:hover{ color: var(--hb-lila-2); opacity: 1; }
/* "!important" hace falta: la regla general ".col-full{max-width:...
   !important; padding:...!important}" (arriba del todo del archivo) gana a
   un override normal por especificidad, así que sin esto aquí el margen de
   ".hb-footer-main" (var(--hb-inset)) se sumaba AL padding de 100px de
   ".col-full" en vez de sustituirlo — el footer salía con el doble de
   margen lateral que el resto de secciones de la web (p. ej. "Marcas"). */
#colophon .col-full{ max-width: none !important; padding: 0 !important; }

/* Mismo margen lateral de 100px (var(--hb-inset)) que usa el resto del
   sitio (Figma también usa ese valor, "px-[100px]") — antes el footer tenía
   un padding suelto de 2em/3.5em que no cuadraba con el borde del logo/menú
   de la cabecera. Columnas por GRID con proporciones fijas, no flex con
   columnas a medida de su contenido + "flex-wrap": esto último (probado y
   descartado) partía el texto de las píldoras a media frase en anchos
   intermedios (~1280-1536px) o, al envolver, dejaba huecos en blanco raros
   a los lados — el grid degrada de forma predecible en todos los anchos. */
.hb-footer-main{
	display: grid;
	grid-template-columns: 0.8fr 0.7fr 1.3fr 1fr;
	gap: 2rem;
	padding: 60px var(--hb-inset);
}
.hb-footer-address,
.hb-footer-contact{
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
/* Mismo tratamiento EXACTO que el logo de la cabecera (".hb-logo-link"/
   ".hb-logo-main"/".hb-logo-sub"): "BARCELONA" centrado bajo "HAIRSTORE"
   (no pegado a la izquierda) vía flex-column, y el mismo "margin-left:-33px"
   que compensa el hueco óptico de la "H" de Rethink Sans a este tamaño —
   antes el footer no tenía ninguno de los dos y no se sentía "el mismo
   logo", aunque el tamaño de letra ya coincidiera. */
.hb-footer-logo{
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.27;
	margin-left: 0; /* antes -33px de compensación óptica v1: rompía la alineación exacta con la línea de contenido */
}
.hb-footer-logo-main{
	font-family: var(--hb-font);
	font-weight: 700;
	font-size: 38.76px;
	letter-spacing: 1.94px;
	/* CORRECCIÓN (footer claro): antes "--hb-negro" (blanco puro), pensado
	   para el footer oscuro anterior — invisible sobre el nuevo fondo claro
	   "--hb-bg-alt". Mismo token oscuro que usa el logo de la cabecera
	   (".hb-logo-main"), para que sea el mismo logo en los dos sitios. */
	color: var(--hb-nude);
	white-space: nowrap;
}
.hb-footer-logo-sub{
	font-family: var(--hb-font);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 3.22px;
	/* CORRECCIÓN (footer claro): antes "--hb-lila-1" (#DDDDDD, el gris de
	   borde), casi invisible sobre el nuevo fondo claro — mismo gris de
	   metadatos ("--hb-gris-azul") que ya usa el resto del sitio para texto
	   secundario sobre blanco. */
	color: var(--hb-gris-azul);
	white-space: nowrap;
	margin-top: -9px;
}
.hb-footer-menu{ display: flex; flex-direction: column; gap: 0.9em; padding-top: 4px; }
/* QA final (2026-07): objetivo táctil real de 16.5px de alto (línea de texto
   a 11px sin padding), muy por debajo del umbral de 40px de la auditoría —
   mismo truco padding+margen negativo que ".hb-top-bar-contact"/
   ".hb-mega-menu-col a" más arriba: el footer no cambia de alto. */
.hb-footer-menu a{ white-space: nowrap; padding: 12px 0; margin: -12px 0; }
.hb-footer-address p,
.hb-footer-contact p{ margin: 0; }
.hb-footer-transit,
.hb-footer-hours{ display: flex; flex-direction: column; gap: 0.9em; }
.hb-footer-transit span,
.hb-footer-hours span{ display: flex; align-items: center; gap: 0.5em; }
.hb-footer-transit em,
.hb-footer-hours em{
	font-style: normal;
	display: inline-block;
	padding: 0.25em 0.9em;
	border: 1px solid var(--hb-lila-1);
	border-radius: 999px;
	font-size: var(--hb-footer);
	white-space: nowrap;
}
.hb-footer-transit span > p,
.hb-footer-transit > span,
.hb-footer-hours > span{ white-space: nowrap; }

.hb-footer-bottom{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1em;
	padding: 18px var(--hb-inset);
	/* CORRECCIÓN (footer claro, ver #colophon arriba): ya no hace falta una
	   franja propia más oscura para "anclar" el final de la página — con todo
	   el footer en "--hb-bg-alt", esta barra de copyright se distingue de la
	   franja de arriba solo con una línea divisoria fina, mismo borde
	   "--hb-lila-1" (#DDDDDD) que separa secciones en el resto del sitio. */
	background-color: var(--hb-bg-alt);
	border-top: 1px solid var(--hb-lila-1);
	color: var(--hb-nude);
}
.hb-footer-bottom p{ margin: 0; }
.hb-footer-legal{ display: flex; gap: 1.5em; }
/* QA final (2026-07): mismo problema/arreglo que ".hb-footer-menu a" arriba
   (16.5px de alto real) — padding+margen negativo, sin cambiar el alto de la
   barra de copyright. */
.hb-footer-legal a{ padding: 12px 0; margin: -12px 0; }
.hb-footer-legal a,
.hb-footer-bottom p{ color: var(--hb-nude); opacity: 0.75; }
.hb-footer-social{ display: flex; gap: 0.6em; }
/* Footer claro: los SVG de Instagram/Facebook ya llevan su trazo en negro
   casi puro (#1C1522) de fábrica — visibles tal cual sobre este fondo claro,
   sin necesitar el filtro de inversión que hacía falta con el footer oscuro. */
.hb-footer-social img{ width: 20px; height: 20px; }

@media (max-width: 900px){
	.hb-footer-main{ grid-template-columns: 1fr 1fr; row-gap: 2.5em; }
	.hb-footer-address,
	.hb-footer-contact{ grid-column: span 2; align-self: auto; }
	.hb-footer-bottom{ flex-direction: column; text-align: center; }

	/* Las píldoras de transporte/horario ("H8/58 → Parada 1577/Les Corts-
	   Vallespir") llevan "white-space:nowrap" pensado para el ancho de
	   escritorio — en móvil el texto más largo no cabe y se corta a media
	   palabra en el borde de la pantalla. Aquí se deja envolver en varias
	   líneas dentro de la propia píldora en vez de recortarse. */
	.hb-footer-transit span,
	.hb-footer-hours span{ align-items: flex-start; flex-wrap: wrap; row-gap: 0.4em; }
	.hb-footer-transit em,
	.hb-footer-hours em{ white-space: normal; }
	.hb-footer-transit span > p,
	.hb-footer-transit > span,
	.hb-footer-hours > span{ white-space: normal; }
}

/* ==========================================================================
   Carrito ("woocommerce/cart/cart.php") — reskin v4 (patrón del carrito de
   Your Next Store, mismo idioma que los bloques "v4-" de cein.css): lista de
   filas horizontales (foto cuadrada pequeña sobre #f5f5f5 → nombre/variante →
   precio de línea → stepper píldora) + resumen con borde redondeado a la
   derecha. El "carrito vacío" sigue usando la plantilla NATIVA de WooCommerce
   ("cart/cart-empty.php", sin override), su piel v4 vive en cein.css
   ("CARRITO VACÍO"). */
.hb-cart-page{
	max-width: var(--hb-container-max);
	margin: 0 auto;
	/* OJO padding lateral: --hb-container-pad (32px fijos), NUNCA --hb-inset.
	   --hb-inset es viewport-relativo (max(32px, 50vw − 640px + 32px)) y está
	   pensado para cajas a SANGRE (100vw), donde ese padding es lo que centra
	   el contenido; aquí la caja ya está capada a max-width:1280px + margin
	   auto, y con --hb-inset el padding crecía con la ventana COMIÉNDOSE la
	   caja por dentro: a viewport 2000px eran 392px por lado → 496px de
	   contenido útil, el layout entero colapsado y el H1 partiéndose letra a
	   letra. (A ≤1440 no se veía porque el inset aún era pequeño.) */
	padding: 40px var(--hb-container-pad) 96px;
}
/* H1 v4: mismo tamaño/peso que el titular de la ficha y del FAQ
   (clamp 36-48, medium, tracking apretado), alineado a la izquierda. */
.hb-cart-title{
	margin: 0 0 40px;
	font-size: clamp(36px, 4vw, 48px);
	line-height: 1.05;
	font-weight: 500;
	letter-spacing: -0.025em;
	color: #0a0a0a;
}
body.woocommerce-cart .woocommerce-info{
	text-align: center;
	max-width: 600px;
	margin: 3em auto 1em;
	border: none;
	padding: 0;
	font-size: var(--hb-body-2);
	color: var(--hb-nude);
	list-style: none;
}
body.woocommerce-cart .return-to-shop{
	text-align: center;
	margin: 0 0 4em;
}

/* Dos columnas v4: lista de items (~2/3) / resumen (~1/3), gap 48 (el hueco
   generoso del carrito YNS, no el --hb-gutter de 32 de las rejillas de
   cards). Apilan en móvil (ver media query 900 abajo). */
.hb-cart-layout{
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
	align-items: start;
	gap: 48px;
}
/* Lista de UNA columna con divisores (patrón "divide-y" del carrito YNS),
   ya no la cuadrícula de cards verticales del diseño CEIN anterior. */
.hb-cart-items{
	display: flex;
	flex-direction: column;
}

/* Cada línea: fila horizontal foto | info, separada de la siguiente por un
   divisor #e5e5e5. El "×" va absoluto arriba-derecha (ver ".product-remove"
   más abajo). */
.hb-cart-item{
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 24px 0;
	border-bottom: 1px solid #e5e5e5;
}
.hb-cart-item:first-child{ padding-top: 0; }
/* Columna de info: min-width:0 para que un nombre largo parta línea en vez
   de desbordar; padding-right reserva el hueco del "×". */
.hb-cart-item-info{
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-right: 40px;
}
.hb-cart-item-header{ display: flex; flex-direction: column; gap: 2px; }
/* Foto cuadrada pequeña sobre gris con radio — mismo tratamiento que
   ".v4-card-photo"/".v4-pdp-photo" en cein.css, incluido el
   mix-blend-mode:multiply para fundir la foto de estudio con el gris. */
.hb-cart-item-photo{
	flex: none;
	width: 110px;
	height: 110px;
	background-color: #f5f5f5;
	border-radius: 12px;
	overflow: hidden;
}
.hb-cart-item-photo a{ display: block; width: 100%; height: 100%; }
.hb-cart-item-photo img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	mix-blend-mode: multiply;
}
/* "!important" necesario: Storefront trae ".hentry .entry-content a{text-decoration:underline}"
   (la página de /cart/ envuelve el contenido en "hentry"/"entry-content" de
   serie) con más especificidad que un simple ".hb-cart-item-name" de una sola
   clase — sin esto el título de cada línea del carrito salía subrayado.
   Mismo bug/arreglo que ".hb-card-caption-link" más arriba. */
.hb-cart-item-name{
	font-size: 16px;
	font-weight: 500;
	color: #0a0a0a;
	text-decoration: none !important;
	line-height: 1.4;
}
a.hb-cart-item-name:hover{ color: #737373; text-decoration: none !important; }
.hb-cart-item-variant{
	font-size: 14px;
	color: #737373;
}
.hb-cart-item-variant .variation{ margin: 0; }
.hb-cart-item-variant p{ margin: 0; }
.hb-cart-item-backorder{ font-size: 14px; color: #737373; margin: 0.35em 0 0; }

/* Precio de línea (precio × cantidad): 16/600, como ".v4-card-price". */
.hb-cart-item-price{
	font-size: 16px;
	font-weight: 600;
	color: #0a0a0a;
}

.hb-cart-item-qty-row{
	margin-top: 4px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

/* Stepper píldora "− 1 +" — el <input class="qty"> nativo de WooCommerce
   vive DENTRO, sin su aspecto de campo de número (sin borde/spinners
   propios): solo se ve el número, los botones son los que mandan (ver
   js/hb-cart.js). MISMO estilo que el stepper de la ficha de producto
   (".v4-pdp .hb-product-buy-row form.cart .quantity" en cein.css): borde
   #e5e5e5, píldora, fondo blanco, hover gris — solo cambia la altura
   (40 vs 48, aquí es un control secundario dentro de la fila). */
.hb-cart-qty-stepper{
	display: inline-flex;
	align-items: center;
	height: 40px;
	border: 1px solid #e5e5e5;
	border-radius: 999px;
	overflow: hidden;
	background: #fff;
}
.hb-qty-btn{
	flex: none;
	width: 36px;
	height: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1;
	color: #0a0a0a;
	cursor: pointer;
}
.hb-qty-btn:hover{ background-color: #f5f5f5; color: #0a0a0a; }
.hb-cart-qty-stepper .quantity{ display: inline-flex; margin: 0; }
.hb-cart-qty-stepper input.qty{
	width: 2.4em;
	height: 100%;
	border: none;
	background: none;
	padding: 0;
	margin: 0;
	text-align: center;
	font-family: var(--hb-font);
	font-size: 15px;
	font-weight: 500;
	color: #0a0a0a;
	-moz-appearance: textfield;
}
.hb-cart-qty-stepper input.qty::-webkit-outer-spin-button,
.hb-cart-qty-stepper input.qty::-webkit-inner-spin-button{
	-webkit-appearance: none;
	margin: 0;
}

/* "×" de quitar línea: arriba a la derecha de la card, discreto (nada del
   círculo relleno con icono de Font Awesome por defecto de Storefront).
   OJO: al contrario de lo que decía este comentario antes, Storefront SÍ
   sigue cargando "assets/css/woocommerce/woocommerce.css" (que a su vez
   trae "base/icons.css") — nunca se ha desregistrado ese handle, solo el
   "storefront-child-style" que encolaba el propio CHILD theme (ver
   functions.php). Esas reglas base traen "a.remove{text-indent:-9999px}"
   (oculta el "×" real) + "a.remove::before{font-family:"Font Awesome 5
   Free"; content:"\f057"}" (pinta el icono de círculo relleno encima) —
   ambas se neutralizan aquí explícitamente en vez de asumir que no aplican. */
.hb-cart-item .product-remove{
	position: absolute;
	top: 20px;
	right: 0;
}
.hb-cart-item:first-child .product-remove{ top: 0; } /* la primera fila no lleva padding-top */
.hb-cart-item .product-remove .remove{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: #737373;
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
	text-indent: 0;
	border-radius: 50%;
}
.hb-cart-item .product-remove .remove::before{ content: none; }
.hb-cart-item .product-remove .remove:hover{ color: #0a0a0a; background-color: #f5f5f5; }

/* Botón nativo "Actualizar carrito": accesible por teclado pero fuera de la
   vista normal — el stepper lo dispara solo (ver js/hb-cart.js). Mismo
   patrón "screen-reader-text" que ya usa WordPress core para este tipo de
   controles. */
.woocommerce-cart-form > button[name="update_cart"].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;
}
.woocommerce-cart-form > button[name="update_cart"].screen-reader-text:focus{
	position: static;
	width: auto;
	height: auto;
	margin: 1em 0;
	clip: auto;
}

/* Resumen del pedido (columna derecha) — hb_cart_summary_box() en
   functions.php. Caja v4: borde #e5e5e5 con radio 16, filas con divisores. */
.hb-cart-summary-col{ position: sticky; top: calc(var(--hb-masthead-h) + 24px); }
.hb-cart-summary{
	border: 1px solid #e5e5e5;
	border-radius: 16px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.hb-cart-summary-title{
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: #0a0a0a;
	margin: 0 0 2px;
}
.hb-cart-summary-row{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	font-size: 15px;
	color: #0a0a0a;
	margin: 0;
}
.hb-cart-summary-row > span:first-child{ color: #737373; }
.hb-cart-summary-row > span:last-child{ font-weight: 500; }
/* Divisores entre Subtotal / Envío / Total. */
.hb-cart-summary-row--shipping,
.hb-cart-summary-row--total{
	border-top: 1px solid #e5e5e5;
	padding-top: 14px;
}
.hb-cart-summary-row--total{ font-size: 16px; font-weight: 600; }
.hb-cart-summary-row--total > span:first-child{ color: #0a0a0a; }
.hb-cart-summary-row--total > span:last-child{ font-weight: 600; }
.hb-cart-summary-note{
	font-size: 13px;
	line-height: 1.5;
	color: #737373;
	margin: 0;
}
.hb-cart-gift-label{
	font-size: 14px;
	font-weight: 500;
	color: #0a0a0a;
	margin: 0.25em 0 -0.5em;
}
.hb-cart-gift-message{
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	padding: 12px;
	font-family: var(--hb-font);
	font-size: 14px;
	color: #0a0a0a;
	resize: vertical;
}
.hb-cart-gift-message:focus{ outline: none; border-color: #0a0a0a; }

/* CTA de checkout: píldora negra v4 (mismo componente visual que
   ".v4-btn-dark"/".single_add_to_cart_button" de la ficha en cein.css), con
   flecha "→" en un ::after. Se aplica por selector sobre la clase nativa
   ".checkout-button" (plantilla "proceed-to-checkout-button.php" sin tocar)
   en vez de crear un componente de botón nuevo.
   OJO especificidad: el PADRE Storefront trae ".woocommerce-cart
   .wc-proceed-to-checkout a.checkout-button{font-size:1.41575em; …}" — un
   elemento + 3 clases (0,3,1) que le ganaba a un ".hb-cart-checkout
   a.checkout-button" de (0,2,1): el botón salía a ~22.6px y el texto partía
   en dos líneas en 375. Se le añade "body.woocommerce-cart" al selector
   (0,3,1 también, declarado después → gana por orden en la cascada). */
.hb-cart-checkout{ margin-top: 0.25em; }
.woocommerce-cart .hb-cart-checkout a.checkout-button{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	height: 48px;
	padding: 0 32px;
	background-color: #0a0a0a;
	color: #fff;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
}
/* "margin:0" explícito en el ::after: Storefront/WooCommerce meten un
   margin-left a los ::after de los ".wc-forward" — el hueco texto-flecha lo
   pone ya el "gap" del flex. */
.woocommerce-cart .hb-cart-checkout a.checkout-button::after{ content: "→"; margin: 0; }
.woocommerce-cart .hb-cart-checkout a.checkout-button:hover{ background-color: #262626; color: #fff; }
.woocommerce-cart .hb-cart-checkout a.checkout-button:focus-visible{ outline: 2px solid #0a0a0a; outline-offset: 3px; }

/* Cross-sell "También te puede interesar" (hb_product_ficha_related), 4-up
   en vez de las 5 columnas por defecto de ".hb-grid". */
.hb-cart-crosssell{ margin-top: 4em; }
.hb-cart-crosssell .hb-grid{ grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px){
	.hb-cart-layout{ grid-template-columns: 1fr; gap: 40px; }
	.hb-cart-summary-col{ position: static; }
	/* La fila foto|info se mantiene también en móvil (patrón YNS), solo con
	   la foto un punto más pequeña y menos aire. */
	.hb-cart-item{ padding: 20px 0; gap: 16px; }
	.hb-cart-item-photo{ width: 96px; height: 96px; }
	.hb-cart-item-info{ padding-right: 36px; }
	.hb-cart-item .product-remove{ top: 16px; }

	/* Cross-sell en móvil: fila recortada/deslizable horizontal, ~2 de 4
	   tarjetas visibles (medido sobre la imagen de Figma) — mismo patrón de
	   scroll oculto que ".hb-scroll-row" más arriba.
	   OJO especificidad: "hb_product_ficha_related()" ya trae de serie
	   ".hb-product-related .hb-grid{flex-wrap:wrap}" / ".hb-product-related
	   .hb-grid > .hb-card{flex:0 1 200px}" para su propio uso en la ficha de
	   producto (misma cantidad de clases, 3) — como se reutiliza tal cual
	   aquí (wrap_class="hb-product-related hb-cart-crosssell"), hace falta
	   iguala esa especificidad (".hb-cart-crosssell .hb-grid > .hb-card", no
	   el universal "*", que cuenta como especificidad 0 y perdía el empate)
	   para que gane por estar declarada después.
	   OJO "justify-content": ".hb-product-related .hb-grid" (regla base,
	   fuera de este media query) trae "justify-content:center" para su uso
	   normal en la ficha de producto (fila corta, sin scroll) — aquí, con
	   "overflow-x:auto" y más contenido que ancho visible, centrar el
	   contenido empieza a recortar la primera tarjeta por la IZQUIERDA (se
	   ve la mitad de la fila, no el principio) en vez de solo recortar la
	   última por la derecha como pide el MASTER_SPEC. Se pisa aquí con
	   "flex-start" — misma especificidad (2 clases) que la regla base, pero
	   declarada después, así que gana. */
	.hb-cart-crosssell .hb-grid{
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin: 0 calc(var(--hb-inset) * -1);
		padding: 0 var(--hb-inset);
	}
	.hb-cart-crosssell .hb-grid::-webkit-scrollbar{ display: none; }
	.hb-cart-crosssell .hb-grid > .hb-card{
		flex: 0 0 46vw;
		max-width: none;
		scroll-snap-align: start;
	}
}


/* ==========================================================================
   FAQ (página + acordeón por categorías) — ver MASTER_SPEC.md sección "FAQ"
   (16:1265/16:1397, aplanado, medidas "±unos px"). Sidebar "Categories"
   ~260px (medida del plan) + columna de contenido flexible; filas del
   acordeón reutilizan tal cual ".hb-product-accordion-item" (ficha de
   producto, ver functions.php ~L2248) — mismo marcador "+/−", sin CSS
   nuevo para eso.
   ========================================================================== */
.hb-faq-page #main{ padding: 1.5em 0 3em; }

.hb-faq-layout{
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 3em;
	align-items: start;
	margin-top: 1.5em;
}

.hb-faq-sidebar{
	/* Se mantiene visible al hacer scroll por la columna de contenido
	   (bastante más larga, 5 categorías × varias preguntas) — igual que
	   ".hb-cart-summary-col" en el carrito. "--hb-masthead-h" ya existe
	   como token de altura de cabecera, no un número suelto. */
	position: sticky;
	top: calc(var(--hb-masthead-h) + 24px);
}
.hb-faq-sidebar h2{
	font-size: var(--hb-h2);
	margin: 0 0 0.8em;
}
.hb-faq-categories{ display: flex; flex-direction: column; }
.hb-faq-categories a{
	display: flex;
	align-items: center;
	gap: 0.8em;
	padding: 0.9em 0;
	border-bottom: 1px solid var(--hb-lila-1);
	font-size: var(--hb-body-3);
	color: var(--hb-blanco);
	text-decoration: none;
}
.hb-faq-categories a:first-child{ border-top: 1px solid var(--hb-lila-1); }
.hb-faq-categories a:hover,
.hb-faq-categories a:focus-visible{ color: var(--hb-lila-2); }
.hb-faq-cat-icon{ display: flex; flex: none; color: var(--hb-lila-2); }

.hb-faq-main h1{ font-size: var(--hb-h1); margin: 0 0 0.6em; }
.hb-faq-intro{
	font-size: var(--hb-body-2);
	color: var(--hb-gris-azul);
	max-width: 640px;
	margin: 0 0 2.5em;
}

.hb-faq-section{ margin-bottom: 2.5em; scroll-margin-top: calc(var(--hb-masthead-h) + 20px); }
.hb-faq-section:last-child{ margin-bottom: 0; }
.hb-faq-section h2{ font-size: var(--hb-h2); margin: 0 0 0.4em; }
.hb-faq-accordion{ margin-top: 0.6em; }
.hb-faq-example-note{
	font-size: 12px;
	color: var(--hb-gris-azul);
	margin-top: 0.6em;
}

@media (max-width: 900px){
	/* Mobile del plan: H1 → párrafo → acordeón primero, "Categories"
	   apilado DEBAJO (no sidebar) — se invierte el orden visual con
	   "order" en vez de reordenar el HTML (el nav de saltos solo tiene
	   sentido una vez ya se ha visto el contenido en una página tan larga). */
	.hb-faq-layout{ grid-template-columns: 1fr; gap: 2.5em; }
	.hb-faq-main{ order: 1; }
	.hb-faq-sidebar{ order: 2; position: static; }
}

/* ==========================================================================
   Mi cuenta ("woocommerce/myaccount/*" — MASTER_SPEC.md, Fase 2, punto 2).
   Todos los templates de esta sección son NATIVOS de WooCommerce salvo
   "form-login.php" y "my-account.php" (los dos únicos overrides, ver
   comentarios ahí): el resto (pedidos, direcciones, editar cuenta, detalle
   de pedido) se reskinea aquí solo por CSS, sobre las clases estándar que ya
   pinta WooCommerce — ya salen en español real porque el sitio corre en
   locale "es_ES" (determine_locale(), comprobado), así que no hace falta
   duplicar/hardcodear ningún string de esos templates.

   OJO orden de carga (aplica a TODA esta sección, no solo al nav): en esta
   página en concreto, "storefront/assets/css/woocommerce/woocommerce.css"
   (el CSS del layout de 2 columnas por FLOAT de Storefront para "Mi
   cuenta") se encola DESPUÉS de "hairstore-v2/style.css" (comprobado en el
   <head> real: "hairstore-barcelona-style-css" sale antes que
   "storefront-woocommerce-style-css") — al revés que en el resto del sitio,
   donde el hijo siempre gana por ir último. Cualquier regla de aquí con la
   MISMA especificidad que su equivalente de Storefront pierde el empate
   pase lo que pase (ancho/float del nav y del contenido, tamaño de los
   `<h2>` nativos de WooCommerce dentro de ".woocommerce-MyAccount-content",
   grid de direcciones "col2-set.addresses"...). El arreglo, repetido a
   propósito en cada bloque de abajo: prefijar con ".hb-account-page" o
   ".hb-account-layout" (los wrappers propios de "form-login.php"/
   "my-account.php") para sumar una clase de especificidad de más y ganar
   siempre, sea cual sea el orden real de los <link>.
   ========================================================================== */
.hb-account-page{
	max-width: var(--hb-container-max);
	margin: 0 auto;
	padding: 2.5em var(--hb-inset) 5em;
}

/* El breadcrumb nativo de "storefront_before_content" (SIN tocar en esta
   sección — sigue siendo 100% Storefront, no hay override propio) sufre el
   mismo "defecto de flujo" del "#masthead" sticky ya documentado junto a
   "body.search .hb-shop-breadcrumb" más arriba: pinta ~39px ("--hb-topbar-h")
   más abajo de lo que reserva el flujo normal, invadiendo esos 39px del
   contenido de justo debajo.
   CORREGIDO (verificado con Playwright real, geometría + elementFromPoint +
   click, a 1440 Y 375): la asunción anterior de que a escritorio el propio
   "padding-top" nativo (~1em) de ".storefront-breadcrumb" absorbía el hueco
   porque el breadcrumb entra en una sola línea era FALSA — el solape pasa a
   CUALQUIER ancho y con cualquier longitud de ruta (medido en las 6
   subpáginas de Mi cuenta a 1440px: header.bottom=172.98px vs breadcrumb en
   y=156.6–177.6px, ~100% tapado bajo "#masthead", enlaces inaccesibles al
   clic real). El bug es sitewide para cualquier plantilla SIN hero que use
   este breadcrumb genérico (Mi cuenta, "/contactanos/",
   "/hairstore-tienda-de-pelucas-barcelona/", páginas estándar…), no solo
   Mi cuenta ni solo bajo los 900px donde el texto envuelve a 2 líneas.
   Se compensa aquí, SIN media query, empujando el bloque entero 39px hacia
   abajo con "margin-top" (no se toca el "padding" nativo del propio
   breadcrumb, así sigue idéntico si Storefront lo cambia) para cualquier
   ".storefront-breadcrumb" plano, sitewide. En shop/categoría (CON hero) el
   breadcrumb vive envuelto en ".hb-shop-breadcrumb" (ver más arriba), que ya
   anula este "margin" a 0 con más especificidad
   (".hb-shop-breadcrumb .storefront-breadcrumb", dos clases siempre gana,
   venga en el orden que venga el <link>) y compensa el mismo hueco a su
   manera vía "padding-top" en el wrapper (ver "body.search
   .hb-shop-breadcrumb" más arriba) — así que ahí no se duplica el hueco.
   OJO especificidad (verificado con curl: en Mi cuenta, "/contactanos/" Y
   "/hairstore-tienda-de-pelucas-barcelona/" por igual — no es solo cosa de
   Mi cuenta como decía el comentario de más arriba —
   "storefront-woocommerce-style-css" se encola DESPUÉS de este
   "hairstore-barcelona-style-css"): un simple ".storefront-breadcrumb" empata
   en especificidad con la regla nativa de Storefront
   (".storefront-breadcrumb{margin:0 0 1.618em}" en su "woocommerce.css") y,
   al ir esta última después en el <head>, gana el empate y anula el
   "margin-top" de aquí sin avisar (probado: el "margin-top" no llegaba a
   aplicarse en ninguna de las páginas). Se prefija con "body" (elemento +
   clase, un punto más de especificidad) para ganar siempre, sea cual sea el
   orden real de los <link>. */
body .storefront-breadcrumb{
	margin-top: var(--hb-topbar-h);
}
/* QA final (2026-07): el enlace "Inicio" de la miga de pan (WooCommerce
   "woocommerce_breadcrumb()", sitewide) mide 18px de alto real, por debajo
   del umbral de 40px de la auditoría. Es un "<a>" de toda la vida (display
   inline nativo), así que aquí NO hace falta el truco de margen negativo de
   otros arreglos de esta pasada: el padding vertical en un elemento inline
   agranda el área pulsable sin afectar la altura de la línea ni empujar
   nada alrededor. */
.woocommerce-breadcrumb a{ padding: 12px 0; }

/* --- Login + registro en 2 columnas (form-login.php override) --- */
.hb-account-auth{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--hb-gutter);
	max-width: 920px;
	margin: 0 auto;
}
.hb-account-auth--login-only{
	grid-template-columns: minmax(0, 460px);
	justify-content: center;
}
.hb-account-auth-col{
	border: 1px solid var(--hb-lila-1);
	padding: 2.4em;
	box-sizing: border-box;
}
.hb-account-auth-title{
	font-size: var(--hb-h2);
	color: var(--hb-nude);
	margin: 0 0 0.4em;
}
.hb-account-auth-subtitle{
	font-size: var(--hb-body-3);
	color: var(--hb-gris-azul);
	margin: 0 0 1.6em;
}
.hb-account-auth-note{
	font-size: var(--hb-body-3);
	color: var(--hb-gris-azul);
	margin: 0 0 1.1em;
}
.hb-account-auth .woocommerce-form-row,
.hb-account-auth .form-row{ margin: 0 0 1.1em; }
.hb-account-auth label{
	display: block;
	font-size: var(--hb-body-3);
	color: var(--hb-nude);
	margin-bottom: 0.4em;
}
.hb-account-auth label .required{ color: var(--hb-lila-2); text-decoration: none; }
.hb-account-auth input[type="text"],
.hb-account-auth input[type="email"],
.hb-account-auth input[type="password"]{
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--hb-lila-1);
	border-radius: 0;
	padding: 0.85em 1em;
	font-family: var(--hb-font);
	font-size: var(--hb-body-3);
	color: var(--hb-nude);
	background: var(--hb-negro);
}
.hb-account-auth input:focus{ outline: none; border-color: var(--hb-lila-2); }
.hb-account-remember{
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-size: var(--hb-body-3);
	color: var(--hb-nude);
	margin: 0;
	cursor: pointer;
}
.hb-account-auth .hb-btn-primary{ margin-top: 0.2em; }
.hb-account-auth .woocommerce-LostPassword{
	margin: 1.2em 0 0;
	font-size: var(--hb-body-3);
	text-align: center;
}
.hb-account-auth .woocommerce-LostPassword a{ color: var(--hb-gris-azul); text-decoration: underline; }
.hb-account-auth .woocommerce-LostPassword a:hover{ color: var(--hb-lila-2); }

@media (max-width: 780px){
	.hb-account-auth,
	.hb-account-auth--login-only{ grid-template-columns: 1fr; max-width: 460px; }
}

/* --- Dashboard: sidebar de navegación + contenido (my-account.php override) --- */
.hb-account-layout{
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	align-items: start;
	gap: calc(var(--hb-gutter) * 2);
}
.hb-account-content-title{
	font-size: var(--hb-h2);
	color: var(--hb-nude);
	margin: 0 0 1.2em;
}
/* Mismo problema de especificidad que el nav de abajo: Storefront trae
   ".woocommerce-MyAccount-content{width:76.47%;float:right;margin-right:0}"
   pensado para su layout de 2 columnas por FLOAT — dentro de la columna
   "1fr" del grid eso deja el contenido encogido a un 76% de su propia
   columna y flotado, en vez de ocupar la columna entera. Se pisa aquí,
   prefijado con ".hb-account-layout" por el mismo motivo de orden de carga
   (ver comentario grande más abajo, junto al nav). */
.hb-account-layout .woocommerce-MyAccount-content{
	width: auto;
	float: none;
	margin-right: 0;
}

/* Nav lateral — mismo nativo ".woocommerce-MyAccount-navigation" de
   WooCommerce, solo CSS. Estado activo SÓLIDO (fondo oscuro/texto claro,
   misma familia visual que ".hb-btn-primary") sobre la clase que ya pinta
   WooCommerce en el <li> actual, sin JS/PHP adicional.
   OJO especificidad: Storefront (assets/css/woocommerce/woocommerce.css)
   trae ".woocommerce-MyAccount-navigation{width:17.6%;float:left;margin-
   right:5.8%}" (pensado para su layout de 2 columnas por FLOAT) y
   ".woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-
   navigation-link a{padding:.875em 0}" — un "float"/"width:%" no tiene
   ningún efecto visual en un hijo de grid MIENTRAS "width" siga aplicando
   (el % se resuelve contra el ancho de la COLUMNA del grid, 240px, no
   contra todo ".hb-account-layout"), así que sin pisar "width/float/
   margin" el nav salía comprimido a ~17% de 240px (una columna de texto
   partido letra a letra). Ese selector de Storefront pesa (0,2,3); para
   ganarle sin depender del orden de carga se prefija todo con
   ".hb-account-layout" (el wrapper propio de "my-account.php"), que sube
   la especificidad por encima sea cual sea el orden real de los <link>. */
.hb-account-layout .woocommerce-MyAccount-navigation{
	position: sticky;
	top: calc(var(--hb-masthead-h) + 24px);
	width: auto;
	float: none;
	margin-right: 0;
}
.hb-account-layout .woocommerce-MyAccount-navigation ul{
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.hb-account-layout .woocommerce-MyAccount-navigation ul li{
	border-bottom: none;
}
.hb-account-layout .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a{
	display: block;
	padding: 0.9em 1.1em;
	font-size: var(--hb-body-3);
	color: var(--hb-nude);
	text-decoration: none;
	border: 1px solid var(--hb-lila-1);
}
/* Los modificadores de abajo (hover/is-active/logout) tocan las MISMAS
   propiedades que la regla base de arriba ("ul li.clase a", (0,3,3)) — sin
   repetir el mismo patrón "ul li" aquí, un modificador con menos elementos
   en el selector (p.ej. solo ".clase.is-active a") pierde el empate de
   especificidad aunque esté declarado después, y el color/borde base se
   queda puesto encima (bug real: fondo activo sólido pero texto invisible,
   mismo color que el fondo). Se repite "ul li" en cada uno para igualar o
   superar siempre a la regla base. */
.hb-account-layout .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link + li.woocommerce-MyAccount-navigation-link a{
	border-top: none;
}
.hb-account-layout .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a:hover,
.hb-account-layout .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a:focus-visible{
	background-color: var(--hb-bg-alt);
}
.hb-account-layout .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link.is-active a{
	background-color: var(--hb-nude);
	border-color: var(--hb-nude);
	color: var(--hb-negro);
}
.hb-account-layout .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link.is-active a:hover{
	background-color: var(--hb-nude);
	color: var(--hb-negro);
}
.hb-account-layout .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout{ margin-top: 0.6em; }
.hb-account-layout .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a{ border-top: 1px solid var(--hb-lila-1); }

@media (max-width: 900px){
	.hb-account-layout{ grid-template-columns: 1fr; gap: 1.6em; }
	.hb-account-layout .woocommerce-MyAccount-navigation{ position: static; }
}

/* --- Escritorio (dashboard.php) --- */
.hb-account-page .woocommerce-MyAccount-content > p{
	font-size: var(--hb-body-2);
	color: var(--hb-nude);
	line-height: 1.6;
}
/* Solo los enlaces en prosa (el párrafo de bienvenida de "dashboard.php":
   "pedidos recientes", "direcciones de envío y facturación"...) — un
   selector "a" a secas aquí también pillaba los botones-píldora reales
   ("Ver"/"Pagar" de la tabla de pedidos, paginación...), pisando su
   "color:var(--hb-negro)" (texto claro) con este "var(--hb-nude)" (texto
   oscuro) por empate de especificidad + ir después en el archivo — el botón
   se quedaba con el mismo color de texto que de fondo, invisible. */
.hb-account-page .woocommerce-MyAccount-content > p a{ color: var(--hb-nude); text-decoration: underline; }
.hb-account-page .woocommerce-MyAccount-content > p a:hover{ color: var(--hb-lila-2); }
/* Cualquier <h2> nativo sin clase propia dentro del contenido (p.ej. el
   título "Billing address"/"Shipping address" de "form-edit-address.php",
   que no lleva más clase que la del "<h2>" a secas) hereda si no
   ".woocommerce-MyAccount-content h2{font-size:2em;font-weight:600}" de
   Storefront — mismo arreglo de especificidad que el resto del bloque. */
.hb-account-layout .woocommerce-MyAccount-content h2{
	font-size: var(--hb-h2);
	font-weight: 600;
	color: var(--hb-nude);
	margin: 0 0 1em;
}

/* --- Pedidos (orders.php) --- */
.hb-account-page .woocommerce-orders-table{
	width: 100%;
	border-collapse: collapse;
	font-size: var(--hb-body-3);
}
.hb-account-page .woocommerce-orders-table__header{
	text-align: left;
	padding: 0.9em 0.6em;
	border-bottom: 1px solid var(--hb-nude);
	font-size: var(--hb-footer);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hb-gris-azul);
	font-weight: 400;
}
.hb-account-page .woocommerce-orders-table__cell{
	padding: 1.1em 0.6em;
	border-bottom: 1px solid var(--hb-lila-1);
	color: var(--hb-nude);
	vertical-align: middle;
}
.hb-account-page .woocommerce-orders-table__cell-order-actions{ text-align: right; white-space: nowrap; }
.hb-account-page .woocommerce-orders-table__cell-order-actions a.button{
	font-size: var(--hb-footer);
	padding: 0.6em 1.1em;
	margin-left: 0.4em;
}
.hb-account-page .woocommerce-orders-table__cell-order-actions a.button:first-child{ margin-left: 0; }
.hb-account-page .woocommerce-Pagination{ margin-top: 1.5em; display: flex; gap: 1em; justify-content: center; }

/* --- Direcciones (my-address.php) --- */
/* Storefront trae ".col2-set.addresses{width:100%;float:left;...}" con la
   MISMA especificidad (2 clases) que ".woocommerce-Addresses.col2-set" de
   aquí — sin el prefijo ".hb-account-page" perdería el empate por orden de
   carga y el "float:left" competiría con el "display:grid" de abajo. */
.hb-account-page .woocommerce-Addresses.col2-set{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--hb-gutter);
	list-style: none;
	margin: 1.5em 0 0;
	padding: 0;
	width: auto;
	float: none;
}
/* Cada dirección lleva TAMBIÉN clase nativa "col-1"/"col-2" (ver
   "my-address.php": "u-column<N> col-<N> woocommerce-Address") del viejo
   sistema de 2 columnas por FLOAT de Storefront —
   ".col2-set.addresses .col-1/.col-2{width:47%;float:left/right;...}" pesa
   3 clases, empate con cualquier prefijo de una clase más aquí, y gana el
   empate por cargarse después. Con solo 2 tarjetas (facturación/envío) el
   "!important" puntual es más simple y fiable que seguir sumando clases al
   selector para superar ese empate. */
.hb-account-page .woocommerce-Address{
	border: 1px solid var(--hb-lila-1);
	padding: 1.6em;
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}
.hb-account-page .woocommerce-Address-title{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	margin: 0 0 0.9em;
}
.hb-account-page .woocommerce-Address-title h2{
	font-size: var(--hb-h3);
	font-weight: 600;
	color: var(--hb-nude);
	margin: 0;
}
/* Storefront (base/icons.css) trae ".addresses header.title a{display:
   block;width:1em;height:1em;text-indent:-9999px;...}" + un icono de lápiz
   por Font Awesome en "::before" — oculta el texto real ("Editar Dirección
   de facturación") dejando solo un icono de ~19px, un objetivo de toque
   pequeño y sin etiqueta para un público senior/oncológico donde la
   claridad importa más que el minimalismo. Se muestra el texto real en vez
   del icono (mismas propiedades que compiten, revertidas explícitamente). */
.hb-account-page .woocommerce-Address-title a.edit{
	display: inline-block;
	width: auto;
	height: auto;
	position: static;
	padding: 0;
	margin-top: 0;
	text-indent: 0;
	font-size: var(--hb-footer);
	color: var(--hb-gris-azul);
	text-decoration: underline;
	white-space: nowrap;
}
.hb-account-page .woocommerce-Address-title a.edit::before{ content: none; }
.hb-account-page .woocommerce-Address-title a.edit:hover{ color: var(--hb-lila-2); }
.hb-account-page .woocommerce-Address address{
	font-style: normal;
	font-size: var(--hb-body-3);
	color: var(--hb-nude);
	line-height: 1.6;
}

@media (max-width: 900px){
	.hb-account-page .woocommerce-Addresses.col2-set{ grid-template-columns: 1fr; }
	/* Tarjeta angosta (1 columna) + título largo ("Dirección de
	   facturación") que ya envuelve a 2-3 líneas: título y enlace "Editar"
	   en la misma fila (como en desktop) quedan descentrados verticalmente.
	   Se apilan en vez de forzarlos a la misma línea. */
	.hb-account-page .woocommerce-Address-title{ flex-direction: column; align-items: flex-start; gap: 0.3em; }
}

/* --- Editar dirección / Detalles de la cuenta (form-edit-address.php,
   form-edit-account.php): mismos inputs de borde plano que el resto del
   sitio (formulario de regalo del carrito, filtros...), no una variante
   nueva. --- */
.hb-account-page .woocommerce-address-fields__field-wrapper,
.hb-account-page .woocommerce-EditAccountForm{
	max-width: 520px;
}
/* Prefijo "body.woocommerce-account" (no ".hb-account-page") a propósito en
   este bloque genérico de formulario: "form-lost-password.php" y
   "form-reset-password.php" son templates NATIVOS que no pasan por ninguno
   de los dos overrides propios ("form-login.php"/"my-account.php", los
   únicos con wrapper ".hb-account-page") — sin este alcance más amplio, "¿Has
   olvidado la contraseña?" se quedaba con el input gris por defecto de
   WooCommerce en vez del mismo borde plano que el resto de "Mi cuenta". El
   body class "woocommerce-account" sí está presente en TODAS las vistas de
   esta sección (comprobado en el HTML real de "/mi-cuenta/lost-password/"). */
body.woocommerce-account .form-row label{
	display: block;
	font-size: var(--hb-body-3);
	color: var(--hb-nude);
	margin-bottom: 0.4em;
}
body.woocommerce-account .form-row label .required{ color: var(--hb-lila-2); text-decoration: none; }
body.woocommerce-account .form-row input.input-text,
body.woocommerce-account .form-row select,
body.woocommerce-account .form-row textarea{
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--hb-lila-1);
	border-radius: 0;
	padding: 0.85em 1em;
	font-family: var(--hb-font);
	font-size: var(--hb-body-3);
	color: var(--hb-nude);
	background: var(--hb-negro);
}
body.woocommerce-account .form-row input.input-text:focus,
body.woocommerce-account .form-row select:focus,
body.woocommerce-account .form-row textarea:focus{ outline: none; border-color: var(--hb-lila-2); }
body.woocommerce-account .form-row{ margin: 0 0 1.1em; }
body.woocommerce-account .select2-container .select2-selection--single{
	height: auto;
	border: 1px solid var(--hb-lila-1);
	border-radius: 0;
	padding: 0.5em 0.2em;
}
.hb-account-page .woocommerce-EditAccountForm fieldset{
	background: none;
	border: none;
	padding: 1.2em 0 0;
	margin: 1.2em 0 0;
	border-top: 1px solid var(--hb-lila-1);
}
.hb-account-page .woocommerce-EditAccountForm fieldset legend{
	background: none;
	font-size: var(--hb-h3);
	color: var(--hb-nude);
	padding: 0 0 1em;
}
body.woocommerce-account button.woocommerce-Button,
body.woocommerce-account button[name="save_address"]{
	background-color: var(--hb-nude);
	color: var(--hb-negro);
	border: none;
	border-radius: 0;
	padding: 0.95em 2em;
	font-size: var(--hb-body-1);
	cursor: pointer;
}
body.woocommerce-account button.woocommerce-Button:hover,
body.woocommerce-account button[name="save_address"]:hover{ background-color: var(--hb-lila-2); }

/* --- Detalle de pedido (view-order.php / order-details.php) --- */
.hb-account-page .woocommerce-order-details__title,
.hb-account-page .woocommerce-column__title{
	font-size: var(--hb-h3);
	font-weight: 600;
	color: var(--hb-nude);
	margin: 1.8em 0 0.9em;
}
.hb-account-page .woocommerce-order-details__title:first-child,
.hb-account-page .woocommerce-column__title:first-child{ margin-top: 0; }
.hb-account-page .woocommerce-table--order-details{
	width: 100%;
	border-collapse: collapse;
	font-size: var(--hb-body-3);
	margin-bottom: 1.5em;
}
.hb-account-page .woocommerce-table--order-details th,
.hb-account-page .woocommerce-table--order-details td{
	padding: 0.9em 0.6em;
	border-bottom: 1px solid var(--hb-lila-1);
	color: var(--hb-nude);
	text-align: left;
}
.hb-account-page .woocommerce-table--order-details thead th{
	font-size: var(--hb-footer);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hb-gris-azul);
	border-bottom: 1px solid var(--hb-nude);
}
.hb-account-page .woocommerce-table--order-details tfoot th{ font-weight: 400; }
.hb-account-page .woocommerce-table--order-details tfoot tr:last-child th,
.hb-account-page .woocommerce-table--order-details tfoot tr:last-child td{ border-bottom: none; }
.hb-account-page .woocommerce-customer-details{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--hb-gutter);
	margin-top: 1.5em;
}
.hb-account-page .woocommerce-customer-details address{
	font-style: normal;
	font-size: var(--hb-body-3);
	color: var(--hb-nude);
	line-height: 1.6;
	border: 1px solid var(--hb-lila-1);
	padding: 1.4em;
}
.hb-account-page .woocommerce-customer-details p:first-child{ margin-top: 0; }

@media (max-width: 900px){
	.hb-account-page .woocommerce-customer-details{ grid-template-columns: 1fr; }
	.hb-account-page .woocommerce-orders-table,
	.hb-account-page .woocommerce-orders-table thead,
	.hb-account-page .woocommerce-orders-table tbody,
	.hb-account-page .woocommerce-orders-table tr{ display: block; width: 100%; }
	.hb-account-page .woocommerce-orders-table thead{ display: none; }
	.hb-account-page .woocommerce-orders-table__row{
		display: block;
		border: 1px solid var(--hb-lila-1);
		padding: 1em;
		margin-bottom: 1em;
	}
	.hb-account-page .woocommerce-orders-table__cell{
		display: flex;
		justify-content: space-between;
		gap: 1em;
		padding: 0.5em 0;
		border-bottom: none;
	}
	.hb-account-page .woocommerce-orders-table__cell::before{
		content: attr(data-title);
		font-size: var(--hb-footer);
		text-transform: uppercase;
		color: var(--hb-gris-azul);
		flex: none;
	}
	.hb-account-page .woocommerce-orders-table__cell-order-actions{ justify-content: flex-start; flex-wrap: wrap; }
}

/* ==========================================================================
   Página de favoritos (ver MASTER_SPEC.md, Fase 2 punto 3 — page-favoritos.php
   / hb_favorites_products_ajax en functions.php). El grid en sí no necesita
   CSS propio: reutiliza ".hb-grid" tal cual. Solo hace falta el estado vacío
   y el aviso de "Cargando…".

   El breadcrumb ("Inicio / Favoritos") es lo primero dentro de "#main" —
   igual que en FAQ — pero aquí SÍ hacía falta compensar a mano el mismo bug
   de "#masthead" ya documentado junto a ".hb-blog #main"/".hb-blog-single
   #main" más arriba: pinta ~39px ("--hb-topbar-h") más abajo de lo que le
   toca por flujo normal. En FAQ ese hueco queda absorbido sin querer por la
   miga de pan nativa de Storefront (que ahí NO se quita, a diferencia de
   Favoritos — ver "remove_action('storefront_before_content',
   'woocommerce_breadcrumb', ...)" en functions.php); aquí sí se quita, así
   que sin este extra el breadcrumb quedaba tapado bajo el header sticky
   (medido con Playwright: breadcrumb a y=157.98 con solo "1.5em" de
   padding-top, header terminando en y=172.98 en desktop 1440 — seguía
   tapado). Mismo valor "calc(1.5em + 40px)" que Blog/Post, no uno nuevo.
   ========================================================================== */
.hb-favorites-page #main{ padding: calc(1.5em + 40px) 0 3em; }
.hb-favorites-page h1{ margin-bottom: 0.6em; }
.hb-favorites-status{ color: var(--hb-nude); opacity: 0.8; }
/* ":not([hidden])", mismo motivo que ".hb-cat-heading-meta" más arriba: sin
   esto, el "[hidden]" del user-agent pierde contra esta regla de autor (misma
   especificidad) y el estado vacío se vería siempre, aunque el JS aún no
   hubiera decidido mostrarlo (o el grid ya tuviera favoritos). */
.hb-favorites-empty:not([hidden]){
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.2em;
	max-width: 420px;
	margin: 2.5em auto;
	text-align: center;
	color: var(--hb-nude);
}
.hb-favorites-empty svg{ color: var(--hb-nude); opacity: 0.6; }
.hb-favorites-empty p{ margin: 0; line-height: 1.6; }
.hb-favorites-empty .hb-btn-primary{ max-width: 260px; }
/* "#hb-favorites-grid" comparte clase ".hb-grid" (display:grid, mismo motivo
   de especificidad que el comentario de ".hb-favorites-empty" de arriba) — un
   ID gana sin ambigüedad frente a esa clase, así que este SÍ queda oculto de
   verdad mientras el JS no tenga contenido que mostrar (aunque, al no llevar
   hijos, en la práctica ya colapsaba a 0px de alto). */
#hb-favorites-grid[hidden]{ display: none; }

/* ==========================================================================
   Checkout (Fase 2, punto 1 de MASTER_SPEC.md) — reskin del checkout NATIVO.
   OJO: pese a que el MASTER_SPEC lo describe como "el checkout por defecto de
   Storefront", la página real (ID 8, "wp_posts.post_content" = solo
   "<!-- wp:woocommerce/checkout -->") usa el CHECKOUT BLOCK de WooCommerce
   (React, ".wc-block-checkout"), NO la plantilla clásica
   "woocommerce/checkout/form-checkout.php" — comprobado con
   "wp post get 8 --field=post_content". Por eso este reskin es 100% CSS
   sobre las clases ".wc-block-*" que renderiza el bloque: un override de
   "woocommerce/checkout/*.php" en el tema no tendría ningún efecto ahí (esos
   templates solo entran en juego si el checkout fuese el shortcode/atajo
   clásico), así que no se crean. La maquetación en 2 columnas (datos a la
   izquierda / resumen a la derecha) ya la trae el propio bloque
   (".wc-block-components-sidebar-layout", "is-large" en desktop) — no hace
   falta reconstruirla, solo llevarla a los tokens del sitio (bordes,
   tipografía, botón).
   El botón "Realizar el pedido" no lleva la clase ".hb-btn-primary" literal
   (lo pinta React vía props internas del bloque, no hay hook PHP que la
   inserte, y añadirla por JS se perdería en cuanto el bloque se
   re-renderizara al recalcular totales) — se iguala visualmente por CSS a
   esa misma clase, con los mismos tokens exactos, en vez de inventar un
   estilo de botón nuevo.
   ========================================================================== */

/* Contenedor v4 (2026-07-19): Storefront pinta esta página A SANGRE (el
   ".site-main" del checkout no tiene caja: formulario pegado al borde
   izquierdo, resumen al derecho, H1 centrado suelto). Misma caja que
   ".hb-cart-page": 1280 + 32 de padding lateral fijo (NUNCA --hb-inset, ver
   el comentario de ".hb-cart-page" sobre por qué). Scoped a
   "body.woocommerce-checkout" para no tocar el ".site-main" de otras
   páginas. */
body.woocommerce-checkout .site-main{
	max-width: var(--hb-container-max);
	margin: 0 auto;
	box-sizing: border-box;
	padding: 40px var(--hb-container-pad) 96px;
}

/* H1 "Finalizar compra" v4: izquierda, clamp 36-48/500 tracking apretado
   (mismos valores que ".hb-cart-title" del carrito) en vez del 56px centrado
   que hereda del H1 genérico del sitio. */
body.woocommerce-checkout .entry-header h1.entry-title{
	text-align: left;
	margin: 0 0 40px;
	font-size: clamp(36px, 4vw, 48px);
	line-height: 1.05;
	font-weight: 500;
	letter-spacing: -0.025em;
	color: #0a0a0a;
}

/* El bloque llega con la clase ".alignwide" y Storefront
   ("storefront-align-wide" en el body) le mete márgenes laterales NEGATIVOS
   para desbordar la columna de contenido — aquí eso lo sacaba del contenedor
   de 1280 y desalineaba el formulario con el H1 (a 1440: form en x=79, H1 en
   x=112). Se neutraliza para que respete la caja. El margin-top a 0 quita
   también el hueco extra (~80px) que el bloque añadía bajo el H1. El
   padding lateral a 0: el propio bloque trae "padding: 0 1.41575em"
   (~22.6px) que volvía a desalinear el contenido con el H1 aunque los
   márgenes ya estuvieran a 0. */
body.woocommerce-checkout .entry-content > .wp-block-woocommerce-checkout.alignwide{
	margin: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: auto !important;
	max-width: none !important;
}

/* Dos columnas v4 dentro del contenedor: formulario ~58% / resumen 38%, gap
   48px (mismo hueco que ".hb-cart-layout"; el gap se hace con el
   padding-right del main porque el layout del bloque es flex, no grid).
   "!important": el CSS del bloque ("wc-blocks-style") fija width/padding en
   estos mismos elementos y carga DESPUÉS del tema (ver comentario de los
   inputs más abajo). El propio bloque quita "is-large" y apila las columnas
   cuando su contenedor baja de ~700px — con la caja de 1280 eso ocurre ya en
   viewports intermedios; el media query de 900 de abajo solo remata el
   apilado limpio en móvil. */
.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout.is-large .wc-block-components-main{
	width: 62% !important;
	padding-right: 48px !important;
	padding-left: 0 !important;
	box-sizing: border-box;
}
.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout.is-large .wc-block-components-sidebar{
	width: 38% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Título de cada paso ("Información de contacto", "Dirección de envío",
   "Opciones de pago"...) al tipo de título de caja v4 (20/500 tracking
   -0.01em, mismos valores que ".hb-cart-summary-title") en vez del 23px/700
   por defecto del bloque. */
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title{
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: #0a0a0a;
}

/* Inputs/selects/textarea con el borde plano de todo el sitio
   ("--hb-lila-1", #DDDDDD — mismo valor que ".hb-account-auth input" y
   ".hb-cart-gift-message") en vez del borde por defecto del bloque (gris
   oscuro translúcido, radio 4px). "!important" necesario: el CSS propio del
   bloque WooCommerce fija "border"/"border-radius" en el MISMO elemento con
   una sola clase pero se sirve DESPUÉS que este archivo (handle
   "wc-blocks-style", encolado por el propio plugin tras el tema), así que
   empataría/ganaría por orden sin él. */
.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-blocks-components-select__select,
.wp-block-woocommerce-checkout textarea{
	border: 1px solid #e5e5e5 !important;
	border-radius: 12px !important;
	box-shadow: none !important;
	font-family: var(--hb-font);
}
.wp-block-woocommerce-checkout .wc-block-components-text-input input:focus,
.wp-block-woocommerce-checkout .wc-blocks-components-select__select:focus,
.wp-block-woocommerce-checkout textarea:focus{
	border-color: #0a0a0a !important;
	box-shadow: none !important;
	outline: none !important;
}

/* Tarjeta de "dirección guardada" que el bloque pinta cuando colapsa el
   formulario de dirección: misma caja v4 que el resto (borde #e5e5e5 radio
   12) en vez de su borde negro translúcido con radio 4. */
.wp-block-woocommerce-checkout .wc-block-components-address-card{
	border: 1px solid #e5e5e5 !important;
	border-radius: 12px !important;
}

/* Cajas de "Opciones de envío" y "Opciones de pago": el bloque dibuja sus
   bordes con "box-shadow" (no con "border" real, para no mover el layout al
   resaltar la opción marcada). v4: borde #e5e5e5 con radio 12 en reposo y
   NEGRO #0a0a0a (no el terracota --hb-lila-2, que aquí leía como un naranja
   de error, ni el 1.5px por defecto del bloque) cuando la opción está
   marcada — mismo criterio que el focus de los inputs de arriba. */
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option{
	border-radius: 12px !important;
	box-shadow: 0 0 0 1px #e5e5e5 !important;
}
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted{
	box-shadow: 0 0 0 1px #0a0a0a !important;
}
/* Variante NO acordeón (las tarifas de "Opciones de envío"): el borde va en
   cada option (inset). */
.wp-block-woocommerce-checkout .wc-block-components-radio-control__option{
	border-radius: 12px !important;
}
.wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option{
	box-shadow: inset 0 0 0 1px #e5e5e5;
}
.wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option--checked-option-highlighted{
	box-shadow: inset 0 0 0 1px #0a0a0a !important;
}

/* Resumen del pedido (columna derecha): mismo lenguaje visual que
   ".hb-cart-summary" del carrito — caja con borde plano y padding, en vez de
   flotar sin caja. Se aplica sobre el bloque "totales" completo (título +
   contenido) para que la caja envuelva también la cabecera "Resumen del
   pedido 537,50€" cuando se colapsa en el acordeón de móvil. */
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block{
	border: 1px solid #e5e5e5;
	border-radius: 16px;
	padding: 24px;
	box-sizing: border-box;
}
.wp-block-woocommerce-checkout .wc-block-components-order-summary{
	border-radius: 0 !important;
	box-shadow: none !important;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title-text{
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: #0a0a0a;
}
/* Filas de totales con los tipos del resumen del carrito
   (".hb-cart-summary-row"): 15px, etiqueta en gris de metadatos #737373,
   valor 500; y los divisores entre secciones (cupones / subtotales / total),
   que el bloque pinta en negro translúcido, al #e5e5e5 del sitio. */
.wp-block-woocommerce-checkout .wc-block-components-totals-wrapper{
	border-top-color: #e5e5e5 !important;
}
.wp-block-woocommerce-checkout .wc-block-components-totals-item{
	font-size: 15px;
	color: #0a0a0a;
}
.wp-block-woocommerce-checkout .wc-block-components-totals-item__label{
	color: #737373;
	font-weight: 400;
}
.wp-block-woocommerce-checkout .wc-block-components-totals-item__value{
	font-weight: 500;
}
/* Fila de "Total" con línea divisoria encima, 16/600 en negro por los dos
   lados — mismo criterio que ".hb-cart-summary-row--total" del carrito. */
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item{
	border-top: 1px solid #e5e5e5;
	padding-top: 14px;
	margin-top: 0.5em;
}
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
	font-size: 16px;
	font-weight: 600;
	color: #0a0a0a;
}

/* Botón "Añadir cupones" (acordeón nativo del bloque): mismo gris de
   metadatos que el resto del sitio en vez del negro puro por defecto. */
.wp-block-woocommerce-checkout .wc-block-components-panel__button{
	color: #737373;
}
.wp-block-woocommerce-checkout .wc-block-components-panel__button:hover{ color: #0a0a0a; }

/* Separador de "Términos y condiciones" bajo el formulario: su borde negro
   translúcido por defecto → divisor #e5e5e5, texto en gris de metadatos. */
.wp-block-woocommerce-checkout .wc-block-checkout__terms{
	border-color: #e5e5e5 !important;
	font-size: 14px;
	color: #737373;
}

/* CTA "Realizar el pedido": píldora negra v4, mismos tokens EXACTOS que el
   CTA de checkout del carrito (".woocommerce-cart .hb-cart-checkout
   a.checkout-button" más arriba: 48px de alto, radio 999, 15/500, hover
   #262626). Ocupa el ancho de su columna (el bloque ya lo pinta
   full-width). Sin "::after" con flecha: React re-renderiza el contenido del
   botón (spinner al procesar) y la flecha decorativa conviviría mal con ese
   estado. */
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	height: 48px;
	padding: 0 32px !important;
	background-color: #0a0a0a !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	font-family: var(--hb-font);
	font-size: 15px !important;
	font-weight: 500;
	letter-spacing: 0.01em;
	box-shadow: none !important;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover{
	background-color: #262626 !important;
	color: #fff !important;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:focus-visible{
	outline: 2px solid #0a0a0a;
	outline-offset: 3px;
}

/* Apilado móvil/tablet: por debajo de 900 las dos columnas pasan a 100%
   (el propio bloque ya apila por su cuenta cuando pierde "is-large" en
   contenedores estrechos; esto garantiza el corte exactamente en 900 y
   quita el gap lateral del main). */
@media (max-width: 900px){
	.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-main,
	.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-sidebar{
		width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	body.woocommerce-checkout .site-main{ padding-top: 24px; }
	.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block{ padding: 16px; }
}

/* Fila de marcas ESTÁTICA (sustituye al marquee animado de la v1 en la home):
   los logos en fila centrada que envuelve — el marquee con transform dejaba
   la franja aparentemente vacía en pantallas anchas (la pista se desplazaba
   fuera de vista) y CEIN no usa marquesinas. El shortcode/CSS del ticker
   antiguo sigue existiendo para otras páginas. */
.hb-brands-section .hb-container{ padding-top: 2em; padding-bottom: 2em; }
.hb-brands-row{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 28px 40px;
}
.hb-brands-row .hb-brand-logo img{
	height: 26px;
	width: auto;
	display: block;
	opacity: 0.75;
	transition: opacity .2s ease;
}
.hb-brands-row .hb-brand-logo:hover img{ opacity: 1; }

/* ==========================================================================
   Home v3 (MASTER_SPEC "AFINADO DEFINITIVO" — estructura Krist adaptada)
   ========================================================================== */

/* Carrusel "Compra por categoría": cabecera dentro de ".hb-container" (título
   + flechas alineadas arriba-derecha, como en Krist), fila fuera del
   container porque ".hb-scroll-row" ya gestiona su propio margen con
   ".hb-scroll-spacer" (ver comentario junto a esa clase, más arriba) — igual
   que hace ".hb-categorias-bg" con su propia fila. */
.hb-categories-carousel-bg{ background-color: var(--hb-negro); }
/* Misma técnica de especificidad que ".hb-categorias-bg.hb-full-bleed >
   .hb-container{padding-bottom:0}" (más arriba en este fichero): sin subir a
   3 clases, la regla genérica ".hb-full-bleed > .hb-container" (2 clases)
   gana el empate y el padding-bottom de 3em se queda aunque la fila de abajo
   YA aporta su propio espacio (".hb-scroll-row" trae padding-top/bottom
   propios). */
.hb-categories-carousel-bg.hb-full-bleed > .hb-container{ padding-bottom: 0; }
.hb-carousel-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0;
}
.hb-carousel-head h2{ margin: 0; }
.hb-carousel-arrows{ display: flex; gap: 10px; flex: none; }
.hb-carousel-arrow{
	box-sizing: border-box;
	width: 38px;
	height: 38px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--hb-lila-1);
	background: var(--hb-negro);
	color: var(--hb-nude);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.hb-carousel-arrow:hover{ background-color: var(--hb-nude); color: var(--hb-negro); border-color: var(--hb-nude); }
.hb-carousel-arrow:focus{ outline: none; }
.hb-carousel-arrow:focus-visible{ outline: 2px solid var(--hb-lila-2); outline-offset: 3px; }
/* Botón sin más cards que enseñar en esa dirección (JS calcula scrollLeft vs.
   el máximo desplazable): mismo lenguaje que el resto del sitio para "acción
   no disponible ahora mismo" (opacidad reducida), nunca oculto del todo —
   así sigue anunciándose a un lector de pantalla. */
.hb-carousel-arrow[disabled]{ opacity: 0.35; cursor: default; }
.hb-carousel-arrow[disabled]:hover{ background: var(--hb-negro); color: var(--hb-nude); border-color: var(--hb-lila-1); }

/* Parrilla "Nuestros favoritos" con pestañas (Krist "Our Bestseller" +
   pestañas de la referencia secundaria Nayzak) — pestañas de texto plano,
   activa en negrita + subrayada (mismo patrón que la captura de Nayzak),
   nunca una píldora de color: no compite con el acento terracota reservado a
   precios/hover. Reutiliza ".hb-tabs"/".hb-tabs-nav" (mismo JS genérico que
   ya usa Mantenimiento, ver hb-tabs.js) — este bloque solo AÑADE estilo
   visual propio, con el mismo scope ".hb-bestseller-tabs" para no tocar el
   aspecto de esas otras pestañas. */
.hb-bestseller-tabs .hb-tabs-nav{
	display: flex;
	justify-content: center;
	gap: 2.5em;
	margin-bottom: 1.5em;
}
.hb-bestseller-tabs .hb-tabs-nav button{
	background: none;
	border: none;
	padding: 0.3em 0;
	font-family: var(--hb-font);
	font-size: var(--hb-h2);
	color: var(--hb-gris-azul);
	cursor: pointer;
}
.hb-bestseller-tabs .hb-tabs-nav button:hover{ color: var(--hb-nude); }
.hb-bestseller-tabs .hb-tabs-nav button.is-active{
	color: var(--hb-nude);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 5px;
}
.hb-bestseller-tabs .hb-tabs-nav button:focus{ outline: none; }
.hb-bestseller-tabs .hb-tabs-nav button:focus-visible{ outline: 2px solid var(--hb-lila-2); outline-offset: 3px; }
.hb-tab-loadmore-wrap{ display: flex; justify-content: center; margin-top: 2em; }
.hb-tab-loadmore{ min-width: 200px; }
/* Estado de carga (JS añade/quita esta clase mientras espera la respuesta del
   AJAX de "Cargar más"): mismo criterio que el resto del sitio para no dejar
   un botón "muerto" sin ninguna pista de que está trabajando. */
.hb-tab-loadmore.is-loading{ opacity: 0.6; pointer-events: none; }

/* Franja de confianza (4 ítems veraces, MASTER_SPEC fila 9) */
.hb-trust-strip-section{ background-color: var(--hb-bg-alt); }
.hb-trust-strip{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5em;
}
.hb-trust-item{
	display: flex;
	align-items: flex-start;
	gap: 0.9em;
	color: var(--hb-nude);
	text-decoration: none !important;
}
.hb-trust-icon{ flex: none; color: var(--hb-lila-2); margin-top: 0.1em; }
.hb-trust-text{ display: flex; flex-direction: column; gap: 0.15em; }
.hb-trust-text strong{ font-size: var(--hb-body-1); font-weight: 600; }
.hb-trust-text span{ font-size: var(--hb-body-3); color: var(--hb-gris-azul); }
a.hb-trust-item:hover strong{ color: var(--hb-lila-2); }

@media (max-width: 900px){
	.hb-trust-strip{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px){
	.hb-bestseller-tabs .hb-tabs-nav{ gap: 1.2em; }
	.hb-bestseller-tabs .hb-tabs-nav button{ font-size: var(--hb-h3); }
}
@media (max-width: 640px){
	.hb-trust-strip{ grid-template-columns: 1fr; gap: 1.2em; }
	.hb-carousel-head{ padding-top: 1.5em; }
}

/* ==========================================================================
   SKIN YNS v4 (2026-07-18) — valores EXACTOOS del código fuente de Your Next
   Store (scratchpad/yns): paleta neutral, botones píldora h-48 (h-12 px-8
   rounded-full), fotos de tarjeta aspect-square sobre #f5f5f5 rounded-2xl,
   nombre 16px medium + precio 16px semibold, secciones py-16/24 con títulos
   text-3xl. Este bloque va AL FINAL a propósito: re-viste los componentes
   existentes por cascada sin tocar su estructura/JS. Los tokens base ya se
   cambiaron en :root (arriba). Ver MASTER_SPEC "Dirección v4".
   ========================================================================== */

/* Header fijo (sticky) en TODAS las páginas: Storefront pone
   "overflow-x:hidden" en body/.site, lo que convierte esos ancestros en
   contenedores de scroll y MATA el position:sticky del header (funcionaba
   solo en la home, que no pasa por el template de Storefront). "clip"
   recorta los desbordes horizontales exactamente igual, pero sin crear
   contenedor de scroll — el sticky sobrevive. */
body,
#page,
.site{
	overflow-x: clip !important;
	overflow-y: visible !important;
}

/* --- Botones píldora YNS: primario negro sólido, secundario borde --- */
.button,
button.button,
.single_add_to_cart_button,
.hb-btn-compact,
.hb-btn-primary,
.hb-hero-btn{
	border-radius: 999px;
	background: var(--hb-primary);
	color: #fafafa;
	border: none;
	min-height: 48px;
	padding: 0.6em 1.75em;
	font-size: var(--hb-body-1);
	font-weight: 500;
	line-height: 1.2;
}
.button:hover,
.single_add_to_cart_button:hover,
.hb-btn-compact:hover,
.hb-btn-primary:hover,
.hb-hero-btn:hover{
	background: #2b2b2b;
	color: #fafafa;
}
.button.hb-secondary,
button.hb-secondary{
	background: none;
	color: var(--hb-blanco);
	border: 1px solid var(--hb-lila-1);
}
.button.hb-secondary:hover,
button.hb-secondary:hover{ background: var(--hb-bg-alt); color: var(--hb-blanco); }

/* --- Tarjeta de producto/categoría YNS: sin caja — foto cuadrada sobre gris
   claro con radio 16, texto plano debajo (nombre medium, precio semibold) --- */
.hb-card{
	background: none;
	border: none;
	box-shadow: none;
	border-radius: 0;
	overflow: visible;
}
.hb-card .hb-card-photo{
	aspect-ratio: 1 / 1;
	background: var(--hb-bg-alt);
	border-radius: var(--hb-radius-lg);
	overflow: hidden;
	margin-bottom: 16px;
	position: relative;
}
.hb-card .hb-card-photo img{ width: 100%; height: 100%; object-fit: cover; }
.hb-card .hb-card-caption{
	background: none;
	padding: 0;
	gap: 4px;
}
.hb-card .hb-card-caption h3{
	font-size: var(--hb-h5);
	font-weight: 500;
	color: var(--hb-blanco);
	line-height: 1.4;
}
.hb-card .hb-card-caption p{ font-size: var(--hb-body-3); color: var(--hb-gris-azul); }
.hb-bestseller-price{ font-size: var(--hb-h5); font-weight: 600; color: var(--hb-blanco); }
/* La flecha "→" de la caption CEIN no existe en YNS. */
.hb-card .hb-card-arrow{ display: none; }
/* Hover: YNS no levanta ni borda la tarjeta — solo la foto insinúa (nosotros
   mantenemos un leve oscurecido para feedback). */
.hb-card:hover{ border-color: transparent; box-shadow: none; transform: none; }
.hb-card:hover .hb-card-photo img{ opacity: 0.92; }

/* --- Grids de producto: gap 32 (gap-8 YNS) --- */
.hb-grid{ gap: var(--hb-gutter); }

/* --- Títulos de sección YNS: text-3xl medium, subtítulo muted debajo --- */
.hb-section-title,
.hb-carousel-head h2,
.hb-product-related h2,
.hb-bestseller-tabs .hb-tabs-nav button{
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* --- Hero (home y categorías): velo más suave y titular grande YNS --- */
.hb-hero-text h1{ font-weight: 500; letter-spacing: -0.02em; }

/* Candado (verificador visual): el logo "HAIRSTORE" del footer global lleva
   un tamaño fijo (~39px) con nowrap — en 375px arrancaba cortado por la
   izquierda y tapaba la columna "Productos" en todas las páginas menos la
   home. Se hace fluido y se le quita cualquier compensación de margen. */
@media (max-width: 560px){
	.hb-footer-logo{ margin: 0 0 0.5em; }
	.hb-footer-logo-main{ font-size: clamp(20px, 7vw, 30px) !important; letter-spacing: 0.14em; white-space: normal; }
	.hb-footer-logo-sub{ letter-spacing: 0.3em; }
}

/* --- Footer YNS: blanco con borde superior, enlaces 14px gris --- */
.hb-footer-main,
.hb-footer-bottom{ background: #FFFFFF; }
.site-footer{ background: #FFFFFF; border-top: 1px solid var(--hb-lila-1); }
.hb-footer-menu a,
.hb-footer-legal a{ font-size: var(--hb-body-3); color: var(--hb-gris-azul); }
.hb-footer-menu a:hover,
.hb-footer-legal a:hover{ color: var(--hb-blanco); }

/* --- Inputs YNS: píldora con borde suave --- */
.hb-search-form input[type="search"],
.hb-account-form input[type="text"],
.hb-account-form input[type="email"],
.hb-account-form input[type="password"],
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"]{
	border-radius: 999px;
	border: 1px solid var(--hb-lila-1);
}
.wpcf7 textarea{ border-radius: var(--hb-radius-lg); border: 1px solid var(--hb-lila-1); }

/* --- Hero de la home YNS (components/sections/hero.tsx): banda gris muy
   suave (bg-secondary/30), titular text-5xl/6xl medium tracking-tight a la
   izquierda, párrafo muted 18-20px, CTAs píldora. Sin foto de fondo — el
   inline style con background-image del PHP se anula con !important. --- */
body.home .hb-hero,
body.front-page .hb-hero{
	background-image: none !important;
	background-color: #f7f7f7;
	height: auto;
	min-height: 0;
}
body.home .hb-hero-text,
body.front-page .hb-hero-text{
	position: static !important;
	transform: none !important;
	background: none;
	box-shadow: none;
	border: none;
	max-width: 42em;
	margin: 0;
	padding: 96px var(--hb-inset);
	color: var(--hb-blanco);
}
body.home .hb-hero-text h1,
body.front-page .hb-hero-text h1{
	font-size: var(--hb-h1);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.08;
	color: var(--hb-blanco);
}
body.home .hb-hero-text p,
body.front-page .hb-hero-text p{
	font-size: 19px;
	line-height: 1.6;
	color: var(--hb-gris-azul);
	margin-top: 1.2em;
}
body.home .hb-hero-text .hb-hero-btn,
body.front-page .hb-hero-text .hb-hero-btn{ margin-top: 1.8em; }

/* La home real usa el markup del clon CEIN (.cein-hero--card, front-page.php)
   — mismo tratamiento YNS: banda gris suave, sin foto, titular grande a la
   izquierda y CTA píldora. !important porque cein.css es autónomo y puede
   cargar después de este archivo. */
body.cein-clone .cein-hero{
	background: #f7f7f7 !important;
	background-image: none !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	display: block !important;
}
body.cein-clone .cein-hero > img,
body.cein-clone .cein-hero > picture,
body.cein-clone .cein-hero > video{ display: none !important; }
body.cein-clone .cein-hero-card{
	position: static !important;
	background: none !important;
	box-shadow: none !important;
	border: none !important;
	max-width: 44em;
	margin: 0 !important;
	padding: 96px var(--hb-inset) !important;
}
body.cein-clone .cein-hero-card-title{
	font-size: var(--hb-h1) !important;
	font-weight: 500 !important;
	letter-spacing: -0.02em;
	line-height: 1.08 !important;
	color: #0a0a0a !important;
}
body.cein-clone .cein-hero-card-copy{
	font-size: 19px !important;
	line-height: 1.6 !important;
	color: #737373 !important;
	margin-top: 1.2em !important;
	max-width: 38em;
}
body.cein-clone .cein-hero-card-link{
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	margin-top: 1.8em !important;
	background: #171717 !important;
	color: #fafafa !important;
	border-radius: 999px;
	min-height: 48px;
	padding: 0.7em 1.75em !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	box-sizing: border-box;
}
body.cein-clone .cein-hero-card-link:hover{ background: #2b2b2b !important; }

/* Cabecera de tienda/categoría: mismo tratamiento YNS que el hero de la
   home — banda gris suave con el título en oscuro, sin foto de fondo con
   velo. Las fotos de cabecera por categoría siguen en el tema por si se
   recuperan, pero el estilo YNS es texto sobre banda limpia. */
body.tax-product_cat .hb-hero,
body.woocommerce-shop .hb-hero,
body.post-type-archive-product .hb-hero{
	background-image: none !important;
	background-color: #f7f7f7;
	height: auto;
	min-height: 0;
}
body.tax-product_cat .hb-hero::before,
body.tax-product_cat .hb-hero::after,
body.woocommerce-shop .hb-hero::before,
body.woocommerce-shop .hb-hero::after,
body.post-type-archive-product .hb-hero::before,
body.post-type-archive-product .hb-hero::after{ content: none; }
body.tax-product_cat .hb-hero-text,
body.woocommerce-shop .hb-hero-text,
body.post-type-archive-product .hb-hero-text{
	position: static !important;
	transform: none !important;
	background: none;
	color: #0a0a0a;
	padding: 56px var(--hb-inset) 40px;
	max-width: none;
}
body.tax-product_cat .hb-hero-text h1,
body.woocommerce-shop .hb-hero-text h1,
body.post-type-archive-product .hb-hero-text h1{
	font-size: var(--hb-h2);
	font-weight: 500;
	letter-spacing: -0.01em;
	color: #0a0a0a;
}
body.tax-product_cat .hb-hero-text p,
body.woocommerce-shop .hb-hero-text p,
body.post-type-archive-product .hb-hero-text p{ color: #737373; }

/* Las fotos de producto vienen sobre fondo BLANCO de fábrica — sobre el
   cuadro gris #f5f5f5 de YNS quedaba un marco blanco visible. Con
   mix-blend-multiply el blanco de la foto se funde con el gris del cuadro
   (mismo truco que usan las tiendas con este estilo). */
.hb-card .hb-card-photo img,
.hb-gallery-v2-main img,
.hb-gallery-v2-thumb img{ mix-blend-mode: multiply; }

/* --- Ficha clavada a YNS, ronda 2: fuera todo el "chrome" que su PDP no
   tiene. La información de las pestañas (Ficha técnica / Envíos) queda
   oculta de momento — restaurar bajo demanda del owner integrándola en la
   descripción, no borrada del PHP. --- */
.single-product .hb-product-head-nav{ display: none; }
.single-product .hb-gallery-v2-arrow,
.single-product .hb-gallery-v2-counter{ display: none; }
.single-product .hb-swatch-arrow{ display: none; }
.single-product .hb-color-swatches-row{ gap: 0; }
.single-product .hb-product-tabs-v3{ display: none; }
.single-product .hb-trust-strip-section{ display: none; }
/* Relacionados desnudos como los de YNS: foto + nombre + precio, sin
   botones flotantes de corazón/vista rápida/añadir. */
.hb-product-related .hb-favorite-btn,
.hb-product-related .hb-card-quickview,
.hb-product-related .hb-card-quickadd{ display: none; }
/* Sin la fila de breadcrumb, la ficha necesita su propio aire superior. */
.single-product div.product{ padding-top: 3em; }

/* --- Ficha clavada a YNS (PDP de referencia): título ~36 semibold, precio
   30 semibold en su propia línea bajo el título, subtítulo pequeño gris.
   La estructura (galería con miniaturas, color, cantidad, pestañas) se
   mantiene — es lo que YNS no tiene y aquí sí hace falta. --- */
.single-product .hb-product-title{ font-size: 36px; font-weight: 600; letter-spacing: -0.02em; }
.single-product .hb-product-subtitle{ font-size: var(--hb-body-3); color: var(--hb-gris-azul); opacity: 1; margin-top: 0.5em; }
.single-product .hb-product-price{ font-size: 30px; font-weight: 600; }
.single-product .hb-google-reviews-badge{ font-size: var(--hb-body-3); }

/* --- Ficha v3: ajustes de piel YNS sobre la estructura Krist --- */
.hb-gallery-v2-main{ background: var(--hb-bg-alt); border-radius: var(--hb-radius-lg); }
.hb-gallery-v2-thumb{ border-radius: var(--hb-radius); background: var(--hb-bg-alt); }
.hb-product-buy-row form.cart .quantity{ border-radius: 999px; }
.hb-stock-badge{ background: #f0fdf4; color: #15803d; }

/* --- Tienda YNS ("All Products", scratchpad/yns/app/products/page.tsx):
   título plano + sidebar de filtros de 256px (16rem) a la izquierda + fila
   "Ordenar por:" en texto + grid de 3 columnas gap 32. "body.hb-shop-yns" lo
   pone functions.php en /shop/ y en los archivos de taxonomía de producto
   (nunca en búsqueda, que conserva su cabecera propia). El sidebar ES el
   mismo "#hb-filters-drawer" de siempre (misma lógica de filtros): solo a
   partir de 901px se re-presenta como columna estática; por debajo sigue
   siendo el cajón deslizante con su botón "Filtros". --- */

/* Contenedor de página: el header.php del child NO envuelve el contenido en
   ningún ".col-full" (cada sección gestiona su propio inset) y la tienda
   venía pintándose a sangre completa. La referencia YNS usa la columna
   centrada de 1280px (max-w-7xl + px-8) — exactamente lo que ya da
   "--hb-inset" sobre un bloque a todo lo ancho (32px hasta 1280 y margen
   creciente a partir de ahí, mismo token que usa el resto del sitio). */
body.hb-shop-yns .hb-shop-head,
body.hb-shop-yns #primary{
	padding-left: var(--hb-inset);
	padding-right: var(--hb-inset);
	box-sizing: border-box;
}

/* Cabecera: solo título ~40/500 + subtítulo gris (YNS text-4xl + muted). */
.hb-shop-head{ padding: 48px 0 40px; }
.hb-shop-head h1{
	margin: 0;
	font-size: 40px;
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.15;
	color: var(--hb-blanco);
}
.hb-shop-head p{
	margin: 8px 0 0;
	font-size: var(--hb-body-1);
	color: var(--hb-gris-azul);
	max-width: 60ch;
}
/* La referencia va directa al título, sin miga de pan por encima. */
body.hb-shop-yns .hb-shop-breadcrumb{ display: none; }

/* Fila "Ordenar por:" en texto plano (SortLinks de YNS) — oculta por defecto,
   la enseña solo el desktop del media query de abajo. */
.hb-sort-links{ display: none; align-items: center; flex-wrap: wrap; gap: 16px; font-size: var(--hb-body-3); }
.hb-sort-links-label{ color: var(--hb-gris-azul); }
.hb-sort-link{ color: var(--hb-gris-azul); text-decoration: none; }
.hb-sort-link:hover{ color: var(--hb-blanco); }
.hb-sort-link.is-active{ color: var(--hb-blanco); font-weight: 600; }

/* Grupos del panel de filtros: colapsables otra vez (acordeón con chevron,
   como el Accordion de YNS; el primero llega abierto del PHP) — pisa el
   "siempre visible" del reskin CEIN de más arriba
   (".hb-filter-section[data-filter-key] .hb-accordion-body{display:block}").
   El "[data-filter-key]" se repite en las variantes ".is-open" a propósito:
   sin él, la regla "display:none" de aquí (más específica) ganaría siempre. */
body.hb-shop-yns .hb-filter-section[data-filter-key] > .hb-accordion-head{
	cursor: pointer;
	padding: 14px 0;
	font-size: var(--hb-body-3);
	font-weight: 500;
	color: var(--hb-blanco);
}
body.hb-shop-yns .hb-filter-section[data-filter-key] > .hb-accordion-head::after{
	content: "";
	width: 8px;
	height: 8px;
	border-right: 1.5px solid var(--hb-gris-azul);
	border-bottom: 1.5px solid var(--hb-gris-azul);
	transform: rotate(45deg) translateY(-2px);
	transition: transform .15s ease;
	flex-shrink: 0;
}
body.hb-shop-yns .hb-filter-section[data-filter-key].is-open > .hb-accordion-head::after{
	transform: rotate(225deg) translateY(-2px);
}
body.hb-shop-yns .hb-filter-section[data-filter-key] .hb-accordion-body{ display: none; padding-bottom: 16px; }
body.hb-shop-yns .hb-filter-section[data-filter-key].is-open .hb-accordion-body{ display: block; }
body.hb-shop-yns .hb-filter-option{ color: var(--hb-gris-azul); }
body.hb-shop-yns .hb-filter-option:hover{ color: var(--hb-blanco); }
body.hb-shop-yns .hb-filter-option input:checked ~ span{ color: var(--hb-blanco); }

@media (min-width: 901px){
	/* Dos columnas: sidebar 256px + contenido, gap 40 (lg:grid-cols-
	   [16rem_minmax(0,1fr)] lg:gap-10 de YNS). Los hijos de #main se
	   reparten por CSS: todo a la columna derecha salvo el panel de
	   filtros, que ancla la izquierda desde la primera fila. */
	body.hb-shop-yns .site-main{
		display: grid;
		grid-template-columns: 256px minmax(0, 1fr);
		column-gap: 40px;
		align-items: start;
	}
	body.hb-shop-yns .site-main > *{ grid-column: 2; min-width: 0; }
	body.hb-shop-yns .site-main > #hb-filters-drawer{
		grid-column: 1;
		grid-row: 1 / span 40; /* filas implícitas de sobra — las vacías miden 0 */
	}

	/* El cajón deja de ser modal: columna estática siempre visible. */
	body.hb-shop-yns #hb-filters-drawer{
		display: block;
		position: static;
		z-index: auto;
	}
	body.hb-shop-yns #hb-filters-drawer .hb-modal-overlay{ display: none; }
	body.hb-shop-yns #hb-filters-drawer .hb-modal-box{
		position: static;
		display: block;
		transform: none;
		transition: none;
		width: auto;
		max-width: none;
		height: auto;
		max-height: none;
		padding: 0;
		overflow: visible;
		background: none;
		border-radius: 0;
		box-shadow: none;
	}
	body.hb-shop-yns .hb-drawer-head{
		height: auto;
		justify-content: flex-start;
		padding: 18px 0 12px; /* alinea "Filtros" con la fila "Ordenar por:" */
		border-bottom: none;
	}
	body.hb-shop-yns .hb-drawer-head h3{ font-size: var(--hb-body-3); font-weight: 500; text-align: left; }
	body.hb-shop-yns .hb-drawer-head .hb-modal-close{ display: none; }
	/* En la referencia no hay línea entre "Filters" y el primer grupo: los
	   divisores van solo ENTRE grupos (el border-top de cada item lo pone la
	   base ".hb-accordion-item"; se quita solo el del primero). */
	body.hb-shop-yns .hb-drawer-body > .hb-filter-section:first-child{ border-top: none; }
	body.hb-shop-yns .hb-drawer-body{ padding: 0; overflow: visible; }
	body.hb-shop-yns .hb-drawer-footer{
		padding: 14px 0 0;
		border-top: none;
	}
	/* Sin botón "Ver resultados" en el sidebar: cada clic aplica el filtro al
	   momento (ver el listener de "change" en hb-filters.js). */
	body.hb-shop-yns .hb-drawer-footer .hb-btn-primary{ display: none; }
	body.hb-shop-yns .hb-drawer-footer .hb-clear-filters{ align-self: flex-start; margin-left: 0; color: var(--hb-gris-azul); }

	/* Barra superior de la columna derecha: solo la fila "Ordenar por:". */
	body.hb-shop-yns .hb-filterbar{ padding: 18px 0 24px; }
	body.hb-shop-yns .hb-sort-links{ display: flex; }
	body.hb-shop-yns .hb-filterbar .hb-quickfilter{ display: none; }
	body.hb-shop-yns .hb-filterbar .hb-open-filters{ display: none; }

	/* Grid de productos: 3 columnas, gap 32 (xl:grid-cols-3 gap-8 de YNS). */
	body.hb-shop-yns ul.products{
		grid-template-columns: repeat(3, 1fr);
		gap: 32px;
	}
}

/* Paginación (solo la copia de debajo del grid, ver functions.php):
   botones cuadraditos discretos, el actual sobre gris suave. */
body.hb-shop-yns .woocommerce-pagination{ padding: 8px 0 48px; }
body.hb-shop-yns .woocommerce-pagination .page-numbers{
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
}
body.hb-shop-yns .woocommerce-pagination .page-numbers li{ margin: 0; }
body.hb-shop-yns .woocommerce-pagination .page-numbers a,
body.hb-shop-yns .woocommerce-pagination .page-numbers span{
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: var(--hb-radius);
	color: var(--hb-blanco);
	text-decoration: none;
	font-size: var(--hb-body-3);
}
body.hb-shop-yns .woocommerce-pagination .page-numbers a:hover{ background: var(--hb-bg-alt); }
body.hb-shop-yns .woocommerce-pagination .page-numbers span.current{ background: var(--hb-bg-alt); font-weight: 600; }

@media (max-width: 900px){
	/* Móvil YNS: botón "Filtros" a la izquierda + píldora "Ordenar por" a la
	   derecha; los filtros por taxonomía viven dentro del cajón (los popovers
	   rápidos sueltos no existen en la referencia). El grid ya cae a 2
	   columnas por la regla general de "ul.products" de más arriba. */
	body.hb-shop-yns .hb-filterbar .hb-quickfilter:not(.hb-quickfilter--sort){ display: none; }
	/* El botón "Filtros" queda primero (YNS: botón outline a la izquierda,
	   orden a la derecha) — y recupera su borde píldora: la regla base
	   ".hb-filterbar-trigger:last-child{border:none}" lo dejaba como texto
	   suelto por ser el último hijo del DOM. */
	body.hb-shop-yns .hb-filterbar .hb-open-filters{
		order: -1;
		border: 1px solid var(--hb-lila-1);
		border-radius: 999px;
		padding: 8px 16px;
	}
	body.hb-shop-yns .hb-quickfilter--sort{ margin-left: auto; }
	.hb-shop-head{ padding: 32px 0 24px; }
	.hb-shop-head h1{ font-size: 32px; }
}

/* Checkout: el hueco entre "Finalizar compra" y el formulario era enorme
   (owner) — título pegado a su contenido, mismo ritmo que el carrito. */
body.woocommerce-checkout .entry-header{ margin: 0 0 28px !important; padding: 0 !important; }
body.woocommerce-checkout .entry-header h1.entry-title{ margin: 0 !important; }
body.woocommerce-checkout .wp-block-woocommerce-checkout{ margin-top: 0 !important; padding-top: 0 !important; }
body.woocommerce-checkout .wc-block-components-sidebar-layout{ margin-top: 0 !important; }