:root {
  --hs-accent: #EC1A8F;          /* marca: logo ©, palabras display, dots, iconos, superficies decorativas */
  --hs-accent-fill: #d11680;     /* COLORIZE 2026-09-15: relleno de botones/badges con texto blanco (5,08:1; #EC1A8F daba 4,11) */
  --hs-accent-text: #c8147a;     /* COLORIZE: magenta como texto pequeño sobre crema/beige/blanco (4,9 / 4,56 / 5,47:1) */
  --hs-accent-hover: #b3126a;    /* un paso más oscuro que el fill (6,54:1 con blanco) */
  --hs-accent-ink: #ffffff;
  --hs-success: #1F8A5B;
  /* COLORIZE 2026-09-16: estados fuera de sistema (rojo/ámbar de Tailwind, 4,3:1 y 1,9:1) → tokens propios AA */
  --hs-danger: #b3261e;          /* 5,85:1 en crema */
  --hs-danger-bg: #fbefed;
  --hs-warn: #9a5b00;            /* 4,86:1 en crema (ámbar var(--hs-warn) daba 1,9) */
  --hs-warn-bg: #fbf3e6;
  /* POLISH 2026-09-16: sombra de elevación de los CTA, neutra (antes halo magenta rgba(236,26,143,.4-.55)) */
  --hs-shadow-cta: 0 10px 24px -12px rgba(10, 10, 10, 0.35);
  --hs-font-display: 'Archivo Black', 'Archivo Black FB', 'Archivo Black FB2', 'Arial Black', sans-serif;
  --hs-font-body: 'Inter', 'Inter FB', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --hs-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --hs-max: 1280px;
  --hs-gutter: 32px;
  --hs-gutter-mobile: 20px;
  --hs-radius-sm: 6px;
  --hs-radius: 10px;
  --hs-radius-lg: 18px;
  --hs-radius-pill: 999px;
  --hs-space-1: 4px;
  --hs-space-2: 8px;
  --hs-space-3: 12px;
  --hs-space-4: 16px;
  --hs-space-5: 24px;
  --hs-space-6: 32px;
  --hs-space-7: 48px;
  --hs-space-8: 64px;
  --hs-space-9: 96px;
  --hs-transition: .15s ease;
  --hs-transition-md: .2s ease;
  /* ANIMATE 2026-09-16 · tokens de motion (Emil Kowalski): entradas/salidas ease-out fuerte,
     movimiento en pantalla ease-in-out, drawers curva iOS. UI < 300ms; salida más corta que entrada. */
  --hs-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --hs-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --hs-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --hs-dur-fast: 150ms;
  --hs-dur-base: 250ms;
  --hs-dur-slow: 380ms;
}

.theme-light,
body:not(.theme-dark) {
  --hs-bg: #f6f2ea;
  --hs-bg-alt: #ffffff;
  --hs-surface: #ffffff;
  --hs-surface-alt: #efeae0;
  --hs-surface-soft: #faf7f0;
  --hs-text: #0a0a0a;
  --hs-text-mute: #6b6660;
  --hs-text-faint: #6e6961;     /* COLORIZE: antes #a8a39b (2,25:1). Ahora 4,6:1 en crema; Faint queda para bordes/decoración vía --hs-border */
  --hs-border: #e4ddcf;
  --hs-border-soft: #efeae0;
  --hs-tag-bg: rgba(10, 10, 10, 0.06);
  --hs-shadow-card: 0 1px 0 rgba(0, 0, 0, 0.04),
                          0 6px 24px -8px rgba(0, 0, 0, 0.10);
  --hs-shadow-card-hover: 0 1px 0 rgba(0, 0, 0, 0.04),
                          0 14px 40px -10px rgba(0, 0, 0, 0.18);
  /* K2d: tinte rosa de paneles de cuenta/login (spec: .05 claro / .13 oscuro) */
  --hs-due-tint: rgba(236, 26, 143, 0.05);
}

.theme-dark {
  --hs-due-tint: rgba(236, 26, 143, 0.13);
  --hs-bg: #0a0a0a;
  --hs-bg-alt: #141414;
  --hs-surface: #141414;
  --hs-surface-alt: #1c1c1c;
  --hs-surface-soft: #161616;
  --hs-text: #ffffff;
  --hs-text-mute: #9a9a9a;
  --hs-text-faint: #8f8f8f;     /* COLORIZE: 5,6:1 sobre onyx (antes 2,6:1) */
  --hs-border: #262626;
  --hs-border-soft: #1c1c1c;
  --hs-tag-bg: rgba(255, 255, 255, 0.08);
  --hs-shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.05),
                          0 14px 40px -10px rgba(0, 0, 0, 0.6);
  --hs-shadow-card-hover: 0 0 0 1px rgba(255, 255, 255, 0.10),
                          0 18px 48px -14px rgba(0, 0, 0, 0.7); /* POLISH: antes halo magenta */
}

.hs-site {
  font-family: var(--hs-font-body);
  color: var(--hs-text);
  background: var(--hs-bg);
  line-height: 1.5;
  width: 100%;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.hs-site *,
.hs-site *::before,
.hs-site *::after {
  box-sizing: border-box;
}
.hs-site button {
  font-family: inherit;
  cursor: pointer;
}
.hs-site img,
.hs-site svg {
  display: block;
  max-width: 100%;
}
.hs-site a {
  color: inherit;
  text-decoration: none;
}
.hs-site h1, .hs-site h2, .hs-site h3, .hs-site h4 {
  margin: 0;
}
.hs-site p {
  margin: 0;
}
.hs-site ul, .hs-site ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hs-display, .hs-h4-product, .hs-h3-subsection, .hs-h2-section, .hs-h1-page, .hs-h1-hero {
  font-family: var(--hs-font-display);
  letter-spacing: -0.025em;
  line-height: 0.95;
}

.hs-h1-hero {
  font-size: 56px;
  letter-spacing: -0.03em;
}
@media (min-width: 768px) {
  .hs-h1-hero {
    font-size: 88px;
  }
}
@media (min-width: 1024px) {
  .hs-h1-hero {
    font-size: 120px;
  }
}

.hs-h1-page {
  font-size: 44px;
}
@media (min-width: 768px) {
  .hs-h1-page {
    font-size: 56px;
  }
}
@media (min-width: 1024px) {
  .hs-h1-page {
    font-size: 72px;
  }
}

.hs-h2-section {
  font-size: 36px;
}
@media (min-width: 768px) {
  .hs-h2-section {
    font-size: 48px;
  }
}
@media (min-width: 1024px) {
  .hs-h2-section {
    font-size: 56px;
  }
}

.hs-h3-subsection {
  font-size: 28px;
}
@media (min-width: 768px) {
  .hs-h3-subsection {
    font-size: 36px;
  }
}

.hs-h4-product {
  font-size: 20px;
}
@media (min-width: 768px) {
  .hs-h4-product {
    font-size: 22px;
  }
}

.hs-lead {
  font-size: 17px;
  line-height: 1.55;
  font-weight: 500;
}

.hs-body {
  font-size: 15px;
  line-height: 1.55;
}

.hs-default {
  font-size: 13px;
  line-height: 1.5;
}

.hs-small {
  font-size: 12px;
  color: var(--hs-text-mute);
}

.hs-eyebrow {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hs-accent-text);
}

.hs-eyebrow-mute {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
}

.hs-mono {
  font-family: var(--hs-font-mono);
}

.hs-stat-num {
  font-family: var(--hs-font-display);
  font-size: 56px;
  letter-spacing: -0.03em;
  line-height: 0.95;
}

.hs-container {
  max-width: var(--hs-max);
  margin: 0 auto;
  padding: 0 var(--hs-gutter-mobile);
}
@media (min-width: 768px) {
  .hs-container {
    padding: 0 var(--hs-gutter);
  }
}

.hs-pad-section {
  padding: 64px 0;
}
@media (min-width: 768px) {
  .hs-pad-section {
    padding: 96px 0;
  }
}

.hs-pad-section-sm {
  padding: 48px 0;
}
@media (min-width: 768px) {
  .hs-pad-section-sm {
    padding: 64px 0;
  }
}

.hs-hr {
  border: 0;
  border-top: 1px solid var(--hs-border);
  margin: 0;
}

.hs-marquee {
  border-top: 1px solid var(--hs-border);
  border-bottom: 1px solid var(--hs-border);
  padding: 16px 0;
  overflow: hidden;
}

.hs-marquee-row {
  display: flex;
  gap: 56px;
  white-space: nowrap;
  font-family: var(--hs-font-display);
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--hs-text);
}
.hs-marquee-row .dot {
  color: var(--hs-accent-text);
}

.hs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--hs-radius-pill);
  font-family: var(--hs-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 0;
  background: var(--hs-accent-fill);
  color: var(--hs-accent-ink);
  transition: transform var(--hs-transition), background var(--hs-transition);
  cursor: pointer;
  text-decoration: none;
}
.hs-btn:hover {
  background: var(--hs-accent-hover);
  transform: translateY(-1px);
  color: var(--hs-accent-ink);
}
.hs-btn:focus-visible {
  outline: 2px solid var(--hs-accent);
  outline-offset: 3px;
}
.hs-btn.lg {
  padding: 18px 34px;
  font-size: 13px;
}
.hs-btn.sm {
  padding: 10px 18px;
  font-size: 11px;
  letter-spacing: 0.14em;
}
.hs-btn.outline {
  background: transparent;
  border: 1.5px solid var(--hs-text);
  color: var(--hs-text);
}
.hs-btn.outline:hover {
  background: var(--hs-text);
  color: var(--hs-bg);
  transform: translateY(-1px);
}
.hs-btn.dark {
  background: var(--hs-text);
  color: var(--hs-bg);
}
.hs-btn.dark:hover {
  background: #1a1a1a;
  color: var(--hs-bg);
}
.hs-btn.ghost {
  background: transparent;
  color: var(--hs-text);
  padding-left: 0;
  padding-right: 0;
}
.hs-btn.ghost:hover {
  color: var(--hs-accent-text);
  transform: none;
  background: transparent;
}
.hs-btn.block {
  width: 100%;
}

.hs-link {
  display: inline-block;
  font-family: var(--hs-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hs-text);
  border-bottom: 2px solid var(--hs-accent);
  padding-bottom: 2px;
  transition: color var(--hs-transition);
  text-decoration: none;
}
.hs-link:hover {
  color: var(--hs-accent-text);
}

.hs-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--hs-font-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 6px 10px;
  border-radius: 4px;
  background: var(--hs-accent-fill);
  color: var(--hs-accent-ink);
  line-height: 1;
  white-space: nowrap;
}
.hs-badge.new {
  background: var(--hs-text);
  color: var(--hs-bg);
}
.hs-badge.in-stock {
  background: var(--hs-success);
  color: #ffffff;
}
.hs-badge.ltd {
  background: transparent;
  color: var(--hs-accent-text);
  border: 1.5px solid var(--hs-accent);
  padding: 4.5px 8.5px;
}
.hs-badge.soft {
  background: var(--hs-tag-bg);
  color: var(--hs-text);
}
.hs-badge.dark {
  background: var(--hs-text);
  color: var(--hs-bg);
}

.hs-card {
  background: var(--hs-surface);
  border-radius: var(--hs-radius);
  overflow: hidden;
  transition: box-shadow var(--hs-transition-md), transform var(--hs-transition-md);
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
}
.hs-card:hover {
  box-shadow: var(--hs-shadow-card-hover);
  transform: translateY(-2px);
  color: inherit;
}
.hs-card:hover .hs-quickadd,
.hs-card:focus-within .hs-quickadd { /* HARDEN: también al tabular */
  opacity: 1;
  transform: translateY(0);
}

.hs-card-media {
  position: relative;
  aspect-ratio: 1/1;
  background: var(--hs-surface-soft);
  overflow: hidden;
}
.hs-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hs-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}

.hs-card-body {
  padding: 16px 18px 20px;
}

.hs-card-brand {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
  margin-bottom: 6px;
}

.hs-card-title {
  font-family: var(--hs-font-display);
  font-size: 20px;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--hs-text);
  margin-bottom: 12px;
}
@media (min-width: 768px) {
  .hs-card-title {
    font-size: 22px;
  }
}

.hs-card-price {
  font-family: var(--hs-font-display);
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--hs-text);
}
.hs-card-price .strike {
  color: var(--hs-text-faint);
  text-decoration: line-through;
  font-size: 14px;
  margin-left: 8px;
}

.hs-quickadd {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  background: var(--hs-text);
  color: var(--hs-bg);
  padding: 12px;
  border-radius: var(--hs-radius-pill);
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--hs-transition-md), transform var(--hs-transition-md);
  border: 0;
  cursor: pointer;
}
@media (max-width: 767px) {
  .hs-quickadd {
    opacity: 1;
    transform: translateY(0);
  }
}

.hs-input, .hs-textarea {
  background: var(--hs-bg-alt);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-pill);
  padding: 14px 22px;
  font-family: var(--hs-font-body);
  font-size: 14px;
  color: var(--hs-text);
  outline: none;
  transition: border-color var(--hs-transition);
  width: 100%;
}
.hs-input:focus, .hs-textarea:focus {
  border-color: var(--hs-accent);
}
.hs-input::placeholder, .hs-textarea::placeholder {
  color: var(--hs-text-faint);
}

.hs-textarea {
  border-radius: var(--hs-radius);
  resize: vertical;
  min-height: 120px;
  padding: 14px 18px;
}

.hs-label {
  display: block;
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
  margin-bottom: 8px;
}
/* ============================================================ */
/* HIGHSUPPLY OVERRIDES — sobreescribe Warehouse                 */
/* ============================================================ */

/* Todos los títulos del sitio usan Archivo Black */
body h1,
body h2,
body h3,
body .h1,
body .h2,
body .h3,
body .page-title,
body .product-name,
body .product-title,
body .h-title,
body .title-block {
  font-family: 'Archivo Black', 'Archivo Black FB', 'Archivo Black FB2', 'Arial Black', sans-serif !important;
  letter-spacing: -0.025em !important;
  line-height: 0.95 !important;
  font-weight: normal !important;
}

/* Texto del body con Inter */
body,
body p,
body span,
body div,
body a,
body li {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* El magenta del acento sobre los enlaces principales */
body a.highlight,
body .text-primary {
  color: var(--hs-accent-text) !important;
}
/* PRUEBA: forzar el título de hero a Archivo Black grande */
.elementor-heading-title,
.banner-text h1,
.iqit-text-banner h1,
.iqit-text-banner h2 {
  font-family: 'Archivo Black', 'Archivo Black FB', 'Archivo Black FB2', 'Arial Black', sans-serif !important;
  font-size: 88px !important;
  letter-spacing: -0.03em !important;
  line-height: 0.92 !important;
  text-transform: none !important;
}

/* Y un test definitivo: pinta el logo en magenta para confirmar que el CSS está actuando */
.header-logo a,
.logo a,
.logo-container a {
  color: #EC1A8F !important;
}
/* FORZAR ARCHIVO BLACK EN EL HERO DE LA HOME (selector hipespecífico) */
.elementor-element.elementor-element-u60rkil .elementor-heading-title,
.elementor-element.elementor-element-u60rkil .elementor-heading-title *,
.banner-text h1,
.banner-text h2,
.iqit-text-banner h1,
.iqit-text-banner h2,
.elementor-heading-title {
  font-family: 'Archivo Black', 'Archivo Black FB', 'Archivo Black FB2', 'Arial Black', sans-serif !important;
  font-weight: normal !important;
  text-transform: none !important;
  letter-spacing: -0.03em !important;
  line-height: 0.95 !important;
}

/* Y reducimos el tamaño para que no rompa el layout */
.elementor-heading-title,
.banner-text h1,
.iqit-text-banner h1 {
  font-size: 64px !important;
}
/* Trampa para forzar a Google Fonts a descargar Archivo Black y JetBrains Mono */
body::before {
  content: 'a';
  font-family: 'Archivo Black';
  position: absolute;
  visibility: hidden;
  width: 0;
  height: 0;
  overflow: hidden;
}

body::after {
  content: 'a';
  font-family: 'JetBrains Mono';
  position: absolute;
  visibility: hidden;
  width: 0;
  height: 0;
  overflow: hidden;
}
/* ============================================================ */
/* AMPLIAR ARCHIVO BLACK A TODA LA FICHA DE PRODUCTO              */
/* ============================================================ */

body#product h1,
body#product h1 *,
body#product h2,
body#product h2 *,
body#product h3,
body#product h3 *,
body#product h4,
body#product h4 *,
body#product h5,
body#product h5 *,
body#product h6,
body#product h6 *,
body#product .h1,
body#product .h2,
body#product .h3,
body#product .h4,
body#product .h5,
body#product .h6,
body#product .product-name,
body#product .product-title,
body#product .page-title,
body#product .current-price,
body#product .product-price,
body#product [class*="price"] {
  font-family: 'Archivo Black', 'Archivo Black FB', 'Archivo Black FB2', 'Arial Black', sans-serif !important;
  font-weight: normal !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
}
/* ============================================================ */
/* CARDS DE PRODUCTO EN LISTADOS — Inter, no Archivo Black       */
/* ============================================================ */

/* Nombre del producto: Inter medium, 18px */
.hs-card-title,
.hs-card-title a,
.product-miniature .product-title,
.product-miniature .product-title a,
.product-miniature h2,
.product-miniature h3 {
  font-family: 'Inter', 'Inter FB', -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  letter-spacing: -0.005em !important;
  line-height: 1.25 !important;
  text-transform: none !important;
  color: #0a0a0a !important;
}

/* Precio: Archivo Black 24px (mismo display que título, coherente con mockup) */
.hs-card-price,
.hs-card-price .product-price,
.product-miniature .product-price,
.product-miniature .price,
.product-price-and-shipping,
.product-price-and-shipping .product-price {
  font-family: 'Archivo Black', 'Archivo Black FB', 'Archivo Black FB2', 'Arial Black', sans-serif !important;
  font-weight: normal !important;
  font-size: 24px !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  color: #0a0a0a !important;
}

/* Marca arriba en eyebrow */
.hs-card-brand,
.product-miniature .product-category-name,
.product-miniature .product-brand {
  font-family: 'Inter', 'Inter FB', -apple-system, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #6b6660 !important;
  margin-bottom: 8px !important;
}
/* ============================================================ */
/* LISTADO DE CATEGORÍA — MODO EDITORIAL CREMA                   */
/* ============================================================ */

/* A · Fondo crema en la página de listado/categoría */
:is(body#category, body#manufacturer) {
  background: #f6f2ea !important;
}

:is(body#category, body#manufacturer) main,
:is(body#category, body#manufacturer) #wrapper,
:is(body#category, body#manufacturer) #content-wrapper,
:is(body#category, body#manufacturer) #main,
:is(body#category, body#manufacturer) #js-product-list,
:is(body#category, body#manufacturer) .block-category {
  background: transparent !important;
}

/* B · Card body alineado a la IZQUIERDA */
:is(body#category, body#manufacturer) .product-miniature .hs-card-body,
:is(body#category, body#manufacturer) .product-miniature .product-description,
:is(body#category, body#manufacturer) .product-miniature .product-title,
:is(body#category, body#manufacturer) .product-miniature .product-price-and-shipping,
:is(body#category, body#manufacturer) .product-miniature .hs-card-brand,
:is(body#category, body#manufacturer) .product-miniature .hs-card-title,
:is(body#category, body#manufacturer) .product-miniature .hs-card-price {
  text-align: left !important;
  align-items: flex-start !important;
}

/* Quitar centrado heredado de Warehouse (pl_grid_align = center) */
:is(body#category, body#manufacturer) .product-miniature {
  text-align: left !important;
}

/* Card = contenedor blanco con borde y elevación al hover, como .hs-rail-card */
:is(body#category, body#manufacturer) .product-miniature .hs-card-media {
  background: var(--hs-surface-soft) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

:is(body#category, body#manufacturer) .product-miniature {
  background: var(--hs-surface) !important;
  border: 1px solid var(--hs-border) !important;
  border-radius: var(--hs-radius) !important;
  overflow: hidden !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
:is(body#category, body#manufacturer) .product-miniature:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--hs-shadow-card-hover) !important;
}

:is(body#category, body#manufacturer) .product-miniature .product-description,
:is(body#category, body#manufacturer) .product-miniature .hs-card-body {
  padding: 14px 4px 8px !important;
}

/* C · Botón "Añadir al carrito" en negro sólido pill (estilo mockup) */
:is(body#category, body#manufacturer) .product-miniature .add-to-cart,
:is(body#category, body#manufacturer) .product-miniature button.add-to-cart,
:is(body#category, body#manufacturer) .product-miniature .btn-product-list,
:is(body#category, body#manufacturer) .product-miniature a.btn-product-list,
:is(body#category, body#manufacturer) .product-miniature .btn.add-to-cart {
  background: #0a0a0a !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 12px 22px !important;
  font-family: 'Inter', 'Inter FB', -apple-system, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  transition: background .15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

:is(body#category, body#manufacturer) .product-miniature .add-to-cart:hover,
:is(body#category, body#manufacturer) .product-miniature button.add-to-cart:hover,
:is(body#category, body#manufacturer) .product-miniature .btn-product-list:hover,
:is(body#category, body#manufacturer) .product-miniature .btn.add-to-cart:hover {
  background: var(--hs-accent-fill) !important;
  color: #ffffff !important;
}

/* D · Título de la categoría en Archivo Black gigante editorial */
:is(body#category, body#manufacturer) #js-product-list-header h1,
:is(body#category, body#manufacturer) #js-product-list-header h1 span,
:is(body#category, body#manufacturer) #js-product-list-header .h1,
:is(body#category, body#manufacturer) #js-product-list-header .h1 span,
:is(body#category, body#manufacturer) h1.page-title,
:is(body#category, body#manufacturer) h1.page-title span,
:is(body#category, body#manufacturer) .page-title,
:is(body#category, body#manufacturer) .page-title span {
  font-family: 'Archivo Black', 'Archivo Black FB', 'Archivo Black FB2', 'Arial Black', sans-serif !important;
  font-weight: normal !important;
  font-size: 72px !important;
  letter-spacing: -0.04em !important;
  line-height: 0.95 !important;
  text-transform: none !important;
  color: #0a0a0a !important;
  text-align: left !important;
}

/* Capitalizar el primer caracter del título (Warehouse lo pone en mayúsculas) */
:is(body#category, body#manufacturer) #js-product-list-header h1 span {
  text-transform: lowercase !important;
  display: inline-block !important;
}

:is(body#category, body#manufacturer) #js-product-list-header h1 span::first-letter {
  text-transform: uppercase !important;
}

/* Punto magenta final tras el título */
:is(body#category, body#manufacturer) #js-product-list-header h1::after {
  content: '.';
  color: #EC1A8F;
  font-family: 'Archivo Black', 'Archivo Black FB', 'Archivo Black FB2', 'Arial Black', sans-serif;
}

/* Eyebrow viejo desactivado — ahora se renderiza desde category-header.tpl
   como HTML real para incluir el conteo dinámico de productos */
:is(body#category, body#manufacturer) #js-product-list-header::before {
  content: none !important;
  display: none !important;
}

/* Nuevo eyebrow: "CATEGORÍA · N PRODUCTOS" */
:is(body#category, body#manufacturer) .hs-category-eyebrow {
  font-family: 'Inter', 'Inter FB', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hs-accent-text);
  margin-top: 24px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
:is(body#category, body#manufacturer) .hs-category-eyebrow-sep {
  opacity: 0.6;
}
:is(body#category, body#manufacturer) .hs-category-eyebrow-count {
  color: var(--hs-accent-text);
}

/* Ocultar contenedor extra que produce el cuadrado magenta solitario */
:is(body#category, body#manufacturer) .block-category::before,
:is(body#category, body#manufacturer) .block-category::after {
  display: none !important;
}

/* Sidebar de categorías limpia */
:is(body#category, body#manufacturer) #left-column .block-categories,
:is(body#category, body#manufacturer) #left-column .block {
  background: transparent !important;
  border: 0 !important;
  padding: 16px 0 !important;
}

:is(body#category, body#manufacturer) #left-column h2,
:is(body#category, body#manufacturer) #left-column .h2 {
  font-family: 'Archivo Black', 'Archivo Black FB', 'Archivo Black FB2', 'Arial Black', sans-serif !important;
  font-size: 20px !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: #0a0a0a !important;
}

:is(body#category, body#manufacturer) #left-column a {
  font-family: 'Inter', 'Inter FB', sans-serif !important;
  font-size: 14px !important;
  color: #0a0a0a !important;
}

:is(body#category, body#manufacturer) #left-column a:hover {
  color: var(--hs-accent-text) !important;
}

/* ============================================================ */
/* SIDEBAR DE CATEGORÍA — FILTROS ESTILO REDISEÑO                */
/* ============================================================ */

/* Contenedor general del sidebar (el padding definitivo lo fija la regla de
   "Sidebar: estilo editorial", más abajo — esta queda como fallback) */
:is(body#category, body#manufacturer) #left-column {
  padding-left: 15px !important;
  padding-right: 24px !important;
}

:is(body#category, body#manufacturer) #left-column .block,
:is(body#category, body#manufacturer) #left-column .block-categories,
:is(body#category, body#manufacturer) #left-column section {
  background: transparent !important;
  border: 0 !important;
  padding: 0 0 32px 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}

/* Título de cada bloque del sidebar ("VAPORIZADORES", etc.) */
:is(body#category, body#manufacturer) #left-column .block h2,
:is(body#category, body#manufacturer) #left-column .block .h2,
:is(body#category, body#manufacturer) #left-column h2,
:is(body#category, body#manufacturer) #left-column .category-top-menu > li > .h6 {
  font-family: 'Inter', 'Inter FB', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #6b6660 !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #e4ddcf !important;
}

/* Items del sidebar */
:is(body#category, body#manufacturer) #left-column ul,
:is(body#category, body#manufacturer) #left-column .category-top-menu {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

:is(body#category, body#manufacturer) #left-column li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

:is(body#category, body#manufacturer) #left-column li a,
:is(body#category, body#manufacturer) #left-column .category-sub-menu li a {
  display: block !important;
  font-family: 'Inter', 'Inter FB', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #0a0a0a !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid transparent !important;
  text-decoration: none !important;
  transition: color .15s, transform .15s var(--hs-ease-out) !important; /* ANIMATE: antes animaba padding-left (layout) */
}

:is(body#category, body#manufacturer) #left-column li a::before {
  content: '' !important;
  display: none !important;
}

:is(body#category, body#manufacturer) #left-column li a:hover {
  color: var(--hs-accent-text) !important;
  transform: translateX(6px); /* ANIMATE: antes padding-left (layout) */
}

/* Quitar las flechas > heredadas de Warehouse en los items */
:is(body#category, body#manufacturer) #left-column .arrows,
:is(body#category, body#manufacturer) #left-column .navbar-toggler,
:is(body#category, body#manufacturer) #left-column .arrow-right,
:is(body#category, body#manufacturer) #left-column i.material-icons,
:is(body#category, body#manufacturer) #left-column .arrow {
  display: none !important;
}

/* Categoría activa */
:is(body#category, body#manufacturer) #left-column li.current a,
:is(body#category, body#manufacturer) #left-column li.active a,
:is(body#category, body#manufacturer) #left-column li > a.active {
  color: var(--hs-accent-text) !important;
  font-weight: 700 !important;
}

/* Submenús anidados con sangrado sutil */
:is(body#category, body#manufacturer) #left-column .category-sub-menu {
  padding-left: 0 !important;
  margin-top: 4px !important;
}

:is(body#category, body#manufacturer) #left-column .category-sub-menu li a {
  font-size: 13px !important;
  color: #6b6660 !important;
  padding: 8px 0 !important;
  padding-left: 16px !important;
}

:is(body#category, body#manufacturer) #left-column .category-sub-menu li a:hover {
  color: var(--hs-accent-text) !important;
  padding-left: 22px !important;
}
/* ============================================================ */
/* CARDS POLAROID - AFINADO AL SISTEMA DE SPACING                */
/* ============================================================ */

/* La card = contenedor blanco SIN borde (mockup): solo una sombra muy sutil.
   Ocupa toda la celda del grid (flex col) para poder anclar el precio abajo. */
:is(body#category, body#manufacturer) .product-miniature {
  background: var(--hs-surface) !important;
  border-radius: var(--hs-radius) !important;
  padding: 0 !important;
  margin-bottom: 28px !important;
  position: relative !important;
  border: 0 !important;
  overflow: hidden !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

:is(body#category, body#manufacturer) .product-miniature:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--hs-shadow-card-hover) !important;
}

/* La celda del grid estira; el wrapper pasa la altura a la card */
:is(body#category, body#manufacturer) .js-product-miniature-wrapper { height: 100%; }

/* Zona de imagen = mismo look que el rail de la home (RECIÉN LLEGADOS / SUPERVENTAS):
   fondo CREMA y producto SIN fondo vía mix-blend-mode:multiply (funde el blanco de
   estudio con la crema → funciona en todo el catálogo sin recortar cada foto). */
:is(body#category, body#manufacturer) .product-miniature .hs-card-media,
:is(body#category, body#manufacturer) .product-miniature .thumbnail-container {
  background: var(--hs-surface-soft) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: relative !important;
  aspect-ratio: 1 / 1 !important;
}

:is(body#category, body#manufacturer) .product-miniature .hs-card-media img,
:is(body#category, body#manufacturer) .product-miniature .thumbnail-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  /* Menos padding → el producto llena más el marco y deja menos crema (como el mockup) */
  padding: 12px !important;
  mix-blend-mode: multiply !important;
}

/* Pie de foto BLANCO — flex col: marca/nombre arriba, PRECIO anclado abajo con
   aire por medio (mockup). El flex:1 hace que el pie llene lo que sobra de la card. */
:is(body#category, body#manufacturer) .product-miniature .hs-card-body,
:is(body#category, body#manufacturer) .product-miniature .product-description {
  background: var(--hs-surface) !important;
  padding: 16px 16px 20px !important;
  text-align: left !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 148px !important;
}
:is(body#category, body#manufacturer) .product-miniature .hs-card-price {
  margin-top: auto !important;
  padding-top: 16px !important;
}
/* Ocultar la referencia (SKU) en la card — el rail no la muestra */
:is(body#category, body#manufacturer) .product-miniature .product-reference { display: none !important; }

/* Quitar botón "Añadir al carrito" de debajo */
:is(body#category, body#manufacturer) .product-miniature .add-to-cart,
:is(body#category, body#manufacturer) .product-miniature button.add-to-cart,
:is(body#category, body#manufacturer) .product-miniature .btn-product-list,
:is(body#category, body#manufacturer) .product-miniature a.btn-product-list,
:is(body#category, body#manufacturer) .product-miniature .btn.add-to-cart,
:is(body#category, body#manufacturer) .product-miniature .product-add-to-cart,
:is(body#category, body#manufacturer) .product-miniature .product-list-actions {
  display: none !important;
}

/* Quitamos el pill FALSO (::after) que no añadía nada — usamos el botón real
   .hs-quickadd del template, con el mismo comportamiento hover que el rail. */
:is(body#category, body#manufacturer) .product-miniature .hs-card-media::after { content: none !important; display: none !important; }

/* Badges apilados en columna (LTD arriba, -X% debajo…), sin solaparse (mockup) */
:is(body#category, body#manufacturer) .product-miniature .hs-card-badge {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
}
/* Estilo mockup: chips sólidos redondeados. LTD pasa de outline a ROSA sólido;
   NUEVO negro y -X% rosa ya vienen así de la base .hs-badge. */
:is(body#category, body#manufacturer) .product-miniature .hs-badge {
  border-radius: 6px !important;
  padding: 7px 12px !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
}
:is(body#category, body#manufacturer) .product-miniature .hs-badge.ltd {
  background: var(--hs-accent-fill) !important;
  color: #ffffff !important;
  border: 0 !important;
}

/* Botón real "Añadir al carrito" / "Elegir opciones": pill negro que aparece al hover
   sobre la imagen (como .hs-rail-card-add).
   GOTCHA: form y botón venían AMBOS con position:absolute + left/right 12 → doble
   offset a la izquierda (24 vs 0, botón descuadrado). El que se posiciona es el
   FORM (o el <a> de variantes); el botón dentro va relative a ancho completo. */
:is(body#category, body#manufacturer) .product-miniature .hs-quickadd-form {
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  top: auto !important;
  margin: 0 !important;
  z-index: 3 !important;
}
:is(body#category, body#manufacturer) .product-miniature .hs-quickadd,
:is(body#category, body#manufacturer) .product-miniature .hs-quickadd-form .hs-quickadd {
  /* relative (no static): el spinner/✓ internos usan absolute inset:0 */
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
  background: var(--hs-text) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 11px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  /* La animación de aparición (opacity/translateY al hover) la lleva el FORM
     (.hs-quickadd-form): neutralizamos aquí la de la base .hs-quickadd para no
     sumar offsets ni dejar el botón invisible dentro del form ya visible. */
  opacity: 1 !important;
  transform: none !important;
}

/* Tipografía de la card = rail: nombre Inter medio (no Archivo Black grande),
   precio Archivo Black 20px, eyebrow de marca en gris. */
:is(body#category, body#manufacturer) .product-miniature .hs-card-title,
:is(body#category, body#manufacturer) .product-miniature .product-title {
  font-family: var(--hs-font-body) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.005em !important;
  margin: 0 0 8px 0 !important;
  min-height: 0 !important;
  height: auto !important;
  /* Máximo 2 líneas (≈40px) — evita títulos que crecen y dejan hueco blanco */
  max-height: 40px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
:is(body#category, body#manufacturer) .product-miniature .hs-card-title a,
:is(body#category, body#manufacturer) .product-miniature .product-title a {
  font-family: var(--hs-font-body) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
}
:is(body#category, body#manufacturer) .product-miniature .hs-card-price,
:is(body#category, body#manufacturer) .product-miniature .hs-card-price .product-price {
  font-size: 20px !important;
  letter-spacing: -0.02em !important;
}
:is(body#category, body#manufacturer) .product-miniature .hs-card-brand {
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  margin-bottom: 6px !important;
}

/* ============================================================ */
/* LAYOUT: SIDEBAR IZQUIERDA + GRID 3 (vuelta al estándar)       */
/* ============================================================ */

/* Reset cualquier intento previo de mover el título con position absolute */
:is(body#category, body#manufacturer) #js-product-list-header {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  margin: 0 !important;
  z-index: auto !important;
}

:is(body#category, body#manufacturer) #content-wrapper {
  position: static !important;
}

:is(body#category, body#manufacturer) #content-wrapper > section,
:is(body#category, body#manufacturer) #content-wrapper #js-product-list,
:is(body#category, body#manufacturer) #content-wrapper #js-product-list-top,
:is(body#category, body#manufacturer) #left-column {
  margin-top: 0 !important;
}

/* Reset flexbox order del intento anterior */
:is(body#category, body#manufacturer) #wrapper > .container > .row,
:is(body#category, body#manufacturer) #wrapper .row {
  display: flex !important;
  flex-wrap: wrap !important;
}

/* Margen unificado de TODA la página de categoría = raíles de la home (+32 sobre
   el container): la fila sidebar+grid, el HERO (antetítulo/título/subtítulo/pills/
   ordenar) y el breadcrumb comparten el mismo borde (288 a vw 1728). */
:is(body#category, body#manufacturer) #wrapper > .container > .row {
  padding-left: 32px !important;
  padding-right: 32px !important;
}
:is(body#category, body#manufacturer) .hs-category-hero .container {
  padding-left: 64px !important;  /* 32 del container + 32 extra */
  padding-right: 64px !important;
}
:is(body#category, body#manufacturer) #wrapper > .container > .breadcrumb,
:is(body#category, body#manufacturer) .breadcrumb {
  padding-left: 32px !important;
  padding-right: 32px !important;
}
/* El breadcrumb envuelve el contenido en un .row/.col Bootstrap con sus propios
   offsets → los anulamos para que "Inicio / …" quede exactamente en el raíl (64) */
:is(body#category, body#manufacturer) .breadcrumb > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
:is(body#category, body#manufacturer) .breadcrumb > .row > [class*="col"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media (max-width: 991px) {
  :is(body#category, body#manufacturer) #wrapper > .container > .row {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  :is(body#category, body#manufacturer) .hs-category-hero .container {
    padding-left: var(--hs-gutter-mobile) !important;
    padding-right: var(--hs-gutter-mobile) !important;
  }
  :is(body#category, body#manufacturer) #wrapper > .container > .breadcrumb,
  :is(body#category, body#manufacturer) .breadcrumb {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

:is(body#category, body#manufacturer) #content-wrapper,
:is(body#category, body#manufacturer) #left-column {
  order: unset !important;
  flex: unset !important;
}

/* GRID responsive del listado: 1col mobile, 2col tablet, 3col desktop.
   Anular margin negativo del .row Bootstrap heredado (que causaba overflow horizontal
   y corte de la última columna al entrar/salir de fullscreen). */
:is(body#category, body#manufacturer) #js-product-list .products,
:is(body#category, body#manufacturer) .products,
:is(body#category, body#manufacturer) #products .products {
  display: grid !important;
  /* SESIÓN K: móvil a 2 columnas (mockup); antes 1fr */
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px 12px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
@media (min-width: 576px) {
  :is(body#category, body#manufacturer) #js-product-list .products,
  :is(body#category, body#manufacturer) .products,
  :is(body#category, body#manufacturer) #products .products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
}
@media (min-width: 992px) {
  :is(body#category, body#manufacturer) #js-product-list .products,
  :is(body#category, body#manufacturer) .products,
  :is(body#category, body#manufacturer) #products .products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* min-width:0 en cada item para que no se desborde si tiene contenido ancho */
:is(body#category, body#manufacturer) .products > .js-product-miniature-wrapper {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Anular las clases col-XX heredadas de Warehouse */
:is(body#category, body#manufacturer) .products > .js-product-miniature-wrapper,
:is(body#category, body#manufacturer) #js-product-list .products > div,
:is(body#category, body#manufacturer) .products .col-6,
:is(body#category, body#manufacturer) .products .col-md-4,
:is(body#category, body#manufacturer) .products .col-md-6,
:is(body#category, body#manufacturer) .products .col-lg-3,
:is(body#category, body#manufacturer) .products .col-xl-3,
:is(body#category, body#manufacturer) .products [class*="col-"] {
  flex: none !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ============================================================ */
/* OCULTAR ETIQUETA "CONSULTAR DISPONIBILIDAD"                   */
/* ============================================================ */
:is(body#category, body#manufacturer) .product-miniature .product-flags,
:is(body#category, body#manufacturer) .product-miniature .product-flag,
:is(body#category, body#manufacturer) .product-miniature .availability,
:is(body#category, body#manufacturer) .product-miniature .product-availability {
  display: none !important;
}
/* ============================================================ */
/* SIDEBAR A LA DERECHA + ESTILO EDITORIAL                       */
/* ============================================================ */

/* Invertir el orden del row: content-wrapper antes, sidebar después */
:is(body#category, body#manufacturer) #wrapper .row {
  flex-direction: row-reverse !important;
}

/* Sidebar: estilo editorial con bloques separados. padding-left 15: la fila
   Bootstrap tira -15 → 17 + 15 = 32, alineado con el título y la home. */
:is(body#category, body#manufacturer) #left-column {
  padding-left: 15px !important;
  padding-right: 0 !important;
}

:is(body#category, body#manufacturer) #left-column .block,
:is(body#category, body#manufacturer) #left-column .sidebar-block,
:is(body#category, body#manufacturer) #left-column #category-tree-link {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin-bottom: 32px !important;
}

/* Título de cada bloque del sidebar como eyebrow */
:is(body#category, body#manufacturer) #left-column h4,
:is(body#category, body#manufacturer) #left-column .block-title,
:is(body#category, body#manufacturer) #left-column .sidebar-title,
:is(body#category, body#manufacturer) #left-column #category-tree-link > a {
  font-family: 'Inter', 'Inter FB', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #6b6660 !important;
  border: 0 !important;
  padding: 0 0 12px 0 !important;
  margin: 0 0 8px 0 !important;
  border-bottom: 1px solid #e4ddcf !important;
}

/* Items del sidebar (las subcategorías) como filas limpias */
:is(body#category, body#manufacturer) #left-column ul li a {
  font-family: 'Inter', 'Inter FB', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #0a0a0a !important;
  padding: 8px 0 !important;
  display: block !important;
  border: 0 !important;
  transition: color .15s, transform .15s var(--hs-ease-out) !important; /* ANIMATE: antes animaba padding-left (layout) */
  letter-spacing: 0 !important;
  text-transform: none !important;
}

:is(body#category, body#manufacturer) #left-column ul li a:hover {
  color: var(--hs-accent-text) !important;
  transform: translateX(6px); /* ANIMATE: antes padding-left (layout) */
}

/* Quitar chevrons y flechas */
:is(body#category, body#manufacturer) #left-column .navbar-toggler,
:is(body#category, body#manufacturer) #left-column .arrow,
:is(body#category, body#manufacturer) #left-column [class*="chevron"],
:is(body#category, body#manufacturer) #left-column [class*="caret"] {
  display: none !important;
}

/* ============================================================ */
/* PILLS HORIZONTALES "TODOS · PORTÁTILES · ESCRITORIO..."        */
/* (solo apariencia, sin funcionalidad de filtrado real)         */
/* ============================================================ */

/* Estilo de pills sobre el bloque #js-product-list-top */
:is(body#category, body#manufacturer) #js-product-list-top {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 16px 0 24px !important;
  margin-bottom: 24px !important;
  border-bottom: 1px solid #e4ddcf !important;
}

/* El "Mostrando X de Y" como un pill pequeño */
:is(body#category, body#manufacturer) .total-products,
:is(body#category, body#manufacturer) .total-products p {
  font-family: 'Inter', 'Inter FB', sans-serif !important;
  font-size: 12px !important;
  color: #6b6660 !important;
  margin: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Selectores "Relevancia" y "24" arriba derecha como pills */
:is(body#category, body#manufacturer) .sort-by-row select,
:is(body#category, body#manufacturer) #products-list-top .form-control-select,
:is(body#category, body#manufacturer) .products-sort-order .select-title,
:is(body#category, body#manufacturer) .products-selection select {
  font-family: 'Inter', 'Inter FB', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  border: 1px solid #e4ddcf !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  background: #ffffff !important;
  color: #0a0a0a !important;
  cursor: pointer !important;
}
/* ============================================================ */
/* CATEGORY HERO (ancho completo) + PILLS DE SUBCATEGORÍAS       */
/* ============================================================ */

:is(body#category, body#manufacturer) .hs-category-hero {
  background: #f6f2ea;
  padding: 48px 0 32px;
  margin-bottom: 0;
}

/* El header heredado (#js-product-list-header) ya tiene el eyebrow CATEGORÍA
   y el subtítulo descriptivo aplicados por el CSS anterior. Solo aseguramos
   que dentro del hero se renderice bien y no tenga margen raro. */
:is(body#category, body#manufacturer) .hs-category-hero #js-product-list-header {
  margin: 0;
  padding: 0;
}

/* ===== Pills de subcategorías ===== */
:is(body#category, body#manufacturer) .hs-subcat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
  padding-top: 0;
  border-top: 0;
}

:is(body#category, body#manufacturer) .hs-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid #e4ddcf;
  color: #0a0a0a;
  font-family: 'Inter', 'Inter FB', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
  cursor: pointer;
}

:is(body#category, body#manufacturer) .hs-pill:hover {
  border-color: #0a0a0a;
  color: #0a0a0a;
  background: transparent;
  text-decoration: none;
}

/* Activa: magenta sólido */
:is(body#category, body#manufacturer) .hs-pill.is-active {
  background: var(--hs-accent-fill);
  color: #ffffff;
  border-color: var(--hs-accent-fill);
}
:is(body#category, body#manufacturer) .hs-pill.is-active:hover {
  background: #d11680;
  border-color: #d11680;
  color: #ffffff;
}

/* "Todos" cuando es la única activa: estilo invertido oscuro (estado "sin filtro") */
:is(body#category, body#manufacturer) .hs-pill[data-pill-clear].is-active {
  background: #0a0a0a;
  border-color: #0a0a0a;
  color: #ffffff;
}
:is(body#category, body#manufacturer) .hs-pill[data-pill-clear].is-active:hover {
  background: #0a0a0a;
  border-color: #0a0a0a;
  color: #ffffff;
}

:is(body#category, body#manufacturer) .hs-pill-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  opacity: 0.7;
}

:is(body#category, body#manufacturer) .hs-pill.is-active .hs-pill-count,
:is(body#category, body#manufacturer) .hs-pill:hover .hs-pill-count {
  opacity: 0.8;
}
/* Prevenir overflow horizontal cuando se entra/sale de fullscreen (el width: 100vw
   del hero incluye el ancho del scrollbar y puede causar barra horizontal de ~15px) */
:is(body#category, body#manufacturer), :is(body#category, body#manufacturer) #wrapper, :is(body#category, body#manufacturer) main {
  overflow-x: clip !important;
}
/* Guardia anti scroll horizontal. SOLO en body: por la regla de propagación
   de CSS Overflow, si <html> es overflow:visible el valor de <body> pasa al
   viewport y el body NO se convierte en contenedor de scroll. OPTIMIZE 2026-09-15:
   antes iba en `html, body` → html dejaba de ser visible, body se convertía en
   el scroller (height:100% de Warehouse) y window.scrollY era siempre 0 (iOS no
   colapsaba la barra, sin restauración de scroll, GA4 sin evento scroll). */
body {
  overflow-x: hidden;
}

/* Forzar ancho completo aunque el bloque padre tenga un container limitado */
:is(body#category, body#manufacturer) .hs-category-hero {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
/* ============================================================ */
/* AJUSTES FINALES SESIÓN A · v4 · alineación coherente          */
/* ============================================================ */

/* 1. El hero ocupa ancho completo pero su contenido se alinea con .container */
:is(body#category, body#manufacturer) .hs-category-hero {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 0 0 32px 0;
}

:is(body#category, body#manufacturer) .hs-category-hero .container {
  /* El .container ya tiene su max-width y padding nativos de Bootstrap.
     Solo nos aseguramos de que sigue siendo container, no full width. */
}

/* 2. Spacing del breadcrumb (compacto) */
:is(body#category, body#manufacturer) #wrapper > .container > .breadcrumb,
:is(body#category, body#manufacturer) .breadcrumb {
  padding-top: 16px !important;
  padding-bottom: 12px !important;
  margin-bottom: 0 !important;
}

/* 3. Quitar líneas separadoras del top del listado */
:is(body#category, body#manufacturer) .products-selection,
:is(body#category, body#manufacturer) #js-product-list-top {
  border: 0 !important;
  background: transparent !important;
  margin-top: 24px !important;
  margin-bottom: 12px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 4. Meta-row del hero: subtítulo izda + dropdown ordenar dcha */
:is(body#category, body#manufacturer) .hs-hero-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  margin-top: 16px;
  margin-bottom: 28px;
}

:is(body#category, body#manufacturer) .hs-hero-subtitle {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 640px;
}

:is(body#category, body#manufacturer) .hs-hero-subtitle .rte-content,
:is(body#category, body#manufacturer) .hs-hero-subtitle .rte-content p {
  margin: 0;
  font-family: 'Inter', 'Inter FB', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #6b6660;
}

:is(body#category, body#manufacturer) .hs-hero-sort {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

:is(body#category, body#manufacturer) .hs-hero-sort-label {
  font-family: 'Inter', 'Inter FB', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6b6660;
}

:is(body#category, body#manufacturer) .hs-hero-sort-dropdown {
  position: relative;
}

:is(body#category, body#manufacturer) .hs-hero-sort-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: #ffffff;
  border: 1px solid #e4ddcf;
  border-radius: 999px;
  color: #0a0a0a;
  font-family: 'Inter', 'Inter FB', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

:is(body#category, body#manufacturer) .hs-hero-sort-trigger:hover {
  border-color: #0a0a0a;
}

:is(body#category, body#manufacturer) .hs-hero-sort-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid #e4ddcf;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(10, 10, 10, 0.08);
  z-index: 50;
}

:is(body#category, body#manufacturer) .hs-hero-sort-dropdown.is-open .hs-hero-sort-menu {
  display: block;
}

:is(body#category, body#manufacturer) .hs-hero-sort-item {
  display: block;
  padding: 10px 18px;
  font-family: 'Inter', 'Inter FB', sans-serif;
  font-size: 14px;
  color: #0a0a0a;
  text-decoration: none;
  transition: background .12s;
}

:is(body#category, body#manufacturer) .hs-hero-sort-item:hover {
  background: #f6f2ea;
  text-decoration: none;
}

:is(body#category, body#manufacturer) .hs-hero-sort-item.is-current {
  font-weight: 700;
}

/* 5. Fila products-top */
:is(body#category, body#manufacturer) .hs-products-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 0 !important;
}

:is(body#category, body#manufacturer) .hs-products-count {
  font-family: 'Inter', 'Inter FB', sans-serif;
  font-size: 14px;
  color: #6b6660;
  margin-right: auto !important;
}

:is(body#category, body#manufacturer) .hs-products-count strong {
  font-weight: 700;
  color: #0a0a0a;
}

:is(body#category, body#manufacturer) .hs-view-switcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto !important;
}

:is(body#category, body#manufacturer) .hs-view-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: #a8a39b;
  font-size: 14px;
  text-decoration: none;
  transition: background .15s, color .15s;
}

:is(body#category, body#manufacturer) .hs-view-link:hover {
  background: #f6f2ea;
  color: #0a0a0a;
  text-decoration: none;
}

:is(body#category, body#manufacturer) .hs-view-link.is-current {
  background: #0a0a0a;
  color: #ffffff;
}
/* ============================================================ */
/* FORZAR ICONOS VISTA A LA DERECHA (parche)                     */
/* ============================================================ */

:is(body#category, body#manufacturer) #js-product-list-top.products-selection {
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  margin: 24px 0 12px 0 !important;
}

:is(body#category, body#manufacturer) #js-product-list-top .hs-products-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
}

:is(body#category, body#manufacturer) #js-product-list-top .hs-products-count {
  font-family: 'Inter', 'Inter FB', sans-serif !important;
  font-size: 14px !important;
  color: #6b6660 !important;
  margin: 0 auto 0 0 !important;
  flex: 0 0 auto !important;
  order: 1 !important;
}

:is(body#category, body#manufacturer) #js-product-list-top .hs-products-count strong {
  font-weight: 700 !important;
  color: #0a0a0a !important;
}

:is(body#category, body#manufacturer) #js-product-list-top .hs-view-switcher {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 0 0 auto !important;
  flex: 0 0 auto !important;
  order: 2 !important;
}

:is(body#category, body#manufacturer) #js-product-list-top .hs-view-switcher .hs-view-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  color: #a8a39b !important;
  font-size: 14px !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: background .15s, color .15s !important;
}

:is(body#category, body#manufacturer) #js-product-list-top .hs-view-switcher .hs-view-link:hover {
  background: #f6f2ea !important;
  color: #0a0a0a !important;
}

:is(body#category, body#manufacturer) #js-product-list-top .hs-view-switcher .hs-view-link.is-current {
  background: #0a0a0a !important;
  color: #ffffff !important;
}

/* ============================================================ */
/* SIDEBAR · FILTROS ps_facetedsearch · Sesión B                  */
/* Mockup: web-plp.jsx → FiltersSidebar                           */
/* ============================================================ */

/* Reset del padding del sidebar para los filtros (anula Sesión A) */
:is(body#category, body#manufacturer) #left-column:has(#search_filters) {
  padding-right: 0 !important;
}

/* Contenedor */
.hs-filters {
  font-family: var(--hs-font-body);
  color: var(--hs-text);
  position: sticky;
  top: 24px;
}

/* ─── Cabecera "Filtros" + Limpiar (sin línea separadora) ─── */
.hs-filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
  padding-bottom: 0;
  border-bottom: 0;
}
.hs-filters-title {
  margin: 0; /* HARDEN: ahora es <h2> (jerarquía H1 > H2 Filtros > H3 grupos) */
  line-height: inherit;
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hs-text);
}
.hs-filters-clear {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--hs-accent-text);
  cursor: pointer;
  letter-spacing: 0.02em;
  text-transform: none;
  transition: color var(--hs-transition);
}
.hs-filters-clear:hover { color: var(--hs-accent-hover); }

/* ─── Grupo de filtros ─── */
:is(body#category, body#manufacturer) #left-column #search_filters .hs-filter-group {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hs-border-soft) !important;
  padding: 20px 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
:is(body#category, body#manufacturer) #left-column #search_filters .hs-filter-group.is-last {
  border-bottom: 0 !important;
}

.hs-filter-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
:is(body#category, body#manufacturer) #left-column #search_filters .hs-filter-group-title {
  font-family: var(--hs-font-display) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--hs-text) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 1.2 !important;
}
:is(body#category, body#manufacturer) #left-column #search_filters .hs-filter-group-title span {
  font: inherit !important;
  color: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

.hs-filter-group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--hs-text-mute);
  transition: color var(--hs-transition);
}
.hs-filter-group-head:hover .hs-filter-group-icon { color: var(--hs-text); }
.hs-icon-plus, .hs-icon-minus { display: inline-flex; }
.hs-filter-group.is-open .hs-icon-plus { display: none; }
.hs-filter-group:not(.is-open) .hs-icon-minus { display: none; }

/* ─── Lista interior (colapsable) ─── */
:is(body#category, body#manufacturer) #left-column #search_filters .hs-filter-list {
  margin: 14px 0 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  /* ANIMATE: antes max-height:1200px (cierre con ~250ms muertos y golpe final). Ahora el JS del
     facets.tpl mide scrollHeight y anima la altura real (px→0 / 0→px, luego auto). */
  overflow: hidden;
  transition: height var(--hs-dur-base) var(--hs-ease-out), opacity var(--hs-dur-fast) var(--hs-ease-out), margin-top var(--hs-dur-base) var(--hs-ease-out);
}
:is(body#category, body#manufacturer) #left-column #search_filters .hs-filter-group:not(.is-open) .hs-filter-list {
  height: 0;
  margin-top: 0 !important;
  opacity: 0;
  pointer-events: none;
}

:is(body#category, body#manufacturer) #left-column #search_filters .hs-filter-item {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  border: 0 !important;
}

:is(body#category, body#manufacturer) #left-column #search_filters .hs-filter-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 5px 0 !important;
  margin: 0 !important;
  font-family: var(--hs-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--hs-text) !important;
  cursor: pointer !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Ocultar inputs nativos */
.hs-filters input[type="checkbox"],
.hs-filters input[type="radio"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
}

/* ─── Checkbox cuadrado ─── */
.hs-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.hs-check-box {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  border-radius: 3px !important;
  border: 1.5px solid var(--hs-border) !important;
  /* Beige del fondo (no blanco): el tema padre lo pintaba blanco y destacaba
     como recuadro sobre el sidebar crema. Al marcar pasa a magenta (is-checked). */
  background: var(--hs-bg) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  transition: background var(--hs-transition), border-color var(--hs-transition);
  flex: 0 0 16px;
  box-sizing: border-box;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  position: relative;
  overflow: hidden;
}
.hs-check-box .hs-check-mark {
  opacity: 0;
  transition: opacity var(--hs-transition);
  width: 11px !important;
  height: 11px !important;
  stroke: #ffffff !important;
  fill: none !important;
  display: block !important;
  pointer-events: none;
}
.hs-check-box.is-checked,
.hs-filter-row.is-active .hs-check-box {
  background: var(--hs-accent-fill) !important;
  border-color: var(--hs-accent) !important;
}
.hs-check-box.is-checked .hs-check-mark,
.hs-filter-row.is-active .hs-check-box .hs-check-mark {
  opacity: 1;
}
/* Ocultar cualquier icono Font Awesome/material heredado dentro del checkbox */
.hs-check-box .checkbox-checked,
.hs-check-box .fa,
.hs-check-box .material-icons { display: none !important; }

/* ─── Radio ─── */
.hs-radio-dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1.5px solid var(--hs-border);
  background: transparent;
  display: inline-flex;
  transition: border-color var(--hs-transition), box-shadow var(--hs-transition);
  flex: 0 0 16px;
  box-sizing: border-box;
}
.hs-radio-dot.is-checked,
.hs-filter-row.is-active .hs-radio-dot {
  border-color: var(--hs-accent);
  box-shadow: inset 0 0 0 3px var(--hs-accent);
  background: #fff;
}

/* ─── Swatch de color ─── */
.hs-color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-block;
  background-clip: padding-box;
  box-shadow: 0 0 0 1px var(--hs-border);
  transition: box-shadow var(--hs-transition), transform var(--hs-transition);
  flex: 0 0 22px;
  cursor: pointer;
}
.hs-color-swatch:hover { transform: scale(1.08); }
.hs-color-swatch.is-checked {
  box-shadow: 0 0 0 2px var(--hs-accent);
}
/* Grid horizontal de swatches con padding lateral para que el ring magenta no se corte */
:is(body#category, body#manufacturer) #left-column #search_filters .hs-filter-list--colors {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 4px 4px 0 4px !important;
}
:is(body#category, body#manufacturer) #left-column #search_filters .hs-filter-list--colors .hs-filter-item {
  width: auto !important;
}
:is(body#category, body#manufacturer) #left-column #search_filters .hs-filter-list--colors .hs-filter-row {
  padding: 0 !important;
  gap: 0 !important;
}
.hs-filter-link--swatch {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
  opacity: 0;
}

/* ─── Link de filtro ─── */
:is(body#category, body#manufacturer) #left-column #search_filters .hs-filter-link {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  color: var(--hs-text) !important;
  text-decoration: none !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: color var(--hs-transition) !important;
}
:is(body#category, body#manufacturer) #left-column #search_filters .hs-filter-link:hover {
  color: var(--hs-accent-text) !important;
  padding-left: 0 !important;
}
.hs-filter-label {
  flex: 1;
  letter-spacing: 0;
}
.hs-filter-count,
:is(body#category, body#manufacturer) #left-column #search_filters .magnitude {
  color: var(--hs-text-faint) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* Item activo en bold */
.hs-filter-row.is-active .hs-filter-link,
.hs-filter-row.is-active .hs-filter-label {
  color: var(--hs-text) !important;
  font-weight: 700 !important;
}

/* Nombres de MARCA: se formatean en el template (facets.tpl, |lower|capitalize →
   "Pax Labs", "Storz & Bickel"). CSS text-transform no sirve: lowercase no capitaliza
   y capitalize no baja las mayúsculas de la BD (ARIZER seguiría ARIZER). */

/* ─── "Ver todas (N)" · facets con más de 6 opciones (marca, color…) ─── */
/* Colapsado: solo se ven las 6 primeras opciones */
:is(body#category, body#manufacturer) #left-column #search_filters .hs-filter-list--collapsible.is-collapsed .hs-filter-item:nth-child(n+7) {
  display: none !important;
}
/* Botón: texto rosa tipo enlace, alineado con las opciones */
.hs-facet-more {
  display: inline-flex !important;
  align-items: center !important;
  background: none !important;
  border: 0 !important;
  padding: 8px 0 2px 0 !important;
  margin: 0 !important;
  font-family: var(--hs-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: var(--hs-accent-text) !important;
  cursor: pointer !important;
  text-align: left !important;
  line-height: 1.2 !important;
}
.hs-facet-more:hover { color: var(--hs-accent-hover) !important; text-decoration: underline !important; }
.hs-facet-more .hs-facet-more-hide { display: none; }
.hs-facet-more[aria-expanded="true"] .hs-facet-more-show { display: none; }
.hs-facet-more[aria-expanded="true"] .hs-facet-more-hide { display: inline; }

/* ─── Slider de precio (jQuery UI override · selectores reforzados) ─── */
/* Especificidad alta para vencer al .hs-filter-list { padding: 0 !important } previo */
:is(body#category, body#manufacturer) #left-column #search_filters .hs-filter-list.hs-filter-slider {
  padding: 4px 12px 0 12px !important;
}
/* Anti-FOUC: ocultar el slider hasta que mi JS lo marque como ready
   (evita ver durante 1-2 ticks los handles cuadrados grises de jQuery UI default) */
#search_filters [id^="slider-range_"]:not(.hs-slider-ready) {
  visibility: hidden !important;
  min-height: 16px !important;
}
#search_filters [id^="slider-range_"].hs-slider-ready {
  visibility: visible !important;
}
:is(body#category, body#manufacturer) #left-column #search_filters .hs-filter-list.hs-filter-slider > li {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
/* Inputs editables tipo pill (mockup) */
.hs-slider-inputs {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 4px 0 14px 0 !important;
  width: 100% !important;
}
.hs-slider-input {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 10px 12px !important;
  font-family: var(--hs-font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--hs-text) !important;
  background: #ffffff !important;
  border: 1px solid var(--hs-border) !important;
  border-radius: 999px !important;
  text-align: center !important;
  outline: none !important;
  transition: border-color var(--hs-transition), box-shadow var(--hs-transition);
  box-shadow: none !important;
  letter-spacing: 0 !important;
  height: auto !important;
  line-height: 1 !important;
}
.hs-slider-input:focus {
  border-color: var(--hs-accent) !important;
  box-shadow: 0 0 0 3px rgba(236,26,143,0.12) !important;
}
.hs-slider-sep {
  color: var(--hs-text-faint) !important;
  font-size: 12px !important;
  flex-shrink: 0 !important;
  user-select: none;
}
/* Label original del módulo: lo ocultamos porque ahora los inputs muestran el rango */
.hs-slider-label {
  display: none !important;
}
/* Track del slider — anula los gradientes/imágenes del theme jQuery UI por defecto */
#search_filters .hs-filter-slider [id^="slider-range_"],
#search_filters [id^="slider-range_"].ui-slider,
#search_filters [id^="slider-range_"].ui-slider-horizontal {
  height: 4px !important;
  background: var(--hs-border) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 2px !important;
  position: relative !important;
  margin: 14px 0 26px 0 !important;
  box-shadow: none !important;
}
/* Tramo activo del rango */
#search_filters [id^="slider-range_"] .ui-slider-range,
#search_filters [id^="slider-range_"] .ui-widget-header,
#search_filters .hs-filter-slider .ui-slider-range,
#search_filters .hs-filter-slider .ui-widget-header {
  background: var(--hs-accent-fill) !important;
  background-image: none !important;
  background: var(--hs-accent-fill) !important;
  border: 0 !important;
  border-radius: 2px !important;
  position: absolute !important;
  top: 0 !important;
  height: 100% !important;
}
/* Handles redondos */
#search_filters [id^="slider-range_"] .ui-slider-handle,
#search_filters [id^="slider-range_"] .ui-slider-handle.ui-state-default,
#search_filters [id^="slider-range_"] .ui-slider-handle.ui-state-hover,
#search_filters [id^="slider-range_"] .ui-slider-handle.ui-state-focus,
#search_filters [id^="slider-range_"] .ui-slider-handle.ui-state-active,
#search_filters .hs-filter-slider .ui-slider-handle {
  width: 18px !important;
  height: 18px !important;
  top: -7px !important;
  margin-left: -9px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  /* Bolilla blanca con anillo SOLO rosa (sin aro blanco/gris por fuera): el magenta
     llega hasta el borde y el centro queda blanco (look "donut"). */
  border: 0 !important;
  box-shadow:
    inset 0 0 0 3px var(--hs-accent),
    0 1px 3px rgba(0,0,0,0.20) !important;
  outline: none !important;
  cursor: grab !important;
  display: block !important;
  position: absolute !important;
  text-decoration: none !important;
  z-index: 2 !important;
}
#search_filters [id^="slider-range_"] .ui-slider-handle:active {
  cursor: grabbing !important;
  box-shadow: var(--hs-shadow-cta) !important;
}

/* ─── Active filters chips ─── */
.hs-active-filters { margin-bottom: 16px; }
.hs-active-filters-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hs-active-filters-title {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
}
.hs-active-filters-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.hs-active-filter {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.hs-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  background: var(--hs-surface) !important;
  border: 1px solid var(--hs-border) !important;
  border-radius: 999px !important;
  font-family: var(--hs-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--hs-text) !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
  cursor: pointer;
  transition: border-color var(--hs-transition), color var(--hs-transition);
  line-height: 1 !important;
  text-transform: none !important;
  box-shadow: none !important;
}
.hs-chip:hover {
  border-color: var(--hs-text) !important;
  color: var(--hs-text) !important;
}
.hs-chip-facet {
  color: var(--hs-text-mute) !important;
  margin-right: 4px;
  font-weight: 500;
}
.hs-chip-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  color: var(--hs-text-mute);
  transition: color var(--hs-transition);
}
.hs-chip:hover .hs-chip-close { color: var(--hs-accent-text); }
.hs-chip-close .fa { display: none !important; }
.hs-chip--clear {
  background: var(--hs-accent-fill) !important;
  border-color: var(--hs-accent) !important;
  color: var(--hs-accent-ink) !important;
}
.hs-chip--clear:hover {
  background: var(--hs-accent-hover) !important;
  border-color: var(--hs-accent-hover) !important;
  color: var(--hs-accent-ink) !important;
}
.hs-chip--clear .hs-chip-close { color: var(--hs-accent-ink); }
.hs-chip--clear:hover .hs-chip-close { color: var(--hs-accent-ink); }

/* ─── Anular reglas previas del sidebar para que no rompan los filtros ─── */
:is(body#category, body#manufacturer) #left-column #search_filters li,
:is(body#category, body#manufacturer) #left-column #search_filters li a {
  padding-left: 0 !important;
}
:is(body#category, body#manufacturer) #left-column #search_filters li a::before,
:is(body#category, body#manufacturer) #left-column #search_filters li a::after {
  display: none !important;
  content: none !important;
}
:is(body#category, body#manufacturer) #left-column #search_filters .hs-filter-link:hover {
  padding-left: 0 !important;
}

/* Mobile: el sidebar pasa a stacked, no sticky */
@media (max-width: 991px) {
  .hs-filters { position: static; top: auto; }
  :is(body#category, body#manufacturer) #left-column:has(#search_filters) { padding-right: 0 !important; }
}

/* ─── Reactividad al :checked sin esperar al re-render del backend ─── */
.hs-filters .hs-check input[type="checkbox"]:checked + .hs-check-box,
.hs-filters .hs-check input[type="checkbox"]:checked ~ .hs-check-box {
  background: var(--hs-accent-fill) !important;
  border-color: var(--hs-accent) !important;
}
.hs-filters .hs-check input[type="checkbox"]:checked + .hs-check-box .hs-check-mark,
.hs-filters .hs-check input[type="checkbox"]:checked ~ .hs-check-box .hs-check-mark {
  opacity: 1 !important;
}
.hs-filters .hs-check input[type="checkbox"]:checked + .hs-color-swatch,
.hs-filters .hs-check input[type="checkbox"]:checked ~ .hs-color-swatch {
  box-shadow: 0 0 0 2px var(--hs-accent) !important;
}
.hs-filters .hs-check input[type="radio"]:checked + .hs-radio-dot,
.hs-filters .hs-check input[type="radio"]:checked ~ .hs-radio-dot {
  border-color: var(--hs-accent) !important;
  box-shadow: inset 0 0 0 3px var(--hs-accent) !important;
  background: #fff !important;
}

/* Hover/focus del checkbox sin estar activo */
.hs-filters .hs-filter-row:hover .hs-check-box:not(.is-checked) {
  border-color: var(--hs-text-mute) !important;
}
.hs-filters .hs-filter-row:hover .hs-color-swatch:not(.is-checked) {
  box-shadow: 0 0 0 1px var(--hs-text-mute) !important;
}

/* ════════════════════════════════════════════════════════════════════
   SESIÓN C — Subheader (announce) + Header + Footer
   ════════════════════════════════════════════════════════════════════ */

/* ─── Reset: ocultar header/footer originales del tema Warehouse ─── */
body .header-banner { display: none; }
body .header-nav { display: none !important; }
#footer-container-first.footer-style-3,
#footer-container-main.footer-style-3 { display: none !important; }
body .footer-copyrights { display: none !important; }

/* ─── Announcement bar (subheader invertido) ─── */
.hs-announce {
  background: var(--hs-text);
  color: var(--hs-bg);
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 0;
  text-align: center;
  overflow: hidden;
  position: relative;
  z-index: 50;
}
.hs-announce-track {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 0 16px;
}
.hs-announce-dim { opacity: 0.6; }
.hs-announce-sep { opacity: 0.4; }
.hs-announce-item { white-space: nowrap; }

@media (max-width: 575px) {
  .hs-announce { font-size: 11px; letter-spacing: 0.12em; padding: 8px 0; }
  .hs-announce-track { gap: 4px 10px; }
}

/* ─── Header bar ─── */
#desktop-header.hs-header {
  background: var(--hs-bg);
  border-bottom: 1px solid var(--hs-border-soft);
  position: relative;
  z-index: 40;
}
#desktop-header.hs-header .hs-header-bar { width: 100%; }

/* Al hacer scroll, el theme editor (custom_s_1.css) añade la clase .stuck-header y
   pinta el header de NEGRO — sobre el fondo crema de las categorías queda feo y no
   coincide con la home (que se mantiene crema). Forzamos crema en el estado sticky. */
.sticky-desktop-wrapper #desktop-header.stuck-header,
#desktop-header.hs-header.stuck-header,
#desktop-header.hs-header.stuck,
.stuck-menu {
  background: var(--hs-bg) !important;
  border-bottom: 1px solid var(--hs-border-soft) !important;
}

/* ════════════════════════════════════════════════════════════════════
   MÁRGENES LATERALES UNIFICADOS
   El theme editor deja `.container` a 1545px/15px → el contenido queda casi
   pegado al borde y desalineado respecto al header y la home (1280px + gutter 32).
   Alineamos TODAS las páginas al mismo raíl. La ficha de producto (#product) ya
   auto-alinea su contenido a 1280/32 con reglas propias, así que la excluimos.
   El mega menú protege su .container con selectores más específicos (max-width:none).
   ════════════════════════════════════════════════════════════════════ */
body:not(#product) .container {
  max-width: var(--hs-max) !important;
  padding-left: var(--hs-gutter) !important;
  padding-right: var(--hs-gutter) !important;
}
@media (max-width: 991px) {
  body:not(#product) .container {
    padding-left: var(--hs-gutter-mobile) !important;
    padding-right: var(--hs-gutter-mobile) !important;
  }
}
.hs-header-inner {
  max-width: var(--hs-max);
  margin: 0 auto;
  padding: 22px var(--hs-gutter);
  display: flex;
  align-items: center;
  gap: 40px;
}

/* ─── Logo wordmark ─── */
.hs-logo {
  font-family: var(--hs-font-display);
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--hs-text);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.hs-logo:hover { color: var(--hs-text); text-decoration: none; }
.hs-logo .hs-logo-c { color: var(--hs-accent-text); margin-left: 1px; }
.hs-logo.hs-logo-lg { font-size: 32px; }

/* ─── Mega menú (override iqitmegamenu) ─── */
.hs-mainmenu {
  flex: 1;
  min-width: 0;
  margin-left: 16px;
  position: static; /* permite que el cbp-hrsub se ancle al viewport */
}
.hs-mainmenu #iqitmegamenu-wrapper,
.hs-mainmenu .iqitmegamenu-wrapper,
.hs-mainmenu .iqitmegamenu,
.hs-mainmenu .cbp-vertical-on-top,
.hs-mainmenu #cbp-hrmenu,
.hs-mainmenu .cbp-hrmenu,
.hs-mainmenu .cbp-hrmenu-tab,
.hs-mainmenu .container-iqit-menu,
.hs-mainmenu .container-iqitmegamenu { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; position: static !important; }
.hs-mainmenu > div > .container,
.hs-mainmenu .container-iqitmegamenu { padding: 0 !important; margin: 0 !important; max-width: none !important; width: 100% !important; }
.hs-mainmenu #cbp-hrmenu,
.hs-mainmenu .cbp-hrmenu {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
}
.hs-mainmenu .cbp-hrmenu-tab {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}
.hs-mainmenu .cbp-hrmenu-tab > a,
.hs-mainmenu .cbp-hrmenu-tab > a.nav-link {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 10px 14px !important;
  font-family: var(--hs-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--hs-text) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 6px;
  text-decoration: none !important;
  line-height: 1;
  white-space: nowrap;
}
/* El texto del tab vive en este span; el tema iqit le mete un font-size FLUIDO
   (10px a 1280 → 15px a 1920) que hace crecer el menú y saltar a 2 líneas en
   pantallas anchas. Lo fijamos a 12px constante → siempre 1 línea. */
.hs-mainmenu .cbp-tab-title { display: inline-flex; align-items: center; gap: 6px; font-size: 11px !important; letter-spacing: 0.14em; }
/* ── Modo mayorista: entra BÁSICOS CLUB (7 tabs) + chip junto al logo → nav más
      compacto para que siga en 1 línea. Solo aplica al header en modo B2B. ── */
.hs-header--mayo .hs-header-inner { gap: 28px; }
.hs-header--mayo .hs-mainmenu { margin-left: 8px; }
.hs-header--mayo .hs-mainmenu .cbp-hrmenu { gap: 2px; }
.hs-header--mayo .hs-mainmenu .cbp-hrmenu-tab > a { padding: 10px 9px !important; }
.hs-header--mayo .hs-mainmenu .cbp-tab-title { font-size: 11px !important; }
.hs-mainmenu .cbp-hrmenu-tab > a:hover,
.hs-mainmenu .cbp-hrmenu-tab.cbp-hropen > a,
.hs-mainmenu .cbp-hrmenu-tab.cbp-active > a {
  color: var(--hs-accent-text) !important;
  background: transparent !important;
}
/* Chevron del iqit (fa-angle-down después del nombre del tab): oculto por petición de Manuel */
.hs-mainmenu .cbp-submenu-aindicator { display: none !important; }
/* ─── Dropdown panel del megamenú (ancho del contenedor centrado bajo el header) ─── */
/* Anclamos al hs-header-inner (max-width 1280, centrado) */
.hs-header-inner { position: relative; }

.hs-mainmenu .cbp-hrsub,
.hs-mainmenu .cbp-hrsub.col-12,
.hs-mainmenu div.cbp-hrsub {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid var(--hs-border-soft) !important;
  border-radius: var(--hs-radius) !important;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.25) !important;
  padding: 0 !important;
  /* margin-top negativo: el panel solapa 1px la línea border-bottom del header
     para que el border quede oculto detrás del panel (cubierto por z-index). */
  margin-top: -1px !important;
  color: var(--hs-text) !important;
  /* Override Bootstrap .col-N width % */
  flex: none !important;
  width: auto !important;
  max-width: none !important;
  /* Posicionado relativo al hs-header-inner (NO al li del tab) */
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  z-index: 100;
}
/* Bridge invisible que conecta el tab con el panel para que el cursor pueda
   transitar el gap de 8px (margin-top) sin que el hover se rompa */
.hs-mainmenu .cbp-hrsub::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
  background: transparent;
}
/* Iqit usa display:none por defecto; lo forzamos a block cuando el tab está abierto */
.hs-mainmenu .cbp-hrmenu-tab.cbp-hropen .cbp-hrsub,
.hs-mainmenu .cbp-hrmenu-tab:hover .cbp-hrsub {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.hs-mainmenu .cbp-hrsub-inner,
.hs-mainmenu div.cbp-hrsub-inner {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--hs-text) !important;
  border: 0 !important;
  padding: 0 !important;
  width: 100%;
}
.hs-mainmenu .cbp-hrsub .container {
  padding: 36px 40px !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* ─── Layout flex del panel: categorías + marca + drop tile ─── */
.hs-mainmenu .cbp-hrsub .hs-mega-layout {
  display: flex !important;
  gap: 40px;
  align-items: flex-start;
  width: 100%;
}
.hs-mainmenu .cbp-hrsub .hs-mega-categories {
  flex: 2 1 auto;
  min-width: 0;
}
/* Brands col equivale en peso a una de las columnas de categorías */
.hs-mainmenu .cbp-hrsub .hs-mega-brands-col {
  flex: 1 1 auto;
  min-width: 140px;
  max-width: 220px;
  padding: 0 !important;
  margin: 0 !important;
}
.hs-mainmenu .cbp-hrsub .hs-mega-brands-col .cbp-category-link-w { position: relative; }
.hs-mainmenu .cbp-hrsub .hs-mega-brands-col ul.cbp-links {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.hs-mainmenu .cbp-hrsub .hs-mega-brands-col ul.cbp-links li { padding: 0 !important; margin: 0 !important; list-style: none; }
.hs-mainmenu .cbp-hrsub .hs-mega-brands-col ul.cbp-links a {
  display: inline-flex !important;
  align-items: center;
  font-family: var(--hs-font-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--hs-text) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 4px 0 !important;
  border: 0 !important;
  text-decoration: none !important;
  line-height: 1.4;
}
.hs-mainmenu .cbp-hrsub .hs-mega-brands-col ul.cbp-links a:hover { color: var(--hs-accent-text) !important; }

/* ─── Drop tile magenta (Vaporizadores) ─── */
.hs-mainmenu .cbp-hrsub .hs-mega-drop {
  background: var(--hs-accent-fill) !important;
  color: var(--hs-accent-ink, #fff) !important;
  border-radius: var(--hs-radius) !important;
  padding: 28px !important;
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  min-width: 240px;
  width: 280px;
  min-height: 220px;
  text-decoration: none !important;
  transition: background .15s ease, transform .15s ease;
  flex-shrink: 0;
}
.hs-mainmenu .cbp-hrsub .hs-mega-drop:hover {
  background: var(--hs-accent-hover) !important;
  color: #fff !important;
  transform: translateY(-2px);
}
.hs-mega-drop-eyebrow {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
  color: #fff !important;
}
.hs-mega-drop-title {
  font-family: var(--hs-font-display);
  font-size: 32px;
  letter-spacing: -0.025em;
  line-height: 0.95;
  margin-top: 12px;
  color: #fff !important;
}
.hs-mega-drop-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff !important;
  margin-top: auto;
}
.hs-mega-drop-cta svg { stroke: #fff; }
.hs-mainmenu .cbp-hrsub .menu_row,
.hs-mainmenu .cbp-hrsub .row.menu_row {
  display: block !important;
  margin: 0 !important;
}
.hs-mainmenu .cbp-hrsub .cbp-menu-column,
.hs-mainmenu .cbp-hrsub .col-12.cbp-menu-column {
  flex: 1 !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
/* Tabs con VARIAS columnas de grupos (ej. Accesorios: "Para fumar y vaporizar" +
   "Guardar y transportar"): colocarlas lado a lado en vez de apiladas. Los tabs de
   una sola columna (Vaporizadores, etc.) no se ven afectados (único hijo = ancho completo). */
.hs-mainmenu .cbp-hrsub .hs-mega-categories > .menu_row {
  display: flex !important;
  gap: 40px !important;
  align-items: flex-start !important;
}
.hs-mainmenu .cbp-hrsub .hs-mega-categories > .menu_row > .cbp-menu-column {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
}
.hs-mainmenu .cbp-hrsub .cbp-menu-column-inner { padding: 0 !important; margin: 0 !important; }
/* Iqit default: .row.menu_row + .cbp-categories-row aplican margin-top que empuja las
   categorías hacia abajo. Anulamos para que estén a la misma altura que POR MARCA. */
.hs-mainmenu .cbp-hrsub .row.menu_row,
.hs-mainmenu .cbp-hrsub .menu_row { margin: 0 !important; padding: 0 !important; }
.hs-mainmenu .cbp-hrsub .cbp-category-link-w { margin: 0 !important; padding: 0 !important; }
/* La grid de categorías: 1 columna por categoría, todas side-by-side */
.hs-mainmenu .cbp-hrsub .row.cbp-categories-row,
.hs-mainmenu .cbp-hrsub div.cbp-categories-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 32px 40px !important;
  margin: 0 !important;
  align-items: start;
  width: 100% !important;
}
.hs-mainmenu .cbp-hrsub .cbp-categories-row > div,
.hs-mainmenu .cbp-hrsub .cbp-categories-row > .col-12,
.hs-mainmenu .cbp-hrsub .cbp-categories-row > [class*="col-"] {
  flex: none !important;
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}

/* Título de cada columna (sin línea inferior, según mockup) */
.hs-mainmenu .cbp-hrsub .cbp-category-link-w > a.cbp-column-title,
.hs-mainmenu .cbp-hrsub .cbp-column-title.cbp-category-title,
.hs-mainmenu .cbp-hrsub .cbp-category-link-w > span.cbp-column-title,
.hs-mainmenu .cbp-hrsub .cbp-menu-column-inner > .cbp-column-title {
  display: block !important;
  font-family: var(--hs-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--hs-text-mute) !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.hs-mainmenu .cbp-hrsub .cbp-column-title:hover { color: var(--hs-accent-text) !important; }

/* Eliminar flechas FontAwesome del módulo (\f105 antes, \f0da después) */
.hs-mainmenu .cbp-hrsub .cbp-links li a::before,
.hs-mainmenu .cbp-hrsub .cbp-links li a::after,
.hs-mainmenu .cbp-hrsub .cbp-category-link-w > a::before,
.hs-mainmenu .cbp-hrsub .cbp-category-link-w > a::after { display: none !important; content: none !important; }
.hs-mainmenu .cbp-hrsub .cbp-links li a { padding-left: 0 !important; }

/* Items hijos de cada columna */
.hs-mainmenu .cbp-hrsub .cbp-links.cbp-category-tree {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column;
  gap: 10px;
}
.hs-mainmenu .cbp-hrsub .cbp-links li { padding: 0 !important; margin: 0 !important; list-style: none; }
.hs-mainmenu .cbp-hrsub .cbp-category-link-w {
  position: relative;
}
.hs-mainmenu .cbp-hrsub ul.cbp-links .cbp-category-link-w a,
.hs-mainmenu .cbp-hrsub ul.cbp-links a {
  display: inline-flex !important;
  align-items: center;
  font-family: var(--hs-font-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--hs-text) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 4px 0 !important;
  border: 0 !important;
  text-decoration: none !important;
  line-height: 1.4;
}
.hs-mainmenu .cbp-hrsub ul.cbp-links a:hover,
.hs-mainmenu .cbp-hrsub ul.cbp-links a:focus { color: var(--hs-accent-text) !important; background: transparent !important; }

/* Si una columna no tiene <ul> (ej. "Recambios y accesorios"), su título actúa como link directo */
.hs-mainmenu .cbp-hrsub .cbp-categories-row > div:not(:has(ul)) .cbp-column-title {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  font-family: var(--hs-font-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--hs-text) !important;
  margin: 0 !important;
}
.hs-mainmenu .cbp-hrsub .cbp-categories-row > div:not(:has(ul)) .cbp-column-title:hover { color: var(--hs-accent-text) !important; }

/* Drop tile: pendiente. Se añadirá como template override del módulo iqitmegamenu
   o como componente HTML cuando llegue Sesión F (homepage). */

/* ─── Header actions (search · user · cart) ─── */
.hs-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.hs-header-action { position: relative; }
.hs-header-action .col,
.hs-header-action [class^="col-"],
.hs-header-action .header-btn-w {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  border: 0 !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}
.hs-header-action #ps-shoppingcart-wrapper,
.hs-header-action #ps-shoppingcart,
.hs-header-action #blockcart {
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center;
  line-height: 1;
}
.hs-header-action .header-btn,
.hs-header-action > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px;
  height: 42px;
  border: 0 !important;
  background: transparent !important;
  color: var(--hs-text) !important;
  border-radius: 8px;
  text-decoration: none !important;
  position: relative;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  vertical-align: middle;
  line-height: 1 !important;
}
.hs-header-action .hs-icon,
.hs-header-action svg.hs-icon {
  display: block !important;
  width: 20px;
  height: 20px;
  margin: 0 !important;
  vertical-align: middle;
}
.hs-header-action .hs-icon-wrap {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
  position: relative;
}
.hs-header-action .header-btn:hover,
.hs-header-action .header-btn:hover .icon,
.hs-header-action .header-btn:hover i {
  color: var(--hs-accent-text) !important;
  background: transparent !important;
}

/* Fallback: si alguna ruta sigue usando FA, igualar tamaño/peso */
.hs-header-action .fa,
.hs-header-action i.fa,
.hs-header-action [class^="fa-"],
.hs-header-action [class*=" fa-"] {
  font-size: 18px !important;
  line-height: 1 !important;
  color: inherit !important;
}

/* Esconder textos auxiliares (Buscar, Iniciar sesión, Carrito, etc.) */
.hs-header-action .title,
.hs-header-action .header-btn-title,
.hs-header-action .info-wrapper,
.hs-header-action .cart-toggle-details,
.hs-header-action .cart-separator,
.hs-header-action .header-cart-subtotal,
.hs-header-action .blockcart-text,
.hs-header-action .signin-name,
.hs-header-action .ps-customersignin .text { display: none !important; }

/* Badge del carrito — se posiciona sobre el wrapper del SVG */
.hs-header-action .hs-icon-wrap .cart-products-count-btn,
.hs-header-action .cart-products-count,
.hs-header-action .cart-products-count-btn {
  position: absolute !important;
  top: -6px;
  right: -10px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 10px;
  background: var(--hs-accent-fill) !important;
  color: #fff !important;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-family: var(--hs-font-body);
  letter-spacing: 0;
  text-transform: none;
  border: 2px solid var(--hs-bg);
}
/* Cuando el badge está vacío (.d-none) lo dejamos oculto */
.hs-header-action .cart-products-count-btn.d-none { display: none !important; }

/* Dropdowns del search / cart deben mantener su funcionalidad */
.hs-header-action .dropdown-menu-custom,
.hs-header-action .dropdown-menu {
  border-radius: var(--hs-radius) !important;
  border: 1px solid var(--hs-border-soft) !important;
  background: var(--hs-bg-alt) !important;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.25) !important;
  margin-top: 8px !important;
  color: var(--hs-text);
}

/* Hook bar extra (displayTop) */
.hs-header-top-hook:empty { display: none; }
.hs-header-top-hook {
  max-width: var(--hs-max);
  margin: 0 auto;
  padding: 0 var(--hs-gutter);
}

/* ─── Mobile header overrides ─── */
@media (max-width: 991px) {
  .hs-header-inner { display: none; }
}
#mobile-header.hs-mobile-header {
  background: var(--hs-bg);
  border-bottom: 1px solid var(--hs-border-soft);
}
.hs-mobile-header .mobile-main-bar { padding: 8px 0; }
.hs-mobile-header .m-nav-btn {
  color: var(--hs-text) !important;
  background: transparent !important;
  border: 0 !important;
}
.hs-mobile-header .m-nav-btn .fa { color: var(--hs-text) !important; font-size: 18px; }
.hs-mobile-header .m-nav-btn span {
  font-family: var(--hs-font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hs-text-mute) !important;
  margin-top: 2px;
}
.hs-mobile-header #_desktop_logo,
.hs-mobile-header .col-mobile-logo .logo,
.hs-mobile-header .col-mobile-logo a {
  font-family: var(--hs-font-display);
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--hs-text);
  text-decoration: none;
}
.hs-mobile-header .cart-products-count-btn {
  background: var(--hs-accent-fill) !important;
  color: #fff !important;
  border-radius: 10px;
}
@media (min-width: 992px) {
  #mobile-header.hs-mobile-header { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   NEWSLETTER dark band
   ════════════════════════════════════════════════════════════════════ */
.hs-newsletter {
  background: #0a0a0a;
  color: #ffffff;
  position: relative;
}
.hs-newsletter-inner {
  max-width: var(--hs-max);
  margin: 0 auto;
  padding: 56px var(--hs-gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.hs-newsletter-eyebrow {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hs-accent-text);
}
.hs-newsletter-title {
  font-family: var(--hs-font-display);
  font-size: 72px;
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 18px 0 0 0;
  color: #f6f2ea;
}
.hs-newsletter-sub {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
  margin: 22px 0 0 0;
  max-width: 460px;
}

/* Form de PrestaShop / iqitemailsubscriptionconf embellecido */
.hs-newsletter-form .ps-emailsubscription-block,
.hs-newsletter-form .block_newsletter,
.hs-newsletter-form .block-newsletter,
.hs-newsletter-form #blockEmailSubscription_displayFooter {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}
.hs-newsletter-form h4 { display: none !important; }

.hs-newsletter-form form { margin: 0; }
.hs-newsletter-form .input-group,
.hs-newsletter-form .newsletter-input-group {
  display: flex !important;
  gap: 6px;
  /* !important: el tema padre pinta el input-group en blanco; forzamos el pill oscuro */
  background: rgba(255,255,255,0.08) !important;
  padding: 6px !important;
  border-radius: 999px !important;
  align-items: center;
  border: 0 !important;
  margin: 0;
  /* Ancho pero con aire a la derecha (respeta el margen del resto del contenido) */
  width: 100%;
  max-width: 500px;
}
/* Fuera el texto legal "Puede darse de baja..." (por si quedara en caché) */
.hs-newsletter-form .ps-emailsubscription-conditions { display: none !important; }
.hs-newsletter-form input[type="email"],
.hs-newsletter-form input[name="email"],
.hs-newsletter-form .input-subscription,
.hs-newsletter-form .form-control {
  flex: 1;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  color: #f6f2ea !important;
  padding: 14px 22px !important;
  font-family: var(--hs-font-body) !important;
  font-size: 14px !important;
  width: auto !important;
  min-width: 0;
  box-shadow: none !important;
  height: auto !important;
  line-height: 1.4 !important;
}
.hs-newsletter-form input::placeholder { color: rgba(246,242,234,0.8) !important; opacity: 1; }
.hs-newsletter-form button,
.hs-newsletter-form input[type="submit"],
.hs-newsletter-form .btn,
.hs-newsletter-form .btn-subscribe {
  background: var(--hs-accent-fill) !important;
  color: #ffffff !important;
  border: 0 !important;
  padding: 14px 28px !important;
  border-radius: 999px !important;
  font-family: var(--hs-font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}
.hs-newsletter-form button:hover,
.hs-newsletter-form .btn-subscribe:hover,
.hs-newsletter-form input[type="submit"]:hover {
  background: var(--hs-accent-hover) !important;
  transform: translateY(-1px);
  color: #ffffff !important;
}
.hs-newsletter-form .btn-subscribe i.fa { font-size: 14px; }
.hs-newsletter-form .ps-emailsubscription-conditions,
.hs-newsletter-form .text-muted {
  font-size: 11px !important;
  color: rgba(255,255,255,0.45) !important;
  margin-top: 14px !important;
  letter-spacing: 0.04em;
  font-family: var(--hs-font-body) !important;
  line-height: 1.6;
}
.hs-newsletter-form .alert {
  margin-top: 12px;
  background: rgba(255,255,255,0.05) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: var(--hs-radius) !important;
  padding: 10px 16px !important;
  font-size: 13px;
}
.hs-newsletter-trust {
  display: flex;
  gap: 24px;
  margin-top: 28px;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.06em;
  flex-wrap: wrap;
}

@media (max-width: 991px) {
  .hs-newsletter-inner { grid-template-columns: 1fr; gap: 32px; padding: 64px var(--hs-gutter-mobile); }
  .hs-newsletter-title { font-size: 48px; }
}
@media (max-width: 575px) {
  .hs-newsletter-title { font-size: 36px; }
  .hs-newsletter-form form { flex-direction: column; border-radius: var(--hs-radius); padding: 12px; }
  .hs-newsletter-form input[type="email"] { width: 100% !important; text-align: center; }
  .hs-newsletter-form button { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   FOOTER 5-column (brand + 4 cols)
   ════════════════════════════════════════════════════════════════════ */
.hs-footer {
  background: var(--hs-bg-alt);
  border-top: 1px solid var(--hs-border-soft);
  color: var(--hs-text);
}
.hs-footer-inner {
  max-width: var(--hs-max);
  margin: 0 auto;
  padding: 72px var(--hs-gutter) 32px;
}
.hs-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 48px;
}
.hs-footer-brand .hs-logo { display: inline-block; }
.hs-footer-tagline {
  font-size: 13px;
  color: var(--hs-text-mute);
  margin: 18px 0 0 0;
  line-height: 1.7;
  max-width: 280px;
}
.hs-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.hs-footer-social a {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--hs-border);
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--hs-text);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.hs-footer-social a:hover {
  border-color: var(--hs-accent);
  color: var(--hs-accent-text);
}

.hs-footer-col-title {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
  margin-bottom: 18px;
}
.hs-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hs-footer-col a {
  font-size: 13px;
  color: var(--hs-text);
  text-decoration: none;
  transition: color .15s ease;
}
.hs-footer-col a:hover { color: var(--hs-accent-text); }

.hs-footer-hooks:empty { display: none; }
.hs-footer-hooks { margin-top: 48px; }
.hs-footer-hooks .block { background: transparent !important; box-shadow: none !important; border: 0 !important; }

.hs-footer-hr {
  border: 0;
  border-top: 1px solid var(--hs-border-soft);
  margin: 56px 0 24px 0;
}
.hs-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 11px;
  color: var(--hs-text-mute);
  flex-wrap: wrap;
}
.hs-footer-payments {
  font-family: var(--hs-font-mono);
  letter-spacing: 1px;
  font-size: 11px;
}

@media (max-width: 1199px) {
  .hs-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .hs-footer-grid > div:nth-child(5) { grid-column: 2 / -1; }
}
@media (max-width: 767px) {
  .hs-footer-inner { padding: 56px var(--hs-gutter-mobile) 24px; }
  .hs-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .hs-footer-grid > div:nth-child(5) { grid-column: auto; }
  .hs-footer-brand { grid-column: 1 / -1; }
  .hs-footer-tagline { max-width: 100%; }
  .hs-footer-hr { margin: 40px 0 20px 0; }
  .hs-footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 479px) {
  .hs-footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ════════════════════════════════════════════════════════════════════
   SESIÓN D — Quick-add overlay
   ════════════════════════════════════════════════════════════════════ */

/* Form overlay anclado abajo en la media. Hidden por defecto, fade-in al hover de la card. */
:is(body#category, body#manufacturer) .product-miniature .hs-card-media { position: relative !important; }
.hs-quickadd-form {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  margin: 0;
  padding: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  z-index: 3;
}
/* Mostrar al hover del article o focus-within del form (accesibilidad teclado) */
.product-miniature:hover .hs-quickadd-form,
.hs-product-card:hover .hs-quickadd-form,
.hs-quickadd-form:focus-within {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Botón principal: pill negro, hover magenta */
.hs-quickadd {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 12px 18px;
  background: var(--hs-text, #0a0a0a);
  color: var(--hs-bg, #f6f2ea);
  border: 0;
  border-radius: var(--hs-radius-pill, 999px);
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background .15s ease, color .15s ease, transform .1s ease;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.35);
}
.hs-quickadd:hover {
  background: var(--hs-accent-fill);
  color: #ffffff;
}
.hs-quickadd:active { transform: scale(0.98); }
.hs-quickadd:focus-visible { outline: 2px solid var(--hs-accent); outline-offset: 2px; }

/* Estados: loading + success — los 3 spans superpuestos en la misma posición */
.hs-quickadd .hs-quickadd-label,
.hs-quickadd .hs-quickadd-spinner,
.hs-quickadd .hs-quickadd-ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s ease;
}
.hs-quickadd .hs-quickadd-spinner,
.hs-quickadd .hs-quickadd-ok { position: absolute; inset: 0; opacity: 0; }
.hs-quickadd .hs-quickadd-spinner::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
}
/* ANIMATE 2026-09-16: el spinner solo gira mientras carga (antes giraba oculto en las 12-36 cards de la PLP) */
.hs-quickadd.is-loading .hs-quickadd-spinner::before { animation: hs-spin .6s linear infinite; }
@keyframes hs-spin { to { transform: rotate(360deg); } }

/* Loading */
.hs-quickadd.is-loading { background: var(--hs-text) !important; color: #ffffff !important; cursor: wait; pointer-events: none; }
.hs-quickadd.is-loading .hs-quickadd-label { opacity: 0; }
.hs-quickadd.is-loading .hs-quickadd-spinner { opacity: 1; }

/* Success */
.hs-quickadd.is-success { background: var(--hs-success, #1F8A5B) !important; color: #ffffff !important; pointer-events: none; }
.hs-quickadd.is-success .hs-quickadd-label,
.hs-quickadd.is-success .hs-quickadd-spinner { opacity: 0; }
.hs-quickadd.is-success .hs-quickadd-ok { opacity: 1; }

/* Error: pulso magenta breve */
.hs-quickadd.is-error { background: var(--hs-accent-fill) !important; }

/* Esconder los inputs del form (excepto el botón) — son hidden ya, esto refuerza */
.hs-quickadd-form input[type="hidden"] { display: none; }

/* En móvil siempre visible (no hay hover real). Lo dejamos pegado al pie de la card. */
@media (hover: none), (max-width: 767px) {
  .hs-quickadd-form { opacity: 1; transform: translateY(0); pointer-events: auto; }
}

/* Ocultar el botón "Añadir al carrito" duplicado bajo el precio (estaba en btn.tpl,
   ahora se renderiza como overlay en la media). Sesión D. */
:is(body#category, body#manufacturer) .product-miniature .product-add-cart { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   SESIÓN E — Ficha producto (PDP) editorial
   ════════════════════════════════════════════════════════════════════ */

/* Reset: ocultar elementos heredados que rompen el grid editorial */
body#product #product-preloader { display: none; }
body#product .breadcrumb {
  background: transparent !important;
  padding: 16px var(--hs-gutter) !important;
  max-width: var(--hs-max);
  margin: 0 auto !important;
}
body#product .breadcrumb a,
body#product .breadcrumb li,
body#product .breadcrumb span {
  font-family: var(--hs-font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;   /* como el mockup: minúsculas, sutil */
  color: var(--hs-text-mute) !important;
}
body#product .breadcrumb a:hover { color: var(--hs-accent-text) !important; }
body#product .breadcrumb .last { color: var(--hs-text) !important; }

/* Container principal */
body#product .hs-pdp-container,
body#product #main-product-wrapper {
  max-width: var(--hs-max);
  margin: 0 auto !important;
  padding: 0 var(--hs-gutter);
}
body#product .hs-pdp-row,
body#product .product-info-row {
  display: grid !important;
  grid-template-columns: 21fr 19fr !important; /* 52.5/47.5: foto izq · info dcha */
  gap: 64px !important;
  margin: 0 !important;
  align-items: start !important;
  width: 100% !important;
}
body#product .hs-pdp-row > .col-product-image,
body#product .hs-pdp-row > .col-product-info,
body#product .col-product-image,
body#product .col-product-info {
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Bajar breakpoint mobile: layout dos columnas a partir de tablet (768px+) */
@media (min-width: 768px) {
  body#product .col-product-info { position: sticky; top: 100px; align-self: start; }
}

@media (max-width: 767px) {
  body#product .hs-pdp-row,
  body#product .product-info-row {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* ─── Galería ─── */
body#product #product-images-large,
body#product .product-cover {
  background: var(--hs-bg-alt) !important;
  border-radius: var(--hs-radius-lg) !important;
  overflow: hidden;
  margin-bottom: 16px;
}
body#product #product-images-large img,
body#product .product-cover img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain;
  display: block;
}

/* Thumbnails: línea horizontal, thumb activa con borde magenta */
body#product .js-qv-product-images,
body#product #product-images-thumbs,
body#product .thumb-container {
  display: flex !important;
  gap: 12px;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-wrap: wrap;
}
body#product .thumb-container,
body#product .product-images li,
body#product #product-images-thumbs li {
  list-style: none !important;
  margin: 0 !important;
}
body#product .thumb,
body#product .product-images img.thumb {
  width: 80px !important;
  height: 80px !important;
  object-fit: cover;
  border-radius: var(--hs-radius-sm) !important;
  border: 2px solid transparent !important;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
  background: var(--hs-bg-alt);
}
body#product .thumb:hover { border-color: var(--hs-text-mute) !important; }
body#product .thumb.selected,
body#product .thumb.active,
body#product .js-thumb.selected,
body#product .js-thumb.active {
  border-color: var(--hs-accent) !important;
}

/* ─── Cabecera info ─── */
body#product .product_header_container {
  margin-bottom: 24px;
  border-bottom: 0 !important; /* quitar la línea heredada del tema entre precio y Modelo */
}

/* Brand eyebrow encima del título */
body#product .product-manufacturer {
  margin-bottom: 12px !important;
}
body#product .product-manufacturer a,
body#product .product-manufacturer span {
  font-family: var(--hs-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--hs-accent-text) !important;
  text-decoration: none !important;
}
body#product .product-manufacturer img { max-height: 32px; width: auto; }

/* Título principal */
body#product h1.page-title,
body#product .page-title {
  font-family: var(--hs-font-display) !important;
  font-size: 56px !important;
  line-height: 0.95 !important;
  letter-spacing: -0.025em !important;
  color: var(--hs-text) !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
body#product h1.page-title span { font-family: inherit; }

@media (max-width: 575px) {
  body#product h1.page-title { font-size: 40px !important; }
}

/* ─── Precio ─── */
body#product .current-price,
body#product .product-price,
body#product .product-prices .current-price,
body#product .current-price-display,
body#product .price {
  font-family: var(--hs-font-display) !important;
  font-size: 36px !important;
  letter-spacing: -0.025em !important;
  color: var(--hs-text) !important;
  display: inline-block;
  line-height: 1;
}
body#product .product-discount {
  display: inline-flex !important;
  align-items: baseline;
  gap: 12px;
  margin-left: 12px;
}
body#product .regular-price {
  font-family: var(--hs-font-body) !important;
  font-size: 18px !important;
  color: var(--hs-text-faint) !important;
  text-decoration: line-through !important;
  font-weight: 500 !important;
}
body#product .discount,
body#product .discount-percentage {
  background: var(--hs-accent-fill) !important;
  color: #fff !important;
  font-family: var(--hs-font-display) !important;
  font-size: 14px !important;
  padding: 4px 10px !important;
  border-radius: var(--hs-radius-sm) !important;
  letter-spacing: 0 !important;
}
body#product .product-prices {
  margin: 0 0 24px 0 !important;
  padding: 0 !important;
}
body#product .tax-shipping-delivery-label {
  display: block;
  font-size: 11px !important;
  color: var(--hs-text-mute) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 8px;
  font-family: var(--hs-font-body) !important;
  font-weight: 600;
}

/* ─── Descripción corta ─── */
body#product .product-description {
  font-family: var(--hs-font-body) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--hs-text-mute) !important;
  margin: 16px 0 28px 0 !important;
}
body#product .product-description p { margin: 0 0 12px 0; }

/* ─── Variantes (color swatches, talla...) ─── */
body#product .product-variants,
body#product .product-variants-item {
  margin: 14px 0 !important;
}
body#product .product-variants > .product-variants-item {
  margin-bottom: 14px !important;
}
body#product .product-variants > .product-variants-item:last-child {
  margin-bottom: 0 !important;
}
body#product .control-label,
body#product .product-variants .control-label {
  font-family: var(--hs-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--hs-text-mute) !important;
  margin-bottom: 12px !important;
  display: block;
}

/* Color swatches → círculos */
body#product .product-variants ul,
body#product .product-variants .input-color-list,
body#product .product-variants-item ul {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body#product .product-variants li,
body#product .input-container { margin: 0 !important; }

body#product .product-variants .input-color,
body#product .product-variants .color {
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  border: 1px solid var(--hs-border) !important;   /* UNA sola línea, beige sutil */
  background-clip: padding-box !important;
  box-shadow: none !important;                       /* sin anillo blanco interior */
  outline: none !important;                          /* sin la 2ª línea (outline del tema) */
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  line-height: normal !important;
}
body#product .product-variants .color:hover { transform: scale(1.08); }
/* Seleccionado → anillo magenta + hueco blanco fino (vence el borde #414141 del tema) */
body#product .product-variants .input-color:checked + span,
body#product .product-variants .input-color:checked + .color,
body#product .product-variants .color.active {
  border: 2px solid var(--hs-accent) !important;
  box-shadow: inset 0 0 0 2px #fff !important;
}
/* Etiqueta de variante en mayúsculas ("COLOR · ONYX BLACK", "MODELO") */
body#product .product-variants-item .form-control-label {
  display: block;
  font-family: var(--hs-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--hs-text-mute) !important;
  margin-bottom: 12px !important;
}
body#product .hs-color-selected { color: var(--hs-text) !important; }
body#product .hs-color-sep { color: var(--hs-text-faint) !important; margin: 0 2px; }

/* Selectors (talla/medida) → pills */
body#product .input-container label,
body#product .product-variants select,
body#product .form-control-select {
  display: inline-flex !important;
  align-items: center;
  padding: 10px 18px !important;
  border: 1.5px solid var(--hs-border) !important;
  background: var(--hs-bg-alt) !important;
  border-radius: var(--hs-radius-pill) !important;
  font-family: var(--hs-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--hs-text) !important;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
  margin: 0 !important;
}
body#product .input-container label:hover { border-color: var(--hs-text) !important; }
body#product .input-radio:checked + label,
body#product input.input-radio:checked + label.input-container,
body#product .input-container input:checked + span {
  background: var(--hs-text) !important;
  color: var(--hs-bg) !important;
  border-color: var(--hs-text) !important;
}

/* ─── Qty selector + Add to cart ─── */
.hs-pdp-buy {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin: 10px 0 0 0;
  flex-wrap: wrap;
}
.hs-pdp-qty {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1.5px solid var(--hs-border);
  border-radius: var(--hs-radius-pill);
  padding: 4px 6px;
  height: 48px;
}
.hs-qty-btn {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  font-family: var(--hs-font-body);
  font-weight: 400;
  font-size: 19px;
  color: var(--hs-text);
  cursor: pointer;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.hs-qty-btn:hover { background: var(--hs-surface-alt); }
.hs-qty-input,
.hs-pdp-qty input[type="number"],
.hs-pdp-qty input#quantity_wanted,
.hs-pdp-qty .bootstrap-touchspin input[type="number"],
.hs-pdp-qty .bootstrap-touchspin input#quantity_wanted {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 36px !important;
  flex: none !important;
  border: 0 !important;
  background: transparent !important;
  text-align: center !important;
  font-family: var(--hs-font-body) !important;
  font-weight: 500 !important;
  font-size: 17px !important;
  color: var(--hs-text) !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  outline: none !important;
  display: inline-block !important;
}
/* Ocultar spinner nativo */
.hs-qty-input::-webkit-inner-spin-button,
.hs-qty-input::-webkit-outer-spin-button,
.hs-pdp-qty input[type="number"]::-webkit-inner-spin-button,
.hs-pdp-qty input[type="number"]::-webkit-outer-spin-button,
.hs-pdp-qty input#quantity_wanted::-webkit-inner-spin-button,
.hs-pdp-qty input#quantity_wanted::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
  display: none !important;
}
.hs-qty-input:focus,
.hs-pdp-qty input[type="number"]:focus { outline: none !important; }

/* ─── KILLSWITCH BOOTSTRAP TOUCHSPIN ──────────────────────────────────
   Warehouse carga jquery.bootstrap-touchspin y lo inicializa sobre
   #quantity_wanted (en product.js bundled). Crea un wrapper
   .bootstrap-touchspin con .input-group-btn-vertical que contiene 2 botones
   con iconos fa-angle-up / fa-angle-down. Esos son las "flechitas" que
   se ven encima de nuestros botones +/−. No podemos desactivar el JS sin
   rebuildar _dev assets, así que neutralizamos visualmente el wrapper. */

.hs-pdp-qty .bootstrap-touchspin {
  display: contents !important;          /* el wrapper deja de generar caja */
  width: auto !important;
  background: transparent !important;
  border: 0 !important;
}
.hs-pdp-qty .input-group-btn-vertical,
.hs-pdp-qty .bootstrap-touchspin-up,
.hs-pdp-qty .bootstrap-touchspin-down,
.hs-pdp-qty .bootstrap-touchspin .input-group-btn-vertical,
.hs-pdp-qty .bootstrap-touchspin > .input-group-btn,
.hs-pdp-qty .bootstrap-touchspin .btn-touchspin {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* Misma defensa también en el quickview (mismo template, mismo TouchSpin
   inicializado vía listing.js). El quickview suele estar en un modal. */
.modal .hs-pdp-qty .bootstrap-touchspin,
#quickview-modal .hs-pdp-qty .bootstrap-touchspin { display: contents !important; }
.modal .hs-pdp-qty .input-group-btn-vertical,
.modal .hs-pdp-qty .bootstrap-touchspin .btn,
#quickview-modal .hs-pdp-qty .input-group-btn-vertical { display: none !important; }

.hs-pdp-cta { flex: 1 1 auto; }
button.hs-pdp-add-btn,
.hs-pdp-add-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 12px 28px !important;
  background: var(--hs-accent-fill) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: var(--hs-radius-pill) !important;
  font-family: var(--hs-font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  box-shadow: var(--hs-shadow-cta);
}
button.hs-pdp-add-btn:hover,
.hs-pdp-add-btn:hover {
  background: var(--hs-accent-hover) !important;
  color: #ffffff !important;
}
button.hs-pdp-add-btn:active { transform: scale(0.98); }
button.hs-pdp-add-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.hs-pdp-add-btn .hs-icon { stroke: currentColor; }
.hs-pdp-add-btn .spinner-icon { display: none; }
.hs-pdp-add-btn.is-loading .hs-pdp-add-label,
.hs-pdp-add-btn.is-loading .hs-pdp-cart-icon { display: none; }
.hs-pdp-add-btn.is-loading .spinner-icon { display: inline-block; }

.hs-pdp-min-qty {
  font-size: 11px;
  color: var(--hs-text-mute);
  letter-spacing: 0.05em;
  margin: 8px 0 0 0;
  font-style: italic;
}
.hs-pdp-min-qty:empty { display: none; }

/* ─── Additional info (contenedor del botón Guardar): limpio y a ancho completo ─── */
body#product .product-additional-info {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
/* El módulo wishlist mete el botón en una columna .col-sm-auto (se encoge al contenido);
   la forzamos a ancho completo para que "Guardar" sea igual de ancho que la fila del carrito. */
body#product .product-additional-info .row { margin: 0 !important; width: 100% !important; }
body#product .product-additional-info [class*="col-"],
body#product .col-add-wishlist {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}
body#product #product-reassurance,
body#product .reassurance {
  margin: 24px 0 0 0 !important;
  padding: 20px 0 !important;
  border-top: 1px solid var(--hs-border-soft) !important;
  border-bottom: 1px solid var(--hs-border-soft) !important;
}
body#product .reassurance-block {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 8px 0 !important;
  font-family: var(--hs-font-body) !important;
  font-size: 13px !important;
  color: var(--hs-text-mute) !important;
}
body#product .reassurance-block i,
body#product .reassurance-block .reassurance-image { color: var(--hs-accent-text) !important; }
body#product .reassurance-text { line-height: 1.4; }
body#product .reassurance-title {
  font-family: var(--hs-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--hs-text) !important;
  margin: 0 0 2px 0 !important;
}

/* ─── Tabs: descripción larga + specs + reviews ─── */
body#product .product-tabs,
body#product .tabs,
body#product .nav-tabs,
body#product #product-tabs-content {
  margin-top: 64px !important;
  border: 0 !important;
}
body#product .nav-tabs {
  display: flex !important;
  gap: 32px;
  border: 0 !important;
  border-bottom: 1px solid var(--hs-border-soft) !important;
  padding: 0 !important;
  margin: 0 0 32px 0 !important;
  list-style: none !important;
}
body#product .nav-tabs .nav-item { margin: 0 !important; padding: 0 !important; }
body#product .nav-tabs .nav-link {
  display: inline-flex !important;
  align-items: center;
  padding: 16px 0 !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  font-family: var(--hs-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--hs-text-mute) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
body#product .nav-tabs .nav-link:hover { color: var(--hs-text) !important; }
body#product .nav-tabs .nav-link.active,
body#product .nav-tabs .active .nav-link {
  color: var(--hs-text) !important;
  border-bottom-color: var(--hs-accent) !important;
  background: transparent !important;
}
body#product .tab-content { padding: 0 !important; }
body#product .tab-pane {
  font-family: var(--hs-font-body) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--hs-text-mute) !important;
}
body#product .tab-pane h2,
body#product .tab-pane h3,
body#product .tab-pane h4 {
  font-family: var(--hs-font-display) !important;
  color: var(--hs-text) !important;
  margin: 24px 0 12px 0 !important;
}
body#product .tab-pane h2 { font-size: 28px !important; }
body#product .tab-pane h3 { font-size: 22px !important; }
body#product .tab-pane h4 { font-size: 18px !important; }
body#product .tab-pane p { margin: 0 0 14px 0; }
body#product .tab-pane strong,
body#product .tab-pane b { color: var(--hs-text); }

/* Tabla de specs editorial */
body#product #product-details .data-sheet,
body#product .product-features dl,
body#product .data-sheet {
  display: grid !important;
  grid-template-columns: 220px 1fr;
  gap: 14px 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border: 0 !important;
}
body#product .data-sheet dt,
body#product .data-sheet dd,
body#product .product-features dt,
body#product .product-features dd {
  margin: 0 !important;
  padding: 14px 0 !important;
  border-bottom: 1px dashed var(--hs-border) !important;
  border-top: 0 !important;
  background: transparent !important;
  font-family: var(--hs-font-body) !important;
}
body#product .data-sheet dt {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--hs-text-mute) !important;
}
body#product .data-sheet dd {
  font-size: 15px !important;
  color: var(--hs-text) !important;
  font-weight: 500 !important;
}

@media (max-width: 575px) {
  body#product .data-sheet,
  body#product .product-features dl {
    grid-template-columns: 1fr;
    gap: 4px 0 !important;
  }
  body#product .data-sheet dt { padding-top: 14px !important; padding-bottom: 4px !important; border-bottom: 0 !important; }
  body#product .data-sheet dd { padding-top: 0 !important; }
}

/* ─── Hooks adicionales (above tabs, footer) ─── */
body#product .product-accessories,
body#product .featured-products-section {
  margin-top: 64px !important;
}
body#product .product-accessories .section-title,
body#product .featured-products-section .section-title {
  font-family: var(--hs-font-display) !important;
  font-size: 36px !important;
  letter-spacing: -0.025em !important;
  color: var(--hs-text) !important;
  margin: 0 0 32px 0 !important;
  text-align: left !important;
  font-weight: normal !important;
}

/* Quitar centrado heredado de Warehouse en el PDP */
body#product { text-align: left !important; }
body#product .text-center { text-align: left !important; }
body#product .col-product-info,
body#product .col-product-info * { text-align: left !important; }
body#product .col-product-info .pull-right,
body#product .col-product-info .float-right { float: none !important; text-align: left !important; }

/* ─── Botón comparar: oculto (Manuel no lo quiere) ─── */
body#product #iqit-compare-product-btn,
body#product .btn-iqitcompare-add,
body#product .js-iqitcompare-add { display: none !important; }

/* ─── Compartir en redes (Facebook, Twitter, Pinterest): oculto ─── */
body#product .social-sharing,
body#product .social-sharing ul,
body#product .product-share { display: none !important; }

/* ─── Wishlist antigua de iqitwishlist: fuera ───
   La sustituye el corazón de highsupply_favoritos (junto al CTA), que sí guarda
   precio y stock del momento. El botón "Guardar para más tarde" que se estilaba
   aquí apuntaba al backend de blockwishlist, que devuelve 404. */
body#product #iqit-wishlist-product-btn,
body#product .btn-iqitwishlist-add { display: none !important; }

/* Contenedor de los botones (compare/wishlist juntos en un div) */
body#product .product-additional-info > div,
body#product .product-additional-info { text-align: left !important; }

/* Ocultar "Referencia 959" — no aporta nada en la cabecera */
body#product .product-reference,
body#product .product-reference label,
body#product .product-reference span,
body#product label[for*="reference"] + span { display: none !important; }

/* Ocultar tabs legacy de Warehouse: contenido movido a secciones editoriales */
body#product .tabs.product-tabs,
body#product #product-infos-tabs,
body#product #product-infos-tabs-content,
body#product #product-infos-accordion-mobile,
body#product a[name="products-tab-anchor"] { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   SESIÓN E v2 — PDP secciones editoriales según mockup
   ════════════════════════════════════════════════════════════════════ */

/* ─── Reassurance grid 2x2 dentro de la info column ─── */
.hs-pdp-reassurance {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0 0 0;
  padding-top: 0;
  border-top: 0;
}
.hs-pdp-reassurance-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius);
  background: var(--hs-bg);
  min-height: 70px;
}
.hs-pdp-reassurance-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(236, 26, 143, 0.08);
  color: var(--hs-accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hs-pdp-reassurance-text { min-width: 0; flex: 1; }
.hs-pdp-reassurance-title {
  font-family: var(--hs-font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--hs-text);
  line-height: 1.2;
  margin-bottom: 3px;
}
.hs-pdp-reassurance-sub {
  font-size: 11px;
  color: var(--hs-text-mute);
  line-height: 1.3;
}
@media (max-width: 575px) {
  .hs-pdp-reassurance { grid-template-columns: 1fr; }
}

/* ─── Secciones editoriales full-width ─── */
.hs-pdp-editorial,
.hs-pdp-inthebox,
.hs-pdp-copurchase {
  margin: 80px 0 0 0;
  padding: 64px 0;
  border-top: 1px solid var(--hs-border-soft);
}
.hs-pdp-editorial:first-of-type { margin-top: 96px; }

/* "El detalle importa" sobre fondo BLANCO (tarjeta) */
body#product .hs-pdp-editorial {
  background: var(--hs-surface) !important;
  border: 1px solid var(--hs-border-soft) !important;
  border-radius: var(--hs-radius-lg);
  padding: 56px !important;
}
/* Specs de la derecha en su propia tarjeta (beige, como el mockup) */
body#product .hs-pdp-specs-card {
  background: var(--hs-bg);
  border-radius: var(--hs-radius);
  padding: 6px 28px;
}

.hs-pdp-editorial-inner,
.hs-pdp-inthebox-inner {
  display: block;
}

/* EL DETALLE IMPORTA */
.hs-pdp-editorial-inner {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
  align-items: start;
}
.hs-pdp-editorial-lead { position: sticky; top: 100px; }
.hs-pdp-editorial-title {
  font-family: var(--hs-font-display);
  font-size: 56px;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--hs-text);
  margin: 14px 0 24px 0;
}
.hs-pdp-editorial-desc {
  font-family: var(--hs-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--hs-text-mute);
  margin: 0;
  max-width: 380px;
}
.hs-pdp-specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
  margin: 0;
  padding: 0;
}
.hs-pdp-spec {
  padding: 18px 0;
  border-bottom: 1px solid var(--hs-border);
}
body#product .hs-pdp-specs-card .hs-pdp-spec:nth-last-child(-n+2) { border-bottom: 0; }
.hs-pdp-spec-key {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
  margin: 0 0 6px 0;
}
.hs-pdp-spec-val {
  font-family: var(--hs-font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--hs-text);
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 991px) {
  .hs-pdp-editorial-inner { grid-template-columns: 1fr; gap: 32px; }
  .hs-pdp-editorial-lead { position: static; }
  .hs-pdp-editorial-title { font-size: 40px; }
  .hs-pdp-specs-grid { grid-template-columns: 1fr; gap: 0; }
}

/* EYEBROW compartido */
.hs-pdp-eyebrow {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hs-accent-text);
}

/* EN LA CAJA */
.hs-pdp-inthebox-title {
  font-family: var(--hs-font-display);
  font-size: 48px;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--hs-text);
  margin: 14px 0 40px 0;
}
.hs-pdp-inthebox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.hs-pdp-inthebox-item {
  background: var(--hs-surface-soft);
  border: 1px solid var(--hs-border-soft);
  border-radius: var(--hs-radius);
  padding: 18px;
  text-align: left;
  transition: border-color .15s ease, transform .15s ease;
}
.hs-pdp-inthebox-qty {
  display: block;
  font-family: var(--hs-font-body);
  font-size: 11px;
  color: var(--hs-text-mute);
  margin-top: 3px;
}
.hs-pdp-inthebox-item:hover {
  border-color: var(--hs-text-mute);
  transform: translateY(-2px);
}
.hs-pdp-inthebox-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  background: var(--hs-surface-soft);
  border-radius: var(--hs-radius-sm);
  margin-bottom: 16px;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,0.04) 10px, rgba(0,0,0,0.04) 20px);
}
.hs-pdp-inthebox-label {
  font-family: var(--hs-font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--hs-text);
  line-height: 1.3;
  display: block;
}

/* SUELE IR JUNTO · co-purchase */
.hs-pdp-copurchase-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
  gap: 24px;
  flex-wrap: wrap;
}
.hs-pdp-copurchase-title {
  font-family: var(--hs-font-display);
  font-size: 48px;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--hs-text);
  margin: 14px 0 0 0;
}
.hs-pdp-copurchase-link {
  font-family: var(--hs-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hs-text);
  text-decoration: none;
  border-bottom: 2px solid var(--hs-accent);
  padding-bottom: 4px;
  transition: color .15s ease;
}
.hs-pdp-copurchase-link:hover { color: var(--hs-accent-text); }
.hs-pdp-copurchase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.hs-pdp-copurchase-card {
  display: block;
  background: var(--hs-bg-alt);
  border-radius: var(--hs-radius);
  overflow: hidden;
  padding: 0 0 20px 0;
  text-decoration: none !important;
  color: var(--hs-text) !important;
  transition: box-shadow .2s ease, transform .2s ease;
  border: 1px solid var(--hs-border-soft);
}
.hs-pdp-copurchase-card:hover {
  box-shadow: var(--hs-shadow-card-hover);
  transform: translateY(-2px);
}
.hs-pdp-copurchase-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  background: var(--hs-surface-soft);
  overflow: hidden;
  margin-bottom: 14px;
}
.hs-pdp-copurchase-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
}
.hs-pdp-copurchase-brand {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
  padding: 0 16px 4px;
}
.hs-pdp-copurchase-name {
  font-family: var(--hs-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--hs-text);
  line-height: 1.3;
  padding: 0 16px;
  min-height: 36px;
}
.hs-pdp-copurchase-price {
  font-family: var(--hs-font-display);
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--hs-text);
  padding: 12px 16px 0;
}

@media (max-width: 575px) {
  .hs-pdp-editorial,
  .hs-pdp-inthebox,
  .hs-pdp-copurchase { padding: 40px 0; margin-top: 40px; }
  .hs-pdp-inthebox-title,
  .hs-pdp-copurchase-title { font-size: 36px; }
}

/* ════════════════════════════════════════════════════════════════════
   SESIÓN F — HOME Smarty propia (reemplaza Elementor)
   ════════════════════════════════════════════════════════════════════ */

body#index .hs-home { background: var(--hs-bg); }

/* Botones genéricos brand-aligned reutilizados en home */
.hs-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: var(--hs-radius-pill);
  font-family: var(--hs-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease, transform .1s ease;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.hs-btn-primary { background: var(--hs-accent-fill); color: #fff !important; box-shadow: var(--hs-shadow-cta); }
.hs-btn-primary:hover { background: var(--hs-accent-hover); transform: translateY(-1px); }
.hs-btn-ghost { background: transparent; color: var(--hs-text) !important; border: 1.5px solid var(--hs-text); }
.hs-btn-ghost:hover { background: var(--hs-text); color: var(--hs-bg) !important; }
.hs-btn-light { background: #f6f2ea; color: var(--hs-text) !important; }
.hs-btn-light:hover { background: #efeae0; }
.hs-arrow { display: inline-block; transition: transform .15s ease; }
.hs-btn:hover .hs-arrow { transform: translateX(3px); }

/* ─── Hero ─── */
.hs-home-hero {
  background: var(--hs-bg);
  border-bottom: 1px solid var(--hs-border-soft);
}
.hs-home-hero-inner {
  max-width: var(--hs-max);
  margin: 0 auto;
  padding: 0 var(--hs-gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
  align-items: stretch;
  gap: 56px;
}
.hs-home-hero-copy {
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}
.hs-home-hero-eyebrow {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hs-accent-text);
}
.hs-home-hero-title {
  font-family: var(--hs-font-display);
  /* Guía de marca: H1 hero = 120px. Escala con el viewport y cabe en la
     columna 50% (~580px): la palabra más larga "experto." ≈ 470px a 116px. */
  font-size: clamp(56px, 8.8vw, 116px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--hs-text);
  margin: 0;
  overflow-wrap: break-word;
}
.hs-home-hero-lead {
  font-family: var(--hs-font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--hs-text-mute);
  margin: 4px 0 0 0;
  max-width: 460px;
}
.hs-home-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
/* El 2º sistema de botones (.hs-btn base, ~línea 6650) se declara DESPUÉS de
   .hs-btn-ghost y pisa su borde con `1.5px solid transparent`, dejándolo invisible.
   Restauramos borde negro + tamaño de CTA del hero con mayor especificidad. */
.hs-home-hero-actions .hs-btn { padding: 16px 30px; }
.hs-home-hero-actions .hs-btn-ghost { border: 1.5px solid var(--hs-text); }
.hs-home-hero-media {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* Polaroid del drop: marco exterior (card) + marco interior (foto) + pie de foto */
.hs-hero-polaroid {
  position: relative;
  display: block;
  width: 100%;
  max-width: 468px;
  /* Marco EXTERIOR (card) en beige del guidelines (Surface soft #faf7f0),
     más claro que el fondo de la página (#f6f2ea), como el mockup */
  background: var(--hs-surface-soft);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius);
  /* Más margen entre el recuadro interior (foto) y el exterior, como el mockup */
  padding: 24px 24px 22px;
  box-shadow: 0 20px 48px -24px rgba(10, 10, 10, 0.24), 0 1px 2px rgba(10, 10, 10, 0.04);
  text-decoration: none !important;
  color: inherit;
  transition: transform var(--hs-transition-md), box-shadow var(--hs-transition-md);
}
.hs-hero-polaroid:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -26px rgba(10, 10, 10, 0.30), 0 1px 2px rgba(10, 10, 10, 0.04);
}
.hs-hero-polaroid-badge {
  position: absolute;
  /* Anclado al recuadro EXTERIOR y sobresaliendo por fuera de la esquina
     superior derecha (no toca el recuadro interior) — como el mockup */
  top: -11px; right: -11px;
  z-index: 3;
  background: var(--hs-accent-fill);
  color: #fff;
  font-family: var(--hs-font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  /* Recuadro claramente más grande (misma letra que antes: 10px) */
  padding: 11px 18px;
  border-radius: var(--hs-radius-sm);
}
.hs-hero-polaroid-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  /* Marco INTERIOR fundido con el exterior (mismo tinte, SIN borde): el producto
     (PNG recortado con alpha) flota sobre una superficie beige continua, sin
     fondo "horneado" en la foto. El color lo pone el contenedor. */
  background: var(--hs-surface-soft);
  border-radius: var(--hs-radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
/* Sombra proyectada (no de contacto): queda MÁS ABAJO, separada de la base del
   producto, para dar sensación de flotabilidad (como el mockup). Difusa y ancha. */
.hs-hero-polaroid-photo::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 60%;
  height: 6%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(10, 10, 10, 0.24), rgba(10, 10, 10, 0.10) 45%, rgba(10, 10, 10, 0) 72%);
  filter: blur(6px);
  z-index: 0;
  pointer-events: none;
}
.hs-hero-polaroid-photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  /* Producto compacto y anclado arriba: deja hueco abajo para que la sombra
     quede separada (flotando), no pegada a la base */
  height: 80%;
  object-fit: contain;
  align-self: flex-start;
  margin-top: 2%;
}
.hs-hero-polaroid-caption {
  /* Sin sangría lateral: el pie de foto alinea con el borde del recuadro interior */
  padding: 16px 0 0;
}
.hs-hero-polaroid-eyebrow {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
  margin-bottom: 9px;
}
.hs-hero-polaroid-line {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.hs-hero-polaroid-info { min-width: 0; }
.hs-hero-polaroid-title {
  font-family: var(--hs-font-display);
  font-size: 24px;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--hs-text);
}
.hs-hero-polaroid-specs {
  font-family: var(--hs-font-body);
  font-size: 12px;
  line-height: 1.4;
  color: var(--hs-text-mute);
  margin-top: 8px;
}
.hs-hero-polaroid-price {
  flex: none;
  text-align: right;
  white-space: nowrap;
  font-family: var(--hs-font-display);
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--hs-text);
}
.hs-hero-polaroid-ship {
  display: block;
  margin-top: 5px;
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hs-success);
}
@media (max-width: 991px) {
  .hs-home-hero-inner { grid-template-columns: 1fr; gap: 32px; padding: 0 var(--hs-gutter-mobile); }
  .hs-home-hero-copy { padding: 48px 0 16px 0; }
}
@media (max-width: 575px) {
  .hs-home-hero-actions { flex-direction: column; align-items: stretch; }
  .hs-home-hero-actions .hs-btn { justify-content: center; }
}

/* ─── Bento categorías ─── */
.hs-home-bento {
  max-width: var(--hs-max);
  margin: 96px auto 0;
  padding: 0 var(--hs-gutter);
}
.hs-home-bento-head {
  margin-bottom: 40px;
}
.hs-home-bento-eyebrow {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hs-accent-text);
  margin-bottom: 12px;
}
.hs-home-bento-title {
  font-family: var(--hs-font-display);
  font-size: clamp(44px, 4.8vw, 62px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--hs-text);
  margin: 0;
}
.hs-home-bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* aspect-ratio en el CONTENEDOR (2:1 = dos cuadrados) + fila 1fr que llena
     ese alto: las cards heredan altura por stretch. Robusto en Safari (evita
     el colapso de grid-items con aspect-ratio y contenido absoluto). */
  grid-template-rows: 1fr;
  aspect-ratio: 2 / 1;
  gap: 16px;
  align-items: stretch;
}
.hs-bento-card {
  position: relative;
  border-radius: var(--hs-radius);
  overflow: hidden;
  text-decoration: none !important;
  /* Beige más CLARO que el fondo de página (Surface soft, como la polaroid del
     hero): #faf7f0 en claro / #161616 carbón en oscuro. Texto oscuro por
     defecto (tiles pequeñas); el tile grande y el Outlet lo pasan a blanco. */
  color: var(--hs-text) !important;
  background: var(--hs-surface-soft);
  border: 1px solid var(--hs-border);
  transition: transform .2s ease, box-shadow .2s ease;
}
.hs-bento-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -16px rgba(0,0,0,0.35); }
/* Izquierda: Vaporizadores llena la celda izquierda (≈cuadrado por el aspect
   del contenedor, hasta el centro). Fondo fotográfico oscuro. */
.hs-bento-card-large {
  grid-column: 1;
  /* Mismo beige claro que las pequeñas (Surface soft); borde hereda
     var(--hs-border) del base. */
  background: var(--hs-surface-soft);
}
/* La "foto" es un recorte con alpha → contain (producto entero, deja ver el
   negro/vignette detrás). Con una foto lifestyle real a sangre se usaría cover. */
.hs-bento-card-large .hs-bento-card-img {
  background-color: transparent;
  /* Menos zoom (como el hero): producto compacto anclado arriba, deja hueco abajo */
  background-size: auto 48%;
  background-position: center 10%;
}
/* Sombra flotante de contacto bajo el producto (como el hero/drop) */
.hs-bento-card-large .hs-bento-card-img::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 44%;
  width: 40%;
  height: 5%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(10, 10, 10, 0.30), rgba(10, 10, 10, 0.12) 45%, rgba(10, 10, 10, 0) 72%);
  filter: blur(7px);
  z-index: 0;
  pointer-events: none;
}
/* Degradado SOLO en el tercio inferior; el resto del tile queda limpio (beige) */
.hs-bento-card-large .hs-bento-card-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0) 42%);
}
/* Eyebrow (conteo) en rosa sobre el tile grande */
.hs-bento-card-large .hs-bento-card-meta {
  color: var(--hs-accent-text);
  opacity: 1;
}
/* Derecha: 5 categorías planas + Outlet en rejilla 3×2 que iguala el alto del cuadrado */
.hs-bento-right {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  min-width: 0;
}
/* Outlet: rosa sólido (bandera de oferta, color intencional, no placeholder) */
.hs-bento-card-outlet {
  background: var(--hs-accent-fill);
  color: #fff !important;
}
.hs-bento-card-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--hs-text);
  transition: transform .4s ease;
}
.hs-bento-card:hover .hs-bento-card-img { transform: scale(1.04); }
.hs-bento-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.10) 0%, rgba(10,10,10,0.85) 100%);
}
.hs-bento-card-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 22px;
  z-index: 1;
}
.hs-bento-card-meta {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hs-text-mute); /* COLORIZE: antes opacity .5 sobre el texto (≈2,5:1) */
  margin-bottom: 8px;
}
.hs-bento-card-outlet .hs-bento-card-meta { color: #fff; }
.hs-bento-card-title {
  font-family: var(--hs-font-display);
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: auto 0 0 0; /* empuja el título (y la flecha) al fondo; meta arriba */
  color: var(--hs-text); /* oscuro sobre beige (tiles pequeñas) */
}
/* Tile grande y Outlet: nombre blanco (va sobre degradado / rosa) */
.hs-bento-card-large .hs-bento-card-title { font-size: clamp(40px, 4.4vw, 56px); color: #fff; }
.hs-bento-card-outlet .hs-bento-card-title { color: #fff; }
/* Marcas destacadas bajo el título del tile grande */
.hs-bento-card-brands {
  font-family: var(--hs-font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 12px;
}
.hs-bento-card-arrow {
  display: inline-block;
  font-family: var(--hs-font-body);
  font-size: 16px;
  margin-top: 10px;
  transition: transform .15s ease;
}
.hs-bento-card:hover .hs-bento-card-arrow { transform: translateX(6px); }

@media (max-width: 991px) {
  /* Tablet: apilado — Vaporizadores banner arriba, 3×2 debajo. Alturas fijas
     en vw (sin aspect-ratio en grid-items → sin colapso en Safari). */
  .hs-home-bento-grid { aspect-ratio: auto; grid-template-columns: 1fr; grid-template-rows: none; }
  .hs-bento-card-large { min-height: 46vw; }
  .hs-bento-right { grid-template-rows: none; grid-auto-rows: 30vw; }
  .hs-bento-card-large .hs-bento-card-title { font-size: 40px; }
}
@media (max-width: 575px) {
  .hs-home-bento { margin-top: 56px; padding: 0 var(--hs-gutter-mobile); }
}

/* ─── Drop magenta full-width ─── */
.hs-home-drop {
  background: var(--hs-accent-fill);
  color: #fff;
  margin: 96px 0 0 0;
}
.hs-home-drop-inner {
  max-width: var(--hs-max);
  margin: 0 auto;
  padding: 0 var(--hs-gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 680px;
  align-items: center;
  gap: 48px;
}
.hs-home-drop-copy {
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.hs-home-drop-eyebrow {
  /* Guía de marca: el eyebrow es del scale de body → Inter. La JetBrains Mono
     es SOLO para datos técnicos (códigos/hex/IDs), no para eyebrows. */
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff; /* COLORIZE: sin opacidad, el fill ya da 5,08:1 */
}
.hs-home-drop-title {
  font-family: var(--hs-font-display);
  font-size: clamp(44px, 5.4vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
}
.hs-home-drop-lead {
  font-family: var(--hs-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: #fff; /* COLORIZE: sin opacidad */
  margin: 0;
  max-width: 440px;
}
.hs-home-drop-media {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}
/* Marco del drop (como el mockup): mat en magenta más oscuro + recuadro interior
   crema 1×1 donde flota el recorte del producto */
.hs-home-drop-frame {
  box-sizing: border-box;
  width: 100%;
  max-width: 500px;
  background: #b3126c; /* magenta un poco más oscuro que --hs-accent-hover para el mat */
  border-radius: var(--hs-radius);
  padding: 32px;
  box-shadow: 0 26px 64px -30px rgba(0, 0, 0, 0.5);
}
/* El cuadrado 1×1 lo define el recuadro crema (aspect-ratio sobre su width),
   NO el marco: en Safari/WebKit `height:100%` contra un padre con aspect-ratio
   no resuelve y el crema se desalinea del marco. Así es robusto. */
.hs-home-drop-photo {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--hs-surface-soft);
  border-radius: var(--hs-radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
/* Mismo tratamiento que la polaroid del hero: producto compacto y anclado
   arriba + sombra flotante de contacto (no drop-shadow pegado, mismo zoom). */
.hs-home-drop-photo::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 60%;
  height: 6%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(10, 10, 10, 0.24), rgba(10, 10, 10, 0.10) 45%, rgba(10, 10, 10, 0) 72%);
  filter: blur(6px);
  z-index: 0;
  pointer-events: none;
}
.hs-home-drop-photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 80%;
  object-fit: contain;
  align-self: flex-start;
  margin-top: 2%;
}
/* Sin esto, un span dentro del título cae a Inter (body) y la última palabra
   sale en otra fuente. Mismo arreglo que `.hs-home-hero-title span`. Todo Archivo Black. */
.hs-home-drop-title span { font-family: inherit; }
.hs-home-drop-title .hs-drop-accent { color: #ffb3de; }
/* CTA: botón RESERVAR + stock real ("Solo quedan X") en la misma fila */
.hs-home-drop-cta {
  align-self: flex-start;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
/* Botón RESERVAR un poco más alto → pill más marcado (efecto elipse) */
.hs-home-drop-cta .hs-btn { padding-top: 20px; padding-bottom: 20px; }
.hs-home-drop-stock {
  font-family: var(--hs-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  opacity: 0.85;
}
/* Separa el "·" de la palabra para armonizar con el hueco botón↔texto */
.hs-home-drop-stock .hs-drop-sep { margin-right: 14px; }

@media (max-width: 991px) {
  .hs-home-drop-inner { grid-template-columns: 1fr; min-height: auto; padding: 0 var(--hs-gutter-mobile); gap: 24px; }
  .hs-home-drop-copy { padding: 56px 0 16px 0; }
  .hs-home-drop-media { padding: 0 0 56px 0; }
}

/* ─── Rails de productos ─── */
.hs-rail {
  margin: 96px auto 0;
  max-width: var(--hs-max);
  padding: 0 var(--hs-gutter);
}
.hs-rail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
  gap: 24px;
  flex-wrap: wrap;
}
.hs-rail-eyebrow {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hs-accent-text);
  margin-bottom: 12px;
}
.hs-rail-title {
  font-family: var(--hs-font-display);
  font-size: 48px;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--hs-text);
  margin: 0;
}
.hs-rail-link {
  font-family: var(--hs-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hs-text);
  text-decoration: none !important;
  border-bottom: 2px solid var(--hs-accent);
  padding-bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hs-rail-link:hover, .hs-rail-link:hover .hs-arrow { color: var(--hs-accent-text) !important; }

.hs-rail-viewport { position: relative; }
.hs-rail-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--hs-border) transparent;
  -webkit-overflow-scrolling: touch;
}
.hs-rail-track::-webkit-scrollbar { height: 6px; }
.hs-rail-track::-webkit-scrollbar-thumb { background: var(--hs-border); border-radius: 3px; }
.hs-rail-track::-webkit-scrollbar-track { background: transparent; }

.hs-rail-card {
  /* Exactamente 4 cards visibles (ancho = 1/4 del viewport del raíl, restando los
     3 gaps de 20px). El resto se ve al hacer scroll; no asoma una 5ª a medias. */
  flex: 0 0 calc((100% - 60px) / 4);
  scroll-snap-align: start;
  background: var(--hs-surface);        /* pie de foto BLANCO */
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.hs-rail-card:hover { transform: translateY(-3px); box-shadow: var(--hs-shadow-card-hover); }

/* Zona de imagen: crema; el producto va SIN fondo (multiply funde el blanco de
   la foto con la crema → funciona en todo el catálogo sin recortar cada imagen) */
.hs-rail-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--hs-surface-soft);
}
.hs-rail-card-imglink {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.hs-rail-card-img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  padding: 22px;
  mix-blend-mode: multiply;
}
/* Badges (esquina superior izq.) */
.hs-rail-card-badges { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; gap: 6px; }
.hs-rail-badge {
  font-family: var(--hs-font-display);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  line-height: 1; padding: 6px 9px; border-radius: var(--hs-radius-sm);
  color: #fff;
}
.hs-rail-badge-new { background: var(--hs-text); }   /* NUEVO negro */
.hs-rail-badge-disc { background: var(--hs-accent-fill); } /* -X% rosa */
.hs-rail-badge-top { background: var(--hs-accent-fill); }  /* TOP rosa */

/* Añadir al carrito / elegir opciones — aparece en hover sobre la imagen */
.hs-rail-card-addform { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; margin: 0; }
.hs-rail-card-add {
  display: block; width: 100%;
  background: var(--hs-text); color: var(--hs-bg) !important;
  border: 0; border-radius: var(--hs-radius-pill);
  padding: 11px; font-family: var(--hs-font-body);
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; text-align: center;
  text-decoration: none !important; cursor: pointer;
  opacity: 0; transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
}
/* width:auto → que el ancho lo definan left/right:12 (no el 100% heredado, que
   con posición absoluta lo desbordaría por la derecha) */
.hs-rail-card-add-opts { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; width: auto; box-sizing: border-box; }
.hs-rail-card:hover .hs-rail-card-add,
.hs-rail-card:focus-within .hs-rail-card-add { opacity: 1; transform: translateY(0); } /* HARDEN: también al tabular */

/* Pie de foto blanco */
.hs-rail-card-body {
  display: flex; flex-direction: column;
  padding: 16px 16px 18px; flex: 1;
  text-decoration: none !important; color: var(--hs-text) !important;
}
.hs-rail-card-brand {
  font-family: var(--hs-font-body);
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--hs-text-mute);
  margin-bottom: 6px;
}
.hs-rail-card-name {
  font-family: var(--hs-font-body);
  font-size: 14px; font-weight: 600; color: var(--hs-text);
  line-height: 1.3; flex: 1; min-height: 36px; margin-bottom: 10px;
}
.hs-rail-card-price {
  font-family: var(--hs-font-display);
  font-size: 20px; letter-spacing: -0.02em; color: var(--hs-text);
  display: flex; align-items: baseline; gap: 8px;
}
.hs-rail-card-price-old {
  font-family: var(--hs-font-body);
  font-size: 13px; font-weight: 500; color: var(--hs-text-faint);
  text-decoration: line-through; letter-spacing: 0;
}
@media (max-width: 767px) {
  .hs-rail-card-add { opacity: 1; transform: none; } /* touch: siempre visible */
}

/* Flechas de navegación en el HEADER (antes de VER TODO), como el mockup */
.hs-rail-head-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.hs-rail-nav {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--hs-border);
  cursor: pointer;
  font-family: var(--hs-font-body);
  font-size: 17px;
  color: var(--hs-text);
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
  transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.hs-rail-nav:hover { background: var(--hs-text); color: #fff; border-color: var(--hs-text); }
.hs-rail-nav.is-hidden { opacity: 0.3; pointer-events: none; }

@media (max-width: 991px) {
  .hs-rail { margin-top: 64px; padding: 0 var(--hs-gutter-mobile); }
  .hs-rail-title { font-size: 36px; }
  .hs-rail-nav { display: none; }
  .hs-rail-card { flex-basis: 70vw; }
}

/* ════════════════════════════════════════════════════════════════════
   SESIÓN F2 — Stats hero + trust strip + manifesto + marquee
   ════════════════════════════════════════════════════════════════════ */

/* Stats row dentro del hero (bajo CTAs) */
.hs-home-hero-stats {
  display: flex;
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
  margin-top: 32px;
}
.hs-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 34px;
}
.hs-hero-stat:first-child { padding-left: 0; }
.hs-hero-stat:last-child { padding-right: 0; }
/* Divisor vertical entre stats (como el mockup) */
.hs-hero-stat + .hs-hero-stat { border-left: 1px solid var(--hs-border); }
.hs-hero-stat-num {
  font-family: var(--hs-font-display);
  font-size: clamp(42px, 4.4vw, 56px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--hs-text);
}
.hs-hero-stat-label {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
  margin-top: 10px;
}
@media (max-width: 575px) {
  .hs-hero-stat { padding: 0 26px; }
  .hs-hero-stat-num { font-size: 34px; }
}

/* Trust strip */
.hs-home-trust {
  background: var(--hs-bg);
  border-top: 1px solid var(--hs-border-soft);
  border-bottom: 1px solid var(--hs-border-soft);
  margin-top: 0;
}
.hs-home-trust-inner {
  max-width: var(--hs-max);
  margin: 0 auto;
  padding: 0 var(--hs-gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.hs-trust-cell {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 28px 24px;
  border-left: 1px solid var(--hs-border-soft);
}
.hs-trust-cell:first-child { border-left: 0; padding-left: 0; }
.hs-trust-cell:last-child { padding-right: 0; }
.hs-trust-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(236, 26, 143, 0.08);
  color: var(--hs-accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hs-trust-text { min-width: 0; }
.hs-trust-title {
  font-family: var(--hs-font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--hs-text);
  line-height: 1.2;
}
.hs-trust-sub {
  font-family: var(--hs-font-body);
  font-size: 11px;
  color: var(--hs-text-mute);
  margin-top: 3px;
}
@media (max-width: 991px) {
  .hs-home-trust-inner { grid-template-columns: 1fr 1fr; padding: 0 var(--hs-gutter-mobile); }
  .hs-trust-cell:nth-child(3) { border-left: 0; padding-left: 0; }
  .hs-trust-cell:nth-child(2) { padding-right: 0; }
}
@media (max-width: 480px) {
  .hs-home-trust-inner { grid-template-columns: 1fr; }
  .hs-trust-cell { border-left: 0; padding: 18px 0; border-top: 1px solid var(--hs-border-soft); }
  .hs-trust-cell:first-child { border-top: 0; padding-top: 18px; }
}

/* Manifesto editorial */
.hs-home-manifesto {
  background: var(--hs-text);
  color: #fff;
  margin: 96px 0 0 0;
  padding: 96px 0;
}
.hs-home-manifesto-inner {
  max-width: var(--hs-max);
  margin: 0 auto;
  padding: 0 var(--hs-gutter);
  text-align: center;
}
.hs-home-manifesto-eyebrow {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hs-accent-text);
  margin-bottom: 28px;
}
.hs-home-manifesto-title {
  font-family: var(--hs-font-display);
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0;
}
.hs-magenta { color: var(--hs-accent-text); }
.hs-home-manifesto-lead {
  font-family: var(--hs-font-body);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,0.7);
  max-width: 620px;
  margin: 32px auto 0;
}
.hs-home-manifesto-cta {
  margin-top: 40px;
}
.hs-home-manifesto-cta .hs-btn-ghost {
  border-color: #fff;
  color: #fff !important;
}
.hs-home-manifesto-cta .hs-btn-ghost:hover {
  background: #fff;
  color: var(--hs-text) !important;
}
@media (max-width: 575px) {
  .hs-home-manifesto { padding: 64px 0; }
}

/* Marquee marcas — scroll horizontal continuo */
.hs-home-marquee {
  background: var(--hs-bg);
  border-top: 1px solid var(--hs-border-soft);
  border-bottom: 1px solid var(--hs-border-soft);
  overflow: hidden;
  padding: 28px 0;
  margin-top: 0;
  user-select: none;
}
.hs-marquee-track {
  display: flex;
  align-items: center;
  gap: 32px;
  white-space: nowrap;
  animation: hs-marquee-scroll 50s linear infinite;
  width: max-content;
}
.hs-home-marquee:hover .hs-marquee-track { animation-play-state: paused; }
.hs-marquee-item {
  font-family: var(--hs-font-display);
  font-size: 28px;
  letter-spacing: -0.015em;
  color: var(--hs-text);
  flex: 0 0 auto;
}
.hs-marquee-dot {
  font-family: var(--hs-font-display);
  font-size: 28px;
  color: var(--hs-accent-text);
  flex: 0 0 auto;
}
@keyframes hs-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 575px) {
  .hs-marquee-item, .hs-marquee-dot { font-size: 22px; }
  .hs-marquee-track { animation-duration: 35s; }
}

/* Spacing entre F2 sections */
.hs-home-marquee + * { margin-top: 0; }

/* ════════════════════════════════════════════════════════════════════
   SESIÓN G — Checkout + Carrito + Drawer Highsupply
   ════════════════════════════════════════════════════════════════════ */

/* ─── Cart page (/carrito) ─── */
body#cart .hs-cart-page,
body.checkout .hs-cart-page {
  background: var(--hs-bg);
  padding: 32px 0 96px;
}
.hs-cart-container {
  max-width: var(--hs-max);
  margin: 0 auto;
  padding: 0 var(--hs-gutter);
}
.hs-cart-page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.hs-cart-page-title {
  font-family: var(--hs-font-display);
  font-size: 48px;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--hs-text);
  margin: 0;
}
.hs-cart-page-back {
  font-family: var(--hs-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hs-text-mute) !important;
  text-decoration: none !important;
  transition: color .15s ease;
}
.hs-cart-page-back:hover { color: var(--hs-accent-text) !important; }

.hs-cart-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 40px;
  align-items: start;
}
@media (max-width: 991px) {
  .hs-cart-grid { grid-template-columns: 1fr; gap: 32px; }
  .hs-cart-page-title { font-size: 36px; }
}

.hs-cart-grid-items { min-width: 0; }
.hs-cart-grid-summary { min-width: 0; }
.hs-cart-summary-sticky { position: sticky; top: 96px; }

/* Product line */
.hs-cart-line {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--hs-border-soft);
  align-items: center;
}
.hs-cart-line:first-child { padding-top: 0; }
.hs-cart-line-media {
  display: block;
  width: 100px;
  aspect-ratio: 1/1;
  border-radius: var(--hs-radius-sm);
  background: var(--hs-bg-alt);
  overflow: hidden;
}
.hs-cart-line-media img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.hs-cart-line-body { min-width: 0; }
.hs-cart-line-brand {
  display: block;
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
  margin-bottom: 4px;
}
.hs-cart-line-name {
  display: block;
  font-family: var(--hs-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--hs-text) !important;
  text-decoration: none !important;
  line-height: 1.35;
}
.hs-cart-line-name:hover { color: var(--hs-accent-text) !important; }
.hs-cart-line-attrs {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--hs-text-mute);
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
}
.hs-cart-line-attrs .label { font-weight: 600; }
.hs-cart-line-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.hs-cart-qty {
  display: inline-flex;
  align-items: center;
  background: var(--hs-bg-alt);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-pill);
  padding: 2px 4px;
  height: 36px;
}
.hs-cart-qty-btn {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  font-family: var(--hs-font-display);
  font-size: 16px;
  color: var(--hs-text);
  cursor: pointer;
  border-radius: 999px;
  transition: background .15s ease;
}
.hs-cart-qty-btn:hover { background: var(--hs-surface-alt); }
.hs-cart-qty-input {
  width: 36px;
  height: 28px;
  border: 0;
  background: transparent;
  text-align: center;
  font-family: var(--hs-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--hs-text);
  -moz-appearance: textfield;
  padding: 0;
}
.hs-cart-qty-input::-webkit-inner-spin-button,
.hs-cart-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.hs-cart-qty-input:focus { outline: none; }

.hs-cart-line-remove {
  color: var(--hs-text-mute) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  transition: color .15s ease, background .15s ease;
  text-decoration: none !important;
}
.hs-cart-line-remove:hover { color: var(--hs-accent-text) !important; background: rgba(236, 26, 143, 0.08); }

.hs-cart-line-pricing {
  text-align: right;
  min-width: 100px;
}
.hs-cart-line-total {
  font-family: var(--hs-font-display);
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--hs-text);
}
.hs-cart-line-unit,
.hs-cart-line-regular {
  display: block;
  font-size: 11px;
  color: var(--hs-text-faint);
  margin-top: 2px;
}
.hs-cart-line-regular { text-decoration: line-through; }
.hs-cart-line-discount {
  background: var(--hs-accent-fill);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--hs-radius-sm);
  display: inline-block;
  margin-bottom: 4px;
}

@media (max-width: 575px) {
  .hs-cart-line { grid-template-columns: 80px 1fr; gap: 14px; }
  .hs-cart-line-pricing { grid-column: 1 / -1; text-align: left; padding-top: 0; display: flex; align-items: baseline; gap: 12px; }
  .hs-cart-line-media { width: 80px; }
}

/* Cart summary card */
.hs-cart-summary,
body#cart .card.cart-summary {
  background: var(--hs-bg-alt) !important;
  border: 1px solid var(--hs-border-soft) !important;
  border-radius: var(--hs-radius) !important;
  padding: 24px !important;
  box-shadow: none !important;
}
.hs-cart-totals-title {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
  margin: 0 0 16px 0;
}
.hs-cart-totals-subtotals,
.hs-cart-totals-grand {
  padding: 0 !important;
}
.hs-cart-totals-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  font-family: var(--hs-font-body);
  font-size: 14px;
  color: var(--hs-text);
}
.hs-cart-totals-label { color: var(--hs-text-mute); }
.hs-cart-totals-line-discount .hs-cart-totals-value { color: var(--hs-accent-text); font-weight: 700; }
.hs-cart-totals-hr {
  border: 0;
  border-top: 1px solid var(--hs-border-soft);
  margin: 12px 0;
}
.hs-cart-totals-grand-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
}
.hs-cart-totals-grand-label {
  font-family: var(--hs-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hs-text);
}
.hs-cart-totals-grand-value {
  font-family: var(--hs-font-display);
  font-size: 28px;
  letter-spacing: -0.025em;
  color: var(--hs-text);
}
.hs-cart-totals-grand-tax {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--hs-text-mute);
  margin-top: 4px;
}

/* Voucher */
.hs-cart-voucher { margin: 4px 0; }
.hs-cart-voucher-applied {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
}
.hs-cart-voucher-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--hs-bg);
  border-radius: var(--hs-radius-sm);
  margin-bottom: 6px;
  font-size: 13px;
}
.hs-cart-voucher-name { flex: 1; font-weight: 600; }
.hs-cart-voucher-amount { color: var(--hs-accent-text); font-weight: 700; }
.hs-cart-voucher-remove { color: var(--hs-text-mute); }
.hs-cart-voucher-remove:hover { color: var(--hs-accent-text); }

.hs-cart-voucher-details summary {
  list-style: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
  padding: 8px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hs-cart-voucher-details summary::-webkit-details-marker { display: none; }
.hs-cart-voucher-details summary:hover { color: var(--hs-accent-text); }
.hs-cart-voucher-details[open] summary { color: var(--hs-text); }

.hs-cart-voucher-error {
  display: none;
  font-size: 12px;
  color: var(--hs-accent-text);
  padding: 8px 12px;
  margin-top: 8px;
  border-radius: var(--hs-radius-sm);
  background: rgba(236, 26, 143, 0.08);
  border: 0;
}
.hs-cart-voucher-error.show,
.hs-cart-voucher-error[style*="block"] { display: block !important; }

/* G2.7 · Voucher form slim pill (sidebar checkout + cart page) */
.hs-cart-voucher-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  width: 100%;
}
.hs-cart-voucher-input,
input.hs-cart-voucher-input,
input.hs-cart-voucher-input.form-control {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 0 !important;
  line-height: 32px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  border: 1px solid var(--hs-border, #d4d4d4) !important;
  border-radius: var(--hs-radius-pill, 999px) !important;
  font-family: var(--hs-font-body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  background: #ffffff !important;
  color: var(--hs-text, #0a0a0a) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
.hs-cart-voucher-input::placeholder { color: var(--hs-text-mute, #999); }
.hs-cart-voucher-input:focus {
  border-color: var(--hs-accent, #EC1A8F) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(236,26,143,0.12) !important;
}
.hs-cart-voucher-btn,
button.hs-cart-voucher-btn {
  flex: 0 0 auto !important;
  height: 34px !important;
  min-height: 0 !important;
  line-height: 32px !important;
  padding: 0 22px !important;
  margin: 0 !important;
  background: var(--hs-text, #0a0a0a) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--hs-radius-pill, 999px) !important;
  font-family: var(--hs-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box !important;
  transition: background .15s ease;
}
.hs-cart-voucher-btn:hover { background: var(--hs-accent-fill) !important; }

/* Cart actions (CTA) */
.hs-cart-actions { padding: 16px 0 0 !important; }
.hs-btn-block { display: flex; width: 100%; justify-content: center; }
.hs-cart-actions-cta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
}

/* Trust ribbon bajo summary */
.hs-cart-trust {
  margin-top: 20px;
  padding: 16px 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hs-cart-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--hs-text-mute);
}
.hs-cart-trust-item svg { color: var(--hs-accent-text); flex-shrink: 0; }

/* Empty cart */
body#cart .cart-empty,
.hs-cart-empty { padding: 96px var(--hs-gutter); text-align: center; }

/* ─── Side cart drawer ─── */
/* El #ps-shoppingcart en modo side-cart abre el dropdown como drawer real.
   Bootstrap dropdown inyecta inline style="transform: translate3d(...); position: absolute"
   vía Popper. Necesitamos !important en transform/position/top/left/right para vencerlo. */
.side-cart .dropdown-menu-custom,
#ps-shoppingcart.side-cart .dropdown-menu-custom,
#_desktop_blockcart-content,
#_mobile_blockcart-content {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  width: 440px !important;
  max-width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--hs-bg-alt) !important;
  box-shadow: -16px 0 50px rgba(0,0,0,0.18) !important;
  transform: translateX(100%) !important;
  -webkit-transform: translateX(100%) !important;
  transition: transform 200ms var(--hs-ease-out), visibility 0s linear 200ms !important; /* ANIMATE: salida */
  visibility: hidden !important;
  opacity: 1 !important;
  display: block !important;
  z-index: 1100 !important;
  will-change: transform;
}
/* Cuando Bootstrap añade .show al dropdown-menu, o mi JS añade .hs-drawer-active, el drawer se desliza */
.side-cart.show .dropdown-menu-custom,
.side-cart .dropdown-menu-custom.show,
#ps-shoppingcart-wrapper.show .dropdown-menu-custom,
#_desktop_blockcart-content.show,
#_mobile_blockcart-content.show,
#_desktop_blockcart-content.hs-drawer-active,
#_mobile_blockcart-content.hs-drawer-active,
.ps-shoppingcart.show .dropdown-menu-custom,
.dropdown.show > .dropdown-menu-custom,
#blockcart.show .dropdown-menu-custom,
body.hs-drawer-open #_desktop_blockcart-content,
body.hs-drawer-open #_mobile_blockcart-content {
  transform: translateX(0) !important;
  -webkit-transform: translateX(0) !important;
  visibility: visible !important;
  opacity: 1 !important;
  transition: transform var(--hs-dur-slow) var(--hs-ease-drawer), visibility 0s !important; /* ANIMATE: entrada */
}
/* ─── Drawer slide-over · mockup G2 ──────────────────────────────── */
/* Overrides agresivos contra:
   - iqitthemeeditor: border:1px solid #e84174 (magenta) + background:#fff
   - warehouse theme.css: width:340px FIJO + padding:1rem + position:fixed + right:-1rem
     que dejaba ~100px vacíos a la izquierda dentro del drawer 440px */
#blockcart-content,
#_desktop_blockcart-content #blockcart-content,
#_mobile_blockcart-content #blockcart-content,
#sticky-cart-wrapper .ps-shoppingcart.side-cart #blockcart-content {
  display: flex !important;
  flex-direction: column !important;
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  background: var(--hs-bg-alt) !important;
  font-family: var(--hs-font-body) !important;
  color: var(--hs-text) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: auto !important;
  animation: none !important;
}
/* También el wrapper del drawer no debe tener bordes magenta */
#_desktop_blockcart-content,
#_mobile_blockcart-content,
.side-cart .dropdown-menu-custom {
  border-color: transparent !important;
}

/* Override reglas del iqitthemeeditor sobre estructura interna del cart */
#blockcart-content .cart-products,
#blockcart-content > .cart-products,
#blockcart-content > ul.cart-products {
  background: var(--hs-bg-alt) !important;
}
#blockcart-content .cart-products > li,
#blockcart-content > .cart-products > li {
  border-color: var(--hs-border-soft) !important;
  background: transparent !important;
}
#blockcart-content .cart-products::-webkit-scrollbar-thumb {
  background-color: var(--hs-border-soft) !important;
}
#sticky-cart-wrapper .ps-shoppingcart.side-cart #blockcart-content { top: 0 !important; }

/* Solo .cart-products scrollea; el resto es flex:0 0 auto */
#blockcart-content > .hs-drawer-head,
#blockcart-content > .hs-drawer-ship,
#blockcart-content > .hs-drawer-upsell,
#blockcart-content > .hs-drawer-foot,
#blockcart-content > .cart-title,
#blockcart-content > .cart-subtotals,
#blockcart-content > .cart-totals,
#blockcart-content > .cart-buttons,
#blockcart-content > .alert,
#blockcart-content > .no-items {
  flex: 0 0 auto !important;
}
#blockcart-content > .cart-products,
#blockcart-content > ul.cart-products,
#blockcart-content > .hs-drawer-empty {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* Cabecera (TU CARRITO · 3 productos · X) */
.hs-drawer-head,
.cart-title.hs-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 18px 18px;
  background: var(--hs-bg-alt);
  margin: 0 !important;
  border-bottom: 0 !important;
}
.hs-drawer-head hr { display: none !important; }
.hs-drawer-head-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hs-drawer-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hs-accent-text);
}
.hs-drawer-count,
.hs-drawer-count.modal-title {
  font-family: var(--hs-font-display) !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: var(--hs-text) !important;
  line-height: 1 !important;
  margin: 0 !important;
}
.hs-drawer-close,
#js-cart-close,
.cart-title .close {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  color: var(--hs-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s ease;
}
.hs-drawer-close:hover,
#js-cart-close:hover { background: rgba(0,0,0,0.06); }
.hs-drawer-close .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* Barra envío gratis */
.hs-drawer-ship {
  padding: 14px 18px 16px;
  background: var(--hs-bg-alt);
  border-top: 1px solid var(--hs-border-soft);
  border-bottom: 1px solid var(--hs-border-soft);
}
.hs-drawer-ship-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.hs-drawer-ship-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hs-accent-text);
}
.hs-drawer-ship.is-unlocked .hs-drawer-ship-label { color: var(--hs-accent-text); }
.hs-drawer-ship:not(.is-unlocked) .hs-drawer-ship-label {
  color: var(--hs-text);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 12px;
}
.hs-drawer-ship:not(.is-unlocked) .hs-drawer-ship-label strong { color: var(--hs-accent-text); font-weight: 700; }
.hs-drawer-ship-amount {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--hs-text-mute);
  white-space: nowrap;
}
.hs-drawer-ship-track {
  height: 2px;
  background: rgba(0,0,0,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.hs-drawer-ship-fill {
  height: 100%;
  width: 100%;
  background: var(--hs-accent-fill);
  transform-origin: left center;
  transform: scaleX(calc(var(--hs-prog, 0) / 100)); /* ANIMATE: antes width:% inline */
  transition: transform var(--hs-dur-slow) var(--hs-ease-out);
}

/* Lista productos */
.hs-drawer-list,
ul.cart-products.hs-drawer-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 18px !important;
  background: var(--hs-bg-alt);
}
.hs-drawer-list-item { border-bottom: 1px solid var(--hs-border-soft); }
.hs-drawer-list-item:last-child { border-bottom: 0; }

/* Product line · grid 2 cols (image + body que incluye qty+price en mismo row) */
.hs-drawer-line {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 14px;
  padding: 18px 0;
  align-items: start;
}
.hs-drawer-line-media {
  display: block;
  width: 72px;
  height: 72px;
  background: rgba(0,0,0,0.04);
  border: 1px solid var(--hs-border-soft);
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.hs-drawer-line-media img { width: 100%; height: 100%; object-fit: contain; padding: 0; display: block; }
.hs-drawer-line-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hs-drawer-line-brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
}
.hs-drawer-line-name {
  display: block;
  font-family: var(--hs-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--hs-text) !important;
  line-height: 1.25;
  text-decoration: none !important;
  margin: 0;
}
.hs-drawer-line-name:hover { color: var(--hs-accent-text) !important; }
.hs-drawer-line-attrs {
  font-size: 11px;
  color: var(--hs-text-mute);
  margin: 2px 0 0;
}
.hs-drawer-line-attrs .product-line-info { display: inline; margin-right: 6px; }
.hs-drawer-line-attrs .label { font-weight: 500; }
.hs-drawer-line-attrs .value { color: var(--hs-text); }
.hs-drawer-line-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  width: 100%;
}
/* Qty pill compacta · acorde al mockup (~70px total).
   IMPORTANTE: necesita !important en width/height/padding porque:
   - Bootstrap .form-control { width: 100%; padding: .2rem .8rem }
   - .bootstrap-touchspin { max-width: 75px; min-height: 40px } */
.hs-drawer-qty {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  border: 1px solid var(--hs-border-soft) !important;
  border-radius: var(--hs-radius-pill) !important;
  padding: 0 !important;
  height: 28px !important;
  min-height: 0 !important;
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  line-height: 1 !important;
}
.hs-drawer-qty-btn {
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 26px !important;
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--hs-text);
  cursor: pointer;
  border-radius: var(--hs-radius-pill);
  font-size: 13px;
  font-weight: 500;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  flex: 0 0 22px !important;
}
.hs-drawer-qty-btn:hover { background: rgba(0,0,0,0.06) !important; }
.hs-drawer-qty-input,
.hs-drawer-qty input.hs-drawer-qty-input,
.hs-drawer-qty input.form-control.hs-drawer-qty-input,
.hs-drawer-qty input[name="product-quantity-spin"] {
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 26px !important;
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--hs-text) !important;
  -moz-appearance: textfield !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  line-height: 1 !important;
  flex: 0 0 22px !important;
}
.hs-drawer-qty-input::-webkit-inner-spin-button,
.hs-drawer-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* KILLSWITCH Bootstrap TouchSpin · evita que envuelva el input con flechitas verticales.
   TouchSpin envuelve .js-cart-line-product-quantity con <span class="bootstrap-touchspin">
   y añade <span class="input-group-btn-vertical"> con botones up/down. */
.hs-drawer-qty .bootstrap-touchspin,
.hs-drawer-qty .input-group {
  display: contents !important;
  width: auto !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.hs-drawer-qty .input-group-btn-vertical,
.hs-drawer-qty .input-group-prepend,
.hs-drawer-qty .input-group-append,
.hs-drawer-qty .input-group-btn,
.hs-drawer-qty .bootstrap-touchspin-up,
.hs-drawer-qty .bootstrap-touchspin-down,
.hs-drawer-qty .bootstrap-touchspin-vertical-btn,
.hs-drawer-qty span.input-group-btn-vertical { display: none !important; }
.hs-drawer-qty input.form-control,
.hs-drawer-qty .hs-drawer-qty-input.form-control {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  height: 26px !important;
  box-shadow: none !important;
}

/* Trash: mockup no lo muestra. Posicionada absoluta arriba-derecha (no ocupa hueco),
   visible solo en hover de la línea. */
.hs-drawer-line { position: relative; }
.hs-drawer-line-remove {
  position: absolute;
  top: 14px;
  right: 0;
  color: var(--hs-text-mute) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  text-decoration: none !important;
  opacity: 0;
  transition: opacity .15s ease, color .15s ease;
}
.hs-drawer-line:hover .hs-drawer-line-remove,
.hs-drawer-line:focus-within .hs-drawer-line-remove { opacity: 0.55; } /* HARDEN: también al tabular */
.hs-drawer-line-remove:hover { color: var(--hs-accent-text) !important; opacity: 1 !important; }

.hs-drawer-line-price {
  font-family: var(--hs-font-display);
  font-size: 16px;
  font-weight: 800;
  color: var(--hs-text);
  letter-spacing: -0.01em;
  text-align: right;
  white-space: nowrap;
  margin-left: auto;
}

/* Upsell */
.hs-drawer-upsell {
  padding: 16px 18px 18px;
  background: var(--hs-bg-alt);
  border-top: 1px solid var(--hs-border-soft);
}
.hs-drawer-upsell-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
  margin-bottom: 10px;
}
.hs-drawer-upsell-card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
}
.hs-drawer-upsell-media {
  display: block;
  width: 48px;
  height: 48px;
  background: rgba(0,0,0,0.04);
  border: 1px solid var(--hs-border-soft);
  border-radius: 10px;
  overflow: hidden;
}
.hs-drawer-upsell-media img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.hs-drawer-upsell-body { min-width: 0; }
.hs-drawer-upsell-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--hs-text) !important;
  text-decoration: none !important;
  margin: 0;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hs-drawer-upsell-name:hover { color: var(--hs-accent-text) !important; }
.hs-drawer-upsell-meta {
  font-size: 11px;
  color: var(--hs-text-mute);
  margin-top: 3px;
}
.hs-drawer-upsell-price { color: var(--hs-text); font-weight: 700; }
.hs-drawer-upsell-brand { letter-spacing: 0.04em; }
.hs-drawer-upsell-add {
  display: inline-flex;
  align-items: center;
  background: var(--hs-text);
  color: #fff !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none !important;
  padding: 10px 16px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .15s ease;
}
.hs-drawer-upsell-add:hover { background: var(--hs-accent-fill); color: #fff !important; }

/* Footer (subtotal + envío + total + CTA + pagos) */
.hs-drawer-foot {
  background: var(--hs-bg-alt);
  border-top: 1px solid var(--hs-border-soft);
  padding: 18px 18px 22px;
}
.hs-drawer-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
/* Grid 1fr auto → label left, value siempre al borde derecho */
.hs-drawer-summary-row,
.hs-drawer-summary-row.cart-summary-line {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center;
  font-size: 13px;
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
}
.hs-drawer-summary-label,
.hs-drawer-summary-row .label,
.hs-drawer-summary-row > span:first-child {
  color: var(--hs-text);
  font-weight: 500;
  font-size: 13px;
  text-align: left;
  justify-self: start;
}
.hs-drawer-summary-value,
.hs-drawer-summary-row .value,
.hs-drawer-summary-row > span:last-child {
  color: var(--hs-text);
  font-weight: 700;
  font-size: 13px;
  text-align: right !important;
  justify-self: end;
  float: none !important;
}
.hs-drawer-shipping-free { color: var(--hs-accent-text) !important; }

.hs-drawer-total,
.cart-totals.hs-drawer-total {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  padding: 14px 0 18px !important;
  border-top: 1px solid var(--hs-border-soft) !important;
  margin: 6px 0 14px !important;
  background: transparent !important;
}
.hs-drawer-total-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hs-text);
}
.hs-drawer-total-value {
  font-family: var(--hs-font-display);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--hs-text);
}

.hs-drawer-cta-row,
.cart-buttons.hs-drawer-cta-row {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  padding: 0 !important;
  background: transparent !important;
  border-top: 0 !important;
}
.hs-drawer-cta,
#blockcart-content .hs-drawer-cta,
.cart-buttons.hs-drawer-cta-row .btn-primary.hs-drawer-cta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100% !important;
  min-height: 56px !important;
  padding: 16px 24px !important;
  background: var(--hs-accent-fill) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: var(--hs-font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(231, 9, 90, 0.25);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.hs-drawer-cta:hover,
#blockcart-content .hs-drawer-cta:hover { background: var(--hs-accent-hover) !important; box-shadow: 0 12px 32px rgba(231, 9, 90, 0.32); transform: translateY(-1px); }
.hs-drawer-cta .hs-arrow { font-size: 16px; line-height: 1; }

/* Enlace "Ver carrito completo" bajo el CTA — única vía a /carrito desde el drawer
   (el modal de confirmación está desactivado). color !important: custom_s_1.css
   pinta los <a> en gris #555. */
.hs-drawer-viewcart {
  display: block !important;
  margin-top: 12px !important;
  text-align: center !important;
  font-family: var(--hs-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: var(--hs-text) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
.hs-drawer-viewcart:hover { color: var(--hs-accent-text) !important; }

.hs-drawer-pay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
}
.hs-drawer-pay-sep { opacity: 0.4; }

/* Empty state */
.hs-drawer-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 24px;
  gap: 16px;
  color: var(--hs-text-mute);
  background: var(--hs-bg-alt);
}
.hs-drawer-empty svg { stroke: var(--hs-text-mute); opacity: 0.7; }
.hs-drawer-empty .no-items {
  margin: 0;
  font-size: 14px;
  color: var(--hs-text-mute);
}
.hs-drawer-empty-cta { margin-top: 6px; }

/* Alert dentro del drawer */
#blockcart-content .alert,
#blockcart-content .hs-drawer-alert {
  font-size: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  margin: 0 0 12px 0;
}

@media (max-width: 575px) {
  .side-cart .dropdown-menu-custom,
  #_desktop_blockcart-content,
  #_mobile_blockcart-content { width: 100vw !important; }
  .hs-drawer-count, .hs-drawer-count.modal-title { font-size: 26px !important; }
  .hs-drawer-total-value { font-size: 28px; }
}

/* Drawer overlay */
.hs-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 1050;
}
body.hs-drawer-open .hs-drawer-overlay {
  opacity: 1;
  pointer-events: auto;
}
body.hs-drawer-open { overflow: hidden; }
/* Fix stacking context: mientras el drawer está abierto, eliminamos el z-index
   del header para romper su stacking context. Sin esto, el drawer (fixed,
   z-index 1100) queda atrapado dentro del header (z-index 40) y el overlay
   (hijo de body, z-index 1050) pinta encima del drawer, capturando clicks
   y scroll. Con z-index:auto el drawer escapa al contexto raíz del body. */
body.hs-drawer-open #header,
body.hs-drawer-open header#header,
body.hs-drawer-open #desktop-header,
body.hs-drawer-open #desktop-header.hs-header,
body.hs-drawer-open #mobile-header,
body.hs-drawer-open #mobile-header.hs-mobile-header {
  z-index: auto !important;
  position: static !important;
}

/* ─── Checkout simple header/footer ─── */
body#checkout .header-top,
body#checkout #desktop-header,
body#checkout .hs-announce,
body#checkout #mobile-header,
body#checkout .hs-newsletter { display: none !important; }

body#checkout .hs-checkout-simple-header {
  border-bottom: 1px solid var(--hs-border-soft);
  background: var(--hs-bg-alt);
  padding: 18px 0;
}
body#checkout .hs-checkout-simple-header-inner {
  max-width: var(--hs-max);
  margin: 0 auto;
  padding: 0 var(--hs-gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
body#checkout .hs-checkout-simple-logo {
  font-family: var(--hs-font-display);
  font-size: 22px;
  color: var(--hs-text);
  text-decoration: none;
  letter-spacing: -0.02em;
}
body#checkout .hs-checkout-simple-logo span { color: var(--hs-accent-text); }
body#checkout .hs-checkout-trust {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--hs-font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--hs-text-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body#checkout .hs-checkout-trust svg { color: var(--hs-accent-text); }
body#checkout .hs-checkout-help {
  text-align: right;
  font-size: 12px;
}
body#checkout .hs-checkout-help a {
  color: var(--hs-text-mute);
  text-decoration: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
body#checkout .hs-checkout-help a:hover { color: var(--hs-accent-text); }

body#checkout .hs-checkout-simple-footer {
  border-top: 1px solid var(--hs-border-soft);
  background: var(--hs-bg-alt);
  padding: 24px 0;
  margin-top: 64px;
}
body#checkout .hs-checkout-simple-footer-inner {
  max-width: var(--hs-max);
  margin: 0 auto;
  padding: 0 var(--hs-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: var(--hs-text-mute);
}
body#checkout .hs-checkout-simple-footer-links {
  display: flex;
  gap: 24px;
}
body#checkout .hs-checkout-simple-footer-links a {
  color: var(--hs-text-mute);
  text-decoration: none;
}
body#checkout .hs-checkout-simple-footer-links a:hover { color: var(--hs-accent-text); }

@media (max-width: 767px) {
  body#checkout .hs-checkout-simple-header-inner { grid-template-columns: auto 1fr auto; }
  body#checkout .hs-checkout-trust span { display: none; }
}

/* ─── Checkout steps restyle ─── */
body#checkout #main { padding: 32px 0 64px; max-width: var(--hs-max); margin: 0 auto; padding-left: var(--hs-gutter); padding-right: var(--hs-gutter); }
body#checkout .checkout-step {
  background: var(--hs-bg-alt) !important;
  border: 1px solid var(--hs-border-soft) !important;
  border-radius: var(--hs-radius) !important;
  padding: 28px 32px !important;
  margin-bottom: 16px !important;
  box-shadow: none !important;
}
body#checkout .checkout-step.-unreachable { opacity: 0.6; }
body#checkout .step-title,
body#checkout .step-number {
  font-family: var(--hs-font-display) !important;
  font-size: 24px !important;
  letter-spacing: -0.02em !important;
  color: var(--hs-text) !important;
  margin: 0 0 18px 0 !important;
  text-transform: none !important;
}
body#checkout .step-edit {
  font-family: var(--hs-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--hs-accent-text) !important;
  text-decoration: none !important;
}

/* Form inputs unificados */
body#checkout .form-control,
body#checkout input[type="text"],
body#checkout input[type="email"],
body#checkout input[type="password"],
body#checkout input[type="tel"],
body#checkout textarea,
body#checkout select {
  background: var(--hs-bg) !important;
  border: 1px solid var(--hs-border) !important;
  border-radius: var(--hs-radius-pill) !important;
  padding: 14px 18px !important;
  font-family: var(--hs-font-body) !important;
  font-size: 14px !important;
  color: var(--hs-text) !important;
  height: auto !important;
}
body#checkout .form-control:focus { border-color: var(--hs-accent) !important; box-shadow: 0 0 0 3px rgba(236,26,143,0.12) !important; outline: 0 !important; }

/* G2.7 · EXCEPCIÓN para voucher slim pill — necesita mayor especificidad
   que body#checkout input[type=text] (0,1,1,2) para vencer su padding 14px.
   Añadiendo .hs-cart-voucher-input clase → (0,1,2,2) gana. */
body#checkout input.hs-cart-voucher-input,
body#checkout input.hs-cart-voucher-input[type="text"],
body#checkout .hs-sidebar input.hs-cart-voucher-input,
body#checkout .hs-cart-voucher input.hs-cart-voucher-input {
  height: 34px !important;
  min-height: 0 !important;
  line-height: 32px !important;
  padding: 0 14px !important;
  background: #ffffff !important;
  border: 1px solid var(--hs-border, #d4d4d4) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
body#checkout button.hs-cart-voucher-btn,
body#checkout .hs-sidebar button.hs-cart-voucher-btn,
body#checkout .hs-cart-voucher button.hs-cart-voucher-btn {
  height: 34px !important;
  min-height: 0 !important;
  line-height: 32px !important;
  padding: 0 22px !important;
  background: #0a0a0a !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  box-sizing: border-box !important;
  white-space: nowrap;
}
body#checkout button.hs-cart-voucher-btn:hover { background: var(--hs-accent-fill) !important; }
body#checkout .form-control-label,
body#checkout label.required {
  font-family: var(--hs-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--hs-text) !important;
  margin-bottom: 6px !important;
}

/* Delivery options */
body#checkout .delivery-option {
  background: var(--hs-bg) !important;
  border: 1.5px solid var(--hs-border) !important;
  border-radius: var(--hs-radius) !important;
  padding: 18px 20px !important;
  margin-bottom: 10px !important;
  transition: border-color .15s ease;
  cursor: pointer;
}
body#checkout .delivery-option:hover { border-color: var(--hs-text-mute) !important; }
body#checkout .delivery-option .row { margin: 0 !important; }
body#checkout .delivery-option input[type="radio"]:checked + label,
body#checkout .delivery-option.selected,
body#checkout .delivery-option:has(input:checked) { border-color: var(--hs-accent) !important; background: rgba(236,26,143,0.04) !important; }
body#checkout .carrier-name { font-weight: 700; color: var(--hs-text); }
body#checkout .carrier-price { font-family: var(--hs-font-display); font-size: 18px; color: var(--hs-text); }

/* Payment options */
body#checkout .payment-options .payment-option {
  border: 1.5px solid var(--hs-border) !important;
  border-radius: var(--hs-radius) !important;
  padding: 18px 20px !important;
  margin-bottom: 10px !important;
  background: var(--hs-bg) !important;
}
body#checkout .payment-options .payment-option:has(input:checked) { border-color: var(--hs-accent) !important; background: rgba(236,26,143,0.04) !important; }
body#checkout .payment-option label img { max-height: 28px; margin-left: 12px; vertical-align: middle; }

/* CTA finalizar */
body#checkout .btn-primary,
body#checkout button.btn-primary,
body#checkout input[type="submit"].btn-primary,
body#checkout .continue.btn,
body#checkout #payment-confirmation .btn-primary {
  background: var(--hs-accent-fill) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--hs-radius-pill) !important;
  padding: 16px 32px !important;
  font-family: var(--hs-font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  box-shadow: var(--hs-shadow-cta) !important;
  transition: background .15s ease;
}
body#checkout .btn-primary:hover,
body#checkout #payment-confirmation .btn-primary:hover { background: var(--hs-accent-hover) !important; }

/* Sidebar resumen sticky */
body#checkout .cart-summary,
body#checkout .checkout-sidebar {
  position: sticky;
  top: 24px;
}

/* Order confirmation */
body#order-confirmation .page-order-confirmation,
body#order-confirmation #content {
  max-width: 800px;
  margin: 64px auto;
  padding: 48px var(--hs-gutter);
  text-align: center;
}
body#order-confirmation .h1 {
  font-family: var(--hs-font-display) !important;
  font-size: 48px !important;
  letter-spacing: -0.025em !important;
  color: var(--hs-text) !important;
  margin: 24px 0 16px !important;
}
body#order-confirmation .order-confirmation-table {
  background: var(--hs-bg-alt);
  border: 1px solid var(--hs-border-soft);
  border-radius: var(--hs-radius);
  padding: 24px;
  text-align: left;
  margin-top: 32px;
}

/* Form refresh oculto */
body#product #add-to-cart-or-refresh > input[type="hidden"] { display: none; }

/* Variante link "Elegir opciones" para productos con combinaciones */
.hs-quickadd-link {
  text-decoration: none !important;
  color: inherit;
}
.hs-quickadd-link .hs-quickadd-options {
  background: var(--hs-bg-alt, #ffffff);
  color: var(--hs-text, #0a0a0a);
  border: 1.5px solid var(--hs-text, #0a0a0a);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.25);
}
.hs-quickadd-link:hover .hs-quickadd-options {
  background: var(--hs-text, #0a0a0a);
  color: var(--hs-bg, #f6f2ea);
}

/* ════════════════════════════════════════════════════════════════════
   SESIÓN H1 — Mi cuenta (dashboard, perfil, contraseña,
   direcciones, detalle pedido, historial)
   ════════════════════════════════════════════════════════════════════ */

/* ─── Shell + container ─── */
.hs-account-shell {
  background: var(--hs-bg);
  padding: 24px 0 96px;
  min-height: 60vh;
}
.hs-account-shell-inner {
  max-width: var(--hs-max);
  margin: 0 auto;
  padding: 0 var(--hs-gutter-mobile);
}
@media (min-width: 768px) {
  .hs-account-shell { padding: 40px 0 96px; }
  .hs-account-shell-inner { padding: 0 var(--hs-gutter); }
}

/* ─── Back mobile (cuando no es dashboard) ─── */
.hs-account-back-mobile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 12px;
  color: var(--hs-text) !important;
  text-decoration: none !important;
  font-family: var(--hs-font-display);
  font-size: 18px;
}
.hs-account-back-mobile svg { flex-shrink: 0; }
.hs-account-back-mobile-brand { letter-spacing: -0.02em; }
.hs-account-back-mobile-brand sup { color: var(--hs-accent-text); font-size: 0.6em; top: -0.5em; }
@media (min-width: 1024px) { .hs-account-back-mobile { display: none; } }

/* ─── Breadcrumbs ─── */
.hs-account-crumbs {
  font-family: var(--hs-font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--hs-text-mute);
  letter-spacing: 0.02em;
  margin: 0 0 24px;
  display: none;
}
.hs-account-crumbs a {
  color: var(--hs-text-mute) !important;
  text-decoration: none !important;
}
.hs-account-crumbs a:hover { color: var(--hs-accent-text) !important; }
.hs-account-crumbs-sep { margin: 0 8px; color: var(--hs-text-faint); }
.hs-account-crumbs-current { color: var(--hs-text); font-weight: 600; }
@media (min-width: 1024px) { .hs-account-crumbs { display: block; } }

/* ─── Grid: sidebar + main ─── */
.hs-account-grid { display: grid; gap: 0; }
@media (min-width: 1024px) {
  .hs-account-grid {
    grid-template-columns: 260px 1fr;
    gap: 40px;
    align-items: start;
  }
}

/* ─── Sidebar ─── */
.hs-account-sidebar {
  display: none;
  background: var(--hs-bg-alt);
  border-radius: var(--hs-radius-lg);
  padding: 24px 16px;
  box-shadow: var(--hs-shadow-card);
  position: sticky;
  top: 96px;
}
@media (min-width: 1024px) { .hs-account-sidebar { display: block; } }

.hs-account-sidebar-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 8px 20px;
  border-bottom: 1px solid var(--hs-border-soft);
  margin-bottom: 14px;
}
.hs-account-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--hs-accent-fill);
  color: var(--hs-accent-ink);
  font-family: var(--hs-font-display);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}
.hs-account-sidebar-head-body { min-width: 0; flex: 1; }
.hs-account-sidebar-name {
  margin: 0;
  font-family: var(--hs-font-display);
  font-size: 15px;
  color: var(--hs-text);
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hs-account-sidebar-email {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--hs-text-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hs-account-nav { display: flex; flex-direction: column; gap: 2px; }
.hs-account-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--hs-radius);
  font-family: var(--hs-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--hs-text) !important;
  text-decoration: none !important;
  transition: background var(--hs-transition), color var(--hs-transition);
  position: relative;
}
.hs-account-nav-ico {
  color: var(--hs-accent-text);
  flex-shrink: 0;
}
.hs-account-nav-item:hover {
  background: var(--hs-surface-alt);
}
.hs-account-nav-item.is-active {
  background: var(--hs-text);
  color: #fff !important;
}
.hs-account-nav-item.is-active .hs-account-nav-ico { color: var(--hs-accent-text); }
.hs-account-nav-logout {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--hs-border-soft);
  color: var(--hs-text-mute) !important;
  font-weight: 500;
  border-radius: 0;
}
.hs-account-nav-logout .hs-account-nav-ico { color: var(--hs-text-mute); }
.hs-account-nav-logout:hover { background: transparent; color: var(--hs-text) !important; }

/* ─── Main column ─── */
.hs-account-main { min-width: 0; }

/* ─── Section head ─── */
/* Eyebrow encima del título (mockup). Sin `--with-cta` los hijos directos son
   el <p> y el <h1>: en fila se iban a extremos opuestos. */
.hs-account-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 24px;
}
.hs-account-head--with-cta {
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;
}
.hs-account-eyebrow {
  margin: 0 0 8px;
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hs-accent-text);
}
.hs-account-title {
  margin: 0;
  font-family: var(--hs-font-display);
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--hs-text);
}
@media (min-width: 768px) { .hs-account-title { font-size: 48px; } }

/* ─── Alerts ─── */
/* Alertas: mismas del área de cliente, ahora también para las notificaciones
   del núcleo en cualquier página (_partials/notifications.tpl). */
.hs-alert,
.hs-account-alert {
  border-radius: var(--hs-radius);
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 14px;
  border: 1px solid;
}
.hs-alert--error,
.hs-account-alert--error {
  background: var(--hs-danger-bg);
  border-color: #fecaca;
  color: #991b1b;
}
.hs-alert--success,
.hs-account-alert--success {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}
.hs-alert--warning {
  background: var(--hs-warn-bg);
  border-color: #fde68a;
  color: #92400e;
}
.hs-alert--info {
  background: var(--hs-surface-soft);
  border-color: var(--hs-border);
  color: var(--hs-text);
}
.hs-alert p,
.hs-account-alert p { margin: 0 0 6px; }
.hs-alert p:last-child,
.hs-account-alert p:last-child { margin: 0; }
/* los enlaces que trae algún aviso del core ("Añadir nueva dirección") */
.hs-alert a { color: inherit !important; text-decoration: underline; }
#notifications:empty { display: none; }

/* ─── Forms ─── */
.hs-account-form { margin-bottom: 32px; }
.hs-account-form-card {
  background: var(--hs-bg-alt);
  border-radius: var(--hs-radius-lg);
  padding: 28px 24px;
  box-shadow: var(--hs-shadow-card);
}
@media (min-width: 768px) { .hs-account-form-card { padding: 36px 36px; } }

.hs-form-row { display: grid; gap: 18px; margin-bottom: 18px; }
.hs-form-row--2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .hs-form-row--2 { grid-template-columns: 1fr 1fr; } }

.hs-form-group { margin-bottom: 18px; }
.hs-form-group label,
.hs-form-row .hs-form-group label {
  display: block;
  font-family: var(--hs-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--hs-text);
  margin-bottom: 6px;
}
.hs-form-group input[type="text"],
.hs-form-group input[type="email"],
.hs-form-group input[type="tel"],
.hs-form-group input[type="date"],
.hs-form-group input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  background: var(--hs-surface);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius);
  font-family: var(--hs-font-body);
  font-size: 14px;
  color: var(--hs-text);
  transition: border-color var(--hs-transition), background var(--hs-transition);
}
.hs-form-group input:focus {
  outline: none;
  border-color: var(--hs-text);
}
.hs-form-group input::placeholder { color: var(--hs-text-faint); }
.hs-form-group.has-error input { border-color: var(--hs-danger); background: var(--hs-danger-bg); }
.hs-form-group--readonly input { background: var(--hs-surface-alt); color: var(--hs-text-mute); cursor: not-allowed; }
.hs-form-hint { margin: 6px 0 0; font-size: 11px; color: var(--hs-text-faint); }
.hs-form-err { margin: 6px 0 0; font-size: 12px; color: var(--hs-danger); font-weight: 500; }
.hs-form-req { color: var(--hs-accent-text); margin-left: 4px; }

/* Rejilla del formulario de dirección. Los campos los genera PrestaShop y
   cambian según el país, así que la anchura la marca cada .hs-form-group:
   por defecto fila completa y --half para los que van de dos en dos. */
.hs-form-grid { display: grid; grid-template-columns: 1fr; column-gap: 18px; }
@media (min-width: 640px) {
  .hs-form-grid { grid-template-columns: 1fr 1fr; }
  .hs-form-grid > .hs-form-group { grid-column: 1 / -1; }
  .hs-form-grid > .hs-form-group--half { grid-column: auto; }
}
/* Campos que PS puede emitir con tipos fuera de la lista de arriba */
.hs-form-grid .hs-form-group input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  width: 100%;
  padding: 12px 14px;
  background: var(--hs-surface);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius);
  font-family: var(--hs-font-body);
  font-size: 14px;
  color: var(--hs-text);
  transition: border-color var(--hs-transition), background var(--hs-transition);
}
.hs-form-optional {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hs-text-faint);
}

/* Select: el caret nativo no se puede estilar, se dibuja aparte */
.hs-form-select { position: relative; }
.hs-form-select select {
  width: 100%;
  padding: 12px 38px 12px 14px;
  background: var(--hs-surface);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius);
  font-family: var(--hs-font-body);
  font-size: 14px;
  color: var(--hs-text);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color var(--hs-transition);
}
.hs-form-select select:focus { outline: none; border-color: var(--hs-text); }
.hs-form-select-caret {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hs-text-mute);
  pointer-events: none;
}
.hs-form-group.has-error .hs-form-select select { border-color: var(--hs-danger); background: var(--hs-danger-bg); }

.hs-form-radios { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.hs-form-radios input[type="radio"] { accent-color: var(--hs-accent); width: 18px; height: 18px; cursor: pointer; }

/* Checkboxes */
.hs-form-checkgroup {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--hs-border-soft);
  margin-bottom: 8px;
}
.hs-form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--hs-text);
  cursor: pointer;
  margin: 0;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
.hs-form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--hs-accent);
  cursor: pointer;
}
.hs-form-check.is-disabled { color: var(--hs-text-faint); cursor: not-allowed; }
.hs-form-check.is-disabled input { cursor: not-allowed; }

/* Secret block (current password confirmation) */
.hs-form-secret {
  margin-top: 18px;
  padding: 18px;
  background: var(--hs-surface-soft);
  border-radius: var(--hs-radius);
  border-left: 3px solid var(--hs-accent);
}
.hs-form-secret label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.hs-form-secret input {
  width: 100%;
  padding: 12px 14px;
  background: var(--hs-bg-alt);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius);
  font-size: 14px;
}

/* Password strength meter */
.hs-pwd-strength {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}
.hs-pwd-strength-bar {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--hs-border-soft);
  transition: background var(--hs-transition);
}
.hs-pwd-strength-bar.is-on.level-1 { background: var(--hs-danger); }
.hs-pwd-strength-bar.is-on.level-2 { background: var(--hs-warn); }
.hs-pwd-strength-bar.is-on.level-3 { background: #16a34a; }
.hs-pwd-strength-bar.is-on.level-4 { background: var(--hs-accent-fill); }
.hs-pwd-strength-label {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--hs-text-mute);
}
.hs-pwd-strength-label strong { color: var(--hs-text); font-weight: 700; }

/* Form actions */
.hs-form-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--hs-border-soft);
  flex-wrap: wrap;
}

/* ─── Buttons ─── */
.hs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  font-family: var(--hs-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none !important;
  border: 1.5px solid transparent;
  border-radius: var(--hs-radius-pill);
  cursor: pointer;
  transition: background var(--hs-transition), color var(--hs-transition), border-color var(--hs-transition);
  white-space: nowrap;
  line-height: 1;
}
.hs-btn--primary {
  background: var(--hs-accent-fill);
  color: var(--hs-accent-ink) !important;
  border-color: var(--hs-accent);
}
.hs-btn--primary:hover { background: var(--hs-accent-hover); border-color: var(--hs-accent-hover); }
.hs-btn--ghost {
  background: transparent;
  color: var(--hs-text) !important;
  border-color: var(--hs-text);
}
.hs-btn--ghost:hover { background: var(--hs-text); color: #fff !important; }
.hs-btn--danger-ghost {
  background: transparent;
  color: var(--hs-danger) !important;
  border-color: var(--hs-danger);
}
.hs-btn--danger-ghost:hover { background: var(--hs-danger); color: #fff !important; }
.hs-btn--sm { padding: 9px 16px; font-size: 11px; letter-spacing: 0.1em; }
.hs-btn--block { width: 100%; }
/* Botón presente pero aún no accionable (factura sin emitir, envío sin salir).
   Va en un <span>, así que no hace falta neutralizar el href. */
.hs-btn.is-disabled {
  background: transparent !important;
  color: var(--hs-text-faint) !important;
  border-color: var(--hs-border) !important;
  cursor: default;
}
/* El primario apagado se queda relleno para no confundirse con el ghost */
.hs-btn--primary.is-disabled {
  background: var(--hs-surface-alt) !important;
  border-color: var(--hs-surface-alt) !important;
}

/* ─── Eliminar mi cuenta ─── */
.hs-account-danger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  border-top: 1px solid var(--hs-border);
  flex-wrap: wrap;
}
.hs-account-danger-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--hs-text); }
.hs-account-danger-sub { margin: 4px 0 0; font-size: 12px; color: var(--hs-text-mute); }
.hs-account-foot-note {
  margin: 18px 0 0;
  font-size: 12px;
  color: var(--hs-text-mute);
  font-style: italic;
}

/* ════════ DASHBOARD ════════ */
.hs-dash { max-width: 720px; }
.hs-dash-greet { margin-bottom: 22px; }
.hs-dash-greet-eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hs-accent-text);
}
.hs-dash-greet-title {
  margin: 0;
  font-family: var(--hs-font-display);
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--hs-text);
}
@media (min-width: 768px) { .hs-dash-greet-title { font-size: 44px; } }
.hs-dash-greet-sub { margin: 6px 0 0; font-size: 13px; color: var(--hs-text-mute); }

/* Last order black card */
.hs-dash-lastorder {
  display: block;
  background: var(--hs-text);
  color: #fff !important;
  border-radius: var(--hs-radius-lg);
  padding: 20px;
  margin-bottom: 22px;
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
  transition: transform var(--hs-transition);
}
.hs-dash-lastorder:hover { transform: translateY(-1px); }
.hs-dash-lastorder-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hs-accent-text);
  margin-bottom: 8px;
}
.hs-dash-lastorder-dot { opacity: 0.6; }
.hs-dash-lastorder-status { color: #fff; }
.hs-dash-lastorder-ref {
  margin: 0;
  font-family: var(--hs-font-display);
  font-size: 22px;
  letter-spacing: -0.01em;
  color: #fff;
}
.hs-dash-lastorder-info { margin: 4px 0 16px; font-size: 13px; color: rgba(255,255,255,0.7); }
.hs-dash-lastorder-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--hs-accent-fill);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--hs-radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* No order placeholder */
.hs-dash-noorder {
  background: var(--hs-bg-alt);
  border-radius: var(--hs-radius-lg);
  padding: 28px 24px;
  text-align: center;
  margin-bottom: 22px;
  border: 1px dashed var(--hs-border);
}
.hs-dash-noorder-title { margin: 0; font-family: var(--hs-font-display); font-size: 20px; color: var(--hs-text); }
.hs-dash-noorder-sub { margin: 6px 0 16px; font-size: 13px; color: var(--hs-text-mute); }
.hs-dash-noorder-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--hs-accent-fill);
  color: #fff !important;
  padding: 12px 22px;
  border-radius: var(--hs-radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none !important;
}

/* Quick access list (nav en mobile) */
.hs-dash-quick {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--hs-bg-alt);
  border-radius: var(--hs-radius-lg);
  box-shadow: var(--hs-shadow-card);
  overflow: hidden;
}
.hs-dash-quick li + li .hs-dash-quick-item {
  border-top: 1px solid var(--hs-border-soft);
}
.hs-dash-quick-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px;
  color: var(--hs-text) !important;
  text-decoration: none !important;
  transition: background var(--hs-transition);
}
.hs-dash-quick-item:hover { background: var(--hs-surface-alt); }
.hs-dash-quick-ico {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--hs-surface-alt);
  color: var(--hs-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hs-dash-quick-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hs-dash-quick-label { font-family: var(--hs-font-display); font-size: 16px; color: var(--hs-text); }
.hs-dash-quick-meta { font-size: 12px; color: var(--hs-text-mute); }
.hs-dash-quick-arrow { color: var(--hs-text-faint); flex-shrink: 0; }
.hs-dash-quick-item--logout .hs-dash-quick-ico { background: transparent; color: var(--hs-text-mute); }
.hs-dash-quick-item--logout .hs-dash-quick-label { color: var(--hs-text-mute); font-family: var(--hs-font-body); font-size: 14px; font-weight: 600; }

/* En desktop el sidebar ya hace la nav: ocultamos la quick list */
@media (min-width: 1024px) {
  .hs-dash-quick { display: none; }
}

/* ════════ DIRECCIONES ════════ */
.hs-addresses-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .hs-addresses-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .hs-addresses-grid { grid-template-columns: repeat(3, 1fr); } }

.hs-address-card {
  position: relative;
  background: var(--hs-bg-alt);
  border-radius: var(--hs-radius-lg);
  padding: 22px 22px 18px;
  border: 1px solid var(--hs-border-soft);
  display: flex;
  flex-direction: column;
}
.hs-address-card.is-default { border-color: var(--hs-accent); }
.hs-address-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(236, 26, 143, 0.1);
  color: var(--hs-accent-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--hs-radius-pill);
}
.hs-address-alias {
  margin: 0 0 14px;
  font-family: var(--hs-font-display);
  font-size: 20px;
  color: var(--hs-text);
  letter-spacing: -0.01em;
}
.hs-address-body { flex: 1; margin-bottom: 18px; }
.hs-address-name { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--hs-text); }
.hs-address-line { margin: 0 0 2px; font-size: 13px; color: var(--hs-text-mute); }
.hs-address-phone { margin: 8px 0 0; font-family: var(--hs-font-mono); font-size: 12px; color: var(--hs-text-mute); }

.hs-address-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--hs-border-soft);
}
.hs-address-default-form { display: inline-flex; margin: 0; }
.hs-address-delete {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--hs-text-mute) !important;
  transition: color var(--hs-transition), background var(--hs-transition);
}
.hs-address-delete:hover { color: var(--hs-danger) !important; background: var(--hs-danger-bg); }

/* Add new address card */
.hs-address-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 200px;
  padding: 24px;
  background: transparent;
  border: 1.5px dashed var(--hs-border);
  border-radius: var(--hs-radius-lg);
  color: var(--hs-text-mute) !important;
  text-decoration: none !important;
  transition: border-color var(--hs-transition), color var(--hs-transition), background var(--hs-transition);
}
.hs-address-add:hover {
  border-color: var(--hs-accent);
  color: var(--hs-accent-text) !important;
  background: rgba(236, 26, 143, 0.03);
}
.hs-address-add-plus {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--hs-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 300;
  color: var(--hs-text);
}
.hs-address-add-label { font-size: 13px; font-weight: 600; }

.hs-addresses-empty {
  background: var(--hs-bg-alt);
  border-radius: var(--hs-radius-lg);
  padding: 48px 24px;
  text-align: center;
  border: 1px dashed var(--hs-border);
}
.hs-addresses-empty-title { margin: 0; font-family: var(--hs-font-display); font-size: 22px; color: var(--hs-text); }
.hs-addresses-empty-sub { margin: 8px 0 22px; color: var(--hs-text-mute); }

/* ════════ DETALLE PEDIDO ════════ */
.hs-order-back,
.hs-account-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--hs-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hs-text-mute) !important;
  text-decoration: none !important;
  margin-bottom: 18px;
  transition: color var(--hs-transition);
}
.hs-order-back:hover,
.hs-account-back:hover { color: var(--hs-accent-text) !important; }

.hs-order-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.hs-order-head-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Tarjeta de estado: tracker + línea de contexto en un solo bloque blanco */
.hs-order-statecard {
  background: var(--hs-bg-alt);
  border-radius: var(--hs-radius-lg);
  box-shadow: var(--hs-shadow-card);
  padding: 26px 28px 22px;
  margin-bottom: 28px;
}

/* Progress tracker · puntos de borde a borde, tramos rellenando en medio */
.hs-order-progress { position: relative; }
.hs-order-progress-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
}
.hs-order-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
/* Tramo N → N+1: crece para repartir el ancho sobrante entre los puntos */
.hs-order-progress-seg {
  flex: 1 1 auto;
  min-width: 24px;
  height: 2px;
  margin: 5px 10px 0;
  background: var(--hs-border);
  border-radius: 2px;
  transition: background var(--hs-transition);
}
.hs-order-progress-seg.is-done { background: var(--hs-accent-fill); }
.hs-order-progress-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--hs-border);
  transition: background var(--hs-transition);
}
.hs-order-progress-step.is-done .hs-order-progress-dot { background: var(--hs-accent-fill); }
.hs-order-progress-label {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hs-text-faint);
  text-align: center;
  white-space: nowrap;
}
.hs-order-progress-step.is-done .hs-order-progress-label { color: var(--hs-text); }

.hs-order-status-line {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--hs-border-soft);
  font-size: 13px;
  line-height: 1.5;
  color: var(--hs-text-mute);
}
.hs-order-status-line strong { color: var(--hs-text); font-weight: 700; }

/* Mensajes del pedido (solo lectura: el formulario nativo se retiró) */
.hs-order-messages { margin-top: 28px; }
.hs-order-messages-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hs-order-message {
  background: var(--hs-bg-alt);
  border-radius: var(--hs-radius-lg);
  box-shadow: var(--hs-shadow-card);
  padding: 18px 22px;
}
.hs-order-message-meta {
  margin: 0 0 6px;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--hs-text-mute);
}
.hs-order-message-author { font-weight: 700; color: var(--hs-text); }
.hs-order-message-body { font-size: 14px; line-height: 1.55; color: var(--hs-text); }
.hs-order-status-line code {
  font-family: var(--hs-font-mono);
  font-size: 12px;
  background: var(--hs-surface-alt);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--hs-text);
}

/* Order grid: products + side */
.hs-order-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}
@media (min-width: 1024px) {
  .hs-order-grid { grid-template-columns: 1fr 320px; gap: 32px; }
}

.hs-order-section-title {
  margin: 0 0 16px;
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
}

.hs-order-products {
  background: var(--hs-bg-alt);
  border-radius: var(--hs-radius-lg);
  padding: 24px;
  box-shadow: var(--hs-shadow-card);
}

.hs-order-lines { list-style: none; margin: 0 0 22px; padding: 0; }
.hs-order-line {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hs-border-soft);
  align-items: center;
}
.hs-order-line:first-child { padding-top: 0; }
.hs-order-line:last-child { border-bottom: 0; }
.hs-order-line-media {
  display: block;
  width: 64px;
  aspect-ratio: 1/1;
  background: var(--hs-surface-soft);
  border-radius: var(--hs-radius-sm);
  overflow: hidden;
}
.hs-order-line-media img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.hs-order-line-body { min-width: 0; }
.hs-order-line-brand {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--hs-accent-text);
  margin-bottom: 2px;
}
.hs-order-line-name {
  display: block;
  font-family: var(--hs-font-display);
  font-size: 14px;
  color: var(--hs-text) !important;
  text-decoration: none !important;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.hs-order-line-name:hover { color: var(--hs-accent-text) !important; }
.hs-order-line-meta {
  display: flex;
  gap: 8px;
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--hs-text-mute);
  flex-wrap: wrap;
}
.hs-order-line-meta span + span::before { content: '·'; margin-right: 8px; color: var(--hs-text-faint); }
.hs-order-line-price {
  margin: 0;
  font-family: var(--hs-font-display);
  font-size: 15px;
  color: var(--hs-text);
  text-align: right;
}

.hs-order-totals { margin: 0; }
.hs-order-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  font-size: 13px;
  color: var(--hs-text-mute);
}
.hs-order-totals-row dt { margin: 0; font-weight: 500; }
.hs-order-totals-row dd { margin: 0; font-family: var(--hs-font-mono); color: var(--hs-text); }
.hs-order-totals-row--tax dd { font-family: var(--hs-font-body); font-style: italic; color: var(--hs-text-mute); }
.hs-order-totals-row--grand {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--hs-border);
  font-family: var(--hs-font-display);
  font-size: 18px;
  color: var(--hs-text);
}
.hs-order-totals-row--grand dt { font-weight: 400; font-family: var(--hs-font-display); letter-spacing: 0.02em; }
.hs-order-totals-row--grand dd { font-family: var(--hs-font-display); font-size: 22px; }

.hs-order-side { display: flex; flex-direction: column; gap: 18px; }
.hs-order-side-block {
  background: var(--hs-bg-alt);
  border-radius: var(--hs-radius-lg);
  padding: 22px;
  box-shadow: var(--hs-shadow-card);
}
.hs-order-side-eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
}
.hs-order-side-name {
  margin: 0 0 4px;
  font-family: var(--hs-font-display);
  font-size: 15px;
  color: var(--hs-text);
}
.hs-order-side-addr {
  margin: 0;
  font-size: 13px;
  color: var(--hs-text-mute);
  line-height: 1.5;
  font-style: normal;
}
.hs-order-side-phone {
  margin: 6px 0 0;
  font-family: var(--hs-font-mono);
  font-size: 12px;
  color: var(--hs-text-mute);
}

/* ════════ HISTORIAL ════════ */
.hs-orders-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--hs-bg-alt);
  border-radius: var(--hs-radius-lg);
  box-shadow: var(--hs-shadow-card);
  overflow: hidden;
}
.hs-orders-list li + li .hs-order-row { border-top: 1px solid var(--hs-border-soft); }
.hs-order-row {
  display: grid;
  grid-template-columns: 1.4fr auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 22px 22px;
  color: var(--hs-text) !important;
  text-decoration: none !important;
  transition: background var(--hs-transition);
}
.hs-order-row:hover { background: var(--hs-surface-alt); }
@media (max-width: 767px) {
  .hs-order-row { grid-template-columns: 1fr auto; gap: 10px; padding: 18px 18px; }
  .hs-order-row-status { grid-column: 1 / -1; order: 3; }
  .hs-order-row-total { grid-column: 1; order: 2; text-align: left; }
  .hs-order-row-actions { grid-column: 2; order: 1; }
}
.hs-order-row-eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
}
.hs-order-row-ref {
  margin: 0;
  font-family: var(--hs-font-display);
  font-size: 18px;
  color: var(--hs-text);
  letter-spacing: -0.005em;
}
.hs-order-row-badge {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: var(--hs-radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hs-order-row-total { text-align: right; }
.hs-order-row-total-value {
  margin: 0;
  font-family: var(--hs-font-display);
  font-size: 16px;
  color: var(--hs-text);
}
.hs-order-row-total-meta {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--hs-text-mute);
}
.hs-order-row-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--hs-text-faint);
}
.hs-order-row-invoice {
  color: var(--hs-text-mute) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--hs-transition);
}
.hs-order-row-invoice:hover { color: var(--hs-accent-text) !important; }
.hs-order-row-arrow { color: var(--hs-text-faint); }

.hs-orders-empty {
  background: var(--hs-bg-alt);
  border-radius: var(--hs-radius-lg);
  padding: 64px 24px;
  text-align: center;
  border: 1px dashed var(--hs-border);
}
.hs-orders-empty-title { margin: 0; font-family: var(--hs-font-display); font-size: 24px; color: var(--hs-text); }
.hs-orders-empty-sub { margin: 8px 0 22px; color: var(--hs-text-mute); }

/* ════════ Reset Warehouse-style overrides ════════ */
/* Eliminamos los estilos heredados de .my-account-* + page-header de Warehouse */
.hs-account-shell .my-account-page-content-wrapper,
.hs-account-shell .page-header,
.hs-account-shell .page-content { all: unset !important; display: block; }

/* Wishlist module style consistency cuando se accede desde el sidebar */
body.module-blockwishlist-lists .hs-account-main .page-header,
body[id^="module-blockwishlist"] .hs-account-main .page-header { display: none; }

/* ════════════════════════════════════════════════════════════════════
   SESIÓN H1 v2 — Dashboard desktop (stats + tiles) + Historial cards
   ════════════════════════════════════════════════════════════════════ */

/* ─── Dashboard greet refresh (subtítulo más largo) ─── */
.hs-dash-greet { margin-bottom: 28px; }
.hs-dash-greet-sub {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--hs-text-mute);
  max-width: 560px;
  line-height: 1.5;
}

/* ─── Stats cards (desktop principalmente) ─── */
.hs-dash-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 22px;
}
@media (max-width: 767px) {
  .hs-dash-stats { display: none; }
}
.hs-dash-stat {
  background: var(--hs-bg-alt);
  border-radius: var(--hs-radius-lg);
  padding: 22px 22px 20px;
  box-shadow: var(--hs-shadow-card);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hs-dash-stat-label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
}
.hs-dash-stat-value {
  margin: 4px 0 0;
  font-family: var(--hs-font-display);
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--hs-text);
}
.hs-dash-stat-meta {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--hs-text-mute);
}

/* ─── Last order card refresh (horizontal en desktop) ─── */
.hs-dash-lastorder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 22px 26px;
}
.hs-dash-lastorder-body { min-width: 0; flex: 1; }
.hs-dash-lastorder-info { margin: 4px 0 0; }
.hs-dash-lastorder-cta { flex-shrink: 0; margin: 0; }
@media (max-width: 767px) {
  .hs-dash-lastorder { padding: 20px; gap: 16px; }
  .hs-dash-lastorder-cta { width: 100%; justify-content: center; padding: 14px 20px; }
}

/* ─── 2x2 tile grid (desktop only) ─── */
.hs-dash-tiles {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 4px;
}
@media (min-width: 1024px) { .hs-dash-tiles { display: grid; } }

.hs-dash-tile {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--hs-bg-alt);
  border-radius: var(--hs-radius-lg);
  padding: 22px 22px;
  color: var(--hs-text) !important;
  text-decoration: none !important;
  transition: background var(--hs-transition), transform var(--hs-transition);
  box-shadow: var(--hs-shadow-card);
}
.hs-dash-tile:hover {
  background: var(--hs-surface-alt);
  transform: translateY(-1px);
}
.hs-dash-tile-ico {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(236, 26, 143, 0.08);
  color: var(--hs-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hs-dash-tile-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hs-dash-tile-label { font-family: var(--hs-font-display); font-size: 17px; color: var(--hs-text); letter-spacing: -0.005em; }
.hs-dash-tile-meta { font-size: 12px; color: var(--hs-text-mute); }
.hs-dash-tile-arrow { color: var(--hs-text-faint); flex-shrink: 0; }

/* ════════ HISTORIAL v2 — tabs + cards ════════ */
/* Reset del listado v1 (.hs-orders-list / .hs-order-row) en favor del nuevo */
.hs-orders-list { display: none !important; }

.hs-orders-filter {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  padding: 6px;
  background: var(--hs-bg-alt);
  border-radius: var(--hs-radius-pill);
  width: fit-content;
  box-shadow: var(--hs-shadow-card);
}
.hs-orders-filter-pill {
  background: transparent;
  border: 0;
  padding: 9px 18px;
  border-radius: var(--hs-radius-pill);
  font-family: var(--hs-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--hs-text-mute);
  cursor: pointer;
  transition: background var(--hs-transition), color var(--hs-transition);
  white-space: nowrap;
}
.hs-orders-filter-pill:hover { color: var(--hs-text); }
.hs-orders-filter-pill.is-active {
  background: var(--hs-text);
  color: #fff;
}
@media (max-width: 540px) {
  .hs-orders-filter { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .hs-orders-filter-pill { flex-shrink: 0; }
}

.hs-orders-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hs-orders-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  background: var(--hs-bg-alt);
  border-radius: var(--hs-radius-lg);
  padding: 22px 24px;
  box-shadow: var(--hs-shadow-card);
  transition: box-shadow var(--hs-transition);
}
.hs-orders-card:hover { box-shadow: var(--hs-shadow-card-hover); }

.hs-orders-card-main { min-width: 0; }
.hs-orders-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.hs-orders-card-ref {
  margin: 0;
  font-family: var(--hs-font-display);
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--hs-text);
}
.hs-orders-card-meta {
  margin: 0;
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: var(--hs-text-mute);
  flex-wrap: wrap;
}
.hs-orders-card-meta-sep { color: var(--hs-text-faint); }

.hs-orders-card-side {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}
.hs-orders-card-total {
  margin: 0;
  font-family: var(--hs-font-display);
  font-size: 20px;
  color: var(--hs-text);
  letter-spacing: -0.01em;
}
.hs-orders-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

@media (max-width: 767px) {
  .hs-orders-card { grid-template-columns: 1fr; gap: 12px; padding: 18px 18px; }
  .hs-orders-card-side {
    justify-content: space-between;
    width: 100%;
    padding-top: 12px;
    border-top: 1px solid var(--hs-border-soft);
  }
  .hs-orders-card-actions { gap: 6px; flex-shrink: 0; }
}

/* Badge con dot por grupo — misma receta que .hs-b2bp-badge:
   guía §05 radio Sm (6px), casi cuadrada, no pastilla. */
.hs-orders-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: var(--hs-radius-sm);
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hs-orders-badge::before {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
/* Tonos de estado (6) — alineados con los del portal B2B (.hs-b2bp-badge).
   El índigo anterior no está en la guía de marca; tránsito pasa a magenta. */
.hs-orders-badge--pendiente  { background: rgba(154, 91, 0, 0.13);  color: var(--hs-warn); }
.hs-orders-badge--progreso   { background: rgba(236, 26, 143, 0.12); color: var(--hs-accent-text); }
.hs-orders-badge--transito   { background: rgba(236, 26, 143, 0.12); color: var(--hs-accent-text); }
.hs-orders-badge--entregado  { background: rgba(31, 138, 91, 0.12);  color: var(--hs-success); }
.hs-orders-badge--cancelado  { background: rgba(10, 10, 10, 0.06);   color: var(--hs-text-faint); }
.hs-orders-badge--incidencia { background: rgba(179, 38, 30, 0.12);  color: var(--hs-danger); }

/* Retrocompat: clases de grupo antiguas (por si algún render las usa aún) */
.hs-orders-badge--en-curso { background: rgba(236, 26, 143, 0.12); color: var(--hs-accent-text); }
.hs-orders-badge--devuelto { background: rgba(10, 10, 10, 0.06); color: var(--hs-text-faint); }

/* Tono en la etiqueta del dashboard (card oscura del último pedido) */
.hs-dash-lastorder-status--pendiente  { color: var(--hs-warn); }
.hs-dash-lastorder-status--transito   { color: #818CF8; }
.hs-dash-lastorder-status--entregado  { color: #34D399; }
.hs-dash-lastorder-status--cancelado  { color: #9a9a9a; }
.hs-dash-lastorder-status--incidencia { color: #F87171; }

/* Variant "dark" del botón (REPETIR) */
.hs-btn--dark {
  background: var(--hs-text);
  color: #fff !important;
  border-color: var(--hs-text);
}
.hs-btn--dark:hover {
  background: var(--hs-accent-fill);
  border-color: var(--hs-accent);
}

.hs-orders-empty-filter {
  text-align: center;
  padding: 32px 16px;
  color: var(--hs-text-mute);
  font-size: 14px;
}

/* ════════════════════════════════════════════════════════════════════
   SESIÓN H1.C — Cupones reales (dashboard, drawer, checkout/carrito)
   ════════════════════════════════════════════════════════════════════ */

/* ─── Dashboard: TUS CUPONES ─── */
.hs-coupons { margin-bottom: 22px; }
.hs-coupons-eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
}
.hs-coupons-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) { .hs-coupons-grid { grid-template-columns: 1fr 1fr; } }

.hs-coupon-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--hs-bg-alt);
  border: 1px dashed rgba(236, 26, 143, 0.35);
  border-radius: var(--hs-radius-lg);
  padding: 16px 16px;
}
.hs-coupon-badge {
  flex-shrink: 0;
  min-width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(236, 26, 143, 0.1);
  color: var(--hs-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hs-font-display);
  font-size: 15px;
  letter-spacing: -0.01em;
  padding: 0 4px;
}
.hs-coupon-badge--shipping { font-size: 11px; letter-spacing: 0.04em; }
.hs-coupon-body { flex: 1; min-width: 0; }
.hs-coupon-code {
  margin: 0;
  font-family: var(--hs-font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--hs-text);
}
.hs-coupon-desc {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--hs-text-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hs-coupon-expiry {
  margin: 5px 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--hs-accent-text);
}
.hs-coupon-copy {
  flex-shrink: 0;
  background: var(--hs-text);
  color: #fff;
  border: 0;
  padding: 9px 16px;
  border-radius: var(--hs-radius-pill);
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--hs-transition);
  white-space: nowrap;
}
.hs-coupon-copy:hover { background: var(--hs-accent-fill); }
.hs-coupon-copy.is-copied { background: var(--hs-success); }

/* ─── Drawer: pill cupones disponibles ─── */
.hs-drawer-coupons-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 16px;
  background: rgba(236, 26, 143, 0.06);
  border: 1px solid rgba(236, 26, 143, 0.25);
  border-radius: var(--hs-radius-pill);
  color: var(--hs-accent-text) !important;
  text-decoration: none !important;
  font-size: 12px;
  transition: background var(--hs-transition);
}
.hs-drawer-coupons-pill:hover { background: rgba(236, 26, 143, 0.12); }
.hs-drawer-coupons-pill-text strong { font-family: var(--hs-font-display); font-size: 14px; margin-right: 4px; }
.hs-drawer-coupons-pill-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
  white-space: nowrap;
}

/* ─── Checkout / carrito: cupones disponibles (toggle + lista) ─── */
.hs-voucher-avail { margin-bottom: 14px; }
.hs-voucher-avail-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: rgba(236, 26, 143, 0.06);
  border: 1px solid rgba(236, 26, 143, 0.25);
  border-radius: var(--hs-radius-pill);
  padding: 12px 16px;
  cursor: pointer;
  color: var(--hs-accent-text);
  font-family: var(--hs-font-body);
  transition: background var(--hs-transition);
}
.hs-voucher-avail-toggle:hover { background: rgba(236, 26, 143, 0.12); }
.hs-voucher-avail-toggle-text { font-size: 12px; text-align: left; }
.hs-voucher-avail-toggle-text strong { font-family: var(--hs-font-display); font-size: 14px; margin-right: 4px; }
.hs-voucher-avail-toggle-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}
.hs-voucher-avail-toggle-cta svg { transition: transform var(--hs-transition); }
.hs-voucher-avail-toggle.is-open .hs-voucher-avail-toggle-cta svg { transform: rotate(90deg); }

.hs-voucher-avail-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hs-voucher-avail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--hs-surface-soft);
  border: 1px solid var(--hs-border-soft);
  border-radius: var(--hs-radius);
  padding: 10px 12px;
}
.hs-voucher-avail-item-body {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.hs-voucher-avail-item-badge {
  flex-shrink: 0;
  min-width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(236, 26, 143, 0.1);
  color: var(--hs-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hs-font-display);
  font-size: 11px;
  padding: 0 3px;
}
.hs-voucher-avail-item-badge--shipping { font-size: 11px; }
.hs-voucher-avail-item-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hs-voucher-avail-item-code {
  font-family: var(--hs-font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--hs-text);
}
.hs-voucher-avail-item-desc {
  font-size: 11px;
  color: var(--hs-text-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hs-voucher-avail-item-use {
  flex-shrink: 0;
  background: var(--hs-text);
  color: #fff;
  border: 0;
  padding: 7px 14px;
  border-radius: var(--hs-radius-pill);
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--hs-transition);
}
.hs-voucher-avail-item-use:hover { background: var(--hs-accent-fill); }

/* ════════════════════════════════════════════════════════════════════
   SESIÓN H2 — Pulido responsive móvil (375 / 768px)
   Auditoría de 30 hallazgos, verificados contra el código real.
   Todo additivo: overrides SOLO móvil/táctil, no tocan el desktop aprobado.
   ════════════════════════════════════════════════════════════════════ */

/* ── Guardia global anti scroll horizontal: vive en body (ver línea ~1557). Antes
   había aquí `html { overflow-x: clip }`, que bloqueaba la propagación al viewport. ── */

/* ── HIGH · Título de categoría (base 72px sin override) ──
   NOTA H3: la base de 72px gana vía un selector con DOS ids
   (:is(body#category, body#manufacturer) #js-product-list-header h1 span = espec. 2,0,3), así que
   el override necesita ese mismo id para ganar. Sin él quedaba en 72px y
   se desbordaba en móvil. */
@media (max-width: 767px) {
  :is(body#category, body#manufacturer) #js-product-list-header h1.page-title,
  :is(body#category, body#manufacturer) #js-product-list-header h1.page-title span,
  :is(body#category, body#manufacturer) #js-product-list-header .page-title span,
  :is(body#category, body#manufacturer) h1.page-title,
  :is(body#category, body#manufacturer) h1.page-title span,
  :is(body#category, body#manufacturer) .page-title span { font-size: 40px !important; line-height: 1 !important; }
}
@media (max-width: 400px) {
  :is(body#category, body#manufacturer) #js-product-list-header h1.page-title,
  :is(body#category, body#manufacturer) #js-product-list-header h1.page-title span,
  :is(body#category, body#manufacturer) #js-product-list-header .page-title span,
  :is(body#category, body#manufacturer) h1.page-title,
  :is(body#category, body#manufacturer) h1.page-title span,
  :is(body#category, body#manufacturer) .page-title span { font-size: 32px !important; }
}

/* ── HIGH · Título PDP (hueco 768-991 en 2 col + refuerzo <768) ── */
@media (min-width: 768px) and (max-width: 991px) {
  body#product h1.page-title, body#product .page-title { font-size: 40px !important; }
}
@media (max-width: 400px) {
  body#product h1.page-title, body#product .page-title { font-size: 32px !important; }
}

/* ── HIGH · Home hero title (piso del clamp demasiado alto en 375) ── */
@media (max-width: 575px) {
  .hs-home-hero-title { font-size: clamp(34px, 10vw, 44px); overflow-wrap: break-word; }
}

/* ── HIGH · Título Mi cuenta + header Direcciones con CTA ── */
@media (max-width: 479px) {
  .hs-account-title { font-size: 30px; }
  .hs-account-head--with-cta { flex-wrap: wrap; }
  .hs-account-head--with-cta .hs-btn { width: 100%; justify-content: center; }
}

/* ── HIGH · Drawer: papelera accesible en táctil + qty con target usable ── */
@media (hover: none) {
  .hs-drawer-line-remove { opacity: 0.6 !important; width: 40px; height: 40px; top: 8px; }
}
@media (max-width: 575px) {
  .hs-drawer-qty { height: 36px !important; }
  .hs-drawer-qty-btn, .hs-drawer-qty-input {
    width: 32px !important; min-width: 32px !important; max-width: 32px !important;
    height: 34px !important; flex: 0 0 32px !important;
  }
}

/* ── MEDIUM · Category hero: meta-row apila, subtítulo full-width ── */
@media (max-width: 767px) {
  :is(body#category, body#manufacturer) .hs-hero-meta-row { flex-direction: column; align-items: flex-start; gap: 18px; }
  :is(body#category, body#manufacturer) .hs-hero-subtitle { max-width: 100%; }
  :is(body#category, body#manufacturer) .hs-hero-sort-menu { max-width: calc(100vw - 32px); }
  :is(body#category, body#manufacturer) .hs-category-hero { padding-top: 24px !important; padding-bottom: 20px !important; }
}

/* ── MEDIUM · Category: reset padding lateral de left-column en tablet/móvil ── */
@media (max-width: 991px) {
  :is(body#category, body#manufacturer) #left-column { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ── MEDIUM · Category: iconos de vista grid/lista a target táctil ── */
@media (max-width: 767px) {
  :is(body#category, body#manufacturer) .hs-view-link { width: 44px !important; height: 44px !important; }
}

/* ── MEDIUM · Home bento + drop titles en móvil ── */
@media (max-width: 575px) {
  .hs-bento-card-large .hs-bento-card-title { font-size: 30px; }
  .hs-bento-card-title { font-size: 22px; }
  .hs-home-drop-title { font-size: clamp(30px, 8.5vw, 40px); overflow-wrap: break-word; }
}

/* ── MEDIUM · PDP: padding contenedor a gutter móvil + reassurance 1 col en 768-991 ── */
@media (max-width: 767px) {
  body#product .hs-pdp-container { padding-left: var(--hs-gutter-mobile) !important; padding-right: var(--hs-gutter-mobile) !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hs-pdp-reassurance { grid-template-columns: 1fr; }
}

/* ── MEDIUM · Carrito: padding a gutter móvil + qty/remove target ── */
@media (max-width: 575px) {
  .hs-cart-container { padding-left: var(--hs-gutter-mobile); padding-right: var(--hs-gutter-mobile); }
  .hs-cart-qty { height: 40px; }
  .hs-cart-qty-btn { width: 34px; height: 34px; }
  .hs-cart-qty-input { height: 34px; }
  .hs-cart-line-remove { width: 40px; height: 40px; }
  .hs-cart-line-pricing { min-width: 0; }
}

/* ── MEDIUM · Detalle pedido: etiquetas del progress tracker en 375 ── */
@media (max-width: 599px) {
  /* A este ancho las 4 etiquetas no dejan sitio para tramos como flex items
     (desbordaban la tarjeta). Se pasa a 4 columnas iguales y los tramos se
     posicionan entre centros de punto: 12,5% · 37,5% · 62,5% · 87,5%. */
  .hs-order-statecard { padding: 20px 18px 18px; }
  .hs-order-progress-steps { position: relative; }
  .hs-order-progress-step { flex: 1 1 0; min-width: 0; }
  .hs-order-progress-seg {
    position: absolute;
    top: 5px;
    margin: 0;
    min-width: 0;
    width: calc(25% - 20px);
  }
  .hs-order-progress-seg:nth-of-type(2) { left: calc(12.5% + 10px); }
  .hs-order-progress-seg:nth-of-type(4) { left: calc(37.5% + 10px); }
  .hs-order-progress-seg:nth-of-type(6) { left: calc(62.5% + 10px); }
}
@media (max-width: 479px) {
  /* A 9px las etiquetas medían 66px en columnas de 68: se tocaban entre sí */
  /* TYPESET 2026-09-16: en vez de 8px para que quepan 4 etiquetas en columnas de 68px, solo se ve la del paso
     actual (11px); las demás quedan para lectores de pantalla. Primera/última se anclan al borde. */
  .hs-order-progress-label { font-size: 11px; letter-spacing: 0.08em; line-height: 1.15; padding: 0; }
  .hs-order-progress-step:not(.is-current) .hs-order-progress-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
  }
  .hs-order-progress-step:first-child .hs-order-progress-label { text-align: left; }
  .hs-order-progress-step:last-child .hs-order-progress-label { text-align: right; }
}

/* ── LOW · Historial: acciones de la card envuelven en móvil ── */
@media (max-width: 767px) {
  .hs-orders-card-side { flex-wrap: wrap; }
  .hs-orders-card-actions { flex-wrap: wrap; }
  .hs-orders-card-actions .hs-btn { flex: 1 1 auto; }
}

/* ── LOW · Cuenta: sección eliminar cuenta apila en móvil ── */
@media (max-width: 639px) {
  .hs-account-danger { flex-direction: column; align-items: stretch; }
  .hs-account-danger .hs-btn { width: 100%; justify-content: center; }
}

/* ── LOW · Cupón: truncar código largo para no comprimir "Copiar" ── */
.hs-coupon-code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── LOW · Footer: enlaces de columna con target táctil ── */
@media (max-width: 767px) {
  .hs-footer-col a { display: inline-block; padding: 6px 0; }
}

/* ════════════════════════════════════════════════════════════════════
   SESIÓN H3 — Fixes móvil reportados por Manuel (capturas)
   Additivo: solo dentro de @media (max-width:991px). Desktop intacto.
   ════════════════════════════════════════════════════════════════════ */

/* ── (1) Header móvil CREMA (Manuel: match mockup) ──
   El header pasa a claro: wordmark oscuro (© magenta) e iconos oscuros,
   con la barra de anuncio oscura arriba. El logo-imagen servido es blanco
   (invisible sobre crema) → se oculta y se usa el wordmark de texto .hs-m-logo.
   [Antes: se había invertido a negro por error; Manuel pide crema como el mockup.] */
@media (max-width: 991px) {
  #mobile-header.hs-mobile-header,
  #mobile-header #mobile-header-sticky {
    background: var(--hs-bg);
    border-bottom: 1px solid var(--hs-border);
  }
  .hs-mobile-header .m-nav-btn,
  .hs-mobile-header .m-nav-btn .hs-icon,
  .hs-mobile-header .m-nav-btn svg,
  .hs-mobile-header .m-nav-btn .fa {
    color: var(--hs-text) !important;
    stroke: currentColor;
  }
  .hs-mobile-header .m-nav-btn span { color: var(--hs-text-mute) !important; }
  /* wordmark de texto en vez del logo-imagen blanco */
  .hs-mobile-header .col-mobile-logo img,
  .hs-mobile-header .col-mobile-logo .logo { display: none !important; }
  .hs-m-logo {
    display: inline-block;
    font-family: var(--hs-font-display);
    font-size: 20px;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--hs-text);
    text-decoration: none;
    white-space: nowrap;
  }
  .hs-m-logo-c { color: var(--hs-accent-text); }
}

/* ── (1b) Announce bar: versión compacta en móvil (Manuel) ──
   El track largo (3 mensajes) se envolvía en 3 líneas y comía pantalla.
   En móvil se muestra solo "Envío gratis desde 60€ · Discreto" en una línea. */
.hs-announce-track--compact { display: none; }
@media (max-width: 767px) {
  .hs-announce-track--full { display: none; }
  .hs-announce-track--compact { display: flex; flex-wrap: nowrap; }
}

/* ── (1c) Menú móvil a PANTALLA COMPLETA (Manuel v2) ──
   Overlay propio (#hs-mobile-menu.hs-mmenu-overlay) que se despliega de arriba
   abajo, ocupa todo el viewport, contador DEBAJO del nombre. El JS lo mueve a
   <body> para que position:fixed no dependa de ancestros. Burger→X: el overlay
   full-screen tapa el header y muestra su propia X arriba-izquierda. */
.hs-mmenu-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: var(--hs-bg);
  color: var(--hs-text);
  z-index: 3000;
  transform: translateY(-100%);
  transition: transform 220ms var(--hs-ease-out), visibility 0s linear 220ms; /* ANIMATE: salida */
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.hs-mmenu-overlay.is-open { transform: translateY(0); visibility: visible; transition: transform 360ms var(--hs-ease-drawer), visibility 0s; } /* ANIMATE: entrada */
/* Escalonado de las categorías al abrir (40ms por ítem, no bloquea la interacción) */
.hs-mmenu-overlay .hs-mmenu-cat { opacity: 0; transform: translateY(8px); }
.hs-mmenu-overlay.is-open .hs-mmenu-cat { animation: hs-rise 320ms var(--hs-ease-out) both; }
.hs-mmenu-overlay.is-open .hs-mmenu-cat:nth-child(1) { animation-delay: 120ms; }
.hs-mmenu-overlay.is-open .hs-mmenu-cat:nth-child(2) { animation-delay: 160ms; }
.hs-mmenu-overlay.is-open .hs-mmenu-cat:nth-child(3) { animation-delay: 200ms; }
.hs-mmenu-overlay.is-open .hs-mmenu-cat:nth-child(4) { animation-delay: 240ms; }
.hs-mmenu-overlay.is-open .hs-mmenu-cat:nth-child(5) { animation-delay: 280ms; }
.hs-mmenu-overlay.is-open .hs-mmenu-cat:nth-child(6) { animation-delay: 320ms; }
.hs-mmenu-overlay.is-open .hs-mmenu-cat:nth-child(n+7) { animation-delay: 360ms; }
@keyframes hs-rise { to { opacity: 1; transform: translateY(0); } }
body.hs-menu-open { overflow: hidden; }
@media (min-width: 992px) { .hs-mmenu-overlay { display: none !important; } }
.hs-mmenu-inner { min-height: 100%; display: flex; flex-direction: column; font-family: var(--hs-font-body); }

.hs-mmenu-head {
  display: grid; grid-template-columns: 40px 1fr 40px; align-items: center;
  padding: 12px var(--hs-gutter-mobile);
  border-bottom: 1px solid var(--hs-border);
}
.hs-mmenu-close, .hs-mmenu-acc {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--hs-text);
  cursor: pointer; text-decoration: none;
}
.hs-mmenu-close { justify-self: start; margin-left: -8px; }
.hs-mmenu-acc { justify-self: end; margin-right: -8px; }
.hs-mmenu-logo {
  justify-self: center;
  font-family: var(--hs-font-display); font-size: 21px; line-height: 1;
  color: var(--hs-text); text-decoration: none; letter-spacing: -0.01em;
}
.hs-mmenu-logo-c { color: var(--hs-accent-text); }

.hs-mmenu-search {
  display: flex; align-items: center; gap: 10px;
  margin: 16px var(--hs-gutter-mobile) 0;
  padding: 0 16px; height: 46px;
  background: var(--hs-surface-alt); border-radius: var(--hs-radius-pill);
  color: var(--hs-text-mute);
}
.hs-mmenu-search-ic { flex: none; }
.hs-mmenu-search-input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-family: var(--hs-font-body); font-size: 15px; color: var(--hs-text);
}

.hs-mmenu-scroll { flex: 1 1 auto; padding: 0 var(--hs-gutter-mobile) 40px; }
.hs-mmenu-label {
  font-family: var(--hs-font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--hs-text-mute);
  margin: 26px 0 4px;
}

.hs-mmenu-cat {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 0; border-bottom: 1px solid var(--hs-border-soft);
  text-decoration: none; color: var(--hs-text);
}
.hs-mmenu-cat-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hs-mmenu-cat-name { font-family: var(--hs-font-display); font-size: 21px; letter-spacing: -0.01em; line-height: 1; }
.hs-mmenu-cat-count { font-family: var(--hs-font-body); font-size: 12px; color: var(--hs-text-mute); }
.hs-mmenu-cat-arrow { flex: none; color: var(--hs-text-mute); }
.hs-mmenu-cat--outlet .hs-mmenu-cat-name,
.hs-mmenu-cat--outlet .hs-mmenu-cat-count,
.hs-mmenu-cat--outlet .hs-mmenu-cat-arrow { color: var(--hs-accent-text); }

.hs-mmenu-access { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.hs-mmenu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hs-accent-fill); color: #fff; text-decoration: none;
  height: 50px; border-radius: var(--hs-radius-pill);
  font-family: var(--hs-font-body); font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.hs-mmenu-btn:hover { background: var(--hs-accent-hover); }
.hs-mmenu-sublink {
  text-align: center; color: var(--hs-text-mute); text-decoration: none;
  font-family: var(--hs-font-body); font-size: 13px;
}

.hs-mmenu-support { display: flex; flex-direction: column; margin-top: 2px; }
.hs-mmenu-support-link {
  padding: 14px 0; border-bottom: 1px solid var(--hs-border-soft);
  text-decoration: none; color: var(--hs-text);
  font-family: var(--hs-font-body); font-size: 15px;
}
.hs-mmenu-support-note { color: var(--hs-text-mute); font-size: 13px; }

/* ── (1d) Listado móvil: fila FILTROS + ordenar, overlay de filtros fullscreen,
   chip flotante (mockup Manuel). El overlay reutiliza #left-column re-estilado
   (sin mover DOM → ps_facetedsearch AJAX intacto). Solo ≤991px. ── */
.hs-mfilters-row, .hs-mfilters-head-bar, .hs-mfilters-foot-bar, .hs-mfilters-fab { display: none; }

@media (max-width: 991px) {
  /* fila de pills bajo las subcategorías */
  .hs-mfilters-row { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
  .hs-mfilters-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--hs-text); color: var(--hs-bg); border: 1px solid var(--hs-text);
    font-family: var(--hs-font-mono); font-size: 11px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; line-height: 1;
    padding: 11px 16px; border-radius: var(--hs-radius-pill); cursor: pointer;
  }
  .hs-mfilters-badge {
    background: var(--hs-accent-fill); color: #fff; border-radius: var(--hs-radius-pill);
    font-size: 11px; padding: 2px 7px;
  }
  .hs-msort { position: relative; }
  .hs-msort-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: transparent; color: var(--hs-text); border: 1px solid var(--hs-border);
    font-family: var(--hs-font-mono); font-size: 11px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; line-height: 1;
    padding: 11px 16px; border-radius: var(--hs-radius-pill); cursor: pointer;
    max-width: 60vw; white-space: nowrap;
  }
  .hs-msort-current { overflow: hidden; text-overflow: ellipsis; }
  .hs-msort-menu {
    display: none; position: absolute; top: calc(100% + 8px); right: auto; left: 0; z-index: 500;
    min-width: 240px; margin: 0; padding: 6px 0; list-style: none;
    background: var(--hs-surface); border: 1px solid var(--hs-border);
    border-radius: var(--hs-radius); box-shadow: var(--hs-shadow-card-hover);
  }
  .hs-msort.is-open .hs-msort-menu { display: block; }
  .hs-msort-item {
    display: block; padding: 10px 16px; font-family: var(--hs-font-body);
    font-size: 14px; color: var(--hs-text); text-decoration: none;
  }
  .hs-msort-item.is-current { color: var(--hs-accent-text); font-weight: 600; }

  /* ocultar el sort del hero (desktop) y el sidebar por defecto en móvil */
  :is(body#category, body#manufacturer) .hs-hero-sort { display: none; }
  :is(body#category, body#manufacturer) #left-column { display: none; }

  /* overlay fullscreen: el propio #left-column fijado a viewport */
  :is(body#category, body#manufacturer).hs-mfilters-open { overflow: hidden; }
  :is(body#category, body#manufacturer).hs-mfilters-open #left-column {
    display: block; position: fixed; inset: 0; z-index: 3000;
    background: var(--hs-bg); overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 92px var(--hs-gutter-mobile) 110px !important;
    max-width: none; width: 100%;
  }
  /* la mini-cabecera del sidebar sobra (el overlay tiene la suya) */
  :is(body#category, body#manufacturer).hs-mfilters-open #left-column .hs-filters-head { display: none; }
  /* Warehouse oculta #facets_search_wrapper en móvil → forzarlo dentro del overlay */
  :is(body#category, body#manufacturer).hs-mfilters-open #facets_search_wrapper { display: block !important; }
  /* botonera móvil nativa del módulo (Borrar todo / OK) — redundante con nuestro footer.
     OJO: su "Borrar todo" (.js-search-filters-clear-all) sigue en DOM para la delegación. */
  :is(body#category, body#manufacturer).hs-mfilters-open #left-column .hidden-md-up { display: none !important; }

  :is(body#category, body#manufacturer).hs-mfilters-open .hs-mfilters-head-bar {
    display: flex; align-items: flex-start; justify-content: space-between;
    position: fixed; top: 0; left: 0; right: 0; z-index: 3001;
    background: var(--hs-bg); border-bottom: 1px solid var(--hs-border);
    padding: 16px var(--hs-gutter-mobile) 14px;
  }
  .hs-mfilters-eyebrow {
    font-family: var(--hs-font-body); font-size: 11px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--hs-accent-text);
  }
  .hs-mfilters-title {
    font-family: var(--hs-font-display); font-size: 22px; letter-spacing: -0.02em;
    color: var(--hs-text); margin-top: 2px;
  }
  .hs-mfilters-close {
    background: transparent; border: 0; color: var(--hs-text);
    width: 40px; height: 40px; margin: -6px -8px 0 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
  }

  :is(body#category, body#manufacturer).hs-mfilters-open .hs-mfilters-foot-bar {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 3001;
    background: var(--hs-bg); border-top: 1px solid var(--hs-border);
    padding: 14px var(--hs-gutter-mobile) calc(14px + env(safe-area-inset-bottom));
  }
  .hs-mfilters-clearbtn {
    flex: 0 0 auto; background: transparent; color: var(--hs-text);
    border: 1px solid var(--hs-text); border-radius: var(--hs-radius-pill);
    font-family: var(--hs-font-mono); font-size: 11px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3;
    padding: 12px 16px; cursor: pointer;
  }
  .hs-mfilters-apply {
    flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--hs-accent-fill); color: #fff; border: 0; border-radius: var(--hs-radius-pill);
    font-family: var(--hs-font-mono); font-size: 11px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; line-height: 1;
    padding: 15px 18px; cursor: pointer;
  }
  .hs-mfilters-apply:hover { background: var(--hs-accent-hover); }

  /* chip flotante al scrollear */
  .hs-mfilters-fab {
    display: inline-flex; align-items: center; gap: 7px;
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 900;
    background: var(--hs-text); color: var(--hs-bg); border: 0;
    font-family: var(--hs-font-mono); font-size: 11px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; line-height: 1;
    padding: 13px 20px; border-radius: var(--hs-radius-pill); cursor: pointer;
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.35);
  }
  .hs-mfilters-fab[hidden] { display: none; }
  :is(body#category, body#manufacturer).hs-mfilters-open .hs-mfilters-fab { display: none; }
  .js-hs-mfilters-fab-count { color: var(--hs-accent-text); }

  /* facetas dentro del overlay: separadores y aire como el mockup */
  :is(body#category, body#manufacturer).hs-mfilters-open #search_filters .hs-filter-group {
    padding: 20px 0; border-bottom: 1px solid var(--hs-border); margin: 0;
  }
  :is(body#category, body#manufacturer).hs-mfilters-open #search_filters .hs-filter-group:last-child { border-bottom: 0; }
}

/* ── (2) Home hero móvil: la imagen caía al fondo, tras las stats ──
   Desktop = grid 6fr/4fr (copy | media). En móvil apilaba copy→media,
   dejando la imagen la última tras las stats. Con display:contents la copy
   se aplana y podemos intercalar la imagen justo tras el título (título
   primero, como el mockup), dejando lead/CTA y las stats de cierre. */
@media (max-width: 991px) {
  .hs-home-hero-inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 36px var(--hs-gutter-mobile) 8px;
  }
  .hs-home-hero-copy { display: contents; }
  .hs-home-hero-eyebrow { order: 1; }
  .hs-home-hero-title   { order: 2; }
  .hs-home-hero-media   { order: 3; }
  .hs-home-hero-lead    { order: 4; margin-top: 0; }
  .hs-home-hero-actions { order: 5; margin-top: 0; }
  .hs-home-hero-stats   { order: 6; margin-top: 12px; width: 100%; }
  /* imagen contenida (no un cuadrado pálido casi vacío), alineada a la
     izquierda con el texto (en tablet quedaba centrada y descolocada) */
  .hs-home-hero-media { justify-content: flex-start; }
  .hs-home-hero-media-inner {
    aspect-ratio: 4 / 3;
    max-width: 440px;
    padding: 16px;
    border-radius: var(--hs-radius);
  }
}

/* ══════════════════════════════════════════════════════════════
   SESIÓN I — Modo Mayorista · Corte 1 (barra de modo, chip, captación)
   ══════════════════════════════════════════════════════════════ */

/* Barra de modo — gemela de la announce bar, con acento magenta */
.hs-mayo-bar {
  background: var(--hs-text);
  color: var(--hs-bg);
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 10px 0;
  position: relative;
  z-index: 50;
}
.hs-mayo-bar-inner {
  max-width: var(--hs-max);
  margin: 0 auto;
  padding: 0 var(--hs-gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px 14px;
}
.hs-mayo-bar-item { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.hs-mayo-bar-mode { color: #fff; }
.hs-mayo-dim { color: rgba(246, 242, 234, 0.6); }
.hs-mayo-strong { color: #fff; font-weight: 700; }
.hs-mayo-sep { color: rgba(246, 242, 234, 0.28); }
.hs-mayo-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--hs-accent-fill);
  display: inline-block; flex: none;
  box-shadow: 0 0 0 3px rgba(236, 26, 143, 0.2);
}
.hs-mayo-wa { color: var(--hs-accent-text); text-decoration: none; }
.hs-mayo-wa:hover { color: #fff; }

/* Chip mayorista junto al logo */
.hs-logo-group { display: inline-flex; align-items: center; gap: 12px; }
.hs-mayo-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--hs-text); color: #fff;
  font-family: var(--hs-font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  line-height: 1; white-space: nowrap;
  padding: 4px 8px 4px 7px;
  /* Badge, no botón → radio "Sm" de la guía de marca (6px), no pill */
  border-radius: var(--hs-radius-sm);
}
.hs-mayo-chip-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--hs-accent-fill); flex: none;
}

/* Banner de captación (invitado, home) */
.hs-mayo-cap {
  background: var(--hs-surface-alt);
  border-top: 1px solid var(--hs-border);
  border-bottom: 1px solid var(--hs-border);
}
.hs-mayo-cap-inner {
  max-width: var(--hs-max);
  margin: 0 auto;
  padding: 9px var(--hs-gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
}
.hs-mayo-cap-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hs-mayo-chip-solid { flex: none; }
.hs-mayo-cap-copy {
  color: var(--hs-text);
  font-family: var(--hs-font-body);
  font-size: 14px; font-weight: 500; line-height: 1.35;
}
.hs-mayo-cap-cta {
  flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--hs-font-body);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--hs-text); text-decoration: none;
  border-bottom: 2px solid var(--hs-accent);
  padding-bottom: 3px;
  transition: color var(--hs-transition);
}
.hs-mayo-cap-cta span { color: var(--hs-accent-text); }
.hs-mayo-cap-cta:hover { color: var(--hs-accent-text); }

@media (max-width: 991px) {
  .hs-mayo-hide-md { display: none !important; }
}
@media (max-width: 767px) {
  .hs-mayo-hide-sm { display: none !important; }
  .hs-mayo-bar { font-size: 11px; letter-spacing: 0.12em; padding: 8px 0; }
  .hs-mayo-cap-inner { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px var(--hs-gutter-mobile); }
  .hs-mayo-cap-copy { font-size: 13px; }
  .hs-logo-group { gap: 9px; }
  .hs-mayo-chip { font-size: 11px; padding: 4px 8px 4px 7px; }
}
/* Chip mayorista en header móvil (bajo el wordmark, centrado, pill hugea contenido) */
.hs-mayo-chip-mobile { text-align: center; margin-top: 4px; }

/* ── PDP · Tabla precio por volumen (mockup B2B, repaso 2026-07-27) ──
   Tipografía: TODO Inter. La guía §03 reserva JetBrains Mono a datos técnicos
   (códigos, IDs) — cabeceras de tabla, badges y cifras van en Inter, con
   tabular-nums para que las columnas cuadren. */
.hs-mayo-vol { margin: 24px 0 0; }
.hs-mayo-vol-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.hs-mayo-vol-eyebrow {
  font-family: var(--hs-font-body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--hs-accent-text);
}
.hs-mayo-vol-note {
  font-family: var(--hs-font-body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.03em; color: var(--hs-text-mute);
}
.hs-mayo-vol-card {
  /* Mockup: las filas van sobre el crema de la página, no sobre blanco.
     La cabecera es el único bloque tintado (surface-alt). */
  background: var(--hs-bg);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius);
  overflow: hidden;
}
.hs-mayo-vol-table {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  font-family: var(--hs-font-body); margin: 0;
}
.hs-mayo-vol-table th {
  text-align: left; padding: 11px 14px;
  background: var(--hs-surface-alt);
  border-bottom: 1px solid var(--hs-border);
  font-family: var(--hs-font-body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-text-mute);
  white-space: nowrap;
}
.hs-mayo-vol-th-qty { width: 40%; }
.hs-mayo-vol-table th:nth-child(2) { width: 22%; }
.hs-mayo-vol-table th:nth-child(3) { width: 14%; }
/* Especificidad: `.hs-mayo-vol-table th/td` es (0,1,1) y gana a la clase sola. */
.hs-mayo-vol-table th.hs-mayo-vol-th-total { width: 24%; }
/* GOTCHA: Sesión E metió `body#product .col-product-info *{text-align:left!important}`
   (1,1,1 + !important) → cualquier alineación a la derecha dentro de la columna de
   producto necesita !important Y un id en el selector para ganarle. */
body#product .hs-mayo-vol-table th.hs-mayo-vol-th-total,
body#product .hs-mayo-vol-table td.hs-mayo-vol-total { text-align: right !important; }
.hs-mayo-vol-table td {
  padding: 13px 14px; border-bottom: 1px solid var(--hs-border-soft);
  text-align: left; font-size: 15px; line-height: 1.2;
  color: var(--hs-text); /* la columna de producto hereda gris: se fuerza negro */
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hs-mayo-vol-table td.hs-mayo-vol-total { text-align: right; }
.hs-mayo-vol-table tbody tr:last-child td { border-bottom: 0; }
.hs-mayo-vol-qty { text-align: left; white-space: normal; }
.hs-mayo-vol-qtywrap {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: inherit; /* el reset `body span{font-family:Inter}` ataca al span */
}
/* Mockup: cantidad, precio unitario y total en negro; los dos importes en negrita
   (el "/ud" va pegado al precio y con el mismo peso, "40,00 €/ud"). */
.hs-mayo-vol-range { font-weight: 500; color: var(--hs-text); }
.hs-mayo-vol-unit { font-weight: 700; color: var(--hs-text); }
.hs-mayo-vol-unit-suffix { color: inherit; font-weight: inherit; font-size: inherit; }
.hs-mayo-vol-off { color: var(--hs-accent-text); font-weight: 700; }
.hs-mayo-vol-dash { color: var(--hs-text-faint); }
.hs-mayo-vol-total { font-weight: 700; color: var(--hs-text); }
/* Fila del tramo activo: solo tinte rosa a sangre, sin barra lateral (mockup). */
.hs-mayo-vol-row.is-mine { background: rgba(236, 26, 143, 0.06); }
.hs-mayo-vol-badge {
  font-family: var(--hs-font-body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; line-height: 1;
  padding: 5px 8px; border-radius: var(--hs-radius-sm);
}
.hs-mayo-vol-badge-best { background: var(--hs-text); color: #fff; }
.hs-mayo-vol-badge-mine { background: var(--hs-accent-fill); color: #fff; }
.hs-mayo-vol-meta {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  margin: 10px 0 0; font-family: var(--hs-font-body);
  font-size: 12px; line-height: 1.5; color: var(--hs-text-mute);
}
.hs-mayo-vol-min { margin: 10px 0 0; font-size: 12px; color: var(--hs-text-mute); }

/* ── PDP · etiqueta CANTIDAD + fila de compra B2B ── */
.hs-mayo-qty-label {
  font-family: var(--hs-font-body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--hs-text-faint);
  margin: 22px 0 8px;
}
.hs-pdp--mayo .hs-pdp-actions { padding-top: 0 !important; }
.hs-mayo-buy { flex-wrap: nowrap; align-items: stretch; }
.hs-mayo-buy .hs-pdp-cta { min-width: 0; }
.hs-mayo-add-btn { justify-content: center; gap: 8px; }
.hs-mayo-add-btn .hs-pdp-add-label { white-space: nowrap; }
.hs-mayo-add-arrow { font-size: 14px; line-height: 1; }
/* "Guardar en presupuesto": enlace de texto, nunca un botón — no debe competir
   con el CTA principal (repaso de Manuel 2026-07-27). */
button.hs-mayo-quote-add,
.hs-mayo-quote-add {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 14px 0 0; padding: 0;
  background: none; border: 0; box-shadow: none;
  font-family: var(--hs-font-body); font-size: 12px; font-weight: 600;
  color: var(--hs-text-mute); cursor: pointer;
  transition: color 0.15s ease;
}
button.hs-mayo-quote-add:hover,
button.hs-mayo-quote-add:focus-visible { color: var(--hs-text); background: none; }
.hs-mayo-quote-add svg { flex: 0 0 auto; }
.hs-mayo-quote-add[data-busy] { opacity: 0.5; cursor: default; }

/* Toast de confirmación (no saca al cliente de la ficha) */
.hs-mayo-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 1200;
  transform: translate(-50%, 12px);
  max-width: min(90vw, 420px);
  padding: 12px 18px;
  background: var(--hs-text); color: #fff;
  border-radius: var(--hs-radius-pill);
  font-family: var(--hs-font-body); font-size: 13px; font-weight: 600;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.hs-mayo-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.hs-mayo-toast.is-error { background: var(--hs-accent-fill); }

/* ── PDP · tarjetas de contexto B2B (stock · reposición · última compra) ── */
.hs-mayo-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; margin: 22px 0 4px;
}
.hs-mayo-stat {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px;
  /* Mockup: mismo crema que la página, el marco es lo único que dibuja la card */
  background: var(--hs-bg);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius);
}
.hs-mayo-stat-key {
  font-family: var(--hs-font-body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-text-mute);
  white-space: nowrap; /* "PRÓXIMA REPOSICIÓN" en una línea, como el mockup */
}
.hs-mayo-stat-val {
  font-family: var(--hs-font-body); font-size: 16px; font-weight: 700;
  color: var(--hs-text); /* la columna de producto hereda gris */
  line-height: 1.2; font-variant-numeric: tabular-nums;
}
.hs-mayo-stat-approx { color: var(--hs-text-faint); font-weight: 500; }

/* Wishlist/comparador retail fuera de la ficha B2B: el mockup deja solo pedido
   + consulta. Los IDs necesitan doble id para ganar a `body#product #iqit-…
   {display:flex!important}` de Sesión E (2,0,1). */
.hs-pdp--mayo .product-additional-info,
.hs-pdp--mayo .col-add-wishlist,
.hs-pdp--mayo .col-add-compare,
body#product #main.hs-pdp--mayo #iqit-wishlist-product-btn,
body#product #main.hs-pdp--mayo .btn-iqitwishlist-add { display: none !important; }

/* El resumen (description_short) sí aparece en la ficha B2B (mockup): al club le
   dice qué es y en qué formato viene. En retail sigue oculto por decisión de
   Sesión E v3 (regla `body#product [id^=product-description-short-]`, 1,1,1
   !important → aquí hacen falta dos ids + !important para ganarle). */
body#product #main.hs-pdp--mayo [id^="product-description-short-"] { display: block !important; }
.hs-pdp--mayo .product-description {
  font-family: var(--hs-font-body); font-size: 15px; line-height: 1.55;
  color: var(--hs-text-mute); margin: 14px 0 0;
}
.hs-pdp--mayo .product-description :is(h1, h2, h3, h4, h5) {
  font-family: var(--hs-font-body); font-size: 15px; font-weight: 600;
  line-height: 1.5; letter-spacing: 0; color: var(--hs-text); margin: 0 0 4px;
}
.hs-pdp--mayo .product-description p { margin: 0 0 6px; }
.hs-pdp--mayo .product-description p:last-child { margin-bottom: 0; }

/* Eyebrow con SKU a la derecha (mockup B2B) */
.hs-pdp-eyebrow-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
}
.hs-pdp-eyebrow-sku {
  font-family: var(--hs-font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--hs-text-faint);
  white-space: nowrap;
}
.hs-pdp-eyebrow-sku .hs-pdp-eyebrow-skuval { color: var(--hs-text); font-weight: 700; }

/* El resumen deja demasiado aire antes de la tabla (66px medidos): en B2B la
   zona de precio sube. */
.hs-pdp--mayo .product-description { margin-bottom: 4px; }
.hs-pdp--mayo .product_header_container { padding-bottom: 0; margin-bottom: 0; }
.hs-pdp--mayo .hs-mayo-vol { margin-top: 20px; }

/* El selector de tramos y la barra fija solo existen en móvil (<768) */
.hs-mayo-tiers { display: none; }
.hs-mayo-bbar { display: none; }
.hs-mayo-gal-chip { display: none; }
.hs-mayo-qty-label-x { display: none; font-family: inherit; }

@media (max-width: 991px) {
  .hs-mayo-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ════════════════════════════════════════════════════════════════════
   FICHA B2B EN MÓVIL (<768) — mockup de Manuel, 2026-07-28
   Cambio estructural: la tabla de 4 columnas no se encoge ni hace scroll,
   se sustituye por un SELECTOR de tramos (el club elige volumen en vez de
   subir cantidad a ciegas) + barra fija de compra que recalcula el importe.
   Todo con variables → funciona en claro y oscuro. Ningún target < 44px.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Chrome: franja de modo en acento + cabecera de detalle ── */
  body#product .hs-mayo-bar {
    background: var(--hs-accent-fill); color: #fff;
    padding: 6px 16px; font-size: 11px; letter-spacing: 0.2em;
  }
  body#product .hs-mayo-bar-inner { padding: 0; gap: 4px 10px; }
  body#product .hs-mayo-bar .hs-mayo-dot { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); }
  body#product .hs-mayo-bar .hs-mayo-bar-mode,
  body#product .hs-mayo-bar .hs-mayo-dim,
  body#product .hs-mayo-bar .hs-mayo-strong { color: #fff; }
  body#product .hs-mayo-bar .hs-mayo-sep { color: rgba(255, 255, 255, 0.55); }
  body#product a.hs-mayo-out { color: #fff !important; }

  .hs-mayo-mheader .col-mobile-btn-menu,
  .hs-mayo-mheader .col-mobile-btn-search,
  .hs-mayo-mheader .col-mobile-btn-account,
  .hs-mayo-mheader .hs-mayo-chip-mobile { display: none !important; }
  .hs-mayo-mback-col .m-nav-btn {
    width: 44px; height: 44px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .hs-mayo-mheader .hs-m-logo { font-size: 17px; }
  .hs-mayo-gal-chip { display: inline-flex; }
  .hs-mayo-qty-label-x { display: inline; }

  /* ── Galería: una sola imagen 1:1, sin la tira de miniaturas apiladas ── */
  .hs-pdp--mayo { overflow-x: hidden; }
  .hs-pdp--mayo .js-qv-mask,
  .hs-pdp--mayo .product-images.js-qv-product-images { display: none !important; }
  .hs-pdp--mayo .col-product-image { position: relative; }
  .hs-pdp--mayo .product-cover {
    background: var(--hs-surface-soft);
    border-radius: var(--hs-radius);
    padding: 28px 40px 44px;
  }
  /* body#product para ganarle a la regla base de los dots (0,1,1 + id) */
  body#product .hs-pdp--mayo .hs-pdp-dot { width: 6px; height: 6px; background: var(--hs-border); border-radius: 999px; }
  body#product .hs-pdp--mayo .hs-pdp-dot.is-active { width: 18px; background: var(--hs-accent-fill); }
  .hs-mayo-gal-chip {
    position: absolute; top: 16px; left: 16px; z-index: 3;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 9px; border-radius: var(--hs-radius-pill);
    background: var(--hs-text); color: #fff;
    font-family: var(--hs-font-body); font-size: 11px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
  }
  .hs-mayo-gal-chip .hs-mayo-chip-dot { background: var(--hs-accent-fill); }

  /* ── Cabecera de la ficha ── */
  .hs-pdp--mayo .hs-pdp-eyebrow-row { flex-wrap: nowrap; gap: 10px; }
  .hs-pdp--mayo .hs-pdp-eyebrow-main {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .hs-pdp--mayo .hs-pdp-eyebrow-sku { flex: 0 0 auto; }
  body#product #main.hs-pdp--mayo .page-title { font-size: 32px !important; line-height: 1.02 !important; }
  .hs-pdp--mayo .product-description,
  .hs-pdp--mayo .product-description :is(p, li, span) { font-size: 13px; line-height: 1.55; }
  /* La navegación de vuelta es el botón atrás de la cabecera: el breadcrumb
     ocupaba dos líneas antes de la foto. Solo en la ficha B2B (clase puesta
     por el propio breadcrumb.tpl), el retail móvil lo conserva. */
  .hs-bc-mayo-pdp { display: none !important; }

  /* ── Precio por volumen: fuera la tabla, dentro el selector ── */
  .hs-pdp--mayo .hs-mayo-vol-card { display: none; }
  .hs-pdp--mayo .hs-mayo-vol-note { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }
  .hs-mayo-tiers { display: flex; flex-direction: column; gap: 8px; }
  .hs-mayo-tier {
    width: 100%; min-height: 60px; padding: 14px;
    display: flex; align-items: center; gap: 12px; text-align: left;
    background: transparent; border: 1px solid var(--hs-border);
    border-radius: var(--hs-radius); cursor: pointer;
    font-family: var(--hs-font-body); color: var(--hs-text);
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .hs-mayo-tier.is-on {
    border: 2px solid var(--hs-accent);
    background: rgba(236, 26, 143, 0.06);
    padding: 13px; /* compensa el borde extra: la fila no salta */
  }
  .hs-mayo-tier-radio {
    flex: 0 0 auto; width: 20px; height: 20px; border-radius: 999px;
    border: 2px solid var(--hs-border); background: transparent;
    transition: border 0.15s ease;
  }
  .hs-mayo-tier.is-on .hs-mayo-tier-radio { border: 6px solid var(--hs-accent); }
  .hs-mayo-tier-mid { flex: 1 1 auto; min-width: 0; font-family: inherit; }
  .hs-mayo-tier-l1 { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-family: inherit; }
  .hs-mayo-tier-range { font-size: 14px; font-weight: 600; color: var(--hs-text); }
  .hs-mayo-tier.is-on .hs-mayo-tier-range { font-weight: 700; }
  .hs-mayo-tier-off { font-size: 11px; font-weight: 700; color: var(--hs-accent-text); }
  .hs-mayo-tier-best {
    font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 2px 5px; border-radius: 3px;
    background: var(--hs-text); color: var(--hs-bg);
  }
  .hs-mayo-tier-total {
    display: block; margin-top: 3px; font-size: 11px; color: var(--hs-text-mute);
    font-variant-numeric: tabular-nums;
  }
  .hs-mayo-tier-unit {
    flex: 0 0 auto; font-family: var(--hs-font-display); font-size: 17px;
    color: var(--hs-text); font-variant-numeric: tabular-nums;
  }
  .hs-mayo-tier-unit-sfx {
    font-family: var(--hs-font-body); font-size: 11px; font-weight: 400;
    color: var(--hs-text-mute);
  }
  .hs-mayo-vol-meta { font-size: 11px; line-height: 1.65; gap: 0 8px; }
  .hs-mayo-vol-meta .hs-mayo-vol-meta-item:first-child { flex: 1 0 100%; }

  /* ── Cantidad exacta: stepper a ancho completo (el CTA vive en la barra fija) ── */
  .hs-mayo-qty-label { margin-top: 20px; }
  .hs-mayo-buy { flex-wrap: wrap; gap: 10px; }
  .hs-mayo-buy .hs-pdp-cta { display: none; }
  .hs-pdp--mayo .hs-pdp-qty {
    width: 100%; height: 56px; justify-content: space-between; padding: 4px 8px;
  }
  .hs-pdp--mayo .hs-qty-btn { width: 44px; height: 44px; font-size: 22px; }
  .hs-pdp--mayo .hs-qty-input,
  .hs-pdp--mayo .hs-pdp-qty input#quantity_wanted {
    font-family: var(--hs-font-display) !important; font-size: 22px !important;
  }

  /* ── Stock/reposición/última compra: de 3 tarjetas a lista con marco ── */
  .hs-mayo-stats {
    display: block; gap: 0; margin-top: 20px;
    border: 1px solid var(--hs-border); border-radius: var(--hs-radius);
  }
  .hs-mayo-stat {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 12px; padding: 13px 14px; min-height: 48px;
    background: transparent; border: 0; border-radius: 0;
    border-bottom: 1px solid var(--hs-border-soft);
  }
  .hs-mayo-stat:last-child { border-bottom: 0; }
  .hs-mayo-stat-key { font-size: 11px; letter-spacing: 0.14em; }
  /* Mismo criterio que en escritorio: el dato en Inter 700 negro (no Archivo Black) */
  .hs-mayo-stat-val {
    font-family: var(--hs-font-body); font-size: 15px; font-weight: 700;
    color: var(--hs-text); text-align: right;
  }

  /* ── Ficha técnica: rejilla de 2 columnas con bordes internos ── */
  /* 56px de padding en la sección dejaban la rejilla en 206px de ancho útil. */
  body#product .hs-pdp--mayo .hs-pdp-editorial { padding: 24px 20px !important; }
  body#product .hs-pdp--mayo .hs-pdp-specs-card { padding: 0; background: transparent; border: 0; }
  .hs-pdp--mayo .hs-pdp-specs-grid {
    grid-template-columns: 1fr 1fr; gap: 0;
    border: 1px solid var(--hs-border); border-radius: var(--hs-radius); overflow: hidden;
  }
  .hs-pdp--mayo .hs-pdp-spec { padding: 13px 14px; min-width: 0; }
  .hs-pdp--mayo .hs-pdp-spec:nth-child(odd) { border-right: 1px solid var(--hs-border-soft); }
  .hs-pdp--mayo .hs-pdp-spec:nth-child(n+3) { border-top: 1px solid var(--hs-border-soft); }
  .hs-pdp--mayo .hs-pdp-spec-key {
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-text-mute);
  }
  .hs-pdp--mayo .hs-pdp-spec-val { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }

  /* ── Barra fija de compra ── */
  .hs-mayo-bbar {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
    padding: 12px 16px 16px;
    background: var(--hs-bg); border-top: 1px solid var(--hs-border);
    box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, 0.35);
  }
  .hs-mayo-bbar-info { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; }
  .hs-mayo-bbar-label {
    font-family: var(--hs-font-body); font-size: 11px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-text-mute);
  }
  .hs-mayo-bbar-total {
    font-family: var(--hs-font-display); font-size: 22px; color: var(--hs-text);
    font-variant-numeric: tabular-nums; line-height: 1.1;
  }
  button.hs-mayo-bbar-btn {
    flex: 1 1 auto; min-height: 52px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--hs-accent-fill) !important; color: #fff !important;
    border: 0; border-radius: var(--hs-radius-pill);
    font-family: var(--hs-font-body); font-size: 12px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
  }
  button.hs-mayo-bbar-btn:disabled { opacity: 0.4; }
  /* Con el drawer del carrito o el menú abiertos, la barra no debe quedar encima. */
  body.hs-drawer-open .hs-mayo-bbar,
  body.hs-menu-open .hs-mayo-bbar { display: none; }
  /* La barra tapa los últimos 92px: se reservan al final del documento. */
  body.hs-has-bbar { padding-bottom: 92px; }
  /* El botón flotante de cookies (44×44 abajo-izquierda) caía justo encima
     del importe de la barra. */
  body.hs-has-bbar #lgcookieslaw_fixed_button { bottom: 104px !important; }
}

/* ── Landing /mayorista (Corte 2) ── */
.hs-b2b { background: var(--hs-bg); }
.hs-b2b-eyebrow {
  font-family: var(--hs-font-body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--hs-accent-text);
  margin-bottom: 14px;
}
.hs-b2b-hero { background: #0a0a0a; color: #f6f2ea; }
.hs-b2b-hero-inner {
  max-width: var(--hs-max); margin: 0 auto;
  padding: clamp(56px, 9vw, 110px) var(--hs-gutter) clamp(48px, 7vw, 90px);
}
.hs-b2b-title {
  font-family: var(--hs-font-display);
  font-size: clamp(40px, 7vw, 84px);
  line-height: 0.98; letter-spacing: -0.01em; color: #fff; margin: 0 0 22px;
}
.hs-b2b-title-accent { color: var(--hs-accent-text); }
.hs-b2b-lead { font-size: clamp(15px, 1.6vw, 18px); line-height: 1.55; color: rgba(246,242,234,0.75); max-width: 560px; margin: 0 0 30px; }
.hs-b2b-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hs-btn-light-ghost {
  border: 1px solid rgba(246,242,234,0.35); color: #f6f2ea; background: transparent;
}
.hs-btn-light-ghost:hover { border-color: #fff; color: #fff; }

.hs-b2b-stats {
  max-width: var(--hs-max); margin: 0 auto;
  padding: 30px var(--hs-gutter);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  border-bottom: 1px solid var(--hs-border);
}
.hs-b2b-stat-num { font-family: var(--hs-font-display); font-size: clamp(26px, 3.4vw, 40px); color: var(--hs-text); }
.hs-b2b-stat-label { font-family: var(--hs-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-text-mute); margin-top: 4px; }

.hs-b2b-section { max-width: var(--hs-max); margin: 0 auto; padding: clamp(48px, 7vw, 90px) var(--hs-gutter); }
.hs-b2b-h2 { font-family: var(--hs-font-display); font-size: clamp(30px, 4.6vw, 54px); line-height: 1.02; color: var(--hs-text); margin: 0 0 34px; }
.hs-b2b-h2-light { color: #fff; }

.hs-b2b-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.hs-b2b-step { background: var(--hs-surface); border: 1px solid var(--hs-border); border-radius: var(--hs-radius); padding: 22px; }
.hs-b2b-step-num { font-family: var(--hs-font-mono); font-size: 12px; font-weight: 600; color: var(--hs-accent-text); margin-bottom: 12px; }
.hs-b2b-step-title { font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.hs-b2b-step-desc { font-size: 13px; line-height: 1.55; color: var(--hs-text-mute); margin: 0; }

.hs-b2b-section-alt { border-top: 1px solid var(--hs-border); }
.hs-b2b-benefits-head { display: grid; grid-template-columns: 1fr 2fr; gap: 44px; align-items: start; }
.hs-b2b-benefits-lead { font-size: 14px; line-height: 1.6; color: var(--hs-text-mute); max-width: 300px; }
.hs-b2b-benefits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 34px; }
.hs-b2b-benefit-num { font-family: var(--hs-font-mono); font-size: 11px; font-weight: 600; color: var(--hs-accent-text); margin-bottom: 6px; }
.hs-b2b-benefit-title { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.hs-b2b-benefit p { font-size: 13px; line-height: 1.55; color: var(--hs-text-mute); margin: 0; }

.hs-b2b-form-wrap { background: #0a0a0a; }
.hs-b2b-form-inner {
  max-width: var(--hs-max); margin: 0 auto;
  padding: clamp(48px, 7vw, 90px) var(--hs-gutter);
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: start;
}
.hs-b2b-form-note { font-size: 14px; line-height: 1.6; color: rgba(246,242,234,0.7); max-width: 340px; }
.hs-b2b-form-contact { margin-top: 26px; }
.hs-b2b-form-contact-label { font-family: var(--hs-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(246,242,234,0.5); margin-bottom: 4px; }
.hs-b2b-form-contact a { color: var(--hs-accent-text); font-weight: 600; text-decoration: none; }
.hs-b2b-form-card { background: var(--hs-bg); border-radius: var(--hs-radius-lg); padding: clamp(22px, 3vw, 36px); }
.hs-b2b-hp { position: absolute; left: -9999px; opacity: 0; height: 0; }
.hs-b2b-field { margin-bottom: 16px; }
.hs-b2b-field label {
  display: block; font-family: var(--hs-font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--hs-text-mute); margin-bottom: 6px;
}
.hs-b2b-field input, .hs-b2b-field select, .hs-b2b-field textarea {
  width: 100%; border: 1px solid var(--hs-border); border-radius: var(--hs-radius-sm);
  background: var(--hs-surface); padding: 11px 12px; font-size: 14px; color: var(--hs-text);
}
.hs-b2b-field input:focus, .hs-b2b-field select:focus, .hs-b2b-field textarea:focus {
  outline: none; border-color: var(--hs-accent); box-shadow: 0 0 0 3px rgba(236,26,143,0.12);
}
.hs-b2b-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hs-b2b-rgpd { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--hs-text-mute); margin: 4px 0 18px; }
.hs-b2b-rgpd input { margin-top: 2px; }
.hs-b2b-rgpd a { color: var(--hs-accent-text); }
.hs-b2b-submit { width: 100%; justify-content: center; }

/* Alta mayorista · tipo de solicitante y documento acreditativo (2026-09-29).
   El tipo decide qué NIF/CIF y qué papel se pide; el <input type=file> nativo
   es feo en todos los navegadores, así que se le da el mismo trato que al
   resto de campos del formulario. */
.hs-b2b-legend {
  display: block; font-family: var(--hs-font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--hs-text-mute); margin-bottom: 8px;
}
.hs-b2b-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hs-b2b-type {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--hs-border); border-radius: var(--hs-radius-sm);
  background: var(--hs-surface); padding: 10px 8px; cursor: pointer;
  font-size: 13px; color: var(--hs-text); text-transform: none; letter-spacing: 0;
  transition: border-color .15s, background .15s;
}
.hs-b2b-type:hover { border-color: var(--hs-text); }
.hs-b2b-type:has(input:checked) { border-color: var(--hs-accent); background: rgba(236,26,143,0.05); }
.hs-b2b-type input { width: auto !important; margin: 0; accent-color: var(--hs-accent); }
.hs-b2b-type span { font-family: var(--hs-font-body); }

.hs-b2b-doc input[type="file"] { padding: 9px 12px; font-size: 13px; cursor: pointer; }
.hs-b2b-doc input[type="file"]::file-selector-button {
  border: 1px solid var(--hs-border); border-radius: var(--hs-radius-sm);
  background: var(--hs-bg); color: var(--hs-text); padding: 6px 12px; margin-right: 12px;
  font-family: var(--hs-font-body); font-size: 12.5px; cursor: pointer;
}
.hs-b2b-doc input[type="file"]::file-selector-button:hover { border-color: var(--hs-accent); color: var(--hs-accent-text); }
.hs-b2b-help {
  margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--hs-text-mute);
  text-transform: none; letter-spacing: 0;
}
.hs-b2b-help-mini { font-size: 11.5px; opacity: .85; }
.hs-b2b-help[hidden] { display: none; }

@media (max-width: 640px) {
  .hs-b2b-types { grid-template-columns: 1fr; }
}
.hs-b2b-form-errors {
  background: rgba(236,26,143,0.08); border: 1px solid var(--hs-accent);
  border-radius: var(--hs-radius-sm); padding: 12px 14px; margin-bottom: 18px;
}
.hs-b2b-form-errors p { margin: 2px 0; font-size: 13px; color: var(--hs-text); }
.hs-b2b-form-ok { text-align: center; padding: 24px 8px; }
.hs-b2b-form-ok-title { font-family: var(--hs-font-display); font-size: 26px; margin-bottom: 12px; }
.hs-b2b-form-ok p { font-size: 14px; color: var(--hs-text-mute); margin-bottom: 22px; }

.hs-b2b-faq-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 44px; align-items: start; }
.hs-b2b-faq { border-bottom: 1px solid var(--hs-border); }
.hs-b2b-faq summary {
  cursor: pointer; list-style: none; padding: 16px 0;
  font-weight: 700; font-size: 15px; display: flex; justify-content: space-between; gap: 14px;
}
.hs-b2b-faq summary::-webkit-details-marker { display: none; }
.hs-b2b-faq summary::after { content: '+'; color: var(--hs-accent-text); font-weight: 700; }
.hs-b2b-faq[open] summary::after { content: '–'; }
.hs-b2b-faq p { font-size: 14px; line-height: 1.6; color: var(--hs-text-mute); margin: 0 0 16px; max-width: 560px; }

@media (max-width: 991px) {
  .hs-b2b-steps { grid-template-columns: repeat(2, 1fr); }
  .hs-b2b-benefits-head { grid-template-columns: 1fr; gap: 26px; }
  .hs-b2b-form-inner { grid-template-columns: 1fr; gap: 30px; }
  .hs-b2b-faq-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 575px) {
  .hs-b2b-stats { grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 22px var(--hs-gutter-mobile); }
  .hs-b2b-steps { grid-template-columns: 1fr; }
  .hs-b2b-benefits-grid { grid-template-columns: 1fr; }
  .hs-b2b-field-row { grid-template-columns: 1fr; gap: 0; }
}

/* ── Listado · toggle precios RETAIL/MAYORISTA + cards mayorista ── */
.hs-mayo-active { color: var(--hs-accent-text); font-weight: 600; }
.hs-mayo-toggle { display: inline-flex; align-items: center; gap: 6px; }
.hs-mayo-toggle-label {
  font-family: var(--hs-font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--hs-text-faint); margin-right: 2px;
}
.hs-mayo-toggle-btn {
  font-family: var(--hs-font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1;
  padding: 6px 11px; border: 1px solid var(--hs-border); background: transparent;
  color: var(--hs-text-mute); border-radius: var(--hs-radius-pill); cursor: pointer;
  transition: background var(--hs-transition), color var(--hs-transition), border-color var(--hs-transition);
}
.hs-mayo-toggle-btn:hover { border-color: var(--hs-text-mute); color: var(--hs-text); }
.hs-mayo-toggle-btn.is-active { background: var(--hs-accent-fill); border-color: var(--hs-accent); color: #fff; }

/* precio card: mayo (/ud, sin IVA) vs retail (con IVA), alternado por clase en body.
   OJO especificidad: el hide necesita (0,2,0) para ganar al
   .hs-card-price-mayo .product-price {display:inline-block} de arriba —
   con .hs-price-retail solo (0,1,0) se veían AMBOS precios a la vez. */
.hs-card-price-mayo .product-price { display: inline-block; }
.hs-card-price-mayo .hs-price-retail { display: none; }
body.hs-retail-mode .hs-card-price-mayo .hs-price-mayo { display: none; }
body.hs-retail-mode .hs-card-price-mayo .hs-price-retail { display: inline-block; }
.hs-card-price-suffix { color: var(--hs-text-faint); font-weight: 400; font-size: 0.8em; }
.hs-card-stock {
  display: inline-block; margin-left: 10px; vertical-align: middle;
  font-family: var(--hs-font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--hs-text-mute);
}
.hs-card-stock.is-out { color: var(--hs-accent-text); }

/* ================================================================
   SESIÓN I — Modo Mayorista · Corte 3 (portal de cuenta B2B)
   Mockup "Buenas, Marta.": header con acciones, card AM negra,
   tabla de pedidos, presupuestos guardados, sidebar de actividad
   + pago pendiente (magenta) + recompra sugerida.
   ================================================================ */

/* El dashboard B2B va a ancho completo: main ocupa todo el grid de cuenta */
.hs-account-main--solo { grid-column: 1 / -1; }

.hs-b2bp { display: flex; flex-direction: column; gap: var(--hs-space-6); }

.hs-b2bp-notice {
  background: rgba(31, 138, 91, 0.1);
  color: var(--hs-success);
  border: 1px solid rgba(31, 138, 91, 0.25);
  border-radius: var(--hs-radius);
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
}
.hs-b2bp-notice--warn {
  background: rgba(180, 83, 9, 0.08);
  color: #b45309;
  border-color: rgba(180, 83, 9, 0.25);
}

/* ——— Header ——— */
.hs-b2bp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--hs-space-4);
}
.hs-b2bp-eyebrow {
  font-family: var(--hs-font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hs-accent-text);
  margin: 0 0 6px;
}
.hs-b2bp-title {
  font-family: var(--hs-font-display);
  font-size: clamp(30px, 4.5vw, 46px);
  line-height: 1;
  margin: 0;
  color: var(--hs-text);
}
.hs-b2bp-head-actions { display: flex; gap: var(--hs-space-3); flex-wrap: wrap; }

/* ——— Nav de cuenta (el panel B2B no tiene sidebar; en móvil no la hay en
   ninguna página, así que estos son los accesos a Perfil/Direcciones/etc.) ——— */
.hs-b2bp-accnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hs-space-2);
  /* pegada al bloque de cabecera, no a media distancia del contenido */
  margin-top: calc(var(--hs-space-5) - var(--hs-space-6));
}
.hs-b2bp-accnav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  background: var(--hs-surface);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-pill);
  font-family: var(--hs-font-body);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none !important;
  /* custom_s_1.css (generado) pinta a:link a #555 con (0,3,1) → !important */
  color: var(--hs-text) !important;
  transition: background var(--hs-transition), border-color var(--hs-transition), color var(--hs-transition);
}
.hs-b2bp-accnav-link svg { width: 15px; height: 15px; flex: none; }
a.hs-b2bp-accnav-link:hover {
  border-color: var(--hs-text);
  color: var(--hs-text) !important;
  text-decoration: none !important;
}
.hs-b2bp-accnav-link.is-active {
  background: var(--hs-text);
  border-color: var(--hs-text);
  color: var(--hs-bg) !important;
}

/* ——— Botones ——— */
.hs-b2bp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--hs-radius-pill);
  padding: 11px 20px;
  /* Guía §04: botones = Inter uppercase con tracking (mono es solo para datos
     técnicos). Antes iban en JetBrains Mono, que no toca aquí. */
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--hs-transition), color var(--hs-transition), border-color var(--hs-transition);
}
.hs-b2bp-btn--sm { padding: 9px 16px; font-size: 11px; }
.hs-b2bp-btn--accent { background: var(--hs-accent-fill); color: var(--hs-accent-ink); }
.hs-b2bp-btn--accent:hover { background: var(--hs-accent-hover); color: var(--hs-accent-ink); text-decoration: none; }
.hs-b2bp-btn--ghost { border-color: var(--hs-text); color: var(--hs-text); background: transparent; }
.hs-b2bp-btn--ghost:hover { background: var(--hs-text); color: var(--hs-bg); text-decoration: none; }
.hs-b2bp-btn--ghostlight { border-color: #fff; color: #fff; background: transparent; }
.hs-b2bp-btn--ghostlight:hover { border-color: #fff; color: #fff; text-decoration: none; }
.hs-b2bp-btn--dark { background: #0a0a0a; color: #fff; }
.hs-b2bp-btn--dark:hover { background: #262626; color: #fff; text-decoration: none; }
.hs-b2bp-btn--light { background: #fff; color: #0a0a0a; }
.hs-b2bp-btn--light:hover { background: #f2ede3; color: #0a0a0a; text-decoration: none; }

/* ——— Grid principal ——— */
.hs-b2bp-grid { display: grid; gap: var(--hs-space-5); }
@media (min-width: 1024px) {
  .hs-b2bp-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--hs-space-6);
    align-items: start;
  }
}
.hs-b2bp-main { display: flex; flex-direction: column; gap: var(--hs-space-6); min-width: 0; }
.hs-b2bp-side { display: flex; flex-direction: column; gap: var(--hs-space-4); }

/* ——— Card account manager ——— */
.hs-b2bp-am {
  background: #0a0a0a;
  color: #fff;
  border-radius: var(--hs-radius-lg);
  padding: 22px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--hs-space-4);
}
.hs-b2bp-am-id { display: flex; align-items: center; gap: 16px; }
.hs-b2bp-am-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--hs-accent-fill);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hs-font-display);
  font-size: 17px;
  flex-shrink: 0;
}
.hs-b2bp-am-eyebrow {
  font-family: var(--hs-font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hs-accent-text);
  margin: 0 0 3px;
}
.hs-b2bp-am-name { font-weight: 700; font-size: 17px; margin: 0; color: #fff; }
.hs-b2bp-am-meta { font-size: 12px; color: rgba(255, 255, 255, 0.55); margin: 3px 0 0; }
/* Botones apilados (WhatsApp arriba, Email abajo) como el mockup */
.hs-b2bp-am-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 148px; }
.hs-b2bp-am-actions .hs-b2bp-btn { width: 100%; }

/* ——— Secciones ——— */
.hs-b2bp-sechead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hs-space-4);
  margin-bottom: var(--hs-space-4);
}
.hs-b2bp-sectitle {
  font-family: var(--hs-font-display);
  font-size: 21px;
  margin: 0;
  color: var(--hs-text);
}
.hs-b2bp-seclink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hs-text);
  text-decoration: none;
  border-bottom: 2px solid var(--hs-accent);
  padding-bottom: 2px;
}
.hs-b2bp-seclink:hover { color: var(--hs-accent-text); text-decoration: none; }
.hs-b2bp-seclink--btn { background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; }

/* ——— Tabla de pedidos (mismo crema que el fondo de página, como el mockup) ——— */
.hs-b2bp-tablewrap {
  background: var(--hs-bg);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-lg);
  overflow-x: auto;
}
.hs-b2bp-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.hs-b2bp-table th {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
  text-align: left;
  padding: 13px 18px;
  background: var(--hs-surface-alt);
  border-bottom: 1px solid var(--hs-border);
  white-space: nowrap;
}
.hs-b2bp-table td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--hs-border);
  font-size: 13px;
  color: var(--hs-text-mute);
  vertical-align: middle;
  white-space: nowrap;
}
.hs-b2bp-table tbody tr:last-child td { border-bottom: 0; }
.hs-b2bp-table tbody tr:hover td { background: rgba(10, 10, 10, 0.02); }
/* Mockup: importes y acciones alineados a la IZQUIERDA, bajo su cabecera.
   Antes iban a la derecha en el td pero el th se quedaba a la izquierda
   (`.hs-b2bp-table th` (0,2,1) gana a `.hs-b2bp-num` (0,1,0)) → columna
   descuadrada. Los importes llevan tabular-nums, así que alinean igual. */
.hs-b2bp-num { text-align: left; }
.hs-b2bp-ref a {
  font-family: var(--hs-font-body);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--hs-text);
  text-decoration: none;
}
.hs-b2bp-ref a:hover { color: var(--hs-accent-text); }
.hs-b2bp-total { font-weight: 700; color: var(--hs-text); font-variant-numeric: tabular-nums; }
/* Estado = punto + texto de color (sin pastilla rellena), como el mockup.
   Un color por semántica: verde=entregado/en camino, magenta=confirmado/preparando,
   ámbar=pendiente, rojo=incidencia, gris=cancelado. */
.hs-b2bp-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
  padding: 5px 10px;
  /* Guía §05: radio Sm (6px) para badges — el mockup las pinta casi cuadradas,
     no en pastilla */
  border-radius: var(--hs-radius-sm);
  background: rgba(10, 10, 10, 0.06);
}
.hs-b2bp-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.hs-b2bp-badge--entregado,
.hs-b2bp-badge--transito { color: var(--hs-success); background: rgba(31, 138, 91, 0.12); }
.hs-b2bp-badge--progreso { color: var(--hs-accent-text); background: rgba(236, 26, 143, 0.12); }
.hs-b2bp-badge--pendiente { color: var(--hs-warn); background: rgba(154, 91, 0, 0.13); }
.hs-b2bp-badge--incidencia { color: var(--hs-danger); background: rgba(179, 38, 30, 0.12); }
.hs-b2bp-badge--cancelado { color: var(--hs-text-faint); background: rgba(10, 10, 10, 0.06); }
.hs-b2bp-paysub { display: block; font-size: 11px; color: var(--hs-text-faint); margin-top: 5px; }
.hs-b2bp-actcol { text-align: left; }
/* Fila de iconos de acción: flex con gap fijo → siempre alineados entre sí y
   centrados en la fila, haya 2 o 3 (el margin suelto los descuadraba). */
.hs-b2bp-acts { display: flex; align-items: center; gap: 6px; }
.hs-b2bp-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-sm);
  color: var(--hs-text-mute);
  background: var(--hs-surface);
  transition: color var(--hs-transition), border-color var(--hs-transition);
}
.hs-b2bp-ico:hover { color: var(--hs-accent-text); border-color: var(--hs-accent); }

/* ——— Presupuestos ——— */
.hs-b2bp-quotes { display: grid; gap: var(--hs-space-4); }
@media (min-width: 700px) { .hs-b2bp-quotes { grid-template-columns: 1fr 1fr; } }
.hs-b2bp-quote {
  /* Mismo crema que el fondo de página (mockup), no card blanca */
  background: var(--hs-bg);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-lg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hs-b2bp-quote-top { display: flex; justify-content: space-between; align-items: center; }
.hs-b2bp-quote-eyebrow {
  font-family: var(--hs-font-body);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--hs-text-faint);
  margin: 0;
}
.hs-b2bp-quote-del {
  color: var(--hs-text-faint);
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  padding: 0 2px;
}
.hs-b2bp-quote-del:hover { color: var(--hs-accent-text); text-decoration: none; }
.hs-b2bp-quote-name { font-weight: 700; font-size: 16px; color: var(--hs-text); margin: 0; }
.hs-b2bp-quote-row { display: flex; justify-content: space-between; align-items: baseline; }
.hs-b2bp-quote-refs { font-size: 12px; color: var(--hs-text-mute); }
.hs-b2bp-quote-total { font-weight: 700; font-size: 17px; color: var(--hs-text); font-variant-numeric: tabular-nums; }
.hs-b2bp-quote-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }

/* ——— Vacíos ——— */
.hs-b2bp-empty {
  background: var(--hs-surface-soft);
  border: 1px dashed var(--hs-border);
  border-radius: var(--hs-radius-lg);
  padding: 28px 24px;
  text-align: center;
}
.hs-b2bp-empty-title { font-weight: 700; color: var(--hs-text); margin: 0 0 4px; }
.hs-b2bp-empty-sub { font-size: 13px; color: var(--hs-text-mute); margin: 0 0 14px; }

/* ——— Sidebar ——— */
.hs-b2bp-card {
  border-radius: var(--hs-radius-lg);
  padding: 20px 22px;
}
.hs-b2bp-card-eyebrow {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.hs-b2bp-activity { background: var(--hs-surface); border: 1px solid var(--hs-border); }
.hs-b2bp-activity .hs-b2bp-card-eyebrow { color: var(--hs-text-faint); }
.hs-b2bp-stats { margin: 0; }
.hs-b2bp-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hs-border-soft);
}
.hs-b2bp-stat:last-child { border-bottom: 0; padding-bottom: 0; }
.hs-b2bp-stat dt { font-size: 12px; color: var(--hs-text-mute); }
.hs-b2bp-stat dd { margin: 0; font-weight: 700; font-size: 14px; color: var(--hs-text); text-align: right; font-variant-numeric: tabular-nums; }
.hs-b2bp-stat-accent { color: var(--hs-accent-text) !important; }
.hs-b2bp-stat-strong { font-size: 13px !important; }

.hs-b2bp-pay { background: var(--hs-accent-fill); color: #fff; }
.hs-b2bp-pay .hs-b2bp-card-eyebrow { color: rgba(255, 255, 255, 0.75); }
.hs-b2bp-pay-amount {
  font-family: var(--hs-font-display);
  font-size: 30px;
  line-height: 1;
  margin: 0 0 6px;
  color: #fff;
}
.hs-b2bp-pay-meta { font-size: 12px; color: rgba(255, 255, 255, 0.8); margin: 0 0 16px; }

.hs-b2bp-habit { background: var(--hs-surface-alt); }
.hs-b2bp-habit .hs-b2bp-card-eyebrow { color: var(--hs-text-faint); }
/* Cabecera con navegación entre sugerencias (solo cuando hay más de una) */
.hs-b2bp-habit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.hs-b2bp-habit--multi .hs-b2bp-card-eyebrow { margin-bottom: 14px; }
.hs-b2bp-habit-nav { display: flex; align-items: center; gap: 4px; margin-bottom: 14px; }
.hs-b2bp-habit-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-sm);
  background: var(--hs-bg);
  color: var(--hs-text-mute);
  cursor: pointer;
  transition: color var(--hs-transition), border-color var(--hs-transition);
}
.hs-b2bp-habit-arrow:hover { color: var(--hs-accent-text); border-color: var(--hs-accent); }
.hs-b2bp-habit-count {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--hs-text-faint);
  min-width: 26px;
  text-align: center;
}
.hs-b2bp-habit-title { font-weight: 700; font-size: 15px; color: var(--hs-text); margin: 0 0 6px; line-height: 1.35; }
.hs-b2bp-habit-sub { font-size: 12px; color: var(--hs-text-mute); margin: 0 0 14px; }

/* ——— Móvil ——— */
@media (max-width: 767px) {
  .hs-b2bp-head { flex-direction: column; align-items: flex-start; }
  .hs-b2bp-head-actions { width: 100%; }
  .hs-b2bp-head-actions .hs-b2bp-btn { flex: 1; }
  .hs-b2bp-am { flex-direction: column; align-items: flex-start; }
  .hs-b2bp-am-actions { width: 100%; }
  .hs-b2bp-am-actions .hs-b2bp-btn { flex: 1; }
}

/* ══════════════════════════════════════════════════════════════
   SESIÓN I·2 — Home móvil según mockup (Manuel, 2026-07-07)
   Additivo: todo dentro de media queries móvil. Desktop intacto.
   Mockup: header burger·wordmark·carrito, buscador visible,
   barra mayorista compacta, hero sin imagen/stats/CTA-ghost,
   categorías como grid 2 col de cards de texto, sin trust strip.
   ══════════════════════════════════════════════════════════════ */

/* ── (1) Header móvil: solo burger · wordmark · carrito ── */
@media (max-width: 991px) {
  .hs-mobile-header .col-mobile-btn-search,
  .hs-mobile-header .col-mobile-btn-account { display: none !important; }
  /* sin labels bajo los iconos (mockup: iconos solos) */
  .hs-mobile-header .m-nav-btn > span:last-child { display: none; }
  .hs-mobile-header .col-mobile-btn-cart { flex: 0 0 auto; }
  .hs-mobile-header .col-mobile-btn-cart .m-nav-btn { display: inline-flex; padding: 8px 4px; }
  /* badge del carrito: circulito magenta arriba-derecha de la bolsa.
     OJO: iqitthemeeditor (custom_s_1.css, CSS generado) trae
     `#mobile-header .m-nav-btn > span { display:none !important }` que se
     llevaba por delante el icon-wrap (carrito invisible a 15px) → se pisa
     con ID + !important. */
  #mobile-header .m-nav-btn > .hs-icon-wrap.mobile-bag-icon {
    position: relative;
    display: inline-flex !important;
  }
  /* SESIÓN K: con ID — .ps-shoppingcart.col-mobile-btn-cart .cart-products-count-btn
     (0,3,0, display:inline-block) y .hs-mobile-header .m-nav-btn span (0,2,1,
     font-size:9px) ganaban a la versión con clases → el dígito quedaba
     arriba-izquierda del circulito en vez de centrado. */
  #mobile-header #mobile-cart-products-count {
    position: absolute; top: -6px; right: -9px;
    min-width: 16px; height: 16px; padding: 0 4px; margin: 0;
    display: inline-flex !important; align-items: center; justify-content: center;
    text-align: center; letter-spacing: 0;
    font-family: var(--hs-font-body); font-size: 10px !important; font-weight: 700; line-height: 1 !important;
    background: var(--hs-accent-fill) !important; color: #fff !important;
    border: 0; border-radius: var(--hs-radius-pill);
  }
  #mobile-header #mobile-cart-products-count:empty,
  #mobile-header #mobile-cart-products-count.hs-badge-zero { display: none !important; }
}

/* ── (2) Buscador visible bajo el header (solo home, ver mobile-header-1.tpl) ── */
.hs-m-searchbar { display: none; }
@media (max-width: 991px) {
  .hs-m-searchbar {
    display: flex; align-items: center; gap: 10px;
    margin: 2px var(--hs-gutter-mobile) 14px;
    padding: 0 16px; height: 46px;
    background: var(--hs-surface-alt);
    border-radius: var(--hs-radius-pill);
    color: var(--hs-text-mute);
  }
  .hs-m-searchbar-ic { flex: none; }
  .hs-m-searchbar-input {
    flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
    font-family: var(--hs-font-body); font-size: 15px; color: var(--hs-text);
  }
  .hs-m-searchbar-input::placeholder { color: var(--hs-text-mute); }
  /* sin línea entre la fila de iconos y el buscador (mockup) */
  #mobile-header:has(.hs-m-searchbar) #mobile-header-sticky { border-bottom: 0; }
}

/* ── (3) Barra de captación mayorista compacta (mockup: una línea tappable) ── */
.hs-mayo-cap-compact { display: none; }
@media (max-width: 767px) {
  .hs-mayo-cap .hs-mayo-cap-inner { display: none; }
  .hs-mayo-cap-compact {
    display: flex; align-items: center; gap: 10px;
    padding: 11px var(--hs-gutter-mobile);
    text-decoration: none;
  }
  .hs-mayo-cap-compact .hs-mayo-chip { flex: none; }
  .hs-mayo-cap-compact-copy {
    flex: 1; min-width: 0;
    font-family: var(--hs-font-body); font-size: 12px; font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--hs-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .hs-mayo-cap-compact-arrow { flex: none; color: var(--hs-accent-text); font-size: 16px; line-height: 1; }
}

/* ── (4) Hero home móvil = mockup exacto: sin imagen, sin stats, un solo CTA ──
   (Sustituye a la decisión H3 de imagen-tras-título; confirmado por Manuel 2026-07-07) */
@media (max-width: 767px) {
  .hs-home-hero-media,
  .hs-home-hero-stats { display: none !important; }
  .hs-home-hero-actions .hs-btn-ghost { display: none; }
  /* sin el min-height desktop (560px) que dejaba un hueco enorme bajo el CTA */
  .hs-home-hero-inner { min-height: 0; padding-bottom: 12px; }
}

/* ── (5) Trust strip fuera en móvil (mockup: hero → categorías directamente) ── */
@media (max-width: 767px) {
  .hs-home-trust { display: none; }
}

/* ── (6) Categorías: grid 2 col de cards de texto crema (mockup) ── */
.hs-bento-eyebrow-m, .hs-bento-meta-m, .hs-bento-title-m { display: none; }
/* Los spans -d/-m internos son pisados por el reset global del tema
   `body span { font-family: Inter }` (0,0,2), que gana a la herencia del
   h3/div padre → el título salía en Inter en vez de Archivo Black (móvil Y
   desktop). `inherit` (0,1,1 > 0,0,2) devuelve cada span a la fuente de su
   padre: título→display, eyebrow/meta→la que toque por viewport. */
.hs-home-bento-eyebrow span,
.hs-bento-card-title span,
.hs-bento-card-meta span,
.hs-home-hero-title span { font-family: inherit; }
@media (max-width: 767px) {
  .hs-bento-eyebrow-d, .hs-bento-meta-d, .hs-bento-title-d { display: none; }
  .hs-bento-eyebrow-m, .hs-bento-meta-m, .hs-bento-title-m { display: inline; }

  /* margen negativo -15px: cancela el padding del .container para que las
     cards aprovechen el ancho (quedan a 20px del borde, no a 35px) */
  .hs-home-bento { margin: 40px -15px 0; }
  /* HARDEN: oculto solo visualmente para no romper la jerarquía H1>H2>H3 en móvil */
  .hs-home-bento-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; margin: 0; }
  .hs-home-bento-head { margin-bottom: 16px; }
  /* grid-auto-rows:1fr → ambas cards de la fila igualan altura */
  .hs-home-bento-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 12px; }
  .hs-bento-card,
  .hs-bento-card-large {
    grid-column: auto; grid-row: auto; min-height: 104px;
    background: var(--hs-surface-soft);
    color: var(--hs-text) !important;
    border: 0;
    border-radius: var(--hs-radius-lg);
  }
  .hs-bento-card:hover { transform: none; box-shadow: none; }
  .hs-bento-card-img,
  .hs-bento-card-overlay,
  .hs-bento-card-arrow { display: none; }
  .hs-bento-card-body {
    position: static; padding: 20px 16px;
    justify-content: center;
  }
  /* Nombre en tipografía display (Archivo Black), como el mockup.
     17px: el más largo ("Papel y filtros" ~128px) cabe en una línea dentro
     del ancho de contenido (~137px). Archivo Black es más ancha que Inter. */
  .hs-bento-card-title,
  .hs-bento-card-large .hs-bento-card-title {
    order: 1;
    font-family: var(--hs-font-display); font-weight: 400;
    font-size: 17px; line-height: 1.05; letter-spacing: -0.01em;
    color: var(--hs-text);
  }
  .hs-bento-card-meta {
    order: 2; margin: 9px 0 0;
    font-family: var(--hs-font-mono); font-size: 11px; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--hs-text-mute); opacity: 1;
  }
  /* Nueva estructura desktop: aplanar la columna derecha para que sus tiles
     entren en la rejilla móvil de 2 columnas (large + 5 cats + Outlet). */
  .hs-bento-right { display: contents; }
  /* Outlet conserva su rosa como bandera de oferta también en móvil */
  .hs-bento-card-outlet { background: var(--hs-accent-fill); }
  .hs-bento-card-outlet .hs-bento-card-title { color: #fff; }
  .hs-bento-card-outlet .hs-bento-card-meta { color: #fff; } /* COLORIZE: antes rgba .85 */
}

/* ── (7) Orden de secciones de la home en móvil (mockup completo de Manuel) ──
   Mockup: hero → categorías → Lo más vendido → drop → footer, sin manifesto
   ni marquee. Manuel mantiene nuevos drops + marca del mes + newsletter →
   van después del drop. Reorden vía flex order: el DOM (desktop) no cambia. */
@media (max-width: 767px) {
  #content.hs-home { display: flex; flex-direction: column; }
  .hs-home > .hs-home-hero      { order: 1; }
  .hs-home > .hs-home-bento     { order: 2; }
  .hs-home > .hs-rail-top       { order: 3; }
  .hs-home > .hs-home-drop      { order: 4; }
  .hs-home > .hs-rail-new       { order: 5; }
  .hs-home > .hs-rail-spotlight { order: 6; }
  .hs-home > .hs-home-manifesto,
  .hs-home > .hs-home-marquee   { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   SESIÓN H4 — Página de carrito (refine vs mockup Claude Design)
   ════════════════════════════════════════════════════════════════════ */

/* Cabecera mínima solo-móvil (oculta en desktop) */
.hs-cart-mhead { display: none; }

/* Breadcrumb */
.hs-cart-crumbs {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--hs-font-body); font-size: 12px;
  color: var(--hs-text-mute); margin-bottom: 18px;
}
.hs-cart-crumbs a { color: var(--hs-text-mute) !important; text-decoration: none !important; }
.hs-cart-crumbs a:hover { color: var(--hs-accent-text) !important; }
.hs-cart-crumbs-sep { color: var(--hs-text-faint); }
.hs-cart-crumbs-current { color: var(--hs-text); }

/* Título + contador inline (pegado al título, no separado) */
.hs-cart-page-head { justify-content: flex-start; align-items: baseline; gap: 12px; margin-bottom: 28px; }
/* El título lo pisa una regla base de Warehouse (.page-title) → forzar display grande */
body#cart .hs-cart-page-title,
body#cart .hs-cart-page-title span {
  font-family: var(--hs-font-display) !important;
  font-size: 48px !important; line-height: 0.95 !important;
  letter-spacing: -0.03em !important; font-weight: normal !important;
}
.hs-cart-page-count {
  font-family: var(--hs-font-body); font-size: 15px; font-weight: 600;
  color: var(--hs-text-mute);
}

/* Grid — más aire */
.hs-cart-grid { gap: 48px; }
.hs-cart-line { padding: 26px 0; grid-template-columns: 104px 1fr minmax(150px, auto); align-items: stretch; }
.hs-cart-line-media { width: 104px; align-self: flex-start; }

/* Columna izquierda: marca/nombre/variante arriba, stepper abajo */
.hs-cart-line-body { display: flex; flex-direction: column; min-width: 0; }
.hs-cart-line-controls { margin-top: auto; padding-top: 16px; margin-bottom: 0; }

/* Columna derecha: precio arriba, acciones abajo */
.hs-cart-line-pricing { display: flex; flex-direction: column; text-align: right; min-width: 0; }
.hs-cart-line-price-top { display: flex; flex-direction: column; align-items: flex-end; }

/* Acciones de línea (desktop): Guardar para después   Eliminar — abajo dcha */
.hs-cart-line-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 18px;
  margin-top: auto; padding-top: 16px;
  font-family: var(--hs-font-body); font-size: 12px;
}
.hs-cart-line-save {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--hs-text-mute); text-decoration: none;
}
.hs-cart-line-save:hover { color: var(--hs-text); text-decoration: underline; text-underline-offset: 3px; }
.hs-cart-line-save.is-saved { color: var(--hs-accent-text); }
.hs-cart-line-actions-sep { display: none; }
.hs-cart-line-remove-text {
  color: var(--hs-accent-text) !important; font-weight: 400; text-decoration: none !important;
}
.hs-cart-line-remove-text:hover { text-decoration: underline !important; text-underline-offset: 3px; }
.hs-cart-line-remove-x { display: none; }

/* Variante: valores separados por · */
.hs-cart-line-attrs { gap: 0; margin: 4px 0 0; }
.hs-cart-line-attrs li:not(:first-child)::before { content: '·'; margin: 0 7px; color: var(--hs-text-faint); }

/* Nombre más marcado (como el mockup) */
.hs-cart-line-name { font-weight: 700; font-size: 15px; }
.hs-cart-line-brand { margin-bottom: 6px; }

/* Resumen */
.hs-cart-summary-title {
  font-family: var(--hs-font-display); font-size: 22px;
  letter-spacing: -0.02em; color: var(--hs-text); margin: 0 0 18px;
}

/* Barra envío gratis (compartida) */
.hs-cart-ship {
  background: var(--hs-bg); border: 1px solid var(--hs-border-soft);
  border-radius: var(--hs-radius-sm); padding: 12px 14px; margin-bottom: 16px;
}
.hs-cart-ship.is-unlocked { border-color: rgba(236,26,143,.35); background: rgba(236,26,143,.05); }
.hs-cart-ship-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.hs-cart-ship-label { font-family: var(--hs-font-body); font-size: 12px; font-weight: 600; color: var(--hs-text); }
.hs-cart-ship.is-unlocked .hs-cart-ship-label { color: var(--hs-accent-text); }
.hs-cart-ship-tick { color: var(--hs-accent-text); font-weight: 800; }
.hs-cart-ship-amount { font-family: var(--hs-font-mono); font-size: 11px; color: var(--hs-text-mute); white-space: nowrap; }
.hs-cart-ship-track { height: 5px; background: var(--hs-surface-alt); border-radius: 999px; overflow: hidden; }
.hs-cart-ship-fill { height: 100%; width: 100%; background: var(--hs-accent-fill); border-radius: 999px; transform-origin: left center; transform: scaleX(calc(var(--hs-prog, 0) / 100)); transition: transform var(--hs-dur-slow) var(--hs-ease-out); } /* ANIMATE: antes width:% */
.hs-cart-mship { display: none; }

/* Desglose extras */
.hs-cart-totals-free { color: var(--hs-accent-text) !important; font-weight: 700; }
.hs-cart-totals-tax-muted { color: var(--hs-text-mute) !important; font-size: 12px; }
.hs-cart-totals-tax-amt { color: var(--hs-text-faint); font-size: 11px; }

/* Neutralizar el touchspin del core dentro del stepper (usamos nuestros −/+) */
.hs-cart-qty { display: inline-flex !important; flex: 0 0 auto; width: auto; }
.hs-cart-qty .input-group.bootstrap-touchspin { display: contents; }
.hs-cart-qty .input-group-btn,
.hs-cart-qty .input-group-addon,
.hs-cart-qty .bootstrap-touchspin-up,
.hs-cart-qty .bootstrap-touchspin-down { display: none !important; }
.hs-cart-qty .hs-cart-qty-input,
.hs-cart-qty input.hs-cart-qty-input.form-control {
  flex: 0 0 40px !important; width: 40px !important; min-width: 0 !important;
  padding: 0 !important; height: 28px !important; box-shadow: none !important;
  border: 0 !important; background: transparent !important; text-align: center !important;
}

/* Crosssell/featured antiguo fuera de la página de carrito (usamos el upsell propio) */
body#cart .crossselling-products,
body#cart .productscategory-block,
body#cart .featured-products.cart { display: none !important; }

/* Trust row — solo iconos, centrada */
.hs-cart-trust-row {
  display: flex; gap: 20px; justify-content: center; align-items: center;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hs-border-soft);
}
.hs-cart-trust-ico { display: inline-flex; color: var(--hs-accent-text); }
.hs-cart-trust-ico svg { flex-shrink: 0; }

/* Seguir comprando — subrayado magenta como el mockup */
.hs-cart-continue {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 28px;
  font-family: var(--hs-font-body); font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--hs-text) !important;
  text-decoration: underline !important; text-decoration-color: var(--hs-accent) !important;
  text-underline-offset: 6px; text-decoration-thickness: 2px;
}
.hs-cart-continue svg { transition: transform .15s ease; }
.hs-cart-continue:hover { color: var(--hs-accent-text) !important; }
.hs-cart-continue:hover svg { transform: translateX(-3px); }

/* Upsell "Suele ir junto" */
.hs-cart-upsell { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--hs-border-soft); }
.hs-cart-upsell-head {
  font-family: var(--hs-font-body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--hs-text-mute); margin-bottom: 16px;
}
.hs-cart-upsell-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hs-cart-upsell-card {
  display: flex; align-items: center; gap: 12px; padding: 12px; min-width: 0;
  background: var(--hs-bg-alt); border: 1px solid var(--hs-border-soft); border-radius: var(--hs-radius-sm);
}
.hs-cart-upsell-media { flex: 0 0 auto; width: 52px; height: 52px; border-radius: var(--hs-radius-sm); overflow: hidden; background: var(--hs-surface-alt); }
.hs-cart-upsell-media img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.hs-cart-upsell-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hs-cart-upsell-brand { font-family: var(--hs-font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--hs-text-mute); }
.hs-cart-upsell-name {
  font-family: var(--hs-font-body); font-size: 12px; font-weight: 600;
  color: var(--hs-text) !important; text-decoration: none !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3;
}
.hs-cart-upsell-name:hover { color: var(--hs-accent-text) !important; }
.hs-cart-upsell-price { font-family: var(--hs-font-display); font-size: 14px; color: var(--hs-text); }
.hs-cart-upsell-form { flex: 0 0 auto; margin: 0; }
.hs-cart-upsell-add {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hs-text); color: #fff !important; border: 0; cursor: pointer;
  text-decoration: none !important; transition: background .15s ease, transform .12s ease;
}
.hs-cart-upsell-add:hover { background: var(--hs-accent-fill); transform: scale(1.06); }

/* Barra sticky de checkout (móvil) */
.hs-cart-stickybar { display: none; }

/* ─── Responsive ─── */
@media (max-width: 991px) {
  .hs-cart-grid { gap: 28px; }
  .hs-cart-upsell-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 767px) {
  /* Cabecera mínima: ocultar chrome global, mostrar barra volver+logo */
  body#cart #mobile-header-sticky,
  body#cart .hs-announce { display: none !important; }
  body#cart .hs-cart-mhead {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px var(--hs-gutter-mobile);
    background: var(--hs-bg); border-bottom: 1px solid var(--hs-border-soft);
    position: sticky; top: 0; z-index: 60;
  }
  .hs-cart-mhead-back { color: var(--hs-text) !important; display: inline-flex; }
  .hs-cart-mhead-logo {
    font-family: var(--hs-font-display); font-size: 20px; letter-spacing: -0.02em;
    color: var(--hs-text) !important; text-decoration: none !important;
  }
  .hs-cart-mhead-logo span { color: var(--hs-accent-text); }
  .hs-cart-mhead-spacer { width: 22px; }

  .hs-cart-crumbs { display: none; }
  body#cart .hs-cart-page { padding: 0 0 100px; }
  .hs-cart-container { padding: 18px var(--hs-gutter-mobile) 0; }
  .hs-cart-page-head { margin-bottom: 4px; }
  body#cart .hs-cart-page-title,
  body#cart .hs-cart-page-title span { font-size: 34px !important; }
  .hs-cart-page-count { display: block; width: 100%; font-size: 13px; margin-top: 2px; }

  /* Barra envío arriba (móvil); la del resumen se oculta */
  .hs-cart-mship { display: block; margin: 14px 0 6px; }
  .hs-cart-dship { display: none; }

  /* CTA del resumen oculto (lo cubre la sticky); trust row también */
  .hs-cart-actions { display: none; }
  .hs-cart-trust-row { display: none; }

  /* Línea: × de borrado en móvil, ocultar acciones texto */
  .hs-cart-line { position: relative; padding: 20px 0; grid-template-columns: 72px 1fr auto; }
  .hs-cart-line-media { width: 72px; }
  .hs-cart-line-actions { display: none; }
  .hs-cart-line-pricing { grid-column: 3; text-align: right; padding-top: 0; min-width: 84px; }
  .hs-cart-line-remove-x {
    display: inline-flex; position: absolute; top: -2px; right: -6px;
    width: 40px; height: 40px; align-items: center; justify-content: center;
    color: var(--hs-text-mute) !important; background: transparent;
  }
  .hs-cart-line-total { font-size: 16px; }

  /* Barra sticky */
  .hs-cart-stickybar {
    display: flex; align-items: center; gap: 14px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    padding: 12px var(--hs-gutter-mobile);
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: var(--hs-bg-alt); border-top: 1px solid var(--hs-border-soft);
    box-shadow: 0 -8px 24px rgba(0,0,0,.08);
  }
  .hs-cart-stickybar-total { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
  .hs-cart-stickybar-label { font-family: var(--hs-font-body); font-size: 11px; color: var(--hs-text-mute); }
  .hs-cart-stickybar-value { font-family: var(--hs-font-display); font-size: 20px; color: var(--hs-text); }
  .hs-cart-stickybar-cta { flex: 1 1 auto; min-height: 52px; font-size: 12px !important; letter-spacing: 0.12em !important; }
}

/* ─── Estado vacío del carrito (H4) ─── */
.hs-cart-empty {
  max-width: 520px; margin: 0 auto; padding: 72px 24px 96px;
  text-align: center; display: flex; flex-direction: column; align-items: center;
}
.hs-cart-empty-icon {
  width: 76px; height: 76px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--hs-surface-alt); color: var(--hs-text-mute); margin-bottom: 24px;
}
.hs-cart-empty-eyebrow {
  font-family: var(--hs-font-body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--hs-accent-text); margin-bottom: 16px;
}
.hs-cart-empty-title {
  font-family: var(--hs-font-display); font-size: 48px; line-height: 0.98;
  letter-spacing: -0.03em; color: var(--hs-text); margin: 0 0 18px;
}
.hs-cart-empty-sub {
  font-family: var(--hs-font-body); font-size: 14px; line-height: 1.5;
  color: var(--hs-text-mute); margin: 0 0 28px; max-width: 400px;
}
.hs-cart-empty-cta { min-height: 54px; padding-left: 32px; padding-right: 32px; }

@media (max-width: 767px) {
  .hs-cart-empty { padding: 56px 20px 80px; }
  .hs-cart-empty-title { font-size: 40px; }
}

/* ══════════════════════════════════════════════════════════════
   FIX tiras blancas laterales (Manuel, 2026-07-08)
   El <body> heredaba fondo blanco del tema Warehouse; el beige vivía
   solo en las secciones, dentro del .container (padding 15px) → en esos
   15px de cada lado asomaba el blanco. Poner el beige en el body lo llena
   de borde a borde. Usa la variable → respeta claro/oscuro.
   ══════════════════════════════════════════════════════════════ */
body { background-color: var(--hs-bg); }

/* ================================================================
   SESIÓN I — Corte 4 (panel de pedido B2B en el carrito)
   "Datos del pedido" (albarán + fecha), ahorro por volumen, CTAs
   Guardar borrador / Presupuesto PDF. Solo cliente mayorista.
   ================================================================ */

/* ——— Datos del pedido (columna izquierda del carrito) ——— */
.hs-b2b-orderdata {
  background: var(--hs-surface);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-lg);
  padding: 22px 24px;
  margin-top: var(--hs-space-5);
}
.hs-b2b-orderdata-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hs-space-3);
  margin-bottom: var(--hs-space-4);
}
.hs-b2b-orderdata-title {
  font-family: var(--hs-font-display);
  font-size: 18px;
  margin: 0;
  color: var(--hs-text);
}
.hs-b2b-orderdata-status {
  font-family: var(--hs-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hs-success);
}
.hs-b2b-orderdata-grid { display: grid; gap: var(--hs-space-4); }
@media (min-width: 640px) { .hs-b2b-orderdata-grid { grid-template-columns: 1fr 1fr; } }

.hs-b2b-field { display: flex; flex-direction: column; }
.hs-b2b-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--hs-text);
  margin-bottom: 7px;
}
.hs-b2b-opt {
  font-weight: 400;
  color: var(--hs-text-faint);
  font-size: 11px;
}
.hs-b2b-field input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1.5px solid var(--hs-border);
  border-radius: var(--hs-radius);
  background: var(--hs-bg-alt);
  color: var(--hs-text);
  font-family: var(--hs-font-body);
  font-size: 14px;
  transition: border-color var(--hs-transition);
}
.hs-b2b-field input:focus {
  outline: none;
  border-color: var(--hs-accent);
}
.hs-b2b-hint {
  font-size: 11px;
  color: var(--hs-text-mute);
  margin: 7px 0 0;
  line-height: 1.4;
}

/* ——— Ahorro por volumen (resumen) ——— */
.hs-b2b-saving {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hs-space-3);
  padding: 12px 0 0;
  margin-top: 4px;
  border-top: 1px dashed var(--hs-border);
}
.hs-b2b-saving-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--hs-text-mute);
}
.hs-b2b-saving-value {
  font-family: var(--hs-font-display);
  font-size: 16px;
  color: var(--hs-accent-text);
}

/* ——— CTAs B2B del resumen ——— */
.hs-b2b-cart-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: var(--hs-space-4);
}
.hs-b2b-cart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--hs-radius-pill);
  padding: 11px 12px;
  font-family: var(--hs-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid var(--hs-text);
  background: transparent;
  color: var(--hs-text);
  transition: background var(--hs-transition), color var(--hs-transition);
}
.hs-b2b-cart-btn svg { flex-shrink: 0; }
.hs-b2b-cart-btn--ghost:hover {
  background: var(--hs-text);
  color: var(--hs-bg);
  text-decoration: none;
}
@media (max-width: 400px) {
  .hs-b2b-cart-actions { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   SESIÓN E v3 — PDP: marcos contenedores según mockup
   (marco de imagen + raíl vertical de miniaturas, etiqueta NUEVO,
    eyebrow marca·categoría, tarjetas de versión)
   ════════════════════════════════════════════════════════════════════ */

/* ─── Galería: raíl de miniaturas a la IZQUIERDA + marco de imagen ─── */
body#product .col-product-image .images-container,
body#product .images-container.bottom {
  display: grid !important;
  grid-template-columns: 68px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
}
body#product .images-container > .product-cover {
  grid-column: 2;
  order: 2;
  margin-bottom: 0 !important;
}
body#product .images-container > .js-qv-mask,
body#product .images-container > .mask {
  grid-column: 1;
  order: 1;
  min-width: 0;
  height: auto !important;
  overflow: visible !important;
}

/* Marco 1:1 con borde + fondo beige; dentro, la foto recortada centrada con
   padding (marco interior invisible). El producto va sin fondo con su sombra. */
body#product .product-cover {
  position: relative;
  background: var(--hs-bg) !important;
  border: 1px solid var(--hs-border) !important;
  border-radius: var(--hs-radius-lg) !important;
  padding: 28px !important;
  margin-bottom: 0 !important;
  overflow: hidden;
  min-height: 0 !important;
  display: block !important;
}
/* Quitar zoom al pasar el ratón (mostraba fondo blanco) y el icono de ampliar */
body#product .easyzoom-flyout { display: none !important; }
body#product .expander { display: none !important; }
body#product #product-images-large {
  background: transparent !important;
  border-radius: 0 !important;
  width: 100%;
  margin: 0 !important;
}
/* Sin flechas laterales sobre la imagen grande: se navega por el raíl (como el mockup) */
body#product #product-images-large .swiper-button-prev,
body#product #product-images-large .swiper-button-next { display: none !important; }

/* Raíl vertical: swiper horizontal reconvertido a columna */
body#product #product-images-thumbs {
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  padding: 0 !important;
}
body#product #product-images-thumbs .swiper-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  height: auto !important;
  transform: none !important;
}
body#product #product-images-thumbs .swiper-slide {
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}
body#product #product-images-thumbs .thumb-container { width: 100%; }
/* Miniaturas: cajita 1:1 con borde + beige, producto recortado centrado dentro */
body#product #product-images-thumbs .thumb,
body#product #product-images-thumbs img.thumb {
  width: 100% !important;
  height: 60px !important;
  object-fit: contain !important;
  border-radius: var(--hs-radius-sm) !important;
  border: 1.5px solid var(--hs-border) !important;
  background: var(--hs-bg) !important;
  cursor: pointer;
  transition: border-color .15s ease;
}
body#product #product-images-thumbs .thumb:hover { border-color: var(--hs-text-mute) !important; }
body#product #product-images-thumbs .thumb.selected,
body#product #product-images-thumbs .thumb.active,
body#product #product-images-thumbs .js-thumb.selected {
  border-color: var(--hs-accent) !important;
}
body#product #product-images-thumbs .swiper-button-prev,
body#product #product-images-thumbs .swiper-button-next { display: none !important; }

/* ─── Etiqueta NUEVO (flag nativo) dentro del marco, arriba-izquierda ─── */
body#product .product-cover .product-flags {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body#product .product-cover .product-flag {
  margin: 0 !important;
  font-family: var(--hs-font-display) !important;
  font-size: 11px !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  padding: 8px 12px !important;
  border-radius: var(--hs-radius-sm) !important;
  color: #fff !important;
}
body#product .product-cover .product-flag.new {
  background: var(--hs-text) !important;   /* negro, como el mockup */
  color: #fff !important;
}
body#product .product-cover .product-flag.pack {
  background: var(--hs-accent-fill) !important;
}
/* El descuento se muestra junto al precio; fuera de la imagen para no duplicar */
body#product .product-cover .product-flag.discount,
body#product .product-cover .product-flag.on-sale,
body#product .product-cover .product-flag.online-only { display: none !important; }

/* ─── Eyebrow "MARCA · CATEGORÍA" (sustituye logo de fabricante en PDP) ─── */
body#product .hs-pdp-eyebrow-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px 0;
  font-family: var(--hs-font-body) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hs-accent-text);
}
body#product .hs-pdp-eyebrow-cat { color: var(--hs-text-mute); }
body#product .hs-pdp-eyebrow-sep { color: var(--hs-text-faint); }
/* Ocultar logo/texto de fabricante heredado en la PDP (el eyebrow lo reemplaza) */
body#product .product-manufacturer,
body#product .product-manufacturer-next { display: none !important; }

/* ─── Tarjetas de versión (combinaciones select/radio) — fieles al mockup ─── */
body#product .hs-pdp-versions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 0;
}
body#product .hs-pdp-version {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  margin: 0 !important;
  padding: 12px 18px;
  border: 1.5px solid var(--hs-border);
  border-radius: var(--hs-radius);
  background: var(--hs-bg);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body#product .hs-pdp-version:hover { border-color: var(--hs-text); }
/* input oculto */
body#product .hs-pdp-version .hs-pdp-version-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}
/* seleccionada: solo borde magenta (como el mockup, sin tick) */
body#product .hs-pdp-version.is-active,
body#product .hs-pdp-version:has(.hs-pdp-version-input:checked) {
  border-color: var(--hs-accent);
  box-shadow: inset 0 0 0 1px var(--hs-accent);
}
/* reset defensivo: el tema pinta borde/fondo al <span> que sigue a un input marcado */
body#product .hs-pdp-version span {
  border: 0 !important;
  background: transparent !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body#product .hs-pdp-version-name {
  font-family: var(--hs-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--hs-text) !important;
  line-height: 1.25;
}
body#product .hs-pdp-version-price {
  font-family: var(--hs-font-display) !important;
  font-size: 19px !important;
  letter-spacing: -0.02em;
  color: var(--hs-text) !important;
  line-height: 1;
}
body#product .hs-pdp-version-save {
  font-family: var(--hs-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--hs-accent-text) !important;
}

/* ─── Responsive: en móvil la imagen arriba y las miniaturas en fila debajo ─── */
@media (max-width: 767px) {
  body#product .col-product-image .images-container,
  body#product .images-container.bottom {
    grid-template-columns: 1fr !important;
  }
  body#product .images-container > .product-cover {
    grid-column: 1;
    order: 1;
    min-height: 320px;
    padding: 20px !important;
    margin-bottom: 12px !important;
  }
  body#product .images-container > .js-qv-mask,
  body#product .images-container > .mask {
    grid-column: 1;
    order: 2;
  }
  body#product #product-images-thumbs .swiper-wrapper {
    flex-direction: row !important;
    flex-wrap: wrap;
  }
  body#product #product-images-thumbs .swiper-slide { width: auto !important; }
  body#product #product-images-thumbs .thumb,
  body#product #product-images-thumbs img.thumb {
    width: 56px !important;
    height: 56px !important;
  }
}

/* ─── Disponibilidad: pill on-brand (adiós al naranja estridente) ─── */
body#product #product-availability {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px 0 !important;
  padding: 7px 14px !important;
  border-radius: var(--hs-radius-pill) !important;
  border: 1px solid var(--hs-border) !important;
  background: var(--hs-surface-alt) !important;
  color: var(--hs-text-mute) !important;
  font-family: var(--hs-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}
/* Punto de estado (sustituye a los iconos FontAwesome nativos) */
body#product #product-availability::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}
body#product #product-availability .fa,
body#product #product-availability i { display: none !important; }
/* Estados */
body#product #product-availability.product-available {
  background: rgba(31, 138, 91, 0.10) !important;
  border-color: rgba(31, 138, 91, 0.28) !important;
  color: #1F8A5B !important;
}
body#product #product-availability.product-last-items {
  background: rgba(214, 158, 46, 0.12) !important;
  border-color: rgba(214, 158, 46, 0.30) !important;
  color: #9a6b12 !important;
}
body#product #product-availability.product-unavailable,
body#product #product-availability.product-unavailable-allow-oosp {
  background: var(--hs-surface-alt) !important;
  border-color: var(--hs-border) !important;
  color: var(--hs-text-mute) !important;
}

/* ─── Sublabel de precio "IVA incluido · Envío gratis desde 60€" ─── */
body#product .hs-pdp-tax-label {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 10px !important;
  font-family: var(--hs-font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--hs-text-mute) !important;
}
body#product .hs-pdp-tax-label .hs-pdp-tax-sep { color: var(--hs-text-faint) !important; }

/* ─── Bloque de precio: alineado como el mockup (precio antiguo menor, aire antes del %) ─── */
body#product .hs-pdp-price-line {
  display: flex !important;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
}
body#product .hs-pdp-price-line .product-discount {
  margin-left: 0 !important;
  gap: 0 !important;
}
body#product .hs-pdp-price-line .regular-price {
  font-size: 16px !important;
  line-height: 1 !important;
}
body#product .hs-pdp-price-line .discount,
body#product .hs-pdp-price-line .discount-percentage,
body#product .hs-pdp-price-line .discount-amount {
  align-self: baseline;         /* alineado con el precio ORIGINAL tachado, no con el precio grande */
  transform: translateY(-2px);  /* sube para cuadrar el centro del badge con el del precio antiguo */
  margin-left: 6px !important; /* más aire: no queda pegado al precio antiguo */
}

/* ─── Descripción larga como intro editorial de "El detalle importa" ─── */
body#product .hs-pdp-editorial-desc.rte-content { max-width: 460px; }
body#product .hs-pdp-editorial-desc p { margin: 0 0 12px 0; }
body#product .hs-pdp-editorial-desc p:last-child { margin-bottom: 0; }
body#product .hs-pdp-editorial-desc ul,
body#product .hs-pdp-editorial-desc ol { margin: 0 0 12px 0; padding-left: 18px; }
body#product .hs-pdp-editorial-desc li { margin: 0 0 6px 0; line-height: 1.5; }
body#product .hs-pdp-editorial-desc strong,
body#product .hs-pdp-editorial-desc b { color: var(--hs-text); }
/* Solo descripción (producto sin features): una columna legible */
body#product .hs-pdp-editorial--solo .hs-pdp-editorial-inner { grid-template-columns: 1fr !important; gap: 24px !important; }
body#product .hs-pdp-editorial--solo .hs-pdp-editorial-lead { position: static; }
body#product .hs-pdp-editorial--solo .hs-pdp-editorial-desc.rte-content { max-width: 720px; }

/* ════════════════════════════════════════════════════════════════════
   SESIÓN E v3 · Ronda 8 — sin resumen (prueba), foto 1:1 en card más alta
   ════════════════════════════════════════════════════════════════════ */

/* Prescindir del resumen (description_short) — prueba visual, revertible */
body#product [id^="product-description-short-"] { display: none !important; }

/* Galería con ALTURA PROPIA (Claude Design): la columna de foto NO se estira a la
   altura de la info. Card = padding + imagen 1:1 + dots. Si la info es más alta,
   hueco natural debajo (el grid ya usa align-items:start). */
body#product .hs-pdp-row,
body#product .product-info-row { align-items: start !important; }

body#product .product-cover {
  min-height: 0 !important;
  display: block !important;
  padding: 24px !important;
  position: relative;
}
body#product #product-images-large,
body#product #product-images-large .swiper-wrapper { height: auto !important; }
/* Foto principal 1:1, object-fit: cover (recorte cuadrado, consistente con el catálogo) */
body#product #product-images-large .swiper-slide,
body#product .product-lmage-large {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  display: block !important;
  overflow: visible;   /* que no recorte la sombra del producto */
}
body#product #product-images-large img,
body#product .product-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* Sombra elíptica de contacto bajo la base del producto (apoyado en la superficie) */
body#product #product-images-large { position: relative; }
body#product #product-images-large::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  width: 56%;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(10, 10, 10, 0.22) 0%, rgba(10, 10, 10, 0.10) 45%, rgba(10, 10, 10, 0) 72%);
  filter: blur(4px);
  z-index: 0;               /* detrás del producto (la slide va por encima) */
  pointer-events: none;
}
body#product #product-images-large .swiper-wrapper { position: relative; z-index: 1; }
/* Miniaturas del raíl: cuadradas, object-fit: cover centrado */
body#product #product-images-thumbs .thumb,
body#product #product-images-thumbs img.thumb {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

/* Dots indicadores, anclados bajo la imagen real */
body#product .hs-pdp-dots {
  display: flex;
  justify-content: flex-end;   /* inferior derecha, como el mockup */
  gap: 6px;
  margin-top: 14px;
}
body#product .hs-pdp-dot {
  width: 5px;                   /* más pequeños/sutiles */
  height: 5px;
  border-radius: 999px;
  background: var(--hs-border);
  cursor: pointer;
  transition: background .15s ease;
}
body#product .hs-pdp-dot.is-active { background: var(--hs-accent-fill); }  /* rosa corporativo */

/* Juntar precio con Modelo (este producto no tiene opción de color) */
body#product .product_header_container { margin-bottom: 8px !important; }
body#product .product-prices { margin-bottom: 0 !important; }
body#product .product-variants,
body#product .product-variants-item { margin-top: 6px !important; }

/* Ocultar las etiquetas/tags del producto (módulo iqitproducttags) en la ficha */
body#product .iqitproducttags { display: none !important; }
/* "...también compraron" (crossselling) vuelve a la ficha (2026-07-29, decisión
   de Manuel). "Productos más vistos" sigue oculto. */
body#product .viewed-products { display: none !important; }

/* El bloque recuperado se alinea con las demás secciones de la ficha: mismo
   filete superior, mismo ritmo vertical y rejilla en vez del carrusel de
   Warehouse (la plantilla está sobreescrita en el tema). */
body#product .hs-pdp-crossselling {
  /* Va fuera de #main-product-wrapper (se pinta en el hook del pie), así que
     necesita su propio contenedor de 1280 para alinearse con el resto. */
  max-width: var(--hs-max);
  margin: 80px auto 0 auto;
  padding: 64px var(--hs-gutter) 0 var(--hs-gutter);
  border-top: 1px solid var(--hs-border-soft);
}
body#product .hs-pdp-crossselling .hs-pdp-copurchase-title {
  font-size: 48px;
  margin: 14px 0 0 0;
  padding: 0;
  border: 0;                     /* .section-title de Warehouse trae un filete */
  text-align: left !important;   /* y centra el texto */
}
body#product .hs-pdp-crossselling .hs-pdp-copurchase-title:after,
body#product .hs-pdp-crossselling .hs-pdp-copurchase-title:before { display: none; }
body#product .hs-pdp-crossselling .hs-pdp-copurchase-head { margin-bottom: 40px; }
body#product .hs-pdp-crossselling-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
/* Las tarjetas ya son las del tema; aquí sólo se anula lo que traía del carrusel. */
body#product .hs-pdp-crossselling-grid .js-product-miniature-wrapper {
  width: auto;
  max-width: none;
  padding: 0;
  float: none;
}
/* El recorte a 2 líneas del nombre sólo estaba definido para categoría y marca:
   sin él, la tercera línea asomaba por debajo y la tapaba el precio. */
body#product .hs-pdp-crossselling .hs-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: none;
}
body#product .hs-pdp-crossselling .swiper-button-prev,
body#product .hs-pdp-crossselling .swiper-button-next,
body#product .hs-pdp-crossselling .swiper-pagination { display: none !important; }

@media (max-width: 767px) {
  body#product .hs-pdp-crossselling { margin-top: 48px; padding-top: 40px; }
  body#product .hs-pdp-crossselling .hs-pdp-copurchase-title { font-size: 36px; }
  body#product .hs-pdp-crossselling-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

  /* Mismas cards compactas que el listado a 2 columnas (bloque K1): sin esto,
     el nombre a 18px desborda su caja y lo tapa el precio. */
  body#product .hs-pdp-crossselling .product-miniature .hs-card-body {
    padding: 10px 12px 14px !important;
    min-height: 0;
  }
  body#product .hs-pdp-crossselling .product-miniature .hs-card-brand { font-size: 11px; }
  body#product .hs-pdp-crossselling .product-miniature .hs-card-title {
    font-size: 13px !important;
    line-height: 1.35 !important;
    max-height: 36px;
  }
  body#product .hs-pdp-crossselling .product-miniature .hs-card-price { padding-top: 10px; }
  body#product .hs-pdp-crossselling .product-miniature .hs-card-price .product-price { font-size: 17px !important; }
  body#product .hs-pdp-crossselling .product-miniature .hs-card-badge .hs-badge {
    padding: 5px 8px;
    font-size: 11px;
  }
  body#product .hs-pdp-crossselling .product-miniature .hs-card-media img { padding: 8px; }
  /* En táctil el botón flotante tapaba la foto y el pie de la card. */
  body#product .hs-pdp-crossselling .product-miniature .hs-quickadd-form,
  body#product .hs-pdp-crossselling .product-miniature .hs-rail-card-add-opts,
  body#product .hs-pdp-crossselling .product-miniature .hs-card-add { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   SESIÓN I — Repaso de Manuel (2026-07-22)
   (1) custom_s_1.css (iqitthemeeditor, CSS generado que se regenera al
   guardar el BO) trae `a:link:not(.nav-link):not(.btn) { color:#555 }`
   con especificidad (0,3,1): pisa el color de cualquier <a>-pastilla
   nuestra declarado con una clase (0,1,0). Se re-afirman los colores
   con !important — mismo patrón que ya usaba .hs-btn-primary.
   ════════════════════════════════════════════════════════════════════ */

/* Panel de cuenta B2B (Corte 3) */
a.hs-b2bp-btn--accent, a.hs-b2bp-btn--accent:hover,
a.hs-b2bp-btn--dark, a.hs-b2bp-btn--dark:hover,
a.hs-b2bp-btn--ghostlight, a.hs-b2bp-btn--ghostlight:hover { color: #fff !important; }
a.hs-b2bp-btn--light, a.hs-b2bp-btn--light:hover { color: #0a0a0a !important; }
a.hs-b2bp-btn--ghost { color: var(--hs-text) !important; }
a.hs-b2bp-btn--ghost:hover { color: var(--hs-bg) !important; }
a.hs-b2bp-seclink { color: var(--hs-text) !important; }
a.hs-b2bp-seclink:hover { color: var(--hs-accent-text) !important; }
.hs-b2bp-ref a { color: var(--hs-text) !important; }
.hs-b2bp-ref a:hover { color: var(--hs-accent-text) !important; }
a.hs-b2bp-ico { color: var(--hs-text-mute) !important; }
a.hs-b2bp-ico:hover { color: var(--hs-accent-text) !important; }
a.hs-b2bp-quote-del { color: var(--hs-text-faint) !important; }
a.hs-b2bp-quote-del:hover { color: var(--hs-accent-text) !important; }

/* Sistema .hs-btn genérico (hero, landing mayorista, vacíos) */
a.hs-btn, a.hs-btn:hover { color: var(--hs-accent-ink) !important; }
/* COLORIZE: la regla anterior (0,1,1) pisaba a .hs-btn-ghost/.hs-btn-light (0,1,0) y dejaba
   "Seguir comprando" (drawer vacío) en blanco sobre blanco. Variantes con texto oscuro: */
a.hs-btn.hs-btn-ghost { color: var(--hs-btn-ghost-ink, var(--hs-text)) !important; border-color: var(--hs-btn-ghost-ink, var(--hs-text)); }
a.hs-btn.hs-btn-ghost:hover { background: var(--hs-btn-ghost-ink, var(--hs-text)); color: var(--hs-btn-ghost-hover-ink, var(--hs-bg)) !important; }
a.hs-btn.hs-btn-light, a.hs-btn.hs-btn-light:hover { color: var(--hs-text) !important; }
/* Bloques oscuros: el fantasma se invierte (2026-09-16, "CONÓCENOS" del manifiesto salía en negro) */
.hs-home-manifesto, .hs-newsletter, .hs-announce, .hs-contact-b2b, .hs-auth-aside, .theme-dark, .hs-dash-lastorder {
  --hs-btn-ghost-ink: #ffffff;
  --hs-btn-ghost-hover-ink: #0a0a0a;
}
a.hs-btn.outline, a.hs-btn.ghost { color: var(--hs-text) !important; }
a.hs-btn.outline:hover { color: var(--hs-bg) !important; }
a.hs-btn.ghost:hover { color: var(--hs-accent-text) !important; }
a.hs-btn.dark, a.hs-btn.dark:hover { color: var(--hs-bg) !important; }
/* Variantes BEM (área de cliente / portal B2B): `a.hs-btn` (0,1,1) ganaba a
   `.hs-btn--ghost` (0,1,0) y pintaba de blanco el texto de VER DETALLE. */
a.hs-btn.hs-btn--ghost { color: var(--hs-text) !important; }
a.hs-btn.hs-btn--ghost:hover { color: #fff !important; }
a.hs-btn.hs-btn--dark, a.hs-btn.hs-btn--dark:hover { color: #fff !important; }
a.hs-btn.hs-btn--primary, a.hs-btn.hs-btn--primary:hover { color: var(--hs-accent-ink) !important; }
a.hs-btn.hs-btn--danger-ghost { color: var(--hs-danger) !important; }
a.hs-btn.hs-btn--danger-ghost:hover { color: #fff !important; }
a.hs-btn-light-ghost { color: #f6f2ea !important; }
a.hs-btn-light-ghost:hover { color: #fff !important; }

/* Barra de modo mayorista + captación */
a.hs-mayo-wa { color: var(--hs-accent-text) !important; }
a.hs-mayo-wa:hover { color: #fff !important; }
a.hs-mayo-cap-cta { color: var(--hs-text) !important; }
a.hs-mayo-cap-cta:hover { color: var(--hs-accent-text) !important; }
a.hs-mayo-cap-compact { color: var(--hs-text) !important; }

/* CTAs B2B del resumen del carrito (Corte 4) */
a.hs-b2b-cart-btn { color: var(--hs-text) !important; }
a.hs-b2b-cart-btn:hover { color: var(--hs-bg) !important; }

/* ────────────────────────────────────────────────────────────────────
   (2) Resumen del carrito "bien cuadrado" (feedback Manuel):
   - Warehouse mete un clearfix `.cart-summary-line::after` que dentro
     de nuestro flex space-between cuenta como TERCER item → el importe
     quedaba centrado en vez de pegado a la derecha (cada cifra acababa
     donde le daba).
   - `.cart-grid-right hr { margin:0 }` (Warehouse) pisaba el margen de
     .hs-cart-totals-hr → el TOTAL quedaba pegado a la barra.
   ──────────────────────────────────────────────────────────────────── */
.hs-cart-totals-line::before, .hs-cart-totals-line::after,
.hs-cart-totals-grand-line::before, .hs-cart-totals-grand-line::after { content: none; }
.cart-grid-right .hs-cart-totals-hr { margin: 12px 0; }
.hs-cart-totals-grand-line { padding-top: 10px; }

/* Más víctimas del gris de custom_s_1.css detectadas en el barrido:
   raíles de la home, logos de texto móviles, menú fullscreen móvil y
   orden móvil del listado. */
a.hs-rail-link { color: var(--hs-text) !important; }
a.hs-rail-link:hover { color: var(--hs-accent-text) !important; }
a.hs-m-logo, a.hs-mmenu-logo { color: var(--hs-text) !important; }
a.hs-mmenu-btn, a.hs-mmenu-btn:hover { color: #fff !important; }
a.hs-mmenu-sublink { color: var(--hs-text-mute) !important; }
a.hs-mmenu-sublink:hover { color: var(--hs-text) !important; }
a.hs-mmenu-support-link { color: var(--hs-text) !important; }
a.hs-msort-item { color: var(--hs-text) !important; }
a.hs-msort-item.is-current { color: var(--hs-accent-text) !important; }
a.hs-social-btn, a.hs-social-btn:hover { color: var(--hs-text) !important; }

/* ═══════════════════════════════════════════════════════════════════
   SESIÓN J — LIVE SEARCH
   Panel desktop bajo el header (mismo lenguaje que el mega menú)
   + overlay móvil a pantalla completa. Filtrado en cliente.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Scrim (desktop): fondo oscurecido con blur ligero ── */
#hs-search-scrim {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.35);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 2000;
}
body.hs-search-open { overflow: hidden; }
/* El header (y el panel, que vive dentro) quedan por encima del scrim.
   OJO: header#header tiene position:relative + z-index:100 → crea stacking
   context que capa a todos sus hijos; hay que subir el propio #header. */
body.hs-search-open header#header { z-index: 2001; }
body.hs-search-open .sticky-desktop-wrapper { z-index: 2001; }
body.hs-search-open #desktop-header.hs-header { z-index: 2001; }
body.hs-search-open .hs-announce { z-index: 2002; }

/* ── Panel desktop: anclado al hs-header-inner como el mega menú ── */
#hs-search-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: -1px; /* tapa el border-bottom del header, igual que el mega menú */
  background: #ffffff;
  border: 1px solid var(--hs-border-soft);
  border-radius: var(--hs-radius);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.25);
  color: var(--hs-text);
  z-index: 110;
}
@media (max-width: 991px) {
  #hs-search-panel, #hs-search-scrim { display: none !important; }
}

/* Cabecera del panel: input display + lupa + limpiar */
.hs-sp-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 26px 40px 22px;
  border-bottom: 1px solid var(--hs-border-soft);
}
.hs-sp-head-ic { color: var(--hs-text-mute); flex: none; }
.hs-sp-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--hs-font-display);
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--hs-text);
  padding: 0;
}
.hs-sp-input::placeholder { color: var(--hs-text); opacity: 0.88; }
.hs-sp-input:focus { outline: none; box-shadow: none; }
.hs-sp-clear {
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--hs-radius-pill);
  background: transparent;
  color: var(--hs-text-mute);
  cursor: pointer;
}
.hs-sp-clear:hover { background: var(--hs-surface-soft); color: var(--hs-text); }

/* Cuerpo: 2 columnas (resultados 2fr · categorías/tendencias 1fr) */
.hs-sp-body {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  padding: 28px 40px 10px;
  align-items: start;
}
.hs-sp-label {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--hs-text-mute);
  margin-bottom: 14px;
}
.hs-sp-block + .hs-sp-block { margin-top: 28px; }

/* Más buscados: grid de 4 */
.hs-sp-grid {
  display: grid;
  /* minmax(0,1fr): con 1fr a secas los nombres nowrap expanden la columna */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
a.hs-sp-tile { display: block; text-decoration: none; color: var(--hs-text) !important; }
.hs-sp-tile-img {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--hs-bg);
  border-radius: var(--hs-radius-sm);
  overflow: hidden;
}
/* img absoluto: con aspect-ratio el height:100% en flujo normal es indefinido
   y la imagen estiraría la caja (cajas desiguales) */
.hs-sp-tile-img img {
  position: absolute;
  inset: 14px;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  object-fit: contain;
  mix-blend-mode: multiply;
}
.hs-sp-tile-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hs-sp-tile-price {
  display: block;
  font-family: var(--hs-font-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--hs-text-mute);
  margin-top: 3px;
}
a.hs-sp-tile:hover .hs-sp-tile-name { color: var(--hs-accent-text); }

/* Filas de resultado */
a.hs-sp-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hs-border-soft);
  text-decoration: none;
  color: var(--hs-text) !important;
}
a.hs-sp-row:last-child { border-bottom: 0; }
.hs-sp-thumb {
  flex: none;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hs-bg);
  border-radius: var(--hs-radius-sm);
  overflow: hidden;
}
.hs-sp-thumb img {
  max-width: 84%;
  max-height: 84%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.hs-sp-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hs-sp-row-name {
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hs-sp-row-sub { font-size: 12px; color: var(--hs-text-mute); }
.hs-sp-row-price {
  flex: none;
  font-family: var(--hs-font-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.hs-sp-row-chev { flex: none; color: var(--hs-text-mute); }
a.hs-sp-row:hover .hs-sp-row-name { color: var(--hs-accent-text); }
a.hs-sp-row:hover .hs-sp-row-chev { color: var(--hs-accent-text); }

/* Sin resultados */
.hs-sp-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 34px 0;
  color: var(--hs-text);
}
.hs-sp-empty svg { color: var(--hs-text-mute); }
.hs-sp-empty-title { font-size: 15px; font-weight: 700; }
.hs-sp-empty-sub { font-size: 13px; color: var(--hs-text-mute); }

/* Columna derecha: categorías + tendencias + tile ver-todo */
a.hs-sp-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--hs-text) !important;
}
a.hs-sp-cat:hover .hs-sp-cat-name { color: var(--hs-accent-text); }
.hs-sp-cat-count {
  font-family: var(--hs-font-body);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--hs-text-mute);
}
.hs-sp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hs-sp-chip {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-pill);
  background: #ffffff;
  font-family: var(--hs-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--hs-text);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.hs-sp-chip:hover { border-color: var(--hs-text); }
a.hs-sp-viewall {
  display: block;
  background: var(--hs-accent-fill);
  border-radius: var(--hs-radius);
  padding: 18px 20px;
  text-decoration: none;
  color: #ffffff !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.hs-sp-viewall:hover {
  transform: translateY(-1px);
  box-shadow: var(--hs-shadow-cta);
}
.hs-sp-viewall-eyebrow {
  display: block;
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  opacity: 0.8;
  margin-bottom: 6px;
}
.hs-sp-viewall-txt { font-size: 15px; font-weight: 700; }

/* Footer: hints de teclado */
.hs-sp-foot {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  padding: 12px 40px 20px;
  font-family: var(--hs-font-body);
  font-size: 12px;
  color: var(--hs-text-mute);
}
.hs-sp-hint { display: inline-flex; align-items: center; gap: 6px; }
.hs-sp-hint kbd {
  font-family: var(--hs-font-mono);
  font-size: 11px;
  color: var(--hs-text-mute);
  background: var(--hs-surface-soft);
  border: 1px solid var(--hs-border-soft);
  border-radius: 4px;
  padding: 2px 6px;
}

/* ── Overlay móvil a pantalla completa ── */
.hs-msearch {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  background: var(--hs-bg);
  z-index: 3200;
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.28s ease, visibility 0.28s;
}
.hs-msearch.is-open { transform: translateY(0); visibility: visible; }
@media (min-width: 992px) { .hs-msearch { display: none !important; } }
body.hs-msearch-open { overflow: hidden; }

.hs-msearch-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 12px;
  flex: none;
}
.hs-msearch-back {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--hs-text);
  cursor: pointer;
  padding: 0;
}
.hs-msearch-pill {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 14px;
  background: #ffffff;
  border: 1px solid var(--hs-border-soft);
  border-radius: var(--hs-radius-pill);
}
.hs-msearch-pill-ic { flex: none; color: var(--hs-text-mute); }
.hs-msearch-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--hs-font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--hs-text);
  padding: 0;
}
.hs-msearch-input::placeholder { color: var(--hs-text-mute); }
.hs-msearch-clear {
  flex: none;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--hs-radius-pill);
  background: var(--hs-surface-soft);
  color: var(--hs-text-mute);
  cursor: pointer;
  padding: 0;
}

.hs-msearch-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 16px 96px;
}
.hs-msearch-scroll .hs-sp-label { margin-top: 20px; }
.hs-msearch-chips { margin-bottom: 4px; }

/* Categorías móvil: nombre + contador + chevron con separador */
a.hs-msearch-cat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hs-border-soft);
  text-decoration: none;
  color: var(--hs-text) !important;
}
.hs-msearch-cat-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; }
.hs-msearch-cat-count {
  flex: none;
  font-family: var(--hs-font-body);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--hs-text-mute);
}
a.hs-msearch-cat .hs-sp-row-chev { color: var(--hs-text-mute); }

/* Resultados móvil */
.hs-msearch-list a.hs-sp-row { padding: 12px 0; }
.hs-msearch-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 64px 24px;
}
.hs-msearch-empty svg { color: var(--hs-text-mute); }

/* Botón fijo inferior: ver los N resultados */
a.hs-msearch-viewall {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: block;
  background: var(--hs-accent-fill);
  border-radius: var(--hs-radius-pill);
  padding: 16px;
  text-align: center;
  font-family: var(--hs-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff !important;
  box-shadow: 0 10px 30px -8px rgba(10, 10, 10, 0.35);
}

/* ═══════════════════════════════════════════════════════════════════
   SESIÓN I — Header B2B (variante mayorista del header, mockup)
   Franja de estado split · nav propio · buscador inline · carrito texto
   ═══════════════════════════════════════════════════════════════════ */

/* ── Franja de estado: modo+sesión izq · datos operativos dcha ── */
.hs-mayo-bar-inner {
  justify-content: space-between;
  flex-wrap: nowrap;
}
.hs-mayo-bar-left,
.hs-mayo-bar-right {
  display: inline-flex;
  align-items: center;
  gap: 5px 10px;
  min-width: 0;
}
/* El grupo derecho son datos fijos (nunca encoge); el izquierdo lleva el nombre
   del club, que es dato variable → es el que cede y trunca con puntos suspensivos.
   Sin esto, un nombre largo hace que los dos grupos se solapen (flex nowrap). */
.hs-mayo-bar-right { flex: 0 0 auto; }
.hs-mayo-bar-left { flex: 0 1 auto; overflow: hidden; }
.hs-mayo-bar-left .hs-mayo-bar-item:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  line-height: 1.5;
}
.hs-mayo-bar-left .hs-mayo-strong { font-weight: 700; }
@media (max-width: 767px) {
  /* En móvil solo queda el grupo izq (modo + club) → centrado como antes */
  .hs-mayo-bar-inner { justify-content: center; }
}

/* ── Nav principal B2B (sustituye al mega menú retail) ── */
.hs-mainmenu--b2b { margin-left: 8px; }
.hs-b2b-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
}
.hs-b2b-nav-item { list-style: none; margin: 0; padding: 0; }
a.hs-b2b-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 10px 8px;
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none !important;
  /* custom_s_1.css (generado) pinta a:link a #555 con (0,3,1) → !important */
  color: var(--hs-text) !important;
  transition: color var(--hs-transition);
}
a.hs-b2b-nav-link:hover,
a.hs-b2b-nav-link.is-active {
  color: var(--hs-accent-text) !important;
}

/* Dropdown "Por categoría" */
.hs-b2b-nav-item--drop { position: relative; }
.hs-b2b-nav-drop {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 216px;
  padding: 8px;
  background: var(--hs-surface);
  border: 1px solid var(--hs-border);
  border-radius: 12px;
  box-shadow: var(--hs-shadow-card-hover);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--hs-transition-md), transform var(--hs-transition-md), visibility var(--hs-transition-md);
  z-index: 320;
}
.hs-b2b-nav-item--drop:hover .hs-b2b-nav-drop,
.hs-b2b-nav-item--drop:focus-within .hs-b2b-nav-drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
a.hs-b2b-nav-drop-link {
  display: block;
  padding: 9px 12px;
  font-family: var(--hs-font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  border-radius: 8px;
  text-decoration: none !important;
  color: var(--hs-text) !important;
  transition: color var(--hs-transition), background-color var(--hs-transition);
}
a.hs-b2b-nav-drop-link:hover {
  color: var(--hs-accent-text) !important;
  background: var(--hs-surface-soft);
}

/* "Mi cuenta" es el último item del nav: el panel se ancla a la derecha */
.hs-b2b-nav-drop--end { left: auto; right: 0; }
a.hs-b2b-nav-drop-link--out {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--hs-border);
  border-radius: 0 0 8px 8px;
}

/* ── Buscador inline (pill tipo input, "Buscar referencia o SKU...") ── */
.hs-header-action a.hs-b2b-search {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px;
  width: 210px;
  height: 40px;
  padding: 0 15px !important;
  background: var(--hs-surface) !important;
  border: 1px solid var(--hs-border) !important;
  border-radius: var(--hs-radius-pill);
  cursor: text;
  text-decoration: none !important;
  transition: border-color var(--hs-transition);
}
.hs-header-action a.hs-b2b-search:hover { border-color: var(--hs-text-faint) !important; }
.hs-b2b-search-ic { flex: none; color: var(--hs-text-mute); }
.hs-b2b-search-ph {
  font-family: var(--hs-font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--hs-text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ── Carrito: texto "{N} items · {importe}" en vez de icono+badge ── */
/* (0,3,0) para ganar al width:42px de .hs-header-action .header-btn */
.hs-header-action .header-btn.hs-b2b-cart {
  width: auto;
  gap: 8px;
  padding: 0 6px !important;
}
.hs-b2b-cart-ic { flex: none; }
.hs-b2b-cart-txt {
  font-family: var(--hs-font-body);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--hs-text);
  line-height: 1;
}

/* ── Encaje a 1280 (logo+chip+6 tabs+pill+carrito en una línea) ── */
.hs-header--mayo .hs-header-inner { gap: 22px; }
.hs-header--mayo .hs-header-actions { gap: 12px; }
/* El inner de la franja está capado a --hs-max (1280) → el ancho útil NO crece
   con el viewport: con "Salir" el contenido pide ~65px más de los que hay a
   CUALQUIER resolución. Se recupera con tracking algo más corto solo en esta
   barra (11px uppercase sigue legible) y, por debajo de 1300, ocultando los dos
   datos promocionales (quedan modo+club y cuenta+WhatsApp+salir). */
.hs-mayo-bar { letter-spacing: 0.13em; }
@media (max-width: 1299px) {
  .hs-mayo-hide-lg { display: none !important; }
}
/* 992–1180: el pill inline no cabe → degrada a icono (como retail) y nav compacto */
@media (max-width: 1180px) {
  .hs-header--mayo .hs-header-inner { gap: 14px; }
  .hs-header--mayo .hs-header-actions { gap: 6px; }
  .hs-header-action a.hs-b2b-search {
    width: 42px;
    padding: 0 !important;
    justify-content: center !important;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer;
  }
  .hs-header-action a.hs-b2b-search .hs-b2b-search-ph { display: none; }
  .hs-b2b-search-ic { color: var(--hs-text); width: 20px; height: 20px; }
  a.hs-b2b-nav-link { padding: 10px 5px; letter-spacing: 0.08em; }
  .hs-b2b-cart-txt { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════
   SESIÓN I — Cerrar sesión accesible (feedback Manuel 2026-07-27)
   El logout quedaba a 3 clics (Mi cuenta → Ver historial → sidebar):
   el portal B2B no pinta el sidebar de cuenta y el header retail no
   tiene dropdown. Se expone en la franja de modo y en el menú móvil.
   (En el panel B2B se probó y Manuel lo descartó: redundante con la
   franja, que está siempre visible.)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Franja de modo: "Salir" ── */
a.hs-mayo-out {
  color: rgba(246, 242, 234, 0.6) !important;
  text-decoration: none !important;
  gap: 6px;
  transition: color var(--hs-transition);
}
a.hs-mayo-out:hover { color: #fff !important; }
a.hs-mayo-out svg { flex: none; }

/* ── Menú móvil: cerrar sesión bajo "Mis pedidos", en tono secundario ── */
a.hs-mmenu-logout { color: var(--hs-text-faint) !important; }
a.hs-mmenu-logout:hover { color: var(--hs-accent-text) !important; }

/* ════════════════════════════════════════════════════════════════════
   SESIÓN I · ÍNDICE DE MARCAS  (/marcas — catalog/brands.tpl)

   Página única para retail y mayorista. Los bloques con cifras B2B
   (distribución oficial, margen, pedido mínimo, pedido especial) solo los
   pinta la plantilla con $hs_mayorista; aquí no hay reglas de modo.

   OJO con los enlaces: iqitthemeeditor/custom_s_1.css pinta
   `a:link:not(.nav-link):not(.btn)` en #555 con especificidad (0,3,1), así que
   toda <a> de esta página necesita su color con !important.
   ════════════════════════════════════════════════════════════════════ */

.hs-brands {
  /* Plancha del logo. Medido sobre el catálogo real: 37 de 51 logos son PNG
     transparentes (con extensión .jpg), 12 traen fondo BLANCO opaco y 2 su
     propio color de marca. Blanca, para que esos 12 no se vean como recuadros.
     Se queda clara también en tema oscuro por lo mismo — es la única excepción
     al "todo hereda del tema"; el resto de la tarjeta sí hereda. */
  --hs-logo-plate: #ffffff;
  /* A cuánto se pega la toolbar. En escritorio, 0: el header recibe la clase
     .stuck-header pero highsupply.css le deja position:relative, así que se va
     con el scroll y no hay nada fijo arriba. En móvil sí hay barra fija
     (#mobile-header-sticky, 60px) y la toolbar se cuelga justo debajo. */
  --hs-brands-toolbar-top: 0px;
  padding-bottom: 24px;
}

/* ── Hero ── */
.hs-brands-hero {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: end;
  padding: 40px 0 44px;
}
.hs-brands-title {
  font-size: 84px;
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
  color: var(--hs-text);
}
.hs-brands-dot { color: var(--hs-accent-text); }
.hs-brands-intro {
  font-size: 16px;
  line-height: 1.5;
  color: var(--hs-text-mute);
  max-width: 460px;
  margin: 0;
}
.hs-brands-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--hs-border-soft);
  border-radius: var(--hs-radius);
}
.hs-brands-stat {
  padding: 18px 20px;
  border-left: 1px solid var(--hs-border-soft);
}
.hs-brands-stat:first-child { border-left: 0; }
.hs-brands-stat-num {
  display: block;
  font-size: 28px;
  color: var(--hs-text);
  margin-bottom: 6px;
}
.hs-brands-stat-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
  line-height: 1.3;
}

/* ── Cabecera de sección compartida (oficial + A-Z) ── */
.hs-brands-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 22px;
}
.hs-brands-h2 {
  font-size: 34px;
  margin: 8px 0 0;
  color: var(--hs-text);
}
.hs-brands-section-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--hs-text-mute);
  max-width: 340px;
  text-align: right;
  margin: 0;
}

/* ── Distribución oficial ── */
.hs-brands-official { padding: 8px 0 44px; }
.hs-brands-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.hs-brands-tile {
  display: flex;
  flex-direction: column;
  min-height: 216px;
  padding: 24px;
  border-radius: var(--hs-radius-lg);
  background: var(--hs-text);
  color: var(--hs-bg) !important;
  text-decoration: none;
  transition: transform var(--hs-transition-md);
}
.hs-brands-tile:hover {
  transform: translateY(-2px);
  color: var(--hs-bg) !important;
  text-decoration: none;
}
.hs-brands-tile-flag {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hs-accent-text);
  margin-bottom: 18px;
}
.hs-brands-tile-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hs-accent-fill);
  flex: none;
}
.hs-brands-tile-name {
  display: block;
  font-size: 30px;
  color: var(--hs-bg);
  margin-bottom: 8px;
}
/* opacity y no rgba(255,255,255,…): así vale igual con el tile invertido en oscuro */
.hs-brands-tile-meta {
  display: block;
  font-size: 12px;
  color: var(--hs-bg);
  opacity: 0.5;
}
.hs-brands-tile-foot {
  display: flex;
  /* flex-start y no flex-end: solo algunas marcas llevan la línea de rango bajo
     el margen, y alineando por abajo las que no la tienen caían 20px. */
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 20px;
}
.hs-brands-tile-fig { display: block; }
.hs-brands-tile-fig--end { text-align: right; }
.hs-brands-tile-fig-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hs-bg);
  opacity: 0.45;
  margin-bottom: 5px;
}
.hs-brands-tile-margin { font-size: 24px; color: var(--hs-accent-text); }
.hs-brands-tile-min { font-size: 15px; color: var(--hs-bg); }
/* Letra pequeña del margen: rango real o sobre cuántas refs se ha calculado.
   min-height reserva la línea aunque la nota venga vacía, para que los cuatro
   tiles alineen sus cifras. */
.hs-brands-tile-fig-note {
  display: block;
  min-height: 1.2em;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.2;
  color: var(--hs-bg);
  opacity: 0.45;
}

/* ── Toolbar ── */
.hs-brands-toolbar {
  position: sticky;
  top: var(--hs-brands-toolbar-top);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  background: var(--hs-bg);
  border-bottom: 1px solid var(--hs-border-soft);
}
.hs-brands-search {
  position: relative;
  width: 250px;
  flex: none;
}
.hs-brands-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hs-text-faint);
  pointer-events: none;
}
.hs-brands-search-input {
  width: 100%;
  padding: 11px 16px 11px 36px;
  border: 1px solid transparent;
  border-radius: var(--hs-radius-pill);
  background: var(--hs-surface-soft);
  font-family: var(--hs-font-body);
  font-size: 13px;
  color: var(--hs-text);
  -webkit-appearance: none;
  appearance: none;
}
.hs-brands-search-input::placeholder { color: var(--hs-text-faint); }
.hs-brands-search-input:focus {
  outline: none;
  border-color: var(--hs-text);
}
.hs-brands-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.hs-brands-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* En mayúsculas ocupan bastante más: con 300px de buscador los 7 chips se iban
   a una segunda línea, así que se aprieta el tracking y el padding. */
.hs-brands-chip {
  padding: 8px 12px;
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-pill);
  background: transparent;
  font-family: var(--hs-font-body);
  font-size: 11px;
  /* 800: a 10px con tracking, el 700 de Inter se lee fino. Está cargado. */
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--hs-transition), color var(--hs-transition), border-color var(--hs-transition);
}
.hs-brands-chip:hover { border-color: var(--hs-text); color: var(--hs-text); }
.hs-brands-chip.is-active {
  background: var(--hs-text);
  border-color: var(--hs-text);
  color: var(--hs-bg);
}

.hs-brands-stockbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 0 auto;
  font-size: 12px;
  color: var(--hs-text-mute);
  cursor: pointer;
  white-space: nowrap;
}
.hs-brands-stockbox input {
  width: 15px;
  height: 15px;
  accent-color: var(--hs-accent);
  cursor: pointer;
}

/* ── Cabecera del grid ── */
/* center y no baseline: la pastilla de Ordenar mide 44px y el texto 18, así que
   alineando por baseline el recuento quedaba colgado con 35px de aire debajo. */
.hs-brands-gridhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0 12px;
}
/* El tema pone otra familia en varios `p`: la fijamos para que la línea de
   recuento no salga con la tipografía equivocada. */
.hs-brands-count {
  font-family: var(--hs-font-body);
  font-size: 13px;
  line-height: 1.4;
  color: var(--hs-text-mute);
  margin: 0;
}
.hs-brands-count-strong {
  font-weight: 700;
  color: var(--hs-text);
}
.hs-brands-count-sep { margin: 0 6px; color: var(--hs-text-faint); }

/* Ordenar: la etiqueta va suelta y apagada; la pastilla blanca envuelve SOLO
   las opciones, como en el mockup. */
.hs-brands-sort {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
}
.hs-brands-sort-label {
  white-space: nowrap;
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
}
.hs-brands-sort select {
  -webkit-appearance: none;
  appearance: none;
  padding: 11px 34px 11px 18px;
  border: 1px solid var(--hs-border-soft);
  border-radius: var(--hs-radius-pill);
  background-color: var(--hs-surface);
  /* Chevron propio: el nativo es una doble flecha y no pega con la pastilla. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7' fill='none'%3E%3Cpath d='M1 1.5L5 5.5L9 1.5' stroke='%236b6660' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  font-family: var(--hs-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--hs-text);
  cursor: pointer;
  transition: border-color var(--hs-transition);
}
.hs-brands-sort select:hover { border-color: var(--hs-border); }
.hs-brands-sort select:focus-visible { outline: 2px solid var(--hs-accent); outline-offset: 2px; }

/* ── Grid de marcas ── */
.hs-brands-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.hs-brands-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--hs-border-soft);
  color: var(--hs-text) !important;
  text-decoration: none;
}
.hs-brands-card:hover { text-decoration: none; color: var(--hs-text) !important; }

.hs-brands-card-logo {
  position: relative;
  display: block;
  padding: 22px;
  background: var(--hs-logo-plate);
  border-bottom: 1px solid var(--hs-border-soft);
}
/* aspect-ratio en el hijo y no en la tarjeta: Safari se atraganta cuando cae
   directamente sobre un grid item (ver bug del bento de la home). */
.hs-brands-card-logo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: contain;
  object-position: center;
}
/* Marca sin logo cargado: su nombre ocupa exactamente la misma caja. */
.hs-brands-card-logotext {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 7;
  font-size: 19px;
  line-height: 1.05;
  text-align: center;
  color: #0a0a0a;
  word-break: break-word;
}
.hs-brands-card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 7px;
  border-radius: 4px;
  /* La plancha ya es blanca: sin el filete el badge se perdería sobre ella. */
  background: #ffffff;
  border: 1px solid rgba(236, 26, 143, 0.25);
  font-family: var(--hs-font-display);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hs-accent-text);
}

.hs-brands-card-body {
  display: block;
  padding: 16px 18px 18px;
}
.hs-brands-card-name {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--hs-text);
  margin-bottom: 3px;
}
.hs-brands-card-meta {
  display: block;
  font-size: 11px;
  color: var(--hs-text-mute);
}
.hs-brands-card-figs {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--hs-border-soft);
}
.hs-brands-card-fig--end { text-align: right; }
.hs-brands-card-fig-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hs-text-faint);
  margin-bottom: 3px;
}
.hs-brands-card-margin { font-size: 17px; color: var(--hs-accent-text); }
.hs-brands-card-min { font-size: 17px; color: var(--hs-text); }
.hs-brands-card-fig-note {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.2;
  color: var(--hs-text-faint);
}
/* Marca todavía sin margen o mínimo cargado. En tipografía de texto y apagado:
   con el display en acento parecía un dato roto en las ~50 tarjetas vacías. */
.hs-brands-card-nodata {
  display: block;
  font-size: 15px;
  line-height: 1.15;
  color: var(--hs-text-faint);
}

.hs-brands-empty {
  padding: 48px 0;
  text-align: center;
  font-size: 14px;
  color: var(--hs-text-mute);
}
.hs-brands-more {
  display: flex;
  justify-content: center;
  padding: 32px 0 0;
}

/* ── Directorio A-Z ── */
.hs-brands-az {
  margin-top: 72px;
  border-top: 1px solid var(--hs-border-soft);
  padding-top: 44px;
}
.hs-brands-az-head { margin-bottom: 26px; }
.hs-brands-az-head .hs-brands-h2 { margin-top: 6px; }

.hs-brands-letters {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 10px 0;
  border-top: 1px solid var(--hs-border-soft);
  border-bottom: 1px solid var(--hs-border-soft);
  margin-bottom: 8px;
}
.hs-brands-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  border-radius: var(--hs-radius-sm);
  font-family: var(--hs-font-display);
  font-size: 13px;
  color: var(--hs-text) !important;
  text-decoration: none;
  transition: background var(--hs-transition), color var(--hs-transition);
}
a.hs-brands-letter:hover {
  background: var(--hs-text);
  color: var(--hs-bg) !important;
  text-decoration: none;
}
a.hs-brands-letter.is-current { color: var(--hs-accent-text) !important; }
/* Letra sin marcas: se ve, pero ni enlaza ni invita a pulsarla. */
.hs-brands-letter.is-empty {
  color: var(--hs-text-faint) !important;
  cursor: default;
}

.hs-brands-az-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  padding: 26px 0;
  border-bottom: 1px solid var(--hs-border-soft);
  scroll-margin-top: 140px;
}
.hs-brands-az-letter {
  font-size: 40px;
  color: var(--hs-text-faint);
  line-height: 1;
}
/* columns (y no grid) para que el orden alfabético baje POR COLUMNA:
   A, B, C en la primera y D, E, F en la segunda — no A, B en la misma fila.
   De paso se adapta solo al pasar de 4 a 2 columnas en móvil. */
.hs-brands-az-list {
  columns: 4;
  column-gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hs-brands-az-item {
  break-inside: avoid;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.35;
}
.hs-brands-az-list a {
  color: var(--hs-text) !important;
  text-decoration: none;
}
.hs-brands-az-list a:hover {
  color: var(--hs-accent-text) !important;
  text-decoration: none;
}
/* Marca en catálogo pero sin referencia activa: se enseña, no se enlaza. */
.hs-brands-az-off { color: var(--hs-text-faint); }

/* ── CTA pedido especial ── */
.hs-brands-cta { padding: 72px 0 96px; }
.hs-brands-cta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 36px 40px;
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-lg);
}
.hs-brands-cta-title {
  font-size: 30px;
  margin: 8px 0 10px;
  color: var(--hs-text);
}
.hs-brands-cta-copy {
  font-size: 14px;
  line-height: 1.55;
  color: var(--hs-text-mute);
  max-width: 560px;
  margin: 0;
}
.hs-brands-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: none;
}

/* ── Modal de pedido especial ── */
body.hs-brandreq-open { overflow: hidden; }
.hs-brandreq {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.hs-brandreq[hidden] { display: none; }
.hs-brandreq-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
}
.hs-brandreq-panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
  border-radius: var(--hs-radius-lg);
  background: var(--hs-bg);
}
.hs-brandreq-x {
  position: absolute;
  top: 14px;
  right: 16px;
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: var(--hs-text-mute);
  cursor: pointer;
}
.hs-brandreq-title {
  font-size: 28px;
  margin: 8px 0 20px;
  color: var(--hs-text);
}
.hs-brandreq-field {
  display: block;
  margin-bottom: 14px;
}
.hs-brandreq-field > span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
  margin-bottom: 6px;
}
.hs-brandreq-field em {
  font-style: normal;
  color: var(--hs-text-faint);
  letter-spacing: 0.04em;
}
.hs-brandreq-field input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-sm);
  background: var(--hs-surface);
  font-family: var(--hs-font-body);
  font-size: 14px;
  color: var(--hs-text);
}
.hs-brandreq-field input:focus {
  outline: none;
  border-color: var(--hs-text);
}
.hs-brandreq-note {
  font-size: 12px;
  color: var(--hs-text-mute);
  margin: 0 0 16px;
}
.hs-brandreq-submit { width: 100%; }
.hs-brandreq-msg {
  margin: 14px 0 0;
  font-size: 13px;
  text-align: center;
  color: var(--hs-success);
}
.hs-brandreq-msg.is-error { color: var(--hs-accent-text); }

/* ════════ Índice de marcas · móvil ════════ */
@media (max-width: 991px) {
  .hs-brands { --hs-brands-toolbar-top: 60px; }

  .hs-brands-hero {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 0 20px;
  }
  .hs-brands-title { font-size: 46px; margin-bottom: 10px; }
  .hs-brands-intro { font-size: 14px; }
  .hs-brands-stat { padding: 14px; }
  .hs-brands-stat-num { font-size: 22px; }
  .hs-brands-stat-label { font-size: 11px; }

  .hs-brands-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .hs-brands-h2 { font-size: 24px; }
  .hs-brands-section-note { text-align: left; max-width: none; }

  /* Distribución oficial: carrusel horizontal, mismos datos a menor escala. */
  .hs-brands-official { padding-bottom: 32px; }
  .hs-brands-tiles {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--hs-gutter-mobile));
    padding: 0 var(--hs-gutter-mobile) 4px;
    /* Sin esto el snap pega el primer tile al borde del snapport ignorando el
       padding: el carrusel arrancaba con scrollLeft 20 y la primera marca
       aparecía cortada contra el canto de la pantalla. */
    scroll-padding-left: var(--hs-gutter-mobile);
    scroll-padding-right: var(--hs-gutter-mobile);
    scrollbar-width: none;
  }
  .hs-brands-tiles::-webkit-scrollbar { display: none; }
  .hs-brands-tile {
    flex: 0 0 220px;
    min-height: 168px;
    padding: 18px;
    scroll-snap-align: start;
  }
  .hs-brands-tile-flag { margin-bottom: 12px; font-size: 9px; }
  .hs-brands-tile-name { font-size: 22px; }
  .hs-brands-tile-foot { padding-top: 14px; }
  /* En 220px de tile cada columna del pie mide 84px: con 9px y 0.14em de
     tracking, "MARGEN MEDIO" y "MÍNIMO MARCA" partían en dos líneas. */
  .hs-brands-tile-fig-label { font-size: 9px; letter-spacing: 0.06em; }
  .hs-brands-tile-margin { font-size: 19px; }
  .hs-brands-tile-min { font-size: 13px; }

  /* Toolbar: buscador a ancho completo y chips en scroll horizontal. */
  .hs-brands-toolbar {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 0;
  }
  .hs-brands-search { width: 100%; order: 1; }
  .hs-brands-chips {
    order: 2;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 calc(-1 * var(--hs-gutter-mobile));
    padding: 0 var(--hs-gutter-mobile);
    scrollbar-width: none;
  }
  .hs-brands-chips::-webkit-scrollbar { display: none; }
  .hs-brands-stockbox { order: 3; margin-left: 0; }

  .hs-brands-gridhead {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px 0 12px;
  }

  .hs-brands-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .hs-brands-card-logo { padding: 16px; }
  .hs-brands-card-logo img,
  .hs-brands-card-logotext { aspect-ratio: 16 / 8; }
  .hs-brands-card-logotext { font-size: 15px; }
  .hs-brands-card-badge { font-size: 9px; padding: 3px 5px; }
  .hs-brands-card-body { padding: 12px 13px 14px; }
  .hs-brands-card-name { font-size: 14px; }
  .hs-brands-card-margin,
  .hs-brands-card-min { font-size: 14px; }

  .hs-brands-az { margin-top: 44px; padding-top: 32px; }
  .hs-brands-letter {
    min-width: 32px;
    height: 32px;
    border: 1px solid var(--hs-border-soft);
  }
  .hs-brands-az-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px 0;
  }
  .hs-brands-az-letter { font-size: 28px; }
  .hs-brands-az-list { columns: 2; column-gap: 16px; }

  .hs-brands-cta { padding: 40px 0 56px; }
  .hs-brands-cta-box {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    padding: 24px;
  }
  .hs-brands-cta-title { font-size: 24px; }
  .hs-brands-cta-actions .hs-btn { width: 100%; }
}

/* ==========================================================================
   SESIÓN I · Corte 5 — Reserva anticipada en el detalle del pedido
   Bloque con el derecho de cancelación por retraso (condición 5 del CMS).
   ========================================================================== */
.hs-reserva-card {
  margin: 0 0 24px;
  padding: 22px 24px;
  background: var(--hs-surface);
  border: 1px solid var(--hs-border-soft);
  border-radius: var(--hs-radius);
}

.hs-reserva-line {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--hs-text);
}

.hs-reserva-actions { margin: 16px 0 0; }

.hs-reserva-fine {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--hs-text-mute);
}

/* !important: custom_s_1.css (theme editor) pinta todo `a` en gris con (0,3,1) */
a.hs-reserva-fine-link,
.hs-reserva-fine a {
  color: var(--hs-text-mute) !important;
  text-decoration: underline;
}
.hs-reserva-fine a:hover { color: var(--hs-accent-text) !important; }

/* ════════════════════════════════════════════════════════════════════
   FAVORITOS · /favoritos (módulo highsupply_favoritos)
   El badge de estado es la pieza importante de la página: es lo único
   con color pleno de la tarjeta.
   ════════════════════════════════════════════════════════════════════ */

.hs-fav-intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 22px;
}
.hs-fav-lead {
  margin: 0;
  max-width: 520px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--hs-text-mute);
}
.hs-fav-notify {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 600;
  color: var(--hs-text);
  cursor: pointer;
  /* Objetivo táctil de 44px sin engordar la casilla */
  min-height: 44px;
}
.hs-fav-notify input {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--hs-accent);
  cursor: pointer;
}

.hs-fav-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 1023px) { .hs-fav-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .hs-fav-grid { grid-template-columns: 1fr; } }

.hs-fav-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--hs-bg);
  border: 1px solid var(--hs-border-soft);
  border-radius: var(--hs-radius);
  overflow: hidden;
}

.hs-fav-media {
  position: relative;
  background: var(--hs-surface-soft);
  padding: 26px;
}
.hs-fav-media-link {
  display: block;
  aspect-ratio: 1 / 1;
}
.hs-fav-media-link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Agotado: se apaga la FOTO, no el contenedor. Bajar la opacidad del padre
   se llevaría por delante el badge "Agotado", que es justo lo que hay que leer. */
.hs-fav-media.is-out .hs-fav-media-link { opacity: 0.55; }

.hs-fav-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 3px;
  white-space: nowrap;
}
.hs-fav-badge--precio  { background: var(--hs-accent-fill); color: #fff; }
.hs-fav-badge--vuelve  { background: #1F8A5B; color: #fff; }
.hs-fav-badge--pocas   { background: var(--hs-text); color: var(--hs-bg); }
.hs-fav-badge--agotado { background: var(--hs-surface-alt); color: var(--hs-text-mute); }

.hs-fav-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--hs-border);
  border-radius: 50%;
  background: var(--hs-bg);
  color: var(--hs-text-mute);
  cursor: pointer;
  transition: color var(--hs-transition), border-color var(--hs-transition);
}
.hs-fav-remove:hover { color: var(--hs-accent-text); border-color: var(--hs-accent); }
/* El botón mide 32px por diseño; el área pulsable se estira a 44 con el pseudo */
.hs-fav-remove::after {
  content: '';
  position: absolute;
  top: -6px; right: -6px; bottom: -6px; left: -6px;
}

.hs-fav-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px 16px 16px;
}
.hs-fav-brand {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
}
.hs-fav-name {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--hs-text) !important;
  text-decoration: none !important;
}
.hs-fav-name:hover { color: var(--hs-accent-text) !important; }

.hs-fav-price {
  margin: 10px 0 14px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.hs-fav-price-now {
  font-family: var(--hs-font-display);
  font-size: 20px;
  color: var(--hs-text);
}
.hs-fav-price-now.is-down { color: var(--hs-accent-text); }
.hs-fav-price-old {
  font-size: 12px;
  color: var(--hs-text-mute);
  text-decoration: line-through;
}

/* `margin-top: auto` alinea los CTA de toda la fila aunque los nombres ocupen
   distinto número de líneas. Ojo con añadir aquí un selector de hermano
   (.hs-fav-price + .hs-fav-cta): gana en especificidad y rompe la alineación. */
.hs-fav-cta {
  margin-top: auto;
  width: 100%;
  min-height: 44px;
  font-size: 11px;
}
.hs-fav-saved {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--hs-text-faint);
}

.hs-fav-foot {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--hs-border-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.hs-fav-foot-note { margin: 0; font-size: 13px; color: var(--hs-text-mute); }
.hs-fav-foot-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hs-accent-text) !important;
  text-decoration: none !important;
}
.hs-fav-foot-link:hover { color: var(--hs-accent-hover) !important; }

/* ── Estado vacío ── */
.hs-fav-empty {
  border: 1px dashed var(--hs-border);
  border-radius: var(--hs-radius-lg);
  padding: 80px 40px;
  text-align: center;
}
.hs-fav-empty-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--hs-surface-alt);
  color: var(--hs-text-mute);
  margin-bottom: 22px;
}
.hs-fav-empty-ico svg { transform: scale(1.6); }
.hs-fav-empty-title {
  margin: 0;
  font-family: var(--hs-font-display);
  font-size: 30px;
  line-height: 1.1;
  color: var(--hs-text);
}
.hs-fav-empty-sub {
  margin: 12px auto 26px;
  max-width: 400px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--hs-text-mute);
}
@media (max-width: 639px) {
  .hs-fav-empty { padding: 56px 22px; }
  .hs-fav-empty-title { font-size: 24px; }
}

/* ── Corazón de guardar (ficha / listados) ── */
.hs-fav-heart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--hs-border);
  border-radius: 50%;
  background: var(--hs-bg-alt);
  color: var(--hs-text-mute);
  cursor: pointer;
  transition: color var(--hs-transition), border-color var(--hs-transition);
}
.hs-fav-heart:hover { color: var(--hs-accent-text); border-color: var(--hs-accent); }
.hs-fav-heart.is-on { color: var(--hs-accent-text); border-color: var(--hs-accent); }
.hs-fav-heart.is-on svg { fill: currentColor; }
.hs-fav-heart[disabled] { opacity: 0.5; cursor: wait; }

/* ════════════════════════════════════════════════════════════════════
   MIS HABITUALES · /mis-habituales (portal del club)
   Un club no guarda deseos, repone existencias: lo que manda es el aviso
   de reposición y que lo que toca venga ya marcado.
   ════════════════════════════════════════════════════════════════════ */

.hs-hab { background: var(--hs-bg); }

.hs-hab-head { border-bottom: 1px solid var(--hs-border); }
.hs-hab-head-inner {
  max-width: var(--hs-max);
  margin: 0 auto;
  /* Sin migas encima, el hero arranca pegado al menú: el aire de arriba lo
     pone solo este padding (más los 15px de #wrapper). */
  padding: clamp(14px, 1.8vw, 22px) var(--hs-gutter) clamp(22px, 3vw, 32px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}
.hs-hab-head-copy { min-width: 0; }
.hs-hab-eyebrow {
  margin: 0 0 10px;
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hs-accent-text);
}
.hs-hab-title {
  margin: 0;
  font-family: var(--hs-font-display);
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--hs-text);
}
.hs-hab-lead {
  margin: 14px 0 0;
  max-width: 620px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--hs-text-mute);
}

.hs-hab-body {
  max-width: var(--hs-max);
  margin: 0 auto;
  padding: clamp(24px, 3vw, 34px) var(--hs-gutter) clamp(48px, 6vw, 80px);
}

/* CTA principal */
.hs-hab-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
  min-height: 52px;
  padding: 15px 28px;
  background: var(--hs-accent-fill);
  color: #fff !important;
  border: 0;
  border-radius: var(--hs-radius-pill);
  font-family: var(--hs-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none !important;
  cursor: pointer;
  transition: background var(--hs-transition);
}
.hs-hab-cta:hover { background: var(--hs-accent-hover); color: #fff !important; }
.hs-hab-cta[disabled] { opacity: 0.6; cursor: wait; }

.hs-hab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  min-height: 44px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--hs-radius-pill);
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--hs-transition);
}
.hs-hab-btn--accent { background: var(--hs-accent-fill); color: #fff !important; }
.hs-hab-btn--accent:hover { background: var(--hs-accent-hover); }

/* Aviso de reposición */
.hs-hab-alert {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  border: 1px solid var(--hs-accent);
  background: rgba(236, 26, 143, 0.05);
  border-radius: var(--hs-radius-lg);
  margin-bottom: 26px;
}
.hs-hab-alert-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--hs-accent-fill);
  color: #fff;
}
.hs-hab-alert-copy { flex: 1; min-width: 0; }
.hs-hab-alert-title {
  margin: 0;
  font-family: var(--hs-font-display);
  font-size: 22px;
  line-height: 1.15;
  color: var(--hs-text);
}
.hs-hab-alert-sub { margin: 4px 0 0; font-size: 13px; color: var(--hs-text-mute); }

/* Filtros */
.hs-hab-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.hs-hab-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.hs-hab-pill {
  padding: 8px 15px;
  min-height: 44px;
  border: 1px solid var(--hs-border);
  border-radius: 999px;
  background: transparent;
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--hs-transition), color var(--hs-transition), border-color var(--hs-transition);
}
.hs-hab-pill:hover { color: var(--hs-text); border-color: var(--hs-text); }
.hs-hab-pill.is-active {
  background: var(--hs-text);
  color: var(--hs-bg);
  border-color: var(--hs-text);
}
.hs-hab-csv {
  font-size: 12px;
  color: var(--hs-text-mute) !important;
  text-decoration: underline;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.hs-hab-csv:hover { color: var(--hs-accent-text) !important; }

/* Tabla */
.hs-hab-table-wrap {
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-lg);
  overflow: hidden;
}
.hs-hab-table { width: 100%; border-collapse: collapse; }
.hs-hab-table thead { background: var(--hs-surface-alt); }
.hs-hab-table th {
  padding: 13px 16px;
  text-align: left;
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
  white-space: nowrap;
}
.hs-hab-th-check { width: 46px; }
.hs-hab-th-qty { width: 150px; }
.hs-hab-th-sub { width: 120px; text-align: right; }
.hs-hab-table td {
  padding: 14px 16px;
  border-top: 1px solid var(--hs-border-soft);
  vertical-align: middle;
}
/* La fila que toca reposición se tiñe: es la razón de estar en la página */
.hs-hab-row.is-due { background: rgba(236, 26, 143, 0.03); }
.hs-hab-td-check input,
.hs-hab-table thead input {
  width: 18px;
  height: 18px;
  accent-color: var(--hs-accent);
  cursor: pointer;
}
.hs-hab-td-prod { display: flex; align-items: center; gap: 13px; }
.hs-hab-thumb {
  display: block;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  padding: 5px;
  background: var(--hs-surface-soft);
  border-radius: 6px;
}
.hs-hab-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hs-hab-thumb--sm { width: 48px; height: 48px; }
.hs-hab-prod { min-width: 0; }
.hs-hab-brand {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
}
.hs-hab-name {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--hs-text) !important;
  text-decoration: none !important;
}
.hs-hab-name:hover { color: var(--hs-accent-text) !important; }
.hs-hab-meta {
  margin: 3px 0 0;
  font-family: var(--hs-font-display);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--hs-text-faint);
}
.hs-hab-td-rhythm { white-space: nowrap; }
.hs-hab-rhythm { display: block; font-size: 13px; font-weight: 600; color: var(--hs-text); }
.hs-hab-since { display: block; margin-top: 2px; font-size: 11px; color: var(--hs-text-mute); }
.hs-hab-since.is-due { color: var(--hs-accent-text); font-weight: 700; }
.hs-hab-stock { font-size: 12px; color: var(--hs-text-mute); white-space: nowrap; }
.hs-hab-restock {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--hs-surface-alt);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
  white-space: nowrap;
}
.hs-hab-td-price { font-family: var(--hs-font-display); font-size: 15px; color: var(--hs-text); white-space: nowrap; }
.hs-hab-td-sub {
  font-family: var(--hs-font-display);
  font-size: 17px;
  color: var(--hs-text);
  text-align: right;
  white-space: nowrap;
}
/* El €/ud solo hace falta en móvil, donde se oculta la columna "Tu precio" */
.hs-hab-unit { display: none; }

.hs-hab-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-pill);
  padding: 3px;
}
.hs-hab-step {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 17px;
  line-height: 1;
  color: var(--hs-text);
  cursor: pointer;
  transition: background var(--hs-transition);
}
.hs-hab-step:hover { background: var(--hs-surface-alt); }
.hs-hab-qty {
  width: 40px;
  border: 0;
  background: transparent;
  text-align: center;
  font-family: var(--hs-font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--hs-text);
}
.hs-hab-qty:focus { outline: none; }

.hs-hab-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px 24px;
  border-top: 1px solid var(--hs-border);
  background: var(--hs-surface-alt);
}
.hs-hab-foot-count { margin: 0; font-size: 13px; color: var(--hs-text-mute); }
.hs-hab-foot-right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hs-hab-foot-total { text-align: right; }
.hs-hab-foot-label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hs-text-mute);
}
.hs-hab-foot-sum {
  margin: 2px 0 0;
  font-family: var(--hs-font-display);
  font-size: 28px;
  line-height: 1;
  color: var(--hs-text);
}
.hs-hab-empty-filter {
  margin: 0;
  padding: 34px 16px;
  text-align: center;
  font-size: 14px;
  color: var(--hs-text-mute);
  border-top: 1px solid var(--hs-border-soft);
}

/* Casi habituales */
.hs-hab-almost { margin-top: 52px; }
.hs-hab-almost-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.hs-hab-almost-title {
  margin: 0;
  font-family: var(--hs-font-display);
  font-size: 30px;
  line-height: 1.05;
  color: var(--hs-text);
}
.hs-hab-almost-note { margin: 0; font-size: 12px; color: var(--hs-text-mute); }
.hs-hab-almost-lead { margin: 8px 0 18px; font-size: 14px; color: var(--hs-text-mute); }
.hs-hab-almost-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.hs-hab-almost-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--hs-border-soft);
  border-radius: var(--hs-radius);
}
.hs-hab-almost-body { flex: 1; min-width: 0; }
.hs-hab-almost-price { margin: 4px 0 0; font-family: var(--hs-font-display); font-size: 15px; color: var(--hs-text); }
.hs-hab-pin {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  position: relative;
  border: 1px solid var(--hs-border);
  border-radius: 50%;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  color: var(--hs-text);
  cursor: pointer;
  transition: background var(--hs-transition), color var(--hs-transition), border-color var(--hs-transition);
}
.hs-hab-pin:hover { background: var(--hs-accent-fill); border-color: var(--hs-accent); color: #fff; }
/* 34px por diseño; el área pulsable llega a 44 con el pseudo */
.hs-hab-pin::after { content: ''; position: absolute; top: -5px; right: -5px; bottom: -5px; left: -5px; }

/* Sin historial suficiente */
.hs-hab-blank {
  border: 1px dashed var(--hs-border);
  border-radius: var(--hs-radius-lg);
  padding: 72px 40px;
  text-align: center;
}
.hs-hab-blank-title { margin: 0; font-family: var(--hs-font-display); font-size: 28px; color: var(--hs-text); }
.hs-hab-blank-sub {
  margin: 12px auto 26px;
  max-width: 460px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--hs-text-mute);
}

/* Barra fija: solo móvil */
.hs-hab-bbar { display: none; }

@media (max-width: 767px) {
  .hs-hab-head-inner { flex-direction: column; align-items: stretch; gap: 18px; padding-left: var(--hs-gutter-mobile); padding-right: var(--hs-gutter-mobile); }
  .hs-hab-head .hs-hab-cta { display: none; } /* vive en la barra fija */
  .hs-hab-body { padding-left: var(--hs-gutter-mobile); padding-right: var(--hs-gutter-mobile); }

  .hs-hab-alert { flex-wrap: wrap; gap: 14px; padding: 16px 18px; }
  .hs-hab-alert-title { font-size: 19px; }
  .hs-hab-alert .hs-hab-btn { width: 100%; }

  .hs-hab-filters { flex-wrap: nowrap; }
  .hs-hab-pills { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hs-hab-pill { flex-shrink: 0; }
  /* Las píldoras de categoría se caen en móvil: no caben y el club filtra por
     estado, no por familia, cuando va con el móvil en el almacén. */
  .hs-hab-pill[data-filter^="cat:"], .hs-hab-csv { display: none; }

  /* La tabla no se encoge: cada fila pasa a TARJETA. Cada celda se coloca
     por área, que es lo único que aguanta que el nombre ocupe dos líneas
     sin que el checkbox se monte encima de la miniatura. */
  .hs-hab-table-wrap { border: 0; border-radius: 0; overflow: visible; }
  .hs-hab-table, .hs-hab-table tbody { display: block; width: 100%; }
  .hs-hab-table thead { display: none; }
  .hs-hab-table td { border: 0; padding: 0; }

  .hs-hab-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "check prod  prod"
      "meta  meta  stock"
      "qty   qty   sub";
    column-gap: 10px;
    row-gap: 6px;
    align-items: center;
    border: 1px solid var(--hs-border-soft);
    border-radius: var(--hs-radius);
    padding: 14px;
    margin-bottom: 10px;
  }
  .hs-hab-row.is-due { border-color: var(--hs-accent); background: rgba(236, 26, 143, 0.04); }

  .hs-hab-td-check { grid-area: check; align-self: start; padding-top: 14px !important; }
  .hs-hab-td-prod { grid-area: prod; align-items: flex-start; }
  .hs-hab-td-rhythm { grid-area: meta; }
  .hs-hab-td-stock { grid-area: stock; justify-self: end; }
  .hs-hab-td-price { display: none; }
  .hs-hab-td-qty { grid-area: qty; justify-self: start; }
  .hs-hab-td-sub { grid-area: sub; justify-self: end; text-align: right; }

  .hs-hab-td-rhythm .hs-hab-rhythm,
  .hs-hab-td-rhythm .hs-hab-since { display: inline; font-size: 11px; }
  .hs-hab-td-rhythm .hs-hab-since::before { content: ' · '; }

  /* Separador entre la ficha del producto y la fila de compra */
  .hs-hab-td-qty, .hs-hab-td-sub {
    margin-top: 6px;
    padding-top: 12px !important;
    border-top: 1px solid var(--hs-border-soft) !important;
  }
  .hs-hab-td-qty .hs-hab-step { width: 34px; height: 34px; }
  .hs-hab-unit { display: block; font-size: 11px; color: var(--hs-text-mute); }
  .hs-hab-td-sub .js-hab-sub { display: block; font-size: 18px; line-height: 1.1; }

  .hs-hab-foot { display: none; } /* lo sustituye la barra fija */

  .hs-hab-almost { margin-top: 34px; }
  .hs-hab-almost-title { font-size: 22px; }
  .hs-hab-almost-grid { grid-template-columns: 1fr; gap: 8px; }
  .hs-hab-almost-card { padding: 12px; gap: 12px; }
  .hs-hab-almost-card .hs-hab-thumb--sm { width: 40px; height: 40px; }

  .hs-hab-bbar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1090;
    padding: 12px var(--hs-gutter-mobile);
    background: var(--hs-bg-alt);
    border-top: 1px solid var(--hs-border);
    box-shadow: 0 -8px 24px -14px rgba(0, 0, 0, 0.28);
  }
  .hs-hab-bbar-info { min-width: 0; flex-shrink: 0; }
  .hs-hab-bbar-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hs-text-mute);
  }
  .hs-hab-bbar-total {
    display: block;
    margin-top: 2px;
    font-family: var(--hs-font-display);
    font-size: 22px;
    line-height: 1;
    color: var(--hs-text);
  }
  .hs-hab-bbar .hs-hab-cta { flex: 1; min-height: 52px; padding: 14px 18px; font-size: 11px; }
  body.hs-hab-has-bbar { padding-bottom: 92px; }
}

@media (max-width: 1023px) and (min-width: 768px) {
  .hs-hab-almost-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════════════════════
   CTAs del hero de la home — texto en negro
   La regla genérica `a.hs-btn { color: var(--hs-accent-ink) !important }`
   (Sesión I, línea ~10954) tiene especificidad (0,1,1) y pisa tanto a
   `.hs-btn-primary` como a `.hs-btn-ghost` (0,1,0), dejando ambos CTAs
   del hero en blanco — EXPLORAR TIENDA quedaba casi invisible sobre el
   fondo crema. Se re-afirman en negro sólo dentro del hero (0,2,1) para
   no tocar el resto de botones del sistema.
   ════════════════════════════════════════════════════════════════════ */
.hs-home-hero-actions a.hs-btn.hs-btn-primary,
.hs-home-hero-actions a.hs-btn.hs-btn-primary:hover,
.hs-home-hero-actions a.hs-btn.hs-btn-ghost { color: var(--hs-text) !important; }
/* En hover el fantasma invierte a fondo oscuro: el texto vuelve a crema. */
.hs-home-hero-actions a.hs-btn.hs-btn-ghost:hover { color: var(--hs-bg) !important; }
/* COLORIZE: texto negro sobre magenta solo pasa AA con el magenta de marca (4,82:1), no con el fill AA (3,9) */
.hs-home-hero-actions a.hs-btn.hs-btn-primary,
.hs-home-hero-actions a.hs-btn.hs-btn-primary:hover { background: var(--hs-accent); }

/* ════════════════════════════════════════════════════════════════════
   SESIÓN K · Mobile-first (2026-07-29) — Manuel: revisión móvil global
   Bloque additivo solo-móvil. Desktop intacto.
   ════════════════════════════════════════════════════════════════════ */

/* ── K1 · Listados a 2 COLUMNAS (mockup categoría móvil) ──
   El grid del listado (línea ~1287) pasa a repeat(2,1fr) también en
   móvil. Aquí solo quedan las cards compactas para ese ancho (~170px).
   En listados sin grid propio (search, ofertas…) el col-6 de Bootstrap
   ya da 2 columnas por sí solo. */
@media (max-width: 767px) {
  /* Cards compactas para 2 col (el padding grande viene inline del tpl) */
  :is(body#category, body#manufacturer, body#search, body#prices-drop, body#new-products, body#best-sales) .product-miniature .hs-card-body {
    padding: 10px 12px 14px !important;
    min-height: 0;
  }
  :is(body#category, body#manufacturer) .product-miniature .hs-card-brand { font-size: 11px; }
  :is(body#category, body#manufacturer) .product-miniature .hs-card-title {
    font-size: 13px;
    line-height: 1.35;
    max-height: 36px;
  }
  :is(body#category, body#manufacturer) .product-miniature .hs-card-price { padding-top: 10px; }
  :is(body#category, body#manufacturer) .product-miniature .hs-card-price .product-price { font-size: 17px; }
  :is(body#category, body#manufacturer) .product-miniature .hs-card-badge .hs-badge {
    padding: 5px 8px;
    font-size: 11px;
  }
  :is(body#category, body#manufacturer) .product-miniature .hs-card-media img { padding: 8px; }

  /* Mockup: la card de 2 col no lleva botón añadir; la card navega a la ficha.
     Además el form absolute con opacity:1 en táctil tapaba el pie de la card. */
  :is(body#category, body#manufacturer) .product-miniature .hs-quickadd-form { display: none !important; }
}

/* ── K2 · Overlay de filtros móvil: facet MARCA como CHIPS (mockup) ──
   Solo ≤991px (el sidebar por defecto está display:none en móvil; estas
   reglas solo se ven dentro del overlay). El click sigue delegando en el
   checkbox oculto → el AJAX de ps_facetedsearch no se toca. */
@media (max-width: 991px) {
  #left-column .hs-filter-group[data-type="manufacturer"] .hs-filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  #left-column .hs-filter-group[data-type="manufacturer"] .hs-filter-item {
    display: block;
    margin: 0;
  }
  #left-column .hs-filter-group[data-type="manufacturer"] .hs-filter-row {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid var(--hs-border);
    border-radius: var(--hs-radius-pill);
    background: var(--hs-surface);
    min-height: 36px;
  }
  /* checkbox cuadrado fuera: el estado activo se ve en la propia chip */
  #left-column .hs-filter-group[data-type="manufacturer"] .hs-check { display: none; }
  #left-column .hs-filter-group[data-type="manufacturer"] .hs-filter-link {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
  }
  #left-column .hs-filter-group[data-type="manufacturer"] .hs-filter-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--hs-text);
  }
  #left-column .hs-filter-group[data-type="manufacturer"] .hs-filter-count {
    font-size: 11px;
    color: var(--hs-text-mute);
  }
  /* chip activa: rosa suave + ✓ (como el mockup) */
  #left-column .hs-filter-group[data-type="manufacturer"] .hs-filter-row.is-active {
    border-color: var(--hs-accent);
    background: rgba(236, 26, 143, 0.08);
  }
  #left-column .hs-filter-group[data-type="manufacturer"] .hs-filter-row.is-active .hs-filter-label {
    color: var(--hs-accent-text);
  }
  #left-column .hs-filter-group[data-type="manufacturer"] .hs-filter-row.is-active .hs-filter-label::before {
    content: "✓";
    margin-right: 5px;
    font-weight: 700;
  }
  /* en chips no hay colapso "Ver todas": se muestran todas y envuelven
     (!important: la base .hs-facet-more lleva display:inline-flex !important) */
  :is(body#category, body#manufacturer) #left-column #search_filters .hs-filter-group[data-type="manufacturer"] .hs-filter-list--collapsible.is-collapsed .hs-filter-item:nth-child(n+7) { display: block !important; }
  #left-column .hs-filter-group[data-type="manufacturer"] .hs-facet-more { display: none !important; }
}

/* ── K3 · PDP móvil: fuera el raíl de miniaturas (mockup: solo dots) ──
   BUG que "descuadraba" toda la ficha: a ≤767 el slide del raíl pasa a
   width:auto y la regla tardía de miniaturas cuadradas (width:100% +
   aspect-ratio:1/1, ~línea 10900) hacía que cada thumb renderizara a su
   tamaño natural (1041px) → máscara de 9.131px tapando la página.
   El swiper de portada ya es deslizable con dots en táctil. */
@media (max-width: 767px) {
  body#product .images-container > .js-qv-mask,
  body#product .images-container > .mask { display: none !important; }
}

/* ── K4 · PDP móvil: "En la caja" como filas compactas ──
   El grid auto-fit minmax(180px,1fr) colapsaba a 1 col y el thumb
   cuadrado (aspect-ratio 1/1, width 100%) pintaba placeholders de
   350px por item → 3 pantallas de rayas. Fila: thumb 48px + nombre + x1. */
@media (max-width: 575px) {
  .hs-pdp-inthebox-grid { grid-template-columns: 1fr; gap: 10px; }
  .hs-pdp-inthebox-item {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
  }
  .hs-pdp-inthebox-thumb {
    width: 48px;
    height: 48px;
    aspect-ratio: auto;
    margin-bottom: 0;
  }
  .hs-pdp-inthebox-qty { margin-top: 0; }
}

/* ── K5 · HOME móvil: los rails vuelven a ser carruseles ──
   #content.hs-home es flex column en ≤767 (reorden del mockup) y sus hijos
   con min-width:auto crecían hasta su min-content (12 cards) clamped al
   max-width 1280 → sections de 1280px con las cards inalcanzables (el track
   ni scrolleaba) y los enlaces VER TODO en x≈1150. Mismo patrón que el
   checkout: min-width:0 en los items del flex. */
@media (max-width: 767px) {
  #content.hs-home > * { min-width: 0; max-width: 100%; }
  /* La cabecera del rail cabe: título + enlace VER TODO a la derecha */
  .hs-rail-head { flex-wrap: nowrap; align-items: flex-end; gap: 12px; }
  .hs-rail-head-actions { flex: none; }
  /* área táctil decente para el enlace del rail */
  .hs-rail-link { min-height: 40px; align-items: center; }
}

/* ── K6 · Trampa a.hs-btn: variante -light (CTA drop home) ──
   El parche `a.hs-btn { color: var(--hs-accent-ink) !important }` (blanco)
   dejaba ilegible el botón crema del drop (texto blanco sobre crema). */
a.hs-btn.hs-btn-light,
a.hs-btn.hs-btn-light:hover { color: var(--hs-text) !important; }

/* ── K7 · Footer: wordmark con fuente/color de marca (trampas #2 y #3) ── */
#footer a.hs-logo,
#footer a.hs-logo .hs-logo-word { font-family: var(--hs-font-display) !important; color: var(--hs-text) !important; font-weight: 400; }
#footer a.hs-logo .hs-logo-c { font-family: var(--hs-font-display) !important; color: var(--hs-accent-text) !important; }

/* ── K8 · Bento móvil: el tile Outlet (7º, huérfano en la rejilla de 2 col
   aplanada con display:contents) ocupa la fila entera ── */
@media (max-width: 767px) {
  .hs-bento-card-outlet { grid-column: 1 / -1; }
}

/* ── K9 · Tap targets globales móvil (auditoría: 42 hallazgos) ── */
@media (max-width: 991px) {
  /* burger 37x31 → área 44px sin mover el layout */
  .hs-mobile-header .m-nav-btn.js-hs-menu-toggle { padding: 12px 10px; margin: -6px 0; }
  /* wordmark del header como tap de 44px */
  .hs-mobile-header .hs-m-logo { display: inline-flex; align-items: center; min-height: 44px; }
  /* breadcrumb y enlaces de texto: altura táctil */
  .breadcrumb a { display: inline-flex; align-items: center; min-height: 32px; }
  /* footer: enlaces con aire vertical */
  #footer li a { display: inline-flex; align-items: center; min-height: 36px; }
  /* barra mayorista: SALIR con altura táctil */
  .hs-mayo-bar-item { display: inline-flex; align-items: center; min-height: 36px; }
}

/* ── K10 · Footer móvil: hueco final para que el botón de cookies no tape
   la línea de métodos de pago ── */
@media (max-width: 767px) {
  #footer { padding-bottom: 88px !important; }
}

/* ── K11 · Botón flotante de cookies (lgcookieslaw) vs UI fija propia ──
   - Overlay de filtros abierto: el FAB (z5000) tapaba LIMPIAR TODO → fuera.
   - Carrito y PDP (barra sticky inferior mayorista): el FAB pisaba el total
     → se eleva por encima de la barra. */
body.hs-mfilters-open .lgcookieslaw-fixed-button { display: none !important; }
@media (max-width: 991px) {
  body#cart .lgcookieslaw-fixed-button,
  body#product .lgcookieslaw-fixed-button { bottom: 96px !important; }
}

/* ── K12 · Overlay de filtros: áreas táctiles ── */
@media (max-width: 991px) {
  #left-column .hs-filter-group-head { padding: 10px 0; margin: -10px 0; }
  #left-column .hs-filter-row { min-height: 40px; align-items: center; }
  /* (el de Marca sigue oculto: la regla de chips con 3 IDs le gana) */
  #left-column .hs-facet-more { min-height: 40px !important; align-items: center !important; }
  /* asas del slider: 18px visuales, 44px táctiles */
  #left-column .ui-slider-handle { position: absolute; }
  #left-column .ui-slider-handle::after {
    content: "";
    position: absolute;
    inset: -13px;
  }
}

/* ── K13 · CARRITO móvil ── */
@media (max-width: 767px) {
  /* Upsell "Suele ir junto": 3 columnas de desktop colapsaban el nombre a
     12px ("C.", "P.") con el precio partido bajo el botón +. En móvil: filas
     apiladas a todo el ancho. */
  .hs-cart-upsell-grid { grid-template-columns: 1fr; gap: 10px; }
  /* tap targets de la cabecera mínima del carrito */
  .hs-cart-mhead-back { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .hs-cart-mhead-logo { display: inline-flex; align-items: center; min-height: 44px; }
  .hs-cart-continue { display: inline-flex; align-items: center; min-height: 44px; }
  /* la barra sticky reserva hueco a la izquierda: el FAB de cookies ya se
     eleva (K11), pero si reaparece que no pise el TOTAL */
  .hs-cart-stickybar-label { padding-left: 0; }
  /* filetes huérfanos de la fila de acciones de línea (oculta en móvil) */
  .hs-cart-line-actions-sep { display: none !important; }
}

/* ── K14 · CUENTA B2B móvil ── */
@media (max-width: 767px) {
  /* gutter global 20px (estaba a 40 y desalineaba vs footer/newsletter,
     robando 40px de ancho útil a la tabla) */
  .hs-account-shell-inner { padding: 0 var(--hs-gutter-mobile) !important; }
  /* tabla de pedidos: pista de que scrollea → degradado en el borde dcho */
  .hs-b2bp-tablewrap { position: relative; }
  .hs-b2bp-tablewrap::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 28px;
    background: linear-gradient(to left, var(--hs-surface, #fff), transparent);
    pointer-events: none;
  }
  /* nº de pedido: único camino al detalle → tap de 44px */
  .hs-b2bp-table tbody a { display: inline-flex; align-items: center; min-height: 44px; }
  /* X de borrar presupuesto (acción destructiva): área 40px */
  a.hs-b2bp-quote-del { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; }
  /* flechas del carrusel Te suele tocar */
  .hs-b2bp-habit-arrow { min-width: 40px; min-height: 40px; }
  /* CTAs que rompían en 2 líneas */
  .hs-b2bp-seclink { white-space: nowrap; display: inline-flex; align-items: center; min-height: 40px; }
}

/* ── K15 · MARCAS móvil ── */
@media (max-width: 767px) {
  /* la toolbar entera (buscador+chips+checkbox, ~195px) iba sticky y comía
     un tercio de pantalla: solo quedan fijos los chips de categoría */
  .hs-brands-toolbar { position: static !important; }
  .hs-brands-chips {
    position: sticky;
    top: 56px;
    z-index: 40;
    background: var(--hs-bg);
    padding-top: 8px;
    padding-bottom: 8px;
  }
  /* pista de scroll horizontal en los chips: fade en el borde derecho */
  .hs-brands-chips { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
}
/* A-Z: las marcas sin stock subían de --hs-text-faint (ilegible) a mute */
.hs-brands-az-off { color: var(--hs-text-mute) !important; }

/* ── K16 · PDP móvil: "Suele ir junto" como CARRUSEL deslizable ──
   (petición Manuel 2026-07-29) Antes el grid minmax(220px,1fr) colapsaba a
   1 columna y las 4 cards se apilaban en vertical. Ahora: track horizontal
   con scroll-snap y la siguiente card asomando (como los rails de la home),
   sangrado hasta el borde derecho de la pantalla. */
@media (max-width: 767px) {
  .hs-pdp-copurchase-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* full-bleed a la derecha para que se vea que hay más */
    margin-right: calc(-1 * var(--hs-gutter-mobile));
    padding-right: var(--hs-gutter-mobile);
    padding-bottom: 4px;
  }
  .hs-pdp-copurchase-grid::-webkit-scrollbar { display: none; }
  .hs-pdp-copurchase-card {
    flex: 0 0 62vw;
    max-width: 250px;
    scroll-snap-align: start;
  }
}

/* ── K2d · Alta de cuenta post-compra en la confirmación (spec Manuel) ── */
.hs-confirm-account {
  margin-top: 32px;
  border: 2px solid var(--hs-accent);
  border-radius: 14px;
  background: var(--hs-due-tint, rgba(236, 26, 143, 0.05));
  padding: 28px;
  text-align: left;
}
.hs-confirm-account__cols {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  justify-content: space-between;
}
.hs-confirm-account__eyebrow {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hs-accent-text);
  margin-bottom: 10px;
}
.hs-confirm-account__title {
  font-family: var(--hs-font-display);
  font-size: 34px;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--hs-text);
  margin: 0 0 12px;
}
.hs-confirm-account__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--hs-text-mute);
  max-width: 440px;
  margin: 0;
}
.hs-confirm-account__perks {
  flex: 0 0 210px;
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.hs-confirm-account__perks li {
  position: relative;
  padding: 4px 0 4px 22px;
  font-size: 12px;
  color: var(--hs-text);
}
.hs-confirm-account__perks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--hs-accent-text);
  font-size: 13px;
  font-weight: 700;
}
.hs-confirm-account__form {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  margin-top: 20px;
  flex-wrap: wrap;
}
.hs-confirm-account__field { flex: 1 1 260px; margin-bottom: 0 !important; }
.hs-confirm-account__field .hs-form-label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--hs-text); }
.hs-confirm-account__field input {
  width: 100%;
  background: var(--hs-surface, #fff);
  border: 1.5px solid var(--hs-border-soft);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--hs-font-body);
  font-size: 14px;
  color: var(--hs-text);
}
.hs-confirm-account__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--hs-radius-pill);
  background: var(--hs-accent-fill);
  color: #fff;
  font-family: var(--hs-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.hs-confirm-account__btn:hover { background: var(--hs-accent-hover, #d1137c); }
.hs-confirm-account__btn[disabled] { opacity: 0.6; cursor: wait; }
.hs-confirm-account__error {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: #c40e4c;
}
.hs-confirm-account__foot {
  margin-top: 14px;
  font-size: 11px;
  color: var(--hs-text-mute);
}
.hs-confirm-account__cta { margin-top: 16px; }
@media (max-width: 767px) {
  .hs-confirm-account { padding: 20px; margin-top: 24px; }
  .hs-confirm-account__title { font-size: 26px; }
  .hs-confirm-account__perks { display: none; }
  .hs-confirm-account__form { flex-direction: column; align-items: stretch; }
  .hs-confirm-account__btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   ATENCIÓN AL CLIENTE (/contacto)
   Sustituye la página Bootstrap de Warehouse. Hero + formulario del
   módulo contactform (plantilla propia) + columna de datos reales.
   ═══════════════════════════════════════════════════════════════════ */
.hs-contact {
  max-width: var(--hs-max);
  margin: 0 auto;
  padding: 40px var(--hs-gutter-mobile) 80px;
}
@media (min-width: 768px) {
  .hs-contact { padding: 56px var(--hs-gutter) 96px; }
}

.hs-contact-hero { max-width: 640px; margin-bottom: 36px; }
.hs-contact-eyebrow {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hs-accent-text);
  margin: 0 0 10px;
}
.hs-contact-title {
  /* theme.css pinta los h1 en gris: hay que forzar el negro de marca */
  color: var(--hs-text);
  font-size: clamp(38px, 6vw, 64px);
  line-height: 0.95;
  margin: 0 0 14px;
}
.hs-contact-dot { color: var(--hs-accent-text); }
.hs-contact-intro {
  font-family: var(--hs-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--hs-text-mute);
  margin: 0;
  max-width: 58ch; /* 2026-09-16: medida ≤ 75 caracteres */
}

.hs-contact-grid { display: grid; gap: var(--hs-space-5); align-items: start; }
@media (min-width: 1024px) {
  .hs-contact-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--hs-space-6); }
}

/* ── Formulario ── */
.hs-contact-card {
  background: var(--hs-bg-alt);
  border-radius: var(--hs-radius-lg);
  padding: 28px 24px;
  box-shadow: var(--hs-shadow-card);
}
@media (min-width: 768px) { .hs-contact-card { padding: 36px; } }

.hs-contact-card select,
.hs-contact-card textarea,
.hs-contact-card input[type="file"] {
  width: 100%;
  padding: 12px 14px;
  background: var(--hs-surface);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius);
  font-family: var(--hs-font-body);
  font-size: 14px;
  color: var(--hs-text);
  transition: border-color var(--hs-transition);
}
.hs-contact-card textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.hs-contact-card select:focus,
.hs-contact-card textarea:focus,
.hs-contact-card input:focus { outline: none; border-color: var(--hs-text); }
.hs-contact-card textarea::placeholder { color: var(--hs-text-faint); }
.hs-contact-opt {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--hs-text-faint);
}
.hs-contact-hp { display: none !important; }
.hs-contact-gdpr { margin-bottom: 18px; font-size: 13px; }
.hs-contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  border-top: 1px solid var(--hs-border);
  margin-top: 24px;
  padding-top: 24px;
}
.hs-contact-legal { margin: 0; font-size: 12.5px; color: var(--hs-text-faint); }

/* ── Columna de datos ── */
.hs-contact-aside { display: flex; flex-direction: column; gap: var(--hs-space-4); }
.hs-contact-info,
.hs-contact-faq,
.hs-contact-b2b {
  background: var(--hs-surface-soft);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-lg);
  padding: 22px 20px;
}
.hs-contact-info-title {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hs-text-faint);
  margin: 0 0 14px;
}
.hs-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  text-decoration: none !important;
  /* custom_s_1.css (generado) pinta a:link a #555 con (0,3,1) → !important */
  color: var(--hs-text) !important;
}
.hs-contact-item + .hs-contact-item { border-top: 1px solid var(--hs-border); }
.hs-contact-item-ico {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--hs-bg-alt);
  border: 1px solid var(--hs-border);
  color: var(--hs-accent-text);
}
.hs-contact-item-ico svg { width: 16px; height: 16px; }
.hs-contact-item-body { display: block; }
.hs-contact-item-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hs-text-faint);
  margin-bottom: 2px;
}
.hs-contact-item-value {
  display: block;
  font-family: var(--hs-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}
a.hs-contact-item:hover .hs-contact-item-value { color: var(--hs-accent-text); }

.hs-contact-faq ul { list-style: none; margin: 0; padding: 0; }
.hs-contact-faq li + li { margin-top: 2px; }
.hs-contact-faq a {
  display: block;
  padding: 9px 0;
  font-size: 14px;
  text-decoration: none !important;
  color: var(--hs-text) !important;
}
.hs-contact-faq a:hover { color: var(--hs-accent-text) !important; }

.hs-contact-b2b { background: var(--hs-text); border-color: var(--hs-text); }
.hs-contact-b2b-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hs-accent-text);
  margin: 0 0 8px;
}
.hs-contact-b2b-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--hs-bg);
  margin: 0 0 16px;
}

/* ═══════════════════════════════════════════════════════════════════
   HARDEN · Foco visible global + skip link (auditoría 2026-09-15)
   Warehouse trae `a:focus{outline:none}` y Bootstrap `.btn:focus{outline:0}`
   y el tema hijo mataba el box-shadow → ningún control tenía foco. Aquí:
   - :focus-visible (solo teclado) pinta un anillo de 2px separado 3px del
     control, en onyx sobre superficies claras y en blanco sobre bloques
     oscuros (variable --hs-focus-ring, se sobreescribe por bloque).
   - Los inputs de texto que ya tienen su propio anillo (border accent +
     sombra 3px) lo conservan y además reciben el outline; nunca queda sin
     indicador.
   - El click de ratón no pinta anillo (:focus:not(:focus-visible)).
   ═══════════════════════════════════════════════════════════════════ */
:root { --hs-focus-ring: #0a0a0a; }
.hs-announce, .hs-newsletter, .hs-home-manifesto, .hs-quickadd, .hs-contact-b2b,
.hs-auth-aside, .lgcookieslaw-banner, .lgcookieslaw-modal, .theme-dark { --hs-focus-ring: #ffffff; }

:is(a, button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--hs-focus-ring) !important;
  outline-offset: 3px !important;
}
/* Controles compactos dentro de pills/cards: anillo pegado para que no se salga del contenedor */
:is(.hs-qty-btn, .hs-cart-qty-btn, .hs-rail-nav, .hs-drawer-close, .hs-pill, .hs-check input, .ui-slider-handle):focus-visible {
  outline-offset: 2px !important;
}
/* Controles que solo aparecían en hover: visibles al recibir foco */
.hs-drawer-line-remove:focus-visible { opacity: 1 !important; color: var(--hs-accent-text) !important; }

/* Ratón/táctil: sin anillo (el estado :active/:hover ya da feedback) */
:is(a, button, [role="button"], [tabindex]):focus:not(:focus-visible) { outline: none; }

/* Skip link: primer hijo de <body>; solo aparece al tabular */
.hs-skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10000;
  padding: 12px 18px;
  border-radius: var(--hs-radius-pill, 999px);
  background: var(--hs-text, #0a0a0a);
  color: var(--hs-bg, #f6f2ea) !important;
  font-family: var(--hs-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: top .15s ease;
}
.hs-skip-link:focus, .hs-skip-link:focus-visible { top: 16px; }

/* "Filtros" pasa de <span> a <h2> (jerarquía): neutralizar la regla genérica
   `#left-column h2` de Warehouse-sidebar (subrayado + 16px) y dejarlo como estaba */
:is(body#category, body#manufacturer) #left-column h2.hs-filters-title,
h2.hs-filters-title {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: var(--hs-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  color: var(--hs-text) !important;
}
h3.hs-filter-group-title { margin: 0; }


/* ═══════════════════════════════════════════════════════════════════
   COLORIZE · magenta de marca (#EC1A8F) reservado a display y marca.
   Todo `color: var(--hs-accent)` pasó a --hs-accent-text (AA en texto pequeño) y
   todo relleno a --hs-accent-fill (AA con texto blanco). Estos elementos vuelven
   al magenta puro: son texto grande (≥24px, AA-large = 3:1 y #EC1A8F da 3,68)
   o marcas/decoración sin texto.
   ═══════════════════════════════════════════════════════════════════ */
.hs-magenta, .hs-b2b-title-accent, .hs-b2bp-stat-accent, .hs-brands-tile-margin,
.hs-logo .hs-logo-c, #footer a.hs-logo .hs-logo-c, .hs-m-logo-c, .hs-mmenu-logo-c, .hs-cart-mhead-logo span,
body#checkout .hs-checkout-simple-logo span, .logo-container a,
.hs-marquee-dot, .hs-marquee-row .dot, .hs-brands-dot, .hs-contact-dot,
.hs-trust-icon, .hs-pdp-reassurance-icon, .hs-cart-trust-item svg, .hs-cart-trust-ico, .hs-account-nav-ico,
.hs-dash-quick-ico, .hs-dash-tile-ico, .hs-contact-item-ico, body#checkout .hs-checkout-trust svg,
body#product .reassurance-block i, body#product .reassurance-block .reassurance-image {
  color: var(--hs-accent) !important;
}
/* Bloques oscuros: el magenta como texto vuelve al de marca (4,82:1 sobre onyx; el AA-claro daría 3,9) */
.hs-announce, .hs-newsletter, .hs-home-manifesto, .hs-quickadd, .hs-contact-b2b, .hs-auth-aside,
.lgcookieslaw-banner, .lgcookieslaw-modal, .theme-dark, .hs-dash-lastorder, .hs-home-drop {
  --hs-accent-text: #EC1A8F;
}

/* ═══════════════════════════════════════════════════════════════════
   ADAPT · objetivos táctiles ≥44px y botón flotante de cookies (auditoría 2026-09-15)
   Solo en dispositivos táctiles / sin hover: el desktop aprobado no cambia.
   ═══════════════════════════════════════════════════════════════════ */
/* Botón flotante de lgcookieslaw: fuera. El modal se reabre desde el footer ("Configurar cookies"). */
.lgcookieslaw-fixed-button { display: none !important; }
.hs-footer-linkbtn {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.hs-footer-linkbtn:hover { color: var(--hs-accent-text); }

@media (hover: none), (pointer: coarse) {
  /* Raíles de la home: "Añadir al carrito" pasaba de 30px */
  .hs-rail-card-add, .hs-rail-card-add-opts { min-height: 44px; padding-top: 13px; padding-bottom: 13px; }
  /* Cantidad (ficha, carrito, drawer) */
  .hs-qty-btn { width: 44px; height: 44px; }
  .hs-cart-qty-btn { width: 40px; height: 40px; }
  .hs-qty-input, .hs-cart-qty-input { min-height: 40px; }
  /* Pills de subcategoría / filtros rápidos y chips */
  .hs-pill { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
  .hs-chip { min-height: 40px !important; padding-top: 10px !important; padding-bottom: 10px !important; }
  /* Flechas de raíl, cierre del drawer, toggle vista */
  .hs-rail-nav, .hs-drawer-close, .hs-view-link { width: 44px; height: 44px; }
  /* Votos de reseñas */
  .hs-review-vote { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  /* Muestras de color: el visual sigue a 22px, el área táctil crece a 44px con un pseudo */
  .hs-color-swatch, body#product .product-variants .color { position: relative; }
  .hs-color-swatch::after, body#product .product-variants .color::after {
    content: ''; position: absolute; inset: -11px; border-radius: 50%;
  }
  /* Ordenar / filtros móvil */
  .hs-msort-btn, .hs-mfilters-btn { min-height: 44px; }
  /* Toggle de vista (categoría), cierre de drawers y hamburguesa: reglas con ids/2 clases → misma especificidad + !important */
  :is(body#category, body#manufacturer) #js-product-list-top .hs-view-switcher .hs-view-link { width: 44px !important; height: 44px !important; }
  .hs-drawer-close, .close.hs-drawer-close { width: 44px !important; height: 44px !important; }
  .hs-mobile-header .m-nav-btn { min-width: 44px; min-height: 44px; }
  /* Muestras de color de las cards de categoría (Warehouse: a.color) */
  a.color { position: relative; }
  a.color::after { content: ''; position: absolute; inset: -16px; border-radius: 50%; } /* 12px visual → 44px táctil */
  /* Reseñas: "Denunciar" */
  .hs-review-report { min-height: 44px; }
  /* Input de cantidad: alto táctil (el ancho lo da el bloque) */
  .hs-qty-input { height: 44px; }
}

/* ═══════════════════════════════════════════════════════════════════
   ANIMATE · reducción de movimiento + bump del carrito (auditoría 2026-09-16)
   ═══════════════════════════════════════════════════════════════════ */
/* Contador del carrito: confirma el "añadir" sin abrir nada (quickadd.js añade .is-bump) */
.cart-products-count-btn.is-bump { animation: hs-bump 320ms var(--hs-ease-out); }
@keyframes hs-bump { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
/* Marquee: pausado cuando no está en pantalla (home.js) y con el foco dentro */
.hs-home-marquee.is-offscreen .hs-marquee-track,
.hs-home-marquee:focus-within .hs-marquee-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  /* Bucles decorativos: fuera. El marquee queda como fila estática de marcas. */
  .hs-marquee-track { animation: none; }
  /* Overlays: aparecen sin desplazamiento pero con un fundido corto que sigue explicando el cambio de estado */
  .hs-mmenu-overlay { transform: none; opacity: 0; transition: opacity 120ms ease-out, visibility 0s linear 120ms; }
  .hs-mmenu-overlay.is-open { opacity: 1; transition: opacity 160ms ease-out, visibility 0s; }
  .hs-mmenu-overlay .hs-mmenu-cat, .hs-mmenu-overlay.is-open .hs-mmenu-cat { animation: none; opacity: 1; transform: none; }
  #_desktop_blockcart-content, #_mobile_blockcart-content, .side-cart .dropdown-menu-custom {
    transition: opacity 120ms ease-out, visibility 0s linear 120ms !important;
    transform: translateX(0) !important; opacity: 0 !important;
  }
  body.hs-drawer-open #_desktop_blockcart-content, body.hs-drawer-open #_mobile_blockcart-content,
  #_desktop_blockcart-content.hs-drawer-active, #_mobile_blockcart-content.hs-drawer-active {
    opacity: 1 !important; transition: opacity 160ms ease-out, visibility 0s !important;
  }
  /* Desplazamientos de hover: no. Color y fondo siguen (feedback). */
  .hs-rail-card:hover, .hs-bento-card:hover, .hs-btn-primary:hover, .hs-card:hover, .hs-brands-tile:hover { transform: none; }
  .hs-btn:hover .hs-arrow { transform: none; }
  .hs-rail-card-add, .hs-quickadd { transform: none; }
  .cart-products-count-btn.is-bump { animation: none; }
  /* Spinners y barras de progreso: se mantienen (son feedback), pero sin acordeón animado */
  #search_filters .hs-filter-list { transition: none; }
  * { scroll-behavior: auto !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   POLISH · texto de la ficha (auditoría 2026-09-16)
   Las descripciones vienen del editor de producto con style="text-align:justify"
   (ríos de blanco sin hyphens). Se neutraliza aquí, no producto a producto.
   ═══════════════════════════════════════════════════════════════════ */
body#product .hs-pdp-editorial-desc :is(p, div, li, span)[style*="text-align"],
body#product .product-description :is(p, div, li, span)[style*="text-align"] {
  text-align: left !important;
}

/* Badge de Warehouse "producto por encargo" en cards: .75em = 10,5px → suelo 11px */
.product-miniature .badge.product-unavailable { font-size: 11px; }

/* ═══════════════════════════════════════════════════════════════════
   /contacto · repaso 2026-09-16
   ═══════════════════════════════════════════════════════════════════ */
/* Adjunto: el input de fichero nativo ("Seleccionar archivo · Ningún archivo") se viste como el resto */
.hs-contact-card input[type="file"] {
  padding: 8px 10px;
  color: var(--hs-text-mute);
  font-size: 13px;
  cursor: pointer;
}
.hs-contact-card input[type="file"]::file-selector-button {
  appearance: none;
  margin: 0 12px 0 0;
  padding: 8px 16px;
  border: 1.5px solid var(--hs-text);
  border-radius: var(--hs-radius-pill);
  background: transparent;
  color: var(--hs-text);
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--hs-dur-fast) ease, color var(--hs-dur-fast) ease;
}
.hs-contact-card input[type="file"]::file-selector-button:hover { background: var(--hs-text); color: var(--hs-bg); }
.hs-contact-card select:invalid { color: var(--hs-text-mute); }
/* Footer: el botón "Configurar cookies" con el mismo estilo que los enlaces de la columna */
.hs-footer-col .hs-footer-linkbtn {
  display: inline-block;
  font-family: var(--hs-font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--hs-text);
  line-height: inherit;
  transition: color .15s ease;
}
.hs-footer-col .hs-footer-linkbtn:hover { color: var(--hs-accent-text); }
@media (max-width: 767px) { .hs-footer-col .hs-footer-linkbtn { padding: 6px 0; } }

/* ═══════════════════════════════════════════════════════════════════
   SOBRE NOSOTROS (/content/4-sobre-nosotros) · 2026-09-16
   Plantilla cms/sobre-nosotros.tpl. Mismo sistema que /contacto y la home:
   hero crema → cifras → "Cómo elegimos" (2 columnas asimétricas, sin cards)
   → bloque onyx a sangre con logos → caja "Profesionales".
   ═══════════════════════════════════════════════════════════════════ */
.hs-about { padding: 8px 0 0; }
.hs-about-eyebrow {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hs-accent-text);
  margin: 0 0 12px;
}
.hs-about-eyebrow--dark { color: var(--hs-accent); }

/* 1 · Hero */
.hs-about-hero { max-width: 760px; }
.hs-about-title {
  font-family: var(--hs-font-display);
  font-size: clamp(40px, 6.4vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--hs-text);
  margin: 0 0 18px;
  text-wrap: balance;
}
.hs-about-intro {
  font-family: var(--hs-font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--hs-text-mute);
  max-width: 56ch;
  margin: 0;
}
.hs-about-h2 {
  font-family: var(--hs-font-display);
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--hs-text);
  margin: 0 0 14px;
  text-wrap: balance;
}
.hs-about-h2--dark { color: #fff; }
.hs-about-h3 {
  font-family: var(--hs-font-display);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--hs-text);
  margin: 0 0 10px;
  text-wrap: balance;
}

/* 2 · Cifras (reutiliza .hs-hero-stat del hero de la home) */
.hs-about-stats {
  list-style: none;
  display: flex;
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
  margin: 40px 0 0;
  padding: 0;
}
.hs-about-stats .hs-hero-stat { display: flex; flex-direction: column; }
.hs-about-stat-unit { font-size: 0.5em; margin-left: 2px; }
@media (max-width: 767px) {
  .hs-about-stats { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 20px 0; }
  .hs-about-stats .hs-hero-stat { padding: 0 0 0 20px; }
  .hs-about-stats .hs-hero-stat:nth-child(odd) { padding-left: 0; }
  .hs-about-stats .hs-hero-stat + .hs-hero-stat { border-left: 0; }
  .hs-about-stats .hs-hero-stat:nth-child(even) { border-left: 1px solid var(--hs-border); }
}

/* 3 · Cómo elegimos */
.hs-about-how {
  display: grid;
  gap: var(--hs-space-6);
  margin-top: 96px;
}
@media (min-width: 992px) {
  .hs-about-how { grid-template-columns: 5fr 7fr; gap: var(--hs-space-8); align-items: start; }
  .hs-about-how-head { position: sticky; top: 96px; }
}
.hs-about-how-lead {
  font-family: var(--hs-font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--hs-text-mute);
  margin: 0;
}
.hs-about-rules { margin: 0; display: grid; gap: 40px; }
.hs-about-rule dt {
  font-family: var(--hs-font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--hs-text);
  margin: 0 0 10px;
}
.hs-about-dot { color: var(--hs-accent); }
.hs-about-rule dd {
  font-family: var(--hs-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--hs-text-mute);
  max-width: 52ch;
  margin: 0;
}

/* 4 · De dónde venimos (onyx a sangre) */
.hs-about-story {
  position: relative;
  width: 100vw;
  left: 50%;
  margin: 96px 0 0 -50vw;
  padding: 96px 0;
  background: var(--hs-text);
  color: #fff;
}
.hs-about-story-inner {
  max-width: var(--hs-max);
  margin: 0 auto;
  padding: 0 var(--hs-gutter);
  display: grid;
  gap: var(--hs-space-7);
}
@media (min-width: 992px) {
  .hs-about-story-inner { grid-template-columns: 7fr 5fr; gap: var(--hs-space-8); align-items: center; }
}
.hs-about-story-text {
  font-family: var(--hs-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.86);
  max-width: 58ch;
  margin: 0 0 16px;
}
.hs-about-story-copy .hs-btn { margin-top: 12px; }
.hs-about-brands-title {
  font-family: var(--hs-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 16px;
}
.hs-about-logos {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.hs-about-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: 14px;
  background: #fff;
  border-radius: var(--hs-radius);
  transition: transform var(--hs-dur-fast) var(--hs-ease-out);
}
.hs-about-logo:hover { transform: translateY(-2px); }
.hs-about-logo img { width: auto; height: auto; max-width: 100%; max-height: 40px; object-fit: contain; }
.hs-about-brands-link {
  font-family: var(--hs-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff !important;
  text-decoration: none !important;
  border-bottom: 2px solid var(--hs-accent);
  padding-bottom: 4px;
}
.hs-about-brands-link:hover { color: var(--hs-accent) !important; }
.hs-about-story { --hs-btn-ghost-ink: #ffffff; --hs-btn-ghost-hover-ink: #0a0a0a; --hs-focus-ring: #ffffff; }
.hs-about-story:last-child { margin-bottom: 0; }

/* 5 · Profesionales */
.hs-about-pro {
  margin: 64px 0 96px;
  padding: 32px;
  background: var(--hs-surface);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hs-space-6);
  flex-wrap: wrap;
}
.hs-about-pro-text {
  font-family: var(--hs-font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--hs-text-mute);
  max-width: 52ch;
  margin: 0;
}
.hs-about-pro .hs-btn { flex: none; }

@media (max-width: 767px) {
  .hs-about-how { margin-top: 64px; }
  .hs-about-story { margin-top: 64px; padding: 64px 0; }
  .hs-about-story-inner { padding: 0 var(--hs-gutter-mobile); }
  .hs-about-pro { margin: 48px 0 64px; padding: 24px 20px; }
  .hs-about-logos { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .hs-about-logo { height: 60px; padding: 10px; }
}
@media (prefers-reduced-motion: reduce) { .hs-about-logo:hover { transform: none; } }

/* ═══════════════════════════════════════════════════════════════════
   LOGO · wordmark Helvetica Bold en SVG (2026-09-16, originales de Manuel)
   Sustituye al texto provisional en Archivo Black. Escala con el font-size que
   ya tenía cada instancia (header 24px, footer 32px, móvil 20-21px, checkout 22px,
   login 19px): la caja del SVG incluye descendentes, de ahí el .95em.
   ═══════════════════════════════════════════════════════════════════ */
.hs-logomark { display: block; height: .95em; width: auto; }
.hs-logomark-c { fill: var(--hs-accent); }           /* © en el magenta de marca */
/* Los <a> del logo heredaban el gris #555 de custom_s_1.css (el texto antiguo lo tapaba con su propio color):
   ahora el SVG usa currentColor, así que el enlace fija el onyx. Y flex con especificidad suficiente para
   ganar a `.hs-mobile-header .col-mobile-logo a { display:inline-block }` (el SVG quedaba arriba del tap de 44px). */
.hs-logo, .hs-m-logo, .hs-mmenu-logo, .hs-cart-mhead-logo, .hs-checkout-header__logo, .hs-auth-header__logo,
.hs-mobile-header .col-mobile-logo a.hs-m-logo, #footer a.hs-logo {
  display: inline-flex !important; align-items: center; line-height: 1; color: var(--hs-text) !important;
}
.hs-home-manifesto .hs-logomark, .hs-newsletter .hs-logomark, .theme-dark .hs-logomark { color: #fff; }