@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════
   GLOBAL HEATING · Sistema de diseño nivel Apple
   Premium e-commerce de calefacción
   ═══════════════════════════════════════════════════════════════════ */
/* ─── TOKENS ──────────────────────────────────────────────────────── */
:root {
  /* PALETA · Verde marca (calefacción / energía / sostenible) */
  --gh-green-900: #0F3D2E;
  --gh-green-800: #145A3F;
  --gh-green-700: #1F6F4A;
  --gh-green-600: #258759;
  --gh-green-500: #2EA76F;
  --gh-green-400: #5EBE91;
  --gh-green-300: #94D4B3;
  --gh-green-200: #C4E6D3;
  --gh-green-100: #E8F5EE;
  --gh-green-50: #F4FAF7;
  /* Triplete RGB (patrón `-rgb` de Bootstrap) para alimentar sus utilidades
     `rgba(var(--bs-*-rgb), α)` sin pelear con `!important` (ver pages/_cart.scss). */
  --gh-green-100-rgb: 232, 245, 238;
  /* PALETA · Azul IA (degradado para Asesor NEXT) */
  --gh-ai-deep: #1E3A8A;
  --gh-ai-start: #3B82F6;
  --gh-ai-mid: #06B6D4;
  --gh-ai-end: #22D3EE;
  --gh-ai-glow: rgba(59, 130, 246, 0.28);
  /* PALETA · Neutros (la base seria estilo Apple) */
  --gh-black: #0A0A0A;
  --gh-grey-950: #111111;
  --gh-grey-900: #1A1A1A;
  --gh-grey-800: #262626;
  --gh-grey-700: #404040;
  --gh-grey-600: #525252;
  --gh-grey-500: #737373;
  --gh-grey-400: #A3A3A3;
  --gh-grey-300: #D4D4D4;
  --gh-grey-200: #E5E5E5;
  --gh-grey-100: #F5F5F5;
  --gh-grey-150: #EDEDED; /* entre 100 y 200 · fila del menú de la cabecera */
  --gh-grey-50: #FAFAFA;
  --gh-white: #FFFFFF;
  /* Acentos puntuales */
  --gh-accent-orange: #FF6B35;
  --gh-accent-amber: #F59E0B;
  --gh-error: #DC2626;
  --gh-success: var(--gh-green-600);
  /* TIPOGRAFÍA */
  --gh-font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  --gh-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
  --gh-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --gh-font-logo: 'Outfit', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Escala modular (ratio 1.25 — Major Third) */
  --gh-text-xs: 0.75rem; /* 12px */
  --gh-text-sm: 0.875rem; /* 14px */
  --gh-text-base: 1rem; /* 16px */
  --gh-text-lg: 1.125rem; /* 18px */
  --gh-text-xl: 1.25rem; /* 20px */
  --gh-text-2xl: 1.5rem; /* 24px */
  --gh-text-3xl: 1.875rem; /* 30px */
  --gh-text-4xl: 2.25rem; /* 36px */
  --gh-text-5xl: 3rem; /* 48px */
  --gh-text-6xl: 3.75rem; /* 60px */
  --gh-text-7xl: 4.5rem; /* 72px */
  --gh-text-8xl: 6rem; /* 96px */
  /* Tracking (letter-spacing tipo Apple) */
  --gh-tracking-tightest: -0.04em;
  --gh-tracking-tighter: -0.03em;
  --gh-tracking-tight: -0.02em;
  --gh-tracking-normal: 0;
  --gh-tracking-wide: 0.025em;
  --gh-tracking-wider: 0.05em;
  --gh-tracking-widest: 0.1em;
  /* Line-heights */
  --gh-leading-none: 1;
  --gh-leading-tight: 1.1;
  --gh-leading-snug: 1.3;
  --gh-leading-normal: 1.5;
  --gh-leading-relaxed: 1.65;
  --gh-leading-loose: 1.8;
  /* ESPACIADO (sistema 8pt + 4pt opcional) */
  --gh-space-0: 0;
  --gh-space-1: 0.25rem; /* 4 */
  --gh-space-2: 0.5rem; /* 8 */
  --gh-space-3: 0.75rem; /* 12 */
  --gh-space-4: 1rem; /* 16 */
  --gh-space-5: 1.25rem; /* 20 */
  --gh-space-6: 1.5rem; /* 24 */
  --gh-space-8: 2rem; /* 32 */
  --gh-space-10: 2.5rem; /* 40 */
  --gh-space-12: 3rem; /* 48 */
  --gh-space-16: 4rem; /* 64 */
  --gh-space-20: 5rem; /* 80 */
  --gh-space-24: 6rem; /* 96 */
  --gh-space-32: 8rem; /* 128 */
  --gh-space-40: 10rem; /* 160 */
  /* RADIOS */
  --gh-radius-xs: 2px;
  --gh-radius-sm: 4px;
  --gh-radius-md: 8px;
  --gh-radius-lg: 12px;
  --gh-radius-xl: 16px;
  --gh-radius-2xl: 24px;
  --gh-radius-3xl: 32px;
  --gh-radius-full: 9999px;
  /* SOMBRAS (multi-capa, realistas — no plano) */
  --gh-shadow-xs: 0 1px 2px rgba(10, 10, 10, 0.04);
  --gh-shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.04), 0 1px 3px rgba(10, 10, 10, 0.06);
  --gh-shadow-md: 0 2px 4px rgba(10, 10, 10, 0.04), 0 4px 8px rgba(10, 10, 10, 0.06);
  --gh-shadow-lg: 0 4px 8px rgba(10, 10, 10, 0.05), 0 8px 16px rgba(10, 10, 10, 0.08);
  --gh-shadow-xl: 0 8px 16px rgba(10, 10, 10, 0.06), 0 16px 32px rgba(10, 10, 10, 0.1);
  --gh-shadow-2xl: 0 16px 32px rgba(10, 10, 10, 0.08), 0 32px 64px rgba(10, 10, 10, 0.12);
  --gh-shadow-glow-green: 0 0 0 4px rgba(46, 167, 111, 0.15);
  --gh-shadow-glow-ai: 0 0 0 4px rgba(59, 130, 246, 0.18), 0 12px 40px rgba(59, 130, 246, 0.2);
  /* VIDRIO · liquid glass (superficies translúcidas · sistema único) */
  --gh-glass-bg: rgba(255, 255, 255, 0.55);
  --gh-glass-bg-strong: rgba(255, 255, 255, 0.72);
  --gh-glass-border: rgba(255, 255, 255, 0.65);
  --gh-glass-blur: saturate(180%) blur(20px);
  --gh-glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  /* Degradado IA (azul→morado→rosa) · firma del Asesor NEXT / estudio de vivienda. */
  --gh-ai-grad: linear-gradient(120deg, #4285F4 0%, #9B72CB 50%, #E8618C 100%);
  /* Degradado verde de marca · botones de acción de la web. El estándar se usa
     hoy en los estados hover; las superficies en reposo van con la variante
     suave (ver abajo). Consumido por layout/_header.scss y components/_launchers.scss. */
  --gh-green-grad: linear-gradient(180deg, var(--gh-green-600) 0%, var(--gh-green-700) 100%);
  --gh-green-grad-hover: linear-gradient(180deg, var(--gh-green-700) 0%, var(--gh-green-800) 100%);
  /* Variante suave (un escalón más clara) · superficies grandes, donde el
     verde pleno pesa demasiado: lanzador del estudio de hogar. Al hover sube
     al verde estándar, así el botón «se asienta» al pasar por encima. */
  --gh-green-grad-soft: linear-gradient(180deg, var(--gh-green-500) 0%, var(--gh-green-600) 100%);
  /* Aurora de fondo (zonas premium) · los tonos IA del estudio. Visible, no saturado. */
  --gh-aurora:
    radial-gradient(48rem 34rem at 6% 2%, rgba(66, 133, 244, 0.18), transparent 58%),
    radial-gradient(46rem 32rem at 94% 0%, rgba(232, 97, 140, 0.15), transparent 56%),
    radial-gradient(54rem 40rem at 62% 106%, rgba(155, 114, 203, 0.18), transparent 60%),
    var(--gh-grey-50);
  /* TRANSICIONES (cubic-bezier estilo iOS) */
  --gh-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --gh-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --gh-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --gh-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --gh-duration-fast: 150ms;
  --gh-duration-base: 220ms;
  --gh-duration-slow: 350ms;
  --gh-duration-slower: 500ms;
  /* CONTENEDORES */
  --gh-container-sm: 640px;
  --gh-container-md: 768px;
  --gh-container-lg: 1024px;
  --gh-container-xl: 1200px;
  --gh-container-2xl: 1400px;
  /* Raíl del sitio = LIENZO FIJO de la web (CONVENTIONS.md §4): la página se
     maqueta SIEMPRE a este ancho. De este valor cuelgan html{min-width}
     (layout/_canvas.scss), el aplanado de medias del build (tools/flatten-css.mjs
     lo lee de aquí) y la meta viewport de head.tpl (el build comprueba que
     coincida). Cambiar el lienzo = cambiar este número (y el de head.tpl). */
  --gh-container: 1712px;
  /* Tamaño de lectura en escritorio (decisión del usuario 2026-11-07: al 100 %
     «se ve un pelín grande», le gusta como al 90 % del navegador). Escala
     MÁXIMA que aplica assets/js/gh-canvas.js a todo el documento; en
     ventanas estrechas baja más para que quepa el lienzo. Solo escritorio:
     en dispositivos el lienzo ya se encaja a la pantalla. 1 = sin reducir. */
  --gh-desktop-scale: 0.9;
  /* Rail de las páginas de categoría · homogeneizado al rail del sitio
     (--gh-container) para que cabecera y contenido de categoría alineen sus
     bordes. Dentro caben el menú (300) + gap (24) + listado. */
  --gh-cat-rail: var(--gh-container);
  /* Columna lateral izquierda · ancho común de los accesos rápidos de la
     cabecera (Mi cuenta, Mis pedidos…) y del menú lateral de categorías,
     para que ambos tengan el mismo borde derecho (2026-10-11). */
  --gh-side-col: 320px;
  /* Z-INDEX · escala del tema (elementos dentro del flujo de la página) */
  --gh-z-dropdown: 100;
  --gh-z-sticky: 200;
  --gh-z-modal: 300;
  --gh-z-tooltip: 400;
  /* Z-INDEX · superposiciones a pantalla completa. Los módulos usan de facto la
     escala de Bootstrap y quedan MUY por encima de --gh-z-modal (300), que por
     eso no sirve para diálogos: ghsidebar 1040, ghconsulta 1080,
     ghdescripcionlateral 1090/1100. Los paneles laterales comparten capa: nunca
     hay dos abiertos a la vez.
     Deuda: dos escalas conviviendo; unificar cuando se migren los módulos. */
  --gh-z-overlay: 1090;
  --gh-z-drawer: 1100;
}

/* ─── RESET PUNTUAL ───────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--gh-font-body);
  font-size: var(--gh-text-base);
  line-height: var(--gh-leading-normal);
  color: var(--gh-grey-900);
  background: var(--gh-white);
  letter-spacing: -0.01em;
  -webkit-font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* ─── CABECERA GLOBAL HEATING ────────────────────────────────────── */
.gh-header {
  position: relative;
  background: var(--gh-white);
  /* Línea de separación con el contenido. Se quita solo en la home (ver abajo),
     donde el slider va a sangre y el carrito debe llegar a ras sin línea. */
  border-bottom: 1px solid var(--gh-grey-200);
}

/* Home: sin línea inferior (el slider provee la separación y el carrito solapa). */
body#index .gh-header {
  border-bottom: 0;
}

/* Fila top · menú superior de cliente (Inicio, Mi Cuenta, Contacto…).
   Cabecera en 3 capas de gris que se aclaran hacia arriba (2026-11-07):
   fila superior --gh-grey-50 → franja del logo --gh-grey-100 → menú
   --gh-grey-150. */
.gh-header__topbar {
  border-bottom: 1px solid var(--gh-grey-200);
  background: var(--gh-grey-50);
}

.gh-header__topbar-inner {
  position: relative;
  max-width: var(--gh-container);
  margin: 0 auto;
  /* Sin aire vertical: lo lleva cada item (ver `.gh-header__toplinks > li`). */
  padding: 0 var(--gh-space-8);
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--gh-space-4);
}

/* Menú superior de cliente · derecha del topbar */
.gh-header__toplinks {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gh-space-2) var(--gh-space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.gh-header__toplink {
  font-family: var(--gh-font-body);
  font-size: var(--gh-text-xs);
  font-weight: 500;
  color: var(--gh-grey-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color var(--gh-duration-fast) var(--gh-ease-out);
}

.gh-header__toplink:hover {
  color: var(--gh-green-700);
}

.gh-header__toplink--highlight {
  font-weight: 600;
  color: var(--gh-grey-800);
}

/* Cada item de la franja pone su propio aire vertical: la altura de la
   franja (44px = 10 + línea de 24 + 10) sale de aquí. */
.gh-header__toplinks > li {
  padding-block: 10px;
}

/* Contacto · anclado a la esquina superior derecha de la barra, justo encima
   del carrito (espejo del selector de país de la izquierda). */
.gh-header__topbar .gh-header__topcontact {
  position: absolute;
  right: var(--gh-space-8);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--gh-font-body);
  font-size: var(--gh-text-xs);
  font-weight: 600;
  color: var(--gh-grey-800);
  text-decoration: none;
  transition: color var(--gh-duration-fast) var(--gh-ease-out);
}

.gh-header__topbar .gh-header__topcontact:hover {
  color: var(--gh-green-700);
}
/* Marca + menú: ancla relativa del recuadro del carrito (abarca ambas filas). */
/* Franja central (logo, buscador, accesos) · gris claro (decisión del
   usuario 2026-11-07: la cabecera se veía demasiado blanca). Contiene también
   la fila del menú, un gris algo más oscuro (.gh-header__nav). */
.gh-header__main {
  position: relative;
  background: var(--gh-grey-100);
}

.gh-header__container {
  max-width: var(--gh-container);
  margin: 0 auto;
  /* Padding inferior reducido (12px) para acercar el buscador al menú de abajo
     sin tocar el aire superior con la barra de cliente. Padding lateral ampliado
     (96px) para meter los 3 botones de la izquierda y el carrito de la derecha
     hacia dentro y estrechar la fila de marca (el centro queda centrado igual). */
  padding: var(--gh-space-6) var(--gh-space-24) var(--gh-space-3);
  /* Altura de la banda de marca, fijada explícitamente (el carrito ya no la
     sostiene al estar en absoluto). */
  min-height: 118px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--gh-space-6);
}

.gh-header__utility-right {
  display: flex;
  align-items: center;
  gap: var(--gh-space-6);
  justify-content: flex-end;
}

/* Accesos rápidos · 3 botones verdes apilados a la izquierda de la marca
   (guía, cálculo, catálogo). Mismo lenguaje que las CTAs del tema nuevo: verde
   bosque de marca, texto blanco, esquinas suaves. Anchos uniformes (acotados a
   --gh-side-col, el mismo del menú lateral de categorías) y centrados
   verticalmente en la banda de marca. */
.gh-header__utility-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gh-space-2);
  max-width: var(--gh-side-col);
}

.gh-header__quicklink {
  display: block;
  width: 100%;
  padding: 8px 14px;
  font-family: var(--gh-font-body);
  font-size: var(--gh-text-xs);
  font-weight: 500;
  line-height: 1.2;
  color: var(--gh-white, #fff);
  text-decoration: none;
  background: var(--gh-green-grad-soft);
  border: 1px solid var(--gh-green-600);
  border-radius: 6px;
  transition: background var(--gh-duration-fast) var(--gh-ease-out), border-color var(--gh-duration-fast) var(--gh-ease-out);
}

.gh-header__quicklink:hover,
.gh-header__quicklink:focus {
  color: var(--gh-white, #fff);
  background: var(--gh-green-grad);
  border-color: var(--gh-green-700);
  border-color: var(--gh-green-800);
  outline: none;
}

/* Columna central · marca arriba + buscador debajo, centrados. El gap acerca el
   título al buscador; el margin-top baja un poco el bloque dentro de la banda. */
.gh-header__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
  gap: var(--gh-space-2);
  margin-top: var(--gh-space-3);
}

.gh-header__brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 28px;
  text-decoration: none;
  color: var(--gh-grey-900);
  line-height: 1;
}

/* Cuadradito de marca a la izquierda del wordmark (estilo logo 1.6). Casado a la
   altura de las mayúsculas, verde profundo que ancla el lockup. */
.gh-header__brand-square {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  /* «Línea del horizonte» a 2/3 desde abajo (33% desde arriba): mismo
     gradiente verde 600→800 de base, con un velo de luz muy sutil sobre
     el tercio superior que marca la línea sin cambiar de color. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.08) 33.3%, rgba(255, 255, 255, 0) 33.3%), linear-gradient(180deg, var(--gh-green-600) 0%, var(--gh-green-800) 100%);
}

/* Buscador (ps_searchbar) debajo de la marca · más ancho que el lockup
   (cuadrado + wordmark): ensancha la columna central hasta 640px. */
.gh-header__search {
  width: 640px;
}

/* El widget de Hummingbird (#_desktop_ps_searchbar) trae clases Bootstrap
   (ms-auto, col-auto) pensadas para ir suelto a la derecha del header. Aquí lo
   forzamos a ocupar el ancho del contenedor. */
.gh-header__search #_desktop_ps_searchbar {
  width: 100%;
  margin: 0;
}

.gh-header__search .ps-searchbar {
  width: 100%;
}

.gh-header__search .ps-searchbar__form {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
}

/* Patrón 1.6: campo + botón "Buscar". Sin lupa izquierda ni botón limpiar. */
.gh-header__search .ps-searchbar__magnifier,
.gh-header__search .ps-searchbar__clear {
  display: none;
}

/* Campo · blanco, esquinas redondeadas solo a la izquierda (se une al botón). */
.gh-header__search .ps-searchbar__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  padding: 0 12px;
  font-family: var(--gh-font-body);
  font-size: var(--gh-text-xs);
  color: var(--gh-grey-900);
  background: var(--gh-white);
  border: 1px solid var(--gh-grey-300);
  border-right: 0;
  border-radius: 6px 0 0 6px;
  /* Sombra interior tipo 1.6 (campo "hundido"), suavizada. */
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.08);
  transition: border-color var(--gh-duration-fast) var(--gh-ease-out);
}

.gh-header__search .ps-searchbar__input:focus {
  outline: none;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.08);
  border-color: var(--gh-green-600);
}

.gh-header__search .ps-searchbar__input::placeholder {
  color: var(--gh-grey-500);
}

/* Botón "Buscar" · verde de marca, esquinas redondeadas solo a la derecha. */
.gh-header__search .gh-searchbar__submit {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 20px;
  font-family: var(--gh-font-body);
  font-size: var(--gh-text-xs);
  font-weight: 600;
  color: var(--gh-white);
  background: var(--gh-green-grad-soft);
  border: 1px solid var(--gh-green-600);
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  transition: background var(--gh-duration-fast) var(--gh-ease-out);
}

.gh-header__search .gh-searchbar__submit:hover,
.gh-header__search .gh-searchbar__submit:focus {
  background: var(--gh-green-grad);
  border-color: var(--gh-green-700);
  outline: none;
}

.gh-header__brand-mark {
  font-family: var(--gh-font-logo);
  /* Outfit 500 · geométrica suave; se bajó de 600 el 2026-07-19 para un
     lockup más fino. Si se cambia el peso, actualizar también la URL de
     Google Fonts en _partials/head.tpl (solo se carga el peso usado). */
  font-weight: 500;
  font-size: 1.8rem;
  letter-spacing: 0.14em;
  background: linear-gradient(180deg, var(--gh-green-800) 0%, var(--gh-green-600) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Símbolo de registrado · fuera del degradado recortado del wordmark, en
   superíndice y verde sólido para que se vea nítido. */
.gh-header__brand-reg {
  font-size: 0.4em;
  font-weight: 600;
  vertical-align: super;
  margin-left: 0.45em;
  color: var(--gh-green-700);
  -webkit-text-fill-color: var(--gh-green-700);
}

.gh-header__icon-btn {
  background: transparent;
  border: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--gh-radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gh-grey-800);
  cursor: pointer;
  position: relative;
  transition: background var(--gh-duration-fast) var(--gh-ease-out), color var(--gh-duration-fast) var(--gh-ease-out);
}

.gh-header__icon-btn:hover {
  background: var(--gh-grey-100);
  color: var(--gh-green-800);
}

.gh-header__icon-btn .badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--gh-green-700);
  color: var(--gh-white);
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--gh-radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gh-header__nav {
  border-top: 1px solid var(--gh-grey-200);
  background: var(--gh-grey-150);
}

.gh-header__nav-list {
  max-width: var(--gh-container);
  margin: 0 auto;
  /* Vertical 3px (fuera de la escala 8/4 a propósito): fija la barra del menú
     en 44px de alto (1 borde + 3 + 37 contenido + 3). */
  padding: 3px var(--gh-space-8);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--gh-space-8);
  list-style: none;
  flex-wrap: wrap;
}

.gh-header__nav-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--gh-font-body);
  font-size: var(--gh-text-sm);
  font-weight: 600;
  letter-spacing: var(--gh-tracking-wide);
  color: var(--gh-grey-800);
  text-decoration: none;
  padding: 8px 0;
  position: relative;
  transition: color var(--gh-duration-fast) var(--gh-ease-out);
}

button.gh-header__nav-link {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  margin: 0;
  line-height: inherit;
  cursor: pointer;
}

.gh-header__nav-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--gh-green-700);
  transition: width var(--gh-duration-base) var(--gh-ease-out), left var(--gh-duration-base) var(--gh-ease-out);
}

.gh-header__nav-link:hover {
  color: var(--gh-green-800);
}

.gh-header__nav-link:hover::after {
  width: 100%;
  left: 0;
}

/* Opción de la página actual · subrayado fijo (mismo que el de hover). */
.gh-header__nav-link.is-current {
  color: var(--gh-green-800);
}

.gh-header__nav-link.is-current::after {
  width: 100%;
  left: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   GH · Recuadro vertical del carrito en header
   Réplica modernizada del bloque verde antiguo (verde bosque de marca).
   Posicionado sobre .gh-header__main: abarca desde el borde superior de la
   fila de marca hasta la LÍNEA INFERIOR de la barra del menú. El borde derecho
   se alinea con el contenido (--gh-container) en cualquier ancho de viewport.
   El posicionamiento va en .gh-cart (contenedor que pinta ps_shoppingcart y
   ancla del mini-carrito desplegable, ver components/_mini-cart.scss); el
   recuadro .gh-cart-box lo rellena entero.
   ════════════════════════════════════════════════════════════════════════ */
.gh-cart {
  position: absolute;
  top: 0;
  /* Por defecto, a ras del borde inferior de la cabecera (fondo del menú). */
  bottom: 0;
  /* Inset lateral igualado al padding de .gh-header__container (--gh-space-24)
     para que el carrito entre lo mismo que los 3 botones de la izquierda. */
  right: calc(max(0px, (100% - var(--gh-container)) / 2) + var(--gh-space-24));
  width: 270px; /* 250 → 270 el 2026-10-11, a petición del usuario */
  z-index: var(--gh-z-dropdown); /* el mini-carrito se despliega sobre el contenido */
}

.gh-cart-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 44px;
  background: var(--gh-green-grad-soft);
  color: #ffffff;
  text-decoration: none;
  font-family: var(--gh-font-display, inherit);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset;
  transition: filter 0.2s ease;
}

/* En la home el contenido es un slider a sangre pegado a la cabecera: el carrito
   solapa 2px sobre él (pintándose por encima) para tapar el filo anti-aliased de
   la imagen y llegar a ras, sin línea clara. En el resto de páginas el contenido
   tiene su propio aire, así que el carrito se queda a ras del menú (bottom: 0). */
body#index .gh-cart {
  bottom: -2px;
}

.gh-cart-box:hover,
.gh-cart-box:focus {
  filter: brightness(1.08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
  outline: none;
  color: #ffffff;
}

.gh-cart-box__icon {
  color: #ffffff;
  margin-bottom: 2px;
}

.gh-cart-box__label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-transform: none;
}

.gh-cart-box__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--gh-green-800);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.gh-cart-box__total {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.005em;
}

.gh-cart-box__empty {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.78);
  font-style: italic;
}
/* ── Pulse del recuadro verde al recibir un producto ──────────────── */
@keyframes ghCartPulse {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  35% {
    transform: scale(1.04);
    filter: brightness(1.18);
  }
  70% {
    transform: scale(0.98);
    filter: brightness(1.1);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}
.gh-cart-box.gh-cart-pulse {
  animation: ghCartPulse 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gh-cart-box.gh-cart-pulse .gh-cart-box__count {
  animation: ghCartPulse 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

:root {
  --gh-mini-cart-w: 380px;
  --gh-mini-cart-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

.gh-mini-cart {
  position: absolute;
  top: 100%;
  right: 0;
  width: var(--gh-mini-cart-w);
  padding-top: var(--gh-space-2);
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.3s var(--gh-mini-cart-ease), visibility 0s linear 0.3s;
}

.gh-cart:hover .gh-mini-cart,
.gh-cart:focus-within .gh-mini-cart,
.gh-cart.is-open .gh-mini-cart {
  visibility: visible;
  clip-path: inset(0 -24px -24px -24px);
  transition: clip-path 0.35s var(--gh-mini-cart-ease) 0.1s, visibility 0s linear 0.1s;
}

.gh-cart.is-dismissed:hover .gh-mini-cart,
.gh-cart.is-dismissed:focus-within .gh-mini-cart {
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.3s var(--gh-mini-cart-ease), visibility 0s linear 0.3s;
}

.gh-mini-cart__panel {
  background: var(--gh-white);
  border: 1px solid var(--gh-grey-200);
  border-top: 3px solid var(--gh-green-600);
  border-radius: var(--gh-radius-lg);
  box-shadow: var(--gh-shadow-xl);
  padding: var(--gh-space-4);
  font-family: var(--gh-font-body);
  color: var(--gh-grey-800);
}

.gh-mini-cart__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
}

.gh-mini-cart__item {
  display: grid;
  grid-template-columns: 64px 1fr auto 24px;
  align-items: center;
  gap: var(--gh-space-3);
  padding: var(--gh-space-3) 0;
  border-bottom: 1px solid var(--gh-grey-100);
}
.gh-mini-cart__item:first-child {
  padding-top: 0;
}

.gh-mini-cart__thumb {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: var(--gh-radius-md);
  background: var(--gh-grey-50);
  overflow: hidden;
}
.gh-mini-cart__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gh-mini-cart__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gh-mini-cart__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--gh-text-sm);
  font-weight: 500;
  line-height: 1.35;
  color: var(--gh-grey-900);
  text-decoration: none;
}
.gh-mini-cart__name:hover {
  color: var(--gh-green-700);
}

.gh-mini-cart__qty {
  font-weight: 700;
  color: var(--gh-green-700);
}

.gh-mini-cart__attr {
  font-size: var(--gh-text-xs);
  color: var(--gh-grey-500);
}

.gh-mini-cart__price {
  font-size: var(--gh-text-sm);
  font-weight: 700;
  color: var(--gh-grey-900);
  white-space: nowrap;
}

.gh-mini-cart__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: var(--gh-grey-400);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.gh-mini-cart__remove:hover, .gh-mini-cart__remove:focus-visible {
  background: var(--gh-grey-100);
  color: var(--gh-error);
}

.gh-mini-cart__item.is-removing {
  opacity: 0.4;
  pointer-events: none;
}

.gh-mini-cart__totals {
  margin: var(--gh-space-3) 0 0;
}

.gh-mini-cart__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 2px 0;
  font-size: var(--gh-text-sm);
}
.gh-mini-cart__row dt {
  font-weight: 500;
  color: var(--gh-grey-600);
}
.gh-mini-cart__row dd {
  margin: 0;
  font-weight: 600;
  color: var(--gh-grey-900);
}

.gh-mini-cart__row--total {
  margin-top: var(--gh-space-1);
  padding-top: var(--gh-space-2);
  border-top: 1px solid var(--gh-grey-200);
}
.gh-mini-cart__row--total dt,
.gh-mini-cart__row--total dd {
  font-family: var(--gh-font-display);
  font-size: var(--gh-text-base);
  font-weight: 700;
  color: var(--gh-green-800);
}

.gh-mini-cart__note {
  margin: var(--gh-space-3) 0 0;
  padding: var(--gh-space-2) var(--gh-space-3);
  border-radius: var(--gh-radius-md);
  background: var(--gh-green-50);
  font-size: var(--gh-text-xs);
  line-height: 1.5;
  color: var(--gh-green-800);
  text-align: center;
}

.gh-mini-cart__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gh-space-2);
  margin-top: var(--gh-space-3);
}

.gh-mini-cart__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 var(--gh-space-3);
  border-radius: var(--gh-radius-md);
  font-family: var(--gh-font-display);
  font-size: var(--gh-text-sm);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.2s ease, background-color 0.2s ease;
}

.gh-mini-cart__btn--ghost {
  border: 1px solid var(--gh-green-600);
  color: var(--gh-green-700);
  background: var(--gh-white);
}
.gh-mini-cart__btn--ghost:hover {
  background: var(--gh-green-50);
  color: var(--gh-green-800);
}

.gh-mini-cart__btn--primary {
  border: 0;
  background: var(--gh-green-grad-soft);
  color: var(--gh-white);
}
.gh-mini-cart__btn--primary:hover {
  filter: brightness(1.08);
  color: var(--gh-white);
}

.gh-mini-cart__empty {
  margin: 0;
  padding: var(--gh-space-2) 0;
  font-size: var(--gh-text-sm);
  color: var(--gh-grey-500);
  text-align: center;
}

/* ─── PROCESO DE COMPRA · maqueta compartida (2026-08-23) ─────────────
   /carrito, /pedido y /confirmacion-pedido comparten la misma maqueta
   (decisiones del usuario del 2026-08-23):

     · raíl --gh-cat-rail con sangrado --gh-space-24 (como categoría);
     · rejilla .gh-process de TRES columnas: panel de confianza
       (checkout/_partials/gh-purchase-trust.tpl · variante --rail de
       components/_trust-bar.scss; ocupó el sitio del menú de marcas esa
       misma tarde) · contenido · resumen del pedido.
       La confirmación no tiene resumen: variante --wide (panel + contenido).

   El resumen (aside-wrapper) es pegajoso: las columnas se estiran a la
   fila —nada de align-items:start, que dimensionaba la columna a su
   contenido y dejaba al sticky sin recorrido (bug hasta 2026-08-23)— y
   se pega el wrapper interior. El título del panel (h2 «Resumen del
   pedido» en carrito, botón del acordeón en el pedido) se viste en
   components/_cart-summary.scss y pages/_checkout.scss.

   Consumen esta rejilla: checkout/cart.tpl, checkout/checkout.tpl y
   checkout/order-confirmation.tpl. Lo específico de cada página sigue en
   pages/_cart.scss, _checkout.scss y _order-confirmation.scss. */
body#cart,
body#checkout,
body#order-confirmation {
  /* Wrappers del tema transparentes: el proceso pone su propio fondo. */
}
body#cart #wrapper,
body#cart #content-wrapper,
body#cart #main,
body#cart .page-content,
body#checkout #wrapper,
body#checkout #content-wrapper,
body#checkout #main,
body#checkout .page-content,
body#order-confirmation #wrapper,
body#order-confirmation #content-wrapper,
body#order-confirmation #main,
body#order-confirmation .page-content {
  background: transparent;
  box-shadow: none;
}
body#cart .columns-container.container,
body#checkout .columns-container.container,
body#order-confirmation .columns-container.container {
  max-width: var(--gh-cat-rail);
  padding-left: var(--gh-space-24);
  padding-right: var(--gh-space-24);
}

.gh-process {
  display: grid;
  /* Misma partición que categoría/carrito: menú 2.8 · contenido 7.4 · resumen 3.3 */
  grid-template-columns: 2.8fr 7.4fr 3.3fr;
  gap: var(--gh-space-6);
  padding-top: 44px;
  padding-bottom: var(--gh-space-16);
}

/* Confirmación: sin columna de resumen. MISMAS pistas que la rejilla de 3
   (el menú cae idéntico al píxel en todo el proceso); el contenido abarca
   las columnas 2-3 con su hueco. */
.gh-process--wide .gh-process__content {
  grid-column: 2/4;
}

.gh-process__sidebar {
  min-width: 0;
}

.gh-process__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gh-space-5);
}

.gh-process__aside {
  min-width: 0;
}

.gh-process__aside-wrapper {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: var(--gh-space-5);
}

/* ─── Responsive (fase 2 · hoy el build lo aplana) ─────────────────── */
/* ─── Breadcrumb · global (toda la web) ────────────────────────────────────
   El tema base pinta los enlaces del breadcrumb con el color de enlace de
   Bootstrap (azul). La marca usa verde para los enlaces, así que recoloreamos
   los del breadcrumb al verde de Global Heating. El último ítem (página actual)
   es un <span>, no un enlace, y conserva su color de texto por defecto. */
.breadcrumb-link {
  color: var(--gh-green-800);
}

.breadcrumb-link:hover,
.breadcrumb-link:focus {
  color: var(--gh-green-900);
}

/* El breadcrumb vive al final del <main>, encima del footer (ver
   layout-both-columns). El tema base solo le da `margin-bottom`; añadimos aire
   superior para separarlo del contenido de la página. */
.breadcrumb__wrapper {
  margin-top: var(--gh-space-10);
}

.gh-discover-panel {
  height: 0;
  overflow: hidden;
  background: var(--gh-white);
  transition: height var(--gh-duration-slower) var(--gh-ease-in-out);
}

.gh-discover-panel.is-open {
  border-top: 1px solid var(--gh-grey-200);
  box-shadow: var(--gh-shadow-sm);
}

/* ─── HERO / BANNER ───────────────────────────────────────────────── */
.gh-hero {
  padding: var(--gh-space-12) 0 var(--gh-space-6);
  background: linear-gradient(180deg, var(--gh-grey-50) 0%, var(--gh-white) 100%);
}

.gh-hero__wrapper {
  max-width: var(--gh-container);
  margin: 0 auto;
  padding: 0 var(--gh-space-8);
}

.gh-hero__slider-wrap {
  border-radius: var(--gh-radius-2xl);
  overflow: hidden;
  box-shadow: var(--gh-shadow-xl);
}

/* ─── HERO LAYERED · Slider de fondo + NEXT solapado ──────────────── */
.gh-hero--layered {
  /* el card NEXT sobresale media altura por debajo del slider:
     este padding inferior reserva el hueco para esa mitad + la distancia
     hasta el bloque siguiente ("solo primeras marcas…") */
  padding: 0 0 140px;
  background: var(--gh-white);
}

.gh-hero--layered .gh-hero__wrapper {
  max-width: none;
  padding: 0;
}

.gh-hero__stage {
  position: relative;
  border-radius: 0;
  overflow: visible; /* el card NEXT sobresale por debajo del slider */
  box-shadow: none;
  isolation: isolate;
  min-height: clamp(420px, calc(55vh / var(--gh-zoom, 1)), 550px);
  background: var(--gh-white); /* el área que crece bajo el slider (al expandir) es blanca */
}

.gh-hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* banda de altura FIJA del slider: no se estira cuando el card se expande */
  height: clamp(420px, calc(55vh / var(--gh-zoom, 1)), 550px);
  z-index: 0;
  overflow: hidden; /* el slider se recorta aquí (el stage ya no) */
  border-radius: inherit;
}

.gh-hero__bg .ps-imageslider,
.gh-hero__bg #ps_imageslider,
.gh-hero__bg .carousel-inner,
.gh-hero__bg .carousel-item,
.gh-hero__bg .ps-imageslider__figure,
.gh-hero__bg .ps-imageslider__link {
  height: 100% !important;
}

.gh-hero__bg .carousel,
.gh-hero__bg .carousel-inner {
  height: 100%;
}

.gh-hero__bg .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Imagen de fondo ESTÁTICA del hero (categorías). La banda del hero se ajusta a
   la altura real de la imagen (ver body#category, abajo), así que cover la
   muestra a tamaño real (sin ampliar) llenando la banda. */
.gh-hero__bg-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* En categorías, la banda del hero toma la altura de la imagen de fondo. La
   imagen es @2x (3100×226 px → 113 px en pantalla), así que la banda va a 113px.
   La HOME mantiene su hero alto (clamp 420–550px). */
/* La franja muestra la FILA DE MARCAS (mismo diseño que "Descubrir"). El ALTO de
   la banda lo da la propia fila de tarjetas; la imagen beige (uniforme) la
   rellena de fondo. Sin tarjeta NEXT → sin saliente ni velo. */
body#category .gh-hero__stage {
  min-height: 0;
}

body#category .gh-hero__foreground {
  min-height: 0;
  align-items: center;
}

body#category .gh-hero__bg {
  height: 100%;
} /* el beige llena la banda */
body#category .gh-hero__bg-veil {
  display: none;
} /* beige limpio para las tarjetas */
.gh-hero__bg .carousel-indicators {
  position: absolute;
  bottom: var(--gh-space-5);
  left: 0;
  right: 0;
  z-index: 3;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.gh-hero__bg .carousel-indicators button {
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.4);
  border: 0;
  opacity: 1;
  transition: width var(--gh-duration-base) var(--gh-ease-out), background var(--gh-duration-base) var(--gh-ease-out);
}

.gh-hero__bg .carousel-indicators button.active {
  width: 48px;
  background: var(--gh-white);
}

.gh-hero__bg .carousel-control-prev,
.gh-hero__bg .carousel-control-next {
  z-index: 3;
  width: 56px;
  opacity: 0;
  transition: opacity var(--gh-duration-base) var(--gh-ease-out);
}

.gh-hero__stage:hover .carousel-control-prev,
.gh-hero__stage:hover .carousel-control-next {
  opacity: 0.85;
}

/* Velo oscuro sobre el slider para legibilidad de NEXT */
.gh-hero__bg-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(70% 60% at 50% 50%, rgba(10, 16, 30, 0.35) 0%, rgba(10, 16, 30, 0.65) 70%, rgba(10, 16, 30, 0.78) 100%), linear-gradient(135deg, rgba(15, 61, 46, 0.25) 0%, transparent 50%, rgba(30, 58, 138, 0.25) 100%);
}

.gh-hero__foreground {
  position: relative;
  z-index: 4;
  /* altura según el contenido: al expandir el card, el stage crece y empuja
     hacia abajo lo que viene después (el slider, fijo arriba, no se mueve) */
  height: auto;
  min-height: clamp(420px, calc(55vh / var(--gh-zoom, 1)), 550px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gh-space-12) var(--gh-space-10);
}

/* Foreground: card pegada al borde inferior del slider */
.gh-hero__foreground {
  justify-content: center;
  align-items: flex-end;
  padding: 0 var(--gh-space-8);
}

/* El card NEXT queda a caballo del borde inferior del slider:
   mitad superior sobre el carrusel, mitad inferior por debajo */
.gh-hero__foreground .agnt-card {
  transform: translateY(50%);
}

/* Velo más sutil cuando la card es pequeña — la imagen se ve más */
.gh-hero__bg-veil {
  background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(10, 16, 30, 0.55) 100%);
}

/* En categorías el hero es una franja con la fila de marcas (sin saliente como
   la tarjeta NEXT), así que no necesita padding inferior reservado. */
body#category .gh-hero--layered {
  padding-bottom: 0;
}

/* <768 = móvil; en tablet el hero se ve como en desktop */
/* ─── SCROLL HORIZONTAL CATEGORÍAS ────────────────────────────────── */
.gh-cats {
  padding: var(--gh-space-10) 0 var(--gh-space-8);
  background: var(--gh-grey-50);
}

.gh-cats__container {
  max-width: var(--gh-container);
  margin: 0 auto;
  padding: 0 var(--gh-space-8);
}

.gh-cats__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--gh-space-10);
  gap: var(--gh-space-6);
}

.gh-section__eyebrow {
  font-family: var(--gh-font-body);
  font-size: var(--gh-text-xs);
  font-weight: 700;
  letter-spacing: var(--gh-tracking-widest);
  text-transform: uppercase;
  color: var(--gh-green-700);
  margin: 0 0 var(--gh-space-3);
}

.gh-section__title {
  font-family: var(--gh-font-display);
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: var(--gh-tracking-tighter);
  line-height: var(--gh-leading-tight);
  color: var(--gh-grey-900);
  margin: 0;
}

.gh-section__sub {
  font-size: var(--gh-text-lg);
  color: var(--gh-grey-600);
  margin: var(--gh-space-3) 0 0;
  max-width: 56ch;
}

.gh-cats__controls {
  display: flex;
  gap: var(--gh-space-2);
}

.gh-cats__arrow {
  width: 48px;
  height: 48px;
  border-radius: var(--gh-radius-full);
  background: var(--gh-white);
  border: 1px solid var(--gh-grey-200);
  cursor: pointer;
  color: var(--gh-grey-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--gh-duration-fast) var(--gh-ease-out);
  box-shadow: var(--gh-shadow-sm);
}

.gh-cats__arrow:hover {
  background: var(--gh-green-700);
  border-color: var(--gh-green-700);
  color: var(--gh-white);
  transform: translateY(-1px);
  box-shadow: var(--gh-shadow-md);
}

.gh-cats__scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: var(--gh-space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--gh-space-3);
  scrollbar-width: none;
}

.gh-cats__scroll::-webkit-scrollbar {
  display: none;
}

.gh-cat-card {
  scroll-snap-align: start;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 5/4;
  border-radius: var(--gh-radius-2xl);
  overflow: hidden;
  text-decoration: none;
  color: var(--gh-white);
  background: var(--gh-grey-900);
  box-shadow: var(--gh-shadow-md);
  transition: transform var(--gh-duration-base) var(--gh-ease-out), box-shadow var(--gh-duration-base) var(--gh-ease-out);
  isolation: isolate;
}

.gh-cat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gh-cat-color, linear-gradient(180deg, #2EA76F 0%, #0F3D2E 100%));
  z-index: -2;
}

.gh-cat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.65) 100%);
  z-index: -1;
}

.gh-cat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--gh-shadow-xl);
}

.gh-cat-card__body {
  padding: var(--gh-space-6);
}

.gh-cat-card__name {
  font-family: var(--gh-font-display);
  font-size: var(--gh-text-2xl);
  font-weight: 700;
  letter-spacing: var(--gh-tracking-tight);
  margin: 0 0 var(--gh-space-2);
}

.gh-cat-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--gh-text-sm);
  font-weight: 600;
  opacity: 0.85;
  transition: gap var(--gh-duration-base) var(--gh-ease-out), opacity var(--gh-duration-fast) var(--gh-ease-out);
}

.gh-cat-card:hover .gh-cat-card__cta {
  gap: 12px;
  opacity: 1;
}

/* ─── BARRA DE CONFIANZA · garantías operativas de la compra ─────────
   Envío · Atención · Garantía · Pago seguro.
   Estilo "suavizado": icono de línea verde, título sobrio, subtítulo
   gris, separadores muy finos, contenedor redondeado con sombra sutil.
   VERSIÓN DE PRUEBA — textos pendientes de confirmar por el negocio. */
/* ═══════════════════════════════════════════════════════════════════
   GH · Liquid glass · mixin de superficie de vidrio (sistema único)
   Una sola receta, consumida por el tema (y, vía tokens :root, por los
   módulos gh*). Tokens en _tokens.scss (--gh-glass-*). Incluye fallbacks:
   navegadores sin backdrop-filter y usuarios con prefers-reduced-transparency
   → superficie opaca legible.
   Uso:  @use '../components/glass' as glass;  ...  @include glass.surface;
   ═══════════════════════════════════════════════════════════════════ */
/* Título de página · "pestaña" enmarcada (categorías, contacto).
   Extraído de pages/_category.scss el 2026-07-19 para reutilizarlo. */
.gh-trust {
  background: var(--gh-white);
  padding: var(--gh-space-6) 0;
}

.gh-trust__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gh-space-8);
}

/* Es un <ul> usado como maqueta: sin el margen inferior que Bootstrap da a
   las listas (2026-08-23: descentraba los mensajes en la banda del carrito y
   la home dependía de él sin saberlo para su aire inferior). El aire lo da
   siempre el padding del bloque, nunca el margen de la lista. */
.gh-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  margin: 0;
  background: var(--gh-grey-50);
  border: 1px solid var(--gh-grey-200);
  border-radius: var(--gh-radius-2xl);
  box-shadow: var(--gh-shadow-sm);
  padding: var(--gh-space-4) var(--gh-space-3);
}

/* Cada ítem: icono a la izquierda + textos a la derecha */
.gh-trust__item {
  display: flex;
  align-items: center;
  gap: var(--gh-space-3);
  padding: var(--gh-space-2) var(--gh-space-4);
  position: relative;
}

/* Separador vertical fino entre ítems (no en el primero) */
.gh-trust__item + .gh-trust__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 64%;
  background: var(--gh-grey-200);
}

.gh-trust__icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--gh-radius-full);
  background: var(--gh-green-100);
  color: var(--gh-green-600);
}

.gh-trust__icon svg {
  width: 24px;
  height: 24px;
}

.gh-trust__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gh-trust__title {
  font-family: var(--gh-font-display);
  font-size: var(--gh-text-base);
  font-weight: 700;
  letter-spacing: var(--gh-tracking-tight);
  color: var(--gh-grey-900);
  margin: 0;
  line-height: var(--gh-leading-snug);
}

.gh-trust__text {
  font-size: var(--gh-text-sm);
  color: var(--gh-grey-500);
  margin: 0;
  line-height: var(--gh-leading-snug);
}

/* ─── Variante «rail» · proceso de compra (2026-08-23) ────────────────
   Panel VERTICAL en la columna izquierda de la rejilla .gh-process
   (carrito, pedido y confirmación). Historia del mismo día: los 4 mensajes
   nacieron inline en cart.tpl, pasaron a banda a sangre bajo la cabecera
   (variante --band) y por decisión del usuario acabaron aquí, ocupando el
   sitio del menú de marcas (que vuelve a ser solo de categorías). La banda
   --band ya no existe. La instancia (los 4 mensajes) vive en
   templates/checkout/_partials/gh-purchase-trust.tpl: un solo origen para
   las tres pantallas del proceso.
   Tarjeta de vidrio como las demás del proceso y pegajosa como el resumen
   (la columna se estira a la fila: el sticky tiene recorrido). */
.gh-trust--rail {
  background: var(--gh-glass-bg);
  -webkit-backdrop-filter: var(--gh-glass-blur);
  backdrop-filter: var(--gh-glass-blur);
  border: 1px solid var(--gh-glass-border);
  border-radius: var(--gh-radius-xl);
  box-shadow: var(--gh-shadow-sm), var(--gh-glass-hi);
  /* Sin soporte de backdrop-filter → claro casi opaco. */
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .gh-trust--rail {
    background: var(--gh-glass-bg-strong);
  }
}
.gh-trust--rail {
  /* El usuario pide menos transparencia → superficie sólida. */
}
@media (prefers-reduced-transparency: reduce) {
  .gh-trust--rail {
    background: var(--gh-white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.gh-trust--rail {
  position: sticky;
  top: 20px;
  padding: var(--gh-space-2) var(--gh-space-5);
}

.gh-trust--rail .gh-trust__container {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Pila vertical; sin caja propia (la pone la tarjeta del panel). El base
   centra las celdas (align-items:center, vertical en la home); en columna
   eso centraría en horizontal → filas a ancho completo con stretch. */
.gh-trust--rail .gh-trust__grid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.gh-trust--rail .gh-trust__item {
  padding: var(--gh-space-4) 0;
  gap: var(--gh-space-3);
}

/* Separador horizontal fino entre mensajes (el base lo dibuja vertical). */
.gh-trust--rail .gh-trust__item + .gh-trust__item::before {
  left: 0;
  right: 0;
  top: 0;
  transform: none;
  width: auto;
  height: 1px;
  background: var(--gh-grey-200);
}

.gh-trust--rail .gh-trust__icon {
  width: 38px;
  height: 38px;
}

.gh-trust--rail .gh-trust__icon svg {
  width: 20px;
  height: 20px;
}

.gh-trust--rail .gh-trust__title {
  font-size: var(--gh-text-base);
}

/* ─── Responsive ───────────────────────────────────────────────────── */
/* <768 = móvil; en tablet se mantienen los 4 ítems en fila como en desktop */
/* ─── VALORES · 4 bloques de color (Cantidad/Calidad/Precio/Garantía) ─ */
.gh-values {
  padding: var(--gh-space-12) 0 var(--gh-space-10);
  background: var(--gh-white);
}

.gh-values__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--gh-space-8);
}

.gh-values__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gh-space-5);
}

.gh-value {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--gh-space-4);
  min-height: 170px;
  padding: var(--gh-space-5) var(--gh-space-6);
  border-radius: var(--gh-radius-xl);
  color: var(--gh-white);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--gh-shadow-md);
  transition: transform var(--gh-duration-base) var(--gh-ease-out), box-shadow var(--gh-duration-base) var(--gh-ease-out);
}

/* Brillos sutiles superpuestos para profundidad tipo Apple */
.gh-value::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 100% 0%, rgba(255, 255, 255, 0.18) 0%, transparent 55%), radial-gradient(80% 60% at 0% 100%, rgba(0, 0, 0, 0.18) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
}

.gh-value::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.gh-value:hover {
  transform: translateY(-6px);
  box-shadow: var(--gh-shadow-xl);
}

/* 4 colores propios — paleta verde con saltos de luminosidad */
.gh-value--c1 {
  background: linear-gradient(160deg, #2EA76F 0%, #145A3F 100%);
}

.gh-value--c2 {
  background: linear-gradient(160deg, #1F6F4A 0%, #0F3D2E 100%);
}

.gh-value--c3 {
  background: linear-gradient(160deg, #5EBE91 0%, #1F6F4A 100%);
}

.gh-value--c4 {
  background: linear-gradient(160deg, #0F3D2E 0%, #062418 100%);
}

.gh-value__icon {
  width: 38px;
  height: 38px;
  border-radius: var(--gh-radius-md);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--gh-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gh-value__icon svg {
  width: 20px;
  height: 20px;
}

.gh-value__body {
  display: flex;
  flex-direction: column;
  gap: var(--gh-space-1);
}

.gh-value__title {
  font-family: var(--gh-font-display);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: var(--gh-tracking-tight);
  color: var(--gh-white);
  margin: 0;
  line-height: 1.1;
}

.gh-value__text {
  font-size: var(--gh-text-sm);
  color: rgba(255, 255, 255, 0.85);
  line-height: var(--gh-leading-normal);
  margin: 0;
  max-width: 32ch;
}

/* <768 = móvil; en tablet se mantiene el grid fijo de 4 como en desktop */
/* ─── CTA · Banda del H1 de la portada + botón (→ Estudio de mi hogar) ── */
.gh-cta-band {
  padding: 0 0 var(--gh-space-10);
  background: var(--gh-white);
}

.gh-cta-band__container {
  max-width: var(--gh-container);
  margin: 0 auto;
  padding: 0 var(--gh-space-8);
}

.gh-cta-band__heading {
  text-align: center;
  margin: 0 0 calc(var(--gh-space-10) * 1.6);
}

/* Modifiers · cuando el CTA se parte en dos por el bloque de Valores
   en medio. --heading queda encima de Valores (solo título), --cta
   queda debajo de Valores (solo botón). */
.gh-cta-band--heading {
  padding-bottom: 0;
}

.gh-cta-band--heading .gh-cta-band__heading {
  margin-bottom: var(--gh-space-8);
}

.gh-cta-band--cta {
  padding-top: var(--gh-space-8);
  padding-bottom: var(--gh-space-12);
}

.gh-cta-band--cta .gh-cta-band__heading {
  margin-bottom: 3.75rem; /* 60px · valor puntual fuera de escala, pedido de diseño */
}

/* Título a dos líneas: "Dile hola," / "a la nueva calefacción de tu hogar." */
.gh-cta-band--cta .gh-cta-band__title-main,
.gh-cta-band--cta .gh-cta-band__title-accent {
  display: block;
}

.gh-cta-band__title {
  display: inline-block;
  margin: 0;
  font-family: var(--gh-font-display);
  font-size: 1.95rem;
  font-weight: 600;
  letter-spacing: var(--gh-tracking-tight);
  line-height: 1.25;
  color: #0F3D2E;
}

.gh-cta-band__title-main {
  display: inline;
}

.gh-cta-band__title-accent {
  display: inline;
  font-weight: 700;
  background: linear-gradient(135deg, #2EA76F 0%, #0F3D2E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.gh-cta-band__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gh-space-6);
  width: 100%;
  /* space-7 no existe en la escala (salta 6→8): el shorthand quedaba inválido y
     el botón se renderizaba sin padding (bajo y con el texto pegado). */
  padding: var(--gh-space-4) var(--gh-space-10);
  /* Mismo verde que los accesos rápidos de la cabecera y los bloques de
     valores (token --gh-green-grad-soft · decisión 2026-08-22; antes
     135deg green-500 → green-900). */
  background: var(--gh-green-grad-soft);
  border-radius: var(--gh-radius-2xl);
  color: var(--gh-white);
  text-decoration: none;
  font-family: var(--gh-font-display);
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: var(--gh-tracking-tight);
  line-height: 1.15;
  box-shadow: var(--gh-shadow-md);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--gh-duration-base) var(--gh-ease-out), box-shadow var(--gh-duration-base) var(--gh-ease-out);
}

.gh-cta-band__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 100% 0%, rgba(255, 255, 255, 0.18) 0%, transparent 55%), radial-gradient(80% 60% at 0% 100%, rgba(0, 0, 0, 0.18) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
}

.gh-cta-band__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.gh-cta-band__btn:hover,
.gh-cta-band__btn:focus {
  transform: translateY(-3px);
  box-shadow: var(--gh-shadow-xl);
  color: var(--gh-white);
  outline: none;
}

.gh-cta-band__text {
  /* Texto CENTRADO en el botón (2026-08-22): ocupa el hueco y se le da a la
     izquierda el mismo espacio que ocupa la flecha a la derecha (52px + gap),
     así su centro coincide con el centro del botón. */
  flex: 1;
  text-align: center;
  padding-left: calc(52px + var(--gh-space-6));
}

.gh-cta-band__arrow {
  flex: 0 0 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: transform var(--gh-duration-base) var(--gh-ease-out);
}

.gh-cta-band__btn:hover .gh-cta-band__arrow,
.gh-cta-band__btn:focus .gh-cta-band__arrow {
  transform: translateX(4px);
}
/* ─── MARCAS + PRODUCTOS ─────────────────────────────────────────── */
.gh-brands {
  padding: var(--gh-space-10) 0 var(--gh-space-16);
  background: var(--gh-white);
}

.gh-brands__container {
  max-width: var(--gh-container);
  margin: 0 auto;
  padding: 0 var(--gh-space-8);
}

.gh-brands__head {
  margin-bottom: var(--gh-space-12);
  max-width: 720px;
}

.gh-brands__layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--gh-space-12);
  align-items: flex-start;
}

/* <768 = móvil; en tablet se mantiene sidebar + contenido como en desktop */
.gh-brands__sidebar {
  /* Estático: se mueve al unísono con los bloques de la derecha al hacer scroll
     (antes era sticky y se quedaba fijo mientras el contenido bajaba). */
  position: static;
  padding: var(--gh-space-6);
  background: var(--gh-grey-50);
  border-radius: var(--gh-radius-2xl);
  border: 1px solid var(--gh-grey-200);
}

.gh-brands__sidebar-title {
  font-family: var(--gh-font-body);
  font-size: var(--gh-text-xs);
  font-weight: 700;
  letter-spacing: var(--gh-tracking-widest);
  text-transform: uppercase;
  color: var(--gh-grey-500);
  margin: 0 0 var(--gh-space-4);
  padding-bottom: var(--gh-space-3);
  border-bottom: 1px solid var(--gh-grey-200);
}

.gh-brand-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--gh-space-3) var(--gh-space-4);
  background: transparent;
  border: 0;
  border-radius: var(--gh-radius-md);
  font-family: var(--gh-font-body);
  font-size: var(--gh-text-sm);
  font-weight: 500;
  color: var(--gh-grey-700);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: all var(--gh-duration-fast) var(--gh-ease-out);
}

.gh-brand-item + .gh-brand-item {
  margin-top: 2px;
}

.gh-brand-item:hover {
  background: var(--gh-white);
  color: var(--gh-green-800);
  box-shadow: var(--gh-shadow-xs);
}

.gh-brand-item--active {
  background: var(--gh-green-100);
  color: var(--gh-green-900);
  font-weight: 600;
}

.gh-brand-item__count {
  font-size: var(--gh-text-xs);
  color: var(--gh-grey-500);
  font-weight: 500;
}

.gh-brand-item--active .gh-brand-item__count {
  color: var(--gh-green-700);
}

/* ════════════════════════════════════════════════════════════════════
   GH · Bloque de confianza de producto (.gh-ptrust)
   Grid de 4 señales (envío · entrega · garantía · pago) + fila de pago.
   Markup: templates/catalog/_partials/gh-product-trust.tpl (compartido
   por la vista rápida y la ficha de producto).
   ════════════════════════════════════════════════════════════════════ */
.gh-ptrust {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.gh-ptrust__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1.2rem;
  margin-bottom: 1rem;
}

.gh-ptrust__item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  line-height: 1.3;
}
.gh-ptrust__item strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: #1a2b22;
}
.gh-ptrust__item span {
  display: block;
  font-size: 0.8rem;
  color: #6b7a72;
}

.gh-ptrust__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--gh-green-500);
}

/* ── Fila de métodos de pago ─────────────────────────────────────── */
.gh-ptrust__pay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.gh-ptrust__pay-icon {
  width: 14px;
  height: 14px;
  color: #9aa8a0;
  flex-shrink: 0;
}

.gh-ptrust__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
}

.gh-ptrust__badge--visa {
  background: #1A1F71;
  color: #fff;
  font-style: italic;
  letter-spacing: 0.06em;
}

.gh-ptrust__badge--mc {
  background: #fff;
  border-color: #e0e0e0;
  padding: 0 6px;
  gap: 0;
}
.gh-ptrust__badge--mc .gh-ptrust__mc-left,
.gh-ptrust__badge--mc .gh-ptrust__mc-right {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
.gh-ptrust__badge--mc .gh-ptrust__mc-left {
  background: #EB001B;
}
.gh-ptrust__badge--mc .gh-ptrust__mc-right {
  background: #F79E1B;
  margin-left: -5px;
}

.gh-ptrust__badge--bizum {
  background: #00d2b0;
  color: #fff;
  font-weight: 700;
}

.gh-ptrust__badge--sant {
  background: #EC0000;
  color: #fff;
  font-weight: 700;
}

/* Medidas del hero como tokens de página. */
body.page-category,
body.page-product {
  --gh-cat-hero-img-h: 320px;
  --gh-cat-hero-band-h: 44px;
}

/* A sangre (full-bleed) al lienzo: rompe el rail del contenedor y ocupa el
   ancho de la página (mixin compartido · _mixins.scss). */
.gh-cat-hero {
  width: max(calc(100vw / var(--gh-zoom, 1)), var(--gh-container));
  max-width: none;
  margin-left: calc(50% - max(calc(50vw / var(--gh-zoom, 1)), var(--gh-container) / 2));
  margin-right: calc(50% - max(calc(50vw / var(--gh-zoom, 1)), var(--gh-container) / 2));
}

.gh-cat-hero__img {
  display: block;
  width: 100%;
  height: var(--gh-cat-hero-img-h);
  object-fit: cover;
}

/* Banda gris bajo el hero · texto centrado (envío gratis · entrega). */
.gh-cat-hero__band {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  min-height: var(--gh-cat-hero-band-h);
  gap: var(--gh-space-3);
  margin: 0;
  padding: var(--gh-space-3) var(--gh-space-4);
  background: var(--gh-grey-100);
  color: var(--gh-grey-700);
  font-size: var(--gh-text-xs);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-align: center;
}

/* Separador · palito vertical entre cada par de mensajes. */
.gh-cat-hero__band > span + span::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-right: var(--gh-space-3);
  background: var(--gh-grey-400);
  vertical-align: -0.15em;
}

/* Separación entre el hero y el contenido que le sigue (menú, bloque central
   y lanzadores arrancan aquí, alineados entre sí). */
body.page-category .gh-cat-hero + .columns-container,
body.page-product .gh-cat-hero + .columns-container {
  margin-top: var(--gh-space-8);
}

:root {
  --gh-launcher-h: 108px;
}

.gh-launcher-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gh-launcher-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: var(--gh-launcher-h);
  padding: 20px 12px;
  color: #fff;
  border: 0;
  border-radius: var(--gh-radius-xl);
  cursor: pointer;
  text-align: center;
  transition: box-shadow var(--gh-duration-base) var(--gh-ease-out), transform 0.06s ease;
}

.gh-launcher-btn:active {
  transform: translateY(1px);
}

.gh-launcher-btn__icon {
  width: 26px;
  height: 26px;
}

.gh-launcher-btn__label {
  font-family: var(--gh-font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.1;
}

.gh-launcher-btn__hint {
  font-size: 11.5px;
  line-height: 1.25;
  opacity: 0.92;
}

.gh-launcher-btn--next {
  background: var(--gh-ai-grad);
  box-shadow: 0 12px 30px rgba(123, 95, 175, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.gh-launcher-btn--next:hover {
  box-shadow: 0 16px 40px rgba(123, 95, 175, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.gh-launcher-btn--consulta {
  padding-block: 19px;
  color: #5B3E96;
  background: var(--gh-white, #fff);
  border: 1px solid rgba(155, 114, 203, 0.55);
  box-shadow: 0 10px 26px rgba(123, 95, 175, 0.16);
}

.gh-launcher-btn--consulta:hover {
  border-color: #9B72CB;
  box-shadow: 0 14px 34px rgba(123, 95, 175, 0.28);
}

.gh-launcher-btn--guardados {
  padding-block: 19px;
  background: linear-gradient(120deg, rgba(66, 133, 244, 0.26) 0%, rgba(155, 114, 203, 0.22) 50%, rgba(232, 97, 140, 0.2) 100%), linear-gradient(160deg, var(--gh-grey-400) 0%, var(--gh-grey-500) 100%);
  border: 1px solid rgba(155, 114, 203, 0.45);
  box-shadow: 0 10px 26px rgba(80, 80, 96, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.gh-launcher-btn--guardados:hover {
  border-color: rgba(155, 114, 203, 0.8);
  box-shadow: 0 14px 34px rgba(123, 95, 175, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.gh-seg-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.gh-seg-row > :nth-child(2) {
  justify-self: center;
}
.gh-seg-row > :nth-child(3) {
  justify-self: end;
}

.gh-ask {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gh-ask__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: var(--gh-font-body);
  font-size: var(--gh-text-sm);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  border-radius: var(--gh-radius-full);
  cursor: pointer;
  transition: box-shadow 0.15s var(--gh-ease-out), border-color 0.15s var(--gh-ease-out);
}
.gh-ask__btn svg {
  flex: none;
}

.gh-ask__btn--next {
  color: #fff;
  background: var(--gh-ai-grad);
  border: 0;
  box-shadow: 0 8px 22px rgba(123, 95, 175, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.gh-ask__btn--next:hover {
  box-shadow: 0 12px 30px rgba(123, 95, 175, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.gh-ask__btn--consulta {
  color: #5B3E96;
  background: var(--gh-white, #fff);
  border: 1px solid rgba(155, 114, 203, 0.55);
  box-shadow: 0 6px 18px rgba(123, 95, 175, 0.14);
}
.gh-ask__btn--consulta:hover {
  border-color: #9B72CB;
  box-shadow: 0 10px 26px rgba(123, 95, 175, 0.26);
}

.gh-ask__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(155, 114, 203, 0.3);
}

:root {
  --gh-drawer-w: 720px;
  --gh-drawer-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

.gh-drawer__overlay {
  position: fixed;
  inset: 0;
  z-index: var(--gh-z-overlay);
  background: rgba(15, 23, 32, 0.46);
  opacity: 0;
  transition: opacity 0.3s var(--gh-drawer-ease);
}

.gh-drawer__overlay--open {
  opacity: 1;
}

.gh-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: var(--gh-z-drawer);
  display: flex;
  flex-direction: column;
  width: var(--gh-drawer-w);
  max-width: calc(92vw / var(--gh-zoom, 1)); /* overlay anclado a la ventana: tope a la ventana, no al lienzo */
  height: 100%;
  background: var(--gh-white);
  box-shadow: -18px 0 48px rgba(15, 23, 32, 0.18);
  transform: translateX(100%);
  transition: transform 0.32s var(--gh-drawer-ease);
}

.gh-drawer--open {
  transform: translateX(0);
}

.gh-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: 0 0 auto;
  padding: 20px 24px;
  border-bottom: 1px solid var(--gh-grey-200);
}

.gh-drawer__title {
  margin: 0;
  font-family: var(--gh-font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--gh-green-900);
}

.gh-drawer__close {
  flex: 0 0 auto;
  padding: 0;
  width: 36px;
  height: 36px;
  font-size: 26px;
  line-height: 1;
  color: var(--gh-grey-500);
  background: none;
  border: 0;
  border-radius: var(--gh-radius-full);
  cursor: pointer;
  transition: color 0.2s var(--gh-drawer-ease), background 0.2s var(--gh-drawer-ease);
}

.gh-drawer__close:hover {
  color: var(--gh-green-900);
  background: rgba(15, 23, 32, 0.06);
}

.gh-drawer__body {
  flex: 1 1 auto;
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.gh-drawer--wide {
  --gh-drawer-w: 900px;
}

.gh-drawer--flush .gh-drawer__body {
  padding: 0;
}

body.gh-drawer-open {
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════════
   GH · Cajón «Mis guardados» (categorías) · _partials/gh-guardados-drawer.tpl
   El cajón es --wide --flush (el estudio pone sus propios márgenes); aquí
   van la sección desplegable del estudio y el margen del bloque de
   guardados. Las filas de gamas/productos las estiliza ghguardados.css.
   ════════════════════════════════════════════════════════════════════ */
.gh-saved__estudio {
  border-bottom: 1px solid var(--gh-grey-200);
}

.gh-saved__summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 56px 18px 24px;
  position: relative;
  list-style: none;
  cursor: pointer;
  background: var(--gh-grey-50);
}
.gh-saved__summary::-webkit-details-marker {
  display: none;
}
.gh-saved__summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 26px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--gh-grey-500);
  border-bottom: 2px solid var(--gh-grey-500);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--gh-duration-base, 0.2s);
}
.gh-saved__summary:hover {
  background: var(--gh-grey-100);
}

.gh-saved__estudio[open] > .gh-saved__summary::after {
  transform: translateY(-30%) rotate(-135deg);
}

.gh-saved__summary-title {
  font-size: var(--gh-text-base);
  font-weight: 700;
  color: var(--gh-grey-900);
}

.gh-saved__summary-hint {
  font-size: var(--gh-text-sm);
  color: var(--gh-grey-500);
}

.gh-saved__block {
  padding: 24px;
}

#footer .footer__main-top {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  column-gap: var(--gh-space-24);
  align-items: start;
}
#footer .footer__main-top > .footer-block {
  width: auto;
}
#footer .footer__main-top > .ps-linklist {
  grid-row: span 2;
}
#footer .footer__main-top > .ps-customeraccountlinks,
#footer .footer__main-top > .ps-contactinfo {
  grid-column: 3;
}

#footer .copyright {
  font-size: var(--gh-text-xs);
}

#footer .ps-contactinfo__online {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gh-space-2);
  margin-bottom: 1rem;
}

#footer .ps-contactinfo__action {
  display: flex;
  align-items: center;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
#footer .ps-contactinfo__action i {
  margin-right: 0.5rem;
  font-size: 1.125rem;
}
#footer .ps-contactinfo__action:hover {
  text-decoration: underline;
}

/* ─── OCULTAR TOPBAR Y BLOQUES DEMO ───────────────────────────────── */
.gh-hide-default-header .header-top,
.gh-hide-default-header .header-bottom,
.gh-hide-default-header .header-nav-full-width,
.gh-hide-default-header #_desktop_top_menu {
  display: none !important;
}

.page-content--home > .elementor-section,
.page-content--home > #home-banner,
.page-content--home > #home-content {
  /* Por si hay módulos default los dejamos visibles */
}

/* ─── RESPONSIVE GENERAL ──────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════════
   GH · Lienzo fijo (CONVENTIONS.md §4 · decisión 2026-08-20, completada
   2026-08-22): la web se maqueta SIEMPRE al ancho del raíl del sitio
   (--gh-container, _tokens.scss) y se ve ENTERA a lo ancho en cualquier
   pantalla: nada se recoloca, solo cambia la escala.

   Cómo se garantiza, por capa:
   · Dispositivos → meta viewport width=<lienzo> sin initial-scale (head.tpl):
     el navegador encaja el lienzo al ancho de la pantalla.
   · Escritorio → assets/js/gh-canvas.js escala `body` con zoom cuando la
     ventana es más estrecha que el lienzo y, con ratón, como mucho a
     --gh-desktop-scale (tamaño de lectura, _tokens.scss); nunca amplía.
     Sin soporte de zoom, body{min-width} deja scroll horizontal (el layout
     no cambia). La escala va en BODY y no en HTML para que
     documentElement.clientWidth siga midiendo la ventana real; por eso el
     min-width también vive en body.
   · CSS → el build aplana toda media query de anchura contra el lienzo
     (tools/flatten-css.mjs, que lee --gh-container) y las fuentes no maquetan
     con `vw` (solo los overlays anclados a la ventana lo usan como tope).
   Los elementos `position: fixed` (sidebar, FAB, cajones, modales) se anclan
   a la ventana, comportamiento estándar de una web de ancho fijo.
   ════════════════════════════════════════════════════════════════════ */
html {
  /* Barra vertical siempre reservada: el ancho disponible (clientWidth) no
     oscila al aparecer/desaparecer la barra y la escala de gh-canvas.js es
     estable. */
  overflow-y: scroll;
}

body {
  min-width: var(--gh-container);
}

/* La cabecera mide el lienzo, no la ventana: el padre (layer ps-base,
   prestashop/layout/_header.scss) le pone `max-width: 100vw` a .header como
   seguridad de móvil; en ventanas más estrechas que el lienzo encogía la
   cabecera (botones de cliente en 3 filas, buscador, carrito) mientras el
   resto de la página se mantenía. La cabecera va en flujo (el child la deja
   `static` en pages/_category.scss) y se desplaza con el documento. */
.header {
  max-width: none;
}

/* ════════════════════════════════════════════════════════════════════
   GH · Tarjeta de producto (miniatura del catálogo) · receta compartida.
   Extraída de pages/_category.scss el 2026-08-24 al reutilizarla el bloque
   cross-selling del carrito (ps_crossselling · hook displayShoppingCartFooter).
   Ámbitos: las reglas genéricas aplican a toda miniatura; las que llevaban
   body.page-category pasan a :is(body.page-category, .gh-crosssell) —
   misma especificidad, así la cascada de categoría no cambia.
   La maqueta de cada página (rejilla, título de sección) vive en su
   pages/_*.scss; aquí SOLO la ficha.
   ════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════════
   GH · Botón "Añadir al carrito" en tarjeta de producto
   ════════════════════════════════════════════════════════════════════════ */
.product-miniature__form {
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end; /* botón alineado a la derecha */
}

.gh-btn-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 66%; /* 2/3 del ancho de la tarjeta */
  padding: 10px 16px;
  font-family: var(--gh-font-body, inherit);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: #ffffff;
  background: linear-gradient(180deg, var(--gh-green-600) 0%, var(--gh-green-700) 100%); /* verde bosque = carrito */
  border: 1px solid var(--gh-green-700);
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
  box-shadow: none;
}

.gh-btn-cart:hover,
.gh-btn-cart:focus {
  background: linear-gradient(180deg, var(--gh-green-700) 0%, var(--gh-green-800) 100%); /* más oscuro al hover */
  border-color: var(--gh-green-800);
  color: #ffffff;
  outline: none;
}

.gh-btn-cart:active {
  background: var(--gh-green-900);
  border-color: var(--gh-green-900);
}

.gh-btn-cart i.material-icons {
  font-size: 18px;
  line-height: 1;
}

.gh-btn-cart .product-miniature__add-text {
  display: inline-block;
}

/* Quantity-button oculto pero presente en el DOM para que el JS lo lea */
.gh-qty-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
  padding: 0;
  border: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   GH · Tarjeta de producto · formato antiguo
   imagen → nombre → precio centrado → [Añadir al carrito] + [Ver]
   ════════════════════════════════════════════════════════════════════════ */
.product-miniature__title {
  display: block;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.35;
  min-height: 2.7em;
  margin: 10px 0 8px;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-miniature__title:hover {
  color: var(--gh-green-700);
}

/* Precio en una fila: original tachado a la izquierda + precio con descuento
   en verde al lado. (Si no hay descuento, solo se muestra el precio en verde.) */
.product-miniature__prices {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: 8px;
  row-gap: 2px;
  margin: 6px 0 14px;
  text-align: center;
}

.product-miniature__price {
  order: 2; /* precio con descuento · a la derecha */
  font-size: 19px;
  font-weight: 700;
  color: var(--gh-green-700); /* verde · precio rebajado */
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.product-miniature__discount-price {
  order: 1; /* precio original · a la izquierda */
  display: flex;
  justify-content: center;
}

.product-miniature__regular-price {
  font-size: 19px; /* mismo tamaño que el precio sin tachar */
  font-weight: 400;
  color: #94a3b8;
  text-decoration: line-through;
}

/* Acciones · dos botones en la MISMA FILA, lado a lado */
.product-miniature__actions {
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: stretch;
  margin-top: 6px;
}

.product-miniature__form {
  display: block;
  flex: 1 1 65%; /* el botón Añadir ocupa ~65% */
  min-width: 0;
  order: 2; /* Añadir al carrito · a la derecha */
}

.gh-btn-cart {
  width: 100% !important; /* dentro del form */
}

/* Botón "Ver" · ~35% del ancho, outline sobrio */
.gh-btn-view {
  flex: 1 1 35%;
  order: 1; /* Ver · a la izquierda (antes que Añadir) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.gh-btn-view:hover,
.gh-btn-view:focus {
  background: var(--gh-green-100);
  border-color: var(--gh-green-500);
  color: var(--gh-green-800);
  outline: none;
}

/* ════════════════════════════════════════════════════════════════════════
   GH · Tarjeta de producto · RÉPLICA EXACTA del tema 1.6 ("Nutrition")
   Valores tomados de theme_881 (global.css/product_list.css):
     · marco  → border 1px #d9d9d9, esquinas rectas, padding 30/20/19, sin sombra
     · imagen → home_default 200px, centrada arriba
     · botón "Añadir" → verde lima #85ca18→#74b40f, hover NARANJA #f85d25→#ff5214
     · botón "Ver"    → gris con relieve, degradado blanco→#f9f9f9, texto #333
   Provisional para validar el look · luego se adapta a la paleta de marca.
   Acotado a páginas de categoría; sobrescribe el diseño anterior.
   ════════════════════════════════════════════════════════════════════════ */
/* Marco de la card · glass frosted (sin backdrop-filter por card: rendimiento;
   la aurora IA de la página da el matiz a través de la translucidez). */
:is(body.page-category, .gh-crosssell) .product-miniature__inner {
  border: 1px solid var(--gh-glass-border);
  border-radius: var(--gh-radius-lg);
  background: rgba(255, 255, 255, 0.6);
  padding: 22px 18px 18px;
  box-shadow: var(--gh-shadow-md), var(--gh-glass-hi);
  transition: transform var(--gh-duration-base) var(--gh-ease-out), box-shadow var(--gh-duration-base) var(--gh-ease-out), border-color var(--gh-duration-base) var(--gh-ease-out);
}

:is(body.page-category, .gh-crosssell) .product-miniature:hover .product-miniature__inner {
  transform: translateY(-4px);
  box-shadow: var(--gh-shadow-xl), var(--gh-glass-hi);
  border-color: rgba(155, 114, 203, 0.5);
}

/* Anula el zoom de la imagen al hover (viene del tema padre): el efecto lo da
   el lift de la card, la imagen se queda quieta. */
:is(body.page-category, .gh-crosssell) .product-miniature__inner:hover .product-miniature__image,
:is(body.page-category, .gh-crosssell) .product-miniature:hover .product-miniature__image {
  transform: none;
}

/* Imagen ~200px, centrada arriba */
:is(body.page-category, .gh-crosssell) .product-miniature__top {
  text-align: center;
}

:is(body.page-category, .gh-crosssell) .product-miniature__top img {
  display: block;
  max-width: 200px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Botón "Añadir al carrito" · verde sólido de marca, como el CTA de la
   ficha de producto (pages/_product.scss). Antes degradado IA. */
:is(body.page-category, .gh-crosssell) .gh-btn-cart {
  font-family: var(--gh-font-body);
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--gh-radius-md);
  color: #ffffff;
  background: var(--gh-green-600);
  border: 0;
  box-shadow: 0 6px 16px rgba(37, 135, 89, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: background var(--gh-duration-fast) var(--gh-ease-out), box-shadow var(--gh-duration-base) var(--gh-ease-out), transform 0.05s ease;
}

:is(body.page-category, .gh-crosssell) .gh-btn-cart:hover,
:is(body.page-category, .gh-crosssell) .gh-btn-cart:focus {
  background: var(--gh-green-700);
  box-shadow: 0 10px 24px rgba(37, 135, 89, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

:is(body.page-category, .gh-crosssell) .gh-btn-cart:active {
  transform: translateY(1px);
}

/* Botón "Ver" · glass neutro (secundario, no compite con el CTA). */
:is(body.page-category, .gh-crosssell) .gh-btn-view {
  font-family: var(--gh-font-body);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--gh-radius-md);
  color: var(--gh-grey-700);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--gh-glass-border);
  box-shadow: var(--gh-glass-hi);
  transition: background var(--gh-duration-fast) var(--gh-ease-out), border-color var(--gh-duration-fast) var(--gh-ease-out), color var(--gh-duration-fast) var(--gh-ease-out);
}

:is(body.page-category, .gh-crosssell) .gh-btn-view:hover,
:is(body.page-category, .gh-crosssell) .gh-btn-view:focus {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(155, 114, 203, 0.4);
  color: var(--gh-grey-900);
}

/* Como en la 1.6: "Añadir al carrito" MÁS ANCHO que "Ver" (no 50/50).
   Anchos explícitos (anulamos el width:100% del form heredado de iteraciones
   previas, que impedía que la proporción se viera). Añadir ~64% · Ver ~36%. */
:is(body.page-category, .gh-crosssell) .product-miniature__actions {
  flex-wrap: nowrap;
}

:is(body.page-category, .gh-crosssell) .product-miniature__form {
  flex: 0 0 64%;
  width: 64%;
  max-width: 64%;
}

:is(body.page-category, .gh-crosssell) .gh-btn-view {
  flex: 0 0 calc(36% - 6px);
  width: calc(36% - 6px);
  max-width: calc(36% - 6px);
}

:is(body.page-category, .gh-crosssell) .gh-btn-cart i.material-icons {
  display: none;
}

:is(body.page-category, .gh-crosssell) .gh-btn-cart,
:is(body.page-category, .gh-crosssell) .gh-btn-view {
  width: auto;
  text-align: center;
  justify-content: center;
  line-height: 16px;
}

/* ─── PÁGINA DE CATEGORÍA · sidebar a la izquierda (orden natural) ───── */
/* NOTA · El banner hero (foto a sangre) NO vive aquí: es un componente
   compartido con la ficha de producto → components/_cat-hero.scss +
   _partials/gh-cat-hero.tpl. Va encima de las tres columnas y el contenido
   arranca DEBAJO, en flujo normal (meter la foto en la rejilla con el menú
   subiendo hasta la navegación se probó el 2026-10-11 y se revirtió). */
/* ─── 3 columnas · menú · contenido · lanzador NEXT (solo categoría) ────
   Desktop: rail más ancho (~1712) para que menú+contenido conserven su tamaño
   y la 3ª columna estrecha. Grid: --gh-side-col (menú, mismo ancho que los
   accesos rápidos de la cabecera, 2026-10-11) · 9fr · 1.7fr. */
body.page-category .columns-container.gh-cat-3col {
    max-width: var(--gh-cat-rail);
  }
body.page-category .gh-cat-3col > .row {
    display: grid;
    grid-template-columns: var(--gh-side-col) 9fr 1.7fr;
    gap: var(--gh-space-6);
    margin-left: 0;
    margin-right: 0;
  }
body.page-category .gh-cat-3col > .row > #left-column,
  body.page-category .gh-cat-3col > .row > #center-column,
  body.page-category .gh-cat-3col > .row > #right-column {
    width: auto;
    max-width: none;
    flex: none;
    padding-left: 0;
    padding-right: 0;
  }
/* Espejo · set «Catálogo por producto» (_ghMenuRightCats): lanzador de
     consulta a la izquierda (columna estrecha) y menú/filtros a la derecha. */
body.page-category .gh-cat-3col--mirror > .row {
    grid-template-columns: 1.7fr 9fr var(--gh-side-col);
  }
/* El menú lateral sube sobre la foto, hasta ~2/5 de su altura (2026-10-11,
     petición del usuario; se probaron 0.65, 0.6 y 0.5; queda en 0.4);
     contenido y lanzadores siguen debajo. Desde el 2026-10-24 vuelve la
     banda de envío bajo la foto: se resta su altura para que el menú siga
     arrancando en el mismo punto de la foto (pasa por encima de la banda;
     su texto va centrado y queda visible). Normal: menú = #left-column;
     espejo: #right-column. */
body.page-category .gh-cat-hero + .gh-cat-3col:not(.gh-cat-3col--mirror) > .row > #left-column,
  body.page-category .gh-cat-hero + .gh-cat-3col--mirror > .row > #right-column {
    position: relative;
    z-index: 1;
    margin-top: calc(-0.4 * var(--gh-cat-hero-img-h) - var(--gh-cat-hero-band-h) - var(--gh-space-8));
  }
/* Sobre la foto el vidrio del menú (ghbrandsmenu: 50% blanco + blur) la
     dejaba transparentar; aquí se vuelve opaco con el tono que ese vidrio da
     sobre el fondo de la página (50% blanco sobre grey-50), para que el menú
     se vea igual encima de la foto que debajo. */
body.page-category .gh-cat-hero + .gh-cat-3col .gh-bmenu {
    background: color-mix(in srgb, var(--gh-white) 50%, var(--gh-grey-50));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
.gh-launcher-col {
    min-width: 0;
  }
/* Los botones de la columna estrecha (consulta + estudio de hogar) viven en
   components/_launchers.scss: los comparten esta página y las fichas. */
/* ─── Liquid glass · fondo aurora sutil + filtros en vidrio ────────────
   Solo en la página de categoría. El menú (módulo ghbrandsmenu) ya es glass;
   esto le da fondo con color para que refracte y pone los filtros a juego. */
body.page-category {
  background: var(--gh-aurora);
}

body.page-category #search_filters {
  background: var(--gh-glass-bg);
  -webkit-backdrop-filter: var(--gh-glass-blur);
  backdrop-filter: var(--gh-glass-blur);
  border: 1px solid var(--gh-glass-border);
  border-radius: var(--gh-radius-lg);
  box-shadow: var(--gh-shadow-lg), var(--gh-glass-hi);
  /* Sin soporte de backdrop-filter → claro casi opaco. */
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.page-category #search_filters {
    background: var(--gh-glass-bg-strong);
  }
}
body.page-category #search_filters {
  /* El usuario pide menos transparencia → superficie sólida. */
}
@media (prefers-reduced-transparency: reduce) {
  body.page-category #search_filters {
    background: var(--gh-white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
body.page-category #search_filters {
  position: relative;
  padding: 16px 16px;
  margin-bottom: 16px;
}

/* Acento IA · barra de degradado arriba (firma del estudio / NEXT). */
body.page-category #search_filters::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gh-ai-grad);
  border-radius: var(--gh-radius-lg) var(--gh-radius-lg) 0 0;
}

body.page-category #search_filters .facet {
  border-top: 1px solid rgba(15, 61, 46, 0.08);
  margin-top: 12px;
  padding-top: 12px;
}

body.page-category #search_filters .facet:first-of-type {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

/* ─── Título de categoría · estilo enmarcado tipo "pestaña" ────────
   Receta compartida en components/_glass.scss (title-tab). */
body.page-category .page-title-section,
body.page-category h1.page-title-section {
  display: block;
  font-family: "Roboto", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--gh-grey-900);
  padding: 10px 18px;
  margin: 0 0 24px 0;
  border: 1px solid var(--gh-glass-border);
  border-radius: var(--gh-radius-lg);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: var(--gh-shadow-sm), var(--gh-glass-hi);
}

body.page-category .category__header {
  margin-bottom: 0;
}

/* Barra del título: ancla del corazón «guardar gama» (ghguardados,
   .ghg-heart--title), a la derecha dentro de la pestaña del título. */
.category__titlebar {
  position: relative;
}

/* Descripción de categoría · texto a 14px (--gh-text-sm) en vez del 16px que
   heredaría del body. Más cercano al cuerpo de texto de la tienda 1.6 (13px). */
.category__description {
  font-size: var(--gh-text-sm);
}

/* Títulos que el admin escribe en la descripción (editor del BO): sin esta
   regla heredaban el h2/h3 genérico del tema (24px, casi negro) y chocaban
   con el texto de 14px. Van como un titular de texto — verde de marca, en
   negrita, apenas mayores que el cuerpo — igual que el «Campaña …» que otras
   categorías ya escriben en verde a mano. */
.category__description h2,
.category__description h3 {
  margin: var(--gh-space-5) 0 var(--gh-space-2);
  font-family: var(--gh-font-body);
  font-weight: 700;
  line-height: 1.4;
  color: var(--gh-green-600);
}

.category__description h2 {
  font-size: var(--gh-text-base);
}

.category__description h3 {
  font-size: var(--gh-text-sm);
}

.category__description > h2:first-child,
.category__description > h3:first-child {
  margin-top: 0;
}

/* La tarjeta de producto (marco, imagen, botones «Ver»/«Añadir al carrito»)
   vive en components/_product-card.scss desde el 2026-08-24: la comparten
   esta página y el bloque cross-selling del carrito (.gh-crosssell). */
/* ── Header NO sticky · se va con el scroll ──────────────────────── */
#header.header,
.js-sticky-header {
  position: static !important;
  top: auto !important;
}

/* Categorías full-width (83 y landings 99–106): el ancho completo lo gestiona
   el layout del child (templates/layouts/layout-left-column.tpl, lista
   _ghFullWidthCats), no CSS por id de body. Un único mecanismo. */
/* ─── Rail y rejilla de la página de categoría ─────────────────────────────
   Rail único: TODAS las categorías (con menú lateral o full-width) comparten el
   mismo ancho --gh-cat-rail, centrado. Sobrescribe el max-width que Bootstrap da
   a .container (1320) en las full-width, que antes quedaban más anchas que las
   de menú. margin-top da el aire respecto al header (el breadcrumb ya no va
   arriba en ninguna página: vive al final del <main>, encima del footer). */
body.page-category .columns-container {
  margin-top: var(--gh-space-8);
  max-width: var(--gh-cat-rail);
  /* Mismo padding lateral que la cabecera (--gh-space-24) para que los bordes del
     contenido de categoría alineen con la banda útil de la cabecera: el borde
     izquierdo con los 3 botones y el derecho con el bloque del carrito (ambas a
     rail 1500). Si se cambia el inset de la cabecera, igualar aquí. */
  padding-left: var(--gh-space-24);
  padding-right: var(--gh-space-24);
}

/* ── Subcategorías sin foto · recuadro en blanco ─────────────────────
   El placeholder hereda el tamaño/redondeo de .subcategory__thumbnail
   (cuadrado de 2.5–3rem); aquí solo le damos fondo blanco y un borde
   sutil para que se vea como hueco de imagen pendiente. */
.subcategory__thumbnail--empty {
  flex: 0 0 auto;
  background: var(--gh-white, #fff);
  border: 1px solid var(--gh-grey-200, #e5e5e5);
}

/* ─── Categorías premium · Hero title bajo la imagen ────────────── */
.gh-cat-hero-title {
  text-align: center;
  margin: var(--gh-space-9) 0 var(--gh-space-8);
}

.gh-cat-hero-title__text {
  display: inline-block;
  margin: 0;
  font-family: var(--gh-font-display);
  font-size: 3.4rem;
  font-weight: 700;
  letter-spacing: var(--gh-tracking-tight);
  line-height: 1.15;
  color: #0F3D2E;
}

/* ════════════════════════════════════════════════════════════════════
   GH · FICHA DE PRODUCTO · zona de compra equilibrada e identidad verde
   Scope: body.page-product (la vista rápida usa su propio scope
   .page-product--quickview y no se ve afectada: aquí se ancla todo a
   .product__container / .product__bottom, que solo existen en la ficha).
   ════════════════════════════════════════════════════════════════════ */
/* ── Mini-breadcrumb · píldora flotante bajo la banda del hero ────────
   Fila propia alineada al rail del contenido (.container), no a sangre
   como la banda. El margen negativo la hace "flotar" sobre la costura
   banda→página; z-index para que la sombra no quede recortada. */
body.page-product .gh-product-crumb {
  position: relative;
  z-index: 2;
  margin-top: -1.05rem;
}

body.page-product .gh-product-crumb__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1.1rem 0.45rem 0.8rem;
  background: #fff;
  border: 1px solid var(--gh-grey-200, #e5e5e5);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
  color: var(--gh-green-700);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

body.page-product .gh-product-crumb__link:hover {
  color: var(--gh-green-800);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
  transform: translateY(-1px);
}

body.page-product .gh-product-crumb__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* La píldora se interpone entre el hero y las columnas: el selector adyacente
   de _category.scss (hero + columns-container) deja de aplicar; se restituye
   aquí la separación con el contenido. */
body.page-product .gh-product-crumb + .columns-container {
  margin-top: var(--gh-space-6, 2rem);
}

/* ── Columnas de compra · galería contenida (izq) / info rica (dcha) ──
   El padre da 55% a la galería y deja la columna de compra anémica;
   se equilibra a 44/56 y se alinean arriba. */
body.page-product .product__container {
  grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
  gap: var(--gh-space-8, 3rem);
  align-items: start;
}

/* Galería: marco sutil y altura contenida (la imagen ya no domina la página). */
body.page-product .product__carousel {
  border: 1px solid var(--gh-grey-200, #e5e5e5);
  border-radius: 12px;
  background: #fff;
  padding: var(--gh-space-4, 1rem);
}

body.page-product .product__carousel .carousel-item img {
  width: 100%;
  max-height: 440px;
  object-fit: contain;
}

/* ── Marca (enlace bajo el título) · verde GH en vez del azul del tema ── */
body.page-product .product__manufacturer a {
  color: var(--gh-green-700);
  font-weight: 600;
  text-decoration: none;
}

body.page-product .product__manufacturer a:hover {
  color: var(--gh-green-800);
  text-decoration: underline;
}

/* ── Precios · verde de marca (igual que grid y vista rápida) ───────── */
body.page-product .product__price {
  color: var(--gh-green-700);
  font-weight: 700;
}

body.page-product .product__regular-price {
  color: var(--gh-grey-500, #737373);
}

/* El % de descuento venía en azul Bootstrap (text-primary-emphasis). */
body.page-product .product__discount-percentage,
body.page-product .product__discount-amount {
  color: var(--gh-green-600) !important; /* text-primary-emphasis es !important en Bootstrap utilities; único modo de ganar sin tocar el partial del padre */
}

/* ── CTA "Añadir al carrito" · verde sólido de marca (antes azul) ───── */
body.page-product .product__add-to-cart-button.btn {
  background-color: var(--gh-green-600);
  border-color: var(--gh-green-600);
  color: #fff;
  font-weight: 600;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

body.page-product .product__add-to-cart-button.btn:hover,
body.page-product .product__add-to-cart-button.btn:focus,
body.page-product .product__add-to-cart-button.btn:focus-visible,
body.page-product .product__add-to-cart-button.btn:active {
  background-color: var(--gh-green-700);
  border-color: var(--gh-green-700);
  color: #fff;
}

body.page-product .product__add-to-cart-button.btn:focus-visible {
  box-shadow: var(--gh-shadow-glow-green);
}

/* ── Descripción corta · aire y tono ────────────────────────────────── */
body.page-product .product__description-short {
  margin-top: var(--gh-space-3, 0.75rem);
  color: var(--gh-grey-700, #404040);
  line-height: 1.55;
}

/* ── Compartir · secundario, no compite con la compra ───────────────── */
body.page-product .product__additional-info {
  margin-top: var(--gh-space-3, 0.75rem);
  font-size: 0.85rem;
  color: var(--gh-grey-500, #737373);
}

/* ── Parte inferior · una sola columna ──────────────────────────────
   El child vacía el hook displayReassurance (placeholders sin configurar;
   las señales reales viven junto al CTA). El wrapper .product__bottom-right
   queda vacío en plantilla: se colapsa y el acordeón ocupa todo el ancho. */
body.page-product .product__bottom {
  grid-template-columns: minmax(0, 1fr);
}

body.page-product .product__bottom-right {
  display: none;
}

/* ── Acordeón (Descripción · Detalles · Ficha técnica) · acento GH ──── */
body.page-product .product__accordion .accordion-button {
  color: var(--gh-grey-800, #262626);
  font-weight: 600;
}

body.page-product .product__accordion .accordion-button:not(.collapsed) {
  color: var(--gh-green-700);
  background-color: var(--gh-green-50, #f4faf7);
  box-shadow: inset 0 -1px 0 var(--gh-grey-200, #e5e5e5);
}

body.page-product .product__accordion .accordion-button:focus {
  border-color: var(--gh-green-300);
  box-shadow: var(--gh-shadow-glow-green);
}

/* ─── PÁGINAS CMS · tipografía limpia para textos legales/informativos ────
   Aplica a páginas como Política de privacidad, Aviso legal, Términos, etc.
   Columna estrecha (~820px) para una lectura cómoda, jerarquía clara con la
   tipografía del sistema y tabla con estilo de marca. Scoped a body#cms. */
/* Título de la página (h1 que pinta el tema desde meta_title) */
body#cms .page-header {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--gh-space-12) var(--gh-space-6) 0;
}

body#cms .page-title-section {
  font-family: var(--gh-font-display);
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: var(--gh-tracking-tight);
  line-height: var(--gh-leading-tight);
  color: var(--gh-green-900);
  margin: 0 0 var(--gh-space-8);
  padding-bottom: var(--gh-space-5);
  border-bottom: 1px solid var(--gh-grey-200);
}

/* Cuerpo del contenido */
.page-content--cms.rich-text {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--gh-space-6) var(--gh-space-20);
  font-family: var(--gh-font-body);
  font-size: var(--gh-text-lg); /* ~18px, lectura cómoda */
  line-height: var(--gh-leading-relaxed);
  color: var(--gh-grey-800);
}

/* Encabezados internos */
.page-content--cms h2 {
  font-family: var(--gh-font-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: var(--gh-tracking-tight);
  line-height: var(--gh-leading-snug);
  color: var(--gh-grey-900);
  margin: var(--gh-space-12) 0 var(--gh-space-4);
}

.page-content--cms h3 {
  font-family: var(--gh-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gh-grey-900);
  margin: var(--gh-space-8) 0 var(--gh-space-3);
}

.page-content--cms > h2:first-child,
.page-content--cms > h3:first-child {
  margin-top: 0;
}

/* Párrafos, listas y énfasis */
.page-content--cms p {
  margin: 0 0 var(--gh-space-5);
}

.page-content--cms ul,
.page-content--cms ol {
  margin: 0 0 var(--gh-space-5);
  padding-left: var(--gh-space-6);
}

.page-content--cms li {
  margin-bottom: var(--gh-space-2);
}

.page-content--cms strong {
  color: var(--gh-grey-900);
  font-weight: 600;
}

/* Enlaces */
.page-content--cms a {
  color: var(--gh-green-700);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--gh-duration-fast) var(--gh-ease-out);
}

.page-content--cms a:hover {
  color: var(--gh-green-900);
}

/* Tablas (p. ej. finalidades + base jurídica) */
.page-content--cms table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--gh-space-2) 0 var(--gh-space-6);
  font-size: var(--gh-text-base);
}

.page-content--cms th,
.page-content--cms td {
  text-align: left;
  padding: var(--gh-space-3) var(--gh-space-4);
  border: 1px solid var(--gh-grey-200);
  vertical-align: top;
}

.page-content--cms thead th {
  background: var(--gh-green-50);
  color: var(--gh-green-900);
  font-family: var(--gh-font-display);
  font-weight: 700;
}

.page-content--cms tbody tr:nth-child(even) {
  background: var(--gh-grey-50);
}

/* Móvil */
/* ════════════════════════════════════════════════════════════════════
   GH · CMS "Mundo Calefacción" (id_cms 15) · página Sobre nosotros
   Estilos scoped bajo .mc-about. Viven en el tema (NO en el contenido del
   CMS) para que el editor del back-office no los borre al guardar. El CMS
   solo lleva el HTML (divs con clases .mc-*).
   ════════════════════════════════════════════════════════════════════ */
.mc-about {
  --mc-ink:#0f172a;
  --mc-slate:#475569;
  --mc-line:#e2e8f0;
  --mc-bg:#f1f5f9;
  --mc-green:#16855a;
  --mc-green-soft:#e7f4ee;
  --mc-dark:#0f172a;
  /* verde para TEXTO pequeño (eyebrows 13px): #16855a da 4,23:1 sobre --mc-bg, por
     debajo de AA (4,5). Este tono da 4,87:1 sobre gris y 5,34:1 sobre blanco. */
  --mc-green-ink:#137a52;
  font-family: "Inter", "Roboto", system-ui, -apple-system, sans-serif;
  color: var(--mc-ink);
  line-height: 1.6;
  /* full-bleed al lienzo, rompiendo el contenedor del tema (mixin compartido) */
  width: max(calc(100vw / var(--gh-zoom, 1)), var(--gh-container));
  max-width: none;
  margin-left: calc(50% - max(calc(50vw / var(--gh-zoom, 1)), var(--gh-container) / 2));
  margin-right: calc(50% - max(calc(50vw / var(--gh-zoom, 1)), var(--gh-container) / 2));
  overflow-x: hidden;
}

.mc-about * {
  box-sizing: border-box;
}

/* Solo en esta página CMS (body.cms-id-15): quitamos el hueco superior del
   wrapper para que la imagen hero quede pegada al menú superior, igual que el
   carrusel de la home (a sangre). El título nativo no se pinta: la CMS trae su
   propio H1 y cms/page.tpl omite el del tema (SEO 2026-08-22). */
body.cms-id-15 .wrapper {
  padding-top: 0;
}

body.cms-id-15 .page-content--cms {
  margin-top: 0;
  padding-top: 0;
}

.mc-about .mc-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

.mc-about .mc-sec {
  padding: 96px 0;
}

.mc-about .mc-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-green-ink);
  margin: 0 0 18px;
}

.mc-about h1, .mc-about h2, .mc-about h3 {
  letter-spacing: -0.02em;
  color: var(--mc-ink);
  margin: 0;
}

/* Tipografía EXPLÍCITA (antes dependía de la cascada de _cms.scss, que pone
   --gh-font-display en h2/h3 de .page-content--cms): títulos h2/h3 en Manrope,
   h1 y texto en Inter. Inter solo se carga en 400–700 (Google Fonts), así que
   los pesos 800 de Inter se declaran 700, que es lo que ya se pintaba. */
.mc-about .mc-h2,
.mc-about .mc-card h3,
.mc-about .mc-darkcard h3 {
  font-family: var(--gh-font-display);
}

.mc-about .mc-h1 {
  font-size: 60px;
  font-weight: 700;
  line-height: 1.05;
  max-width: 18ch;
}

/* Hero centrado · con poca separación respecto a la imagen de arriba */
.mc-about .mc-hero {
  text-align: center;
  padding-top: 40px;
}

.mc-about .mc-hero .mc-h1,
.mc-about .mc-hero .mc-lead {
  margin-left: auto;
  margin-right: auto;
}

.mc-about .mc-hero .mc-btns {
  justify-content: center;
}

.mc-about .mc-lead {
  font-size: 20px;
  color: var(--mc-slate);
  max-width: 42rem;
  margin: 26px 0 0;
}

.mc-about .mc-lead--sm {
  font-size: 18px;
}

.mc-about .mc-underline {
  color: var(--mc-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--mc-green);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.mc-about .mc-h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.15;
}

.mc-about .mc-btns {
  margin-top: 38px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.mc-about .mc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 13px 26px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.mc-about .mc-btn-dark {
  background: var(--mc-dark);
  color: #fff;
}

.mc-about .mc-btn-dark:hover {
  background: #1e293b;
}

.mc-about .mc-btn-ghost {
  border: 1px solid var(--mc-line);
  color: #334155;
}

.mc-about .mc-btn-ghost:hover {
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

/* Imagen hero a todo el ancho de la pantalla.
   Cubrimos tanto el caso con <figure class="mc-hero-img"> como la imagen suelta
   colgando directamente de .mc-about (el editor del BO suele quitar el <figure>). */
.mc-about .mc-hero-img {
  margin: 0;
}

.mc-about .mc-hero-img img,
.mc-about > img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* Pilares */
.mc-about .mc-pillars {
  background: var(--mc-bg);
  border-top: 1px solid var(--mc-line);
  border-bottom: 1px solid var(--mc-line);
}

.mc-about .mc-pillars-eyebrow {
  text-align: center;
}

.mc-about .mc-pillars-title {
  text-align: center;
  max-width: 24ch;
  margin: 0 auto 48px;
  font-size: 60px;
  font-weight: 800;
  line-height: 1.05;
}

.mc-about .mc-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.mc-about .mc-card {
  background: #fff;
  border: 1px solid var(--mc-line);
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  transition: box-shadow 0.2s ease;
}

.mc-about .mc-card:hover {
  box-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.18);
}

.mc-about .mc-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--mc-green-soft);
  color: var(--mc-green);
}

.mc-about .mc-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 22px 0 10px;
}

.mc-about .mc-card p {
  margin: 0;
  color: var(--mc-slate);
}

/* Autoridad */
.mc-about .mc-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.mc-about .mc-check {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mc-about .mc-check li {
  display: flex;
  gap: 12px;
  color: #334155;
}

.mc-about .mc-check svg {
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--mc-green);
}

.mc-about .mc-check b {
  color: var(--mc-ink);
}

.mc-about .mc-darkcard {
  background: var(--mc-dark);
  color: #fff;
  border-radius: 18px;
  padding: 40px;
}

.mc-about .mc-darkcard .mc-ic {
  background: rgba(255, 255, 255, 0.1);
  color: #4ade80;
}

.mc-about .mc-darkcard h3 {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  margin: 24px 0 0;
}

.mc-about .mc-darkcard p {
  color: #cbd5e1;
  margin: 16px 0 0;
}

.mc-about .mc-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 32px;
  padding-top: 32px;
}

.mc-about .mc-stats dt {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.mc-about .mc-stats dd {
  margin: 4px 0 0;
  font-size: 14px;
  color: #94a3b8;
}

/* Categorías (chips) · rejilla de 4 columnas · 8 chips = 2 filas.
   Tamaño de texto explícito (antes heredaba 18px de _cms.scss): a 16px las
   etiquetas largas («Calefacción exteriores») caben en una línea por columna. */
.mc-about .mc-cats {
  background: var(--mc-bg);
  border-top: 1px solid var(--mc-line);
}

.mc-about .mc-grid4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.mc-about .mc-tag {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--mc-line);
  border-radius: 14px;
  padding: 20px;
  text-decoration: none;
  color: var(--mc-ink);
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
  transition: all 0.2s ease;
}

.mc-about .mc-tag:hover {
  border-color: #cbd5e1;
  box-shadow: 0 10px 24px -14px rgba(15, 23, 42, 0.2);
}

.mc-about .mc-tag .mc-ic {
  width: 44px;
  height: 44px;
  background: #f1f5f9;
  color: #475569;
}

.mc-about .mc-tag:hover .mc-ic {
  background: var(--mc-green-soft);
  color: var(--mc-green);
}

/* CTA */
.mc-about .mc-cta {
  background: var(--mc-dark);
  text-align: center;
}

.mc-about .mc-cta h2 {
  color: #fff;
}

.mc-about .mc-cta p {
  color: #cbd5e1;
  max-width: 36rem;
  margin: 16px auto 0;
  font-size: 18px;
}

.mc-about .mc-cta .mc-btns {
  justify-content: center;
}

.mc-about .mc-btn-white {
  background: #fff;
  color: #0f172a;
}

.mc-about .mc-btn-white:hover {
  background: #f1f5f9;
}

.mc-about .mc-btn-outline {
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
}

.mc-about .mc-btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Responsive */
/* ════════════════════════════════════════════════════════════════════
   GH · CMS "Marcas y fabricantes" (id_cms 16) · Top marcas
   Estructura: imagen hero full-bleed → título → marquee de marcas (lo pinta
   el módulo ghbrands vía displayWrapperBottom, justo debajo del contenido).
   Estilos scoped bajo .mc-brands / body.cms-id-16; viven en el tema (NO en el
   contenido CMS) para que el editor del back-office no los borre al guardar.
   Mismo patrón full-bleed que .mc-about (CMS #15), con tipografía de marca.
   ════════════════════════════════════════════════════════════════════ */
/* Solo en esta CMS: quitamos el hueco superior del wrapper para que la imagen
   hero quede pegada al menú superior (a sangre, igual que en Mundo Calefacción
   #15). El título nativo no se pinta: la CMS trae su propio H1 y cms/page.tpl
   omite el del tema (SEO 2026-08-22). */
body.cms-id-16 .wrapper {
  padding-top: 0;
}

body.cms-id-16 .page-content--cms {
  margin-top: 0;
  padding-top: 0;
}

/* Y por abajo: el marquee de marcas (displayWrapperBottom) va justo después
   del contenido. Sin esto quedaban 152 px entre el párrafo y la banda:
   40 (margen del lead) + 80 (padding inferior de .page-content--cms, de
   _cms.scss) + 32 (padding inferior de #center-column, tema padre). Dejamos
   solo el margen del lead; el marquee ya aporta su propio aire interior. */
body.cms-id-16 .page-content--cms {
  padding-bottom: 0;
}

body.cms-id-16 #center-column {
  padding-bottom: 0;
}

.mc-brands {
  /* full-bleed al lienzo, rompiendo el contenedor del tema (mixin compartido) */
  width: max(calc(100vw / var(--gh-zoom, 1)), var(--gh-container));
  max-width: none;
  margin-left: calc(50% - max(calc(50vw / var(--gh-zoom, 1)), var(--gh-container) / 2));
  margin-right: calc(50% - max(calc(50vw / var(--gh-zoom, 1)), var(--gh-container) / 2));
  overflow-x: hidden;
}

.mc-brands * {
  box-sizing: border-box;
}

/* Imagen hero a todo el ancho. Cubrimos tanto <img> suelta (el editor del BO
   suele quitar envoltorios) como dentro de .mc-brands__media. */
.mc-brands__media {
  margin: 0;
}

.mc-brands__media img,
.mc-brands > img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* Título debajo de la imagen, homogéneo con los títulos CMS del sitio. */
.mc-brands__head {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gh-space-10);
  text-align: center;
}

/* Título y segunda línea comparten la MISMA tipografía (tamaño, peso, color) */
.mc-brands__title,
.mc-brands__subtitle {
  font-family: var(--gh-font-display);
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: var(--gh-tracking-tight);
  line-height: var(--gh-leading-tight);
  color: var(--gh-green-900);
}

.mc-brands__title {
  margin: var(--gh-space-12) 0 var(--gh-space-2);
}

.mc-brands__subtitle {
  margin: 0 0 var(--gh-space-6);
}

/* Párrafo introductorio bajo el título. text-wrap:balance equilibra el largo
   de las líneas para que el centrado se vea claramente (si no, las líneas
   largas llenan el ancho y parece alineado a la izquierda).
   Selector compuesto a propósito: `_cms.scss` declara `.page-content--cms p
   { margin: 0 0 … }` (0,1,1), que ganaba a `.mc-brands__lead` (0,1,0) y dejaba
   el bloque pegado a la izquierda (margin auto anulado). */
.mc-brands .mc-brands__lead {
  max-width: 40rem;
  margin: var(--gh-space-8) auto var(--gh-space-10);
  text-wrap: balance;
  font-family: var(--gh-font-body);
  font-size: var(--gh-text-lg);
  line-height: var(--gh-leading-relaxed);
  color: var(--gh-grey-800);
  text-align: center;
}
/* ════════════════════════════════════════════════════════════════════
   GH · CMS "Guía de compra" (id_cms 18)
   Reutiliza el sistema de diseño .mc-about (definido en
   _cms-mundo-calefaccion.scss) para los bloques apilados, igual que la #15:
   el contenido CMS envuelve todo en .mc-about y hereda secciones, pilares,
   tarjetas y banda CTA. Aquí SOLO van los ajustes propios de esta página.

   NOTA: al compartir .mc-about, los cambios en ese sistema afectan a #15 y #18.
   Si en el futuro la "Guía de compra" debe divergir visualmente, extraer el
   sistema a un parcial neutro reutilizable y separar las dos páginas.
   ════════════════════════════════════════════════════════════════════ */
/* Imagen hero pegada al menú: quitamos el hueco superior del wrapper (igual
   que en #15/#16). El título nativo no se pinta: la CMS trae su propio H1 y
   cms/page.tpl omite el del tema (SEO 2026-08-22). */
body.cms-id-18 .wrapper {
  padding-top: 0;
}

body.cms-id-18 .page-content--cms {
  margin-top: 0;
  padding-top: 0;
}

/* Título principal en verde de marca + tipografía display (como el título de
   #16), en lugar del azul-tinta del hero de #15. */
body.cms-id-18 .mc-about .mc-h1 {
  font-family: var(--gh-font-display);
  color: var(--gh-green-900);
}

/* Número de paso dentro del badge .mc-ic (bloque "Comprar bien en 3 pasos"). */
body.cms-id-18 .mc-about .mc-num {
  font-size: 20px;
  font-weight: 800;
}

/* Botones del bloque "Estudio de tu vivienda" (columna izquierda del grid2)
   centrados bajo el texto. */
body.cms-id-18 .mc-grid2 .mc-btns {
  justify-content: center;
}

/* ════════════════════════════════════════════════════════════════════
   GH · CMS "Estudio de mi vivienda" (id_cms 12)
   Página que ALOJA el configurador del módulo `ghestudiohogar`. Aquí solo va
   el "chrome" de la página (cosas FUERA de la salida del módulo):
     · hero a sangre, pegado bajo el menú (igual que #15/#16/#18), y
     · liberar el ancho del contenido CMS (capado a 820px para lectura) para
       que el configurador llegue al rail del header y alinee sus bordes.
   El UI del configurador (formulario, nav, hero img y su <h1>) vive en el
   módulo (.gh-estudio*) y se pinta FUERA de la prosa CMS (cms/page.tpl), así
   que los estilos de lectura de _cms.scss no lo alcanzan. El tema no pinta
   aquí su título: lo trae el módulo. Mecanismo de ancho idéntico al de la
   página de categoría.
   ════════════════════════════════════════════════════════════════════ */
/* Hero pegado al menú: sin el hueco superior del wrapper. La sección de texto
   CMS queda vacía (la página no tiene contenido propio) y no ocupa sitio. */
body.cms-id-12 .wrapper {
  padding-top: 0;
}

body.cms-id-12 .page-content--cms {
  margin-top: 0;
  padding-top: 0;
}

/* Liberar el ancho: soltamos el cap de lectura (820px) y el contenedor Bootstrap
   para que el módulo ocupe el ancho completo del documento. Así el configurador
   (que se autocentra al rail --gh-container con el padding del header) alinea con
   los 3 botones de la izquierda y el bloque del carrito, SIN recurrir a 100vw
   (que desalinearía por el ancho de la barra de scroll). */
body.cms-id-12 .columns-container.container {
  max-width: none;
  padding: 0;
}

body.cms-id-12 .page-content--cms.rich-text {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ════════════════════════════════════════════════════════════════════
   GH · CMS "Aconsejándote" (id_cms 14) · hub del asesoramiento
   Reutiliza el sistema .mc-about (definido en _cms-mundo-calefaccion.scss),
   igual que la #15 y la #18: hero a sangre → título → bloques apilados.
   Aquí SOLO van los ajustes propios de esta página.
   ════════════════════════════════════════════════════════════════════ */
/* Imagen hero pegada al menú: quitamos el hueco superior del wrapper (igual
   que en #15/#16/#18). El título nativo no se pinta: la CMS trae su propio H1
   y cms/page.tpl omite el del tema (SEO 2026-08-22). */
body.cms-id-14 .wrapper {
  padding-top: 0;
}

body.cms-id-14 .page-content--cms {
  margin-top: 0;
  padding-top: 0;
}

/* Título principal en verde de marca + tipografía display (como #16/#18). */
body.cms-id-14 .mc-about .mc-h1 {
  font-family: var(--gh-font-display);
  color: var(--gh-green-900);
}

/* Tarjetas «Cuatro formas de acertar»: llevan botón; el .mc-btns genérico
   trae margin-top 38px (pensado para el hero) → más ajustado dentro de una
   tarjeta, y la tarjeta es flex-column para que el botón quede alineado abajo
   aunque los textos tengan distinta longitud. */
body.cms-id-14 .mc-about .mc-card {
  display: flex;
  flex-direction: column;
}

body.cms-id-14 .mc-about .mc-card p {
  flex: 1 1 auto;
}

body.cms-id-14 .mc-about .mc-card .mc-btns {
  margin-top: 22px;
}

body.cms-id-14 .mc-about .mc-card .mc-btn {
  padding: 11px 20px;
  font-size: 13px;
}

/* La rejilla de 4 (.mc-grid4) trae margin-top 48px pensado para colgar de un
   bloque de texto (#15); aquí va justo debajo del .mc-pillars-title, que ya
   deja 48px → sin margen extra. */
body.cms-id-14 .mc-pillars .mc-grid4 {
  margin-top: 0;
}

/* La página termina en la banda oscura «Empieza a descubrir» (a sangre): fuera
   el aire inferior de .page-content--cms (80px, de _cms.scss) y de
   #center-column (32px, del padre) para que la banda llegue hasta el pie,
   igual que hace la #16 con su último bloque. */
body.cms-id-14 .page-content--cms {
  padding-bottom: 0;
}

body.cms-id-14 #center-column {
  padding-bottom: 0;
}

/* ════════════════════════════════════════════════════════════════════
   GH · Página «Mis guardados» (módulo ghguardados)
   Aquí solo va el "chrome" de la página (cosas FUERA de la salida del
   módulo): pegar el hero a sangre bajo el menú y liberar el ancho del
   contenedor. Mismo mecanismo que el CMS del estudio de hogar (#12).
   El UI de la página (.ghg-*) vive en el CSS del módulo.
   ════════════════════════════════════════════════════════════════════ */
/* Hero pegado al menú: el título nativo ya no se pinta (bloque vacío en la
   plantilla del módulo); solo queda quitar el hueco superior del wrapper. */
body#module-ghguardados-lista .wrapper {
  padding-top: 0;
}

/* Liberar el ancho del contenedor Bootstrap para que el hero llegue a sangre;
   el contenido (.ghg-page) se autocentra al raíl --gh-container. */
body#module-ghguardados-lista .columns-container.container {
  max-width: none;
  padding: 0;
}

body#module-ghguardados-lista .page-content--general {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   GH · Página de Contacto (#contactenos) · liquid glass
   Replica el lenguaje visual de "Estudio de mi hogar" (módulo
   ghestudiohogar): fondo aurora IA (azul→púrpura→rosa) con capa de blobs
   animada, superficies de vidrio esmerilado (backdrop-filter), campos y
   botón premium. Igual que ese módulo, es autosuficiente con tokens locales
   --ghc-* (no contamina el global) replicando la misma receta de vidrio.

   Estructura de la página (controlador contact, layout-full-width; el
   override contact.tpl maqueta sus propias columnas):
     · Título-pestaña.
     · Rejilla: columna estrecha con el recuadro de la foto y, debajo, las
       dos tarjetas de datos apiladas (.gh-cinfo, partial gh-contact-info.tpl,
       datos de la 1.6) · columna ancha con la tarjeta del formulario del
       módulo contactform (rediseño 2026-08-22).
   Todo scoped a body#contact / clases gh-* para no afectar a otras páginas.
   ═══════════════════════════════════════════════════════════════════ */
/* ─── Tokens locales (espejo del lenguaje glass del estudio) ───────── */
body#contact {
  --ghc-text: #0f172a;
  --ghc-muted: #5b6478;
  --ghc-accent: #9b72cb;
  --ghc-grad: linear-gradient(120deg, #4285f4 0%, #9b72cb 50%, #e8618c 100%);
  --ghc-grad-soft: linear-gradient(120deg, rgba(66, 133, 244, 0.14) 0%, rgba(155, 114, 203, 0.14) 50%, rgba(232, 97, 140, 0.14) 100%);
  --ghc-glass: rgba(255, 255, 255, 0.55);
  --ghc-glass-strong: rgba(255, 255, 255, 0.74);
  --ghc-glass-brd: rgba(255, 255, 255, 0.65);
  --ghc-glass-blur: saturate(180%) blur(22px);
  --ghc-hi: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --ghc-shadow: 0 14px 40px rgba(28, 30, 74, 0.12), 0 3px 10px rgba(28, 30, 74, 0.06);
  --ghc-ring: 0 0 0 4px rgba(155, 114, 203, 0.22);
  --ghc-radius: 22px;
  --ghc-radius-sm: 14px;
  --ghc-ease: cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  isolation: isolate;
  color: var(--ghc-text);
  /* Fondo blanco liso (la aurora + blobs animados se retiraron el 2026-07-19
     por decisión de diseño; el vidrio de las tarjetas se mantiene). */
  background: var(--gh-white, #fff);
}

/* Wrappers del tema transparentes para que la aurora atraviese ambas columnas. */
body#contact #wrapper,
body#contact #content-wrapper,
body#contact #content,
body#contact #main,
body#contact #center-column,
body#contact .page-content {
  background: transparent;
  box-shadow: none;
}

/* ─── Superficie de vidrio reutilizable (foto + tarjetas info + form) ── */
.gh-contact__figure,
.gh-cinfo__card,
.gh-contact__card {
  background: var(--ghc-glass);
  -webkit-backdrop-filter: var(--ghc-glass-blur);
  backdrop-filter: var(--ghc-glass-blur);
  border: 1px solid var(--ghc-glass-brd);
  border-radius: var(--ghc-radius);
  box-shadow: var(--ghc-shadow), var(--ghc-hi);
}

/* Fallback sin backdrop-filter → vidrio casi opaco legible. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .gh-cinfo__card,
  .gh-contact__card {
    background: var(--ghc-glass-strong);
  }
}
/* Accesibilidad · menos transparencia → superficie sólida. */
@media (prefers-reduced-transparency: reduce) {
  .gh-cinfo__card,
  .gh-contact__card {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
/* ─── Columna izquierda · panel de datos (.gh-cinfo) ─────────────────
   Partial propio _partials/gh-contact-info.tpl · datos de la 1.6.
   Dos tarjetas APILADAS bajo la foto (columna estrecha): clientes y
   profesionales/proveedores; la columna debe alojar el email más largo
   (administracion@mundocalefaccion.com) en una línea a 15px. */
.gh-cinfo {
  display: flex;
  flex-direction: column;
  gap: var(--gh-space-5, 20px);
}

.gh-cinfo__card {
  padding: 24px 22px;
}

.gh-cinfo__title {
  margin: 0 0 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  font-family: var(--gh-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ghc-text);
}

.gh-cinfo__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.55);
}

.gh-cinfo__item:first-of-type {
  border-top: 0;
}

.gh-cinfo__icon {
  flex: 0 0 auto;
  margin-top: 1px;
  font-size: 20px;
  color: var(--ghc-accent);
}

.gh-cinfo__icon--wa {
  display: inline-flex;
  color: #25d366; /* verde oficial WhatsApp */
}

.gh-cinfo__body {
  min-width: 0;
}

.gh-cinfo__link {
  font-size: 15px;
  font-weight: 600;
  color: var(--ghc-text);
  text-decoration: none;
  /* Sin word-break: los emails largos solo parten tras la @ (el <wbr>
     del partial); nada de cortes a media palabra. */
}

.gh-cinfo__link:hover {
  color: var(--ghc-accent);
  text-decoration: underline;
}

.gh-cinfo__notes {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ghc-muted);
}

.gh-cinfo__notes li {
  margin: 0 0 2px;
}

/* ─── Contenedor · alineado con el contenido de la cabecera ─────────
   El .container de Bootstrap capa a ~1320px; se ensancha al rail del
   sitio (--gh-container, 1712px) y se le da el MISMO padding lateral
   que .gh-header__container (--gh-space-24, 96px): el contenido queda
   alineado con los botones de la izquierda y el carrito del header. */
body#contact .columns-container.container {
  max-width: var(--gh-container, 1712px);
}

.gh-contact {
  padding: 0 var(--gh-space-24, 96px) var(--gh-space-16, 64px);
}
/* ─── Rejilla · foto + datos (izq, estrecha) · formulario (dcha, ancha) ──
   Columna izquierda: recuadro pequeño con la foto y, debajo, las dos
   tarjetas de datos apiladas. Columna derecha: el formulario, que ocupa
   las dos filas y conserva su ancho. */
.gh-contact__layout {
  display: grid;
  grid-template-columns: minmax(300px, 400px) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "media form" "info  form";
  gap: var(--gh-space-6, 24px);
  align-items: start;
}

.gh-contact__media {
  grid-area: media;
  min-width: 0;
}

.gh-contact__info {
  grid-area: info;
  min-width: 0;
}

.gh-contact__card {
  grid-area: form;
  min-width: 0;
}
/* ─── Recuadro con la foto · pequeño, encima de los datos ─────────────
   La foto es apaisada (1122×318): el recuadro fija un formato 16:9 y la
   recorta con object-fit, foco a la izquierda (la teleoperadora). */
.gh-contact__figure {
  margin: 0;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.gh-contact__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% center;
}

/* ─── Tarjeta de vidrio (envuelve el form del módulo) ──────────────── */
.gh-contact__card {
  padding: 26px 30px;
}

/* Cabecera de la página · título-pestaña encima de la rejilla. */
.gh-contact__head {
  margin: 0 0 22px;
  padding-top: var(--gh-space-8, 32px);
}

/* Mismo título "pestaña" que las categorías (mixin compartido). */
.gh-contact__title {
  display: block;
  font-family: "Roboto", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--gh-grey-900);
  padding: 10px 18px;
  margin: 0 0 24px 0;
  border: 1px solid var(--gh-glass-border);
  border-radius: var(--gh-radius-lg);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: var(--gh-shadow-sm), var(--gh-glass-hi);
  margin-bottom: 8px;
}

/* Título del bloque del formulario */
.gh-contact__formtitle {
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  font-family: var(--gh-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ghc-text);
}

/* ─── Asunto como pestañas segmentadas (radios estilizados) ─────────
   Cada pestaña es un contacto de PS con su buzón de destino. */
.gh-form-tabs {
  margin: 0;
  padding: 0;
  border: 0;
}

.gh-form-tabs__legend {
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ghc-muted);
}

.gh-form-tabs__group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gh-form-tabs__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.gh-form-tabs__label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ghc-muted);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--ghc-glass-brd);
  border-radius: var(--ghc-radius-sm);
  cursor: pointer;
  transition: color 0.18s var(--ghc-ease), background 0.18s var(--ghc-ease), border-color 0.18s var(--ghc-ease), box-shadow 0.18s var(--ghc-ease);
}

.gh-form-tabs__label:hover {
  color: var(--ghc-text);
}

.gh-form-tabs__radio:checked + .gh-form-tabs__label {
  color: var(--gh-green-800, #145a3f);
  background: var(--gh-green-100, #e8f5ee);
  border-color: var(--gh-green-300, #94d4b3);
}

.gh-form-tabs__radio:focus-visible + .gh-form-tabs__label {
  box-shadow: var(--ghc-ring);
}

/* ─── Consentimiento RGPD (módulo psgdpr) · checkbox + texto en fila ─ */
.gh-contact__card .gdpr-consent span {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.gh-contact__card .gdpr-consent input[type=checkbox] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--gh-green-700, #1f6f4a);
}

.gh-contact__card .gdpr-consent label.form-check-label {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ghc-muted);
}

/* El <section.login-form> del módulo va transparente: la tarjeta es la nuestra. */
.gh-contact__card .login-form {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

/* El módulo trae su propia cabecera ("Envíanos un mensaje"): se oculta para
   no duplicar el título — la cabecera visible es .gh-contact__head. */
.gh-contact__card .login-form > form > header {
  display: none;
}

/* ─── Campos del formulario ───────────────────────────────────────── */
.gh-contact__card .form-fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.gh-contact__card .form-fields label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
}

.gh-contact__card .form-fields label > span {
  font-size: 13px;
  font-weight: 600;
  color: var(--ghc-muted);
}

.gh-contact__card .form-fields input:not([type=checkbox]):not([type=radio]),
.gh-contact__card .form-fields select,
.gh-contact__card .form-fields textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--gh-font-body);
  font-size: 15px;
  color: var(--ghc-text);
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  box-shadow: inset 0 1px 2px rgba(28, 30, 74, 0.05);
  transition: border-color 0.15s var(--ghc-ease), box-shadow 0.15s var(--ghc-ease), background 0.15s var(--ghc-ease);
}

.gh-contact__card .form-fields textarea {
  min-height: 150px;
  resize: vertical;
}

/* Select · chevron propio (oculta el nativo). */
.gh-contact__card .form-fields select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-color: rgba(255, 255, 255, 0.55);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.gh-contact__card .form-fields input:focus,
.gh-contact__card .form-fields select:focus,
.gh-contact__card .form-fields textarea:focus {
  outline: none;
  border-color: rgba(155, 114, 203, 0.7);
  box-shadow: var(--ghc-ring), inset 0 1px 2px rgba(28, 30, 74, 0.05);
}

.gh-contact__card .form-fields input:focus,
.gh-contact__card .form-fields textarea:focus {
  background: rgba(255, 255, 255, 0.85);
}

.gh-contact__card .form-fields select:focus {
  background-color: rgba(255, 255, 255, 0.85);
}

/* ─── Botón de envío · gradiente IA tipo estudio ──────────────────── */
.gh-contact__card .form-footer {
  margin-top: 26px;
  display: flex;
  justify-content: flex-end;
}

.gh-contact__card .form-footer button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  font-family: var(--gh-font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  background: var(--ghc-grad);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(155, 114, 203, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: transform 0.15s var(--ghc-ease), box-shadow 0.15s var(--ghc-ease), filter 0.15s var(--ghc-ease);
}

.gh-contact__card .form-footer button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(155, 114, 203, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  filter: saturate(1.05);
}

.gh-contact__card .form-footer button:active {
  transform: translateY(0);
}

/* ─── Notificaciones (éxito / error) ──────────────────────────────── */
.gh-contact__card .notification {
  margin-bottom: 20px;
  padding: 14px 18px;
  border: 1px solid transparent;
  border-radius: 14px;
  font-size: 14px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.gh-contact__card .notification ul {
  margin: 0;
  padding-left: 18px;
}

.gh-contact__card .notification-success {
  background: rgba(46, 167, 111, 0.12);
  border-color: rgba(46, 167, 111, 0.35);
  color: #145a3f;
}

.gh-contact__card .notification-error {
  background: rgba(220, 38, 38, 0.1);
  border-color: rgba(220, 38, 38, 0.32);
  color: #b91c1c;
}

/* ─── Responsive ──────────────────────────────────────────────────── */
/* ─── MI CUENTA · área de cliente ─────────────────────────────────────
   Patrón (decisión 2026-10-11, sustituye a la rejilla sin menú del
   2026-07-19): DOS COLUMNAS en todo el área (customer/page.tpl) —
     · izquierda: menú lateral fijo (gh-account-menu.tpl);
     · derecha: la pantalla elegida. /mi-cuenta = «Resumen»: tarjetas de
       resumen (.gh-account__card, las pintan los
       módulos por displayGhAccountSummary; hoy ghmicuenta).
   Chrome compartido con contacto: título-pestaña + superficies de vidrio
   (components/_glass.scss) con acento verde marca. Las entradas del menú
   (core y módulos por displayCustomerAccount) comparten la clase
   .account-menu__link del padre y se visten aquí sin tocar los módulos. */
/* ─── Contenedor ───────────────────────────────────────────────────── */
.gh-account {
  max-width: var(--gh-container-xl);
  margin: 0 auto;
  padding: var(--gh-space-8) var(--gh-space-8) var(--gh-space-16);
}

.gh-account--with-menu {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: var(--gh-space-8);
  align-items: start;
}

.gh-account__main {
  min-width: 0;
}

/* Título de cada pantalla («Mi cuenta», «Direcciones»…) */
.gh-account .page-title-section {
  display: block;
  font-family: "Roboto", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--gh-grey-900);
  padding: 10px 18px;
  margin: 0 0 24px 0;
  border: 1px solid var(--gh-glass-border);
  border-radius: var(--gh-radius-lg);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: var(--gh-shadow-sm), var(--gh-glass-hi);
}

/* ─── Menú lateral ─────────────────────────────────────────────────── */
.gh-account__aside {
  background: var(--gh-glass-bg);
  -webkit-backdrop-filter: var(--gh-glass-blur);
  backdrop-filter: var(--gh-glass-blur);
  border: 1px solid var(--gh-glass-border);
  border-radius: var(--gh-radius-xl);
  box-shadow: var(--gh-shadow-sm), var(--gh-glass-hi);
  /* Sin soporte de backdrop-filter → claro casi opaco. */
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .gh-account__aside {
    background: var(--gh-glass-bg-strong);
  }
}
.gh-account__aside {
  /* El usuario pide menos transparencia → superficie sólida. */
}
@media (prefers-reduced-transparency: reduce) {
  .gh-account__aside {
    background: var(--gh-white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.gh-account__aside {
  position: sticky;
  top: var(--gh-space-6);
  padding: var(--gh-space-5) var(--gh-space-3);
}

.gh-account__aside-title {
  margin: 0 0 var(--gh-space-3);
  padding: 0 var(--gh-space-3);
  font-size: var(--gh-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gh-grey-500);
}

.gh-account__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gh-account__nav .account-menu__link {
  display: flex;
  align-items: center;
  gap: var(--gh-space-3);
  padding: 9px var(--gh-space-3);
  font-family: var(--gh-font-body);
  font-size: var(--gh-text-sm);
  font-weight: 600;
  color: var(--gh-grey-800);
  text-decoration: none;
  border-radius: var(--gh-radius-lg);
  transition: background 0.2s ease, color 0.2s ease;
}

.gh-account__nav .account-menu__link:hover {
  color: var(--gh-green-800);
  background: var(--gh-green-50);
  text-decoration: none;
}

.gh-account__nav .account-menu__link--active {
  color: var(--gh-green-800);
  background: var(--gh-green-50);
  box-shadow: inset 0 0 0 1px var(--gh-green-200);
}

.gh-account__nav .account-menu__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--gh-radius-md);
  font-size: 18px;
  color: var(--gh-green-700);
  background: var(--gh-green-100);
}

/* Cerrar sesión: separado del resto y en tono neutro */
.gh-account__nav .account-menu__link--signout {
  margin-top: var(--gh-space-3);
  padding-top: var(--gh-space-3);
  border-top: 1px solid var(--gh-grey-200);
  border-radius: 0 0 var(--gh-radius-lg) var(--gh-radius-lg);
  color: var(--gh-grey-600);
}

.gh-account__nav .account-menu__link--signout .account-menu__icon {
  color: var(--gh-grey-600);
  background: var(--gh-grey-100);
}

.gh-account__nav .account-menu__link--signout:hover {
  color: var(--gh-error);
  background: transparent;
}

/* ─── Contenido de cada pantalla (datos, direcciones, pedidos…) ──── */
.gh-account .page-content--customer {
  background: var(--gh-glass-bg);
  -webkit-backdrop-filter: var(--gh-glass-blur);
  backdrop-filter: var(--gh-glass-blur);
  border: 1px solid var(--gh-glass-border);
  border-radius: var(--gh-radius-xl);
  box-shadow: var(--gh-shadow-lg), var(--gh-glass-hi);
  /* Sin soporte de backdrop-filter → claro casi opaco. */
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .gh-account .page-content--customer {
    background: var(--gh-glass-bg-strong);
  }
}
.gh-account .page-content--customer {
  /* El usuario pide menos transparencia → superficie sólida. */
}
@media (prefers-reduced-transparency: reduce) {
  .gh-account .page-content--customer {
    background: var(--gh-white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.gh-account .page-content--customer {
  padding: 32px;
}

/* ─── Resumen · tarjetas (marcado de los módulos) ──────────────────── */
.gh-account__summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--gh-space-5);
}

.gh-account__card {
  background: var(--gh-glass-bg);
  -webkit-backdrop-filter: var(--gh-glass-blur);
  backdrop-filter: var(--gh-glass-blur);
  border: 1px solid var(--gh-glass-border);
  border-radius: var(--gh-radius-xl);
  box-shadow: var(--gh-shadow-sm), var(--gh-glass-hi);
  /* Sin soporte de backdrop-filter → claro casi opaco. */
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .gh-account__card {
    background: var(--gh-glass-bg-strong);
  }
}
.gh-account__card {
  /* El usuario pide menos transparencia → superficie sólida. */
}
@media (prefers-reduced-transparency: reduce) {
  .gh-account__card {
    background: var(--gh-white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.gh-account__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gh-space-2);
  padding: var(--gh-space-6);
}

.gh-account__card-head {
  display: flex;
  align-items: center;
  gap: var(--gh-space-3);
  margin-bottom: var(--gh-space-2);
}

.gh-account__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--gh-radius-lg);
  font-size: 20px;
  color: var(--gh-green-700);
  background: var(--gh-green-100);
}

.gh-account__card-title {
  margin: 0;
  font-family: var(--gh-font-display);
  font-size: var(--gh-text-base);
  font-weight: 700;
  color: var(--gh-grey-900);
}

.gh-account__card-strong {
  margin: 0;
  font-size: var(--gh-text-base);
  font-weight: 700;
  color: var(--gh-grey-900);
}

.gh-account__card-text {
  margin: 0;
  font-size: var(--gh-text-sm);
  line-height: 1.55;
  color: var(--gh-grey-600);
}

/* Estado del pedido: punto con el color que el BO asigna a cada estado */
.gh-account__card-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: var(--gh-text-xs);
  font-weight: 600;
  color: var(--gh-grey-800);
  background: var(--gh-grey-100);
  border-radius: var(--gh-radius-full);
}

.gh-account__card-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gh-badge, var(--gh-grey-400));
}

.gh-account__card-link {
  font-size: var(--gh-text-sm);
  font-weight: 600;
  color: var(--gh-green-700);
  text-decoration: none;
}

/* Los enlaces van al pie de la tarjeta (tarjetas de la fila a igual altura) */
.gh-account__card-link:first-of-type {
  margin-top: auto;
  padding-top: var(--gh-space-2);
}

.gh-account__card-link::after {
  content: " →";
}

.gh-account__card-link:hover {
  color: var(--gh-green-800);
  text-decoration: underline;
}

/* ─── Móvil (<768 · fase 2: hoy se aplana al lienzo y no se sirve) ── */
/* ─── AUTENTICACIÓN · iniciar sesión + crear cuenta ───────────────────
   Controladores authentication (/iniciar-sesion) y registration (/registro),
   overrides child customer/authentication.tpl y customer/registration.tpl.
   Chrome del área de cliente: el título-pestaña llega ya de _account.scss
   (body.page-customer-account .page-title-section); aquí se visten las
   tarjetas de vidrio (formulario + tarjeta cruzada login↔registro) con el
   acento verde de marca y se da aire extra sobre el título.
   El CTA replica la receta del botón verde de ficha de producto
   (pages/_product.scss · green-600 / hover green-700 / glow en focus). */
body.page-authentication,
body.page-registration {
  /* Aire sobre el título y bajo el bloque (antes pegado a la cabecera) */
}
body.page-authentication .page-header,
body.page-registration .page-header {
  margin-top: 56px;
}
body.page-authentication .page-content--general,
body.page-registration .page-content--general {
  padding-bottom: var(--gh-space-16);
}
body.page-authentication,
body.page-registration {
  /* Formulario y tarjeta cruzada se separan por espaciado, no por <hr> */
}
body.page-authentication .login,
body.page-authentication .register,
body.page-registration .login,
body.page-registration .register {
  display: flex;
  flex-direction: column;
  gap: var(--gh-space-5);
}
body.page-authentication,
body.page-registration {
  /* ── Tarjeta del formulario ─────────────────────────────────────── */
}
body.page-authentication .login__form-wrapper,
body.page-authentication .register-form,
body.page-registration .login__form-wrapper,
body.page-registration .register-form {
  background: var(--gh-glass-bg);
  -webkit-backdrop-filter: var(--gh-glass-blur);
  backdrop-filter: var(--gh-glass-blur);
  border: 1px solid var(--gh-glass-border);
  border-radius: var(--gh-radius-xl);
  box-shadow: var(--gh-shadow-lg), var(--gh-glass-hi);
  /* Sin soporte de backdrop-filter → claro casi opaco. */
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.page-authentication .login__form-wrapper,
  body.page-authentication .register-form,
  body.page-registration .login__form-wrapper,
  body.page-registration .register-form {
    background: var(--gh-glass-bg-strong);
  }
}
body.page-authentication .login__form-wrapper,
body.page-authentication .register-form,
body.page-registration .login__form-wrapper,
body.page-registration .register-form {
  /* El usuario pide menos transparencia → superficie sólida. */
}
@media (prefers-reduced-transparency: reduce) {
  body.page-authentication .login__form-wrapper,
  body.page-authentication .register-form,
  body.page-registration .login__form-wrapper,
  body.page-registration .register-form {
    background: var(--gh-white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
body.page-authentication .login__form-wrapper,
body.page-authentication .register-form,
body.page-registration .login__form-wrapper,
body.page-registration .register-form {
  padding: 34px;
}
body.page-authentication .form-label,
body.page-registration .form-label {
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gh-grey-600);
}
body.page-authentication,
body.page-registration {
  /* Campos · scoped a las tarjetas (el buscador del header también usa
     .form-control y no debe verse afectado) */
}
body.page-authentication .login__form-wrapper .form-control,
body.page-authentication .register-form .form-control,
body.page-registration .login__form-wrapper .form-control,
body.page-registration .register-form .form-control {
  padding: 12px 14px;
  font-family: var(--gh-font-body);
  font-size: 15px;
  color: var(--gh-grey-900);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--gh-grey-300);
  border-radius: var(--gh-radius-lg);
  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.04);
  transition: border-color var(--gh-duration-fast) var(--gh-ease-out), box-shadow var(--gh-duration-fast) var(--gh-ease-out), background var(--gh-duration-fast) var(--gh-ease-out);
}
body.page-authentication .login__form-wrapper .form-control:focus,
body.page-authentication .register-form .form-control:focus,
body.page-registration .login__form-wrapper .form-control:focus,
body.page-registration .register-form .form-control:focus {
  outline: none;
  border-color: var(--gh-green-400);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--gh-shadow-glow-green), inset 0 1px 2px rgba(10, 10, 10, 0.04);
}
body.page-authentication,
body.page-registration {
  /* Texto de ayuda bajo los campos («Solo se permiten…», «Opcional») */
}
body.page-authentication .form-text,
body.page-registration .form-text {
  font-size: var(--gh-text-xs);
  color: var(--gh-grey-500);
}
body.page-authentication,
body.page-registration {
  /* Radios y checkboxes (tratamiento, RGPD, boletín) · acento verde */
}
body.page-authentication .form-check-input:checked,
body.page-registration .form-check-input:checked {
  background-color: var(--gh-green-600);
  border-color: var(--gh-green-600);
}
body.page-authentication .form-check-input:focus,
body.page-registration .form-check-input:focus {
  border-color: var(--gh-green-400);
  box-shadow: var(--gh-shadow-glow-green);
}
body.page-authentication .form-check-label,
body.page-registration .form-check-label {
  font-size: var(--gh-text-sm);
  color: var(--gh-grey-700);
}
body.page-authentication .form-check-label em,
body.page-registration .form-check-label em {
  display: block;
  margin-top: 2px;
  font-size: var(--gh-text-xs);
  font-style: normal;
  line-height: 1.5;
  color: var(--gh-grey-500);
}
body.page-authentication,
body.page-registration {
  /* Botón mostrar/ocultar contraseña · neutro, no compite con el CTA */
}
body.page-authentication .password-field .btn[data-ps-action=toggle-password],
body.page-registration .password-field .btn[data-ps-action=toggle-password] {
  background: var(--gh-white);
  border: 1px solid var(--gh-grey-300);
  border-left: 0;
  color: var(--gh-grey-600);
  border-radius: 0 var(--gh-radius-lg) var(--gh-radius-lg) 0;
}
body.page-authentication .password-field .btn[data-ps-action=toggle-password]:hover,
body.page-registration .password-field .btn[data-ps-action=toggle-password]:hover {
  color: var(--gh-green-700);
  background: var(--gh-grey-50);
}
body.page-authentication .password-field .form-control,
body.page-registration .password-field .form-control {
  border-radius: var(--gh-radius-lg) 0 0 var(--gh-radius-lg);
}
body.page-authentication,
body.page-registration {
  /* ── Pie del formulario · enlace secundario + CTA verde ─────────── */
}
body.page-authentication .login__form-wrapper .buttons-wrapper,
body.page-authentication .register-form .buttons-wrapper,
body.page-registration .login__form-wrapper .buttons-wrapper,
body.page-registration .register-form .buttons-wrapper {
  margin-top: var(--gh-space-5);
  align-items: center;
}
body.page-authentication .login .btn-basic,
body.page-registration .login .btn-basic {
  padding-left: 0;
  padding-right: 0;
  font-size: var(--gh-text-sm);
  font-weight: 600;
  color: var(--gh-grey-600);
  background: none;
  border: 0;
}
body.page-authentication .login .btn-basic:hover,
body.page-registration .login .btn-basic:hover {
  color: var(--gh-green-800);
  text-decoration: underline;
}
body.page-authentication,
body.page-registration {
  /* Misma receta que el CTA de ficha de producto (_product.scss) */
}
body.page-authentication #submit-login.btn,
body.page-authentication .register-form .form-control-submit.btn,
body.page-registration #submit-login.btn,
body.page-registration .register-form .form-control-submit.btn {
  padding: 12px 28px;
  font-weight: 600;
  color: #fff;
  background-color: var(--gh-green-600);
  border-color: var(--gh-green-600);
  border-radius: var(--gh-radius-full);
}
body.page-authentication #submit-login.btn:hover,
body.page-authentication #submit-login.btn:focus,
body.page-authentication #submit-login.btn:active,
body.page-authentication .register-form .form-control-submit.btn:hover,
body.page-authentication .register-form .form-control-submit.btn:focus,
body.page-authentication .register-form .form-control-submit.btn:active,
body.page-registration #submit-login.btn:hover,
body.page-registration #submit-login.btn:focus,
body.page-registration #submit-login.btn:active,
body.page-registration .register-form .form-control-submit.btn:hover,
body.page-registration .register-form .form-control-submit.btn:focus,
body.page-registration .register-form .form-control-submit.btn:active {
  color: #fff;
  background-color: var(--gh-green-700);
  border-color: var(--gh-green-700);
}
body.page-authentication #submit-login.btn:focus-visible,
body.page-authentication .register-form .form-control-submit.btn:focus-visible,
body.page-registration #submit-login.btn:focus-visible,
body.page-registration .register-form .form-control-submit.btn:focus-visible {
  box-shadow: var(--gh-shadow-glow-green);
}
body.page-authentication,
body.page-registration {
  /* ── Tarjeta cruzada · «¿No tiene una cuenta?» / «¿Ya tiene…?» ──── */
}
body.page-authentication .login__register-prompt,
body.page-authentication .register__login-prompt,
body.page-registration .login__register-prompt,
body.page-registration .register__login-prompt {
  background: var(--gh-glass-bg);
  -webkit-backdrop-filter: var(--gh-glass-blur);
  backdrop-filter: var(--gh-glass-blur);
  border: 1px solid var(--gh-glass-border);
  border-radius: var(--gh-radius-xl);
  box-shadow: var(--gh-shadow-md), var(--gh-glass-hi);
  /* Sin soporte de backdrop-filter → claro casi opaco. */
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.page-authentication .login__register-prompt,
  body.page-authentication .register__login-prompt,
  body.page-registration .login__register-prompt,
  body.page-registration .register__login-prompt {
    background: var(--gh-glass-bg-strong);
  }
}
body.page-authentication .login__register-prompt,
body.page-authentication .register__login-prompt,
body.page-registration .login__register-prompt,
body.page-registration .register__login-prompt {
  /* El usuario pide menos transparencia → superficie sólida. */
}
@media (prefers-reduced-transparency: reduce) {
  body.page-authentication .login__register-prompt,
  body.page-authentication .register__login-prompt,
  body.page-registration .login__register-prompt,
  body.page-registration .register__login-prompt {
    background: var(--gh-white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
body.page-authentication .login__register-prompt,
body.page-authentication .register__login-prompt,
body.page-registration .login__register-prompt,
body.page-registration .register__login-prompt {
  padding: 28px 34px;
  text-align: center;
}
body.page-authentication .login__register-prompt h2,
body.page-authentication .register__login-prompt h2,
body.page-registration .login__register-prompt h2,
body.page-registration .register__login-prompt h2 {
  margin: 0 0 var(--gh-space-4);
  font-family: var(--gh-font-display);
  font-size: var(--gh-text-lg);
  font-weight: 700;
  letter-spacing: var(--gh-tracking-tight);
  color: var(--gh-grey-900);
}
body.page-authentication .login__register-prompt .btn-outline-primary,
body.page-authentication .register__login-prompt .btn-outline-primary,
body.page-registration .login__register-prompt .btn-outline-primary,
body.page-registration .register__login-prompt .btn-outline-primary {
  padding: 11px 24px;
  font-weight: 600;
  color: var(--gh-green-800);
  background: var(--gh-white);
  border: 1px solid var(--gh-green-300);
  border-radius: var(--gh-radius-full);
}
body.page-authentication .login__register-prompt .btn-outline-primary:hover,
body.page-authentication .login__register-prompt .btn-outline-primary:focus,
body.page-authentication .login__register-prompt .btn-outline-primary:active,
body.page-authentication .register__login-prompt .btn-outline-primary:hover,
body.page-authentication .register__login-prompt .btn-outline-primary:focus,
body.page-authentication .register__login-prompt .btn-outline-primary:active,
body.page-registration .login__register-prompt .btn-outline-primary:hover,
body.page-registration .login__register-prompt .btn-outline-primary:focus,
body.page-registration .login__register-prompt .btn-outline-primary:active,
body.page-registration .register__login-prompt .btn-outline-primary:hover,
body.page-registration .register__login-prompt .btn-outline-primary:focus,
body.page-registration .register__login-prompt .btn-outline-primary:active {
  color: var(--gh-green-800);
  background: var(--gh-green-100);
  border-color: var(--gh-green-300);
}
body.page-authentication .login__register-prompt .btn-outline-primary:focus-visible,
body.page-authentication .register__login-prompt .btn-outline-primary:focus-visible,
body.page-registration .login__register-prompt .btn-outline-primary:focus-visible,
body.page-registration .register__login-prompt .btn-outline-primary:focus-visible {
  box-shadow: var(--gh-shadow-glow-green);
}
/* ─── CARRITO · página /carrito (controller cart) ─────────────────────
   Chrome compartido con el área de cliente y contacto: fondo blanco,
   título-pestaña y superficies de vidrio (components/_glass.scss) con acento
   verde de marca. Barra de pasos arriba, a todo el ancho, con «1 Resumen»
   como paso actual (components/_checkout-steps.scss, la misma de /pedido,
   2026-08-24) y tres columnas (2026-08-23): panel de confianza + lista de
   productos (tarjeta) + resumen pegajoso (tarjeta), al raíl de categoría.
   CTA «Continuar con mi compra» con la receta verde de la ficha de producto;
   «Volver a la tienda» y «Eliminar» como secundarios discretos.

   Overrides de plantilla asociados: templates/checkout/cart.tpl (incluye la
   barra de pasos con gh_stage='cart') y checkout/_partials/cart-detailed.tpl
   (solo quitan los <hr> separadores), cart-detailed-actions.tpl (texto del
   CTA) y cart-detailed-product-line.tpl (2026-08-23: el bloque de precios
   pasa a la columna derecha). Todas las clases son las del tema padre: no se
   toca el JS del carrito (refresco AJAX, botones de cantidad, quitar
   producto). */
/* ─── RESUMEN DEL PEDIDO · panel compartido carrito + checkout ────────
   Desde el 2026-08-24 el panel es el MISMO parcial en /carrito y en
   /pedido (checkout/_partials/cart-summary.tpl: «N artículos», «Ver
   detalles», subtotales, IVA/total, cupón) y el CTA va encima del panel
   en las dos pantallas, así que todo se viste UNA vez aquí. La columna
   que lo aloja (aside pegajoso) es de la rejilla común del proceso:
   layout/_process-grid.scss (.gh-process__aside-wrapper).
   Extraído de pages/_cart.scss el 2026-08-16 al reutilizarlo en checkout. */
/* Sin título sobre el panel (2026-08-24): el h2 «Resumen del pedido» de
   carrito y pedido se retiró a petición del usuario. */
.cart-summary {
  background: var(--gh-glass-bg);
  -webkit-backdrop-filter: var(--gh-glass-blur);
  backdrop-filter: var(--gh-glass-blur);
  border: 1px solid var(--gh-glass-border);
  border-radius: var(--gh-radius-xl);
  box-shadow: var(--gh-shadow-lg), var(--gh-glass-hi);
  /* Sin soporte de backdrop-filter → claro casi opaco. */
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cart-summary {
    background: var(--gh-glass-bg-strong);
  }
}
.cart-summary {
  /* El usuario pide menos transparencia → superficie sólida. */
}
@media (prefers-reduced-transparency: reduce) {
  .cart-summary {
    background: var(--gh-white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.cart-summary {
  padding: 26px;
}

.cart-summary__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gh-space-4);
  padding: 7px 0;
  font-size: var(--gh-text-sm);
  color: var(--gh-grey-600);
}

.cart-summary__value {
  font-weight: 600;
  color: var(--gh-grey-800);
}

/* Las filas de IVA y total de la compra siguen a los subtotales sin
   separador ni negrita: un único bloque de cuatro filas con la misma letra
   (decisión del usuario 2026-08-23). `--bold` solo queda para el modo de
   precios con IVA incluido del parcial (rama else), no para esta tienda. */
.cart-summary__subtotals {
  margin-bottom: 0;
} /* el padre deja .5rem */
.cart-summary__total {
  /* El padre dibuja border-block + padding-block; sin borde ni aire arriba
     las cuatro filas leen como un solo bloque. Abajo se conserva (separa del CTA). */
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.cart-summary__line--bold {
  font-size: var(--gh-text-base);
  color: var(--gh-grey-900);
}

/* ── «N artículos» + «Ver detalles» (cart-summary-products.tpl) ─────
   «Ver detalles» como enlace verde discreto en vez del botón de acordeón
   de Bootstrap (hasta 2026-08-24 esta regla vivía en pages/_checkout.scss
   colgada del envoltorio del pedido). El recuento y los <hr> son los del
   padre. */
.cart-summary__products-accordion .accordion-button {
  padding: 4px 0;
  font-size: var(--gh-text-sm);
  font-weight: 600;
  color: var(--gh-green-800);
  background: transparent;
  box-shadow: none;
}

/* Miniaturas de la lista plegada, fundidas como las del carrito */
.cart-summary-product__img {
  mix-blend-mode: multiply;
}

/* CTA · encima del panel en carrito y pedido (2026-08-24): sin margen
   propio, el aire con el título lo pone el gap de la columna. Misma
   receta que el botón de compra de la ficha de producto. */
.cart-summary__actions .btn-primary {
  padding: 14px 24px;
  font-size: var(--gh-text-base);
  font-weight: 700;
  color: #fff;
  background-color: var(--gh-green-600);
  border-color: var(--gh-green-600);
  border-radius: var(--gh-radius-full);
}

.cart-summary__actions .btn-primary:hover,
.cart-summary__actions .btn-primary:focus,
.cart-summary__actions .btn-primary:active {
  color: #fff;
  background-color: var(--gh-green-700);
  border-color: var(--gh-green-700);
}

.cart-summary__actions .btn-primary:focus-visible {
  box-shadow: var(--gh-shadow-glow-green);
}

.cart-summary__actions .btn-primary.disabled,
.cart-summary__actions .btn-primary:disabled {
  background-color: var(--gh-grey-300);
  border-color: var(--gh-grey-300);
  color: var(--gh-grey-600);
  opacity: 1;
}

/* ── Cupón · acordeón discreto ──────────────────────────────────── */
.cart-voucher {
  margin-top: var(--gh-space-4);
  padding-top: var(--gh-space-4);
  border-top: 1px solid var(--gh-grey-200);
}

.cart-voucher__accordion-button.accordion-button {
  padding: 4px 0;
  font-size: var(--gh-text-sm);
  font-weight: 600;
  color: var(--gh-green-800);
  background: transparent;
  box-shadow: none;
}

.cart-voucher__accordion-button.accordion-button:not(.collapsed) {
  color: var(--gh-green-800);
  background: transparent;
}

.cart-voucher__accordion-item.accordion-item {
  background: transparent;
  border: 0;
}

.cart-voucher .accordion-body {
  padding: 12px 0 0;
}

.cart-voucher__form {
  display: flex;
  gap: 8px;
}

.cart-voucher__form .form-control {
  padding: 10px 14px;
  font-size: var(--gh-text-sm);
  border: 1px solid var(--gh-grey-300);
  border-radius: var(--gh-radius-full);
  background: var(--gh-white);
}

.cart-voucher__form .form-control:focus {
  outline: none;
  border-color: var(--gh-green-400);
  box-shadow: var(--gh-shadow-glow-green);
}

.cart-voucher__form .btn {
  flex: 0 0 auto;
  padding: 10px 20px;
  font-size: var(--gh-text-sm);
  font-weight: 600;
  color: var(--gh-green-800);
  background: var(--gh-white);
  border: 1px solid var(--gh-green-300);
  border-radius: var(--gh-radius-full);
}

.cart-voucher__form .btn:hover {
  color: var(--gh-green-800);
  background: var(--gh-green-100);
  border-color: var(--gh-green-300);
}

.cart-voucher__remove {
  color: var(--gh-grey-400);
}

.cart-voucher__remove:hover {
  color: var(--gh-error);
}

/* ── «Envío gratuito incluido en el precio» (.gh-shipnote) ──────────
   Solo en el panel COMPACTO de los pasos del pedido (gh_summary_compact,
   override child cart-summary.tpl, 2026-08-24): sustituye al desglose
   Total de productos · Transporte · Total IVA. Cajita verde suave con el
   camión de material icons. */
.gh-shipnote {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 10px 14px;
  font-size: var(--gh-text-sm);
  font-weight: 600;
  color: var(--gh-green-800);
  background: var(--gh-green-50);
  border: 1px solid var(--gh-green-100);
  border-radius: var(--gh-radius-lg);
}

.gh-shipnote .material-icons {
  font-size: 20px;
  color: var(--gh-green-600);
}

/* Total al cierre del desplegable «Ver detalles» (solo panel compacto del
   pedido · override child cart-summary-products.tpl, 2026-08-24). */
.gh-details-total {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--gh-grey-200);
  font-weight: 700;
}

/* ─── Modo CIERRE · /carrito (2026-11-07) ──────────────────────────────
   Bajo la lista de productos el panel es el cierre de precio: sin «N
   artículos» ni «Ver detalles» (cart-summary.tpl, gh_summary_closing) y con
   letra de cierre: desglose a tamaño de lectura y el TOTAL DE LA COMPRA
   grande, separado por una línea. El total es la última fila de
   .cart-summary__total (override cart-summary-totals.tpl), también tras el
   refresco AJAX del core. */
.cart-summary--closing {
  padding: 24px 30px;
}

.cart-summary--closing .cart-summary__line {
  padding: 6px 0;
  font-size: var(--gh-text-base);
}

.cart-summary--closing .cart-summary__total > .cart-summary__line:last-child {
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--gh-grey-200);
  align-items: baseline;
}

.cart-summary--closing .cart-summary__total > .cart-summary__line:last-child .cart-summary__label {
  font-family: var(--gh-font-display);
  font-size: var(--gh-text-lg);
  font-weight: 700;
  color: var(--gh-grey-900);
}

.cart-summary--closing .cart-summary__total > .cart-summary__line:last-child .cart-summary__value {
  font-family: var(--gh-font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--gh-green-800);
}

/* Nota bajo el total de /carrito (cart-summary.tpl, gh_summary_closing). */
.gh-summary-guarantee {
  margin: 10px 0 0;
  font-size: var(--gh-text-xs);
  color: var(--gh-grey-500);
  text-align: right;
}

/* ─── BARRA DE PASOS · proceso de compra (carrito + pedido) ───────────
   «1 Resumen · 2 Cuenta · 3 Direcciones · 4 Método de envío · 5 Pago»,
   a todo el ancho bajo la cabecera, en las dos pantallas donde se
   avanza: /carrito (paso 1 actual; 2-5 pendientes e inertes) y /pedido
   (paso 1 hecho y enlazado al carrito; 2-5 los mueve el JS del tema).
   Un solo origen de markup: templates/checkout/checkout-navigation.tpl
   (+ _partials/checkout-navigation-step.tpl). Un solo origen de estilo:
   este archivo, que consumen pages/_cart.scss y pages/_checkout.scss
   (mismo criterio que components/_cart-summary.scss). Extraído de
   pages/_checkout.scss el 2026-08-24 al llevar la barra al carrito.

   Las clases son las del tema padre (.checkout-steps*): el JS del pedido
   las usa para marcar --current / --success. El padre sirve sus reglas
   dentro de @layer (ps-components, bs-components), así que estas reglas
   sin capa ganan sin necesidad de encadenar .btn por especificidad. */
.checkout-steps {
  background: var(--gh-glass-bg);
  -webkit-backdrop-filter: var(--gh-glass-blur);
  backdrop-filter: var(--gh-glass-blur);
  border: 1px solid var(--gh-glass-border);
  border-radius: var(--gh-radius-xl);
  box-shadow: var(--gh-shadow-sm), var(--gh-glass-hi);
  /* Sin soporte de backdrop-filter → claro casi opaco. */
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .checkout-steps {
    background: var(--gh-glass-bg-strong);
  }
}
.checkout-steps {
  /* El usuario pide menos transparencia → superficie sólida. */
}
@media (prefers-reduced-transparency: reduce) {
  .checkout-steps {
    background: var(--gh-white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.checkout-steps {
  padding: var(--gh-space-4) 20px;
  /* Sin el margen inferior del padre (40px, 2026-11-07, petición del
     usuario: demasiada separación): el aire hasta el contenido lo pone solo
     la rejilla del proceso (.gh-process, padding-top). */
  margin-bottom: 0;
}

.checkout-steps__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gh-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* El número es hermano del rótulo dentro del <li>: el layout va aquí. */
.checkout-steps__step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--gh-radius-lg);
}

/* El padre dibuja una línea de progreso (::before/::after de cada paso)
   pensada para su maqueta de número encima del texto; en nuestra fila
   número + rótulo cruzaba los textos (fuera, petición del usuario
   2026-08-24). content:none evita generar los pseudoelementos. */
.checkout-steps__step::before,
.checkout-steps__step::after {
  content: none;
}

/* Rótulo del paso: <button> (pestaña, en el pedido), <a> («Resumen» desde
   el pedido) o <span> (carrito: paso actual y pendientes, sin acción).
   Misma caja y letra sea cual sea el elemento. */
.checkout-steps__btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
  border: 0;
  font-size: var(--gh-text-sm);
  font-weight: 600;
  line-height: 1.5;
  color: var(--gh-grey-500);
  white-space: normal;
}

/* Solo los rótulos con acción reaccionan al ratón. */
.checkout-steps__btn:is(a, button):hover {
  color: var(--gh-green-700);
}

/* Número en círculo: gris por defecto; --current y --success los pone la
   plantilla (carrito) o el JS del tema (pedido). */
.checkout-steps__number {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--gh-radius-full);
  font-family: var(--gh-font-display);
  font-size: var(--gh-text-sm);
  font-weight: 700;
  color: var(--gh-grey-600);
  background: var(--gh-grey-100);
  border: 1px solid var(--gh-grey-200);
}

.checkout-steps__step--current {
  background: var(--gh-green-50);
}

.checkout-steps__step--current .checkout-steps__number {
  color: #fff;
  background: var(--gh-green-600);
  border-color: var(--gh-green-600);
}

.checkout-steps__step--current .checkout-steps__btn {
  color: var(--gh-grey-900);
}

.checkout-steps__step--success .checkout-steps__number {
  color: var(--gh-green-800);
  background: var(--gh-green-100);
  border-color: var(--gh-green-200);
}

.checkout-steps__step--success .checkout-steps__btn {
  color: var(--gh-green-800);
}

/* ─── Responsive (fase 2 · hoy el build lo aplana) ─────────────────── */
body#cart {
  /* ── Maqueta (2026-08-23): rejilla común del proceso de compra ────
     Raíl, 3 columnas (panel de confianza · productos · resumen pegajoso) y
     aires viven en layout/_process-grid.scss (.gh-process, compartida con
     /pedido y confirmación). Aquí solo lo específico del carrito. */
  /* Título-pestaña (mixin compartido con categorías, contacto y cuenta) */
}
body#cart .page-title-section {
  display: block;
  font-family: "Roboto", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--gh-grey-900);
  padding: 10px 18px;
  margin: 0 0 24px 0;
  border: 1px solid var(--gh-glass-border);
  border-radius: var(--gh-radius-lg);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: var(--gh-shadow-sm), var(--gh-glass-hi);
  margin-bottom: 0;
}
body#cart {
  /* ── Lista de productos · una tarjeta con líneas separadas ──────── */
}
body#cart .cart__overview {
  background: var(--gh-glass-bg);
  -webkit-backdrop-filter: var(--gh-glass-blur);
  backdrop-filter: var(--gh-glass-blur);
  border: 1px solid var(--gh-glass-border);
  border-radius: var(--gh-radius-xl);
  box-shadow: var(--gh-shadow-lg), var(--gh-glass-hi);
  /* Sin soporte de backdrop-filter → claro casi opaco. */
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body#cart .cart__overview {
    background: var(--gh-glass-bg-strong);
  }
}
body#cart .cart__overview {
  /* El usuario pide menos transparencia → superficie sólida. */
}
@media (prefers-reduced-transparency: reduce) {
  body#cart .cart__overview {
    background: var(--gh-white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
body#cart .cart__overview {
  padding: 14px 26px;
}
body#cart .cart__item + .cart__item {
  border-top: 1px solid var(--gh-grey-200);
}
body#cart .product-line {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 22px;
  align-items: center;
  padding: 22px 0;
}
body#cart .product-line__image {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  padding: 6px;
  background: var(--gh-white);
  border: 1px solid var(--gh-grey-200);
  border-radius: var(--gh-radius-lg);
  overflow: hidden;
}
body#cart .product-line__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}
body#cart {
  /* Contenido: datos a la izquierda · cantidad y total a la derecha */
}
body#cart .product-line__content {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "info side" "actions side";
  column-gap: var(--gh-space-5);
  row-gap: 6px;
  align-items: start;
}
body#cart .product-line__content-left {
  grid-area: info;
  min-width: 0;
}
body#cart .product-line__content-right {
  grid-area: side;
}
body#cart .product-line__actions {
  grid-area: actions;
}
body#cart .product-line__title {
  display: block;
  font-family: var(--gh-font-display);
  font-size: var(--gh-text-base);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: var(--gh-tracking-tight);
  color: var(--gh-grey-900);
  text-decoration: none;
}
body#cart .product-line__title:hover {
  color: var(--gh-green-800);
  text-decoration: none;
}
body#cart {
  /* Atributos, disponibilidad y notas de entrega */
}
body#cart .product-line__item--info,
body#cart .product-line__item--small-info {
  margin-top: 4px;
  font-size: var(--gh-text-sm);
  color: var(--gh-grey-500);
}
body#cart .product-line__item-label {
  font-weight: 600;
}
body#cart .product-line__item-availability-message {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--gh-text-sm);
}
body#cart .product-line__item-availability-icon {
  font-size: 17px;
}
body#cart {
  /* Precios · en la columna derecha (override cart-detailed-product-line.tpl):
     primera fila tachado + pastilla, alineados a la derecha; segunda fila el
     precio con descuento, que es el importe principal de la línea. */
}
body#cart .product-line__item--prices {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 4px 8px;
  margin-top: 0;
}
body#cart .product-line__item-price {
  flex: 0 0 100%;
  text-align: right;
  font-family: var(--gh-font-display);
  font-size: var(--gh-text-lg);
  font-weight: 700;
  letter-spacing: var(--gh-tracking-tight);
  color: var(--gh-grey-900);
  white-space: nowrap;
}
body#cart .product-line__item-regular-price {
  font-size: var(--gh-text-sm);
  color: var(--gh-grey-400);
  text-decoration: line-through;
}
body#cart {
  /* La plantilla del padre pinta la pastilla «-28%» con la utilidad .bg-primary
     de Bootstrap (`!important`, dentro de la capa `@layer utilities` del
     theme.css). Nuestro CSS va sin capa: en `!important` la capa gana aunque
     tengamos más especificidad, así que un `background … !important` aquí
     NUNCA se aplicaba (salía azul). Se recolorea por la API de variables de
     Bootstrap: .bg-primary pinta `rgba(var(--bs-primary-rgb), …)` y .badge,
     `color: var(--bs-badge-color)`; redefinir esas variables en el ámbito de la
     pastilla gana como declaración normal y no necesita `!important`. */
}
body#cart .product-line__item-discount.badge {
  --bs-primary-rgb: var(--gh-green-100-rgb);
  --bs-badge-color: var(--gh-green-800);
  font-weight: 700;
  border-radius: var(--gh-radius-full);
  padding: 4px 10px;
}
body#cart .product-line__item-unit-price {
  flex: 0 0 100%;
  text-align: right;
  font-size: var(--gh-text-xs);
  color: var(--gh-grey-500);
}
body#cart {
  /* Columna derecha · cantidad + precios (+ total de línea si hay >1 ud.) */
}
body#cart .product-line__content-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
body#cart .product-line__price {
  font-size: var(--gh-text-sm);
  font-weight: 600;
  color: var(--gh-grey-600);
  white-space: nowrap;
}
body#cart .product-line__price-label {
  font-weight: 500;
  color: var(--gh-grey-500);
  margin-right: 2px;
}
body#cart {
  /* Selector de cantidad · píldora con - y + */
}
body#cart .quantity-button__group {
  width: auto;
  border: 1px solid var(--gh-grey-300);
  border-radius: var(--gh-radius-full);
  overflow: hidden;
  background: var(--gh-white);
}
body#cart .quantity-button__group .btn {
  border: 0;
  background: transparent;
  color: var(--gh-grey-600);
  padding: 6px 10px;
  box-shadow: none;
}
body#cart .quantity-button__group .btn:hover {
  color: var(--gh-green-700);
  background: var(--gh-green-50);
}
body#cart .quantity-button__group .btn .material-icons {
  font-size: 18px;
}
body#cart .quantity-button__group .form-control {
  width: 46px;
  min-width: 0;
  padding: 6px 0;
  text-align: center;
  font-size: var(--gh-text-sm);
  font-weight: 600;
  color: var(--gh-grey-900);
  background: transparent;
  border: 0;
  box-shadow: none;
}
body#cart .quantity-button__group .form-control:focus {
  outline: none;
  box-shadow: none;
}
body#cart {
  /* Eliminar producto · enlace discreto que avisa en rojo */
}
body#cart .product-line__actions .js-remove-from-cart {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--gh-text-sm);
  font-weight: 600;
  color: var(--gh-grey-500);
  text-decoration: none;
}
body#cart .product-line__actions .js-remove-from-cart::before {
  content: "\e872"; /* delete */
  font-family: "Material Icons";
  font-size: 17px;
  line-height: 1;
}
body#cart .product-line__actions .js-remove-from-cart:hover {
  color: var(--gh-error);
  text-decoration: none;
}
body#cart {
  /* Carrito vacío */
}
body#cart .cart__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 56px var(--gh-space-4);
  text-align: center;
  font-size: var(--gh-text-lg);
  color: var(--gh-grey-500);
}
body#cart .cart__empty-icon {
  font-size: 46px;
  color: var(--gh-green-300);
}
body#cart {
  /* «Volver a la tienda» · píldora secundaria bajo la tarjeta de productos.
     Separada de la tarjeta con el mismo ritmo vertical de la columna
     (--gh-space-5): .cart__products-details no es flex, así que el aire
     va en el propio botón. */
  /* Resumen (totales) bajo la tarjeta de productos (2026-11-07): mismo ritmo
     vertical que «Volver a la tienda». */
}
body#cart .cart__products-details > .cart-summary {
  margin-top: var(--gh-space-5);
}
body#cart .cart__continue-shopping.btn {
  margin-top: var(--gh-space-5);
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: var(--gh-text-sm);
  font-weight: 600;
  color: var(--gh-grey-700);
  background: var(--gh-white);
  border: 1px solid var(--gh-grey-300);
  border-radius: var(--gh-radius-full);
}
body#cart .cart__continue-shopping.btn:hover {
  color: var(--gh-green-800);
  border-color: var(--gh-green-300);
  background: var(--gh-green-50);
}
body#cart .cart__continue-shopping .material-icons {
  font-size: 18px;
}
body#cart {
  /* ── «Los clientes también compraron» · ps_crossselling ──────────
     Hook displayShoppingCartFooter (registrado 2026-08-24), bajo la lista
     de productos y el «Volver a la tienda». La ficha es la miniatura normal
     del catálogo (components/_product-card.scss, ámbito .gh-crosssell);
     aquí solo la maqueta: título de sección y rejilla a 3 columnas (el
     padre pone 4 y a este ancho de columna el botón «Añadir al carrito»
     salía partido en tres líneas). */
}
body#cart .gh-crosssell {
  margin-top: var(--gh-space-8);
}
body#cart .gh-crosssell__title {
  margin: 0 0 var(--gh-space-5);
  font-family: var(--gh-font-display);
  font-size: var(--gh-text-xl);
  font-weight: 700;
  letter-spacing: var(--gh-tracking-tight);
  color: var(--gh-grey-900);
}
body#cart .gh-crosssell .products {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gh-space-5);
}
body#cart {
  /* Botones en una sola línea también a este ancho de tarjeta (~286px) */
}
body#cart .gh-crosssell .gh-btn-cart {
  white-space: nowrap;
  padding-inline: 12px;
}
body#cart .gh-crosssell .gh-btn-view {
  white-space: nowrap;
}
body#cart {
  /* ── Avisos del carrito (producto eliminado, mínimo de compra…) ─── */
}
body#cart .js-cart-update-alert .alert,
body#cart .cart-summary__actions .alert {
  border-radius: var(--gh-radius-lg);
  font-size: var(--gh-text-sm);
}
/* ─── PROCESO DE PEDIDO · /pedido (controller order) ──────────────────
   Los 4 pasos (datos personales · direcciones · envío · pago) con el mismo
   lenguaje que el carrito: título-pestaña, tarjetas de vidrio, acento verde
   y píldoras. La barra de pasos de arriba (checkout-navigation.tpl) y el
   panel del resumen son los MISMOS componentes que en /carrito
   (components/_checkout-steps.scss y components/_cart-summary.scss): aquí
   no se repite ni una regla suya.

   Override de plantilla asociado (solo quita el <hr> del título del paso):
   templates/checkout/_partials/steps/checkout-step.tpl.
   El resto son las clases del tema padre y del core: no se toca el JS del
   checkout (avance de pasos, selección de transportista y de pago). */
body#checkout {
  /* ── Maqueta (2026-08-23): rejilla común del proceso de compra ────
     Raíl, wrappers transparentes y 3 columnas (panel de confianza · pasos ·
     resumen pegajoso) viven en layout/_process-grid.scss (.gh-process,
     compartida con /carrito y la confirmación). Aquí solo lo específico
     del pedido. */
  /* ── Paso · tarjeta de vidrio ───────────────────────────────────── */
}
body#checkout .step {
  background: var(--gh-glass-bg);
  -webkit-backdrop-filter: var(--gh-glass-blur);
  backdrop-filter: var(--gh-glass-blur);
  border: 1px solid var(--gh-glass-border);
  border-radius: var(--gh-radius-xl);
  box-shadow: var(--gh-shadow-lg), var(--gh-glass-hi);
  /* Sin soporte de backdrop-filter → claro casi opaco. */
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body#checkout .step {
    background: var(--gh-glass-bg-strong);
  }
}
body#checkout .step {
  /* El usuario pide menos transparencia → superficie sólida. */
}
@media (prefers-reduced-transparency: reduce) {
  body#checkout .step {
    background: var(--gh-white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
body#checkout .step {
  padding: 28px;
}
body#checkout {
  /* Pasos aún no alcanzables: presentes pero apagados. */
}
body#checkout .step--unreachable {
  opacity: 0.55;
}
body#checkout .step__title .page-title-section,
body#checkout .step__title-left {
  display: block;
  margin: 0;
  font-family: var(--gh-font-display);
  font-size: var(--gh-text-xl);
  font-weight: 700;
  letter-spacing: var(--gh-tracking-tight);
  color: var(--gh-grey-900);
}
body#checkout .step--current .step__title .page-title-section {
  color: var(--gh-green-800);
}
body#checkout .step__content {
  margin-top: var(--gh-space-4);
}
body#checkout {
  /* ── Pestañas «Pedir como invitado / Iniciar sesión» ────────────── */
}
body#checkout .nav-underline {
  gap: var(--gh-space-4);
  margin-bottom: var(--gh-space-5);
  border-bottom: 1px solid var(--gh-grey-200);
}
body#checkout .nav-underline .nav-link {
  padding: 8px 2px;
  font-size: var(--gh-text-sm);
  font-weight: 600;
  color: var(--gh-grey-500);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
body#checkout .nav-underline .nav-link:hover {
  color: var(--gh-green-700);
}
body#checkout .nav-underline .nav-link.active {
  color: var(--gh-green-800);
  border-bottom-color: var(--gh-green-600);
  background: transparent;
}
body#checkout {
  /* ── Campos de formulario (datos personales, dirección, cuenta) ─── */
}
body#checkout .form-label {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gh-grey-600);
}
body#checkout .form-text {
  font-size: var(--gh-text-xs);
  color: var(--gh-grey-500);
}
body#checkout .step .form-control,
body#checkout .step .form-select {
  padding: 12px 14px;
  font-family: var(--gh-font-body);
  font-size: 15px;
  color: var(--gh-grey-900);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--gh-grey-300);
  border-radius: var(--gh-radius-lg);
  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.04);
  transition: border-color var(--gh-duration-fast) var(--gh-ease-out), box-shadow var(--gh-duration-fast) var(--gh-ease-out), background var(--gh-duration-fast) var(--gh-ease-out);
}
body#checkout .step .form-control:focus,
body#checkout .step .form-select:focus {
  outline: none;
  border-color: var(--gh-green-400);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--gh-shadow-glow-green), inset 0 1px 2px rgba(10, 10, 10, 0.04);
}
body#checkout {
  /* «Nombre» y «Apellidos» en la misma fila (2026-08-24, petición del
     usuario). Los campos los pinta el core uno por uno (_partials/
     form-fields.tpl: <div class="mb-3"> con el <input id="field-…">), así
     que la fila se resuelve en la rejilla del contenedor: dos columnas,
     todo a ancho completo salvo esos dos. Mismo :has() que ya usan las
     opciones de envío y pago de esta página. */
}
body#checkout #customer-form > section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--gh-space-4);
}
body#checkout #customer-form > section > * {
  grid-column: 1/-1;
}
body#checkout #customer-form > section > .mb-3:has(#field-firstname),
body#checkout #customer-form > section > .mb-3:has(#field-lastname) {
  grid-column: auto;
}
body#checkout {
  /* Radios y checkboxes (tratamiento, RGPD, boletín, envío, pago) */
}
body#checkout .form-check-input:checked {
  background-color: var(--gh-green-600);
  border-color: var(--gh-green-600);
}
body#checkout .form-check-input:focus {
  border-color: var(--gh-green-400);
  box-shadow: var(--gh-shadow-glow-green);
}
body#checkout .form-check-label {
  font-size: var(--gh-text-sm);
  color: var(--gh-grey-700);
}
body#checkout .form-check-label em,
body#checkout .form-check-label small {
  display: block;
  margin-top: 2px;
  font-size: var(--gh-text-xs);
  font-style: normal;
  line-height: 1.5;
  color: var(--gh-grey-500);
}
body#checkout {
  /* Mostrar/ocultar contraseña · neutro, no compite con el CTA */
}
body#checkout .password-field .btn[data-ps-action=toggle-password] {
  background: var(--gh-white);
  border: 1px solid var(--gh-grey-300);
  border-left: 0;
  color: var(--gh-grey-600);
  border-radius: 0 var(--gh-radius-lg) var(--gh-radius-lg) 0;
}
body#checkout .password-field .form-control {
  border-radius: var(--gh-radius-lg) 0 0 var(--gh-radius-lg);
}
body#checkout {
  /* ── Botones · CTA verde + secundario discreto ──────────────────── */
  /* ── «Volver a: …» de los pasos (.js-back) · secundario neutro ──
     El padre los sirve como .btn-outline-primary (azul Bootstrap). Misma
     píldora gris que «Volver a la tienda» del carrito, recoloreada por las
     variables --bs-btn-* (la vía de la casa: nada de !important contra
     utilidades del padre). 2026-08-24, petición del usuario: fuera el azul. */
}
body#checkout .step .btn-outline-primary.js-back {
  --bs-btn-color: var(--gh-grey-700);
  --bs-btn-border-color: var(--gh-grey-300);
  --bs-btn-bg: var(--gh-white);
  --bs-btn-hover-color: var(--gh-green-800);
  --bs-btn-hover-bg: var(--gh-green-50);
  --bs-btn-hover-border-color: var(--gh-green-300);
  --bs-btn-active-color: var(--gh-green-800);
  --bs-btn-active-bg: var(--gh-green-100);
  --bs-btn-active-border-color: var(--gh-green-300);
  font-weight: 600;
  border-radius: var(--gh-radius-full);
}
body#checkout .step .btn-primary,
body#checkout .js-payment-confirmation .btn-primary {
  padding: 13px 26px;
  font-size: var(--gh-text-base);
  font-weight: 700;
  color: #fff;
  background-color: var(--gh-green-600);
  border-color: var(--gh-green-600);
  border-radius: var(--gh-radius-full);
}
body#checkout .step .btn-primary:hover,
body#checkout .step .btn-primary:focus,
body#checkout .step .btn-primary:active,
body#checkout .js-payment-confirmation .btn-primary:hover {
  color: #fff;
  background-color: var(--gh-green-700);
  border-color: var(--gh-green-700);
}
body#checkout .step .btn-primary:focus-visible {
  box-shadow: var(--gh-shadow-glow-green);
}
body#checkout .step .btn-primary.disabled,
body#checkout .step .btn-primary:disabled {
  background-color: var(--gh-grey-300);
  border-color: var(--gh-grey-300);
  color: var(--gh-grey-600);
  opacity: 1;
}
body#checkout {
  /* El toggle de contraseña también es .btn-primary en el padre: se excluye
     de la receta CTA para que no compita con el botón de continuar. */
}
body#checkout .step .password-field .btn-primary {
  padding: 0 14px;
  background-color: var(--gh-white);
  border-color: var(--gh-grey-300);
  color: var(--gh-grey-600);
  border-radius: 0 var(--gh-radius-lg) var(--gh-radius-lg) 0;
}
body#checkout .step .btn-basic,
body#checkout .step .btn-link {
  padding-left: 0;
  padding-right: 0;
  font-size: var(--gh-text-sm);
  font-weight: 600;
  color: var(--gh-grey-600);
  background: none;
  border: 0;
  text-decoration: none;
}
body#checkout .step .btn-basic:hover,
body#checkout .step .btn-link:hover {
  color: var(--gh-green-800);
  text-decoration: underline;
}
body#checkout .buttons-wrapper {
  margin-top: var(--gh-space-5);
  align-items: center;
}
body#checkout {
  /* ── Paso 2 · direcciones guardadas ─────────────────────────────── */
}
body#checkout .address {
  padding: var(--gh-space-4);
  background: var(--gh-white);
  border: 1px solid var(--gh-grey-200);
  border-radius: var(--gh-radius-lg);
  transition: border-color 0.18s var(--gh-ease-out), box-shadow 0.18s var(--gh-ease-out);
}
body#checkout .address + .address {
  margin-top: var(--gh-space-3);
}
body#checkout .address:hover {
  border-color: var(--gh-green-300);
}
body#checkout .address.selected {
  border-color: var(--gh-green-500);
  box-shadow: var(--gh-shadow-glow-green);
}
body#checkout .address__alias {
  font-family: var(--gh-font-display);
  font-weight: 700;
  color: var(--gh-grey-900);
}
body#checkout .address__actions {
  display: flex;
  gap: var(--gh-space-4);
  margin-top: var(--gh-space-2);
  font-size: var(--gh-text-sm);
}
body#checkout .address__edit {
  color: var(--gh-green-800);
}
body#checkout .address__delete {
  color: var(--gh-grey-500);
}
body#checkout .address__delete:hover {
  color: var(--gh-error);
}
body#checkout {
  /* ── Paso 3 · transportistas ────────────────────────────────────── */
}
body#checkout .delivery-option__item {
  padding: var(--gh-space-4);
  background: var(--gh-white);
  border: 1px solid var(--gh-grey-200);
  border-radius: var(--gh-radius-lg);
  transition: border-color 0.18s var(--gh-ease-out), box-shadow 0.18s var(--gh-ease-out);
}
body#checkout .delivery-option__item + .delivery-option__item {
  margin-top: var(--gh-space-3);
}
body#checkout .delivery-option__item:hover {
  border-color: var(--gh-green-300);
}
body#checkout .delivery-option__item:has(.form-check-input:checked) {
  border-color: var(--gh-green-500);
  box-shadow: var(--gh-shadow-glow-green);
}
body#checkout .delivery-option__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gh-space-4);
  flex-wrap: wrap;
}
body#checkout .delivery-option__carrier-name {
  font-weight: 600;
  color: var(--gh-grey-900);
}
body#checkout .delivery-option__carrier-logo img {
  max-height: 34px;
  width: auto;
}
body#checkout .delivery-option__price {
  font-family: var(--gh-font-display);
  font-size: var(--gh-text-lg);
  font-weight: 700;
  letter-spacing: var(--gh-tracking-tight);
  color: var(--gh-green-800);
  white-space: nowrap;
}
body#checkout .delivery-option__extra {
  margin-top: var(--gh-space-2);
}
body#checkout {
  /* ── Paso 4 · formas de pago y condiciones ──────────────────────── */
}
body#checkout .payment-option {
  padding: var(--gh-space-4);
  background: var(--gh-white);
  border: 1px solid var(--gh-grey-200);
  border-radius: var(--gh-radius-lg);
  transition: border-color 0.18s var(--gh-ease-out), box-shadow 0.18s var(--gh-ease-out);
}
body#checkout .payment-option + .payment-option {
  margin-top: var(--gh-space-3);
}
body#checkout .payment-option:hover {
  border-color: var(--gh-green-300);
}
body#checkout .payment-option:has(.form-check-input:checked) {
  border-color: var(--gh-green-500);
  box-shadow: var(--gh-shadow-glow-green);
}
body#checkout .payment-option__label {
  font-weight: 600;
  color: var(--gh-grey-900);
}
body#checkout .payment-option__additional-information {
  margin-top: var(--gh-space-2);
  font-size: var(--gh-text-sm);
  color: var(--gh-grey-600);
}
body#checkout .js-conditions-to-approve {
  padding: var(--gh-space-4);
  background: var(--gh-green-50);
  border: 1px solid var(--gh-green-200);
  border-radius: var(--gh-radius-lg);
}
body#checkout .js-payment-confirmation {
  margin-top: var(--gh-space-5);
}
body#checkout {
  /* ── Aside · resumen del pedido ─────────────────────────────────── */
  /* CTA, título-pestaña y panel («N artículos», «Ver detalles», totales,
     cupón) son el MISMO componente que en /carrito: components/_cart-summary.scss.
     Aquí solo el envoltorio de acordeón del padre: sin caja, y su cabecera
     (display:none en escritorio por el padre) con estilo discreto para el
     colapso en móvil (fase 2). */
}
body#checkout .checkout__summary-accordion-item,
body#checkout .checkout__summary-accordion .accordion-item {
  background: transparent;
  border: 0;
}
body#checkout .checkout__summary-accordion-header .accordion-button {
  padding: 4px 0;
  font-size: var(--gh-text-sm);
  font-weight: 600;
  color: var(--gh-green-800);
  background: transparent;
  box-shadow: none;
}
body#checkout {
  /* Avisos (errores de dirección, condiciones sin aceptar…) */
}
body#checkout .alert {
  border-radius: var(--gh-radius-lg);
  font-size: var(--gh-text-sm);
}
/* Botón real del paso activo, ocultado mientras el proxy lo sustituye */
.gh-checkout-cta-moved {
  display: none;
}

/* ─── CONFIRMACIÓN DE PEDIDO · /confirmacion-pedido (controller
   order-confirmation) ────────────────────────────────────────────────────
   Última pantalla del proceso de compra. La maqueta es la común del proceso
   (layout/_process-grid.scss): banda de confianza, raíl y rejilla --wide
   (menú de marcas + contenido). El contenido en sí (aviso, información de
   pago, detalle del pedido) es el del tema padre: PENDIENTE de vestir con
   el lenguaje del carrito (tarjetas de vidrio, título-pestaña, terminología
   de totales del resumen). Cuando se haga, irá aquí.

   Override de plantilla asociado: templates/checkout/order-confirmation.tpl
   (extends parent: · banda + rejilla, contenido del padre). */
body#order-confirmation {
  /* Sitio reservado para el vestido de la página (fase B del flujo de
     compra). Hoy no hace falta ninguna regla propia: todo lo pone la
     rejilla común. */
}

/* ════════════════════════════════════════════════════════════════════
   GH · Product flags & discount colours
   Override del azul Bootstrap (--bs-primary) en badges de producto
   y textos de descuento → paleta de marca:
     Descuento  → naranja acento  (#FF6B35)
     Otros flags → verde marca    (#2EA76F)
   ════════════════════════════════════════════════════════════════════ */
/* ── Badge "-XX%" sobre la imagen ─────────────────────────────────── */
.product-flags .badge.discount {
  background-color: var(--gh-green-700) !important;
  border-color: var(--gh-green-700) !important;
  color: #fff !important;
  font-weight: 700;
}

/* ── Resto de flags (Nuevo, Pack, Agotado…) → verde marca ─────────── */
.product-flags .badge:not(.discount) {
  background-color: var(--gh-green-500) !important;
  border-color: var(--gh-green-500) !important;
  color: #fff !important;
}

/* ── Texto "Ahorras X%" / "Ahorras X€" en el área de precios ─────── */
/* Bootstrap usa --bs-primary-text-emphasis como variable base de .text-primary-emphasis;
   hay que sobreescribir la variable Y el color directo para ganar la cascada. */
:root {
  --bs-primary-text-emphasis: var(--gh-green-700);
}

.product__discount-percentage,
.product__discount-amount,
.product__prices .text-primary-emphasis {
  color: var(--gh-green-700) !important;
}

/* ── Vista rápida · panel blanco sólido ───────────────────────────────
   Antes iba en liquid glass (superficie esmerilada + aurora IA); se pasó a
   blanco normal a petición (2026-07-05) conservando radio y sombra. El fondo
   del modal se sigue desenfocando SOLO con un quickview abierto. */
.quickview .quickview__content {
  background: #fff;
  border-radius: var(--gh-radius-2xl);
  box-shadow: var(--gh-shadow-2xl);
}

.quickview .quickview__header {
  border-bottom-color: rgba(15, 23, 42, 0.06);
}

body:has(.quickview.show) .modal-backdrop {
  background: rgba(15, 23, 42, 0.34);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
}

/* ===== Vista rápida · descripción ampliada debajo ===== */
/* En desktop el body es display:grid con 2 columnas (fotos | acciones).
   Forzamos a la descripción a ocupar todas las columnas como fila completa.
   Y dentro creamos un sub-grid 70/30 para main + aside. */
.quickview__description {
  grid-column: 1/-1;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bs-border-color, #e5e5e5);
  font-size: 0.95rem;
  line-height: 1.55;
}

.quickview__description-main {
  width: 100%;
  padding: 0 3rem;
}

.quickview__description-aside {
  display: none;
}

.quickview__description h2,
.quickview__description h3 {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.quickview__description h2:first-child,
.quickview__description h3:first-child {
  margin-top: 0;
}

.quickview__description img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0.75rem auto;
}

.quickview__description ul {
  padding-left: 1.25rem;
}

/* ── Botón "Añadir al carrito" del quickview · CTA degradado IA ───────
   Mismo CTA que en las cards de categoría (firma del estudio), para coherencia.
   Scoped a .page-product--quickview → solo la vista rápida. */
.page-product--quickview .product__add-to-cart-button.btn {
  background-color: transparent;
  background-image: var(--gh-ai-grad);
  border: 0;
  color: #ffffff;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  box-shadow: 0 6px 16px rgba(123, 95, 175, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: box-shadow var(--gh-duration-base) var(--gh-ease-out), transform 0.05s ease;
}

.page-product--quickview .product__add-to-cart-button.btn:hover,
.page-product--quickview .product__add-to-cart-button.btn:focus,
.page-product--quickview .product__add-to-cart-button.btn:focus-visible,
.page-product--quickview .product__add-to-cart-button.btn:active {
  background-color: transparent;
  background-image: var(--gh-ai-grad);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(123, 95, 175, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.page-product--quickview .product__add-to-cart-button.btn:active {
  transform: translateY(1px);
}

/* ── Precio en la vista rápida → verde de marca (igual que en el grid) ── */
.page-product--quickview .product__price {
  color: var(--gh-green-700);
  font-weight: 700;
}

/* Los trust signals (grid + fila de pago) viven ahora en el componente
   compartido components/_product-trust.scss (.gh-ptrust), usado también
   por la ficha de producto. */
/* ════════════════════════════════════════════════════════════════════
   GH · Toggle de vista del listado (rejilla / lista) + vista en LISTA.
   Los botones viven en products-top.tpl; el JS (gh-view.js) alterna la clase
   .products--list sobre el grid .products y recuerda la preferencia.
   ════════════════════════════════════════════════════════════════════ */
/* ── Botones del toggle ─────────────────────────────────────────────── */
.gh-viewtoggle {
  display: inline-flex;
  gap: 4px;
  margin-left: var(--gh-space-3);
}

.gh-viewtoggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: var(--gh-white, #fff);
  border: 1px solid var(--gh-grey-300, #d4d4d4);
  border-radius: 6px;
  color: var(--gh-grey-500, #737373);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.gh-viewtoggle__btn:hover {
  color: var(--gh-grey-800, #262626);
  border-color: var(--gh-grey-400, #a3a3a3);
}

.gh-viewtoggle__btn.is-active {
  color: var(--gh-green-700);
  border-color: var(--gh-green-600);
  background: var(--gh-green-50, #f4faf7);
}

/* ── Vista en LISTA ─────────────────────────────────────────────────
   .products.products--list (2 clases) gana al grid del padre (.products,
   1 clase) sin !important. Cada ficha pasa a fila horizontal:
   imagen a la izquierda · info + acciones a la derecha. */
.products.products--list {
  grid-template-columns: 1fr;
  gap: var(--gh-space-4);
}

.products--list .product-miniature__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--gh-space-6);
}

.products--list .product-miniature__top {
  flex: 0 0 150px;
  max-width: 150px;
}

.products--list .product-miniature__bottom {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--gh-space-6);
}

.products--list .product-miniature__infos {
  flex: 1 1 auto;
}

.products--list .product-miniature__actions {
  flex: 0 0 auto;
}

/* En móvil, la lista vuelve a apilar info bajo la imagen para que quepa. */
/* ── ghcatsmenu · Sidebar "Marcas + Categorías" · home · liquid glass ───
   El módulo se renderiza dentro de .gh-brands__sidebar (index.tpl).
   El sidebar pasa a ser un wrapper neutro; .ghcm es la superficie visual. */
/* Vaciar el contenedor del sidebar para que .ghcm defina el aspecto */
.gh-brands__sidebar {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* ─── Contenedor principal · glass con aurora propia ────────────────── */
.ghcm {
  position: relative;
  overflow: hidden;
  border-radius: var(--gh-radius-2xl);
  background: radial-gradient(28rem 18rem at 10% 5%, rgba(66, 133, 244, 0.13), transparent 58%), radial-gradient(22rem 15rem at 90% 95%, rgba(232, 97, 140, 0.11), transparent 55%), var(--gh-glass-bg-strong);
  -webkit-backdrop-filter: var(--gh-glass-blur);
  backdrop-filter: var(--gh-glass-blur);
  border: 1px solid var(--gh-glass-border);
  box-shadow: var(--gh-shadow-xl), var(--gh-glass-hi);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ghcm {
    background: var(--gh-white);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .ghcm {
    background: var(--gh-white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Barra degradado IA en el borde superior */
.ghcm::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gh-ai-grad);
  border-radius: var(--gh-radius-2xl) var(--gh-radius-2xl) 0 0;
  z-index: 1;
  pointer-events: none;
}

/* ─── Secciones ─────────────────────────────────────────────────────── */
.ghcm__section {
  padding: var(--gh-space-4) var(--gh-space-5);
}

.ghcm__section--brands {
  padding-top: calc(var(--gh-space-4) + 3px); /* compensa la barra AI */
}

.ghcm__section + .ghcm__section {
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

/* ─── Encabezados de sección ────────────────────────────────────────── */
.ghcm__heading {
  margin: 0 0 var(--gh-space-3) 0;
  font-family: var(--gh-font-body);
  font-size: var(--gh-text-xs);
  font-weight: 700;
  letter-spacing: var(--gh-tracking-widest);
  text-transform: uppercase;
  color: var(--gh-grey-500);
}

/* ─── Brands · rejilla 2 columnas ───────────────────────────────────── */
.ghcm__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gh-space-2);
}

.ghcm__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gh-space-2);
  padding: var(--gh-space-3) var(--gh-space-2);
  border-radius: var(--gh-radius-lg);
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: background var(--gh-duration-fast) var(--gh-ease-out), transform var(--gh-duration-fast) var(--gh-ease-spring), box-shadow var(--gh-duration-fast) var(--gh-ease-out), border-color var(--gh-duration-fast) var(--gh-ease-out);
}

.ghcm__card:hover {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(155, 114, 203, 0.4);
  transform: translateY(-3px);
  box-shadow: var(--gh-shadow-md), 0 0 0 1px rgba(155, 114, 203, 0.12);
}

/* Monograma · degradado AI, mismo que el botón NEXT */
.ghcm__card-mono {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gh-ai-grad);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--gh-font-display);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(123, 95, 175, 0.32);
  letter-spacing: 0;
  flex-shrink: 0;
}

.ghcm__card-name {
  font-family: var(--gh-font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--gh-grey-700);
  text-align: center;
  line-height: 1.25;
  letter-spacing: 0;
}

.ghcm__card:hover .ghcm__card-name {
  color: var(--gh-grey-900);
}

/* ─── Categorías · lista con chevron ────────────────────────────────── */
.ghcm__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ghcm__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gh-space-2);
  padding: var(--gh-space-2) var(--gh-space-3);
  border-radius: var(--gh-radius-md);
  font-family: var(--gh-font-body);
  font-size: var(--gh-text-sm);
  font-weight: 500;
  color: var(--gh-grey-700);
  text-decoration: none;
  transition: background var(--gh-duration-fast) var(--gh-ease-out), color var(--gh-duration-fast) var(--gh-ease-out), transform var(--gh-duration-fast) var(--gh-ease-out);
}

.ghcm__link:hover {
  background: rgba(255, 255, 255, 0.72);
  color: var(--gh-green-800);
  transform: translateX(3px);
}

.ghcm__link-name {
  flex: 1;
}

.ghcm__link-chevron {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  color: var(--gh-green-600);
  opacity: 0;
  transition: opacity var(--gh-duration-fast) var(--gh-ease-out);
}

.ghcm__link:hover .ghcm__link-chevron {
  opacity: 1;
}