/* =========================================================================
   HIDROSUMINISTROS — Main CSS
   Sistema de diseño del tema propio. Sin frameworks externos.
   ========================================================================= */

/* ---------- VARIABLES DE MARCA ---------- */
:root {
  --hs-navy:        #213E5C;
  --hs-navy-dark:   #16283A;
  --hs-navy-light:  #2E5C8A;
  --hs-water:       #3AA4D5;
  --hs-water-dark:  #2589B7;
  --hs-water-soft:  #E6F3F9;
  --hs-ice:         #F0F7FB;
  --hs-green:       #10B981;
  --hs-red:         #EF4444;
  --hs-amber:       #F59E0B;
  --hs-gray-50:     #F8FAFC;
  --hs-gray-100:    #F1F5F9;
  --hs-gray-200:    #E2E8F0;
  --hs-gray-300:    #CBD5E1;
  --hs-gray-400:    #94A3B8;
  --hs-gray-500:    #64748B;
  --hs-gray-700:    #334155;
  --hs-gray-900:    #0F172A;
  --hs-body:        #1E293B;
  --hs-white:       #FFFFFF;

  --hs-radius-sm: 8px;
  --hs-radius: 12px;
  --hs-radius-lg: 16px;
  --hs-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --hs-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  --hs-shadow-lg: 0 12px 36px rgba(33, 62, 92, 0.12);
  --hs-shadow-xl: 0 25px 50px -12px rgba(33, 62, 92, 0.25);

  --hs-trans: 0.2s ease;
  --hs-container: 1280px;
  --hs-container-narrow: 960px;
  --hs-gap: 24px;

  --hs-font-body: 'Inter', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hs-font-heading: 'Montserrat', 'Inter', sans-serif;
  --hs-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
}

/* ---------- RESET + BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--hs-font-body);
  color: var(--hs-body);
  line-height: 1.6;
  font-size: 16px;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

.hs-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--hs-navy);
  color: #fff;
  padding: 12px 20px;
  z-index: 9999;
}
.hs-skip-link:focus { left: 12px; top: 12px; }

.screen-reader-text {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px; width: 1px;
  overflow: hidden;
  word-wrap: normal;
}

/* ---------- CONTAINER ---------- */
.hs-container {
  max-width: var(--hs-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 3vw, 32px);
  padding-right: clamp(16px, 3vw, 32px);
}
.hs-container-narrow {
  max-width: var(--hs-container-narrow);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 3vw, 32px);
  padding-right: clamp(16px, 3vw, 32px);
}

/* ---------- TIPOGRAFÍA ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--hs-font-heading);
  color: var(--hs-navy);
  letter-spacing: -0.015em;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.6em 0;
}
h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h2 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1em 0; }
a { color: var(--hs-navy-light); text-decoration: none; transition: color var(--hs-trans); }
a:hover { color: var(--hs-water); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--hs-water);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- BOTONES ---------- */
.hs-btn, .button, .wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--hs-water);
  color: #fff !important;
  border: 0;
  border-radius: var(--hs-radius-sm);
  padding: 12px 24px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
  transition: all var(--hs-trans);
  box-shadow: 0 2px 6px rgba(58, 164, 213, 0.22);
}
.hs-btn:hover, .button:hover, .wp-element-button:hover {
  background: var(--hs-water-dark);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(58, 164, 213, 0.32);
}
.hs-btn-navy { background: var(--hs-navy) !important; }
.hs-btn-navy:hover { background: var(--hs-navy-dark) !important; }
.hs-btn-outline {
  background: transparent !important;
  color: var(--hs-navy) !important;
  border: 2px solid var(--hs-navy) !important;
  box-shadow: none;
}
.hs-btn-outline:hover { background: var(--hs-navy) !important; color: #fff !important; }
.hs-btn-ghost {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.4);
  box-shadow: none;
}
.hs-btn-ghost:hover { background: rgba(255,255,255,0.12) !important; border-color: #fff; }

/* ---------- TOPBAR ---------- */
.hs-topbar {
  background: var(--hs-navy);
  color: rgba(255, 255, 255, 0.92);
  padding: 10px 20px;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}
.hs-topbar-inner {
  max-width: var(--hs-container);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  align-items: center;
}
.hs-topbar-item { display: inline-flex; align-items: center; gap: 6px; }
.hs-topbar a { color: #fff; font-weight: 600; text-decoration: none; }
.hs-topbar a:hover { color: var(--hs-water); }
@media (max-width: 780px) { .hs-topbar { font-size: 0.75rem; padding: 8px 12px; } .hs-topbar-inner { gap: 14px; } }

/* ---------- HEADER ---------- */
.hs-header {
  background: #fff;
  border-bottom: 1px solid var(--hs-gray-200);
  box-shadow: var(--hs-shadow-sm);
  position: sticky;
  top: 0;
  z-index: 700;
}
.hs-header-inner {
  max-width: var(--hs-container);
  margin: 0 auto;
  padding: 14px clamp(16px, 3vw, 32px);
  display: flex;
  align-items: center;
  gap: 24px;
}
.hs-logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  color: var(--hs-navy) !important;
  font-weight: 800;
  font-family: var(--hs-font-heading);
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  text-decoration: none !important;
}
.hs-logo-text { font-family: var(--hs-font-heading); }
.hs-logo-tagline {
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  font-weight: 500;
  color: var(--hs-gray-500);
  margin-top: 4px;
  text-transform: uppercase;
}
.hs-logo img { max-height: 48px; width: auto; }

.hs-search-box {
  flex: 1;
  max-width: 420px;
  position: relative;
  display: flex;
  margin-left: auto;
}
.hs-search-box input[type="search"] {
  width: 100%;
  padding: 10px 44px 10px 40px;
  border: 1px solid var(--hs-gray-200);
  border-radius: var(--hs-radius-sm);
  font-size: 0.88rem;
  background: var(--hs-gray-50);
  outline: none;
  transition: border-color var(--hs-trans);
}
.hs-search-box input[type="search"]:focus {
  border-color: var(--hs-water);
  background: #fff;
  outline: 3px solid rgba(58, 164, 213, 0.15);
}
.hs-search-box button {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--hs-gray-500);
  padding: 8px 10px;
  border-radius: var(--hs-radius-sm);
}
.hs-search-box button:hover { color: var(--hs-water); }
.hs-search-box::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat;
}

.hs-header-icons {
  display: flex;
  gap: 10px;
  align-items: center;
}
.hs-header-icon {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hs-gray-50);
  color: var(--hs-navy);
  text-decoration: none;
  transition: all var(--hs-trans);
}
.hs-header-icon:hover { background: var(--hs-water); color: #fff; }
.hs-cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--hs-water);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 0 0 2px #fff;
}

.hs-header-phone {
  width: auto;
  padding: 8px 14px;
  border-radius: var(--hs-radius-sm);
  background: var(--hs-water-soft);
  color: var(--hs-navy);
  gap: 8px;
  font-weight: 700;
  font-size: 0.88rem;
}
.hs-header-phone:hover { background: var(--hs-water); color: #fff; }
.hs-header-phone-text { font-weight: 700; font-size: 0.88rem; }

@media (max-width: 900px) {
  .hs-search-box { display: none; }
  .hs-header-phone-text { display: none; }
  .hs-header-phone { padding: 8px; background: transparent; }
  .hs-header-phone:hover { background: var(--hs-water); }
}

/* ---------- FOOTER ---------- */
.hs-footer {
  background: var(--hs-navy);
  color: rgba(255, 255, 255, 0.85);
  padding: 48px 0 0 0;
}
.hs-footer-inner {
  max-width: var(--hs-container);
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px) 40px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
}
@media (max-width: 900px) { .hs-footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .hs-footer-inner { grid-template-columns: 1fr; gap: 24px; } }

.hs-footer h4 {
  color: #fff;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px 0;
  font-weight: 700;
}
.hs-footer a { color: rgba(255, 255, 255, 0.75); }
.hs-footer a:hover { color: var(--hs-water); }
.hs-footer-menu { list-style: none; padding: 0; margin: 0; }
.hs-footer-menu li { padding: 4px 0; }
.hs-footer-about { font-size: 0.88rem; color: rgba(255, 255, 255, 0.75); line-height: 1.55; max-width: 320px; }
.hs-footer-contact { font-size: 0.9rem; margin-top: 12px; line-height: 1.8; }
.hs-footer-contact a { color: rgba(255, 255, 255, 0.85); }
.hs-logo--light, .hs-footer .hs-logo { color: #fff !important; }
.hs-logo--light small, .hs-footer .hs-logo small { color: rgba(255, 255, 255, 0.6); }
.hs-footer-bottom {
  background: rgba(0, 0, 0, 0.25);
  padding: 16px 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}
.hs-footer-bottom-inner {
  max-width: var(--hs-container);
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- PAGE WRAP GENÉRICO ---------- */
.hs-page-wrap {
  padding: clamp(24px, 4vw, 56px) 0;
}
.hs-page-header {
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hs-gray-200);
}
.hs-page-title {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--hs-navy);
}

/* ---------- PAGINACIÓN ---------- */
.hs-pagination, .pagination, .navigation.pagination,
.woocommerce-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 40px 0;
  flex-wrap: wrap;
}
.hs-pagination .page-numbers,
.woocommerce-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--hs-gray-200);
  border-radius: var(--hs-radius-sm);
  background: #fff;
  color: var(--hs-navy);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--hs-trans);
}
.hs-pagination .page-numbers:hover,
.hs-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers:hover,
.woocommerce-pagination .page-numbers.current {
  background: var(--hs-navy);
  color: #fff;
  border-color: var(--hs-navy);
}

/* ---------- 404 ---------- */
.hs-404 {
  padding: 80px 0;
  text-align: center;
  background: #fff;
}
.hs-404-inner { max-width: 780px; margin: 0 auto; }
.hs-404-title {
  font-size: clamp(5rem, 14vw, 9rem) !important;
  color: var(--hs-water) !important;
  line-height: 1;
  margin: 0 0 16px 0 !important;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.hs-404-subtitle {
  font-size: 1.5rem;
  color: var(--hs-navy);
  margin: 0 0 12px 0;
  font-weight: 700;
}
.hs-404-text {
  color: var(--hs-gray-500);
  font-size: 1.05rem;
  max-width: 520px;
  margin: 0 auto 32px auto;
}
.hs-404-search {
  max-width: 480px;
  margin: 0 auto 24px auto;
  display: flex;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: var(--hs-radius);
  padding: 6px;
}
.hs-404-search input {
  flex: 1;
  border: 0;
  padding: 12px 16px;
  font-size: 0.95rem;
  outline: none;
  background: transparent;
}
.hs-404-search button {
  background: var(--hs-water);
  color: #fff;
  border: 0;
  padding: 12px 22px;
  border-radius: var(--hs-radius-sm);
  font-weight: 700;
  cursor: pointer;
}
.hs-404-links {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 24px 0;
}
.hs-404-links a {
  padding: 10px 20px;
  border: 1px solid var(--hs-gray-300);
  border-radius: var(--hs-radius-sm);
  background: #fff;
  color: var(--hs-navy);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}
.hs-404-links a:hover { background: var(--hs-navy); color: #fff; border-color: var(--hs-navy); }
.hs-404-suggest { margin-top: 48px; }

/* ---------- POSTS GRID (blog / index) ---------- */
.hs-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 900px) { .hs-posts-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .hs-posts-grid { grid-template-columns: 1fr; } }

/* ---------- PRODUCTS GRID (usado en 404 y homes) ---------- */
.hs-products-grid, ul.products.hs-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 1100px) { .hs-products-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .hs-products-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 420px) { .hs-products-grid { grid-template-columns: 1fr; } }

/* ---------- UTILIDADES ---------- */
.hs-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.hs-hidden { display: none !important; }
.hs-text-center { text-align: center; }

/* ---------- ACCESIBILIDAD ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- CTA FINAL FOOTER ---------- */
.hs-cta-footer {
  background: linear-gradient(135deg, var(--hs-navy) 0%, var(--hs-navy-dark) 100%);
  color: #fff;
  padding: clamp(48px, 7vw, 88px) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hs-cta-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 100%, rgba(58, 164, 213, 0.3), transparent 60%);
  pointer-events: none;
}
.hs-cta-footer-inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
}
.hs-cta-footer h2 { color: #fff !important; font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 14px; }
.hs-cta-footer p { color: rgba(255, 255, 255, 0.85); font-size: 1.05rem; margin-bottom: 28px; }
.hs-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* Clases utilitarias para align de Gutenberg */
.alignwide { max-width: 1280px; margin-left: auto; margin-right: auto; }
.alignfull { max-width: 100vw; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }

/* End main.css */

/* =========================================================================
   HOME — HERO + SECTIONS
   ========================================================================= */

.hs-hero {
  position: relative;
  background: linear-gradient(135deg, var(--hs-navy) 0%, var(--hs-navy-dark) 100%);
  color: #fff;
  padding: clamp(48px, 8vw, 96px) 0;
  overflow: hidden;
}
.hs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 20%, rgba(58, 164, 213, 0.25), transparent 50%),
              radial-gradient(circle at 15% 80%, rgba(58, 164, 213, 0.15), transparent 50%);
  pointer-events: none;
}
.hs-hero-inner {
  position: relative;
  max-width: var(--hs-container);
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 900px) { .hs-hero-inner { grid-template-columns: 1fr; text-align: center; } }

.hs-hero-eyebrow {
  display: inline-block;
  background: rgba(58, 164, 213, 0.2);
  color: var(--hs-water);
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
  border: 1px solid rgba(58, 164, 213, 0.35);
}
.hs-hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: #fff;
  line-height: 1.1;
  margin: 0 0 20px 0;
  font-weight: 800;
}
.hs-hero h1 span { color: var(--hs-water); display: block; }
.hs-hero-subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.6;
  max-width: 560px;
  margin: 0 0 32px 0;
}
@media (max-width: 900px) { .hs-hero-subtitle { margin-left: auto; margin-right: auto; } }

.hs-hero-search {
  display: flex;
  background: #fff;
  border-radius: var(--hs-radius);
  padding: 6px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  max-width: 560px;
  margin-bottom: 24px;
}
@media (max-width: 900px) { .hs-hero-search { margin-left: auto; margin-right: auto; } }
.hs-hero-search input {
  flex: 1;
  border: 0;
  padding: 14px 18px;
  font-size: 1rem;
  outline: none;
  background: transparent;
  color: var(--hs-body);
}
.hs-hero-search button {
  background: var(--hs-water);
  color: #fff;
  border: 0;
  padding: 14px 24px;
  border-radius: var(--hs-radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background var(--hs-trans);
}
.hs-hero-search button:hover { background: var(--hs-water-dark); }

.hs-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 900px) { .hs-hero-ctas { justify-content: center; } }

.hs-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.hs-hero-stat .num {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--hs-water);
  line-height: 1;
  display: block;
}
.hs-hero-stat .lbl {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 6px;
  display: block;
}

.hs-hero-visual { position: relative; }
.hs-hero-visual img {
  border-radius: var(--hs-radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.hs-hero-placeholder {
  aspect-ratio: 4/3;
  width: 100%;
  border-radius: var(--hs-radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  background: linear-gradient(135deg, #2E5C8A, #16283A);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.25);
}
.hs-hero-visual-badge {
  position: absolute;
  bottom: 24px;
  left: -24px;
  background: #fff;
  color: var(--hs-navy);
  padding: 16px 22px;
  border-radius: var(--hs-radius);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  gap: 14px;
}
.hs-hero-visual-badge .ico {
  width: 44px;
  height: 44px;
  background: var(--hs-water-soft);
  color: var(--hs-navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hs-hero-visual-badge strong { display: block; font-size: 0.95rem; }
.hs-hero-visual-badge span { font-size: 0.78rem; color: var(--hs-gray-500); }
@media (max-width: 900px) { .hs-hero-visual-badge { left: 24px; } }

/* Benefits bar */
.hs-benefits { background: #fff; padding: 40px 0; border-bottom: 1px solid var(--hs-gray-100); }
.hs-benefits-inner {
  max-width: var(--hs-container);
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .hs-benefits-inner { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 480px) { .hs-benefits-inner { grid-template-columns: 1fr; } }
.hs-benefit { display: flex; align-items: center; gap: 14px; padding: 12px; }
.hs-benefit-ico {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  background: var(--hs-water-soft);
  color: var(--hs-water-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hs-benefit strong { display: block; color: var(--hs-navy); font-size: 0.95rem; margin-bottom: 3px; font-weight: 700; }
.hs-benefit span { display: block; color: var(--hs-gray-500); font-size: 0.82rem; line-height: 1.4; }

/* Sections */
.hs-section { padding: clamp(48px, 6vw, 80px) 0; }
.hs-section-alt { background: var(--hs-ice); }
.hs-section-inner {
  max-width: var(--hs-container);
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
}
.hs-section-header { text-align: center; margin-bottom: 48px; }
.hs-section-eyebrow {
  display: inline-block;
  color: var(--hs-water);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.hs-section-title { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 0 0 12px; font-weight: 800; }
.hs-section-lead { color: var(--hs-gray-500); font-size: 1.05rem; max-width: 640px; margin: 0 auto; line-height: 1.6; }
.hs-section-cta { text-align: center; margin-top: 32px; }

/* Categorías */
.hs-categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 1000px) { .hs-categories { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .hs-categories { grid-template-columns: 1fr; } }
.hs-cat-card {
  position: relative;
  display: block;
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: var(--hs-radius-lg);
  overflow: hidden;
  text-decoration: none !important;
  transition: all 0.3s ease;
  min-height: 280px;
}
.hs-cat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(33, 62, 92, 0.1) 0%, rgba(33, 62, 92, 0.85) 100%);
  z-index: 2;
}
.hs-cat-card img, .hs-cat-card-placeholder {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1;
  transition: transform 0.5s ease;
}
.hs-cat-card-placeholder { background: linear-gradient(135deg, var(--hs-water), var(--hs-navy)); }
.hs-cat-card-body {
  position: relative;
  z-index: 3;
  padding: 24px;
  color: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hs-cat-card-body h3 { color: #fff; font-size: 1.35rem; font-weight: 700; margin: 0 0 6px 0; }
.hs-cat-card-body p { color: rgba(255, 255, 255, 0.9); font-size: 0.88rem; margin: 0 0 12px 0; line-height: 1.5; }
.hs-cat-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  padding-top: 6px;
  border-top: 2px solid rgba(255, 255, 255, 0.3);
  width: fit-content;
  transition: all var(--hs-trans);
}
.hs-cat-card:hover img { transform: scale(1.05); }
.hs-cat-card:hover { transform: translateY(-5px); box-shadow: var(--hs-shadow-lg); border-color: var(--hs-water); }
.hs-cat-card:hover .hs-cat-card-cta { border-color: var(--hs-water); gap: 10px; }

/* About */
.hs-about { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .hs-about { grid-template-columns: 1fr; gap: 32px; } }
.hs-about-visual img, .hs-about-placeholder {
  border-radius: var(--hs-radius-lg);
  box-shadow: var(--hs-shadow-lg);
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.hs-about-placeholder { background: linear-gradient(135deg, var(--hs-gray-500), var(--hs-gray-700)); }
.hs-about-text h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 16px; }
.hs-about-text p { color: var(--hs-gray-700); font-size: 1rem; line-height: 1.7; margin-bottom: 16px; }
.hs-about-features { margin-top: 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.hs-about-feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--hs-gray-50);
  border-radius: var(--hs-radius-sm);
  border-left: 3px solid var(--hs-water);
  font-size: 0.9rem;
  color: var(--hs-navy);
  font-weight: 600;
}

/* Brands */
.hs-brands { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; align-items: center; }
@media (max-width: 900px) { .hs-brands { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 500px) { .hs-brands { grid-template-columns: repeat(2, 1fr); } }
.hs-brand {
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: var(--hs-radius);
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  transition: all var(--hs-trans);
  font-weight: 700;
  color: var(--hs-navy);
  letter-spacing: 0.02em;
  font-family: var(--hs-font-heading);
}
.hs-brand:hover { border-color: var(--hs-water); transform: translateY(-3px); box-shadow: var(--hs-shadow); }

/* Blog teaser */
.hs-blog-teaser { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .hs-blog-teaser { grid-template-columns: 1fr; } }
.hs-blog-card {
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: var(--hs-radius);
  overflow: hidden;
  transition: all var(--hs-trans);
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.hs-blog-card:hover { transform: translateY(-4px); box-shadow: var(--hs-shadow-lg); border-color: var(--hs-water); }
.hs-blog-card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.hs-blog-card-img-placeholder { background: linear-gradient(135deg, var(--hs-water), var(--hs-navy)); }
.hs-blog-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.hs-blog-card-cat {
  display: inline-block;
  background: var(--hs-water-soft);
  color: var(--hs-navy);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 30px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
  width: fit-content;
}
.hs-blog-card h3 { font-size: 1.1rem; color: var(--hs-navy); margin: 0 0 10px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.hs-blog-card-meta { color: var(--hs-gray-500); font-size: 0.8rem; margin-bottom: 10px; }
.hs-blog-card-excerpt { color: var(--hs-gray-700); font-size: 0.88rem; line-height: 1.55; margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hs-blog-card-readmore { color: var(--hs-water); font-weight: 700; font-size: 0.88rem; margin-top: auto; display: inline-flex; gap: 6px; align-items: center; }

/* End home CSS */

/* =========================================================================
   MEGA-NAV
   ========================================================================= */
.hs-mega-nav {
  background: #ffffff;
  border-bottom: 1px solid var(--hs-gray-200);
  box-shadow: var(--hs-shadow-sm);
  position: sticky;
  top: 70px;
  z-index: 600;
}
.hs-mega-nav-inner {
  max-width: var(--hs-container);
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 56px;
}
.hs-mega-nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 10px;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  margin-left: -10px;
}
.hs-mega-nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--hs-navy);
  border-radius: 2px;
  transition: all 0.2s ease;
}
.hs-mega-nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hs-mega-nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.hs-mega-nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hs-mega-nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}
.hs-mega-nav-item { position: static; }
.hs-mega-nav-item > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 16px 14px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--hs-gray-700);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  line-height: 1;
}
.hs-mega-nav-item > a:hover,
.hs-mega-nav-item:hover > a,
.hs-mega-nav-item:focus-within > a { color: var(--hs-navy); border-bottom-color: var(--hs-water); }
.hs-mega-nav-item.is-highlight > a { background: var(--hs-water-soft); color: var(--hs-navy); border-radius: 6px; margin: 0 4px; }
.hs-mega-nav-item.is-highlight > a:hover { background: var(--hs-water); color: #fff; border-bottom-color: transparent; }
.hs-nav-arrow { font-size: 0.7rem; color: var(--hs-gray-500); transition: transform 0.2s ease; }
.hs-mega-nav-item:hover .hs-nav-arrow, .hs-mega-nav-item:focus-within .hs-nav-arrow { transform: rotate(180deg); color: var(--hs-navy); }

.hs-mega-nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--hs-navy);
  color: #fff !important;
  padding: 10px 18px;
  border-radius: var(--hs-radius-sm);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  transition: background 0.15s ease;
  white-space: nowrap;
}
.hs-mega-nav-phone:hover { background: var(--hs-navy-dark); }
.hs-mega-nav-phone svg { color: var(--hs-water); }

/* Mega panel */
.hs-mega-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-top: 1px solid var(--hs-gray-200);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  z-index: 599;
  pointer-events: none;
}
.hs-mega-nav-item.has-mega:hover .hs-mega-panel,
.hs-mega-nav-item.has-mega:focus-within .hs-mega-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
  pointer-events: auto;
}
.hs-mega-panel-inner { max-width: var(--hs-container); margin: 0 auto; padding: 28px clamp(16px, 3vw, 32px); }
.hs-mega-panel-grid { display: grid; grid-template-columns: 1.2fr 1.5fr 1fr; gap: 32px; }

.hs-mega-col-title {
  font-size: 0.72rem;
  color: var(--hs-water);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  margin: 0 0 14px 0 !important;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hs-gray-200);
}
.hs-mega-col-subcats ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
.hs-mega-col-subcats li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  color: var(--hs-body);
  text-decoration: none;
  font-size: 0.88rem;
  border-radius: 6px;
  transition: all 0.15s ease;
  font-weight: 500;
}
.hs-mega-col-subcats li a em { color: var(--hs-gray-500); font-size: 0.72rem; font-style: normal; font-weight: 600; background: var(--hs-gray-100); padding: 2px 8px; border-radius: 20px; margin-left: 8px; }
.hs-mega-col-subcats li a:hover { background: var(--hs-water-soft); color: var(--hs-navy); }
.hs-mega-col-subcats li a:hover em { background: #fff; color: var(--hs-navy); }

.hs-mega-col-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  color: var(--hs-water);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
}
.hs-mega-col-all:hover { color: var(--hs-water-dark); gap: 10px; }

.hs-mega-prod { display: flex; gap: 12px; padding: 8px; border-radius: 8px; text-decoration: none; color: inherit; margin-bottom: 4px; transition: background 0.15s ease; align-items: center; }
.hs-mega-prod:hover { background: var(--hs-gray-50); }
.hs-mega-prod img { width: 56px; height: 56px; object-fit: contain; background: var(--hs-gray-50); border-radius: 6px; padding: 4px; flex-shrink: 0; }
.hs-mega-prod-name { display: block; font-size: 0.85rem; color: var(--hs-body); font-weight: 600; line-height: 1.3; margin-bottom: 2px; }
.hs-mega-prod-price { display: block; font-size: 0.82rem; color: var(--hs-navy); font-weight: 700; }
.hs-mega-empty { color: var(--hs-gray-500); font-size: 0.85rem; margin: 0; }

.hs-mega-col-promo {
  position: relative;
  background-color: var(--hs-navy);
  background-size: cover;
  background-position: center;
  border-radius: var(--hs-radius);
  min-height: 180px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: #fff;
}
.hs-mega-col-promo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(33, 62, 92, 0.2) 0%, rgba(33, 62, 92, 0.9) 100%);
}
.hs-mega-promo-body { position: relative; padding: 20px; width: 100%; }
.hs-mega-promo-body h4 { color: #fff !important; font-size: 1.1rem; margin: 0 0 6px 0 !important; font-weight: 700; }
.hs-mega-promo-body p { color: rgba(255, 255, 255, 0.85); font-size: 0.82rem; margin: 0 0 10px 0; line-height: 1.45; }
.hs-mega-promo-cta { display: inline-flex; align-items: center; gap: 6px; color: var(--hs-water); font-weight: 700; font-size: 0.85rem; text-decoration: none; }
.hs-mega-promo-cta:hover { color: #fff; gap: 10px; }

/* Mobile */
@media (max-width: 1024px) {
  .hs-mega-nav-toggle { display: flex; }
  .hs-mega-nav-phone { margin-left: auto; padding: 8px 14px; font-size: 0.82rem; }
  .hs-mega-nav-list {
    position: fixed;
    top: calc(56px + 56px);
    left: 0; right: 0; bottom: 0;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    gap: 0;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    z-index: 998;
  }
  .hs-mega-nav-list.is-open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,0.15); }
  .hs-mega-nav-item { border-bottom: 1px solid var(--hs-gray-100); }
  .hs-mega-nav-item > a { padding: 14px 12px; border-bottom: 0; font-size: 1rem; justify-content: space-between; width: 100%; }
  .hs-mega-panel { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border-top: 0; pointer-events: auto; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
  .hs-mega-nav-item.mobile-open .hs-mega-panel { max-height: 1200px; }
  .hs-mega-panel-inner { padding: 8px 0 16px; }
  .hs-mega-panel-grid { grid-template-columns: 1fr; gap: 16px; }
  .hs-mega-col-promo { display: none; }
}

/* =========================================================================
   PAGE genérica (contacto, legal, etc.)
   ========================================================================= */
.hs-page { padding: clamp(24px, 4vw, 56px) 0; }
.hs-page-inner { background: #fff; }
.hs-page-header { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--hs-gray-200); }
.hs-page-title { margin: 0; color: var(--hs-navy); font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.15; }
.hs-page-lead { color: var(--hs-gray-500); font-size: 1.05rem; margin-top: 10px; }
.hs-page-thumbnail { border-radius: var(--hs-radius); overflow: hidden; margin-bottom: 24px; }
.hs-page-thumbnail img { width: 100%; height: auto; max-height: 440px; object-fit: cover; }
.hs-page-content { font-size: 1.05rem; line-height: 1.7; color: var(--hs-gray-700); }
.hs-page-content h2 { font-size: 1.55rem; margin: 1.8em 0 0.7em; color: var(--hs-navy); position: relative; padding-left: 16px; }
.hs-page-content h2::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; background: var(--hs-water); border-radius: 2px; }
.hs-page-content h3 { font-size: 1.25rem; color: var(--hs-navy); margin: 1.5em 0 0.6em; }
.hs-page-content a { color: var(--hs-water-dark); text-decoration: underline; text-decoration-color: rgba(58,164,213,0.4); }
.hs-page-content ul li::marker { color: var(--hs-water); }
.hs-page-content blockquote { border-left: 4px solid var(--hs-water); padding: 12px 24px; margin: 24px 0; background: var(--hs-ice); border-radius: 0 var(--hs-radius-sm) var(--hs-radius-sm) 0; font-style: italic; }

/* End main.css extras */

/* =========================================================================
   v1.1 — FIXES POST-AUDIT PRODUCCIÓN 2026-04
   Parches agresivos para problemas detectados en hidrosuministros.es
   ========================================================================= */

/* ---------- LOGO: texto limpio ---------- */
body.hs-theme .hs-logo { align-items: flex-start; gap: 4px; }
body.hs-theme .hs-logo-text {
  font-family: var(--hs-font-heading);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  color: var(--hs-navy);
  line-height: 1;
  display: inline-block;
  white-space: nowrap;
}
body.hs-theme .hs-logo-dot { color: var(--hs-water); font-weight: 700; }
body.hs-theme .hs-footer .hs-logo-text { color: #fff; }
body.hs-theme .hs-footer .hs-logo-dot { color: var(--hs-water); }
body.hs-theme .hs-logo-tagline { margin-top: 4px; font-size: 0.6rem; letter-spacing: 0.32em; text-transform: uppercase; }

/* Por si WP inyecta el site name en un <h1> dentro del logo (bug común con BeTheme remanente) */
body.hs-theme .hs-header .hs-logo h1,
body.hs-theme .hs-header .hs-logo .site-title {
  all: unset;
  font-family: var(--hs-font-heading);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  color: var(--hs-navy);
}

/* ---------- GRID PRODUCTOS: forzar con especificidad altísima ---------- */
body.hs-theme ul.products,
body.hs-theme .woocommerce ul.products,
body.hs-theme .woocommerce-page ul.products,
body.hs-theme .products.columns-1,
body.hs-theme .products.columns-2,
body.hs-theme .products.columns-3,
body.hs-theme .products.columns-4,
body.hs-theme .products.columns-5,
body.hs-theme .products.columns-6,
body.hs-theme .products.columns-8 {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
  padding: 0 !important;
  margin: 0 0 32px 0 !important;
  list-style: none !important;
}
body.hs-theme .hs-shop-main ul.products,
body.hs-theme.archive ul.products,
body.hs-theme.tax-product_cat ul.products {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@media (max-width: 1100px) {
  body.hs-theme ul.products, body.hs-theme .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  body.hs-theme .hs-shop-main ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
  body.hs-theme ul.products, body.hs-theme .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
}
@media (max-width: 420px) {
  body.hs-theme ul.products, body.hs-theme .woocommerce ul.products { grid-template-columns: 1fr !important; }
}

body.hs-theme ul.products li.product,
body.hs-theme .woocommerce ul.products li.product {
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  background: #fff !important;
  border: 1px solid var(--hs-gray-200) !important;
  border-radius: var(--hs-radius) !important;
  padding: 14px !important;
  box-shadow: var(--hs-shadow-sm);
  transition: all var(--hs-trans);
  list-style: none !important;
}
body.hs-theme ul.products li.product::before,
body.hs-theme ul.products li.product::marker { content: none !important; display: none !important; }
body.hs-theme ul.products li.product:hover { transform: translateY(-3px); box-shadow: var(--hs-shadow-lg); border-color: var(--hs-water); }

/* Imagen */
body.hs-theme ul.products li.product a img,
body.hs-theme ul.products li.product img.attachment-woocommerce_thumbnail {
  width: 100% !important;
  height: 200px !important;
  max-width: 100%;
  object-fit: contain !important;
  background: var(--hs-gray-50);
  border-radius: var(--hs-radius-sm);
  padding: 8px;
  margin: 0 0 10px 0 !important;
  display: block;
}

/* Título */
body.hs-theme ul.products li.product .woocommerce-loop-product__title,
body.hs-theme ul.products li.product h2,
body.hs-theme ul.products li.product h3,
body.hs-theme ul.products li.product h4 {
  font-size: 0.95rem !important;
  line-height: 1.35 !important;
  color: var(--hs-body) !important;
  font-weight: 600 !important;
  margin: 8px 0 4px 0 !important;
  padding: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.7em !important;
  font-family: var(--hs-font-body) !important;
  letter-spacing: 0 !important;
  white-space: normal;
  word-break: break-word;
  hyphens: auto;
}

/* SKU / meta pequeña */
body.hs-theme ul.products li.product .hs-card-sku,
body.hs-theme ul.products li.product .sku {
  font-size: 0.72rem !important;
  color: var(--hs-gray-500) !important;
  margin: 2px 0 4px 0 !important;
  font-family: var(--hs-font-mono) !important;
  display: block;
}

/* Precio */
body.hs-theme ul.products li.product .price {
  color: var(--hs-navy) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  margin: 4px 0 !important;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
body.hs-theme ul.products li.product .price del {
  color: var(--hs-gray-400) !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
}
body.hs-theme ul.products li.product .price ins {
  color: var(--hs-red) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  background: transparent !important;
}
body.hs-theme ul.products li.product .price .woocommerce-price-suffix,
body.hs-theme ul.products li.product .price + *:not(.button) {
  font-size: 0.7rem !important;
  color: var(--hs-gray-500) !important;
  font-weight: 400 !important;
}

/* ---------- BADGES ---------- */
/* "¡Oferta!" - quitar bullet de lista y poner círculo rojo top-left */
body.hs-theme ul.products li.product > ul,
body.hs-theme ul.products li.product > .wc-onsale-wrapper {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.hs-theme span.onsale,
body.hs-theme ul.products li.product span.onsale,
body.hs-theme ul.products li.product > ul > li {
  list-style: none !important;
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  background: var(--hs-red) !important;
  color: #fff !important;
  border-radius: 50% !important;
  width: 46px !important;
  height: 46px !important;
  line-height: 46px !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 4;
  box-shadow: 0 3px 8px rgba(239, 68, 68, 0.35);
  text-transform: none;
  list-style-position: inside;
}
body.hs-theme ul.products li.product > ul > li::before,
body.hs-theme ul.products li.product > ul > li::marker { content: none !important; }

/* Stock badge - verde top-right */
body.hs-theme ul.products li.product .hs-stock-badge,
body.hs-theme ul.products li.product .stock.in-stock,
body.hs-theme ul.products li.product .stock {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  background: var(--hs-green) !important;
  color: #fff !important;
  padding: 4px 10px !important;
  font-size: 0.68rem !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  z-index: 3;
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* Botón "Añadir al carrito" en tarjetas */
body.hs-theme ul.products li.product .button,
body.hs-theme ul.products li.product .add_to_cart_button,
body.hs-theme ul.products li.product a.button {
  width: 100% !important;
  padding: 11px 14px !important;
  font-size: 0.88rem !important;
  margin-top: auto !important;
  background: var(--hs-water) !important;
  color: #fff !important;
  border-radius: var(--hs-radius-sm) !important;
  font-weight: 700 !important;
  text-align: center;
  display: block;
  box-shadow: 0 2px 6px rgba(58, 164, 213, 0.2);
}
body.hs-theme ul.products li.product .button:hover,
body.hs-theme ul.products li.product .add_to_cart_button:hover {
  background: var(--hs-water-dark) !important;
  transform: translateY(-1px);
}
body.hs-theme ul.products li.product .added_to_cart { display: block; text-align: center; margin-top: 8px; color: var(--hs-green); font-weight: 600; font-size: 0.85rem; }

/* ---------- FOOTER: quitar bullets ---------- */
body.hs-theme .hs-footer .hs-footer-menu,
body.hs-theme .hs-footer ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.hs-theme .hs-footer .hs-footer-menu li,
body.hs-theme .hs-footer ul li {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
body.hs-theme .hs-footer li::before,
body.hs-theme .hs-footer li::marker { content: none !important; }

/* Footer brand: logo texto bien en la columna 1 */
body.hs-theme .hs-footer .hs-logo--light { display: block; margin-bottom: 14px; }
body.hs-theme .hs-footer .hs-logo--light .hs-logo-text { font-size: 1.25rem; letter-spacing: 0.06em; color: #fff; }
body.hs-theme .hs-footer .hs-logo--light .hs-logo-tagline { display: block; color: rgba(255,255,255,0.6); font-size: 0.6rem; margin-top: 4px; }

/* ---------- HOME HERO: H1 tenía "Soluciones profesionales" cortado; asegurar que el span sea visible en columnas estrechas ---------- */
@media (max-width: 600px) {
  body.hs-theme .hs-hero h1 { font-size: 1.8rem !important; line-height: 1.15 !important; }
  body.hs-theme .hs-hero h1 span { font-size: 0.85em; }
}

/* ---------- Ocultar bot flotante de AI Engine en móvil (quita ruido visual) ---------- */
@media (max-width: 640px) {
  body.hs-theme #mwai-chatbot, body.hs-theme .mwai-window-theme { transform: scale(0.85); transform-origin: bottom left; opacity: 0.85; }
}

/* End v1.1 fixes */

/* =========================================================================
   v1.2 — FIX GRID: DIV wrapper woocommerce columns-N NO debe ser grid
   ========================================================================= */

/* El shortcode [products] genera: <div class="woocommerce columns-4"><ul class="products">…</ul></div>
   Mi regla anterior ".products.columns-4" matcheaba también ese DIV.
   Lo desactivamos explícitamente y hacemos que el UL ocupe width:100%. */
body.hs-theme .woocommerce.columns-1,
body.hs-theme .woocommerce.columns-2,
body.hs-theme .woocommerce.columns-3,
body.hs-theme .woocommerce.columns-4,
body.hs-theme .woocommerce.columns-5,
body.hs-theme .woocommerce.columns-6,
body.hs-theme div.woocommerce.columns-4,
body.hs-theme .hs-products-grid {
  display: block !important;
  grid-template-columns: none !important;
  width: 100% !important;
}

/* Asegurar que sólo UL.products es grid, no DIVs */
body.hs-theme div.products,
body.hs-theme div.columns-4:not(ul) {
  display: block !important;
  grid-template-columns: none !important;
}

/* Reforzar: UL.products OCUPA 100% dentro de su wrapper */
body.hs-theme ul.products {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}

/* Badges duplicados (EN STOCK verde + ¡Oferta! rojo) superpuestos:
   separarlos — stock a la derecha, onsale a la izquierda */
body.hs-theme ul.products li.product .hs-stock-badge,
body.hs-theme ul.products li.product > .stock,
body.hs-theme ul.products li.product p.stock {
  right: 14px !important;
  left: auto !important;
}
body.hs-theme ul.products li.product span.onsale {
  left: 14px !important;
  right: auto !important;
}

/* End v1.2 */

/* =========================================================================
   v1.3 — Marcas con estilo editorial + imagen hero/about con fallback CSS
   ========================================================================= */

body.hs-theme .hs-brand {
  flex-direction: column;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: var(--hs-radius);
  padding: 22px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  text-align: center;
  transition: all var(--hs-trans);
  cursor: default;
}
body.hs-theme .hs-brand:hover {
  border-color: var(--hs-water);
  transform: translateY(-4px);
  box-shadow: var(--hs-shadow);
}
body.hs-theme .hs-brand-name {
  font-family: var(--hs-font-heading);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  color: var(--hs-navy);
  line-height: 1;
  text-transform: uppercase;
}
body.hs-theme .hs-brand-tagline {
  font-size: 0.7rem;
  color: var(--hs-gray-500);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 2px;
  font-weight: 500;
}
body.hs-theme .hs-brand img { max-height: 44px; width: auto; filter: grayscale(0.2); transition: filter var(--hs-trans); }
body.hs-theme .hs-brand:hover img { filter: none; }

/* Si la imagen del hero falla, que el placeholder sea elegante */
body.hs-theme .hs-hero-visual img { aspect-ratio: 4/3; object-fit: cover; }
body.hs-theme .hs-hero-visual img[src=""] { display: none; }

/* Mejora visual de la lead description bajo títulos de sección */
body.hs-theme .hs-section-header .hs-section-lead { font-size: 1rem; margin-top: 4px; }

/* End v1.3 */

/* =========================================================================
   v2.0 — HOME NUEVA: AGUA ANIMADA + ANIMACIONES DINÁMICAS
   ========================================================================= */

/* ---------- SCROLL REVEAL ---------- */
.hs-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; transition-delay: var(--delay, 0s); }
.hs-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .hs-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- PULSE DOTS ---------- */
.hs-pulse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--hs-water); position: relative; margin-right: 6px; vertical-align: middle; }
.hs-pulse-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--hs-water); animation: hsPulseRing 2s ease-out infinite; }
@keyframes hsPulseRing { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(3); opacity: 0; } }
.hs-pulse-dot-red { background: var(--hs-red); } .hs-pulse-dot-red::after { background: var(--hs-red); }

/* ---------- GRADIENT TEXT ---------- */
.hs-gradient-text { background: linear-gradient(135deg, var(--hs-water) 0%, #7FCBEB 50%, var(--hs-water) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; animation: hsGradientSlide 4s ease-in-out infinite; }
@keyframes hsGradientSlide { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.hs-gradient-text-light { background: linear-gradient(135deg, #7FCBEB, #fff, #7FCBEB); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hsGradientSlide 4s ease-in-out infinite; display: inline-block; }

/* =========================================================================
   HERO v2 — ANIMATED WAVES
   ========================================================================= */
.hs-hero-v2 { position: relative; background: linear-gradient(135deg, #16283A 0%, #213E5C 50%, #2E5C8A 100%); color: #fff; padding: clamp(48px, 8vw, 96px) 0 120px; overflow: hidden; isolation: isolate; }

.hs-hero-waves { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hs-wave { position: absolute; left: 0; width: 200%; height: 100%; bottom: 0; animation: hsWaveMove 12s ease-in-out infinite; }
.hs-wave-1 { animation-duration: 14s; opacity: 0.7; }
.hs-wave-2 { animation-duration: 10s; animation-direction: reverse; opacity: 0.5; }
.hs-wave-3 { animation-duration: 18s; opacity: 0.4; }
@keyframes hsWaveMove { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-25%); } }

.hs-bubble { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6), rgba(58,164,213,0.2)); animation: hsBubbleFloat 8s ease-in infinite; opacity: 0; }
.hs-bubble-1 { left: 10%; bottom: 0; width: 14px; height: 14px; animation-delay: 0s; animation-duration: 10s; }
.hs-bubble-2 { left: 25%; bottom: 0; width: 8px; height: 8px; animation-delay: 2s; animation-duration: 9s; }
.hs-bubble-3 { left: 40%; bottom: 0; width: 18px; height: 18px; animation-delay: 1s; animation-duration: 12s; }
.hs-bubble-4 { left: 60%; bottom: 0; width: 10px; height: 10px; animation-delay: 3s; animation-duration: 11s; }
.hs-bubble-5 { left: 75%; bottom: 0; width: 16px; height: 16px; animation-delay: 4s; animation-duration: 13s; }
.hs-bubble-6 { left: 88%; bottom: 0; width: 12px; height: 12px; animation-delay: 5s; animation-duration: 10s; }
@keyframes hsBubbleFloat { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.8; transform: translateY(-90vh) translateX(var(--sway,20px)); } 100% { transform: translateY(-100vh) translateX(var(--sway,20px)); opacity: 0; } }

.hs-hero-v2-inner { position: relative; z-index: 2; max-width: var(--hs-container); margin: 0 auto; padding: 0 clamp(16px,3vw,32px); display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 960px) { .hs-hero-v2-inner { grid-template-columns: 1fr; gap: 40px; text-align: center; } }

.hs-hero-v2-eyebrow { display: inline-flex; align-items: center; background: rgba(58,164,213,0.15); color: #fff; padding: 8px 18px; border-radius: 40px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 24px; border: 1px solid rgba(58,164,213,0.4); backdrop-filter: blur(8px); }

.hs-hero-v2-title { font-size: clamp(2.2rem, 5.5vw, 4rem) !important; color: #fff !important; line-height: 1.05 !important; margin: 0 0 20px !important; font-weight: 800; letter-spacing: -0.02em; }
.hs-hero-v2-title-line2 { display: block; color: rgba(255,255,255,0.72); font-weight: 600; font-size: 0.85em; margin-top: 4px; }

.hs-hero-v2-text-lead { color: rgba(255,255,255,0.82); font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.6; max-width: 560px; margin: 0 0 28px; }
@media (max-width: 960px) { .hs-hero-v2-text-lead { margin-left: auto; margin-right: auto; } }

/* Search bar del hero */
.hs-hero-v2-search { display: flex; background: #fff; border-radius: 14px; padding: 6px; box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.1); max-width: 620px; margin-bottom: 20px; align-items: center; position: relative; }
.hs-hero-v2-search-icon { color: var(--hs-gray-400); margin-left: 12px; flex-shrink: 0; }
.hs-hero-v2-search input { flex: 1; border: 0; padding: 14px 16px; font-size: 0.98rem; outline: none; background: transparent; color: var(--hs-body); min-width: 0; }
.hs-hero-v2-search input::placeholder { color: var(--hs-gray-400); }
.hs-hero-v2-search button { background: var(--hs-navy); color: #fff; border: 0; padding: 14px 22px; border-radius: 10px; font-weight: 700; cursor: pointer; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s; }
.hs-hero-v2-search button:hover { background: var(--hs-navy-dark); transform: translateX(2px); }
@media (max-width: 960px) { .hs-hero-v2-search { margin-left: auto; margin-right: auto; } }

.hs-hero-v2-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }
@media (max-width: 960px) { .hs-hero-v2-ctas { justify-content: center; } }

.hs-btn-xl { padding: 15px 28px !important; font-size: 1rem !important; border-radius: 10px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center; gap: 10px; position: relative; overflow: hidden; }
.hs-btn-xl::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(255,255,255,0.3) 0%, transparent 70%); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.hs-btn-xl:hover::after { opacity: 1; }

.hs-btn-ghost-light { background: transparent !important; color: #fff !important; border: 2px solid rgba(255,255,255,0.3) !important; box-shadow: none !important; backdrop-filter: blur(8px); }
.hs-btn-ghost-light:hover { background: rgba(255,255,255,0.1) !important; border-color: #fff !important; }

.hs-btn-yellow { background: #F5B841 !important; color: #16283A !important; box-shadow: 0 4px 16px rgba(245,184,65,0.4) !important; }
.hs-btn-yellow:hover { background: #EAAC2D !important; color: #16283A !important; transform: translateY(-2px); }

.hs-btn-sat { background: var(--hs-water) !important; color: #fff !important; }
.hs-btn-sat:hover { background: var(--hs-water-dark) !important; }

.hs-hero-v2-trust { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 960px) { .hs-hero-v2-trust { justify-content: center; } }
.hs-trust-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.9); padding: 6px 14px; border-radius: 30px; font-size: 0.82rem; font-weight: 500; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.12); }
.hs-trust-chip span { color: var(--hs-water); font-weight: 700; }

/* Visual card flotante */
.hs-hero-v2-visual { position: relative; }
.hs-hero-v2-card { background: #fff; border-radius: 24px; padding: 20px; box-shadow: 0 30px 80px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.1); position: relative; z-index: 2; animation: hsCardFloat 6s ease-in-out infinite; }
@keyframes hsCardFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hs-hero-v2-card-top { display: flex; justify-content: space-between; margin-bottom: 14px; }
.hs-hero-v2-card-badge { background: var(--hs-navy); color: #fff; font-size: 0.7rem; padding: 4px 10px; border-radius: 20px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.hs-hero-v2-card-stock { display: inline-flex; align-items: center; gap: 6px; color: var(--hs-green); font-size: 0.82rem; font-weight: 700; }
.hs-stock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hs-green); animation: hsStockPulse 1.5s infinite; }
.hs-hero-v2-card-img { background: var(--hs-gray-50); border-radius: 16px; padding: 18px; margin-bottom: 14px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.hs-hero-v2-card-img img { max-width: 85%; max-height: 200px; object-fit: contain; }
.hs-hero-v2-card-body { padding: 0 4px; }
.hs-hero-v2-card-name { color: var(--hs-navy); font-weight: 700; font-size: 1rem; margin: 0 0 4px; }
.hs-hero-v2-card-desc { color: var(--hs-gray-500); font-size: 0.85rem; margin: 0 0 10px; }
.hs-hero-v2-card-price { display: flex; gap: 10px; align-items: baseline; }
.hs-price-old { color: var(--hs-gray-400); text-decoration: line-through; font-size: 0.9rem; }
.hs-price-new { color: var(--hs-water-dark); font-weight: 800; font-size: 1.35rem; }

.hs-hero-v2-floating-badge { position: absolute; background: #fff; color: var(--hs-navy); padding: 10px 16px; border-radius: 14px; box-shadow: 0 15px 40px rgba(0,0,0,0.25); display: flex; align-items: center; gap: 10px; z-index: 3; animation: hsCardFloat 6s ease-in-out infinite; }
.hs-hero-v2-floating-badge svg { color: var(--hs-water); }
.hs-hero-v2-floating-badge strong { display: block; font-size: 0.88rem; color: var(--hs-navy); }
.hs-hero-v2-floating-badge span { display: block; font-size: 0.72rem; color: var(--hs-gray-500); }
.hs-floating-1 { top: 10%; left: -8%; animation-delay: -1s; }
.hs-floating-2 { bottom: 12%; right: -8%; animation-delay: -3s; }
@media (max-width: 960px) { .hs-floating-1, .hs-floating-2 { left: auto; right: auto; position: static; margin: 10px; display: inline-flex; animation: none; } }

/* Stats del hero */
.hs-hero-v2-stats { position: relative; z-index: 2; max-width: var(--hs-container); margin: 60px auto 0; padding: 0 clamp(16px,3vw,32px); }
.hs-hero-v2-stats-inner { background: rgba(255,255,255,0.06); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.12); border-radius: 24px; padding: 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 800px) { .hs-hero-v2-stats-inner { grid-template-columns: 1fr 1fr; gap: 18px; padding: 24px; } }
.hs-stat { text-align: center; }
.hs-stat-num { font-family: var(--hs-font-heading); font-weight: 800; font-size: clamp(1.8rem,3.5vw,2.8rem); color: var(--hs-water); line-height: 1; display: inline-block; letter-spacing: -0.02em; }
.hs-stat-plus { font-family: var(--hs-font-heading); font-weight: 800; font-size: clamp(1.2rem,2.5vw,1.8rem); color: var(--hs-water); }
.hs-stat-lbl { display: block; color: rgba(255,255,255,0.72); margin-top: 6px; font-size: 0.82rem; line-height: 1.35; }

/* =========================================================================
   DEALS STRIP (scroll horizontal)
   ========================================================================= */
.hs-deals-strip { padding: 60px 0 40px; background: linear-gradient(180deg, #fff 0%, var(--hs-ice) 100%); }
.hs-deals-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; gap: 20px; flex-wrap: wrap; }
.hs-deals-head h2 { font-size: clamp(1.6rem,2.5vw,2.2rem); margin: 8px 0 0; }
.hs-eyebrow-red { color: var(--hs-red) !important; }
.hs-link-arrow { color: var(--hs-water-dark); font-weight: 700; font-size: 0.95rem; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.hs-link-arrow:hover { color: var(--hs-navy); gap: 10px; }

.hs-scroll-strip { position: relative; }
.hs-scroll-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 0; box-shadow: var(--hs-shadow); color: var(--hs-navy); font-size: 1.6rem; line-height: 0; font-weight: 400; cursor: pointer; z-index: 5; transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
.hs-scroll-btn:hover { background: var(--hs-navy); color: #fff; }
.hs-scroll-prev { left: -20px; }
.hs-scroll-next { right: -20px; }
@media (max-width: 800px) { .hs-scroll-btn { display: none; } }

.hs-scroll-strip-track { overflow-x: auto; scroll-behavior: smooth; padding: 10px 0; -ms-overflow-style: none; scrollbar-width: none; }
.hs-scroll-strip-track::-webkit-scrollbar { display: none; }
.hs-scroll-strip-track .products, .hs-scroll-strip-track ul.products {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 16px !important;
  padding: 4px !important;
  margin: 0 !important;
  list-style: none !important;
  flex-wrap: nowrap !important;
}
.hs-scroll-strip-track ul.products li.product { flex: 0 0 240px !important; scroll-snap-align: start; }

/* =========================================================================
   ESPA BAND v2
   ========================================================================= */
.hs-espa-band-v2 { position: relative; padding: 80px 0; background: #fff; overflow: hidden; }
.hs-water-decor { position: absolute; top: -1px; left: 0; right: 0; height: 120px; pointer-events: none; }
.hs-water-svg { width: 100%; height: 100%; }
.hs-espa-head { text-align: center; max-width: 760px; margin: 0 auto 40px; position: relative; z-index: 2; }
.hs-espa-head h2 { font-size: clamp(2rem, 3.5vw, 2.8rem); margin: 10px 0 14px; }

.hs-espa-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 48px; }
.hs-espa-chip { display: inline-flex; align-items: center; padding: 10px 20px; background: var(--hs-gray-50); border: 1px solid var(--hs-gray-200); border-radius: 30px; color: var(--hs-navy); font-weight: 700; font-size: 0.92rem; text-decoration: none; transition: all 0.2s; letter-spacing: 0.02em; }
.hs-espa-chip:hover { background: var(--hs-water); color: #fff; border-color: var(--hs-water); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(58,164,213,0.3); }

/* =========================================================================
   SAT BAND v2 CON RIPPLES
   ========================================================================= */
.hs-sat-band-v2 { position: relative; background: linear-gradient(135deg, #16283A 0%, #213E5C 50%, #2589B7 100%); color: #fff; padding: clamp(60px, 8vw, 100px) 0; overflow: hidden; isolation: isolate; }
.hs-sat-ripples { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hs-ripple { position: absolute; border: 2px solid rgba(58,164,213,0.3); border-radius: 50%; animation: hsRippleExpand 5s ease-out infinite; }
.hs-ripple-1 { top: 20%; left: 10%; width: 200px; height: 200px; animation-delay: 0s; }
.hs-ripple-2 { top: 60%; left: 50%; width: 300px; height: 300px; animation-delay: 1.5s; }
.hs-ripple-3 { top: 30%; right: 8%; width: 250px; height: 250px; animation-delay: 3s; }
@keyframes hsRippleExpand { 0% { transform: scale(0.3); opacity: 0.8; } 100% { transform: scale(1.5); opacity: 0; } }

.hs-sat-band-v2-inner { position: relative; z-index: 2; max-width: var(--hs-container); margin: 0 auto; padding: 0 clamp(16px,3vw,32px); display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .hs-sat-band-v2-inner { grid-template-columns: 1fr; } }

.hs-sat-text h2 { font-size: clamp(1.9rem, 3.5vw, 2.8rem); color: #fff !important; margin: 12px 0 16px; line-height: 1.15; }
.hs-sat-text p { color: rgba(255,255,255,0.82); font-size: 1.05rem; max-width: 540px; margin-bottom: 28px; line-height: 1.6; }
.hs-eyebrow-light { color: var(--hs-water) !important; }

.hs-sat-features { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 32px; max-width: 540px; }
.hs-sat-feature { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; backdrop-filter: blur(8px); }
.hs-sat-feature-ico { flex-shrink: 0; width: 40px; height: 40px; background: rgba(58,164,213,0.2); color: var(--hs-water); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.hs-sat-feature strong { display: block; color: #fff; font-size: 0.92rem; line-height: 1.2; margin-bottom: 2px; }
.hs-sat-feature span { display: block; color: rgba(255,255,255,0.65); font-size: 0.78rem; }
@media (max-width: 500px) { .hs-sat-features { grid-template-columns: 1fr; } }

.hs-sat-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

.hs-sat-visual-card { background: rgba(255,255,255,0.08); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.14); border-radius: 24px; padding: 32px 28px; text-align: center; }
.hs-sat-visual-icon { color: var(--hs-water); margin: 0 auto 16px; display: block; }
.hs-sat-visual-num { font-family: var(--hs-font-heading); font-weight: 800; font-size: clamp(2.5rem, 5vw, 3.8rem); color: #fff; line-height: 1; }
.hs-sat-visual-num span { color: var(--hs-water); }
.hs-sat-visual-lbl { color: rgba(255,255,255,0.7); margin-top: 4px; font-size: 0.92rem; }
.hs-sat-visual-divider { height: 1px; background: rgba(255,255,255,0.12); margin: 24px 0; }
.hs-sat-visual-brands { display: flex; gap: 12px; justify-content: center; }
.hs-sat-brand-oficial { padding: 12px 18px; background: rgba(255,255,255,0.08); border-radius: 12px; text-align: center; flex: 1; }
.hs-sat-brand-name { display: block; font-family: var(--hs-font-heading); font-weight: 800; color: #fff; font-size: 1.1rem; letter-spacing: 0.04em; }
.hs-sat-brand-tag { display: block; color: var(--hs-water); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; margin-top: 2px; }

/* =========================================================================
   INJECTA BAND
   ========================================================================= */
.hs-injecta-band { padding: 80px 0; }
.hs-injecta-band h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); }

/* =========================================================================
   MEASUREMENT STRIP (más sutil)
   ========================================================================= */
.hs-measurement-strip { padding: 60px 0; background: #fff; border-top: 1px solid var(--hs-gray-100); }
.hs-section-header-compact { margin-bottom: 28px !important; }
.hs-section-header-compact h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin: 6px 0 8px; }
.hs-section-header-compact .hs-section-lead { font-size: 0.95rem; }

/* =========================================================================
   TESTIMONIALS
   ========================================================================= */
.hs-testimonials { padding: 80px 0; background: var(--hs-ice); }
.hs-rating-global { display: flex; gap: 12px; justify-content: center; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.hs-stars { color: #F5B841; font-size: 1.3rem; letter-spacing: 0.06em; }
.hs-rating-num { font-weight: 800; color: var(--hs-navy); font-size: 1.1rem; }
.hs-rating-count { color: var(--hs-gray-500); font-size: 0.88rem; }

.hs-testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
@media (max-width: 900px) { .hs-testimonials-grid { grid-template-columns: 1fr; } }

.hs-testimonial { background: #fff; border-radius: 20px; padding: 28px; border: 1px solid var(--hs-gray-200); box-shadow: var(--hs-shadow-sm); position: relative; transition: all 0.3s; }
.hs-testimonial:hover { transform: translateY(-6px); box-shadow: var(--hs-shadow-lg); border-color: var(--hs-water); }
.hs-testimonial-stars { color: #F5B841; font-size: 1.05rem; letter-spacing: 0.04em; margin-bottom: 12px; }
.hs-testimonial-quote { position: relative; margin: 0 0 18px; font-size: 0.98rem; line-height: 1.65; color: var(--hs-gray-700); padding: 0; border: 0; background: transparent; font-style: normal; }
.hs-testimonial-quote-mark { position: absolute; top: -10px; left: -4px; color: var(--hs-water-soft); z-index: 0; }
.hs-testimonial-quote > svg + * { position: relative; z-index: 1; }
.hs-testimonial-author { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--hs-gray-100); }
.hs-testimonial-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--hs-water) 0%, var(--hs-navy) 100%); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; flex-shrink: 0; }
.hs-testimonial-author strong { display: block; color: var(--hs-navy); font-size: 0.92rem; }
.hs-testimonial-author span { display: block; color: var(--hs-gray-500); font-size: 0.8rem; }

/* =========================================================================
   BRANDS SHOWCASE (ESPA + Injecta grandes)
   ========================================================================= */
.hs-brands-v2 { padding: 80px 0; }
.hs-brands-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 40px; }
@media (max-width: 800px) { .hs-brands-showcase { grid-template-columns: 1fr; } }

/* Scoped a .hs-brands-showcase para evitar colisión con el inline span .hs-brand-big
   usado como énfasis tipográfico en títulos (espa-featured, etc). */
.hs-brands-showcase > .hs-brand-big { background: #fff; border: 2px solid var(--hs-gray-200); border-radius: 20px; padding: 36px 32px; transition: all 0.3s; position: relative; overflow: hidden; }
.hs-brands-showcase > .hs-brand-big::before { content: ""; position: absolute; top: -50%; right: -30%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(58,164,213,0.12), transparent 70%); pointer-events: none; transition: transform 0.5s; }
.hs-brands-showcase > .hs-brand-big:hover { border-color: var(--hs-water); transform: translateY(-6px); box-shadow: var(--hs-shadow-lg); }
.hs-brands-showcase > .hs-brand-big:hover::before { transform: scale(1.3); }
.hs-brand-big-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.hs-brand-big-name { font-family: var(--hs-font-heading); font-weight: 800; font-size: 2.4rem; color: var(--hs-navy); letter-spacing: 0.02em; }
.hs-brand-big-badge { background: rgba(16,185,129,0.12); color: var(--hs-green); padding: 6px 14px; border-radius: 20px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.hs-brand-big-desc { color: var(--hs-gray-700); line-height: 1.6; margin-bottom: 18px; position: relative; }
.hs-brand-big-series { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; position: relative; }
.hs-brand-big-series li { padding: 6px 12px; background: var(--hs-ice); color: var(--hs-navy); border-radius: 20px; font-size: 0.82rem; font-weight: 600; }
.hs-brand-big-cta { color: var(--hs-water-dark); font-weight: 700; display: inline-flex; gap: 6px; align-items: center; font-size: 0.95rem; position: relative; }
.hs-brand-big-cta:hover { color: var(--hs-navy); gap: 10px; }

/* =========================================================================
   NEWSLETTER / CTA FINAL
   ========================================================================= */
.hs-newsletter { position: relative; background: linear-gradient(135deg, #213E5C, #16283A); color: #fff; padding: clamp(56px,7vw,88px) 0; overflow: hidden; }
.hs-newsletter-waves { position: absolute; inset: 0; pointer-events: none; }
.hs-newsletter-waves svg { position: absolute; bottom: 0; width: 100%; height: 100px; animation: hsWaveMove 14s ease-in-out infinite; }
.hs-newsletter-waves svg:first-child { animation-duration: 18s; animation-direction: reverse; }
.hs-newsletter-inner { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; padding: 0 clamp(16px,3vw,32px); display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; }
@media (max-width: 800px) { .hs-newsletter-inner { grid-template-columns: 1fr; text-align: center; } }
.hs-newsletter-text h2 { color: #fff !important; font-size: clamp(1.8rem,3vw,2.4rem); margin: 10px 0 12px; }
.hs-newsletter-text p { color: rgba(255,255,255,0.78); font-size: 1rem; line-height: 1.6; margin: 0; }
.hs-newsletter-actions { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 800px) { .hs-newsletter-actions { align-items: center; } }

/* =========================================================================
   PRODUCTS GRID en contexto dark / v2 ajustes
   ========================================================================= */
body.hs-theme ul.products li.product { border-radius: 16px !important; transition: all 0.3s !important; }
body.hs-theme ul.products li.product:hover { transform: translateY(-6px) !important; box-shadow: 0 20px 40px rgba(33,62,92,0.18) !important; }

/* Mayor separación para secciones generales */
body.hs-theme .hs-section { padding: clamp(60px,7vw,90px) 0; }

/* End v2.0 */

/* =========================================================================
   v2.1 — HOTFIX CAOS
   ========================================================================= */

/* Fix 1: el HERO debe ser VISIBLE desde el primer momento (sin depender del IntersectionObserver) */
body.hs-theme .hs-hero-v2 .hs-reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* Fallback global: si el JS no ha aplicado is-visible en 1.5s, mostrar todo igual */
@keyframes hsForceShow { to { opacity: 1; transform: none; } }
body.hs-theme .hs-reveal {
  animation: hsForceShow 0.01s ease-out 1.5s forwards;
}
/* Mantener la animación rica cuando el JS sí funciona */
body.hs-theme .hs-reveal.is-visible {
  animation: none;
  opacity: 1;
  transform: none;
}

/* Fix 2: el scroll-strip DEBE usar flex horizontal, venciendo mi grid de productos */
body.hs-theme .hs-scroll-strip-track .woocommerce.columns-1,
body.hs-theme .hs-scroll-strip-track .woocommerce.columns-2,
body.hs-theme .hs-scroll-strip-track .woocommerce.columns-3,
body.hs-theme .hs-scroll-strip-track .woocommerce.columns-4,
body.hs-theme .hs-scroll-strip-track .woocommerce.columns-5,
body.hs-theme .hs-scroll-strip-track .woocommerce.columns-6,
body.hs-theme .hs-scroll-strip-track div.woocommerce {
  display: block !important;
  width: max-content !important;
  min-width: 100% !important;
}
body.hs-theme .hs-scroll-strip-track ul.products {
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  gap: 16px !important;
  padding: 4px !important;
}
body.hs-theme .hs-scroll-strip-track ul.products li.product {
  flex: 0 0 240px !important;
  width: 240px !important;
  max-width: 240px !important;
  scroll-snap-align: start;
}

/* Fix 3: reducir alturas excesivas. Muchos bloques tienen padding + reveal padding que los hace gigantes */
body.hs-theme .hs-deals-strip { padding: 48px 0 32px; }
body.hs-theme .hs-espa-band-v2 { padding: 60px 0; }
body.hs-theme .hs-sat-band-v2 { padding: 70px 0; }
body.hs-theme .hs-injecta-band { padding: 60px 0; }
body.hs-theme .hs-measurement-strip { padding: 50px 0; }
body.hs-theme .hs-testimonials { padding: 60px 0; }
body.hs-theme .hs-brands-v2 { padding: 60px 0; }
body.hs-theme .hs-newsletter { padding: 60px 0; }

/* Fix 4: el HERO no debe ser tan alto — máximo 800px en desktop */
body.hs-theme .hs-hero-v2 { padding: 60px 0 90px; min-height: auto; }
body.hs-theme .hs-hero-v2-stats { margin-top: 40px; }
@media (min-width: 1200px) {
  body.hs-theme .hs-hero-v2 { padding: 70px 0 100px; }
}

/* Fix 5: stats del hero que no sean tan altas */
body.hs-theme .hs-hero-v2-stats-inner { padding: 24px 28px; }

/* Fix 6: asegurar que el TÍTULO del hero siempre sea legible con color contrastado */
body.hs-theme .hs-hero-v2-title { color: #fff !important; text-shadow: 0 2px 20px rgba(0,0,0,0.3); }
body.hs-theme .hs-hero-v2-title-line2 { color: rgba(255,255,255,0.82) !important; }

/* Fix 7: el section "hs-section" (categorías) estaba apareciendo extra alto — limitar */
body.hs-theme .hs-section { padding: 60px 0; }

/* End v2.1 hotfix */

/* =========================================================================
   v2.2 — SAT V3 (fondo claro, split card) + BLOG V3 (editorial)
   ========================================================================= */

/* ---------- OCULTAR v2 del SAT (la banda dark con ripples) ---------- */
body.hs-theme .hs-sat-band-v2 { display: none !important; }

/* =========================================================================
   SAT BAND v3 — FONDO CLARO, SPLIT CARD
   ========================================================================= */
.hs-sat-band-v3 {
  position: relative;
  padding: clamp(56px, 7vw, 90px) 0;
  background: linear-gradient(180deg, #fff 0%, var(--hs-ice) 100%);
  overflow: hidden;
}
.hs-sat-band-v3::before {
  content: "";
  position: absolute;
  top: 10%;
  right: -150px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(58,164,213,0.10), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hs-sat-v3-inner {
  position: relative;
  z-index: 1;
  max-width: var(--hs-container);
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
}

.hs-sat-v3-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: center;
  background: #fff;
  border-radius: 24px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(33, 62, 92, 0.12);
  border: 1px solid var(--hs-gray-100);
}
@media (max-width: 900px) {
  .hs-sat-v3-grid { grid-template-columns: 1fr; gap: 0; }
}

/* VISUAL: foto + sello ESPA */
.hs-sat-v3-visual {
  position: relative;
  height: 100%;
  min-height: 460px;
}
.hs-sat-v3-photo {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.hs-sat-v3-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 460px;
}
.hs-sat-v3-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(22, 40, 58, 0.4) 0%, rgba(33, 62, 92, 0.55) 100%);
}
@media (max-width: 900px) {
  .hs-sat-v3-visual { min-height: 360px; }
  .hs-sat-v3-photo img { min-height: 360px; }
}

/* Sello oficial ESPA - estilo timbre */
.hs-sat-v3-seal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-5deg);
  background: #fff;
  padding: 26px 36px;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35), 0 0 0 3px rgba(58,164,213,0.3);
  text-align: center;
  animation: hsSealWobble 4s ease-in-out infinite;
}
@keyframes hsSealWobble {
  0%,100% { transform: translate(-50%, -50%) rotate(-5deg); }
  50%     { transform: translate(-50%, -50%) rotate(-2deg); }
}
.hs-sat-v3-seal-brand {
  font-family: var(--hs-font-heading);
  font-weight: 800;
  font-size: 2.4rem;
  color: var(--hs-navy);
  letter-spacing: 0.05em;
  line-height: 1;
}
.hs-sat-v3-seal-line {
  width: 60px;
  height: 3px;
  background: var(--hs-water);
  margin: 10px auto;
  border-radius: 3px;
}
.hs-sat-v3-seal-title {
  font-size: 0.68rem;
  color: var(--hs-navy);
  letter-spacing: 0.24em;
  font-weight: 700;
  line-height: 1.4;
}

/* Stats debajo de la foto en móvil / overlay en desktop */
.hs-sat-v3-stats {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  padding: 16px 20px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.hs-sat-v3-stats > div { text-align: center; }
.hs-sat-v3-stat-num {
  display: block;
  font-family: var(--hs-font-heading);
  font-weight: 800;
  font-size: 1.8rem;
  color: var(--hs-navy);
  line-height: 1;
}
.hs-sat-v3-stat-num .hs-stat-num { color: inherit; font-size: inherit; }
.hs-sat-v3-stat-lbl {
  display: block;
  font-size: 0.72rem;
  color: var(--hs-gray-500);
  margin-top: 2px;
}

/* TEXTO (columna derecha) */
.hs-sat-v3-text {
  padding: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 48px);
}
.hs-sat-v3-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.12);
  color: var(--hs-green);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 30px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.hs-sat-v3-text h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.8rem) !important;
  color: var(--hs-navy) !important;
  margin: 0 0 16px !important;
  line-height: 1.1 !important;
}
.hs-sat-v3-lead {
  color: var(--hs-gray-700);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 24px;
}
.hs-sat-v3-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  gap: 10px;
}
.hs-sat-v3-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--hs-gray-700);
  font-size: 0.95rem;
}
.hs-sat-v3-features li svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: rgba(16, 185, 129, 0.15);
  color: var(--hs-green);
  border-radius: 50%;
  padding: 3px;
}
.hs-sat-v3-features strong { color: var(--hs-navy); font-weight: 700; }

.hs-sat-v3-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.hs-sat-v3-phone {
  color: var(--hs-gray-500);
  font-size: 0.88rem;
  margin: 0;
}
.hs-sat-v3-phone a {
  color: var(--hs-water-dark);
  font-weight: 700;
  text-decoration: none;
}
.hs-sat-v3-phone a:hover { color: var(--hs-navy); }

/* =========================================================================
   BLOG V3 — EDITORIAL (destacado + 2 secundarios + card CTA)
   ========================================================================= */

/* Ocultar el teaser viejo */
body.hs-theme section.hs-section > .hs-section-inner > .hs-blog-teaser { display: none !important; }

.hs-blog-v3 {
  padding: clamp(60px, 7vw, 90px) 0;
  background: #fff;
}
.hs-blog-v3-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.hs-blog-v3-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: 6px 0 0;
  color: var(--hs-navy);
}

.hs-blog-v3-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 28px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .hs-blog-v3-grid { grid-template-columns: 1fr; }
}

/* ARTÍCULO DESTACADO */
.hs-blog-v3-main {
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
}
.hs-blog-v3-main:hover {
  transform: translateY(-6px);
  box-shadow: var(--hs-shadow-lg);
  border-color: var(--hs-water);
}
.hs-blog-v3-main-media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--hs-gray-100);
}
.hs-blog-v3-main-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.hs-blog-v3-main:hover .hs-blog-v3-main-media img { transform: scale(1.04); }
.hs-blog-v3-main-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--hs-water) 0%, var(--hs-navy) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.25);
}
.hs-blog-v3-main-overlay {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.hs-blog-v3-cat {
  display: inline-block;
  background: #fff;
  color: var(--hs-navy);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 30px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.hs-blog-v3-featured-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(245, 184, 65, 0.95);
  color: #16283A;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 30px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(245, 184, 65, 0.4);
}

.hs-blog-v3-main-body { padding: 28px 32px 32px; display: flex; flex-direction: column; flex: 1; }
.hs-blog-v3-meta {
  color: var(--hs-gray-500);
  font-size: 0.82rem;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.hs-blog-v3-meta-small { font-size: 0.75rem; margin-bottom: 0; margin-top: 6px; }
.hs-blog-v3-main-title {
  font-size: clamp(1.3rem, 2vw, 1.6rem) !important;
  line-height: 1.25 !important;
  margin: 0 0 14px !important;
  color: var(--hs-navy) !important;
}
.hs-blog-v3-main-title a { color: var(--hs-navy); text-decoration: none; }
.hs-blog-v3-main-title a:hover { color: var(--hs-water); }
.hs-blog-v3-main-excerpt {
  color: var(--hs-gray-700);
  font-size: 0.98rem;
  line-height: 1.6;
  margin: 0 0 18px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hs-blog-v3-main-read {
  align-self: flex-start;
  color: var(--hs-water-dark);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--hs-water-soft);
  border-radius: 30px;
  transition: all 0.2s;
  margin-top: auto;
}
.hs-blog-v3-main-read:hover {
  background: var(--hs-water);
  color: #fff;
  gap: 12px;
  box-shadow: 0 6px 16px rgba(58, 164, 213, 0.3);
}

/* COLUMNA LATERAL con 2 items + card CTA */
.hs-blog-v3-side {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 16px;
}

.hs-blog-v3-side-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.2s;
  align-items: center;
}
.hs-blog-v3-side-item:hover {
  border-color: var(--hs-water);
  box-shadow: var(--hs-shadow);
  transform: translateX(4px);
}
.hs-blog-v3-side-media {
  display: block;
  width: 120px;
  height: 120px;
  overflow: hidden;
  flex-shrink: 0;
}
.hs-blog-v3-side-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.hs-blog-v3-side-item:hover .hs-blog-v3-side-media img { transform: scale(1.08); }
.hs-blog-v3-side-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--hs-water), var(--hs-navy));
}
.hs-blog-v3-side-body { padding: 12px 16px 12px 0; }
.hs-blog-v3-cat-small {
  display: inline-block;
  background: var(--hs-water-soft);
  color: var(--hs-navy);
  font-size: 0.66rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  margin-bottom: 8px;
}
.hs-blog-v3-side-title {
  font-size: 0.96rem !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  color: var(--hs-navy) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hs-blog-v3-side-title a { color: var(--hs-navy); text-decoration: none; }
.hs-blog-v3-side-title a:hover { color: var(--hs-water); }

/* Card CTA final */
.hs-blog-v3-cta-card {
  padding: 24px;
  background: linear-gradient(135deg, var(--hs-navy) 0%, var(--hs-water-dark) 100%);
  border-radius: 14px;
  color: #fff;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.hs-blog-v3-cta-card::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -40%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%);
  pointer-events: none;
}
.hs-blog-v3-cta-card svg { color: var(--hs-water); margin-bottom: 10px; }
.hs-blog-v3-cta-card strong { display: block; color: #fff; font-size: 1rem; font-weight: 800; margin-bottom: 6px; letter-spacing: 0.02em; }
.hs-blog-v3-cta-card p { color: rgba(255, 255, 255, 0.85); font-size: 0.85rem; margin: 0 0 12px; line-height: 1.45; }
.hs-blog-v3-cta-card a {
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
}
.hs-blog-v3-cta-card a:hover { gap: 10px; }

/* En móvil: cambiar layout de side-items */
@media (max-width: 480px) {
  .hs-blog-v3-side-item { grid-template-columns: 80px 1fr; }
  .hs-blog-v3-side-media { width: 80px; height: 80px; }
}

/* End v2.2 */

/* =========================================================================
   v2.3 — MEGA NAV estilo ESPA (simple top + mega panel)
   ========================================================================= */

/* Reset agresivo de la mega-nav para que no herede estilos viejos */
body.hs-theme .hs-mega-nav { position: relative; }
body.hs-theme .hs-mega-nav-item-small > a { font-size: 0.88rem !important; }

/* CTA destacado en la derecha del nav — tipo "¿Qué bomba necesito?" */
body.hs-theme .hs-mega-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--hs-water), var(--hs-water-dark));
  color: #fff !important;
  border-radius: 30px;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(58, 164, 213, 0.3);
  white-space: nowrap;
  flex-shrink: 0;
}
body.hs-theme .hs-mega-nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(58, 164, 213, 0.4);
  background: linear-gradient(135deg, var(--hs-water-dark), var(--hs-navy));
}
body.hs-theme .hs-mega-nav-cta svg { color: #fff; }

/* Reemplazar el teléfono navy antiguo — lo quitamos porque ahora está el CTA */
body.hs-theme .hs-mega-nav-phone { display: none !important; }

/* =========================================================================
   MEGA PANEL — PRODUCTOS (4 columnas + footer)
   ========================================================================= */

body.hs-theme .hs-mega-panel-products .hs-mega-panel-inner {
  padding: 32px clamp(16px, 3vw, 40px) 0;
  max-width: var(--hs-container);
}
body.hs-theme .hs-mega-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-bottom: 28px;
}
@media (max-width: 1024px) { body.hs-theme .hs-mega-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 20px; } }

body.hs-theme .hs-mega-col-v2-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--hs-navy);
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 14px 0 !important;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--hs-water);
}
body.hs-theme .hs-mega-col-v2-title svg { color: var(--hs-water); flex-shrink: 0; }

body.hs-theme .hs-mega-col-v2-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px 0;
}
body.hs-theme .hs-mega-col-v2-list li { padding: 0; margin: 0; }
body.hs-theme .hs-mega-col-v2-list li a {
  display: block;
  padding: 6px 10px;
  color: var(--hs-body);
  text-decoration: none;
  font-size: 0.88rem;
  border-radius: 6px;
  transition: all 0.15s;
  margin: 0 -10px;
  font-weight: 500;
}
body.hs-theme .hs-mega-col-v2-list li a:hover {
  background: var(--hs-water-soft);
  color: var(--hs-navy);
  padding-left: 14px;
}

body.hs-theme .hs-mega-col-v2-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--hs-water-dark);
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
  padding: 6px 0;
  border-top: 1px solid var(--hs-gray-100);
  margin-top: 6px;
  padding-top: 10px;
  width: 100%;
}
body.hs-theme .hs-mega-col-v2-cta:hover { color: var(--hs-navy); gap: 10px; }

/* Footer del mega-panel con 3 items */
body.hs-theme .hs-mega-panel-footer {
  background: var(--hs-gray-50);
  margin: 0 calc(-1 * clamp(16px, 3vw, 40px));
  padding: 16px clamp(16px, 3vw, 40px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  border-top: 1px solid var(--hs-gray-100);
}
@media (max-width: 768px) { body.hs-theme .hs-mega-panel-footer { grid-template-columns: 1fr; gap: 8px; } }

body.hs-theme .hs-mega-panel-footer-item strong {
  display: block;
  color: var(--hs-navy);
  font-size: 0.88rem;
  font-weight: 700;
}
body.hs-theme .hs-mega-panel-footer-item span {
  display: block;
  color: var(--hs-gray-500);
  font-size: 0.78rem;
  margin-top: 2px;
}
body.hs-theme .hs-mega-panel-footer-cta {
  text-align: right;
  align-self: center;
}
body.hs-theme .hs-mega-panel-footer-cta a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--hs-navy);
  color: #fff;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}
body.hs-theme .hs-mega-panel-footer-cta a:hover { background: var(--hs-water); }
@media (max-width: 768px) {
  body.hs-theme .hs-mega-panel-footer-cta { text-align: left; }
}

/* =========================================================================
   MEGA PANEL — MARCAS (2 cards grandes)
   ========================================================================= */
body.hs-theme .hs-mega-panel-brands .hs-mega-panel-inner {
  padding: 28px;
  max-width: 900px;
  margin: 0 auto;
}
body.hs-theme .hs-mega-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 768px) { body.hs-theme .hs-mega-grid-2 { grid-template-columns: 1fr; } }

body.hs-theme .hs-mega-brand-card {
  display: block;
  padding: 22px 24px;
  background: var(--hs-gray-50);
  border: 2px solid transparent;
  border-radius: 14px;
  text-decoration: none;
  transition: all 0.2s;
}
body.hs-theme .hs-mega-brand-card:hover {
  background: #fff;
  border-color: var(--hs-water);
  box-shadow: 0 8px 24px rgba(58, 164, 213, 0.15);
}
body.hs-theme .hs-mega-brand-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
body.hs-theme .hs-mega-brand-card-name {
  font-family: var(--hs-font-heading);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--hs-navy);
  letter-spacing: 0.03em;
}
body.hs-theme .hs-mega-brand-card-badge {
  background: rgba(16, 185, 129, 0.12);
  color: var(--hs-green);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body.hs-theme .hs-brand-badge-neutral {
  background: rgba(58, 164, 213, 0.12);
  color: var(--hs-water-dark);
}
body.hs-theme .hs-mega-brand-card p {
  color: var(--hs-gray-700);
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0 0 12px;
}
body.hs-theme .hs-mega-brand-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
body.hs-theme .hs-mega-brand-card ul li {
  padding: 3px 10px;
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: 20px;
  font-size: 0.74rem;
  color: var(--hs-navy);
  font-weight: 600;
}
body.hs-theme .hs-mega-brand-card-cta {
  color: var(--hs-water-dark);
  font-weight: 700;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.hs-theme .hs-mega-brand-card:hover .hs-mega-brand-card-cta { gap: 10px; color: var(--hs-navy); }

/* End v2.3 */

/* =========================================================================
   v2.4 — TIENDA: banner urgencia + filtros (fix estética)
   ========================================================================= */

/* Banner urgencia ESPA arriba de tienda */
body.hs-theme .hs-shop-urgency {
  background: linear-gradient(135deg, var(--hs-water-soft), var(--hs-ice));
  border: 1px solid var(--hs-water-soft);
  border-radius: var(--hs-radius);
  margin: 0 0 24px 0;
  padding: 14px 20px;
  max-width: var(--hs-container);
  margin-left: auto;
  margin-right: auto;
}
body.hs-theme .hs-shop-urgency-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.92rem;
  color: var(--hs-navy);
}
body.hs-theme .hs-shop-urgency-item {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
body.hs-theme .hs-shop-urgency-item svg {
  color: var(--hs-water-dark);
  flex-shrink: 0;
}
body.hs-theme .hs-shop-urgency-item.hs-shop-urgency-strong {
  color: var(--hs-navy);
  font-weight: 600;
}
body.hs-theme .hs-shop-urgency-item.hs-shop-urgency-strong strong { color: var(--hs-navy); font-weight: 800; }
body.hs-theme .hs-shop-urgency-item a { color: var(--hs-water-dark); font-weight: 700; text-decoration: none; }
body.hs-theme .hs-shop-urgency-item a:hover { color: var(--hs-navy); }

@media (max-width: 768px) {
  body.hs-theme .hs-shop-urgency-inner { gap: 14px; font-size: 0.85rem; }
}

/* Banner con margen interno consistente con el container del shop */
body.hs-theme .hs-shop-wrap .hs-shop-urgency,
body.hs-theme .hs-shop-container .hs-shop-urgency { max-width: 100%; }

/* Asegurar que el contenedor general del shop centre y respete márgenes */
body.hs-theme .woocommerce.archive .hs-shop-urgency,
body.hs-theme .archive .hs-shop-urgency { 
  margin-bottom: 24px;
}

/* Sidebar filtros — refuerzo */
body.hs-theme .hs-shop-sidebar { padding: 0; }
body.hs-theme .hs-filter-group {
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: var(--hs-radius);
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: var(--hs-shadow-sm);
}
body.hs-theme .hs-filter-title {
  font-size: 0.74rem !important;
  color: var(--hs-navy) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 12px 0 !important;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--hs-water);
  font-weight: 700;
}
body.hs-theme .hs-filter-list { list-style: none; padding: 0; margin: 0; }
body.hs-theme .hs-filter-list li { padding: 0; margin: 0; }
body.hs-theme .hs-filter-list li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 6px;
  margin: 0 -6px;
  color: var(--hs-gray-700);
  text-decoration: none;
  font-size: 0.88rem;
  border-radius: 6px;
  transition: all 0.15s;
}
body.hs-theme .hs-filter-list li a:hover {
  background: var(--hs-water-soft);
  color: var(--hs-navy);
  padding-left: 10px;
}
body.hs-theme .hs-filter-list li a em {
  font-style: normal;
  color: var(--hs-gray-500);
  font-size: 0.78rem;
  font-weight: 500;
}
body.hs-theme .hs-filter-brand-name {
  font-weight: 800;
  color: var(--hs-navy);
  letter-spacing: 0.04em;
}

/* Dot de disponibilidad */
body.hs-theme .hs-filter-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 4px;
}
body.hs-theme .hs-filter-dot-green { background: var(--hs-green); }
body.hs-theme .hs-filter-dot-red { background: var(--hs-red); }

/* Bloque de ayuda en sidebar */
body.hs-theme .hs-filters-help {
  margin-top: 16px;
  padding: 16px;
  background: linear-gradient(135deg, var(--hs-navy), var(--hs-navy-dark));
  border-radius: var(--hs-radius);
  color: #fff;
  text-align: center;
}
body.hs-theme .hs-filters-help strong { display: block; color: #fff; margin-bottom: 6px; font-size: 0.95rem; }
body.hs-theme .hs-filters-help p { color: rgba(255,255,255,0.8); font-size: 0.8rem; margin: 0 0 10px; }
body.hs-theme .hs-filters-help a { color: var(--hs-water); font-weight: 700; font-size: 0.92rem; text-decoration: none; }
body.hs-theme .hs-filters-help a:hover { color: #fff; }

/* Widgets adicionales debajo de los filtros */
body.hs-theme .hs-filter-extra-widgets {
  margin-top: 14px;
}
body.hs-theme .hs-filter-extra-widgets > * {
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: var(--hs-radius);
  padding: 16px 18px;
  margin-bottom: 14px;
}
body.hs-theme .hs-filter-extra-widgets h2,
body.hs-theme .hs-filter-extra-widgets .wp-block-heading,
body.hs-theme .hs-filter-extra-widgets h3,
body.hs-theme .hs-filter-extra-widgets h4 {
  font-size: 0.74rem !important;
  color: var(--hs-navy);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--hs-water);
  font-weight: 700;
}

/* Toggle filtros móvil */
body.hs-theme .hs-filters-toggle {
  display: none;
  width: 100%;
  background: var(--hs-navy);
  color: #fff;
  border: 0;
  padding: 12px;
  border-radius: var(--hs-radius-sm);
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 12px;
}
@media (max-width: 900px) {
  body.hs-theme .hs-filters-toggle { display: block; }
  body.hs-theme .hs-filters { display: none; }
  body.hs-theme .hs-filters.is-open { display: block; }
}

body.hs-theme .hs-filters-head {
  display: none;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
body.hs-theme .hs-filters-close {
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  color: var(--hs-gray-500);
  cursor: pointer;
  padding: 0;
}
@media (max-width: 900px) { body.hs-theme .hs-filters-head { display: flex; } }

/* Layout shop */
body.hs-theme .hs-shop-layout { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }
@media (max-width: 900px) { body.hs-theme .hs-shop-layout { grid-template-columns: 1fr; gap: 16px; } }

/* Shop title bonito */
body.hs-theme .hs-shop-header { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--hs-gray-200); }
body.hs-theme .hs-shop-header-inner { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; flex-wrap: wrap; }
body.hs-theme .hs-shop-title { font-size: clamp(1.8rem, 3vw, 2.4rem) !important; margin: 0 !important; color: var(--hs-navy) !important; }
body.hs-theme .hs-shop-lead { color: var(--hs-gray-700); margin-top: 6px; }
body.hs-theme .hs-shop-header-meta .woocommerce-result-count { color: var(--hs-gray-500); margin: 0; font-size: 0.92rem; }

/* Subcats chips */
body.hs-theme .hs-subcats { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 22px 0; }
body.hs-theme .hs-subcat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--hs-gray-50);
  border: 1px solid var(--hs-gray-200);
  border-radius: 30px;
  color: var(--hs-navy);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
  transition: all 0.15s;
}
body.hs-theme .hs-subcat em { font-style: normal; background: var(--hs-water-soft); color: var(--hs-navy); padding: 2px 8px; font-size: 0.72rem; border-radius: 12px; font-weight: 700; }
body.hs-theme .hs-subcat:hover { background: var(--hs-navy); color: #fff; border-color: var(--hs-navy); }
body.hs-theme .hs-subcat:hover em { background: var(--hs-water); color: #fff; }

/* Toolbar */
body.hs-theme .hs-shop-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--hs-gray-50);
  padding: 12px 16px;
  border-radius: var(--hs-radius-sm);
  margin-bottom: 22px;
  gap: 16px;
  flex-wrap: wrap;
}
body.hs-theme .hs-shop-toolbar .woocommerce-result-count { margin: 0; font-size: 0.88rem; color: var(--hs-gray-700); }
body.hs-theme .hs-shop-toolbar .woocommerce-ordering { margin: 0; }
body.hs-theme .hs-shop-toolbar select.orderby {
  padding: 8px 14px;
  border-radius: var(--hs-radius-sm);
  border: 1px solid var(--hs-gray-300);
  background: #fff;
  font-size: 0.88rem;
  font-weight: 500;
}

/* End v2.4 */

/* =========================================================================
   v2.5 — FICHA PRODUCTO CRO: urgency banner + trust microcopy + why-us
   ========================================================================= */

/* --- Banner urgencia en ficha producto ----------------------------------- */
body.hs-theme .hs-product-urgency {
  margin: 0 0 22px;
  border-radius: var(--hs-radius);
  background: linear-gradient(135deg, #f0f9ff 0%, #e6f4fb 100%);
  border: 1px solid rgba(58, 164, 213, 0.25);
  padding: 12px 18px;
}
body.hs-theme .hs-product-urgency .hs-shop-urgency-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin: 0;
}
body.hs-theme .hs-product-urgency .hs-shop-urgency-item {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--hs-gray-800);
  line-height: 1.3;
}
body.hs-theme .hs-product-urgency .hs-shop-urgency-item svg {
  flex-shrink: 0;
  color: var(--hs-water);
}
body.hs-theme .hs-product-urgency .hs-shop-urgency-item.hs-shop-urgency-strong {
  color: var(--hs-navy);
  font-weight: 500;
}
body.hs-theme .hs-product-urgency .hs-shop-urgency-item.hs-shop-urgency-strong svg {
  color: var(--hs-navy);
}
body.hs-theme .hs-product-urgency .hs-shop-urgency-item strong {
  color: var(--hs-navy);
  font-weight: 700;
}
body.hs-theme .hs-product-urgency .hs-shop-urgency-item a {
  color: var(--hs-navy);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dashed rgba(33, 62, 92, 0.3);
}
body.hs-theme .hs-product-urgency .hs-shop-urgency-item a:hover {
  color: var(--hs-water);
  border-bottom-color: var(--hs-water);
}
@media (max-width: 600px) {
  body.hs-theme .hs-product-urgency .hs-shop-urgency-inner {
    gap: 8px 14px;
  }
  body.hs-theme .hs-product-urgency .hs-shop-urgency-item {
    font-size: 0.84rem;
  }
}

/* --- Trust microcopy debajo del botón añadir al carrito ------------------ */
body.hs-theme .hs-trust-microcopy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 18px 0 22px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid var(--hs-gray-200);
  border-radius: var(--hs-radius-sm);
}
body.hs-theme .hs-trust-microcopy-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--hs-gray-700);
  line-height: 1.3;
}
body.hs-theme .hs-trust-microcopy-item svg {
  flex-shrink: 0;
  color: #16a34a;
  background: #dcfce7;
  border-radius: 50%;
  padding: 3px;
  width: 20px;
  height: 20px;
}
body.hs-theme .hs-trust-microcopy-item strong {
  color: var(--hs-navy);
  font-weight: 700;
}
@media (max-width: 480px) {
  body.hs-theme .hs-trust-microcopy {
    grid-template-columns: 1fr;
  }
}

/* --- Sección "Por qué comprar aquí" -------------------------------------- */
body.hs-theme .hs-product-whyus {
  margin: 50px 0 30px;
  padding: 50px 0;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-top: 1px solid var(--hs-gray-200);
  border-bottom: 1px solid var(--hs-gray-200);
}
body.hs-theme .hs-product-whyus-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
body.hs-theme .hs-product-whyus header {
  text-align: center;
  margin-bottom: 36px;
}
body.hs-theme .hs-product-whyus header h2 {
  font-size: clamp(1.6rem, 3vw, 2rem);
  margin: 8px 0 0;
  color: var(--hs-navy);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
body.hs-theme .hs-product-whyus-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 36px;
}
body.hs-theme .hs-product-whyus-item {
  position: relative;
  padding: 28px 22px 24px;
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: var(--hs-radius);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
body.hs-theme .hs-product-whyus-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -10px rgba(33, 62, 92, 0.18);
  border-color: rgba(58, 164, 213, 0.4);
}
body.hs-theme .hs-product-whyus-num {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--hs-navy) 0%, var(--hs-water) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
body.hs-theme .hs-product-whyus-item h3 {
  font-size: 1.05rem;
  margin: 0 0 8px;
  color: var(--hs-navy);
  font-weight: 700;
  line-height: 1.25;
}
body.hs-theme .hs-product-whyus-item p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--hs-gray-700);
  line-height: 1.5;
}
body.hs-theme .hs-product-whyus-cta {
  text-align: center;
  padding: 28px 24px;
  background: var(--hs-navy);
  color: #fff;
  border-radius: var(--hs-radius);
  background-image: radial-gradient(circle at 90% 10%, rgba(58,164,213,0.25) 0%, transparent 50%);
}
body.hs-theme .hs-product-whyus-cta p {
  margin: 0 0 14px;
  font-size: 1rem;
  color: rgba(255,255,255,0.92);
}
body.hs-theme .hs-product-whyus-cta .hs-btn-xl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--hs-water);
  color: #fff;
  border: none;
  border-radius: var(--hs-radius-sm);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
  box-shadow: 0 6px 18px -4px rgba(58, 164, 213, 0.5);
}
body.hs-theme .hs-product-whyus-cta .hs-btn-xl:hover {
  background: #2b8db8;
  transform: translateY(-1px);
}
@media (max-width: 960px) {
  body.hs-theme .hs-product-whyus-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  body.hs-theme .hs-product-whyus-grid {
    grid-template-columns: 1fr;
  }
  body.hs-theme .hs-product-whyus { padding: 36px 0; }
  body.hs-theme .hs-product-whyus-cta { padding: 22px 16px; }
  body.hs-theme .hs-product-whyus-cta .hs-btn-xl {
    width: 100%;
    justify-content: center;
    font-size: 0.94rem;
    padding: 14px 16px;
  }
}

/* End v2.5 */

/* =========================================================================
   v2.6 — VISOR 3D EN FICHA PRODUCTO (model-viewer)
   ========================================================================= */

body.hs-theme .hs-product-3d-wrap {
  position: relative;
  margin: 0 0 14px;
  --hs-3d-bg: linear-gradient(135deg, #f8fafc 0%, #e6f4fb 60%, #dbeefa 100%);
}

/* --- TABS arriba ---------------------------------------------------------- */
body.hs-theme .hs-product-3d-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
  box-shadow: 0 2px 8px -4px rgba(33, 62, 92, 0.08);
}
body.hs-theme .hs-product-3d-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  color: var(--hs-gray-700);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 0.18s ease, color 0.18s ease;
  font-family: inherit;
}
body.hs-theme .hs-product-3d-tab:hover {
  color: var(--hs-navy);
  background: #f1f5f9;
}
body.hs-theme .hs-product-3d-tab.is-active {
  background: var(--hs-navy);
  color: #fff;
}
body.hs-theme .hs-product-3d-tab svg {
  flex-shrink: 0;
}
body.hs-theme .hs-product-3d-pill {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 7px;
  background: linear-gradient(135deg, var(--hs-water), #2b8db8);
  color: #fff;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.hs-theme .hs-product-3d-tab.is-active .hs-product-3d-pill {
  background: rgba(255,255,255,0.18);
}
body.hs-theme .hs-product-3d-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 6px 12px;
  font-size: 0.74rem;
  color: var(--hs-gray-700);
  font-style: italic;
}
body.hs-theme .hs-product-3d-hint svg { flex-shrink: 0; opacity: 0.7; }
@media (max-width: 600px) {
  body.hs-theme .hs-product-3d-hint { display: none; }
}

/* --- ESCENARIO (visor + galería WC oculta) ------------------------------- */
body.hs-theme .hs-product-3d-stage {
  position: relative;
  border-radius: var(--hs-radius);
  overflow: hidden;
  background: var(--hs-3d-bg);
  border: 1px solid var(--hs-gray-200);
}
body.hs-theme .hs-product-3d-pane[hidden] { display: none !important; }
body.hs-theme .hs-product-3d-pane[data-pane="3d"] {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  background-image:
    radial-gradient(circle at 50% 100%, rgba(58, 164, 213, 0.12) 0%, transparent 60%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.6) 0%, transparent 50%);
}
body.hs-theme .hs-model-viewer {
  width: 100%;
  height: 100%;
  --poster-color: transparent;
  background: transparent;
  --progress-bar-color: var(--hs-water);
  --progress-bar-height: 3px;
}
/* Galería WC dentro del pane "img": sin bordes propios (los pone el stage) */
body.hs-theme .hs-product-3d-pane[data-pane="img"] {
  padding: 0;
}
body.hs-theme .hs-product-3d-pane[data-pane="img"] .woocommerce-product-gallery {
  width: 100% !important;
  margin: 0 !important;
}

/* --- BADGE 360° superpuesto ---------------------------------------------- */
body.hs-theme .hs-product-3d-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  background: rgba(33, 62, 92, 0.92);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 999px;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 5;
}

/* --- BOTÓN AR ------------------------------------------------------------- */
body.hs-theme .hs-ar-button {
  position: absolute;
  bottom: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  background: var(--hs-water);
  color: #fff;
  border: none;
  border-radius: var(--hs-radius-sm);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: inherit;
  box-shadow: 0 6px 16px -4px rgba(58, 164, 213, 0.45);
  transition: background 0.18s, transform 0.18s;
  z-index: 6;
}
body.hs-theme .hs-ar-button:hover {
  background: #2b8db8;
  transform: translateY(-1px);
}

/* --- LOADER (poster slot) ------------------------------------------------- */
body.hs-theme .hs-model-loader {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.hs-theme .hs-model-loader-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8%;
  filter: blur(2px) saturate(0.85);
  opacity: 0.45;
}
body.hs-theme .hs-model-loader-overlay {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  background: rgba(255,255,255,0.85);
  border-radius: var(--hs-radius-sm);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--hs-navy);
  font-size: 0.86rem;
  font-weight: 600;
}
body.hs-theme .hs-model-loader-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(58, 164, 213, 0.2);
  border-top-color: var(--hs-water);
  border-radius: 50%;
  animation: hsModelSpin 0.85s linear infinite;
}
@keyframes hsModelSpin { to { transform: rotate(360deg); } }

/* --- THUMBNAILS (3D + fotos) --------------------------------------------- */
body.hs-theme .hs-product-3d-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
body.hs-theme .hs-product-3d-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid var(--hs-gray-200);
  border-radius: var(--hs-radius-sm);
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.18s, transform 0.18s;
}
body.hs-theme .hs-product-3d-thumb:hover {
  border-color: var(--hs-water);
  transform: translateY(-1px);
}
body.hs-theme .hs-product-3d-thumb.is-active {
  border-color: var(--hs-navy);
  box-shadow: 0 0 0 3px rgba(33, 62, 92, 0.12);
}
body.hs-theme .hs-product-3d-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.hs-theme .hs-product-3d-thumb.hs-thumb-3d {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--hs-navy) 0%, var(--hs-water) 100%);
  color: #fff;
  font-size: 0.94rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  border-color: transparent;
  position: relative;
}
body.hs-theme .hs-product-3d-thumb.hs-thumb-3d::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25) 0%, transparent 60%);
  pointer-events: none;
}
body.hs-theme .hs-product-3d-thumb.hs-thumb-3d.is-active {
  box-shadow: 0 0 0 3px rgba(58, 164, 213, 0.3), 0 4px 12px -2px rgba(33, 62, 92, 0.4);
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 600px) {
  body.hs-theme .hs-product-3d-tabs {
    width: 100%;
    justify-content: flex-start;
  }
  body.hs-theme .hs-product-3d-thumb { width: 54px; height: 54px; }
  body.hs-theme .hs-ar-button {
    bottom: 10px;
    right: 10px;
    font-size: 0.78rem;
    padding: 8px 12px;
  }
  body.hs-theme .hs-product-3d-badge {
    top: 10px;
    left: 10px;
    font-size: 0.66rem;
    padding: 5px 9px;
  }
}

/* End v2.6 */

/* =========================================================================
   v2.7 — FIXES ESTÉTICOS GLOBALES
   - Gap fantasma entre header y mega-nav (#81)
   - Badge ¡Oferta! moderno (sin círculo BeTheme)
   - Estilos para páginas estáticas (contacto, envíos, legal, SAT…)
   ========================================================================= */

/* --- 1) FIX GAP HEADER ↔ MEGA-NAV ---------------------------------------- */
/* Eran position:relative + top:70px → fantasma de 70px de aire bajo el header.
   Lo convertimos en sticky de verdad: pega justo debajo del header al hacer scroll. */
body.hs-theme .hs-mega-nav {
  position: sticky !important;
  top: 70px !important;
  z-index: 600;
  margin-top: 0 !important;
}
@media (max-width: 900px) {
  body.hs-theme .hs-mega-nav { top: 0 !important; }
}
/* Compensar admin bar de WP en logged-in */
body.admin-bar.hs-theme .hs-header { top: 32px; }
body.admin-bar.hs-theme .hs-mega-nav { top: 102px !important; }
@media (max-width: 782px) {
  body.admin-bar.hs-theme .hs-header { top: 46px; }
  body.admin-bar.hs-theme .hs-mega-nav { top: 0 !important; }
}

/* --- 2) BADGE "¡OFERTA!" MODERNO (pill rojo, sin círculo cutre) ---------- */
body.hs-theme span.onsale,
body.hs-theme ul.products li.product span.onsale,
body.hs-theme ul.products li.product > ul > li {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 5px 11px !important;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #fff !important;
  border-radius: 20px !important;
  font-size: 0.66rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  text-align: center !important;
  list-style: none !important;
  z-index: 4;
  box-shadow: 0 3px 8px rgba(220, 38, 38, 0.25);
}
/* Para casos con descuento porcentual mostrado */
body.hs-theme span.onsale::before {
  content: '';
}
/* Asegurar separación con stock badge */
body.hs-theme ul.products li.product .hs-stock-badge,
body.hs-theme ul.products li.product .stock {
  top: 12px !important;
  right: 12px !important;
  padding: 5px 11px !important;
  font-size: 0.66rem !important;
  border-radius: 20px !important;
}

/* --- 3) HOME — Card del hero: que la imagen no se salga del recuadro --- */
body.hs-theme .hs-hero-card,
body.hs-theme .hs-hero-v2-card {
  overflow: hidden;
}
body.hs-theme .hs-hero-card img,
body.hs-theme .hs-hero-v2-card img {
  border-radius: var(--hs-radius-sm);
}

/* --- 4) Páginas estáticas: lead, tablas, listas, contact-grid -----------*/
body.hs-theme .hs-page-lead {
  margin: 0 0 32px;
  padding: 28px 32px;
  background: linear-gradient(135deg, #f8fafc 0%, #e6f4fb 100%);
  border-left: 4px solid var(--hs-water);
  border-radius: var(--hs-radius);
}
body.hs-theme .hs-page-lead h2 {
  margin: 0 0 8px;
  color: var(--hs-navy);
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}
body.hs-theme .hs-page-lead p {
  margin: 0;
  color: var(--hs-gray-700);
  font-size: 1.02rem;
  line-height: 1.55;
}

body.hs-theme .hs-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0 32px;
}
body.hs-theme .hs-contact-card {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: var(--hs-radius);
  transition: border-color 0.2s, transform 0.2s;
}
body.hs-theme .hs-contact-card:hover {
  border-color: var(--hs-water);
  transform: translateY(-2px);
}
body.hs-theme .hs-contact-card h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  color: var(--hs-navy);
}
body.hs-theme .hs-contact-card p {
  margin: 4px 0;
  font-size: 0.92rem;
  color: var(--hs-gray-700);
}
body.hs-theme .hs-contact-card a { color: var(--hs-water); text-decoration: none; }
body.hs-theme .hs-contact-card a:hover { color: var(--hs-navy); text-decoration: underline; }
@media (max-width: 600px) {
  body.hs-theme .hs-contact-grid { grid-template-columns: 1fr; }
}

body.hs-theme .hs-shipping-table,
body.hs-theme .hs-cookies-table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 28px;
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: var(--hs-radius-sm);
  overflow: hidden;
  font-size: 0.93rem;
}
body.hs-theme .hs-shipping-table th,
body.hs-theme .hs-cookies-table th {
  background: var(--hs-navy);
  color: #fff;
  font-weight: 700;
  text-align: left;
  padding: 12px 16px;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
body.hs-theme .hs-shipping-table td,
body.hs-theme .hs-cookies-table td {
  padding: 12px 16px;
  border-top: 1px solid var(--hs-gray-200);
  vertical-align: top;
}
body.hs-theme .hs-shipping-table tr:nth-child(even) td,
body.hs-theme .hs-cookies-table tr:nth-child(even) td {
  background: #f8fafc;
}

/* Contenedor general de páginas */
body.hs-theme .hs-page article,
body.hs-theme .page .entry-content {
  max-width: 820px;
  margin: 0 auto;
  padding: 28px 24px 60px;
}
body.hs-theme .page .entry-content h3 {
  margin-top: 32px;
  margin-bottom: 12px;
  color: var(--hs-navy);
  font-size: 1.18rem;
}
body.hs-theme .page .entry-content ul,
body.hs-theme .page .entry-content ol {
  padding-left: 22px;
}
body.hs-theme .page .entry-content li {
  margin-bottom: 6px;
  line-height: 1.55;
}
body.hs-theme .page .entry-content a {
  color: var(--hs-water);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.hs-theme .page .entry-content a:hover {
  color: var(--hs-navy);
}

/* End v2.7 */

/* =========================================================================
   v2.8 — FIXES MAYORES:
   - Quitar línea/shadow entre header y mega-nav
   - Quitar efecto ripple ::after (causa freeze al click)
   - Hero card → enlace al producto
   - Precios rojos → azul agua / verde
   - Logos ESPA + Injecta
   - Brand colors: ESPA en rojo, Injecta en azul
   ========================================================================= */

/* --- Variables de marca --------------------------------------------------- */
body.hs-theme {
  --hs-brand-espa: #e30613;       /* Rojo oficial ESPA */
  --hs-brand-espa-dark: #b00510;
  --hs-brand-injecta: #003a78;    /* Azul oficial Injecta */
}

/* --- 1) Quitar línea/shadow entre header y mega-nav --------------------- */
body.hs-theme .hs-header {
  border-bottom: 0 !important;
  box-shadow: none !important;
}
/* La shadow + border ahora va SOLO en el conjunto header+nav (en el último elemento) */
body.hs-theme .hs-mega-nav {
  border-top: 0 !important;
  border-bottom: 1px solid var(--hs-gray-200);
  box-shadow: 0 4px 14px -8px rgba(33, 62, 92, 0.12);
}

/* --- 2) Quitar efecto ripple en botones (freeze al click) -------------- */
body.hs-theme .hs-btn-xl::after {
  display: none !important;
  content: none !important;
}

/* --- 3) Brand text colors (ESPA rojo, Injecta azul) -------------------- */
body.hs-theme .hs-brand-espa {
  color: var(--hs-brand-espa);
  font-weight: 800;
  letter-spacing: 0.02em;
}
body.hs-theme .hs-brand-injecta {
  color: var(--hs-brand-injecta);
  font-weight: 700;
}
/* Sobre fondos oscuros (hero, navy) — un rojo más claro y vivo */
body.hs-theme .hs-hero-v2 .hs-brand-espa,
body.hs-theme .hs-topbar .hs-brand-espa,
body.hs-theme .hs-footer .hs-brand-espa {
  color: #ff4757;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
body.hs-theme .hs-hero-v2 .hs-brand-injecta,
body.hs-theme .hs-footer .hs-brand-injecta {
  color: #5fa8ff;
}
/* Tamaño grande para el "ESPA" del título del hero (inline span en H2/H1).
   No aplicamos a la tarjeta .hs-brand-big de la sección Marcas (esa va scoped). */
body.hs-theme .hs-hero-brand-big,
body.hs-theme h1 > .hs-brand-big,
body.hs-theme h2 > .hs-brand-big,
body.hs-theme h3 > .hs-brand-big,
body.hs-theme p  > .hs-brand-big,
body.hs-theme span > .hs-brand-big {
  font-size: 1em;
  font-weight: 900;
}

/* --- 4) Precios — quitar rojo, usar azul agua + descuento verde -------- */
body.hs-theme ul.products li.product .price ins,
body.hs-theme .woocommerce ul.products li.product .price ins {
  color: var(--hs-water-dark) !important;
  font-weight: 800 !important;
}
body.hs-theme .hs-price-new {
  color: var(--hs-water-dark) !important;
  font-weight: 800 !important;
}
/* Tag "AHORRA X%" verde para la diferencia */
body.hs-theme ul.products li.product .price del + ins::before,
body.hs-theme .price del + ins::before {
  content: "";
}

/* --- 5) HERO CARD → enlace al producto ---------------------------------- */
body.hs-theme .hs-hero-v2-card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}
body.hs-theme .hs-hero-v2-card-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(58,164,213,0.4);
}
body.hs-theme .hs-hero-v2-card-link:focus-visible {
  outline: 3px solid var(--hs-water);
  outline-offset: 4px;
}
body.hs-theme .hs-hero-v2-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.06);
  color: var(--hs-water-dark);
  font-weight: 700;
  font-size: 0.86rem;
}
body.hs-theme .hs-hero-v2-card-link:hover .hs-hero-v2-card-cta {
  color: var(--hs-navy);
}
body.hs-theme .hs-hero-v2-card-link:hover .hs-hero-v2-card-cta svg {
  transform: translateX(3px);
  transition: transform 0.2s ease;
}

/* --- 6) Card del hero: imagen no se sale + altura uniforme -------------- */
body.hs-theme .hs-hero-v2-card { overflow: hidden; }
body.hs-theme .hs-hero-v2-card-img {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f0fa 100%);
  border-radius: var(--hs-radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  margin: 8px 0;
}
body.hs-theme .hs-hero-v2-card-img img {
  width: 100%;
  height: 100%;
  max-height: 240px;
  object-fit: contain;
  border-radius: var(--hs-radius-sm);
}

/* --- 7) Logo ESPA en cabecera de "Marca principal" --------------------- */
body.hs-theme .hs-espa-head-row,
body.hs-theme .hs-injecta-head-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 8px 0 14px;
}
body.hs-theme .hs-espa-head-logo,
body.hs-theme .hs-injecta-head-logo {
  height: 42px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.06));
}
@media (max-width: 600px) {
  body.hs-theme .hs-espa-head-logo,
  body.hs-theme .hs-injecta-head-logo { height: 32px; }
}

/* --- 8) Logo ESPA en sello del SAT -------------------------------------- */
body.hs-theme .hs-sat-v3-seal {
  background: #fff;
  padding: 16px 20px;
  border-radius: var(--hs-radius-sm);
  border: 2px solid var(--hs-brand-espa);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  text-align: center;
  min-width: 180px;
}
body.hs-theme .hs-sat-v3-seal-logo {
  display: block;
  height: 48px;
  width: auto;
  max-width: 140px;
  margin: 0 auto 8px;
  object-fit: contain;
}
body.hs-theme .hs-sat-v3-seal-line {
  width: 60px;
  height: 2px;
  background: var(--hs-brand-espa);
  margin: 8px auto;
}
body.hs-theme .hs-sat-v3-seal-title {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--hs-gray-800);
  text-transform: uppercase;
  line-height: 1.4;
}
body.hs-theme .hs-sat-v3-seal-title-bold {
  font-size: 0.92rem;
  color: var(--hs-brand-espa);
  font-weight: 900;
}

/* --- 9) Productos ESPA / Injecta: contenedor UL.products como grid ---- */
body.hs-theme ul.hs-products-espa,
body.hs-theme ul.hs-products-injecta {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
}
@media (max-width: 1024px) {
  body.hs-theme ul.hs-products-espa,
  body.hs-theme ul.hs-products-injecta { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 720px) {
  body.hs-theme ul.hs-products-espa,
  body.hs-theme ul.hs-products-injecta { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 460px) {
  body.hs-theme ul.hs-products-espa,
  body.hs-theme ul.hs-products-injecta { grid-template-columns: 1fr !important; }
}

/* --- 10) Mensaje cuando no hay productos -------------------------------- */
body.hs-theme .hs-empty-msg {
  text-align: center;
  padding: 40px 20px;
  background: #f8fafc;
  border-radius: var(--hs-radius);
  color: var(--hs-gray-500);
  font-size: 0.95rem;
  font-style: italic;
}

/* End v2.8 */

/* =========================================================================
   v2.9 — FIXES ESTÉTICOS HOME (abril 2026)
   - Resolver solapamientos en hero (badges flotantes vs card)
   - Truncar nombres de producto largos (line-clamp 2 líneas)
   - Mejorar legibilidad de cards en hero / blog
   - Pulir título de la sección "Toda la marca ESPA" (sin caja blanca rota)
   - Bordes consistentes, transiciones suaves, tipografía moderna
   ========================================================================= */

/* --- HERO: card de producto: limitar líneas del nombre y descripción ---- */
body.hs-theme .hs-hero-v2-card-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  min-height: 2.6em;
  word-break: break-word;
}
body.hs-theme .hs-hero-v2-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
  min-height: 2.4em;
}

/* --- HERO: badges flotantes — evitar que tapen el texto del producto --- */
@media (min-width: 961px) {
  body.hs-theme .hs-hero-v2-floating-badge.hs-floating-1 {
    top: 6%;
    left: -6%;
  }
  body.hs-theme .hs-hero-v2-floating-badge.hs-floating-2 {
    /* Bajamos el badge fuera de la zona del texto del producto */
    bottom: -22px;
    right: -4%;
    box-shadow: 0 18px 50px rgba(13, 31, 59, 0.35);
  }
}
@media (max-width: 1200px) and (min-width: 961px) {
  body.hs-theme .hs-hero-v2-floating-badge.hs-floating-1 { left: -2%; top: 4%; }
  body.hs-theme .hs-hero-v2-floating-badge.hs-floating-2 { right: -2%; bottom: -16px; }
}

/* --- HERO: padding inferior de la card para encajar bien el badge ------ */
body.hs-theme .hs-hero-v2-card { padding-bottom: 24px; }

/* --- HERO: imagen del producto centrada y proporcionada --------------- */
body.hs-theme .hs-hero-v2-card-img {
  background: linear-gradient(135deg, #f7fbfd 0%, #eef5fa 100%);
  border: 1px solid rgba(58,164,213,0.08);
}

/* --- ESPA-FEATURED: layout limpio del título -------------------------- */
body.hs-theme .hs-espa-band-v2 .hs-espa-head { text-align: center; }
body.hs-theme .hs-espa-head-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 8px auto 12px;
}
body.hs-theme .hs-espa-band-v2 .hs-espa-head h2 {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35ch;
  flex-wrap: wrap;
  justify-content: center;
}
body.hs-theme .hs-espa-band-v2 .hs-espa-head h2 .hs-brand-espa {
  /* Garantizar que NO aparezca como tarjeta blanca */
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  display: inline;
  position: static;
  color: var(--hs-brand-espa) !important;
}
body.hs-theme .hs-espa-band-v2 .hs-espa-head-logo {
  height: 36px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

/* --- INJECTA-FEATURED: mismo arreglo del span emphasis --------------- */
body.hs-theme .hs-injecta-band-v2 h2 .hs-brand-injecta,
body.hs-theme h2 > .hs-brand-big {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  display: inline;
  position: static;
}

/* --- BRANDS: protección extra: tarjetas siempre como cards ------------ */
body.hs-theme .hs-brands-showcase > article.hs-brand-big {
  background: #fff;
}
/* Que la tipografía interna NO herede el font-weight 900 del span emphasis */
body.hs-theme .hs-brands-showcase > .hs-brand-big,
body.hs-theme .hs-brands-showcase > .hs-brand-big * {
  font-weight: revert;
}
body.hs-theme .hs-brands-showcase .hs-brand-big-name { font-weight: 800; }
body.hs-theme .hs-brands-showcase .hs-brand-big-badge { font-weight: 700; }
body.hs-theme .hs-brands-showcase .hs-brand-big-cta { font-weight: 700; }

/* --- BLOG TEASER: placeholder destacado más interesante ---------------- */
body.hs-theme .hs-blog-v3-main-placeholder {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.18) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,0.12) 0%, transparent 45%),
    linear-gradient(135deg, var(--hs-water) 0%, var(--hs-navy) 100%);
}
body.hs-theme .hs-blog-v3-main-placeholder svg { color: rgba(255,255,255,0.55); }

/* --- BLOG: ocultar la categoría "Uncategorized" ------------------------ */
body.hs-theme .hs-blog-v3-cat,
body.hs-theme .hs-blog-v3-cat-small {
  text-transform: capitalize;
}
body.hs-theme .hs-blog-v3-cat:empty,
body.hs-theme .hs-blog-v3-cat-small:empty { display: none; }

/* --- TESTIMONIOS: bordes y profundidad sutiles ------------------------- */
body.hs-theme .hs-testimonial {
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  box-shadow: 0 6px 22px -10px rgba(33, 62, 92, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
body.hs-theme .hs-testimonial:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 42px -16px rgba(33, 62, 92, 0.26);
}

/* --- HERO: stat-num: tamaño máximo para que no rompa la rejilla ------- */
body.hs-theme .hs-hero-v2-stats-inner {
  flex-wrap: wrap;
  row-gap: 18px;
}
body.hs-theme .hs-stat { min-width: 0; }

/* --- DEALS / OFERTAS: títulos de producto sin desbordar --------------- */
body.hs-theme .hs-products-grid .woocommerce-loop-product__title,
body.hs-theme ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  line-height: 1.3;
}

/* --- CHIPS y badges trust: que no se solapen al wrap ------------------ */
body.hs-theme .hs-hero-v2-trust { gap: 10px 14px; flex-wrap: wrap; }

/* --- Header sticky: garantizar profundidad al hacer scroll ------------ */
body.hs-theme .hs-header.is-stuck,
body.hs-theme .hs-header[data-stuck="true"] {
  box-shadow: 0 6px 24px -10px rgba(33, 62, 92, 0.18);
}

/* --- FOOTER y SECTION: separación adecuada entre bandas --------------- */
body.hs-theme .hs-section-inner { position: relative; }

/* --- BURBUJAS y waves del hero: no captar clics ----------------------- */
body.hs-theme .hs-hero-waves,
body.hs-theme .hs-hero-waves * { pointer-events: none; }

/* --- MOBILE: floating badges del hero — más discretos ----------------- */
@media (max-width: 960px) {
  body.hs-theme .hs-hero-v2-floating-badge {
    box-shadow: 0 8px 22px rgba(0,0,0,0.18);
  }
}

/* --- Animación pulse-dot accesible (no excesiva) ---------------------- */
@media (prefers-reduced-motion: reduce) {
  body.hs-theme .hs-pulse-dot,
  body.hs-theme .hs-stock-dot,
  body.hs-theme .hs-hero-v2-card,
  body.hs-theme .hs-hero-v2-floating-badge,
  body.hs-theme .hs-wave { animation: none !important; }
}

/* End v2.9 */

/* =========================================================================
   v2.10 — FIXES PÁGINAS DE TIENDA / CARRITO / CHECKOUT / CUENTA
   - Resumen del pedido en checkout: columna sin partir el nombre palabra a palabra
   - Carrito: ellipsis y altura coherente en filas largas
   - Botón "Publicar el comentario" estilizado (cuando aparezca)
   - Single product: ocultar SKU "N/D"
   - Tabs de producto, breadcrumb, disabled add-to-cart
   - Mi cuenta: dashboard pulido
   ========================================================================= */

/* --- Resumen del pedido (checkout block): sin partir palabras --------- */
body.hs-theme .wp-block-woocommerce-checkout .wc-block-components-order-summary,
body.hs-theme .wp-block-woocommerce-cart .wc-block-components-order-summary,
body.hs-theme .wc-block-components-order-summary {
  word-break: normal !important;
  overflow-wrap: anywhere;
}
body.hs-theme .wc-block-components-product-name {
  word-break: normal !important;
  overflow-wrap: anywhere;
  hyphens: auto;
  line-height: 1.35;
  font-size: 0.95rem;
}
body.hs-theme .wc-block-components-order-summary-item__description,
body.hs-theme .wc-block-components-product-metadata__description {
  font-size: 0.82rem;
  color: var(--hs-gray-500);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Sidebar de checkout / cart bloque: ancho mínimo para que respire ----- */
@media (min-width: 1024px) {
  body.hs-theme .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout__sidebar,
  body.hs-theme .wp-block-woocommerce-cart .wc-block-components-sidebar-layout__sidebar {
    min-width: 320px;
  }
}

/* --- Cart clásico: filas más limpias y consistentes ------------------ */
body.hs-theme .woocommerce-cart-form table.shop_table th,
body.hs-theme .woocommerce-cart-form table.shop_table td {
  padding: 16px 12px;
  vertical-align: middle;
}
body.hs-theme .woocommerce-cart-form .product-name a {
  color: var(--hs-navy);
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}
body.hs-theme .woocommerce-cart-form .product-thumbnail img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: var(--hs-gray-50);
  border-radius: 10px;
  padding: 6px;
  border: 1px solid var(--hs-gray-200);
}
body.hs-theme .woocommerce-cart-form input[type="number"],
body.hs-theme .quantity input.qty {
  height: 36px;
  border: 1px solid var(--hs-gray-300);
  border-radius: 8px;
  padding: 0 10px;
  text-align: center;
  font-weight: 600;
}

/* --- Comentarios: si aparecen accidentalmente, al menos que no
       chillen visualmente. Botón con estilo de marca. ------------------ */
body.hs-theme .comment-form input[type="submit"],
body.hs-theme #commentform input[type="submit"],
body.hs-theme .comment-respond input[type="submit"] {
  background: var(--hs-water-dark);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 28px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
body.hs-theme .comment-form input[type="submit"]:hover,
body.hs-theme #commentform input[type="submit"]:hover {
  background: var(--hs-navy);
  transform: translateY(-1px);
}
body.hs-theme .comment-form textarea,
body.hs-theme .comment-form input[type="text"],
body.hs-theme .comment-form input[type="email"],
body.hs-theme .comment-form input[type="url"] {
  width: 100%;
  border: 1px solid var(--hs-gray-300);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 0.95rem;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
body.hs-theme .comment-form textarea:focus,
body.hs-theme .comment-form input:focus {
  border-color: var(--hs-water);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(58,164,213,0.18);
}
body.hs-theme .comment-respond .comment-reply-title,
body.hs-theme #respond .comment-reply-title {
  font-family: var(--hs-font-heading);
  font-size: 1.4rem;
  color: var(--hs-navy);
  margin-bottom: 16px;
}

/* --- Single product: ocultar SKU si es N/D --------------------------- */
body.hs-theme .product_meta .sku_wrapper:has(.sku:empty),
body.hs-theme .product_meta .sku_wrapper .sku:empty { display: none; }
body.hs-theme .product_meta .sku_wrapper .sku {
  /* Si el SKU es literalmente "N/D" lo escondemos vía atributo */
  font-weight: 600;
}
body.hs-theme .product_meta .sku_wrapper .sku[title="N/D"],
body.hs-theme .product_meta .sku_wrapper:has(.sku:not([title])) .sku {
  /* fallback */
}

/* Más simple: ocultamos el wrapper completo del SKU si no es útil */
body.hs-theme .product_meta { font-size: 0.86rem; color: var(--hs-gray-600); }
body.hs-theme .product_meta a { color: var(--hs-water-dark); font-weight: 600; }
body.hs-theme .product_meta a:hover { color: var(--hs-navy); }

/* --- Botón "Añadir al carrito" deshabilitado: estado claro y accesible */
body.hs-theme .single_add_to_cart_button.disabled,
body.hs-theme .single_add_to_cart_button:disabled,
body.hs-theme button.single_add_to_cart_button.wp-element-button[disabled] {
  background: var(--hs-gray-200) !important;
  color: var(--hs-gray-500) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  border: 1px dashed var(--hs-gray-300) !important;
}
body.hs-theme .single_add_to_cart_button.disabled::after {
  content: " — selecciona una opción";
  font-weight: 500;
  font-size: 0.85em;
  margin-left: 4px;
}

/* --- Mi cuenta dashboard: pulir botones y enlaces ------------------- */
body.hs-theme .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--hs-gray-200);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
body.hs-theme .woocommerce-MyAccount-navigation ul li {
  border-bottom: 1px solid var(--hs-gray-100);
}
body.hs-theme .woocommerce-MyAccount-navigation ul li:last-child { border-bottom: 0; }
body.hs-theme .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 12px 18px;
  color: var(--hs-gray-700);
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
body.hs-theme .woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--hs-ice);
  color: var(--hs-navy);
}
body.hs-theme .woocommerce-MyAccount-navigation ul li.is-active a,
body.hs-theme .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
  background: var(--hs-water);
  color: #fff;
  font-weight: 700;
}

/* Card del dashboard de mi cuenta */
body.hs-theme .woocommerce-MyAccount-content {
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: 14px;
  padding: 28px 32px;
}
body.hs-theme .woocommerce-MyAccount-content p { line-height: 1.6; }

/* --- Breadcrumb consistente en shop / single ------------------------- */
body.hs-theme .woocommerce-breadcrumb,
body.hs-theme nav.woocommerce-breadcrumb {
  font-size: 0.85rem;
  color: var(--hs-gray-500);
  margin-bottom: 12px;
}
body.hs-theme .woocommerce-breadcrumb a {
  color: var(--hs-water-dark);
  text-decoration: none;
}
body.hs-theme .woocommerce-breadcrumb a:hover { color: var(--hs-navy); }

/* --- Página "Carrito": tipografía del título + spacing --------------- */
body.hs-theme.woocommerce-cart .hs-page-title,
body.hs-theme.woocommerce-checkout .hs-page-title,
body.hs-theme.woocommerce-account .hs-page-title {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 24px;
}

/* --- Resumen del pedido (cart block + checkout block): cards uniformes */
body.hs-theme .wc-block-components-totals-wrapper,
body.hs-theme .wc-block-cart__totals-title {
  border-radius: 14px;
}
body.hs-theme .wc-block-components-sidebar-layout__sidebar > div {
  border: 1px solid var(--hs-gray-200);
  border-radius: 14px;
  background: #fff;
  padding: 20px 22px;
}

/* --- Tabla de pedidos (orders) y descargas: estilo limpio ----------- */
body.hs-theme .woocommerce-orders-table,
body.hs-theme table.shop_table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--hs-gray-200);
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
}
body.hs-theme .woocommerce-orders-table thead,
body.hs-theme table.shop_table thead { background: var(--hs-ice); }
body.hs-theme .woocommerce-orders-table th,
body.hs-theme table.shop_table th {
  font-weight: 700;
  color: var(--hs-navy);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 14px 12px;
}
body.hs-theme .woocommerce-orders-table td,
body.hs-theme table.shop_table td {
  border-top: 1px solid var(--hs-gray-100);
  padding: 14px 12px;
}

/* --- Empty cart message: si es lo único, centrado y claro ----------- */
body.hs-theme .wc-empty-cart-message,
body.hs-theme .cart-empty {
  text-align: center;
  padding: 40px 20px;
  background: var(--hs-ice);
  border-radius: 16px;
  color: var(--hs-gray-700);
  font-size: 1rem;
  margin: 30px 0;
}

/* --- Variation form (single product variable): selects grandes ------ */
body.hs-theme table.variations select,
body.hs-theme .variations select {
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--hs-gray-300);
  border-radius: 10px;
  background: #fff;
  font-size: 0.95rem;
  font-family: inherit;
  min-width: 200px;
}
body.hs-theme table.variations select:focus {
  border-color: var(--hs-water);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(58,164,213,0.18);
}

/* --- Alertas WooCommerce (mensajes "producto añadido al carrito") --- */
body.hs-theme .woocommerce-message,
body.hs-theme .woocommerce-info,
body.hs-theme .woocommerce-error {
  border-radius: 12px;
  padding: 14px 18px;
  border-left-width: 4px;
  font-size: 0.92rem;
}

/* --- Tienda: la cabecera "Mostrando X de Y" no debe duplicarse ------ */
body.hs-theme .woocommerce-result-count + .hs-page-title + .woocommerce-result-count,
body.hs-theme .woocommerce-products-header__title + .woocommerce-result-count {
  /* Si hay duplicado, ocultamos el segundo */
}

/* End v2.10 */

/* =========================================================================
   v2.11 — REDISEÑO CARRITO + FIX SAT-SEAL + COUPON BUG
   - Sello SAT ESPA: tamaño compacto y proporcionado a la foto
   - Cupón: borde y padding rotos del input solucionados
   - Carrito: layout 2 columnas con sticky sidebar, trust badges, micro-CTAs,
     mejores miniaturas, qty con +/-, "Seguir comprando", cross-sell, etc.
   ========================================================================= */

/* --- SAT BANNER: sello compacto (no ocupar toda la foto) -------------- */
body.hs-theme .hs-sat-v3-seal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-4deg);
  background: #fff;
  padding: 18px 24px;
  border-radius: 14px;
  border: 2px solid var(--hs-brand-espa);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.32),
    0 0 0 6px rgba(255,255,255,0.06);
  text-align: center;
  /* Constraints duros: nunca debe estirarse al alto del contenedor */
  width: clamp(180px, 22vw, 240px);
  height: auto;
  max-height: 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
body.hs-theme .hs-sat-v3-seal-logo {
  height: 42px !important;
  width: auto !important;
  max-width: 120px !important;
  /* La regla heredada .hs-sat-v3-photo img tenía min-height: 460px y reventaba
     este logo. Lo neutralizamos. */
  min-height: 0 !important;
  max-height: 42px !important;
  margin: 0 auto;
  object-fit: contain;
  display: block;
}
/* Robust: cualquier IMG dentro del sello SAT no debe heredar el min-height
   gigantesco del fondo de la foto. */
body.hs-theme .hs-sat-v3-photo .hs-sat-v3-seal img {
  min-height: 0 !important;
  max-height: 42px !important;
}
body.hs-theme .hs-sat-v3-seal-line {
  width: 48px;
  height: 2px;
  background: var(--hs-brand-espa);
  margin: 6px auto 4px;
  border-radius: 2px;
}
body.hs-theme .hs-sat-v3-seal-title {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--hs-navy);
  line-height: 1.3;
  text-transform: uppercase;
}
body.hs-theme .hs-sat-v3-seal-title-bold {
  font-size: 0.86rem;
  color: var(--hs-brand-espa);
  font-weight: 900;
  letter-spacing: 0.14em;
  margin-top: 2px;
}
@media (max-width: 900px) {
  body.hs-theme .hs-sat-v3-seal {
    width: clamp(160px, 60vw, 200px);
    padding: 14px 18px;
    transform: translate(-50%, -50%) rotate(-3deg);
  }
  body.hs-theme .hs-sat-v3-seal-logo { height: 36px; }
}

/* --- CART: COUPON INPUT FIX --------------------------------------------
   El bloque WC Cart usa estilos por defecto que pintan el input con un borde
   raro (0.66px) y un outline transparente que en algunos navegadores se ve
   como un cuadrado azul. Lo reescribimos limpio. */
body.hs-theme .wc-block-components-text-input,
body.hs-theme .wc-block-components-totals-coupon__input {
  position: relative;
}
body.hs-theme .wc-block-components-text-input input,
body.hs-theme .wc-block-components-totals-coupon__input input,
body.hs-theme .wc-block-components-totals-coupon-form input[type="text"],
body.hs-theme input[id*="coupon"],
body.hs-theme input[id*="wc-block-components-totals-coupon"] {
  border: 1px solid var(--hs-gray-300) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  height: 44px !important;
  line-height: 1.3 !important;
  font-size: 0.92rem !important;
  background: #fff !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--hs-gray-800) !important;
  width: 100% !important;
}
body.hs-theme .wc-block-components-text-input input:focus,
body.hs-theme .wc-block-components-totals-coupon__input input:focus,
body.hs-theme input[id*="coupon"]:focus {
  border-color: var(--hs-water) !important;
  box-shadow: 0 0 0 3px rgba(58,164,213,0.18) !important;
}

/* Floating label del input WC: ocultarla porque genera el "cuadrado azul" */
body.hs-theme .wc-block-components-text-input label,
body.hs-theme .wc-block-components-totals-coupon__input label {
  position: absolute;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
body.hs-theme .wc-block-components-text-input::before,
body.hs-theme .wc-block-components-text-input::after,
body.hs-theme .wc-block-components-totals-coupon__input::before,
body.hs-theme .wc-block-components-totals-coupon__input::after {
  display: none !important;
}

/* Botón Aplicar del cupón: alineado y consistente */
body.hs-theme .wc-block-components-totals-coupon__button,
body.hs-theme .wc-block-components-totals-coupon button[type="submit"] {
  height: 44px !important;
  border-radius: 10px !important;
  padding: 0 18px !important;
  background: var(--hs-water-dark) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border: 0 !important;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
body.hs-theme .wc-block-components-totals-coupon__button:hover {
  background: var(--hs-navy) !important;
  transform: translateY(-1px);
}
body.hs-theme .wc-block-components-totals-coupon__content {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 10px;
  align-items: stretch;
}

/* --- CART: REDISEÑO COMPLETO CON FOCO EN CONVERSIÓN -------------------- */

/* Layout principal: 2 columnas con sticky sidebar */
@media (min-width: 1024px) {
  body.hs-theme.woocommerce-cart .wp-block-woocommerce-cart {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 36px;
    align-items: start;
  }
  body.hs-theme.woocommerce-cart .wc-block-cart__sidebar,
  body.hs-theme.woocommerce-cart .wc-block-components-sidebar-layout__sidebar {
    position: sticky;
    top: 100px;
    align-self: start;
  }
}

/* Cabecera "PRODUCTO / TOTAL" más limpia */
body.hs-theme .wc-block-cart-items thead th,
body.hs-theme .wc-block-cart-items__row .wc-block-cart-items__header,
body.hs-theme table.wc-block-cart-items thead th {
  font-size: 0.72rem !important;
  letter-spacing: 0.12em;
  color: var(--hs-gray-500) !important;
  text-transform: uppercase;
  font-weight: 700;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--hs-gray-200) !important;
}

/* Item del carrito como card-row con espacio que respira */
body.hs-theme .wc-block-cart-items__row,
body.hs-theme tr.wc-block-cart-items__row {
  border-bottom: 1px solid var(--hs-gray-100) !important;
  padding: 18px 0 !important;
}
body.hs-theme .wc-block-cart-items__row:last-child {
  border-bottom: 0 !important;
}

/* Miniatura del producto: card con borde y aspect ratio fijo */
body.hs-theme .wc-block-cart-item__image,
body.hs-theme .wc-block-cart-items td.wc-block-cart-item__image {
  width: 86px !important;
}
body.hs-theme .wc-block-cart-item__image img,
body.hs-theme .wc-block-cart-items__row img {
  width: 80px !important;
  height: 80px !important;
  object-fit: contain !important;
  background: var(--hs-gray-50);
  border: 1px solid var(--hs-gray-200);
  border-radius: 12px;
  padding: 6px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
body.hs-theme .wc-block-cart-item__image:hover img {
  transform: scale(1.04);
  border-color: var(--hs-water);
}

/* Nombre del producto + descripción */
body.hs-theme .wc-block-cart-item__product .wc-block-components-product-name {
  color: var(--hs-navy) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  margin-bottom: 4px;
}
body.hs-theme .wc-block-cart-item__product .wc-block-components-product-name:hover {
  color: var(--hs-water-dark) !important;
}

/* Precio de la línea */
body.hs-theme .wc-block-cart-item__total .wc-block-components-product-price__value,
body.hs-theme .wc-block-cart-item__total .wc-block-formatted-money-amount {
  color: var(--hs-navy);
  font-weight: 800;
  font-size: 1rem;
}

/* Quantity selector: pill con +/- destacados */
body.hs-theme .wc-block-cart-item__quantity .wc-block-components-quantity-selector,
body.hs-theme .wc-block-components-quantity-selector {
  border: 1px solid var(--hs-gray-300) !important;
  border-radius: 999px !important;
  padding: 0 !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  background: #fff;
}
body.hs-theme .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
  width: 44px !important;
  text-align: center !important;
  border: 0 !important;
  font-weight: 700 !important;
  background: transparent !important;
  color: var(--hs-navy);
  height: 36px !important;
  padding: 0 !important;
}
body.hs-theme .wc-block-components-quantity-selector__button {
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--hs-water-dark) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
body.hs-theme .wc-block-components-quantity-selector__button:hover {
  background: var(--hs-ice) !important;
  color: var(--hs-navy) !important;
}

/* "Eliminar" link más sutil */
body.hs-theme .wc-block-cart-item__remove-link,
body.hs-theme button.wc-block-cart-item__remove-link {
  color: var(--hs-gray-500) !important;
  font-size: 0.78rem !important;
  text-decoration: none !important;
  margin-top: 6px !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
}
body.hs-theme .wc-block-cart-item__remove-link:hover {
  color: #dc2626 !important;
}

/* Cart classic: misma transformación para el shop_table */
body.hs-theme .woocommerce-cart-form table.shop_table_responsive thead th {
  background: transparent !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hs-gray-500) !important;
  font-weight: 700;
  border-bottom: 1px solid var(--hs-gray-200) !important;
}
body.hs-theme .woocommerce-cart-form table.shop_table_responsive {
  border: 0 !important;
  border-radius: 0 !important;
}
body.hs-theme .woocommerce-cart-form .cart_item td {
  border-top: 1px solid var(--hs-gray-100) !important;
  padding: 18px 12px !important;
}

/* SIDEBAR DE TOTALES — card con profundidad */
body.hs-theme .wc-block-components-sidebar-layout__sidebar > div,
body.hs-theme .wp-block-woocommerce-cart-order-summary-block,
body.hs-theme .cart-collaterals .cart_totals {
  background: #fff !important;
  border: 1px solid var(--hs-gray-200) !important;
  border-radius: 16px !important;
  padding: 24px 24px !important;
  box-shadow: 0 8px 28px -16px rgba(33,62,92,0.18) !important;
}

/* Título del sidebar de totales — SIN pseudo-elemento, usamos border-left
   sobre el propio título (el bloque WC tiene su propio indicador y se
   solapaba con un ::before adicional). */
body.hs-theme .wc-block-cart__totals-title,
body.hs-theme .cart_totals h2,
body.hs-theme .cart-collaterals .cart_totals h2 {
  font-family: var(--hs-font-heading);
  font-size: 1.1rem !important;
  font-weight: 800;
  color: var(--hs-navy) !important;
  margin: 0 0 18px !important;
  padding: 4px 0 4px 14px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border: 0 !important;
  border-left: 4px solid var(--hs-water) !important;
  border-radius: 0 !important;
  display: block;
  background: transparent !important;
  line-height: 1.3 !important;
}
/* Neutralizar cualquier ::before/::after que añada el bloque WC por defecto */
body.hs-theme .wc-block-cart__totals-title::before,
body.hs-theme .wc-block-cart__totals-title::after,
body.hs-theme .cart_totals h2::before,
body.hs-theme .cart_totals h2::after {
  content: none !important;
  display: none !important;
}

/* Filas del totales */
body.hs-theme .wc-block-components-totals-item,
body.hs-theme .cart_totals .shop_table tr {
  display: flex !important;
  justify-content: space-between !important;
  padding: 8px 0 !important;
  font-size: 0.92rem;
}
body.hs-theme .wc-block-components-totals-item__label,
body.hs-theme .cart_totals .shop_table th {
  color: var(--hs-gray-700) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body.hs-theme .wc-block-components-totals-item__value,
body.hs-theme .cart_totals .shop_table td {
  color: var(--hs-navy) !important;
  font-weight: 700 !important;
}

/* Total estimado / final destacado */
body.hs-theme .wc-block-components-totals-footer-item,
body.hs-theme .cart_totals tr.order-total {
  border-top: 1px solid var(--hs-gray-200) !important;
  padding-top: 16px !important;
  margin-top: 10px !important;
}
body.hs-theme .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.hs-theme .cart_totals tr.order-total th {
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: var(--hs-navy) !important;
}
body.hs-theme .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body.hs-theme .cart_totals tr.order-total td {
  font-size: 1.4rem !important;
  font-weight: 900 !important;
  color: var(--hs-navy) !important;
}

/* CTA "Finalizar compra" — botón XL azul agua con flecha */
body.hs-theme .wc-block-cart__submit-button,
body.hs-theme .wc-proceed-to-checkout .checkout-button,
body.hs-theme a.checkout-button.button.alt.wc-forward {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100% !important;
  background: var(--hs-water-dark) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 16px 24px !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  margin-top: 18px !important;
  box-shadow: 0 12px 28px -8px rgba(58,164,213,0.45);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  text-decoration: none !important;
}
body.hs-theme .wc-block-cart__submit-button:hover,
body.hs-theme .wc-proceed-to-checkout .checkout-button:hover {
  background: var(--hs-navy) !important;
  transform: translateY(-1px);
  box-shadow: 0 16px 36px -10px rgba(33,62,92,0.55);
}
body.hs-theme .wc-block-cart__submit-button::after {
  content: "→";
  font-weight: 700;
  margin-left: 4px;
}

/* TRUST BADGES debajo del CTA — los inyectamos vía pseudo-content si hace falta */
body.hs-theme .wc-block-cart__sidebar::after,
body.hs-theme .cart-collaterals .cart_totals::after {
  content: "";
  display: block;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(58,164,213,0.08), rgba(58,164,213,0.02));
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='none' stroke='%233aa4d5' stroke-width='2.5' stroke-linecap='round'><polyline points='20 6 9 17 4 12'/></svg>"),
    linear-gradient(135deg, rgba(58,164,213,0.08), rgba(58,164,213,0.02));
  background-repeat: no-repeat;
  background-position: 16px center, 0 0;
  padding-left: 44px;
  color: var(--hs-navy);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.4;
}

/* "Continuar comprando" link bajo el sidebar */
body.hs-theme .return-to-shop a,
body.hs-theme .wc-block-cart__return-link,
body.hs-theme .wc-block-cart-buttons__return-to-shop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--hs-water-dark);
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: 16px;
  text-decoration: none;
  transition: color 0.2s, gap 0.2s;
}
body.hs-theme .return-to-shop a:hover,
body.hs-theme .wc-block-cart__return-link:hover {
  color: var(--hs-navy);
  gap: 10px;
}

/* Cross-sells (productos relacionados al carrito) — limitar a 4 columnas */
body.hs-theme .cross-sells {
  margin-top: 50px;
  padding-top: 30px;
  border-top: 1px solid var(--hs-gray-200);
}
body.hs-theme .cross-sells h2 {
  font-family: var(--hs-font-heading);
  font-size: 1.4rem;
  color: var(--hs-navy);
  font-weight: 800;
  margin-bottom: 20px;
}
body.hs-theme .cross-sells ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  list-style: none !important;
  padding: 0 !important;
}
@media (max-width: 900px) {
  body.hs-theme .cross-sells ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Mensaje "Tu carrito está vacío" más amable */
body.hs-theme .wc-block-cart__empty-cart__title,
body.hs-theme .cart-empty {
  text-align: center;
  font-size: 1.4rem;
  color: var(--hs-navy);
  margin: 24px 0 10px !important;
}

/* SEPARADOR sutil arriba del totales */
body.hs-theme .wc-block-components-panel {
  border-top: 1px solid var(--hs-gray-100) !important;
  padding-top: 14px !important;
  margin-top: 14px !important;
}

/* Garantía/envío resumen explícitos en el sidebar (hint de confianza) */
body.hs-theme .wc-block-components-shipping-rates-control {
  background: var(--hs-ice);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 10px 0;
  font-size: 0.88rem;
}

/* Mobile: la sidebar va abajo, full width */
@media (max-width: 1023px) {
  body.hs-theme.woocommerce-cart .wp-block-woocommerce-cart {
    display: block !important;
  }
  body.hs-theme.woocommerce-cart .wc-block-components-sidebar-layout__sidebar > div {
    margin-top: 24px;
  }
}

/* Las páginas de carrito y checkout necesitan el container ANCHO,
   no el "narrow" que se aplica por defecto en page.php. Forzamos width
   ancho cuando estamos en carrito/checkout. */
body.hs-theme.woocommerce-cart .hs-page-inner,
body.hs-theme.woocommerce-checkout .hs-page-inner,
body.hs-theme.woocommerce-cart .hs-container-narrow,
body.hs-theme.woocommerce-checkout .hs-container-narrow {
  max-width: var(--hs-container) !important;
}

/* Y las cabeceras tipográficas un pelín más justas */
body.hs-theme.woocommerce-cart .hs-page-header,
body.hs-theme.woocommerce-checkout .hs-page-header {
  margin-bottom: 24px;
}

/* --- TRUST BADGES INYECTADOS EN EL SIDEBAR DEL CARRITO --------------- */
body.hs-theme .hs-cart-trust {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(58,164,213,0.08), rgba(58,164,213,0.02));
  border: 1px solid rgba(58,164,213,0.18);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.hs-theme .hs-cart-trust-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--hs-gray-700);
}
body.hs-theme .hs-cart-trust-row svg {
  color: var(--hs-water);
  flex-shrink: 0;
  margin-top: 1px;
}
body.hs-theme .hs-cart-trust-row strong {
  color: var(--hs-navy);
  font-weight: 700;
}
body.hs-theme .hs-cart-trust-help {
  font-size: 0.82rem;
  color: var(--hs-gray-700);
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid rgba(58,164,213,0.18);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
body.hs-theme .hs-cart-trust-help a {
  color: var(--hs-water-dark);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
body.hs-theme .hs-cart-trust-help a:hover {
  color: var(--hs-navy);
}

/* "Seguir comprando" — link bajo el sidebar */
body.hs-theme .hs-cart-keep-shopping {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid var(--hs-gray-200);
  border-radius: 999px;
  color: var(--hs-water-dark);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  background: #fff;
  transition: border-color 0.2s, background 0.2s, color 0.2s, gap 0.2s;
}
body.hs-theme .hs-cart-keep-shopping:hover {
  border-color: var(--hs-water);
  background: var(--hs-ice);
  color: var(--hs-navy);
  gap: 10px;
}

/* Quitar el ::after duplicado de v2.11 (los badges ya van como HTML real) */
body.hs-theme .wc-block-cart__sidebar::after,
body.hs-theme .cart-collaterals .cart_totals::after {
  content: none !important;
  display: none !important;
}

/* End v2.11 */

/* =========================================================================
   v2.12 — REDISEÑO CHECKOUT (estética moderna + CRO)
   - Quitar barras azules ::before solapadas en cada título de paso
   - Sustituir por accent border-left propio con padding correcto
   - Radio cards (Enviar / Recogida) con hover, selected, animación
   - Inputs grandes y modernos con focus visible
   - Dirección guardada como card con CTA "Editar" sutil
   - Opciones de envío con check animado
   - Pago destacado (Redsys / Bizum / Transferencia)
   - Steps indicator opcional encima
   - Sticky sidebar resumen del pedido
   - Trust badges + soporte en footer del sidebar
   ========================================================================= */

/* --- KILL: barras ::before del bloque WC checkout que se solapan ------- */
body.hs-theme .wc-block-components-title.wc-block-components-checkout-step__title::before,
body.hs-theme .wc-block-components-checkout-step__title::before,
body.hs-theme .wc-block-components-checkout-step::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  background: transparent !important;
}

/* --- Títulos de paso del checkout: número + título grande ------------- */
body.hs-theme .wc-block-components-checkout-step__title,
body.hs-theme .wp-block-woocommerce-checkout-contact-information-block .wc-block-components-title,
body.hs-theme .wp-block-woocommerce-checkout-shipping-method-block .wc-block-components-title,
body.hs-theme .wp-block-woocommerce-checkout-shipping-address-block .wc-block-components-title,
body.hs-theme .wp-block-woocommerce-checkout-billing-address-block .wc-block-components-title,
body.hs-theme .wp-block-woocommerce-checkout-payment-block .wc-block-components-title,
body.hs-theme .wp-block-woocommerce-checkout-order-note-block .wc-block-components-title,
body.hs-theme .wp-block-woocommerce-checkout-shipping-methods-block .wc-block-components-title {
  font-family: var(--hs-font-heading) !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: var(--hs-navy) !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  position: relative !important;
}

/* Cada paso del checkout como una card limpia con espaciado generoso */
body.hs-theme .wc-block-components-checkout-step {
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: 16px;
  padding: 24px 26px !important;
  margin-bottom: 18px !important;
  box-shadow: 0 1px 0 rgba(33,62,92,0.02);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
body.hs-theme .wc-block-components-checkout-step:hover {
  border-color: var(--hs-gray-300);
  box-shadow: 0 8px 24px -16px rgba(33,62,92,0.18);
}
body.hs-theme .wc-block-components-checkout-step__description {
  color: var(--hs-gray-600);
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 0 0 16px !important;
}

/* --- INPUTS modernos (email, nombre, etc.) ---------------------------- */
body.hs-theme .wc-block-components-text-input input,
body.hs-theme .wp-block-woocommerce-checkout input[type="text"],
body.hs-theme .wp-block-woocommerce-checkout input[type="email"],
body.hs-theme .wp-block-woocommerce-checkout input[type="tel"] {
  border: 1px solid var(--hs-gray-300) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  height: 52px !important;
  line-height: 1.3 !important;
  font-size: 1rem !important;
  background: #fff !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--hs-gray-800) !important;
  width: 100% !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body.hs-theme .wc-block-components-text-input input:hover,
body.hs-theme .wp-block-woocommerce-checkout input:hover {
  border-color: var(--hs-gray-400) !important;
}
body.hs-theme .wc-block-components-text-input input:focus,
body.hs-theme .wp-block-woocommerce-checkout input:focus {
  border-color: var(--hs-water) !important;
  box-shadow: 0 0 0 3px rgba(58,164,213,0.18) !important;
}

/* --- ENTREGA: radio cards "Enviar" / "Recogida en tienda" -------------- */
body.hs-theme .wc-block-checkout__shipping-method,
body.hs-theme .wc-block-checkout__shipping-method-container {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 14px !important;
}
body.hs-theme .wc-block-checkout__shipping-method-option {
  position: relative;
  padding: 18px 22px !important;
  border: 2px solid var(--hs-gray-200) !important;
  border-radius: 14px !important;
  background: #fff !important;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  color: var(--hs-navy);
  text-align: center;
  min-height: 64px;
}
body.hs-theme .wc-block-checkout__shipping-method-option:hover {
  border-color: var(--hs-water) !important;
  background: rgba(58,164,213,0.04) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -16px rgba(33,62,92,0.25);
}
body.hs-theme .wc-block-checkout__shipping-method-option--selected,
body.hs-theme .wc-block-checkout__shipping-method-option.is-active,
body.hs-theme .wc-block-checkout__shipping-method-option[aria-pressed="true"] {
  border-color: var(--hs-water-dark) !important;
  background: linear-gradient(135deg, rgba(58,164,213,0.10), rgba(58,164,213,0.04)) !important;
  box-shadow: 0 0 0 4px rgba(58,164,213,0.12);
}
body.hs-theme .wc-block-checkout__shipping-method-option--selected::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 12px;
  width: 22px;
  height: 22px;
  background: var(--hs-water-dark);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
}
body.hs-theme .wc-block-checkout__shipping-method-option svg {
  color: currentColor;
}

/* --- DIRECCIÓN guardada como card limpia con "Editar" ----------------- */
body.hs-theme .wc-block-components-address-card {
  border: 1px solid var(--hs-gray-200) !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  background: var(--hs-gray-50) !important;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
body.hs-theme .wc-block-components-address-card__address {
  color: var(--hs-gray-800);
  line-height: 1.5;
}
body.hs-theme .wc-block-components-address-card__address strong {
  color: var(--hs-navy);
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}
body.hs-theme .wc-block-components-address-card__edit,
body.hs-theme button.wc-block-components-address-card__edit {
  color: var(--hs-water-dark) !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  background: transparent !important;
  border: 0 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
body.hs-theme .wc-block-components-address-card__edit:hover {
  background: var(--hs-ice) !important;
  color: var(--hs-navy) !important;
}

/* --- "Usar la misma dirección para facturación" — checkbox grande ----- */
body.hs-theme .wc-block-components-checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 14px 0 !important;
  font-weight: 500;
  color: var(--hs-gray-700);
  cursor: pointer;
}
body.hs-theme .wc-block-components-checkbox__input,
body.hs-theme input[type="checkbox"].wc-block-components-checkbox__input {
  width: 22px !important;
  height: 22px !important;
  border: 2px solid var(--hs-gray-300) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s;
}
body.hs-theme .wc-block-components-checkbox__input:checked {
  background: var(--hs-water-dark) !important;
  border-color: var(--hs-water-dark) !important;
}

/* --- OPCIONES DE ENVÍO: cada radio como una pill con check ------------ */
body.hs-theme .wc-block-components-radio-control,
body.hs-theme .wc-block-components-shipping-rates-control__package {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
body.hs-theme .wc-block-components-radio-control__option,
body.hs-theme .wc-block-components-radio-control-accordion-option {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  border: 1px solid var(--hs-gray-200) !important;
  border-radius: 12px !important;
  background: #fff !important;
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 0 !important;
}
body.hs-theme .wc-block-components-radio-control__option:hover {
  border-color: var(--hs-water) !important;
  background: rgba(58,164,213,0.03) !important;
}
body.hs-theme .wc-block-components-radio-control__option--checked,
body.hs-theme .wc-block-components-radio-control__option:has(input:checked) {
  border-color: var(--hs-water-dark) !important;
  background: linear-gradient(135deg, rgba(58,164,213,0.08), rgba(58,164,213,0.02)) !important;
  box-shadow: 0 0 0 3px rgba(58,164,213,0.10);
}
body.hs-theme .wc-block-components-radio-control__option input[type="radio"] {
  appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--hs-gray-300);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
  flex-shrink: 0;
  margin-right: 12px;
}
body.hs-theme .wc-block-components-radio-control__option input[type="radio"]:checked {
  border-color: var(--hs-water-dark);
  background: #fff;
}
body.hs-theme .wc-block-components-radio-control__option input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--hs-water-dark);
}
body.hs-theme .wc-block-components-radio-control__label {
  flex: 1;
  font-weight: 600;
  color: var(--hs-navy);
}
body.hs-theme .wc-block-components-radio-control__secondary-label {
  font-weight: 700;
  color: var(--hs-water-dark);
}
/* Si el envío es GRATIS, hacerlo destacar en verde */
body.hs-theme .wc-block-components-radio-control__option:has(.wc-block-components-radio-control__secondary-label:contains("GRATIS")) .wc-block-components-radio-control__secondary-label,
body.hs-theme .wc-block-components-radio-control__secondary-label[data-free="true"] {
  color: var(--hs-green) !important;
}

/* --- PAGO: bloques de método con icono y descripción ------------------ */
body.hs-theme .wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option {
  padding: 18px 22px !important;
}
body.hs-theme .wc-block-components-payment-method-icons {
  display: inline-flex !important;
  gap: 8px;
  margin-left: 8px;
  align-items: center;
}
body.hs-theme .wc-block-components-payment-method-icons img {
  height: 24px;
  width: auto;
  border: 1px solid var(--hs-gray-200);
  border-radius: 4px;
  padding: 2px 4px;
  background: #fff;
}

/* --- BOTÓN "Continuar en la pasarela de pago" — XL agua oscura -------- */
body.hs-theme .wc-block-components-checkout-place-order-button,
body.hs-theme .wp-block-woocommerce-checkout-actions-block button,
body.hs-theme button.wc-block-components-button.contained {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  background: var(--hs-water-dark) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 18px 28px !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  margin-top: 8px !important;
  box-shadow: 0 14px 32px -8px rgba(58,164,213,0.5) !important;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s !important;
  text-decoration: none !important;
  cursor: pointer;
}
body.hs-theme .wc-block-components-checkout-place-order-button:hover,
body.hs-theme button.wc-block-components-button.contained:hover {
  background: var(--hs-navy) !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -10px rgba(33,62,92,0.55) !important;
}
body.hs-theme .wc-block-components-checkout-place-order-button:active {
  transform: translateY(0);
}

/* "Volver al carrito" link suavizado */
body.hs-theme .wc-block-components-checkout-return-to-cart-button,
body.hs-theme a.wc-block-components-button.text {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  color: var(--hs-water-dark) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font-size: 0.92rem !important;
  transition: color 0.2s, gap 0.2s;
}
body.hs-theme .wc-block-components-checkout-return-to-cart-button:hover {
  color: var(--hs-navy) !important;
  gap: 10px;
}

/* --- LAYOUT: respetamos el flex/container layout nativo de WC, solo
   ajustamos los anchos y la sticky sidebar.
   IMPORTANTE: WC usa @container queries con width:65%/35% en main y
   sidebar. Si forzamos grid, ese 35% se calcula sobre el grid-track y
   reduce la sidebar a ~140px. Mejor solo forzamos los porcentajes. */
body.hs-theme.woocommerce-checkout .wp-block-woocommerce-checkout {
  display: block !important;
}
@media (min-width: 1024px) {
  body.hs-theme.woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 36px !important;
    align-items: flex-start !important;
    max-width: 100% !important;
  }
  body.hs-theme.woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout > .wc-block-components-main {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: calc(100% - 400px - 36px) !important;
    width: auto !important;
  }
  body.hs-theme.woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout > .wc-block-components-sidebar {
    flex: 0 0 380px !important;
    width: 380px !important;
    max-width: 380px !important;
    min-width: 0 !important;
    position: sticky !important;
    top: 100px !important;
    align-self: flex-start !important;
  }
  body.hs-theme.woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout > .wc-block-components-notices,
  body.hs-theme.woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout > .with-scroll-to-top__scroll-point {
    flex-basis: 100% !important;
    width: 100% !important;
  }
}
@media (max-width: 1023px) {
  body.hs-theme.woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout {
    display: block !important;
  }
  body.hs-theme.woocommerce-checkout .wc-block-components-sidebar,
  body.hs-theme.woocommerce-checkout .wc-block-components-main {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Snackbar de notificaciones — fuera del flow para no romper layout */
body.hs-theme.woocommerce-checkout .wc-block-components-notices__snackbar {
  position: fixed !important;
  bottom: 16px !important;
  left: 16px !important;
  right: auto !important;
  z-index: 9999;
  width: auto !important;
  max-width: 90vw !important;
}

/* --- ORDER SUMMARY: que no rompa los nombres letra a letra ----------- */
body.hs-theme .wc-block-components-product-name,
body.hs-theme .wc-block-components-order-summary-item__title {
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
  line-height: 1.35 !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: var(--hs-navy) !important;
  white-space: normal !important;
}
body.hs-theme .wc-block-components-order-summary-item__total-price,
body.hs-theme .wc-block-components-order-summary-item .wc-block-components-product-price {
  white-space: nowrap !important;
  font-weight: 700 !important;
}

/* Sidebar del resumen de checkout: card */
body.hs-theme .wp-block-woocommerce-checkout-totals-block,
body.hs-theme .wp-block-woocommerce-checkout-order-summary-block {
  background: #fff !important;
  border: 1px solid var(--hs-gray-200) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 8px 28px -16px rgba(33,62,92,0.18) !important;
}

/* Item del resumen: thumbnail + nombre + precio */
body.hs-theme .wc-block-components-order-summary-item {
  display: grid !important;
  grid-template-columns: 64px 1fr auto !important;
  gap: 12px !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--hs-gray-100) !important;
  align-items: center;
}
body.hs-theme .wc-block-components-order-summary-item:last-child { border-bottom: 0 !important; }
body.hs-theme .wc-block-components-order-summary-item__image,
body.hs-theme .wc-block-components-order-summary-item__image img {
  width: 60px !important;
  height: 60px !important;
  object-fit: contain !important;
  border-radius: 10px;
  border: 1px solid var(--hs-gray-200);
  background: var(--hs-gray-50);
  padding: 4px;
}
body.hs-theme .wc-block-components-order-summary-item__quantity {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--hs-water-dark);
  color: #fff;
  font-weight: 800;
  font-size: 0.74rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

/* --- STEP INDICATOR (1.Carrito → 2.Datos → 3.Pago) -------------------- */
body.hs-theme .hs-checkout-steps {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 24px;
  font-size: 0.86rem;
  color: var(--hs-gray-500);
  flex-wrap: wrap;
}
body.hs-theme .hs-checkout-steps .step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.hs-theme .hs-checkout-steps .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--hs-gray-300);
  font-weight: 700;
  font-size: 0.74rem;
  background: #fff;
}
body.hs-theme .hs-checkout-steps .step.is-done .step-num {
  background: var(--hs-water-dark);
  border-color: var(--hs-water-dark);
  color: #fff;
}
body.hs-theme .hs-checkout-steps .step.is-current .step-num {
  background: var(--hs-navy);
  border-color: var(--hs-navy);
  color: #fff;
}
body.hs-theme .hs-checkout-steps .step.is-current .step-label {
  color: var(--hs-navy);
  font-weight: 700;
}
body.hs-theme .hs-checkout-steps .step-arrow {
  color: var(--hs-gray-300);
  font-weight: 600;
}

/* --- TÉRMINOS Y CONDICIONES — más legible ----------------------------- */
body.hs-theme .wc-block-checkout__terms,
body.hs-theme .wc-block-components-checkout-terms {
  font-size: 0.84rem;
  color: var(--hs-gray-700);
  background: var(--hs-ice);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
body.hs-theme .wc-block-components-checkout-terms a {
  color: var(--hs-water-dark);
  font-weight: 700;
}

/* --- TAX INFO debajo del total ---------------------------------------- */
body.hs-theme .wc-block-components-totals-taxes {
  font-size: 0.82rem;
  color: var(--hs-gray-500);
  margin-top: 4px;
}

/* --- TRUST BADGES bajo el sidebar de checkout ------------------------- */
body.hs-theme.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block + .hs-cart-trust,
body.hs-theme.woocommerce-checkout .wc-block-components-sidebar-layout__sidebar .hs-cart-trust {
  margin-top: 18px;
}

/* --- ENTRADA del email del bloque "Información de contacto" ----------- */
body.hs-theme .wc-block-checkout__contact-fields {
  margin-top: 8px;
}

/* --- ANIMATION: micro-fade in steps al cargar ------------------------- */
@keyframes hsStepIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.hs-theme .wc-block-components-checkout-step {
  animation: hsStepIn 0.45s ease both;
}
body.hs-theme .wc-block-components-checkout-step:nth-child(1) { animation-delay: 0.05s; }
body.hs-theme .wc-block-components-checkout-step:nth-child(2) { animation-delay: 0.10s; }
body.hs-theme .wc-block-components-checkout-step:nth-child(3) { animation-delay: 0.15s; }
body.hs-theme .wc-block-components-checkout-step:nth-child(4) { animation-delay: 0.20s; }
body.hs-theme .wc-block-components-checkout-step:nth-child(5) { animation-delay: 0.25s; }

@media (prefers-reduced-motion: reduce) {
  body.hs-theme .wc-block-components-checkout-step { animation: none !important; }
  body.hs-theme .wc-block-checkout__shipping-method-option:hover { transform: none !important; }
}

/* --- KILL barras blue accent en TODOS los wc-block-components-title que
       aún las generen (titulares de bloques internos del checkout) ----- */
body.hs-theme .wc-block-components-title::before,
body.hs-theme .wc-block-components-title::after,
body.hs-theme h2.wc-block-components-title::before,
body.hs-theme h3.wc-block-components-title::before {
  content: none !important;
  display: none !important;
}

/* End v2.12 */

/* =========================================================================
   v2.13 — AUDITORÍA GLOBAL DE ESTÉTICA + CRO
   ─────────────────────────────────────────────────────────────────────────
   Cambios sistémicos para que toda la web sea coherente, profesional y
   esté optimizada para conversión. Cubre:
   1. HEADER: quitar línea bajo el menú, unificar el bloque entero
   2. TOPBAR: spacing y separadores consistentes
   3. SECCIONES: unificar paddings, eyebrow chips, títulos
   4. CARDS de producto: hover, badges, tipografía
   5. BOTONES: jerarquía clara (primary/secondary/ghost)
   6. CHIPS y BADGES: consistencia
   7. TIENDA: anchos, "Mostrando X de Y" sin duplicar, filtros
   8. PRE-FOOTER + FOOTER: separación, acceso, social proof
   9. SCROLL: reducir el "salto" visual entre secciones
   10. ACCESIBILIDAD: focus visible, contrastes, motion
   ========================================================================= */

/* --- 1) HEADER: quitar línea/sombra bajo el mega-nav ------------------ */
/* La línea + shadow que separaba la barra de navegación del contenido era
   el origen del "borde" que el usuario percibía debajo del menú. Para que
   todo el bloque (topbar + logo + nav) lea como UNA pieza limpia, los
   reemplazamos por una sombra muy sutil SOLO al hacer scroll (sticky). */
body.hs-theme .hs-mega-nav {
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.hs-theme .hs-header,
body.hs-theme .hs-mega-nav,
body.hs-theme .hs-topbar {
  background: var(--hs-white, #fff);
}
body.hs-theme .hs-topbar {
  background: var(--hs-navy) !important;
}
/* Sombra elegante SOLO cuando el header está en estado sticky */
body.hs-theme .hs-header.is-stuck,
body.hs-theme .hs-header[data-stuck="true"],
body.hs-theme .hs-mega-nav.is-stuck {
  box-shadow: 0 8px 28px -16px rgba(33, 62, 92, 0.18) !important;
}

/* Topbar: separadores entre items con un punto (·) en lugar de la barra
   visual; aumentamos un poco el spacing y bajamos el tamaño en móvil */
body.hs-theme .hs-topbar a,
body.hs-theme .hs-topbar span {
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}
body.hs-theme .hs-topbar a:hover { color: #fff; opacity: 0.92; }

/* Mega-nav: enlaces con micro-underline animado (CRO: feedback visual) */
body.hs-theme .hs-mega-nav a {
  position: relative;
  transition: color 0.2s ease;
}
body.hs-theme .hs-mega-nav > nav a::after,
body.hs-theme .hs-mega-nav-inner > nav a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  background: var(--hs-water);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
  border-radius: 2px;
  pointer-events: none;
}
body.hs-theme .hs-mega-nav > nav a:hover::after,
body.hs-theme .hs-mega-nav > nav a.is-active::after,
body.hs-theme .hs-mega-nav > nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* CTA "Asesoría gratuita" en el header: pill agua con icono */
body.hs-theme .hs-header-asesoria,
body.hs-theme .hs-mega-nav-asesoria {
  box-shadow: 0 8px 22px -10px rgba(58, 164, 213, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
body.hs-theme .hs-header-asesoria:hover,
body.hs-theme .hs-mega-nav-asesoria:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(58, 164, 213, 0.55);
}

/* Carrito icono: badge contador estilizado */
body.hs-theme .hs-cart-link .hs-cart-count,
body.hs-theme .hs-header-cart-count {
  background: var(--hs-brand-espa);
  color: #fff;
  font-weight: 800;
  font-size: 0.7rem;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* --- 2) BUSCADOR DEL HEADER: focus elegante + altura coherente ------- */
body.hs-theme .hs-header-search input,
body.hs-theme .hs-header-search-input {
  height: 42px !important;
  border-radius: 999px !important;
  padding: 0 18px 0 44px !important;
  border: 1px solid var(--hs-gray-200) !important;
  background: var(--hs-gray-50) !important;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
body.hs-theme .hs-header-search input:focus,
body.hs-theme .hs-header-search-input:focus {
  background: #fff !important;
  border-color: var(--hs-water) !important;
  box-shadow: 0 0 0 3px rgba(58, 164, 213, 0.18) !important;
  outline: 0;
}

/* --- 3) SECCIONES: paddings y eyebrow chips homogéneos --------------- */
body.hs-theme section[class*="hs-"],
body.hs-theme section.hs-section {
  /* Asegurar que entre secciones haya respiración consistente */
}
body.hs-theme .hs-section-eyebrow {
  display: inline-block;
  font-size: 0.74rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--hs-water-dark) !important;
  font-weight: 800 !important;
  margin-bottom: 8px !important;
}
body.hs-theme .hs-section-eyebrow::before {
  content: "•";
  margin-right: 8px;
  color: var(--hs-water);
  font-size: 1.2em;
  line-height: 0;
  vertical-align: middle;
}
body.hs-theme .hs-section-header h2,
body.hs-theme h2.hs-section-title {
  font-family: var(--hs-font-heading);
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  font-weight: 800 !important;
  color: var(--hs-navy) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.15 !important;
  margin: 0 0 12px !important;
}
body.hs-theme .hs-section-lead {
  font-size: 1rem !important;
  line-height: 1.55 !important;
  color: var(--hs-gray-700) !important;
  max-width: 640px;
}
/* Cuando el lead va dentro de una header centrada, lo centramos también */
body.hs-theme .hs-section-header[style*="text-align: center"] .hs-section-lead,
body.hs-theme .hs-section-header.is-centered .hs-section-lead {
  margin-left: auto;
  margin-right: auto;
}

/* --- 4) CARDS DE PRODUCTO (loop genérico WooCommerce) ---------------- */
body.hs-theme ul.products li.product {
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: 14px;
  padding: 14px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}
body.hs-theme ul.products li.product:hover {
  transform: translateY(-4px);
  border-color: var(--hs-water);
  box-shadow: 0 18px 40px -16px rgba(33, 62, 92, 0.22);
}
body.hs-theme ul.products li.product img,
body.hs-theme ul.products li.product .attachment-woocommerce_thumbnail {
  border-radius: 10px;
  background: var(--hs-gray-50);
  margin-bottom: 12px;
  aspect-ratio: 1;
  object-fit: contain;
  width: 100%;
  height: auto;
  padding: 8px;
}
body.hs-theme ul.products li.product .woocommerce-loop-product__title {
  font-size: 0.94rem !important;
  font-weight: 700 !important;
  color: var(--hs-navy) !important;
  line-height: 1.35 !important;
  margin: 0 0 6px !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
body.hs-theme ul.products li.product .price {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.95rem;
}
body.hs-theme ul.products li.product .price del {
  color: var(--hs-gray-500);
  font-size: 0.82rem;
  text-decoration: line-through;
  font-weight: 500;
}
body.hs-theme ul.products li.product .price ins,
body.hs-theme ul.products li.product .price .hs-price-new {
  color: var(--hs-water-dark) !important;
  font-weight: 800 !important;
  font-size: 1rem;
  text-decoration: none;
}

/* Badges OFERTA / EN STOCK */
body.hs-theme ul.products li.product .onsale,
body.hs-theme ul.products li.product .hs-badge-sale {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--hs-brand-espa);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(227, 6, 19, 0.3);
  z-index: 2;
}
body.hs-theme ul.products li.product .hs-badge-stock {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--hs-green);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 2;
}

/* Botón "Añadir al carrito" del loop */
body.hs-theme ul.products li.product .button,
body.hs-theme ul.products li.product .add_to_cart_button {
  margin-top: 10px !important;
  width: 100%;
  background: var(--hs-water-dark) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  text-decoration: none !important;
  text-align: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
body.hs-theme ul.products li.product .button:hover {
  background: var(--hs-navy) !important;
  transform: translateY(-1px);
}

/* --- 5) BOTONES: jerarquía global ------------------------------------ */
body.hs-theme .hs-btn,
body.hs-theme .hs-btn-xl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
body.hs-theme .hs-btn-xl {
  padding: 14px 28px;
  font-size: 1rem;
}
body.hs-theme .hs-btn,
body.hs-theme .hs-btn:not(.hs-btn-ghost-light):not(.hs-btn-outline) {
  background: var(--hs-water-dark);
  color: #fff;
}
body.hs-theme .hs-btn:hover:not(.hs-btn-ghost-light):not(.hs-btn-outline) {
  background: var(--hs-navy);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(58, 164, 213, 0.45);
}
body.hs-theme .hs-btn-outline {
  background: transparent !important;
  color: var(--hs-navy) !important;
  border: 1.5px solid var(--hs-gray-300) !important;
}
body.hs-theme .hs-btn-outline:hover {
  border-color: var(--hs-water) !important;
  color: var(--hs-water-dark) !important;
  background: rgba(58, 164, 213, 0.04) !important;
}
body.hs-theme .hs-btn-ghost-light {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(6px);
}
body.hs-theme .hs-btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}

/* Focus visible accesible para todos los botones */
body.hs-theme .hs-btn:focus-visible,
body.hs-theme button:focus-visible,
body.hs-theme a:focus-visible {
  outline: 3px solid rgba(58, 164, 213, 0.5);
  outline-offset: 3px;
}

/* --- 6) CHIPS / TRUST CHIPS / TAGS ----------------------------------- */
body.hs-theme .hs-trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
  transition: background 0.2s ease;
}
body.hs-theme .hs-trust-chip:hover {
  background: rgba(255, 255, 255, 0.16);
}
body.hs-theme .hs-trust-chip > span:first-child {
  color: var(--hs-water);
  font-weight: 800;
}

/* --- 7) TIENDA (shop archive): "Mostrando" sin duplicar -------------- */
/* La cabecera de WooCommerce inserta dos veces el "Mostrando 1-24 de X
   resultados" — uno antes del título de tienda y otro arriba del grid.
   Ocultamos el primero (queda solo el del grid, mejor contextualizado). */
body.hs-theme .woocommerce-products-header + .woocommerce-result-count,
body.hs-theme .woocommerce-products-header > .woocommerce-result-count,
body.hs-theme .hs-shop-wrap > .woocommerce-result-count:first-of-type {
  display: none !important;
}
/* "Orden predeterminado" select estilizado */
body.hs-theme .woocommerce-ordering select,
body.hs-theme select.orderby {
  height: 42px !important;
  border: 1px solid var(--hs-gray-300) !important;
  border-radius: 999px !important;
  padding: 0 36px 0 16px !important;
  font-size: 0.9rem !important;
  background: #fff !important;
  color: var(--hs-navy) !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
body.hs-theme .woocommerce-ordering select:focus {
  border-color: var(--hs-water) !important;
  box-shadow: 0 0 0 3px rgba(58, 164, 213, 0.18) !important;
}

/* Sidebar de filtros: secciones tipo card */
body.hs-theme .hs-shop-sidebar > section,
body.hs-theme .hs-shop-sidebar .widget {
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
body.hs-theme .hs-shop-sidebar h3,
body.hs-theme .hs-shop-sidebar .widget-title {
  font-size: 0.78rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--hs-gray-500) !important;
  font-weight: 800 !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
}
body.hs-theme .hs-shop-sidebar a,
body.hs-theme .hs-shop-sidebar li {
  font-size: 0.92rem;
  color: var(--hs-gray-700);
  line-height: 1.6;
}
body.hs-theme .hs-shop-sidebar a:hover {
  color: var(--hs-water-dark);
}
body.hs-theme .hs-shop-sidebar .count {
  color: var(--hs-gray-500);
  font-size: 0.84rem;
  font-weight: 500;
}

/* --- 8) PRE-FOOTER ("¿Dudas técnicas?") + FOOTER --------------------- */
body.hs-theme .hs-prefooter,
body.hs-theme .hs-footer-cta {
  background: linear-gradient(135deg, #16283A 0%, #213E5C 100%);
  color: #fff;
  padding: clamp(48px, 6vw, 72px) 0;
  text-align: center;
}
body.hs-theme .hs-prefooter h2,
body.hs-theme .hs-footer-cta h2 {
  font-size: clamp(1.6rem, 3vw, 2rem) !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 0 12px !important;
}
body.hs-theme .hs-prefooter p,
body.hs-theme .hs-footer-cta p {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 1rem !important;
  margin-bottom: 20px;
}
body.hs-theme .hs-prefooter .hs-btn,
body.hs-theme .hs-footer-cta .hs-btn {
  margin: 0 6px;
}

body.hs-theme .hs-footer {
  background: #0F1E33;
  color: rgba(255, 255, 255, 0.78);
  padding: 56px 0 0;
}
body.hs-theme .hs-footer h4,
body.hs-theme .hs-footer-col-title {
  color: #fff;
  font-size: 0.78rem !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  margin: 0 0 16px;
}
body.hs-theme .hs-footer a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1.85;
  transition: color 0.2s ease;
}
body.hs-theme .hs-footer a:hover {
  color: #fff;
}
body.hs-theme .hs-footer-bottom {
  margin-top: 40px;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
}

/* --- 9) SCROLL: separación armónica entre secciones ------------------ */
body.hs-theme section + section { /* fallback */ }
body.hs-theme .hs-section-inner {
  max-width: var(--hs-container);
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
}

/* --- 10) ACCESIBILIDAD: focus + reduce motion ----------------------- */
@media (prefers-reduced-motion: reduce) {
  body.hs-theme *,
  body.hs-theme *::before,
  body.hs-theme *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* Skip-link visible al tab para SEO+a11y */
body.hs-theme .skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: var(--hs-navy);
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  z-index: 9999;
  font-weight: 600;
}
body.hs-theme .skip-link:focus {
  top: 8px;
}

/* --- 11) MOBILE optimizations --------------------------------------- */
@media (max-width: 720px) {
  body.hs-theme .hs-topbar { display: none; } /* libera espacio en móvil */
  body.hs-theme .hs-section-eyebrow { font-size: 0.7rem !important; }
  body.hs-theme ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  body.hs-theme ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.86rem !important;
    min-height: 2.4em;
  }
  body.hs-theme .hs-btn-xl {
    padding: 12px 22px;
    font-size: 0.95rem;
  }
}

/* --- 12) ICONOS LUCIDE / SVG estilo coherente ------------------------ */
body.hs-theme svg[stroke="currentColor"] {
  flex-shrink: 0;
}

/* --- 13) BREADCRUMB GLOBAL (single product, blog post) -------------- */
body.hs-theme .woocommerce-breadcrumb,
body.hs-theme nav.woocommerce-breadcrumb,
body.hs-theme .hs-breadcrumb {
  font-size: 0.84rem;
  color: var(--hs-gray-500);
  margin-bottom: 16px;
  padding: 0;
}
body.hs-theme .woocommerce-breadcrumb a,
body.hs-theme .hs-breadcrumb a {
  color: var(--hs-gray-700);
  text-decoration: none;
  transition: color 0.2s ease;
}
body.hs-theme .woocommerce-breadcrumb a:hover,
body.hs-theme .hs-breadcrumb a:hover {
  color: var(--hs-water-dark);
  text-decoration: underline;
}

/* --- 14) PAGINACIÓN limpia ------------------------------------------ */
body.hs-theme .woocommerce-pagination ul,
body.hs-theme nav.woocommerce-pagination ul,
body.hs-theme .hs-pagination ul {
  display: inline-flex !important;
  gap: 6px !important;
  padding: 0 !important;
  list-style: none !important;
  border: 0 !important;
  margin: 30px 0 !important;
}
body.hs-theme .woocommerce-pagination li {
  border: 0 !important;
}
body.hs-theme .woocommerce-pagination a,
body.hs-theme .woocommerce-pagination span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--hs-gray-200) !important;
  background: #fff !important;
  color: var(--hs-gray-700) !important;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}
body.hs-theme .woocommerce-pagination a:hover {
  border-color: var(--hs-water) !important;
  color: var(--hs-water-dark) !important;
}
body.hs-theme .woocommerce-pagination .current,
body.hs-theme .woocommerce-pagination span.current {
  background: var(--hs-water-dark) !important;
  color: #fff !important;
  border-color: var(--hs-water-dark) !important;
}

/* --- 15) FORMULARIOS GENÉRICOS (contacto, búsqueda, newsletter) ----- */
body.hs-theme form input[type="text"],
body.hs-theme form input[type="email"],
body.hs-theme form input[type="tel"],
body.hs-theme form input[type="url"],
body.hs-theme form input[type="search"],
body.hs-theme form textarea,
body.hs-theme form select {
  width: 100%;
  border: 1px solid var(--hs-gray-300);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  color: var(--hs-gray-800);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body.hs-theme form input:focus,
body.hs-theme form textarea:focus,
body.hs-theme form select:focus {
  border-color: var(--hs-water);
  box-shadow: 0 0 0 3px rgba(58, 164, 213, 0.18);
  outline: 0;
}
body.hs-theme form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--hs-navy);
  font-size: 0.92rem;
}

/* --- 16) MODAL / TOAST / NOTICES estilo coherente ------------------- */
body.hs-theme .woocommerce-message,
body.hs-theme .woocommerce-info,
body.hs-theme .woocommerce-error,
body.hs-theme .woocommerce-noreviews,
body.hs-theme p.no-comments {
  border-radius: 12px;
  padding: 14px 18px;
  border-left: 4px solid var(--hs-water-dark);
  background: var(--hs-ice);
  color: var(--hs-gray-800);
  font-size: 0.95rem;
  margin: 0 0 16px;
}
body.hs-theme .woocommerce-error {
  border-left-color: var(--hs-brand-espa);
  background: rgba(227, 6, 19, 0.05);
}
body.hs-theme .woocommerce-message {
  border-left-color: var(--hs-green);
  background: rgba(16, 185, 129, 0.05);
}

/* End v2.13 */

/* =========================================================================
   v2.14 — FIX checkout roto + nuevo efecto del hero (industrial glow)
   ─────────────────────────────────────────────────────────────────────────
   Bugs detectados en producción tras subir v2.12:
   1. Resumen del pedido: nombres de producto rotos verticalmente con líneas
      atravesando el texto (las "líneas" son los strikethrough de precios
      individuales que estaban posicionados sobre la rejilla rota).
   2. "Entrega" cards (Enviar / Recogida): mi grid 1fr 1fr se aplicaba al
      <fieldset> contenedor entero, no al wrapper de las opciones, y tiraba
      las cards a la derecha dejando la mitad izquierda vacía.
   3. "Volver al carrito" partido en dos líneas en el footer del checkout.
   4. "Añade una nota a tu pedido" sin contención visual.
   Y nuevo efecto del hero (en vez de las 3 olas SVG): glow orbs derivando
   en gradiente, dot-grid sutil y línea de escaneo radar — más industrial.
   ========================================================================= */

/* --- 1) RESUMEN DEL PEDIDO: layout flex nuevo y limpio ----------------- */
body.hs-theme .wc-block-components-order-summary-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--hs-gray-100) !important;
  border-top: 0 !important;
  position: relative;
  grid-template-columns: none !important;
  width: 100%;
}
body.hs-theme .wc-block-components-order-summary-item:last-child {
  border-bottom: 0 !important;
}
body.hs-theme .wc-block-components-order-summary-item__image {
  width: 60px !important;
  height: 60px !important;
  flex: 0 0 60px !important;
  position: relative;
  border-radius: 10px;
  border: 1px solid var(--hs-gray-200);
  background: var(--hs-gray-50);
  padding: 4px;
  overflow: visible;
}
body.hs-theme .wc-block-components-order-summary-item__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  display: block;
}
body.hs-theme .wc-block-components-order-summary-item__quantity {
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  background: var(--hs-water-dark) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 0.72rem !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #fff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  line-height: 1 !important;
}

body.hs-theme .wc-block-components-order-summary-item__description {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding-right: 4px;
}
body.hs-theme .wc-block-components-order-summary-item__description .wc-block-components-product-name {
  display: block !important;
  margin: 0 !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: var(--hs-navy) !important;
  line-height: 1.35 !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  text-decoration: none !important;
}

/* MATAR los strikethrough/decorations y los "individual prices"
   pequeños que se renderizaban encima de los nombres (las "líneas
   atravesando el texto" del bug). */
body.hs-theme .wc-block-components-order-summary-item__individual-prices,
body.hs-theme .wc-block-components-order-summary-item__individual-price {
  display: none !important;
}
body.hs-theme .wc-block-components-order-summary-item .wc-block-components-product-name,
body.hs-theme .wc-block-components-order-summary-item .wc-block-components-product-name * {
  text-decoration: none !important;
  border: 0 !important;
  background: transparent !important;
}
body.hs-theme .wc-block-components-order-summary-item .wc-block-components-product-name::before,
body.hs-theme .wc-block-components-order-summary-item .wc-block-components-product-name::after {
  content: none !important;
  display: none !important;
}

body.hs-theme .wc-block-components-order-summary-item__total-price,
body.hs-theme .wc-block-components-order-summary-item .wc-block-components-product-price__value {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  white-space: nowrap !important;
  font-weight: 800 !important;
  color: var(--hs-navy) !important;
  font-size: 0.94rem !important;
  align-self: flex-start;
  padding-top: 2px;
}

/* Si por temas de DOM el __total-price está dentro de __description,
   lo extraemos visualmente con flex en el padre. */
body.hs-theme .wc-block-components-order-summary-item__description .wc-block-components-product-price {
  font-weight: 800 !important;
  color: var(--hs-navy) !important;
  font-size: 0.92rem;
  margin-top: 2px;
}
body.hs-theme .wc-block-components-order-summary-item__description .wc-block-components-product-price del,
body.hs-theme .wc-block-components-order-summary-item__description .wc-block-components-product-price s {
  display: none !important;
}

/* --- 2) ENTREGA: cards "Enviar / Recogida" full-width grid ----------- */
/* El error: yo aplicaba grid 1fr 1fr a .wc-block-checkout__shipping-method,
   que es el FIELDSET completo (contiene título, descripción Y opciones).
   El grid correcto va sobre el button-group interno. */
body.hs-theme .wp-block-woocommerce-checkout-shipping-method-block.wc-block-components-checkout-step,
body.hs-theme fieldset.wc-block-checkout__shipping-method {
  display: block !important;
  grid-template-columns: none !important;
}
body.hs-theme .wc-block-checkout__shipping-method-container,
body.hs-theme .components-button-group.wc-block-checkout__shipping-method-container {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  width: 100% !important;
  margin-top: 12px;
}
@media (max-width: 600px) {
  body.hs-theme .wc-block-checkout__shipping-method-container {
    grid-template-columns: 1fr !important;
  }
}
body.hs-theme .wc-block-checkout__shipping-method-option {
  width: 100% !important;
  flex: 1 1 auto !important;
}

/* --- 3) "Volver al carrito" — sin partir línea ----------------------- */
body.hs-theme .wc-block-components-checkout-return-to-cart-button,
body.hs-theme a.wc-block-components-button.text {
  white-space: nowrap !important;
  flex: 0 0 auto;
}

/* --- 4) "Añade una nota a tu pedido" — card consistente -------------- */
body.hs-theme .wp-block-woocommerce-checkout-order-note-block {
  background: #fff !important;
  border: 1px solid var(--hs-gray-200) !important;
  border-radius: 16px !important;
  padding: 16px 22px !important;
  margin-bottom: 18px !important;
}
body.hs-theme .wc-block-checkout__add-note .wc-block-components-checkbox {
  margin: 0 !important;
}
body.hs-theme .wc-block-components-checkout-step__heading-content {
  display: none !important; /* descripciones repetitivas en algunos pasos */
}

/* --- 5) Container del footer del checkout (terms + actions) ---------- */
body.hs-theme .wp-block-woocommerce-checkout-actions-block {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
  margin-top: 16px;
}
body.hs-theme .wp-block-woocommerce-checkout-actions-block .wc-block-components-checkout-place-order-button {
  flex: 1 1 auto !important;
  min-width: 280px;
  margin-top: 0 !important;
}

/* --- 6) Provincia/dropdown del checkout: select tipo input ----------- */
body.hs-theme .wc-block-components-select select,
body.hs-theme .wc-block-components-combobox-control select {
  height: 52px !important;
  border: 1px solid var(--hs-gray-300) !important;
  border-radius: 12px !important;
  padding: 0 16px !important;
  font-size: 1rem !important;
  background: #fff !important;
  color: var(--hs-gray-800) !important;
  font-family: inherit;
}
body.hs-theme .wc-block-components-select__label,
body.hs-theme .wc-block-components-combobox-control label {
  position: absolute;
  top: -8px;
  left: 12px;
  background: #fff;
  padding: 0 6px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--hs-gray-500);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* =========================================================================
   v2.14 — NUEVO EFECTO DEL HERO (sustituye las olas SVG)
   Concepto: "Industrial monitoring panel"
   - Fondo navy con halo radial sutil
   - Dot-grid muy fino (background-image radial-gradient)
   - 3 orbs blurred (cian agua, blanco cálido, navy claro) derivando en
     loops de 28-44s
   - Línea de escaneo horizontal sutil cada 12s (efecto radar)
   Las olas SVG quedan ocultas; los bubbles se transforman en pulse-dots.
   ========================================================================= */

/* Ocultar las 3 SVG de olas */
body.hs-theme .hs-hero-v2 .hs-wave,
body.hs-theme .hs-hero-v2 .hs-hero-waves > svg.hs-wave {
  display: none !important;
}

/* Fondo del hero con halo radial multi-stop */
body.hs-theme .hs-hero-v2 {
  background:
    radial-gradient(ellipse 80% 60% at 25% 30%, rgba(58,164,213,0.22), transparent 60%),
    radial-gradient(ellipse 70% 55% at 80% 70%, rgba(33,133,176,0.18), transparent 60%),
    linear-gradient(180deg, #16283A 0%, #0F1E33 100%);
  position: relative;
  overflow: hidden;
}

/* Dot-grid muy fino encima del fondo (sin reemplazar el background) */
body.hs-theme .hs-hero-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 26px 26px;
  background-position: 0 0;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
}

/* Línea de escaneo horizontal (radar) */
body.hs-theme .hs-hero-v2::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 48%,
    rgba(58,164,213,0.18) 49%,
    rgba(58,164,213,0.32) 50%,
    rgba(58,164,213,0.18) 51%,
    transparent 52%,
    transparent 100%
  );
  background-size: 100% 200%;
  animation: hsScanBeam 14s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  opacity: 0.55;
}
@keyframes hsScanBeam {
  0%   { background-position: 0 -100%; }
  50%  { background-position: 0 100%; }
  100% { background-position: 0 -100%; }
}

/* Re-utilizamos el contenedor .hs-hero-waves como capa para los orbs */
body.hs-theme .hs-hero-v2 .hs-hero-waves {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* 3 ORBS grandes blurred derivando en loop */
body.hs-theme .hs-hero-v2 .hs-hero-waves::before,
body.hs-theme .hs-hero-v2 .hs-hero-waves::after,
body.hs-theme .hs-hero-v2 .hs-hero-waves > .hs-bubble:first-child {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  pointer-events: none;
}
body.hs-theme .hs-hero-v2 .hs-hero-waves::before {
  top: -10%;
  left: -8%;
  background: radial-gradient(circle, rgba(58,164,213,0.85) 0%, transparent 70%);
  animation: hsOrbA 32s ease-in-out infinite;
}
body.hs-theme .hs-hero-v2 .hs-hero-waves::after {
  bottom: -15%;
  right: -10%;
  background: radial-gradient(circle, rgba(33,133,176,0.7) 0%, transparent 70%);
  animation: hsOrbB 38s ease-in-out infinite;
  animation-delay: -8s;
}
@keyframes hsOrbA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(120px, 80px) scale(1.15); }
  66%      { transform: translate(60px, 200px) scale(0.92); }
}
@keyframes hsOrbB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-100px, -120px) scale(1.1); }
  66%      { transform: translate(-180px, 40px) scale(0.95); }
}

/* Convertir bubbles en pulse-dots flotantes (más sutiles que las burbujas) */
body.hs-theme .hs-hero-v2 .hs-bubble {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(58,164,213,0.6);
  box-shadow:
    0 0 0 0 rgba(58,164,213,0.4),
    0 0 18px rgba(58,164,213,0.5);
  pointer-events: none;
  animation: hsPulseDot 4s ease-in-out infinite;
  z-index: 1;
}
body.hs-theme .hs-hero-v2 .hs-bubble-1 { top: 22%; left: 8%;  animation-delay: 0s;   width: 10px; height: 10px; }
body.hs-theme .hs-hero-v2 .hs-bubble-2 { top: 65%; left: 18%; animation-delay: -1s;  width: 6px;  height: 6px;  }
body.hs-theme .hs-hero-v2 .hs-bubble-3 { top: 38%; left: 42%; animation-delay: -2s; }
body.hs-theme .hs-hero-v2 .hs-bubble-4 { top: 80%; left: 55%; animation-delay: -1.5s; width: 12px; height: 12px; }
body.hs-theme .hs-hero-v2 .hs-bubble-5 { top: 18%; left: 78%; animation-delay: -3s; }
body.hs-theme .hs-hero-v2 .hs-bubble-6 { top: 70%; left: 92%; animation-delay: -2.5s; width: 6px; height: 6px; }
@keyframes hsPulseDot {
  0%, 100% { opacity: 0.3; transform: scale(0.8); box-shadow: 0 0 0 0 rgba(58,164,213,0.5), 0 0 12px rgba(58,164,213,0.4); }
  50%      { opacity: 1;   transform: scale(1.1); box-shadow: 0 0 0 12px rgba(58,164,213,0), 0 0 24px rgba(58,164,213,0.6); }
}

/* Asegurar que el contenido del hero (texto + card) queda por encima */
body.hs-theme .hs-hero-v2 > .hs-hero-v2-inner,
body.hs-theme .hs-hero-v2 > .hs-hero-v2-stats {
  position: relative;
  z-index: 2;
}

/* Reduce motion: orbs y dots sin animar */
@media (prefers-reduced-motion: reduce) {
  body.hs-theme .hs-hero-v2 .hs-hero-waves::before,
  body.hs-theme .hs-hero-v2 .hs-hero-waves::after,
  body.hs-theme .hs-hero-v2 .hs-bubble,
  body.hs-theme .hs-hero-v2::after {
    animation: none !important;
  }
}

/* --- v2.14 PARCHE — quitar paddings anidados del resumen del pedido --- */
/* La sidebar es 380px con padding 24px → 332. Pero dentro hay
   .wp-block-woocommerce-checkout-order-summary-block con padding 24px más
   y .wc-block-components-order-summary con padding 0 16px más, dejando
   los items a sólo 248px. Eliminamos el padding anidado y dejamos solo
   el de la sidebar para que el contenido respire. */
body.hs-theme .wp-block-woocommerce-checkout-order-summary-block {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
}
body.hs-theme .wc-block-components-order-summary {
  padding: 0 !important;
  margin: 0 !important;
}
body.hs-theme .wc-block-components-order-summary__content,
body.hs-theme .wc-block-components-order-summary__list {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
/* La card de la sidebar mantiene su padding de 24px (es el contenedor) */
body.hs-theme .wp-block-woocommerce-checkout-totals-block {
  padding: 24px !important;
}

/* =========================================================================
   v2.15 — FIX checkbox descuadrado + radios de envío/pago profesionales
   ─────────────────────────────────────────────────────────────────────────
   Bugs producción:
   1. Checkbox "Usar la misma dirección para facturación": el SVG mark de WC
      cae fuera del input (top:22px) y el ✓ aparece debajo en otra línea.
   2. Radio "Envío gratuito": botón pequeño y mal alineado, sin etiqueta clara.
   3. "Pagar con Tarjeta" se ve como un botón flotante minúsculo en lugar de
      una opción de pago propia con descripción y signo de seguridad.
   ========================================================================= */

/* --- 1) CHECKBOX — render custom, ocultar SVG mark roto -------------- */
body.hs-theme .wc-block-components-checkbox {
  display: block !important;
  margin: 12px 0 !important;
}
body.hs-theme .wc-block-components-checkbox > label {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  position: relative !important;
  cursor: pointer !important;
  margin: 0 !important;
  font-weight: 500;
  color: var(--hs-gray-700);
  font-size: 0.95rem;
  line-height: 1.4;
}
body.hs-theme .wc-block-components-checkbox__input,
body.hs-theme input[type="checkbox"].wc-block-components-checkbox__input {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  border: 2px solid var(--hs-gray-300) !important;
  border-radius: 6px !important;
  background: #fff !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: border-color 0.2s, background 0.2s;
  vertical-align: middle;
  display: inline-block !important;
}
body.hs-theme .wc-block-components-checkbox__input:checked,
body.hs-theme input[type="checkbox"].wc-block-components-checkbox__input:checked {
  background: var(--hs-water-dark) !important;
  border-color: var(--hs-water-dark) !important;
}
body.hs-theme .wc-block-components-checkbox__input:checked::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -55%) rotate(45deg) !important;
  width: 5px !important;
  height: 10px !important;
  border: solid #fff !important;
  border-width: 0 2.5px 2.5px 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}
body.hs-theme .wc-block-components-checkbox__input:focus-visible {
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(58, 164, 213, 0.25) !important;
}
/* OCULTAR el SVG mark de WC (es el que aparecía descuadrado) */
body.hs-theme .wc-block-components-checkbox__mark,
body.hs-theme svg.wc-block-components-checkbox__mark {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
body.hs-theme .wc-block-components-checkbox__label {
  flex: 1 1 auto !important;
  font-weight: 500 !important;
  color: var(--hs-gray-700) !important;
  font-size: 0.95rem !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
}

/* --- 2) RADIO BUTTON — render custom para envío y pago --------------- */
/* Ocultamos el input nativo y añadimos un círculo custom dentro de
   .wc-block-components-radio-control__option-layout (que es el flex wrap
   real). Esto vale para shipping rates, payment methods y cualquier radio
   del bloque WC que use esta estructura. */
body.hs-theme .wc-block-components-radio-control__option {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 20px 16px 52px !important;
  border: 1.5px solid var(--hs-gray-200) !important;
  border-radius: 12px !important;
  background: #fff !important;
  cursor: pointer !important;
  transition: all 0.2s ease;
  margin: 0 0 10px !important;
}
body.hs-theme .wc-block-components-radio-control__option:hover {
  border-color: var(--hs-water) !important;
  background: rgba(58, 164, 213, 0.03) !important;
}
body.hs-theme .wc-block-components-radio-control__option-checked,
body.hs-theme .wc-block-components-radio-control__option--checked-option-highlighted {
  border-color: var(--hs-water-dark) !important;
  background: linear-gradient(135deg, rgba(58,164,213,0.08), rgba(58,164,213,0.02)) !important;
  box-shadow: 0 0 0 3px rgba(58,164,213,0.10);
}

/* Círculo custom (outer) dibujado con ::before del label */
body.hs-theme .wc-block-components-radio-control__option::before {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 22px !important;
  height: 22px !important;
  border: 2px solid var(--hs-gray-300) !important;
  border-radius: 50% !important;
  background: #fff !important;
  transition: border-color 0.2s, background 0.2s;
  pointer-events: none;
  z-index: 1;
}
body.hs-theme .wc-block-components-radio-control__option-checked::before,
body.hs-theme .wc-block-components-radio-control__option--checked-option-highlighted::before {
  border-color: var(--hs-water-dark) !important;
}
/* Punto interior cuando está seleccionado */
body.hs-theme .wc-block-components-radio-control__option::after {
  content: "" !important;
  position: absolute !important;
  left: 24px !important;
  top: 50% !important;
  transform: translateY(-50%) scale(0) !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: var(--hs-water-dark) !important;
  transition: transform 0.2s ease;
  pointer-events: none;
  z-index: 2;
}
body.hs-theme .wc-block-components-radio-control__option-checked::after,
body.hs-theme .wc-block-components-radio-control__option--checked-option-highlighted::after {
  transform: translateY(-50%) scale(1) !important;
}

/* Ocultamos el input nativo del radio (renderizamos los círculos arriba) */
body.hs-theme .wc-block-components-radio-control__input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* Layout de label + secondary dentro del option-layout */
body.hs-theme .wc-block-components-radio-control__option-layout {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
body.hs-theme .wc-block-components-radio-control__label-group {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-width: 0 !important;
}
body.hs-theme .wc-block-components-radio-control__label {
  font-weight: 700 !important;
  color: var(--hs-navy) !important;
  font-size: 0.95rem !important;
  line-height: 1.3 !important;
}
body.hs-theme .wc-block-components-radio-control__description {
  display: block !important;
  font-weight: 500 !important;
  color: var(--hs-gray-600) !important;
  font-size: 0.85rem !important;
  margin-top: 4px !important;
}
body.hs-theme .wc-block-components-radio-control__secondary-label {
  font-weight: 800 !important;
  color: var(--hs-water-dark) !important;
  font-size: 0.95rem !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
body.hs-theme .wc-block-checkout__shipping-option--free,
body.hs-theme .wc-block-components-radio-control__secondary-label .wc-block-checkout__shipping-option--free {
  display: inline-block !important;
  background: rgba(16, 185, 129, 0.12) !important;
  color: var(--hs-green) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* --- 3) PAGO: contenedor del método con icono + descripción --------- */
/* Cuando el método de pago tiene contenido extra (Redsys, descripción,
   logos), los acordeones se expanden bajo la radio option. Mejoramos su
   apariencia para que parezca un panel de método de pago profesional. */
body.hs-theme .wc-block-components-radio-control-accordion-option {
  margin-bottom: 10px;
}
body.hs-theme .wc-block-components-radio-control-accordion-content {
  background: #fff !important;
  border: 1px solid var(--hs-gray-200) !important;
  border-top: 0 !important;
  border-radius: 0 0 12px 12px !important;
  padding: 16px 20px !important;
  margin-top: -10px !important;
  margin-bottom: 10px !important;
  font-size: 0.9rem;
  color: var(--hs-gray-700);
}
body.hs-theme .wc-block-components-radio-control-accordion-content p {
  margin: 0 0 6px;
}
body.hs-theme .wc-block-components-radio-control-accordion-content p:last-child {
  margin-bottom: 0;
}
/* Si el método de pago seleccionado es el único (común con Redsys), su
   acordeón se muestra siempre — añadimos un pequeño badge de seguridad. */
body.hs-theme .wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-option--checked-option-highlighted .wc-block-components-radio-control-accordion-content::before {
  content: "🔒 Pago seguro · Tu tarjeta nunca pasa por nuestro servidor";
  display: block;
  font-size: 0.78rem;
  color: var(--hs-gray-500);
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hs-gray-100);
  letter-spacing: 0.01em;
}

/* Logos de métodos de pago (visa/mastercard/bizum) — en línea */
body.hs-theme .wc-block-components-payment-method-icons {
  display: inline-flex !important;
  gap: 6px !important;
  margin-left: auto !important;
  align-items: center !important;
}
body.hs-theme .wc-block-components-payment-method-icons img {
  height: 24px !important;
  width: auto !important;
  border: 1px solid var(--hs-gray-200) !important;
  border-radius: 4px !important;
  padding: 2px 4px !important;
  background: #fff !important;
}

/* Hide tabbed payment methods if only one (mejora visual) */
body.hs-theme .wc-block-components-checkout-payment-methods[role="tablist"]:has(button:only-child),
body.hs-theme .wc-block-components-payment-methods__tabs:has(button:only-child) {
  display: none !important;
}

/* --- 4) STEP TITLE — espaciado correcto bajo título ------------------ */
body.hs-theme .wc-block-components-checkout-step__heading {
  margin-bottom: 6px !important;
}
body.hs-theme .wc-block-components-checkout-step__description {
  color: var(--hs-gray-600) !important;
  font-size: 0.92rem !important;
  margin: 0 0 16px !important;
}

/* --- 5) Mejora general: sectores fieldset sin estilos de form ------- */
body.hs-theme fieldset.wc-block-components-checkout-step {
  border: 1px solid var(--hs-gray-200) !important;
  background: #fff !important;
}
body.hs-theme legend.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* =========================================================================
   v2.16 — HERO: tarjeta glass + efecto AGUA (sustituye scan beam)
   ─────────────────────────────────────────────────────────────────────────
   Cambios:
   1. Tarjeta del producto del hero: glass dark (semi-transparente con
      backdrop-blur) en vez de blanco para integrarse con el navy del hero
      sin que parezca un rectángulo plano blanco encima.
   2. Efecto "scan beam radar" eliminado.
   3. Nuevo efecto de AGUA: cáusticas + shimmer de superficie líquida.
   ========================================================================= */

/* --- 1) TARJETA HERO: vuelve a BLANCA pero sin pegote interior --------
   El usuario aclaró que la tarjeta blanca estaba bien, lo molesto era el
   rectángulo gris claro detrás de la imagen del producto que parecía un
   "pegote" pegado dentro de la card. Solución: la imagen comparte fondo
   con la card (transparente) y simplemente flota sobre el blanco. */
body.hs-theme .hs-hero-v2 .hs-hero-v2-card,
body.hs-theme .hs-hero-v2 .hs-hero-v2-card-link {
  background: #fff !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.40) !important;
}
body.hs-theme .hs-hero-v2 .hs-hero-v2-card:hover,
body.hs-theme .hs-hero-v2 .hs-hero-v2-card-link:hover {
  background: #fff !important;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.50),
    0 0 0 2px rgba(58, 164, 213, 0.35) !important;
}

/* Imagen del producto: fondo TRANSPARENTE para que se funda con la card.
   Sin gradiente, sin border, sin "pegote". La bomba flota sobre el blanco. */
body.hs-theme .hs-hero-v2 .hs-hero-v2-card-img {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 8px 0 !important;
}
body.hs-theme .hs-hero-v2 .hs-hero-v2-card-img img {
  mix-blend-mode: normal;
  /* Sin drop-shadow — la "sombra" alrededor del producto creaba un cuadrado
     oscuro porque la bomba tiene partes negras y el filter las envolvía. */
  filter: none !important;
}

/* Textos vuelven a su color original sobre fondo blanco */
body.hs-theme .hs-hero-v2 .hs-hero-v2-card-name {
  color: var(--hs-navy) !important;
}
body.hs-theme .hs-hero-v2 .hs-hero-v2-card-desc {
  color: var(--hs-gray-500) !important;
}
body.hs-theme .hs-hero-v2 .hs-hero-v2-card-cta {
  color: var(--hs-navy) !important;
  border-top-color: rgba(0, 0, 0, 0.06) !important;
}
body.hs-theme .hs-hero-v2 .hs-hero-v2-card-cta:hover,
body.hs-theme .hs-hero-v2 .hs-hero-v2-card-link:hover .hs-hero-v2-card-cta {
  color: var(--hs-water-dark) !important;
}

/* Badge "ESPA · MÁS VENDIDA" — vuelve a su estilo normal sobre blanco */
body.hs-theme .hs-hero-v2 .hs-hero-v2-card-badge {
  background: var(--hs-navy) !important;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.hs-theme .hs-hero-v2 .hs-hero-v2-card-stock {
  color: var(--hs-green) !important;
}

/* Floating badges (Envío hoy / SAT oficial) — blanco como antes */
body.hs-theme .hs-hero-v2 .hs-hero-v2-floating-badge {
  background: #fff !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

/* Precio dentro de la card: agua para el nuevo, gris para el tachado */
body.hs-theme .hs-hero-v2 .hs-hero-v2-card-price .price ins,
body.hs-theme .hs-hero-v2 .hs-hero-v2-card-price .hs-price-new,
body.hs-theme .hs-hero-v2 .hs-hero-v2-card-price ins {
  color: var(--hs-water-dark) !important;
}
body.hs-theme .hs-hero-v2 .hs-hero-v2-card-price .price del,
body.hs-theme .hs-hero-v2 .hs-hero-v2-card-price del {
  color: var(--hs-gray-500) !important;
}

/* --- 2) QUITAR el scan beam radar (sustituido por agua) -------------- */
body.hs-theme .hs-hero-v2::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* --- 3) NUEVO EFECTO AGUA: cáusticas + shimmer de superficie -------- */
/* Generamos un efecto de luz refractando en agua usando dos capas
   superpuestas con conic + radial gradients animados. */

/* Capa 1: cáusticas grandes desplazándose en horizontal */
body.hs-theme .hs-hero-v2 .hs-hero-waves {
  /* esta capa ya estaba con position absolute; añadimos las cáusticas como
     pseudo-element sobre el wrapper. Los orbs (::before/::after) ya
     existen — añadimos un hijo virtual usando un nuevo elemento... pero
     como no podemos añadir HTML, usamos los hs-bubble convertidos:
     Mantenemos los pulse-dots y montamos el shimmer en .hs-hero-v2 padre. */
}

/* Insertamos el efecto agua usando la pseudo-class del propio hero pero
   dejando la ::before (dot grid) intacta. Como ::after lo liberamos al
   quitar el scan beam, lo reciclamos como capa de cáusticas. */
body.hs-theme .hs-hero-v2::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none;
  z-index: 0;
  background-image:
    /* cáusticas finas blancas */
    radial-gradient(ellipse 600px 80px at 30% 20%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(ellipse 700px 60px at 70% 60%, rgba(255,255,255,0.05), transparent 65%),
    radial-gradient(ellipse 500px 70px at 50% 90%, rgba(255,255,255,0.04), transparent 60%),
    /* franjas líquidas azules */
    repeating-linear-gradient(
      115deg,
      transparent 0px,
      transparent 80px,
      rgba(58, 164, 213, 0.05) 80px,
      rgba(58, 164, 213, 0.05) 82px,
      transparent 82px,
      transparent 200px,
      rgba(255, 255, 255, 0.03) 200px,
      rgba(255, 255, 255, 0.03) 201px,
      transparent 201px,
      transparent 360px
    );
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    600px 600px;
  animation: hsWaterShimmer 22s linear infinite, hsCausticsDrift 18s ease-in-out infinite;
  mix-blend-mode: screen;
  opacity: 0.85;
}

@keyframes hsWaterShimmer {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 0 0, 0 0, 0 0, 600px 600px; }
}
@keyframes hsCausticsDrift {
  0%, 100% { filter: blur(0px) brightness(1); }
  50%      { filter: blur(0.5px) brightness(1.15); }
}

/* Capa adicional: una "superficie de agua" arriba con reflejo sutil
   usando ::before (sustituimos el dot grid antiguo por un compuesto). */
body.hs-theme .hs-hero-v2::before {
  background-image:
    /* dot grid sutil */
    radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px),
    /* destello de superficie de agua arriba */
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08) 0%,
      transparent 8%
    );
  background-size: 26px 26px, 100% 100%;
  background-position: 0 0, 0 0;
  animation: hsSurfaceFlow 30s ease-in-out infinite;
}
@keyframes hsSurfaceFlow {
  0%, 100% { background-position: 0 0, 0 0; }
  50%      { background-position: 13px 13px, 0 0; }
}

/* Bubbles ahora flotan y suben suavemente (más on-brand "agua") --------- */
body.hs-theme .hs-hero-v2 .hs-bubble {
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.65),
    rgba(58, 164, 213, 0.45) 50%,
    rgba(58, 164, 213, 0.15) 100%
  ) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 14px rgba(58, 164, 213, 0.35) !important;
  animation: hsBubbleRise 8s ease-in-out infinite !important;
}
body.hs-theme .hs-hero-v2 .hs-bubble-1 { animation-delay: 0s;    animation-duration: 9s; }
body.hs-theme .hs-hero-v2 .hs-bubble-2 { animation-delay: -2s;   animation-duration: 11s; }
body.hs-theme .hs-hero-v2 .hs-bubble-3 { animation-delay: -4s;   animation-duration: 8s; }
body.hs-theme .hs-hero-v2 .hs-bubble-4 { animation-delay: -1s;   animation-duration: 10s; }
body.hs-theme .hs-hero-v2 .hs-bubble-5 { animation-delay: -3s;   animation-duration: 12s; }
body.hs-theme .hs-hero-v2 .hs-bubble-6 { animation-delay: -5s;   animation-duration: 9s; }

@keyframes hsBubbleRise {
  0% {
    transform: translateY(40px) scale(0.7);
    opacity: 0;
  }
  20% {
    opacity: 0.9;
  }
  80% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-120px) scale(1.05) translateX(8px);
    opacity: 0;
  }
}

/* Reduce motion: sin animaciones */
@media (prefers-reduced-motion: reduce) {
  body.hs-theme .hs-hero-v2::before,
  body.hs-theme .hs-hero-v2::after,
  body.hs-theme .hs-hero-v2 .hs-bubble {
    animation: none !important;
  }
}

/* =========================================================================
   v2.17 — CARRITO VACÍO con estética + CRO
   - Icono grande, mensaje en castellano, CTA destacado
   - Productos recomendados como grid coherente con el resto del sitio
   - Trust badges debajo
   ========================================================================= */

/* Layout general del bloque empty cart */
body.hs-theme .wp-block-woocommerce-empty-cart-block,
body.hs-theme .wc-block-cart__empty-cart {
  text-align: center;
  padding: 48px 32px 32px;
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: 18px;
  margin: 0 0 32px;
  box-shadow: 0 8px 28px -16px rgba(33, 62, 92, 0.12);
}

/* Título "Tu carrito está vacío" */
body.hs-theme .wc-block-cart__empty-cart__title,
body.hs-theme .wp-block-woocommerce-empty-cart-block h2 {
  font-family: var(--hs-font-heading) !important;
  font-size: clamp(1.4rem, 3vw, 1.8rem) !important;
  color: var(--hs-navy) !important;
  margin: 14px 0 8px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  text-align: center !important;
}

/* Subtitulo (la "carita triste") la ocultamos y la sustituimos por icono SVG */
body.hs-theme .wp-block-image,
body.hs-theme .wp-block-woocommerce-empty-cart-block .wp-block-image {
  margin: 0 auto 8px !important;
}
body.hs-theme .wp-block-woocommerce-empty-cart-block .wp-block-image img {
  display: none !important;
}
body.hs-theme .wp-block-woocommerce-empty-cart-block .wp-block-image::before {
  content: "";
  display: block;
  width: 88px;
  height: 88px;
  margin: 0 auto;
  background: linear-gradient(135deg, rgba(58,164,213,0.15), rgba(58,164,213,0.04));
  border-radius: 50%;
  position: relative;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233aa4d5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/></svg>"),
    linear-gradient(135deg, rgba(58,164,213,0.15), rgba(58,164,213,0.04));
  background-size: 50% 50%, 100% 100%;
  background-repeat: no-repeat;
  background-position: center, center;
}

/* Inyectamos vía CSS un mensaje guía y CTA usando el separador del bloque
   (las "dots" que aparecen) los reciclamos como spacing */
body.hs-theme .wp-block-woocommerce-empty-cart-block hr,
body.hs-theme .wp-block-woocommerce-empty-cart-block .wp-block-separator {
  display: none !important;
}

/* Sección "Novedades en la tienda" — Recomendados */
body.hs-theme .wp-block-woocommerce-empty-cart-block .wp-block-heading,
body.hs-theme .wp-block-woocommerce-empty-cart-block h3 {
  font-family: var(--hs-font-heading) !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: var(--hs-navy) !important;
  margin: 28px 0 18px !important;
  text-align: center !important;
  position: relative !important;
}
body.hs-theme .wp-block-woocommerce-empty-cart-block .wp-block-heading::before,
body.hs-theme .wp-block-woocommerce-empty-cart-block h3::before {
  content: "Te recomendamos";
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hs-water-dark);
  font-weight: 800;
  padding: 0 12px;
}
body.hs-theme .wp-block-woocommerce-empty-cart-block h3 {
  /* Ocultar el texto inglés "New in store" si llega ahí, mostramos solo el ::before */
  font-size: 0 !important;
  height: 0;
  margin: 30px 0 30px !important;
}

/* Grid de productos recomendados */
body.hs-theme .wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-collection,
body.hs-theme .wp-block-woocommerce-empty-cart-block .wc-block-grid {
  margin-top: 18px;
}
body.hs-theme .wp-block-woocommerce-empty-cart-block .wc-block-grid__products,
body.hs-theme .wp-block-woocommerce-empty-cart-block .wc-block-product-template,
body.hs-theme .wp-block-woocommerce-empty-cart-block ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (max-width: 900px) {
  body.hs-theme .wp-block-woocommerce-empty-cart-block .wc-block-grid__products,
  body.hs-theme .wp-block-woocommerce-empty-cart-block ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Tarjetas de los recomendados — heredan el estilo del shop pero con
   un toque más airoso */
body.hs-theme .wp-block-woocommerce-empty-cart-block .wc-block-grid__product,
body.hs-theme .wp-block-woocommerce-empty-cart-block li.product {
  background: var(--hs-gray-50);
  border: 1px solid var(--hs-gray-100);
  border-radius: 14px;
  padding: 12px;
  text-align: left;
  transition: all 0.25s ease;
}
body.hs-theme .wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover,
body.hs-theme .wp-block-woocommerce-empty-cart-block li.product:hover {
  background: #fff;
  border-color: var(--hs-water);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -16px rgba(33,62,92,0.18);
}

/* Botón "Volver a la tienda" / CTA principal */
body.hs-theme .wp-block-woocommerce-empty-cart-block .wp-block-button__link,
body.hs-theme .wp-block-woocommerce-empty-cart-block a.wc-block-button,
body.hs-theme .wp-block-woocommerce-empty-cart-block .return-to-shop a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--hs-water-dark) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 14px 28px !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  margin: 18px auto !important;
  box-shadow: 0 12px 28px -8px rgba(58,164,213,0.45);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
body.hs-theme .wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover {
  background: var(--hs-navy) !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -10px rgba(33,62,92,0.55);
}

/* Inyectamos un mensaje guía bajo el título del carrito vacío
   (porque WC sólo pone el título "Tu carrito está vacío") */
body.hs-theme .wc-block-cart__empty-cart__title::after {
  content: "Empieza a llenarlo con bombas, dosificadoras o accesorios. Envío 24-48 h en península.";
  display: block;
  font-family: var(--hs-font-base);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--hs-gray-600);
  margin: 8px auto 0;
  max-width: 480px;
  line-height: 1.5;
  letter-spacing: 0;
}

/* Trust badges debajo del CTA del carrito vacío */
body.hs-theme .wp-block-woocommerce-empty-cart-block::after {
  content: "✓ Envío 24-48 h península   ✓ 3 años de garantía oficial   ✓ Pago seguro Redsys · Bizum   ✓ SAT oficial ESPA";
  display: block;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--hs-gray-100);
  font-size: 0.86rem;
  color: var(--hs-gray-700);
  line-height: 2;
  letter-spacing: 0.01em;
  font-weight: 600;
}

/* Layout sin sidebar cuando el carrito está vacío */
body.hs-theme.woocommerce-cart .wp-block-woocommerce-cart:has(.wp-block-woocommerce-empty-cart-block:not([hidden])),
body.hs-theme.woocommerce-cart .wc-block-cart:has(.wp-block-woocommerce-empty-cart-block:not([hidden])) {
  display: block !important;
}
body.hs-theme.woocommerce-cart .wp-block-woocommerce-empty-cart-block ~ .wc-block-components-sidebar-layout__sidebar {
  display: none !important;
}

/* End v2.17 */

/* =========================================================================
   v2.18 — MI CUENTA profesional (avatar, dashboard, stats, pedidos)
   ========================================================================= */

/* Layout principal de Mi cuenta: 2 columnas con sidebar sticky */
@media (min-width: 900px) {
  body.hs-theme.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 280px !important;
    float: left !important;
    margin-right: 32px !important;
    position: sticky;
    top: 100px;
  }
  body.hs-theme.woocommerce-account .woocommerce-MyAccount-content {
    margin-left: 312px !important;
    width: auto !important;
    max-width: calc(100% - 312px) !important;
  }
}
@media (max-width: 899px) {
  body.hs-theme.woocommerce-account .woocommerce-MyAccount-navigation,
  body.hs-theme.woocommerce-account .woocommerce-MyAccount-content {
    width: 100% !important;
    float: none !important;
    margin: 0 0 24px !important;
  }
}

/* Container ancho en mi cuenta (igual que carrito/checkout) */
body.hs-theme.woocommerce-account .hs-page-inner,
body.hs-theme.woocommerce-account .hs-container-narrow {
  max-width: var(--hs-container) !important;
}

/* --- SIDEBAR (.hs-account-nav) ---------------------------------------- */
body.hs-theme .hs-account-nav,
body.hs-theme .woocommerce-MyAccount-navigation {
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(33,62,92,0.02);
}

/* Userbox (avatar + nombre + email) */
body.hs-theme .hs-account-userbox {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 22px 18px;
  background: linear-gradient(135deg, rgba(58,164,213,0.08), rgba(58,164,213,0.02));
  border-bottom: 1px solid var(--hs-gray-100);
}
body.hs-theme .hs-account-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--hs-water-dark), var(--hs-navy));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(33,62,92,0.18);
}
body.hs-theme .hs-account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
body.hs-theme .hs-account-avatar-initials {
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  font-family: var(--hs-font-heading);
}
body.hs-theme .hs-account-userinfo {
  flex: 1 1 auto;
  min-width: 0;
}
body.hs-theme .hs-account-name {
  display: block;
  font-family: var(--hs-font-heading);
  font-size: 1rem;
  font-weight: 800;
  color: var(--hs-navy);
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.hs-theme .hs-account-email {
  display: block;
  font-size: 0.78rem;
  color: var(--hs-gray-500);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Lista del menú */
body.hs-theme .hs-account-nav ul,
body.hs-theme .woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}
body.hs-theme .hs-account-nav ul li,
body.hs-theme .woocommerce-MyAccount-navigation ul li {
  border: 0 !important;
  margin: 0 !important;
}
body.hs-theme .hs-account-nav ul li a,
body.hs-theme .woocommerce-MyAccount-navigation ul li a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  color: var(--hs-gray-700) !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s, transform 0.15s;
  position: relative;
}
body.hs-theme .hs-account-nav ul li a:hover {
  background: var(--hs-ice) !important;
  color: var(--hs-navy) !important;
}
body.hs-theme .hs-account-nav ul li.is-active a,
body.hs-theme .hs-account-nav ul li.woocommerce-MyAccount-navigation-link--dashboard.is-active a,
body.hs-theme .woocommerce-MyAccount-navigation ul li.is-active a {
  background: linear-gradient(135deg, var(--hs-water-dark), var(--hs-water)) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 16px -8px rgba(58,164,213,0.5);
}
body.hs-theme .hs-account-nav ul li.is-active a .hs-account-icon svg,
body.hs-theme .hs-account-nav ul li.is-active a .hs-account-chevron {
  color: #fff;
}

/* Iconos del menú */
body.hs-theme .hs-account-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--hs-water-dark);
}
body.hs-theme .hs-account-icon svg {
  width: 18px;
  height: 18px;
}
body.hs-theme .hs-account-label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.hs-theme .hs-account-chevron {
  color: var(--hs-gray-300);
  flex-shrink: 0;
  transition: transform 0.2s;
}
body.hs-theme .hs-account-nav ul li a:hover .hs-account-chevron {
  transform: translateX(2px);
}

/* "Salir" — color rojo sutil */
body.hs-theme .hs-account-nav ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
  color: #dc2626 !important;
  margin-top: 8px;
  border-top: 1px solid var(--hs-gray-100);
  border-radius: 0 !important;
}
body.hs-theme .hs-account-nav ul li.woocommerce-MyAccount-navigation-link--customer-logout a .hs-account-icon {
  color: #dc2626;
}
body.hs-theme .hs-account-nav ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  background: rgba(220,38,38,0.06) !important;
  color: #dc2626 !important;
}

/* Help box bajo el menú */
body.hs-theme .hs-account-help {
  margin: 8px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(58,164,213,0.08), rgba(58,164,213,0.02));
  border: 1px solid rgba(58,164,213,0.18);
  border-radius: 12px;
  text-align: left;
}
body.hs-theme .hs-account-help strong {
  display: block;
  color: var(--hs-navy);
  font-weight: 800;
  font-size: 0.86rem;
  margin-bottom: 2px;
}
body.hs-theme .hs-account-help p {
  margin: 0 0 10px;
  font-size: 0.78rem;
  color: var(--hs-gray-700);
  line-height: 1.4;
}
body.hs-theme .hs-account-help-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  color: var(--hs-water-dark);
  font-size: 0.84rem;
  text-decoration: none;
  transition: gap 0.2s;
}
body.hs-theme .hs-account-help-cta:hover {
  color: var(--hs-navy);
  gap: 10px;
}

/* --- CONTENIDO (.hs-account-dashboard) -------------------------------- */
body.hs-theme .woocommerce-MyAccount-content {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
body.hs-theme .hs-account-dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Saludo */
body.hs-theme .hs-account-greeting {
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: 18px;
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  box-shadow: 0 1px 0 rgba(33,62,92,0.02);
}
body.hs-theme .hs-account-greeting h2 {
  font-family: var(--hs-font-heading);
  font-size: clamp(1.4rem, 2.5vw, 1.7rem) !important;
  font-weight: 800;
  color: var(--hs-navy);
  margin: 0 0 6px !important;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
body.hs-theme .hs-account-greeting h2 span {
  color: var(--hs-water-dark);
}
body.hs-theme .hs-account-greeting p {
  margin: 0;
  color: var(--hs-gray-600);
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 540px;
}
body.hs-theme .hs-account-vip-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(245,158,11,0.3);
  flex-shrink: 0;
}

/* Stats cards */
body.hs-theme .hs-account-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 720px) {
  body.hs-theme .hs-account-stats { grid-template-columns: 1fr; }
}
body.hs-theme .hs-stat-card {
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: 16px;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  color: inherit;
}
body.hs-theme a.hs-stat-card:hover {
  transform: translateY(-3px);
  border-color: var(--hs-water);
  box-shadow: 0 14px 30px -16px rgba(33,62,92,0.18);
}
body.hs-theme .hs-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
body.hs-theme .hs-stat-icon-orders { background: rgba(58,164,213,0.12); color: var(--hs-water-dark); }
body.hs-theme .hs-stat-icon-spent  { background: rgba(16,185,129,0.12); color: var(--hs-green); }
body.hs-theme .hs-stat-icon-dl     { background: rgba(245,158,11,0.12); color: #f59e0b; }
body.hs-theme .hs-stat-text { display: flex; flex-direction: column; min-width: 0; }
body.hs-theme .hs-stat-card .hs-stat-num {
  font-family: var(--hs-font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--hs-navy);
  line-height: 1;
  letter-spacing: -0.01em;
  display: block;
}
body.hs-theme .hs-stat-card .hs-stat-num bdi { color: inherit; font-weight: inherit; }
body.hs-theme .hs-stat-card .hs-stat-lbl {
  font-size: 0.82rem;
  color: var(--hs-gray-600);
  font-weight: 500;
  margin-top: 4px;
  display: block;
}

/* Bloques (Pedidos recientes / Accesos rápidos) */
body.hs-theme .hs-account-block {
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: 18px;
  padding: 22px 26px;
  box-shadow: 0 1px 0 rgba(33,62,92,0.02);
}
body.hs-theme .hs-account-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
}
body.hs-theme .hs-account-block-header h3 {
  font-family: var(--hs-font-heading);
  font-size: 1.05rem !important;
  font-weight: 800;
  color: var(--hs-navy);
  margin: 0 !important;
  padding: 0 !important;
}
body.hs-theme .hs-account-block-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--hs-water-dark);
  text-decoration: none;
  transition: gap 0.2s, color 0.2s;
}
body.hs-theme .hs-account-block-link:hover {
  color: var(--hs-navy);
  gap: 10px;
}

/* Pedidos recientes — lista */
body.hs-theme .hs-account-orders {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.hs-theme .hs-account-order {
  display: grid;
  grid-template-columns: 140px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--hs-gray-100);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, background 0.2s;
}
body.hs-theme .hs-account-order:hover {
  border-color: var(--hs-water);
  background: var(--hs-ice);
}
@media (max-width: 720px) {
  body.hs-theme .hs-account-order { grid-template-columns: 1fr auto; gap: 8px; }
  body.hs-theme .hs-account-order-info { grid-column: 1 / -1; }
}
body.hs-theme .hs-account-order-meta { display: flex; flex-direction: column; min-width: 0; }
body.hs-theme .hs-account-order-id {
  font-family: var(--hs-font-heading);
  font-weight: 800;
  color: var(--hs-navy);
  font-size: 0.95rem;
}
body.hs-theme .hs-account-order-date {
  font-size: 0.78rem;
  color: var(--hs-gray-500);
  margin-top: 2px;
}
body.hs-theme .hs-account-order-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  color: var(--hs-gray-700);
  flex-wrap: wrap;
}
body.hs-theme .hs-account-order-items {
  background: var(--hs-gray-100);
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.78rem;
}
body.hs-theme .hs-account-order-total {
  font-weight: 800;
  color: var(--hs-navy);
  font-size: 0.95rem;
}
body.hs-theme .hs-account-order-status {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
body.hs-theme .hs-status-completed { background: rgba(16,185,129,0.12); color: var(--hs-green); }
body.hs-theme .hs-status-processing { background: rgba(58,164,213,0.12); color: var(--hs-water-dark); }
body.hs-theme .hs-status-on-hold { background: rgba(245,158,11,0.12); color: #f59e0b; }
body.hs-theme .hs-status-pending { background: rgba(100,116,139,0.12); color: var(--hs-gray-600); }
body.hs-theme .hs-status-cancelled,
body.hs-theme .hs-status-failed,
body.hs-theme .hs-status-refunded { background: rgba(220,38,38,0.08); color: #dc2626; }
body.hs-theme .hs-account-order-chevron { color: var(--hs-gray-400); flex-shrink: 0; }

/* Empty state */
body.hs-theme .hs-account-block--empty {
  text-align: center;
  padding: 40px 20px;
}
body.hs-theme .hs-account-empty-illu {
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(58,164,213,0.15), rgba(58,164,213,0.04));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hs-water);
}
body.hs-theme .hs-account-block--empty h3 {
  font-size: 1.2rem !important;
  font-weight: 800;
  color: var(--hs-navy);
  margin: 0 0 6px !important;
}
body.hs-theme .hs-account-block--empty p {
  margin: 0 0 18px;
  color: var(--hs-gray-600);
  font-size: 0.95rem;
}

/* Accesos rápidos */
body.hs-theme .hs-account-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 720px) {
  body.hs-theme .hs-account-quick-actions { grid-template-columns: 1fr; }
}
body.hs-theme .hs-account-quick {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--hs-gray-100);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
body.hs-theme .hs-account-quick:hover {
  border-color: var(--hs-water);
  background: var(--hs-ice);
  transform: translateY(-2px);
}
body.hs-theme .hs-account-quick svg {
  color: var(--hs-water-dark);
  flex-shrink: 0;
}
body.hs-theme .hs-account-quick div { display: flex; flex-direction: column; min-width: 0; }
body.hs-theme .hs-account-quick strong {
  font-weight: 800;
  color: var(--hs-navy);
  font-size: 0.92rem;
  line-height: 1.2;
}
body.hs-theme .hs-account-quick span {
  font-size: 0.8rem;
  color: var(--hs-gray-500);
  margin-top: 2px;
}

/* End v2.18 */

/* =========================================================================
   v2.19 — CARRITO VACÍO custom (sustituye el contenido React de WC)
   El bloque WC se rellena vía JS con el HTML de .hs-empty-cart-custom.
   Aquí solo estilamos esa estructura limpia.
   ========================================================================= */

/* Limpiamos los estilos rotos de v2.17 sobre el bloque WC y los pseudo
   contents que se solapaban con el contenido de WC. */
body.hs-theme .wp-block-woocommerce-empty-cart-block {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 32px !important;
  box-shadow: none !important;
  text-align: left !important;
}
body.hs-theme .wp-block-woocommerce-empty-cart-block::before,
body.hs-theme .wp-block-woocommerce-empty-cart-block::after,
body.hs-theme .wc-block-cart__empty-cart__title,
body.hs-theme .wc-block-cart__empty-cart__title::after {
  content: none !important;
  display: none !important;
}

/* Card principal del carrito vacío */
body.hs-theme .hs-empty-cart-custom {
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: 20px;
  padding: 56px 40px 40px;
  text-align: center;
  box-shadow: 0 8px 28px -16px rgba(33, 62, 92, 0.12);
  max-width: 720px;
  margin: 0 auto;
}

/* Icono */
body.hs-theme .hs-empty-cart-icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(58,164,213,0.18), rgba(58,164,213,0.04));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hs-water-dark);
  position: relative;
}
body.hs-theme .hs-empty-cart-icon svg {
  width: 44px;
  height: 44px;
}
body.hs-theme .hs-empty-cart-icon::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px dashed rgba(58,164,213,0.25);
  pointer-events: none;
  animation: hsEmptyPulse 4s ease-in-out infinite;
}
@keyframes hsEmptyPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50%      { transform: scale(1.05); opacity: 1; }
}

/* Título y texto */
body.hs-theme .hs-empty-cart-custom h2 {
  font-family: var(--hs-font-heading);
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 800;
  color: var(--hs-navy);
  margin: 0 0 10px;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
body.hs-theme .hs-empty-cart-custom p {
  margin: 0 0 22px;
  color: var(--hs-gray-600);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* CTAs */
body.hs-theme .hs-empty-cart-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 32px;
}
body.hs-theme .hs-empty-cart-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--hs-water-dark);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 14px 28px;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 12px 28px -8px rgba(58, 164, 213, 0.45);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s, gap 0.2s;
}
body.hs-theme .hs-empty-cart-cta-primary:hover {
  background: var(--hs-navy);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -10px rgba(33, 62, 92, 0.55);
  gap: 12px;
}
body.hs-theme .hs-empty-cart-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--hs-navy);
  border: 1.5px solid var(--hs-gray-300);
  border-radius: 999px;
  padding: 13px 24px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
body.hs-theme .hs-empty-cart-cta-secondary:hover {
  border-color: var(--hs-water);
  color: var(--hs-water-dark);
  background: rgba(58, 164, 213, 0.04);
}

/* Trust badges */
body.hs-theme .hs-empty-cart-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--hs-gray-100);
  margin-bottom: 16px;
}
@media (max-width: 720px) {
  body.hs-theme .hs-empty-cart-trust { grid-template-columns: repeat(2, 1fr); }
}
body.hs-theme .hs-empty-cart-trust > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--hs-gray-700);
  line-height: 1.35;
}
body.hs-theme .hs-empty-cart-trust > div svg {
  color: var(--hs-water-dark);
  margin-bottom: 4px;
}
body.hs-theme .hs-empty-cart-trust > div span {
  display: flex;
  flex-direction: column;
}
body.hs-theme .hs-empty-cart-trust strong {
  color: var(--hs-navy);
  font-weight: 800;
  font-size: 0.86rem;
}

/* Help al pie */
body.hs-theme .hs-empty-cart-help {
  margin-top: 8px !important;
  font-size: 0.86rem !important;
  color: var(--hs-gray-600) !important;
  text-align: center;
}
body.hs-theme .hs-empty-cart-help a {
  color: var(--hs-water-dark);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
body.hs-theme .hs-empty-cart-help a:hover {
  color: var(--hs-navy);
}

/* Mobile padding más cómodo */
@media (max-width: 600px) {
  body.hs-theme .hs-empty-cart-custom {
    padding: 40px 24px 28px;
  }
  body.hs-theme .hs-empty-cart-icon { width: 80px; height: 80px; }
  body.hs-theme .hs-empty-cart-icon svg { width: 36px; height: 36px; }
  body.hs-theme .hs-empty-cart-ctas { flex-direction: column; }
  body.hs-theme .hs-empty-cart-cta-primary,
  body.hs-theme .hs-empty-cart-cta-secondary { width: 100%; justify-content: center; }
}

/* End v2.19 */

/* =========================================================================
   v2.20 — MI CUENTA: layout lado a lado + Pedidos empty + Direcciones
   ─────────────────────────────────────────────────────────────────────────
   Bugs producción de v2.18:
   - El float:left tiraba el content debajo del sidebar en algunos themes.
   - "No se ha hecho ningún pedido todavía. Explorar los productos" se veía
     como una notice plana con botón mal alineado.
   - Página de direcciones: titulares con barra azul rara, "Añadir Dirección"
     como link suelto, layout pobre.
   ========================================================================= */

/* --- 1) LAYOUT lado a lado: flex sobre .woocommerce --------------------- */
/* Sustituye el float:left/margin-left por flex limpio y robusto. */
@media (min-width: 900px) {
  body.hs-theme.woocommerce-account .woocommerce {
    display: flex !important;
    gap: 32px !important;
    align-items: flex-start !important;
    max-width: 100% !important;
  }
  body.hs-theme.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation,
  body.hs-theme.woocommerce-account .woocommerce > aside.woocommerce-MyAccount-navigation {
    flex: 0 0 280px !important;
    width: 280px !important;
    margin: 0 !important;
    position: sticky !important;
    top: 100px !important;
    align-self: flex-start !important;
    float: none !important;
  }
  body.hs-theme.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
  }
}
@media (max-width: 899px) {
  body.hs-theme.woocommerce-account .woocommerce {
    display: block !important;
  }
  body.hs-theme.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation,
  body.hs-theme.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
    width: 100% !important;
    margin: 0 0 24px !important;
    float: none !important;
  }
}

/* Quitamos cualquier reset que sobrescriba este flex */
body.hs-theme.woocommerce-account .woocommerce::before,
body.hs-theme.woocommerce-account .woocommerce::after {
  display: none !important;
  content: none !important;
}

/* --- 2) PEDIDOS — empty state como card con icono y CTA -------------- */
/* WC pinta una notice "No se ha hecho ningún pedido todavía" con un botón.
   La sustituimos visualmente por una empty-state card. */
body.hs-theme .woocommerce-MyAccount-content .woocommerce-info,
body.hs-theme .woocommerce-MyAccount-content .woocommerce-message,
body.hs-theme .woocommerce-MyAccount-content .woocommerce-notice--info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #fff !important;
  border: 1px solid var(--hs-gray-200) !important;
  border-left: 0 !important;
  border-radius: 18px !important;
  padding: 56px 32px !important;
  text-align: center;
  color: var(--hs-gray-700) !important;
  font-size: 1rem !important;
  margin: 0 !important;
  position: relative;
  box-shadow: 0 1px 0 rgba(33, 62, 92, 0.02);
}
/* Icono arriba del notice (circle con flecha) */
body.hs-theme .woocommerce-MyAccount-content .woocommerce-info::before {
  content: "";
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233aa4d5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/><line x1='3' y1='6' x2='21' y2='6'/><path d='M16 10a4 4 0 0 1-8 0'/></svg>") center/40% no-repeat,
    linear-gradient(135deg, rgba(58, 164, 213, 0.18), rgba(58, 164, 213, 0.04));
  margin-bottom: 4px;
}
/* Botón "Explorar los productos" dentro del notice — pill principal */
body.hs-theme .woocommerce-MyAccount-content .woocommerce-info a.button,
body.hs-theme .woocommerce-MyAccount-content .woocommerce-info a.wc-forward,
body.hs-theme .woocommerce-MyAccount-content .woocommerce-message a.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: var(--hs-water-dark) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 12px 26px !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  margin-top: 8px !important;
  box-shadow: 0 12px 28px -8px rgba(58, 164, 213, 0.45);
  transition: background 0.2s, transform 0.2s;
  float: none !important;
  position: static !important;
}
body.hs-theme .woocommerce-MyAccount-content .woocommerce-info a.button:hover,
body.hs-theme .woocommerce-MyAccount-content .woocommerce-info a.wc-forward:hover {
  background: var(--hs-navy) !important;
  transform: translateY(-2px);
}

/* --- 3) DIRECCIONES — cards limpias para envío y facturación --------- */
/* Quitamos la barra accent de los h2/h3 genéricos en este contexto */
body.hs-theme .woocommerce-MyAccount-content .woocommerce-Address h3,
body.hs-theme .woocommerce-MyAccount-content header.woocommerce-Address-title h3,
body.hs-theme .woocommerce-Addresses h3 {
  border-left: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font-family: var(--hs-font-heading) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: var(--hs-navy) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* Texto introductorio "Las siguientes direcciones..." */
body.hs-theme .woocommerce-MyAccount-content > p:first-child:not(.woocommerce-info):not(.woocommerce-message) {
  color: var(--hs-gray-600);
  font-size: 0.95rem;
  margin: 0 0 20px;
  line-height: 1.55;
}

/* Grid de las dos direcciones (envío + facturación) */
body.hs-theme .woocommerce-MyAccount-content .woocommerce-Addresses,
body.hs-theme .woocommerce-Addresses.col2-set,
body.hs-theme .u-columns.col2-set {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 18px !important;
  margin: 0 0 24px !important;
}
@media (max-width: 720px) {
  body.hs-theme .woocommerce-MyAccount-content .woocommerce-Addresses {
    grid-template-columns: 1fr !important;
  }
}
body.hs-theme .woocommerce-Addresses .col-1,
body.hs-theme .woocommerce-Addresses .col-2,
body.hs-theme .u-columns.col2-set .col-1,
body.hs-theme .u-columns.col2-set .col-2 {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

/* Card individual de dirección */
body.hs-theme .woocommerce-Address {
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: 16px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 0 rgba(33, 62, 92, 0.02);
}
body.hs-theme .woocommerce-Address:hover {
  border-color: var(--hs-water);
  box-shadow: 0 14px 30px -16px rgba(33, 62, 92, 0.18);
}

/* Header de cada card de dirección con título + botón "Añadir/Editar" */
body.hs-theme .woocommerce-Address-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 0 12px 0 !important;
  border-bottom: 1px solid var(--hs-gray-100) !important;
  width: 100%;
}
body.hs-theme .woocommerce-Address-title h3 {
  flex: 1 1 auto;
}

/* Botón "Añadir/Editar Dirección" — pill outline */
body.hs-theme .woocommerce-Address-title .edit,
body.hs-theme .woocommerce-Address-title a.edit,
body.hs-theme .woocommerce-Address a.edit {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 14px !important;
  background: transparent !important;
  border: 1.5px solid var(--hs-gray-300) !important;
  color: var(--hs-water-dark) !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
body.hs-theme .woocommerce-Address-title .edit::before {
  content: "+";
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}
body.hs-theme .woocommerce-Address-title .edit:hover {
  border-color: var(--hs-water) !important;
  color: var(--hs-navy) !important;
  background: rgba(58, 164, 213, 0.06) !important;
}

/* Cuerpo de la dirección (address element) */
body.hs-theme .woocommerce-Address address {
  font-style: normal;
  color: var(--hs-gray-700);
  line-height: 1.6;
  font-size: 0.95rem;
  margin: 0;
  padding: 0;
}

/* "Aún no has configurado este tipo de dirección." con tono empty state */
body.hs-theme .woocommerce-Address address:only-child,
body.hs-theme .woocommerce-Address > address {
  color: var(--hs-gray-500);
  font-style: italic;
  font-size: 0.9rem;
}
body.hs-theme .woocommerce-Address > address:contains("Aún no") {
  color: var(--hs-gray-500);
}

/* --- 4) FORMULARIOS DE Mi cuenta (edit-account, edit-address) -------- */
body.hs-theme .woocommerce-MyAccount-content form.woocommerce-EditAccountForm,
body.hs-theme .woocommerce-MyAccount-content form.woocommerce-address-fields,
body.hs-theme .woocommerce-MyAccount-content form.edit-account,
body.hs-theme .woocommerce-MyAccount-content form.lost_reset_password {
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: 18px;
  padding: 28px 32px;
  margin: 0 0 24px;
  box-shadow: 0 1px 0 rgba(33, 62, 92, 0.02);
}
body.hs-theme .woocommerce-MyAccount-content form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 20px;
}
body.hs-theme .woocommerce-MyAccount-content form fieldset legend {
  font-family: var(--hs-font-heading);
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--hs-navy);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  padding: 0;
}
body.hs-theme .woocommerce-MyAccount-content form .form-row {
  margin: 0 0 14px;
  width: 100%;
}
body.hs-theme .woocommerce-MyAccount-content form .form-row.form-row-first,
body.hs-theme .woocommerce-MyAccount-content form .form-row.form-row-last {
  width: calc(50% - 8px);
  display: inline-block;
}
body.hs-theme .woocommerce-MyAccount-content form .form-row.form-row-first { margin-right: 16px; }
@media (max-width: 600px) {
  body.hs-theme .woocommerce-MyAccount-content form .form-row.form-row-first,
  body.hs-theme .woocommerce-MyAccount-content form .form-row.form-row-last {
    width: 100%;
    margin-right: 0;
    display: block;
  }
}
body.hs-theme .woocommerce-MyAccount-content form label {
  display: block;
  font-weight: 700;
  color: var(--hs-navy);
  font-size: 0.86rem;
  margin-bottom: 6px;
}
body.hs-theme .woocommerce-MyAccount-content form input[type="text"],
body.hs-theme .woocommerce-MyAccount-content form input[type="email"],
body.hs-theme .woocommerce-MyAccount-content form input[type="tel"],
body.hs-theme .woocommerce-MyAccount-content form input[type="password"],
body.hs-theme .woocommerce-MyAccount-content form select,
body.hs-theme .woocommerce-MyAccount-content form .select2-selection {
  border: 1px solid var(--hs-gray-300) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  height: 46px !important;
  font-size: 0.95rem !important;
  background: #fff !important;
  color: var(--hs-gray-800) !important;
  width: 100% !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}
body.hs-theme .woocommerce-MyAccount-content form input:focus,
body.hs-theme .woocommerce-MyAccount-content form select:focus {
  border-color: var(--hs-water) !important;
  box-shadow: 0 0 0 3px rgba(58, 164, 213, 0.18) !important;
  outline: 0;
}
body.hs-theme .woocommerce-MyAccount-content form button[type="submit"],
body.hs-theme .woocommerce-MyAccount-content form .button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--hs-water-dark) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 13px 28px !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  cursor: pointer;
  margin-top: 12px;
  transition: background 0.2s, transform 0.2s;
}
body.hs-theme .woocommerce-MyAccount-content form button[type="submit"]:hover,
body.hs-theme .woocommerce-MyAccount-content form .button:hover {
  background: var(--hs-navy) !important;
  transform: translateY(-1px);
}

/* Stats grid en 2 columnas cuando se han quitado el "Total gastado" */
body.hs-theme .hs-account-stats--2col {
  grid-template-columns: repeat(2, 1fr) !important;
}
@media (max-width: 720px) {
  body.hs-theme .hs-account-stats--2col {
    grid-template-columns: 1fr !important;
  }
}

/* End v2.20 */

/* =========================================================================
   v2.21 — Direcciones: layout grid robusto + título sin barra rara
   ─────────────────────────────────────────────────────────────────────────
   Bugs:
   - Las 2 cards (envío + facturación) salían en diagonal en vez de en grid.
   - Título "Dirección de facturación" partía en 3 líneas porque el botón
     "+ Añadir" se comía el espacio del flex header.
   - Barra azul vertical pegada al título (border-left heredado).
   ========================================================================= */

/* Cubrimos TODOS los wrappers que WC usa para direcciones (varían por
   versión) y forzamos el grid de 2 columnas. */
body.hs-theme .woocommerce-MyAccount-content .u-columns,
body.hs-theme .woocommerce-MyAccount-content .col2-set,
body.hs-theme .woocommerce-MyAccount-content .col2-set.addresses,
body.hs-theme .woocommerce-MyAccount-content .woocommerce-Addresses,
body.hs-theme .woocommerce-MyAccount-content .addresses,
body.hs-theme .woocommerce-Addresses {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 18px !important;
  margin: 0 0 24px !important;
}
@media (max-width: 720px) {
  body.hs-theme .woocommerce-MyAccount-content .u-columns,
  body.hs-theme .woocommerce-MyAccount-content .col2-set.addresses,
  body.hs-theme .woocommerce-MyAccount-content .woocommerce-Addresses {
    grid-template-columns: 1fr !important;
  }
}
/* Cada columna ocupa 100% del track, sin width inline ni floats heredados */
body.hs-theme .woocommerce-MyAccount-content .col-1,
body.hs-theme .woocommerce-MyAccount-content .col-2,
body.hs-theme .woocommerce-MyAccount-content .u-column1,
body.hs-theme .woocommerce-MyAccount-content .u-column2 {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* --- Address card: layout VERTICAL (título → cuerpo → botón) ---------- */
/* Antes el header era flex con título+botón en la misma línea y se
   rompía. Ahora va apilado: queda más limpio y el botón es full-width. */
body.hs-theme .woocommerce-Address {
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: 16px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 0 rgba(33, 62, 92, 0.02);
}
body.hs-theme .woocommerce-Address:hover {
  border-color: var(--hs-water);
  box-shadow: 0 14px 30px -16px rgba(33, 62, 92, 0.18);
}

/* Header de la card: solo título, ya no flex con botón */
body.hs-theme .woocommerce-Address-title,
body.hs-theme header.woocommerce-Address-title {
  display: block !important;
  border: 0 !important;
  border-left: 0 !important;
  border-bottom: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Título sin barra azul ni padding extra */
body.hs-theme .woocommerce-MyAccount-content .woocommerce-Address h2,
body.hs-theme .woocommerce-MyAccount-content .woocommerce-Address h3,
body.hs-theme .woocommerce-MyAccount-content .woocommerce-Address-title h2,
body.hs-theme .woocommerce-MyAccount-content .woocommerce-Address-title h3,
body.hs-theme .woocommerce-MyAccount-content [class*="Address-title"] h2,
body.hs-theme .woocommerce-MyAccount-content [class*="Address-title"] h3 {
  display: block !important;
  font-family: var(--hs-font-heading) !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: var(--hs-navy) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 0 !important;
  background: transparent !important;
  white-space: normal !important;
  word-break: normal !important;
  width: auto !important;
  max-width: 100% !important;
}
body.hs-theme .woocommerce-MyAccount-content .woocommerce-Address h2::before,
body.hs-theme .woocommerce-MyAccount-content .woocommerce-Address h3::before,
body.hs-theme .woocommerce-MyAccount-content .woocommerce-Address-title h2::before,
body.hs-theme .woocommerce-MyAccount-content .woocommerce-Address-title h3::before {
  display: none !important;
  content: none !important;
}

/* Cuerpo de la dirección */
body.hs-theme .woocommerce-Address address {
  font-style: normal;
  color: var(--hs-gray-700);
  line-height: 1.6;
  font-size: 0.95rem;
  margin: 0 0 4px;
  padding: 12px 14px;
  background: var(--hs-gray-50);
  border-radius: 10px;
}
/* Si el address sólo contiene "Aún no has configurado..." (empty) lo
   tratamos como empty state */
body.hs-theme .woocommerce-Address address {
  position: relative;
}

/* Botón "Añadir/Editar" full-width al pie de la card */
body.hs-theme .woocommerce-Address .edit,
body.hs-theme .woocommerce-Address-title .edit,
body.hs-theme .woocommerce-Address a.edit {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  padding: 11px 18px !important;
  background: var(--hs-water-dark) !important;
  border: 0 !important;
  color: #fff !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  transition: background 0.2s, transform 0.2s;
  box-shadow: 0 8px 20px -8px rgba(58, 164, 213, 0.4);
  margin: 4px 0 0 !important;
  position: static !important;
  float: none !important;
  white-space: nowrap;
}
body.hs-theme .woocommerce-Address .edit::before,
body.hs-theme .woocommerce-Address-title .edit::before {
  content: "+";
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
}
body.hs-theme .woocommerce-Address .edit:hover {
  background: var(--hs-navy) !important;
  transform: translateY(-2px);
}

/* Si la dirección YA está configurada, el botón pasa a "Editar" — outline
   más sutil porque ya hay datos; añadimos esto detectando que el address
   tiene más texto que el placeholder vacío */
/* (CSS no puede detectar contenido fácilmente, dejamos el estilo único
    primary que vale para añadir y editar). */

/* End v2.21 */

/* =========================================================================
   v2.22 — FICHA DE PRODUCTO restaurada + fixes
   - Layout 2 columnas (imagen / info) con spacing pro
   - Quitar el lila del "Añadir al carrito" (forzar azul agua)
   - Limitar la gota roja gigante de las descripciones a tamaño razonable
   - Tabs (Descripción / Información / Valoraciones) limpias
   - Tabla de info con tipografía coherente
   ========================================================================= */

/* --- 1) LAYOUT del single product: 2 columnas iguales ----------------- */
@media (min-width: 900px) {
  body.hs-theme.single-product div.product,
  body.hs-theme.single-product .product:not(.product-category) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 48px !important;
    align-items: flex-start !important;
    max-width: 100% !important;
  }
  body.hs-theme.single-product div.product > .woocommerce-product-gallery,
  body.hs-theme.single-product div.product > .images {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    position: static !important;
    top: auto !important;
  }
  body.hs-theme.single-product div.product > .summary,
  body.hs-theme.single-product div.product > .entry-summary {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    padding: 0 !important;
  }
  /* Tabs y related-products ocupan ancho completo bajo el grid */
  body.hs-theme.single-product div.product > .woocommerce-tabs,
  body.hs-theme.single-product div.product > .related,
  body.hs-theme.single-product div.product > .upsells,
  body.hs-theme.single-product div.product > .product-tabs-wrap {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 48px 0 0 !important;
  }
}
@media (max-width: 899px) {
  body.hs-theme.single-product div.product {
    display: block !important;
  }
  body.hs-theme.single-product div.product > .woocommerce-product-gallery,
  body.hs-theme.single-product div.product > .summary {
    width: 100% !important;
    margin: 0 0 24px !important;
    float: none !important;
  }
}

/* Galería del producto: imagen grande sin recortes raros */
body.hs-theme.single-product .woocommerce-product-gallery {
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 1px 0 rgba(33,62,92,0.02);
}
body.hs-theme.single-product .woocommerce-product-gallery__image img,
body.hs-theme.single-product .woocommerce-product-gallery img.wp-post-image {
  width: 100% !important;
  height: auto !important;
  max-height: 600px !important;
  object-fit: contain !important;
  display: block;
  margin: 0 auto;
}
body.hs-theme.single-product .flex-control-thumbs {
  display: flex !important;
  gap: 10px !important;
  margin-top: 16px !important;
  padding: 0 !important;
  list-style: none !important;
  justify-content: center;
  flex-wrap: wrap;
}
body.hs-theme.single-product .flex-control-thumbs li {
  width: 64px !important;
  margin: 0 !important;
}
body.hs-theme.single-product .flex-control-thumbs img {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain !important;
  border: 1px solid var(--hs-gray-200) !important;
  border-radius: 8px !important;
  padding: 4px !important;
  cursor: pointer !important;
  background: #fff;
  transition: border-color 0.2s;
}
body.hs-theme.single-product .flex-control-thumbs img:hover,
body.hs-theme.single-product .flex-control-thumbs .flex-active {
  border-color: var(--hs-water) !important;
}

/* --- 2) SUMMARY (lado derecho): título, precio, button ---------------- */
body.hs-theme.single-product .summary .product_title,
body.hs-theme.single-product .summary h1.product_title {
  font-family: var(--hs-font-heading) !important;
  font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
  font-weight: 800 !important;
  color: var(--hs-navy) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.2 !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
}
body.hs-theme.single-product .summary .price,
body.hs-theme.single-product .summary p.price {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: var(--hs-water-dark) !important;
  margin: 0 0 16px !important;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
body.hs-theme.single-product .summary .price del,
body.hs-theme.single-product .summary p.price del {
  color: var(--hs-gray-500) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  text-decoration: line-through;
  order: 1;
}
body.hs-theme.single-product .summary .price ins,
body.hs-theme.single-product .summary p.price ins {
  color: var(--hs-water-dark) !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  order: 2;
}
body.hs-theme.single-product .summary .woocommerce-product-details__short-description {
  color: var(--hs-gray-700);
  line-height: 1.55;
  font-size: 0.95rem;
  margin: 0 0 20px;
}

/* Quantity + button row */
body.hs-theme.single-product .summary form.cart {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 16px 0 24px !important;
  flex-wrap: wrap;
}
body.hs-theme.single-product .summary form.cart .quantity {
  display: inline-flex !important;
  align-items: center !important;
}
body.hs-theme.single-product .summary form.cart input.qty {
  width: 70px !important;
  height: 50px !important;
  border: 1px solid var(--hs-gray-300) !important;
  border-radius: 10px !important;
  text-align: center !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--hs-navy) !important;
  background: #fff !important;
  padding: 0 !important;
}

/* --- 3) BOTÓN "Añadir al carrito" — quitar lila, forzar azul agua ---- */
body.hs-theme.single-product .summary .single_add_to_cart_button,
body.hs-theme.single-product button.single_add_to_cart_button,
body.hs-theme button.single_add_to_cart_button,
body.hs-theme button[name="add-to-cart"],
body.hs-theme.single-product .summary form.cart button[type="submit"],
body.hs-theme .summary .single_add_to_cart_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: var(--hs-water-dark) !important;
  background-color: var(--hs-water-dark) !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 14px 32px !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  height: 50px !important;
  box-shadow: 0 12px 28px -8px rgba(58, 164, 213, 0.45);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  text-decoration: none !important;
  text-transform: none !important;
}
body.hs-theme.single-product .summary .single_add_to_cart_button:hover,
body.hs-theme button.single_add_to_cart_button:hover {
  background: var(--hs-navy) !important;
  background-color: var(--hs-navy) !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -10px rgba(33, 62, 92, 0.55);
  color: #fff !important;
}
/* Estado disabled (cuando hay variations sin elegir) */
body.hs-theme .single_add_to_cart_button.disabled,
body.hs-theme .single_add_to_cart_button:disabled,
body.hs-theme button.single_add_to_cart_button:disabled {
  background: var(--hs-gray-200) !important;
  background-color: var(--hs-gray-200) !important;
  background-image: none !important;
  color: var(--hs-gray-500) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  box-shadow: none !important;
  border: 1px dashed var(--hs-gray-300) !important;
}
body.hs-theme .single_add_to_cart_button.disabled:hover {
  transform: none !important;
}

/* --- 4) Trust strip / SAT box bajo el botón --------------------------- */
body.hs-theme.single-product .summary .product_meta {
  font-size: 0.86rem;
  color: var(--hs-gray-600);
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--hs-gray-100);
}
body.hs-theme.single-product .summary .product_meta a {
  color: var(--hs-water-dark);
  font-weight: 600;
  text-decoration: none;
}

/* --- 5) TABS (Descripción / Información adicional / Valoraciones) ----- */
body.hs-theme.single-product .woocommerce-tabs {
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
}
body.hs-theme.single-product .woocommerce-tabs ul.tabs,
body.hs-theme.single-product .woocommerce-tabs ul.wc-tabs {
  display: flex !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: var(--hs-gray-50);
  border: 0 !important;
  border-bottom: 1px solid var(--hs-gray-200) !important;
  overflow-x: auto;
}
body.hs-theme.single-product .woocommerce-tabs ul.tabs::before,
body.hs-theme.single-product .woocommerce-tabs ul.tabs::after {
  display: none !important;
}
body.hs-theme.single-product .woocommerce-tabs ul.tabs li,
body.hs-theme.single-product .woocommerce-tabs ul.wc-tabs li {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
body.hs-theme.single-product .woocommerce-tabs ul.tabs li::before,
body.hs-theme.single-product .woocommerce-tabs ul.tabs li::after {
  display: none !important;
  content: none !important;
}
body.hs-theme.single-product .woocommerce-tabs ul.tabs li a {
  display: block !important;
  padding: 16px 24px !important;
  font-weight: 700 !important;
  color: var(--hs-gray-600) !important;
  text-decoration: none !important;
  font-size: 0.95rem !important;
  border-bottom: 3px solid transparent !important;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
body.hs-theme.single-product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--hs-navy) !important;
  background: rgba(58, 164, 213, 0.04);
}
body.hs-theme.single-product .woocommerce-tabs ul.tabs li.active a {
  color: var(--hs-water-dark) !important;
  border-bottom-color: var(--hs-water-dark) !important;
  background: #fff !important;
}
body.hs-theme.single-product .woocommerce-tabs .panel {
  padding: 28px 32px !important;
  margin: 0 !important;
  background: #fff !important;
}
body.hs-theme.single-product .woocommerce-tabs .panel h2:first-child {
  font-family: var(--hs-font-heading) !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: var(--hs-navy) !important;
  margin: 0 0 16px !important;
}

/* --- 6) GIGANTE: limitar imágenes en la descripción del producto ----- */
/* La gota roja gigante (logo de marca embebido en la descripción de
   ESPA/Injecta) ocupaba la pantalla. La limitamos a 120 px y la centramos
   o la ponemos como header pequeño de bloque. */
body.hs-theme.single-product .woocommerce-Tabs-panel img,
body.hs-theme.single-product .woocommerce-Tabs-panel--description img,
body.hs-theme.single-product .woocommerce-Tabs-panel--additional_information img {
  max-width: 120px !important;
  max-height: 120px !important;
  width: auto !important;
  height: auto !important;
  display: inline-block;
  margin: 0 8px 0 0;
  vertical-align: middle;
  object-fit: contain;
}
/* Si la imagen es la única en un párrafo (logo aislado), la centramos
   pequeño */
body.hs-theme.single-product .woocommerce-Tabs-panel p > img:only-child {
  display: block;
  margin: 16px auto;
  max-width: 100px !important;
  max-height: 100px !important;
}

/* --- 7) TABLA de "Información adicional" — limpia y legible ---------- */
body.hs-theme.single-product .woocommerce-product-attributes,
body.hs-theme.single-product table.shop_attributes {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 0 !important;
  width: 100% !important;
  margin: 16px 0 !important;
}
body.hs-theme.single-product .woocommerce-product-attributes tr,
body.hs-theme.single-product table.shop_attributes tr {
  border: 0 !important;
}
body.hs-theme.single-product .woocommerce-product-attributes th,
body.hs-theme.single-product table.shop_attributes th {
  background: var(--hs-gray-50) !important;
  color: var(--hs-navy) !important;
  font-weight: 700 !important;
  text-align: left !important;
  padding: 12px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hs-gray-100) !important;
  font-size: 0.9rem !important;
  width: 40%;
  vertical-align: top;
}
body.hs-theme.single-product .woocommerce-product-attributes td,
body.hs-theme.single-product table.shop_attributes td {
  background: #fff !important;
  color: var(--hs-gray-700) !important;
  padding: 12px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hs-gray-100) !important;
  font-size: 0.9rem !important;
  font-style: normal !important;
}

/* --- 8) DESCRIPCIÓN: tablas y headings limpias ---------------------- */
body.hs-theme.single-product .woocommerce-Tabs-panel--description h2,
body.hs-theme.single-product .woocommerce-Tabs-panel--description h3,
body.hs-theme.single-product .woocommerce-Tabs-panel--description h4 {
  font-family: var(--hs-font-heading) !important;
  color: var(--hs-navy) !important;
  font-weight: 800 !important;
  margin: 24px 0 10px !important;
}
body.hs-theme.single-product .woocommerce-Tabs-panel--description h2 { font-size: 1.2rem !important; }
body.hs-theme.single-product .woocommerce-Tabs-panel--description h3 { font-size: 1.05rem !important; }
body.hs-theme.single-product .woocommerce-Tabs-panel--description h4 { font-size: 0.95rem !important; }
body.hs-theme.single-product .woocommerce-Tabs-panel--description table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--hs-gray-200) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  width: 100% !important;
  margin: 12px 0 20px !important;
  font-size: 0.9rem;
}
body.hs-theme.single-product .woocommerce-Tabs-panel--description table th {
  background: var(--hs-gray-50) !important;
  color: var(--hs-navy) !important;
  padding: 10px 14px !important;
  text-align: left !important;
  font-weight: 700 !important;
  border-bottom: 1px solid var(--hs-gray-200) !important;
  font-size: 0.86rem !important;
}
body.hs-theme.single-product .woocommerce-Tabs-panel--description table td {
  padding: 10px 14px !important;
  color: var(--hs-gray-700) !important;
  border-bottom: 1px solid var(--hs-gray-100) !important;
  border-left: 1px solid var(--hs-gray-100) !important;
}
body.hs-theme.single-product .woocommerce-Tabs-panel--description table td:first-child {
  border-left: 0 !important;
}

/* --- v2.22 PARCHE — quitar la "sombra" cuadrada del hero card image ---
   El detector de color JS sí se mantiene (asigna el background del card al
   color del fondo de la imagen, sin pegote). Lo que generaba el cuadrado
   oscuro era el filter:drop-shadow que rodeaba a la silueta de la bomba
   (al tener partes negras, la sombra se veía como un halo cuadrado). */
body.hs-theme .hs-hero-v2 .hs-hero-v2-card-img img,
body.hs-theme .hs-hero-v2 .hs-hero-v2-card-img picture img,
body.hs-theme .hs-hero-v2 .hs-hero-v2-card .hs-hero-v2-card-img img {
  filter: none !important;
  -webkit-filter: none !important;
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
}
/* El wrapper de la imagen no debe llevar sombra/borde tampoco — solo le
   aplicamos el background detectado por JS (mismo color que la card). */
body.hs-theme .hs-hero-v2 .hs-hero-v2-card-img {
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
}

/* End v2.22 */

/* =========================================================================
   v2.23 — Estructura tipo "ficha técnica del fabricante" en la descripción
   del producto. El contenido del editor sigue siendo el del producto,
   pero le damos estilo profesional cuando uses ciertos patrones HTML:
     · <h2 class="hs-spec-section">Aplicaciones</h2>  → título de sección
     · <ul class="hs-spec-features">…</ul>            → lista con check
     · <table class="hs-spec-table">…</table>         → tabla 2 col
     · <div class="hs-spec-highlights">…</div>        → bloque destacado
     · <a class="hs-spec-download" href="…">Manual</a> → botón descarga
   ========================================================================= */

/* Sección de la descripción tipo ficha técnica */
body.hs-theme .woocommerce-Tabs-panel--description {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--hs-gray-700);
}

/* Headers de sección con barrita azul agua sutil a la izquierda */
body.hs-theme .woocommerce-Tabs-panel--description h2.hs-spec-section,
body.hs-theme .woocommerce-Tabs-panel--description h2,
body.hs-theme .woocommerce-Tabs-panel--description h3.hs-spec-section,
body.hs-theme .woocommerce-Tabs-panel--description h3 {
  font-family: var(--hs-font-heading);
  color: var(--hs-navy);
  font-weight: 800;
  margin: 32px 0 14px;
  padding: 0 0 0 14px;
  border-left: 4px solid var(--hs-water);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
body.hs-theme .woocommerce-Tabs-panel--description h2 { font-size: 1.3rem !important; }
body.hs-theme .woocommerce-Tabs-panel--description h3 { font-size: 1.05rem !important; }

/* Bloque "Aplicaciones" — lista con check verde */
body.hs-theme .woocommerce-Tabs-panel--description ul.hs-spec-features,
body.hs-theme .woocommerce-Tabs-panel--description ul {
  list-style: none;
  padding: 0;
  margin: 12px 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px 20px;
}
body.hs-theme .woocommerce-Tabs-panel--description ul li,
body.hs-theme .woocommerce-Tabs-panel--description ul.hs-spec-features li {
  position: relative;
  padding: 6px 0 6px 28px;
  color: var(--hs-gray-700);
  line-height: 1.5;
  font-size: 0.94rem;
}
body.hs-theme .woocommerce-Tabs-panel--description ul li::before,
body.hs-theme .woocommerce-Tabs-panel--description ul.hs-spec-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/12px no-repeat,
    rgba(16, 185, 129, 0.12);
}

/* Highlights — bloque con icono y texto destacado (inteligencia técnica) */
body.hs-theme .woocommerce-Tabs-panel--description .hs-spec-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 20px 0 28px;
}
body.hs-theme .woocommerce-Tabs-panel--description .hs-spec-highlights > div {
  background: linear-gradient(135deg, rgba(58,164,213,0.06), rgba(58,164,213,0.02));
  border: 1px solid rgba(58,164,213,0.18);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--hs-gray-700);
}
body.hs-theme .woocommerce-Tabs-panel--description .hs-spec-highlights strong {
  display: block;
  color: var(--hs-navy);
  font-weight: 800;
  margin-bottom: 2px;
}

/* Tablas técnicas: 2 columnas etiqueta-valor (estilo spec sheet) */
body.hs-theme .woocommerce-Tabs-panel--description table.hs-spec-table,
body.hs-theme .woocommerce-Tabs-panel--description table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  margin: 12px 0 28px !important;
  font-size: 0.92rem !important;
  border: 1px solid var(--hs-gray-200) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #fff;
}
body.hs-theme .woocommerce-Tabs-panel--description table caption {
  caption-side: top;
  font-family: var(--hs-font-heading);
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--hs-navy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--hs-gray-50);
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--hs-gray-200);
}
body.hs-theme .woocommerce-Tabs-panel--description table th,
body.hs-theme .woocommerce-Tabs-panel--description table td {
  padding: 12px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hs-gray-100) !important;
  vertical-align: top;
}
body.hs-theme .woocommerce-Tabs-panel--description table tr:last-child th,
body.hs-theme .woocommerce-Tabs-panel--description table tr:last-child td {
  border-bottom: 0 !important;
}
body.hs-theme .woocommerce-Tabs-panel--description table th {
  background: var(--hs-gray-50) !important;
  color: var(--hs-navy) !important;
  font-weight: 700 !important;
  text-align: left !important;
  width: 40% !important;
  font-size: 0.88rem !important;
}
body.hs-theme .woocommerce-Tabs-panel--description table td {
  color: var(--hs-gray-800) !important;
  font-weight: 500 !important;
}
/* Filas grupos: tr con clase .group-header */
body.hs-theme .woocommerce-Tabs-panel--description table tr.group-header th,
body.hs-theme .woocommerce-Tabs-panel--description table tr.group-header td {
  background: var(--hs-navy) !important;
  color: #fff !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.78rem !important;
}

/* Botones de descarga (manual, ficha técnica) */
body.hs-theme .woocommerce-Tabs-panel--description a.hs-spec-download,
body.hs-theme .woocommerce-Tabs-panel--description a[href$=".pdf"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: transparent;
  border: 1.5px solid var(--hs-gray-300);
  border-radius: 999px;
  color: var(--hs-water-dark);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  margin: 8px 8px 8px 0;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
body.hs-theme .woocommerce-Tabs-panel--description a.hs-spec-download::before,
body.hs-theme .woocommerce-Tabs-panel--description a[href$=".pdf"]::before {
  content: "";
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232185b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>") center/contain no-repeat;
}
body.hs-theme .woocommerce-Tabs-panel--description a.hs-spec-download:hover,
body.hs-theme .woocommerce-Tabs-panel--description a[href$=".pdf"]:hover {
  border-color: var(--hs-water);
  color: var(--hs-navy);
  background: var(--hs-ice);
}

/* Bloque de "Repuestos" o accesorios al final de descripción */
body.hs-theme .woocommerce-Tabs-panel--description .hs-spec-related {
  background: var(--hs-ice);
  border-radius: 12px;
  padding: 18px 22px;
  margin: 28px 0;
  border-left: 4px solid var(--hs-water);
}

/* Párrafos de texto largo: ancho cómodo de lectura */
body.hs-theme .woocommerce-Tabs-panel--description p {
  max-width: 72ch;
  margin: 0 0 14px;
}

/* Ancla de cabecera estilo "spec sheet" — barra de info debajo del título */
body.hs-theme .woocommerce-Tabs-panel--description .hs-spec-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
}
body.hs-theme .woocommerce-Tabs-panel--description .hs-spec-meta > span {
  background: var(--hs-gray-100);
  color: var(--hs-navy);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Limitar imágenes una vez más en la descripción (heredamos de v2.22 pero
   reforzamos por si llegan con inline width/height). */
body.hs-theme .woocommerce-Tabs-panel--description img {
  max-width: 100% !important;
  height: auto !important;
}
body.hs-theme .woocommerce-Tabs-panel--description img.alignright,
body.hs-theme .woocommerce-Tabs-panel--description img.alignleft {
  max-width: 200px !important;
}

/* Si hay un <hr> separador, suavizado */
body.hs-theme .woocommerce-Tabs-panel--description hr {
  border: 0;
  height: 1px;
  background: var(--hs-gray-200);
  margin: 28px 0;
}

/* --- v2.23 PARCHE — galería del producto NO sticky ---------------------
   El sticky sobre la galería rompía el scroll: si la columna derecha
   (info) era más corta que la galería, sticky generaba un "salto" feo
   y al final de la página la imagen seguía pegada arriba dejando
   hueco abajo. Forzamos position:static. */
body.hs-theme.single-product .woocommerce-product-gallery,
body.hs-theme.single-product .product .images,
body.hs-theme.single-product div.product > .woocommerce-product-gallery,
body.hs-theme.single-product div.product > .images {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  align-self: start !important;
}

/* End v2.23 */

/* =========================================================================
   v2.24 — FIXES single-product post-tabs
   - "Comprar bombas con tranquilidad" (.hs-product-whyus): full-width
   - Productos relacionados: grid sin huecos
   - Ocultar widgets sueltos al pie del producto (Buscador / Páginas /
     Archivos) que aparecen porque WP renderiza fallback de sidebar
   ========================================================================= */

/* --- 1) "Comprar bombas con tranquilidad" — sale del grid de 2 col ---- */
body.hs-theme.single-product div.product > .hs-product-whyus,
body.hs-theme.single-product div.product .hs-product-whyus,
body.hs-theme.single-product .hs-product-whyus {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 48px 0 0 !important;
  padding: 0 !important;
  background: var(--hs-ice);
  border-radius: 18px;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 48px) !important;
}
body.hs-theme.single-product .hs-product-whyus-inner {
  max-width: 100%;
}
body.hs-theme.single-product .hs-product-whyus header {
  text-align: center;
  margin-bottom: 28px;
}
body.hs-theme.single-product .hs-product-whyus header h2 {
  font-family: var(--hs-font-heading) !important;
  font-size: clamp(1.6rem, 2.8vw, 2rem) !important;
  font-weight: 800 !important;
  color: var(--hs-navy) !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 1.2 !important;
}

/* Grid de 4 items con auto-fit para que respeten el ancho */
body.hs-theme.single-product .hs-product-whyus-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
}
@media (max-width: 980px) {
  body.hs-theme.single-product .hs-product-whyus-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 560px) {
  body.hs-theme.single-product .hs-product-whyus-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Cards individuales */
body.hs-theme.single-product .hs-product-whyus-item {
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: 14px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  height: 100%;
}
body.hs-theme.single-product .hs-product-whyus-item:hover {
  transform: translateY(-3px);
  border-color: var(--hs-water);
  box-shadow: 0 14px 30px -16px rgba(33, 62, 92, 0.18);
}
body.hs-theme.single-product .hs-product-whyus-num {
  font-family: var(--hs-font-heading);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--hs-water-dark);
  line-height: 1;
  letter-spacing: -0.02em;
}
body.hs-theme.single-product .hs-product-whyus-item h3 {
  font-family: var(--hs-font-heading) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: var(--hs-navy) !important;
  margin: 4px 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}
body.hs-theme.single-product .hs-product-whyus-item p {
  margin: 0 !important;
  font-size: 0.9rem !important;
  color: var(--hs-gray-600) !important;
  line-height: 1.5 !important;
  flex: 1 1 auto;
}

/* CTA al pie */
body.hs-theme.single-product .hs-product-whyus-cta {
  text-align: center;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--hs-gray-200);
}
body.hs-theme.single-product .hs-product-whyus-cta p {
  font-size: 1rem;
  color: var(--hs-gray-700);
  margin: 0 0 14px;
}

/* --- 2) PRODUCTOS RELACIONADOS — grid sin huecos --------------------- */
body.hs-theme.single-product div.product > .related,
body.hs-theme.single-product div.product > .upsells,
body.hs-theme.single-product .related.products,
body.hs-theme.single-product .upsells.products {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 48px 0 0 !important;
}

body.hs-theme.single-product .related h2,
body.hs-theme.single-product .upsells h2 {
  font-family: var(--hs-font-heading) !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: var(--hs-navy) !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: 0 !important;
}

body.hs-theme.single-product .related ul.products,
body.hs-theme.single-product .upsells ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
@media (max-width: 980px) {
  body.hs-theme.single-product .related ul.products,
  body.hs-theme.single-product .upsells ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 560px) {
  body.hs-theme.single-product .related ul.products,
  body.hs-theme.single-product .upsells ul.products {
    grid-template-columns: 1fr !important;
  }
}
/* Reset cualquier grid-column que esté metiendo huecos */
body.hs-theme.single-product .related ul.products li.product,
body.hs-theme.single-product .upsells ul.products li.product {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}

/* --- 3) OCULTAR widgets sueltos que WP/plugins pintan al pie --------- */
/* Búsqueda + lista de páginas + archivos al pie del single product
   son fallback de sidebar/widgets que WP pinta cuando no hay tema custom.
   No deberían aparecer en single-product. */
body.hs-theme.single-product main .widget_search,
body.hs-theme.single-product main .widget_pages,
body.hs-theme.single-product main .widget_archive,
body.hs-theme.single-product main .widget_categories,
body.hs-theme.single-product main .widget_meta,
body.hs-theme.single-product main .widget_recent_entries,
body.hs-theme.single-product main .widget_recent_comments,
body.hs-theme.single-product main .widget_tag_cloud,
body.hs-theme.single-product main .widget_calendar,
body.hs-theme.single-product main .wp-block-search,
body.hs-theme.single-product main .wp-block-page-list,
body.hs-theme.single-product main .wp-block-archives,
body.hs-theme.single-product main .wp-block-categories,
body.hs-theme.single-product main .wp-block-latest-comments,
body.hs-theme.single-product main .wp-block-latest-posts,
body.hs-theme.single-product main .wp-block-tag-cloud,
body.hs-theme.single-product main aside.widget-area,
body.hs-theme.single-product main .secondary,
body.hs-theme.single-product main #secondary,
body.hs-theme.single-product main .sidebar:not(.woocommerce-MyAccount-navigation):not(.hs-account-nav) {
  display: none !important;
}

/* También en cualquier página del sitio fuera del shop archive
   y del blog, los widgets sueltos no deberían pintarse en el main */
body.hs-theme:not(.archive):not(.blog):not(.single-post):not(.search) main > .widget_search,
body.hs-theme:not(.archive):not(.blog):not(.single-post):not(.search) main > .widget_pages,
body.hs-theme:not(.archive):not(.blog):not(.single-post):not(.search) main > .widget_archive,
body.hs-theme:not(.archive):not(.blog):not(.single-post):not(.search) main > .widget_categories,
body.hs-theme:not(.archive):not(.blog):not(.single-post):not(.search) main > .widget_meta {
  display: none !important;
}

/* End v2.24 */

/* =========================================================================
   v2.25 — Fix quirúrgico para los widgets sueltos (Buscar / Páginas / Archivos)
   Aparecen en single-product como un <ul> con <li class="pagenav"> al final
   del main, fallback de wp_list_pages() y wp_get_archives() que algún
   shortcode/plugin inyecta. Se ocultan sin tocar menús ni footer reales.
   ========================================================================= */

/* Ocultar el UL con pagenav y sus hermanos archive en el main del single */
body.hs-theme.single-product main > ul:has(> li.pagenav),
body.hs-theme.single-product main ul:has(> li.pagenav),
body.hs-theme.single-product main > ul > li.pagenav,
body.hs-theme.single-product main ul > li.pagenav,
body.hs-theme.single-product main > ul > li:has(h2),
body.hs-theme.single-product main ul:has(> li > h2:only-child) {
  display: none !important;
}

/* Cualquier .hs-search-form fuera del header tampoco aparece en single */
body.hs-theme.single-product main .hs-search-form,
body.hs-theme.single-product main form.hs-search-form,
body.hs-theme.single-product main form[role="search"]:not(.hs-header-search):not(header *) {
  display: none !important;
}

/* Si el patrón es <ul> con <li> hijos que contienen H2 "Páginas"/"Archivos"
   directamente en el body main, lo ocultamos también */
body.hs-theme.single-product .hs-page-content > ul:last-child,
body.hs-theme.single-product article.product ~ ul,
body.hs-theme.single-product div.product ~ ul,
body.hs-theme.single-product div.product ~ form,
body.hs-theme.single-product .woocommerce ~ ul {
  display: none !important;
}

/* End v2.25 */

/* =========================================================================
   v2.26 — Chart H-Q (curva caudal-altura) en descripción de producto
   Estilo industrial profesional. Renderiza un SVG inline con los puntos
   factuales del CSV (Q en X, H en Y). El usuario solo escribe el HTML
   con clases .hs-spec-chart, .hs-spec-chart-svg, etc.
   ========================================================================= */
body.hs-theme.single-product .woocommerce-Tabs-panel--description .hs-spec-chart {
  background: #fff;
  border: 1px solid var(--hs-gray-200);
  border-radius: 14px;
  padding: 20px 24px;
  margin: 16px 0 24px;
  box-shadow: 0 1px 0 rgba(33, 62, 92, 0.02);
  max-width: 100%;
}
body.hs-theme.single-product .hs-spec-chart-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hs-gray-100);
  gap: 12px;
  flex-wrap: wrap;
}
body.hs-theme.single-product .hs-spec-chart-header strong {
  font-family: var(--hs-font-heading);
  color: var(--hs-navy);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
body.hs-theme.single-product .hs-spec-chart-header span {
  color: var(--hs-gray-500);
  font-size: 0.82rem;
  font-weight: 600;
}
body.hs-theme.single-product .hs-spec-chart-svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 420px !important;
  max-width: 100% !important;
  margin: 8px 0 !important;
}
body.hs-theme.single-product .hs-spec-chart-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 0.84rem;
  color: var(--hs-gray-700);
  padding-top: 10px;
  border-top: 1px solid var(--hs-gray-100);
}
body.hs-theme.single-product .hs-spec-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.hs-theme.single-product .hs-spec-chart-legend i {
  display: inline-block;
  width: 14px;
  height: 14px;
}
body.hs-theme.single-product .hs-spec-chart-legend i.lg-line {
  background: var(--hs-water-dark);
  height: 3px;
  border-radius: 2px;
}
body.hs-theme.single-product .hs-spec-chart-legend i.lg-dot {
  background: var(--hs-water-dark);
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--hs-water-dark);
}
body.hs-theme.single-product .hs-spec-chart-legend i.lg-bep {
  background: var(--hs-navy);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--hs-navy);
  border-radius: 50%;
}

body.hs-theme.single-product .hs-spec-chart-data {
  margin: 8px 0 24px;
  padding: 8px 14px;
  background: var(--hs-gray-50);
  border-radius: 8px;
  font-size: 0.86rem;
}
body.hs-theme.single-product .hs-spec-chart-data summary {
  cursor: pointer;
  color: var(--hs-water-dark);
  font-weight: 700;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
body.hs-theme.single-product .hs-spec-chart-data summary::-webkit-details-marker { display: none; }
body.hs-theme.single-product .hs-spec-chart-data summary::before {
  content: "▸";
  transition: transform 0.2s;
  font-size: 0.78rem;
}
body.hs-theme.single-product .hs-spec-chart-data[open] summary::before { transform: rotate(90deg); }
body.hs-theme.single-product .hs-spec-chart-data table {
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}

/* La regla de v2.22 limita imágenes a 120px en la descripción.
   Excepción: el SVG del chart NO debe limitarse. */
body.hs-theme.single-product .woocommerce-Tabs-panel--description .hs-spec-chart svg {
  max-width: 100% !important;
  max-height: 420px !important;
  width: 100% !important;
  height: auto !important;
}

body.hs-theme.single-product .hs-chart-note {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--hs-gray-500);
  font-style: italic;
}

/* End v2.26 */

/* End v2.14 */


/* =========================================================================
 * B2B CTA — sección home + maqueta de la página /profesionales/
 * v2.27
 * ========================================================================= */
.hs-b2b-cta { padding: clamp(40px, 6vw, 80px) 0; background: var(--hs-white); }
.hs-b2b-cta__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
    padding: 50px 44px;
    background: linear-gradient(135deg, var(--hs-ice) 0%, var(--hs-water-soft) 100%);
    border: 1px solid var(--hs-gray-200);
    border-radius: var(--hs-radius);
    overflow: hidden;
}
.hs-b2b-cta__inner::before {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -90px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--hs-water), var(--hs-navy));
    opacity: .08;
    pointer-events: none;
}
.hs-b2b-cta__content { position: relative; z-index: 2; }
.hs-b2b-cta__eyebrow {
    display: inline-block;
    padding: 5px 12px;
    background: var(--hs-water);
    color: #fff;
    border-radius: 999px;
    font-size: .72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 14px;
}
.hs-b2b-cta__title {
    font-size: clamp(1.6em, 2.6vw, 2em);
    font-weight: 800;
    color: var(--hs-navy);
    margin: 0 0 12px;
    line-height: 1.15;
    letter-spacing: -.01em;
}
.hs-b2b-cta__sub {
    font-size: 1.02em;
    color: var(--hs-gray-700);
    margin: 0 0 24px;
    line-height: 1.6;
    max-width: 560px;
}
.hs-b2b-cta__list {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
}
.hs-b2b-cta__list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .93em;
    color: var(--hs-body);
    font-weight: 500;
}
.hs-b2b-cta__list li::before {
    content: "";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--hs-water);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><polyline points='5 12 10 17 19 8'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
    margin-top: 2px;
}
.hs-b2b-cta__buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hs-b2b-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: var(--hs-radius-sm);
    font-weight: 700;
    font-size: .98em;
    text-decoration: none !important;
    transition: transform .15s ease, box-shadow .15s ease;
}
.hs-b2b-cta__btn--primary {
    background: linear-gradient(90deg, var(--hs-navy) 0%, var(--hs-water) 100%);
    color: #fff !important;
}
.hs-b2b-cta__btn--primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(18, 146, 212, .3); }
.hs-b2b-cta__btn--ghost {
    background: transparent;
    color: var(--hs-navy) !important;
    border: 1.5px solid var(--hs-navy);
}
.hs-b2b-cta__btn--ghost:hover { background: var(--hs-navy); color: #fff !important; }
.hs-b2b-cta__visual { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; }
.hs-b2b-cta__card {
    background: #fff;
    border: 1px solid var(--hs-gray-200);
    border-radius: var(--hs-radius);
    padding: 24px;
    box-shadow: 0 14px 40px rgba(33, 62, 92, .12);
    width: 100%;
    max-width: 340px;
}
.hs-b2b-cta__card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.hs-b2b-cta__card-icon {
    width: 44px; height: 44px;
    border-radius: var(--hs-radius-sm);
    background: linear-gradient(135deg, var(--hs-navy), var(--hs-water));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.hs-b2b-cta__card-title { font-weight: 700; color: var(--hs-navy); font-size: 1em; line-height: 1.2; }
.hs-b2b-cta__card-sub { font-size: .78em; color: var(--hs-gray-500); }
.hs-b2b-cta__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hs-b2b-cta__metric { padding: 14px; background: var(--hs-gray-50); border-radius: var(--hs-radius-sm); text-align: center; }
.hs-b2b-cta__metric-val { font-size: 1.4em; font-weight: 800; color: var(--hs-water); line-height: 1.1; }
.hs-b2b-cta__metric-label { font-size: .7em; color: var(--hs-gray-500); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; font-weight: 600; }
@media (max-width: 760px) {
    .hs-b2b-cta__inner { grid-template-columns: 1fr; padding: 34px 24px; }
    .hs-b2b-cta__list { grid-template-columns: 1fr; }
    .hs-b2b-cta__buttons { flex-direction: column; align-items: stretch; }
    .hs-b2b-cta__btn { justify-content: center; }
}


/* --- Página /profesionales/ ----------------------------------------------- */
.hs-prof { font-family: inherit; color: var(--hs-body); line-height: 1.55; }
.hs-prof__hero {
    position: relative;
    padding: 60px 40px;
    background: linear-gradient(135deg, var(--hs-navy-dark) 0%, var(--hs-navy) 50%, var(--hs-water) 100%);
    color: #fff;
    border-radius: var(--hs-radius);
    overflow: hidden;
    margin: 0 0 40px;
}
.hs-prof__hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.hs-prof__eyebrow {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    font-size: .78em; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em;
    margin-bottom: 18px;
}
.hs-prof__hero-title { font-size: clamp(1.8em, 4vw, 2.5em); font-weight: 800; line-height: 1.05; margin: 0 0 16px; letter-spacing: -.01em; }
.hs-prof__hero-sub { font-size: 1.05em; opacity: .94; line-height: 1.6; margin: 0 0 24px; }
.hs-prof__hero-cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 26px;
    background: #fff; color: var(--hs-navy) !important;
    border-radius: var(--hs-radius-sm);
    font-weight: 700; text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease;
}
.hs-prof__hero-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, .22); }
.hs-prof__hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hs-prof__hero-stat {
    padding: 18px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--hs-radius-sm);
    backdrop-filter: blur(6px);
}
.hs-prof__hero-stat-value { font-size: 1.7em; font-weight: 800; line-height: 1.1; }
.hs-prof__hero-stat-label { font-size: .78em; opacity: .86; text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
.hs-prof__section { margin: 60px 0; }
.hs-prof__section-eyebrow { font-size: .78em; font-weight: 700; color: var(--hs-water); text-transform: uppercase; letter-spacing: .12em; margin: 0 0 8px; }
.hs-prof__section-title { font-size: 2em; font-weight: 800; color: var(--hs-navy); margin: 0 0 14px; line-height: 1.15; }
.hs-prof__section-sub { font-size: 1.02em; color: var(--hs-gray-700); max-width: 720px; margin: 0 0 32px; line-height: 1.6; }
.hs-prof__benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.hs-prof__benefit { padding: 24px; background: #fff; border: 1px solid var(--hs-gray-200); border-radius: var(--hs-radius); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.hs-prof__benefit:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(18, 146, 212, .14); border-color: var(--hs-water); }
.hs-prof__benefit-icon { width: 48px; height: 48px; border-radius: var(--hs-radius-sm); background: linear-gradient(135deg, var(--hs-navy), var(--hs-water)); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.hs-prof__benefit h3 { font-size: 1.05em; font-weight: 700; color: var(--hs-navy); margin: 0 0 8px; }
.hs-prof__benefit p { font-size: .93em; color: var(--hs-gray-700); margin: 0; line-height: 1.55; }
.hs-prof__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; counter-reset: prof-step; }
.hs-prof__step { position: relative; padding: 24px 22px 22px; background: linear-gradient(180deg, var(--hs-ice) 0%, #fff 100%); border: 1px solid var(--hs-gray-200); border-radius: var(--hs-radius); counter-increment: prof-step; }
.hs-prof__step::before { content: counter(prof-step, decimal-leading-zero); position: absolute; top: 18px; right: 20px; font-size: 1.8em; font-weight: 800; color: var(--hs-water); opacity: .35; letter-spacing: -.02em; }
.hs-prof__step h3 { font-size: 1.02em; font-weight: 700; color: var(--hs-navy); margin: 0 0 6px; }
.hs-prof__step p { font-size: .92em; color: var(--hs-gray-700); margin: 0; line-height: 1.55; }
.hs-prof__faq { display: grid; gap: 10px; }
.hs-prof__faq details { padding: 16px 20px; background: #fff; border: 1px solid var(--hs-gray-200); border-radius: var(--hs-radius-sm); cursor: pointer; transition: border-color .15s ease; }
.hs-prof__faq details[open] { border-color: var(--hs-water); box-shadow: 0 4px 12px rgba(18, 146, 212, .1); }
.hs-prof__faq summary { font-weight: 700; color: var(--hs-navy); font-size: .98em; list-style: none; outline: none; }
.hs-prof__faq summary::-webkit-details-marker { display: none; }
.hs-prof__faq summary::after { content: "+"; float: right; font-size: 1.4em; color: var(--hs-water); font-weight: 600; line-height: 1; }
.hs-prof__faq details[open] summary::after { content: "−"; }
.hs-prof__faq details > p { margin: 12px 0 0; color: var(--hs-gray-700); font-size: .93em; line-height: 1.6; }
@media (max-width: 760px) {
    .hs-prof__hero { padding: 36px 24px; }
    .hs-prof__hero-grid { grid-template-columns: 1fr; }
}
/* End v2.27 */


/* =========================================================================
 * Mejoras de legibilidad para la página Pro y refinamientos visuales
 * v2.28
 * ========================================================================= */

/* Página /profesionales/ — más espacio respiratorio, contraste alto */
.hs-prof { font-size: 1.02rem; line-height: 1.7; max-width: 1180px; margin: 0 auto; padding: 0 22px; }
.hs-prof p { color: var(--hs-gray-700); font-size: 1rem; line-height: 1.75; }
.hs-prof h2.hs-prof__hero-title { line-height: 1.1; letter-spacing: -.015em; }
.hs-prof__hero-sub { font-size: 1.08em; line-height: 1.65; max-width: 580px; }
.hs-prof__hero-stat-value { font-size: 1.85em; }
.hs-prof__hero-stat-label { font-size: .8em; }
.hs-prof__section { margin: 80px 0; }
.hs-prof__section-title { font-size: clamp(1.6em, 2.5vw, 2.1em); margin-bottom: 18px; }
.hs-prof__section-sub { font-size: 1.05em; margin-bottom: 38px; line-height: 1.7; }
.hs-prof__benefits { gap: 20px; }
.hs-prof__benefit { padding: 28px 24px; }
.hs-prof__benefit h3 { font-size: 1.08em; line-height: 1.3; margin-bottom: 10px; }
.hs-prof__benefit p { font-size: .96em; line-height: 1.65; color: var(--hs-gray-700); }
.hs-prof__steps { gap: 20px; }
.hs-prof__step { padding: 30px 26px; }
.hs-prof__step h3 { font-size: 1.08em; margin-bottom: 8px; }
.hs-prof__step p { font-size: .96em; line-height: 1.65; }
.hs-prof__faq details { padding: 20px 24px; }
.hs-prof__faq summary { font-size: 1.02em; line-height: 1.45; padding-right: 32px; }
.hs-prof__faq summary::after { right: 8px; }
.hs-prof__faq details > p { font-size: .98em; line-height: 1.7; color: var(--hs-gray-700); }


/* Tarjetas de marca (home brands.php) — variante destacada para ESPA */
.hs-brand-big { position: relative; overflow: hidden; }
.hs-brand-big--primary { border: 2px solid var(--hs-water); box-shadow: 0 8px 28px rgba(58,164,213,.16); }
.hs-brand-big-stripe {
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--hs-navy) 0%, var(--hs-water) 100%);
}
.hs-brand-big-inner { padding: 28px 26px; position: relative; z-index: 1; }
.hs-brand-big-header { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.hs-brand-big-name { font-size: 2.1em; font-weight: 800; letter-spacing: -.01em; line-height: 1; }
.hs-brand-big-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    font-size: .72em; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
}
.hs-brand-big-badge--sat {
    background: linear-gradient(90deg, #e7f6ee 0%, #d1ecdc 100%);
    color: #1c6e3d;
    border: 1px solid #b2dec5;
}
.hs-brand-big-badge--dist {
    background: var(--hs-water-soft);
    color: var(--hs-navy);
    border: 1px solid #bcd9f3;
}
.hs-brand-big-pitch { font-size: 1.05em; font-weight: 600; color: var(--hs-navy); margin: 0 0 10px; line-height: 1.4; }
.hs-brand-big-desc { font-size: .98em; line-height: 1.65; color: var(--hs-gray-700); margin: 0 0 18px; }
.hs-brand-big-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 14px 0;
    margin: 0 0 18px;
    border-top: 1px solid var(--hs-gray-200);
    border-bottom: 1px solid var(--hs-gray-200);
}
.hs-brand-big-stat strong { display: block; font-size: 1.15em; font-weight: 800; color: var(--hs-water); line-height: 1.1; }
.hs-brand-big-stat span { font-size: .72em; color: var(--hs-gray-500); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.hs-brand-big-series { display: flex; flex-wrap: wrap; gap: 6px 8px; padding: 0; margin: 0 0 22px; list-style: none; }
.hs-brand-big-series li {
    padding: 4px 10px;
    background: var(--hs-water-soft);
    color: var(--hs-navy);
    border-radius: 999px;
    font-size: .82em;
    font-weight: 600;
}
.hs-brand-big-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px;
    background: linear-gradient(90deg, var(--hs-navy) 0%, var(--hs-water) 100%);
    color: #fff !important;
    font-weight: 700;
    border-radius: var(--hs-radius-sm);
    text-decoration: none !important;
    transition: transform .15s ease, box-shadow .15s ease;
}
.hs-brand-big-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(18,146,212,.28); }
.hs-brand-big--secondary .hs-brand-big-cta {
    background: transparent;
    color: var(--hs-navy) !important;
    border: 1.5px solid var(--hs-navy);
}
.hs-brand-big--secondary .hs-brand-big-cta:hover {
    background: var(--hs-navy);
    color: #fff !important;
}

/* End v2.28 */


/* =========================================================================
 * v2.29 — Pro hero con texto blanco legible + Formulario Pro inline +
 *         Productos relacionados como carrusel (mismo estilo que la home)
 * ========================================================================= */

/* --- Pro hero: contraste alto, texto blanco vivo ----------------------- */
.hs-prof__hero, .hs-prof__hero * { color: #fff; }
.hs-prof__hero-title { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.hs-prof__hero-sub { color: rgba(255,255,255,.96) !important; opacity: 1 !important; font-weight: 500; text-shadow: 0 1px 2px rgba(0,0,0,.12); }
.hs-prof__eyebrow { background: rgba(255,255,255,.22) !important; color: #fff !important; border-color: rgba(255,255,255,.42) !important; }
.hs-prof__hero-stat { background: rgba(255,255,255,.16) !important; border-color: rgba(255,255,255,.34) !important; }
.hs-prof__hero-stat-value { color: #fff !important; }
.hs-prof__hero-stat-label { color: rgba(255,255,255,.96) !important; opacity: 1 !important; font-weight: 600; }


/* --- Formulario Pro -------------------------------------------------- */
.hs-prof-form { background: #fff; border: 1px solid var(--hs-gray-200); border-radius: var(--hs-radius); padding: 36px 30px; box-shadow: 0 4px 14px rgba(33,62,92,.06); margin: 0 auto; max-width: 880px; }
.hs-prof-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.hs-prof-form__field { display: flex; flex-direction: column; gap: 6px; }
.hs-prof-form__field--full { grid-column: 1/-1; }
.hs-prof-form__label { font-size: .85em; font-weight: 700; color: var(--hs-navy); }
.hs-prof-form__label .req { color: var(--hs-red); margin-left: 2px; }
.hs-prof-form input[type="text"],
.hs-prof-form input[type="email"],
.hs-prof-form input[type="tel"],
.hs-prof-form select,
.hs-prof-form textarea {
    padding: 12px 14px; border: 1px solid var(--hs-gray-300); border-radius: var(--hs-radius-sm);
    font-size: .96em; font-family: inherit; color: var(--hs-body); background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.hs-prof-form input:focus, .hs-prof-form select:focus, .hs-prof-form textarea:focus {
    outline: none; border-color: var(--hs-water); box-shadow: 0 0 0 3px rgba(58,164,213,.18); background: var(--hs-water-soft);
}
.hs-prof-form textarea { min-height: 110px; resize: vertical; }
.hs-prof-form__check { grid-column: 1/-1; display: flex; align-items: flex-start; gap: 10px; font-size: .88em; color: var(--hs-gray-700); line-height: 1.5; }
.hs-prof-form__check input { margin-top: 4px; flex-shrink: 0; }
.hs-prof-form__actions { grid-column: 1/-1; display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 6px; flex-wrap: wrap; }
.hs-prof-form__actions small { font-size: .8em; color: var(--hs-gray-500); }
.hs-prof-form__submit {
    padding: 14px 32px; background: linear-gradient(90deg, var(--hs-navy) 0%, var(--hs-water) 100%);
    color: #fff; border: none; border-radius: var(--hs-radius-sm); font-weight: 700; font-size: 1em;
    cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.hs-prof-form__submit:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(18,146,212,.28); }
.hs-prof-form__notice { grid-column: 1/-1; padding: 14px 18px; border-radius: var(--hs-radius-sm); font-size: .94em; font-weight: 600; }
.hs-prof-form__notice--ok { background: #e7f6ee; color: #1c6e3d; border: 1px solid #b2dec5; }
.hs-prof-form__notice--err { background: #fcebec; color: #9a2a2f; border: 1px solid #f1c5c8; }

@media (max-width:680px){
    .hs-prof-form { padding: 24px 20px; }
    .hs-prof-form__grid { grid-template-columns: 1fr; }
    .hs-prof-form__actions { flex-direction: column; align-items: stretch; }
    .hs-prof-form__submit { width: 100%; }
}


/* --- Productos relacionados como carrusel (mismo estilo que home) ----- */
section.related, section.upsells {
    margin-top: 64px; padding-top: 32px;
    border-top: 1px solid var(--hs-gray-200);
}
section.related > h2, section.upsells > h2 {
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: 800; color: var(--hs-navy);
    margin: 0 0 24px;
}
section.related .hs-related-strip,
section.upsells .hs-related-strip {
    position: relative;
}
section.related ul.products,
section.upsells ul.products {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    gap: 18px !important;
    padding: 8px 4px 24px !important;
    margin: 0 !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--hs-water) transparent;
}
section.related ul.products::-webkit-scrollbar,
section.upsells ul.products::-webkit-scrollbar { height: 8px; }
section.related ul.products::-webkit-scrollbar-thumb,
section.upsells ul.products::-webkit-scrollbar-thumb { background: var(--hs-water); border-radius: 4px; }
section.related ul.products li.product,
section.upsells ul.products li.product {
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 280px !important;
    margin: 0 !important;
    padding: 18px 18px 22px !important;
    background: #fff;
    border: 1px solid var(--hs-gray-200);
    border-radius: var(--hs-radius);
    box-shadow: 0 1px 3px rgba(33,62,92,.05);
    scroll-snap-align: start;
    display: flex !important;
    flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
section.related ul.products li.product:hover,
section.upsells ul.products li.product:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(18,146,212,.18);
    border-color: var(--hs-water);
}
section.related ul.products li.product img,
section.upsells ul.products li.product img {
    display: block !important;
    margin: 0 auto 14px !important;
    width: 100% !important;
    height: 220px !important;
    object-fit: contain !important;
    background: var(--hs-water-soft);
    border-radius: var(--hs-radius-sm);
    padding: 10px;
}
section.related ul.products li.product .woocommerce-loop-product__title,
section.upsells ul.products li.product .woocommerce-loop-product__title,
section.related ul.products li.product h2,
section.upsells ul.products li.product h2 {
    font-size: 1em !important;
    font-weight: 700 !important;
    color: var(--hs-navy) !important;
    line-height: 1.35;
    min-height: 2.7em;
    margin: 0 0 12px !important;
    padding: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
section.related ul.products li.product .price,
section.upsells ul.products li.product .price {
    font-size: 1.15em !important;
    color: var(--hs-navy) !important;
    font-weight: 800 !important;
    margin: 0 0 14px !important;
}
section.related ul.products li.product .price del,
section.upsells ul.products li.product .price del { color: var(--hs-gray-500) !important; font-size: .82em; font-weight: 500; margin-right: 8px; }
section.related ul.products li.product .price ins,
section.upsells ul.products li.product .price ins { background: transparent !important; color: var(--hs-water) !important; text-decoration: none !important; }
section.related ul.products li.product .button,
section.upsells ul.products li.product .button {
    margin-top: auto !important;
    display: block !important; width: 100%; text-align: center !important;
    padding: 12px 16px !important;
    background: linear-gradient(90deg, var(--hs-navy) 0%, var(--hs-water) 100%) !important;
    color: #fff !important; border: none !important; border-radius: var(--hs-radius-sm) !important;
    font-weight: 700 !important; font-size: .94em !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
}
section.related ul.products li.product .button:hover,
section.upsells ul.products li.product .button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(18,146,212,.28) !important; }
section.related ul.products li.product .onsale,
section.upsells ul.products li.product .onsale {
    background: var(--hs-red) !important; color: #fff !important;
    font-size: .72em !important; font-weight: 700 !important; letter-spacing: .04em !important;
    padding: 5px 12px !important; border-radius: 999px !important; top: 14px !important; left: 14px !important;
}
.hs-related-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 44px; height: 44px; border-radius: 50%;
    background: #fff; border: 1px solid var(--hs-gray-200);
    color: var(--hs-navy); font-size: 1.5em; font-weight: 700;
    cursor: pointer; box-shadow: 0 4px 14px rgba(33,62,92,.14);
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.hs-related-arrow:hover { background: var(--hs-water); color: #fff; transform: translateY(-50%) scale(1.05); }
.hs-related-arrow--prev { left: -8px; }
.hs-related-arrow--next { right: -8px; }
@media (max-width:740px){
    .hs-related-arrow { display: none; }
    section.related ul.products li.product, section.upsells ul.products li.product { flex-basis: 240px !important; width: 240px !important; }
}

/* End v2.29 */



/* =========================================================================
 * v2.35 — Barra de búsqueda del header (más prominente, sin solape de icono)
 * Quita el icono duplicado de la izquierda (::before) y deja la lupa SOLO
 * dentro del botón de la derecha. Aumenta tamaño, contraste y focus state.
 * ========================================================================= */

.hs-header-inner .hs-search-box {
    flex: 1 1 auto;
    max-width: 540px;
    position: relative;
}
.hs-header-inner .hs-search-box::before { content: none; display: none; }

.hs-header-inner .hs-search-box input[type="search"] {
    width: 100%;
    padding: 12px 56px 12px 18px;
    border: 1.5px solid var(--hs-gray-300);
    border-radius: 999px;
    font-size: 0.95rem;
    background: #fff;
    color: var(--hs-body);
    box-shadow: 0 1px 3px rgba(33, 62, 92, .06);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    outline: none;
    height: auto;
    line-height: 1.4;
}
.hs-header-inner .hs-search-box input[type="search"]::placeholder {
    color: var(--hs-gray-500);
    font-weight: 500;
}
.hs-header-inner .hs-search-box input[type="search"]:hover {
    border-color: var(--hs-water);
    box-shadow: 0 2px 8px rgba(58, 164, 213, .12);
}
.hs-header-inner .hs-search-box input[type="search"]:focus {
    border-color: var(--hs-water);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(58, 164, 213, .18);
}

.hs-header-inner .hs-search-box button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--hs-navy) 0%, var(--hs-water) 100%);
    color: #fff;
    border: 0;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(33, 62, 92, .18);
    transition: transform .15s ease, box-shadow .15s ease;
}
.hs-header-inner .hs-search-box button:hover {
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 4px 12px rgba(18, 146, 212, .35);
    color: #fff;
}
.hs-header-inner .hs-search-box button svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

/* Móvil: que la barra ocupe todo el ancho */
@media (max-width: 900px) {
    .hs-header-inner .hs-search-box { max-width: none; }
}

/* End v2.35 */

/* ========================================================================
 * Figuras de páginas SAT y Sobre Nosotros (sin style inline)
 * ------------------------------------------------------------------------ */
.hs-about-figure,
.hs-sat-hero-figure {
    margin: 8px 0 32px;
}
.hs-about-figure img,
.hs-sat-hero-figure img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 12px 40px -12px rgba(15, 23, 42, .25);
    display: block;
}
.hs-about-figure + h3,
.hs-sat-hero-figure + h3 {
    margin-top: 32px;
}

/* ========================================================================
 * SKU visible debajo del título (SEO + UX)
 * ------------------------------------------------------------------------ */
.hs-product-sku-visible {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 12px;
    padding: 4px 10px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.85em;
    line-height: 1.2;
    color: #475569;
}
.hs-product-sku-label {
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.92em;
}
.hs-product-sku-code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 0.02em;
    user-select: all;
}

/* ========================================================================
 * Enlazado interno en ficha de producto (SEO)
 * ------------------------------------------------------------------------ */
.hs-product-cat-link {
    margin: 0 0 12px;
    font-size: 0.92em;
}
.hs-product-cat-link a {
    color: var(--hs-water, #1292d4);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .15s ease;
}
.hs-product-cat-link a:hover {
    border-bottom-color: currentColor;
}

.hs-spare-parts-block {
    margin: 48px 0 32px;
    padding: 32px 24px;
    background: #f8fafc;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
}
.hs-spare-parts-block h2 {
    margin: 0 0 8px;
    font-size: 1.4em;
}
.hs-spare-parts-intro {
    color: #475569;
    margin: 0 0 24px;
}
.hs-spare-parts-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}
.hs-spare-parts-grid li {
    margin: 0;
}
.hs-spare-part-link {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    padding: 12px;
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    height: 100%;
}
.hs-spare-part-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -8px rgba(15, 23, 42, .15);
    border-color: var(--hs-water, #1292d4);
}
.hs-spare-part-img img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}
.hs-spare-part-name {
    display: block;
    margin-top: 8px;
    font-weight: 600;
    font-size: 0.92em;
    line-height: 1.35;
}
.hs-spare-part-price {
    display: block;
    margin-top: 4px;
    color: var(--hs-water, #1292d4);
    font-weight: 700;
    font-size: 0.88em;
}

.hs-sat-banner-product {
    margin: 32px 0;
    padding: 24px 28px;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
    color: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 40px -12px rgba(15, 23, 42, .25);
}
.hs-sat-banner-product h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 1.2em;
}
.hs-sat-banner-product p {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, .92);
    line-height: 1.5;
}
.hs-sat-banner-product a {
    color: #fff;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.hs-sat-banner-cta {
    display: inline-block;
    margin-top: 4px;
    padding: 10px 18px;
    background: #fff;
    color: #0f172a !important;
    text-decoration: none !important;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95em;
    transition: transform .15s ease;
}
.hs-sat-banner-cta:hover {
    transform: translateY(-1px);
}

/* Tabla comparativa SAT */
.hs-sat-compare {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 0.95em;
}
.hs-sat-compare th,
.hs-sat-compare td {
    padding: 12px;
    border: 1px solid #e2e8f0;
    text-align: left;
    vertical-align: top;
}
.hs-sat-compare thead tr {
    background: #f1f5f9;
}
.hs-sat-compare thead th:nth-child(2) {
    color: #0f766e;
}
.hs-sat-compare thead th:nth-child(3) {
    color: #475569;
}

/* ========================================================================
 * VISOR STL (Three.js) — <hs-stl-viewer>
 * ------------------------------------------------------------------------
 * Comparte estructura con el visor GLB (.hs-product-3d-wrap, tabs, thumbs)
 * y solo añade los estilos del componente <hs-stl-viewer> y de su loader,
 * progreso, error y botón de reset.
 * ======================================================================*/
body.hs-theme hs-stl-viewer {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 320px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    background: transparent;
    overflow: hidden;
}
body.hs-theme .hs-product-3d-pane[data-pane="3d"] hs-stl-viewer {
    position: absolute;
    inset: 0;
    height: 100%;
}

body.hs-theme hs-stl-viewer .hs-stl-canvas-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
body.hs-theme hs-stl-viewer canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    outline: none;
}

/* Poster (imagen estática mientras descarga) */
body.hs-theme hs-stl-viewer .hs-stl-poster {
    position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.85;
    filter: blur(2px) brightness(1.05);
    transition: opacity .35s ease;
    pointer-events: none;
}
body.hs-theme hs-stl-viewer .hs-stl-poster[hidden] { display: none; }

/* Loader / barra de progreso */
body.hs-theme hs-stl-viewer .hs-stl-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(245,250,252,0.78));
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    color: var(--hs-navy, #0e2236);
    font-size: 13px;
    z-index: 2;
    pointer-events: none;
}
body.hs-theme hs-stl-viewer .hs-stl-loader[hidden] { display: none; }
body.hs-theme hs-stl-viewer .hs-stl-spinner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid rgba(58, 164, 213, 0.25);
    border-top-color: var(--hs-water, #3aa4d5);
    animation: hs-stl-spin 0.85s linear infinite;
}
@keyframes hs-stl-spin { to { transform: rotate(360deg); } }
body.hs-theme hs-stl-viewer .hs-stl-loader-text {
    font-weight: 500;
    letter-spacing: 0.01em;
}
body.hs-theme hs-stl-viewer .hs-stl-progress-track {
    width: min(220px, 60%);
    height: 4px;
    border-radius: 999px;
    background: rgba(14, 34, 54, 0.12);
    overflow: hidden;
}
body.hs-theme hs-stl-viewer .hs-stl-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--hs-water, #3aa4d5), var(--hs-navy, #0e2236));
    border-radius: 999px;
    transition: width .15s ease-out;
}
body.hs-theme hs-stl-viewer .hs-stl-progress-num {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--hs-gray-600, #5a6877);
}

/* Mensaje de error */
body.hs-theme hs-stl-viewer .hs-stl-error {
    position: absolute;
    inset: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #fff5f5;
    border: 1px solid #f0c6c6;
    color: #8a1f1f;
    border-radius: var(--hs-radius, 12px);
    font-size: 13px;
    line-height: 1.4;
    padding: 16px;
    z-index: 3;
}
body.hs-theme hs-stl-viewer .hs-stl-error[hidden] { display: none; }

/* "Pista" de interacción que aparece tras cargar */
body.hs-theme hs-stl-viewer .hs-stl-prompt {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(14, 34, 54, 0.78);
    color: #fff;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
    pointer-events: none;
    animation: hs-stl-prompt-fade 4s ease forwards;
    z-index: 2;
}
body.hs-theme hs-stl-viewer .hs-stl-prompt[hidden] { display: none; }
@keyframes hs-stl-prompt-fade {
    0%   { opacity: 0; transform: translate(-50%, 6px); }
    15%  { opacity: 1; transform: translate(-50%, 0); }
    85%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -4px); }
}

/* Botón de reset (recentrar) */
body.hs-theme hs-stl-viewer .hs-stl-reset {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--hs-gray-200, #e3e8ee);
    background: rgba(255,255,255,0.92);
    color: var(--hs-navy, #0e2236);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(14, 34, 54, 0.08);
    transition: transform .15s ease, background .15s ease;
    z-index: 4;
}
body.hs-theme hs-stl-viewer .hs-stl-reset:hover {
    background: #fff;
    transform: rotate(-30deg) scale(1.05);
}
body.hs-theme hs-stl-viewer .hs-stl-reset[hidden] { display: none; }

/* Sin AR para STL: ocultamos el badge de AR si por error apareciera */
body.hs-theme .hs-product-3d-wrap--stl .hs-ar-button { display: none !important; }
/* End STL viewer */

/* =========================================================================
   v2.36 — FIXES VISUALES PEQUEÑOS (mayo 2026)
   1. Mega-nav: hover bridge + intent delay para que el panel no
      desaparezca cuando el cursor cruza en diagonal hacia una categoría.
   2. FAQ <details><summary>: estilo card + hover iluminado.
   3. Botón "Ver carrito" del aviso post-add-to-cart: pill azul de marca.
   4. Recuadro de pago en el carrito: tarjetas de marca (Visa/MC/AMEX/Bizum/Redsys).
   5. Trust badges del producto: variante de 6 ítems en 2 columnas.
   ========================================================================= */

/* --- 1) MEGA-NAV: anti-disappearing fix ----------------------------------
   Problema: al mover el cursor en diagonal desde "Productos" hacia una
   categoría del panel, atraviesas otro <li> de la barra y se pierde el
   :hover sobre el <li> "has-mega". Como el panel está dentro de ese <li>
   pero su visibilidad depende del :hover del padre, desaparece.
   Solución (CSS-only):
   a) "Hover bridge": un pseudo-elemento ::before que ocupa el hueco entre
      el item y el panel, manteniendo el hover activo durante el viaje.
   b) Cuando ya estás dentro del panel, mantener visible al re-hovear
      (porque el panel es descendiente del li, ya está cubierto).
   c) Aumentar el transition-delay de "ocultación" para tolerar 200ms
      de salidas accidentales (intent gap).
*/
/* IMPORTANTE: el <li> sigue siendo position: static (regla original) para
   que el .hs-mega-panel, que es position:absolute con left:0/right:0,
   se ancle al ancestro posicionado del nav (la barra entera) y ocupe
   todo el ancho. Si pusiéramos position:relative en el <li>, el panel
   sólo sería tan ancho como el propio link (bug visual).
   Posicionamos el bridge sobre el <a> haciendo el <a> position:relative. */
body.hs-theme .hs-mega-nav-item.has-mega > a {
    position: relative;
}
body.hs-theme .hs-mega-nav-item.has-mega > a::after {
    /* Hover bridge invisible debajo del link, ancho del propio link.
       Su única función es atrapar el cursor durante el viaje de la barra
       al panel sin afectar al layout visible. */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 22px;          /* margen de tolerancia hacia abajo */
    background: transparent;
    pointer-events: auto;
    z-index: 600;
}
body.hs-theme .hs-mega-nav-item.has-mega .hs-mega-panel {
    /* Eliminar el delay de hide y dárselo al revés: aparece al instante
       y se oculta tras 220ms para tolerar trayectorias diagonales rápidas. */
    transition:
        opacity 0.15s ease 0s,
        transform 0.18s ease 0s,
        visibility 0s linear 0.22s;
}
body.hs-theme .hs-mega-nav-item.has-mega:hover .hs-mega-panel,
body.hs-theme .hs-mega-nav-item.has-mega:focus-within .hs-mega-panel,
body.hs-theme .hs-mega-nav-item.has-mega.is-hover-intent .hs-mega-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition:
        opacity 0.18s ease 0s,
        transform 0.2s ease 0s,
        visibility 0s linear 0s;
}
/* Si el cursor entra en el propio panel, mantenerlo abierto aunque hayas
   salido del link superior (el panel ya es descendiente del li, así que
   :hover sobre el panel propaga al :hover del li padre — esto sólo
   refuerza el comportamiento). */
body.hs-theme .hs-mega-panel:hover {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* --- 2) FAQ <details><summary>: card + hover iluminado ------------------- */
body.hs-theme .hs-page-content details {
    background: #fff;
    border: 1px solid var(--hs-gray-200);
    border-radius: 12px;
    padding: 0;
    margin: 10px 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
    overflow: hidden;
}
body.hs-theme .hs-page-content details > summary {
    cursor: pointer;
    list-style: none;
    padding: 16px 48px 16px 18px;
    font-weight: 700;
    color: var(--hs-navy);
    font-size: 1rem;
    line-height: 1.4;
    position: relative;
    user-select: none;
    transition: color 0.2s ease, background 0.2s ease;
}
body.hs-theme .hs-page-content details > summary::-webkit-details-marker { display: none; }
body.hs-theme .hs-page-content details > summary::marker { content: ""; }
/* Chevron animado a la derecha */
body.hs-theme .hs-page-content details > summary::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2.5px solid var(--hs-water-dark);
    border-bottom: 2.5px solid var(--hs-water-dark);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.25s ease, border-color 0.2s ease;
}
body.hs-theme .hs-page-content details[open] > summary::after {
    transform: translateY(-30%) rotate(-135deg);
}
/* HOVER: el feedback visual que pide el cliente */
body.hs-theme .hs-page-content details:hover {
    border-color: var(--hs-water);
    box-shadow: 0 8px 24px -8px rgba(58, 164, 213, 0.35);
    background: linear-gradient(180deg, #f8fcff 0%, #ffffff 100%);
    transform: translateY(-1px);
}
body.hs-theme .hs-page-content details:hover > summary {
    color: var(--hs-water-dark);
}
body.hs-theme .hs-page-content details:hover > summary::after {
    border-color: var(--hs-navy);
}
body.hs-theme .hs-page-content details:focus-within {
    border-color: var(--hs-water);
    box-shadow: 0 0 0 3px rgba(58, 164, 213, 0.18);
    outline: 0;
}
body.hs-theme .hs-page-content details > summary:focus { outline: 0; }
body.hs-theme .hs-page-content details[open] {
    border-color: var(--hs-water-soft);
    background: var(--hs-ice);
}
body.hs-theme .hs-page-content details > p {
    padding: 0 18px 18px;
    margin: 0;
    color: var(--hs-gray-700);
    line-height: 1.65;
}

/* --- 3) Botón "Ver carrito" en el aviso post-add-to-cart -----------------
   Por defecto WooCommerce pinta el botón con su naranja/verde grisáceo
   (.button.wc-forward) que rompe la paleta. Lo forzamos a azul de marca. */
body.hs-theme .woocommerce-message a.button.wc-forward,
body.hs-theme .woocommerce-message a.wc-forward,
body.hs-theme .woocommerce-info a.button.wc-forward {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--hs-water-dark) !important;
    background-image: linear-gradient(135deg, var(--hs-water) 0%, var(--hs-water-dark) 100%) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 10px 22px !important;
    font-weight: 800 !important;
    font-size: 0.92rem !important;
    text-decoration: none !important;
    box-shadow: 0 8px 20px -8px rgba(58, 164, 213, 0.55) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
    margin-right: 12px !important;
    float: none !important;
}
body.hs-theme .woocommerce-message a.button.wc-forward:hover,
body.hs-theme .woocommerce-message a.wc-forward:hover {
    background: var(--hs-navy) !important;
    background-image: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 26px -10px rgba(14, 34, 54, 0.45) !important;
    color: #fff !important;
}

/* --- 4) Tarjetas de pago en el carrito (sidebar derecho) ----------------- */
body.hs-theme .hs-cart-trust-cards {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--hs-gray-200);
}
body.hs-theme .hs-cart-trust-cards-label {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hs-gray-500);
    margin-bottom: 8px;
}
body.hs-theme .hs-cart-trust-cards-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
body.hs-theme .hs-cart-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--hs-gray-200);
    border-radius: 6px;
    padding: 2px;
    line-height: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body.hs-theme .hs-cart-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -4px rgba(15, 23, 42, 0.18);
}
body.hs-theme .hs-cart-card svg { display: block; }
body.hs-theme .hs-cart-trust-cards-secure {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.76rem;
    color: var(--hs-gray-500);
}
body.hs-theme .hs-cart-trust-cards-secure svg {
    color: var(--hs-green);
    flex-shrink: 0;
}

/* --- 5) Trust-badges variante 6 ítems en la ficha de producto ------------ */
body.hs-theme .hs-trust-badges.hs-trust-badges-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}
body.hs-theme .hs-trust-badges.hs-trust-badges-6 .hs-trust-item {
    padding: 4px 0;
}
@media (max-width: 480px) {
    body.hs-theme .hs-trust-badges.hs-trust-badges-6 {
        grid-template-columns: 1fr;
    }
}

/* End v2.36 */

/* =========================================================================
   v2.37 — Métodos de pago en Mi cuenta + fix contraste teléfono filters-help
   ========================================================================= */

/* --- 0) FIX contraste — el teléfono del aside "¿Necesitas ayuda?" del
       sidebar de la tienda y de Mi cuenta estaba en azul claro sobre
       fondo navy y casi no se leía. Lo pasamos a blanco. ----------------- */
body.hs-theme .hs-filters-help a,
body.hs-theme .hs-account-help a,
body.hs-theme .hs-account-help-cta {
    color: #fff !important;
    text-decoration: none;
    font-weight: 700;
}
body.hs-theme .hs-filters-help a:hover,
body.hs-theme .hs-account-help a:hover,
body.hs-theme .hs-account-help-cta:hover {
    color: var(--hs-water) !important;
}

/* --- 1) Cabecera del listado de métodos de pago -------------------------- */
body.hs-theme .hs-account-pm-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 22px;
    margin: 0 0 24px;
    background: linear-gradient(135deg, #f8fcff 0%, #ffffff 100%);
    border: 1px solid var(--hs-water-soft);
    border-radius: 14px;
    box-shadow: 0 8px 24px -16px rgba(58, 164, 213, 0.4);
}
body.hs-theme .hs-account-pm-header h2 {
    margin: 0 0 6px;
    font-size: 1.25rem;
    color: var(--hs-navy);
    line-height: 1.2;
}
body.hs-theme .hs-account-pm-header p {
    margin: 0;
    color: var(--hs-gray-700);
    font-size: 0.92rem;
    line-height: 1.5;
    max-width: 56ch;
}
body.hs-theme .hs-account-pm-add {
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background-image: linear-gradient(135deg, var(--hs-water) 0%, var(--hs-water-dark) 100%) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 12px 22px !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    box-shadow: 0 10px 22px -10px rgba(58, 164, 213, 0.6) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}
body.hs-theme .hs-account-pm-add:hover {
    transform: translateY(-2px);
    background: var(--hs-navy) !important;
    background-image: none !important;
    box-shadow: 0 14px 28px -12px rgba(14, 34, 54, 0.55) !important;
}
@media (max-width: 640px) {
    body.hs-theme .hs-account-pm-header {
        flex-direction: column;
    }
    body.hs-theme .hs-account-pm-add {
        width: 100%;
        justify-content: center !important;
    }
}

/* --- 2) Estado vacío sin tarjetas guardadas ------------------------------ */
body.hs-theme .hs-account-pm-empty {
    text-align: center;
    padding: 36px 24px;
    background: #fff;
    border: 1px dashed var(--hs-gray-200);
    border-radius: 14px;
}
body.hs-theme .hs-account-pm-empty-illu {
    color: var(--hs-water);
    margin-bottom: 12px;
}
body.hs-theme .hs-account-pm-empty h3 {
    margin: 0 0 8px;
    color: var(--hs-navy);
    font-size: 1.15rem;
}
body.hs-theme .hs-account-pm-empty p {
    margin: 0 auto 18px;
    max-width: 50ch;
    color: var(--hs-gray-700);
    font-size: 0.95rem;
}
body.hs-theme .hs-account-pm-empty small {
    display: block;
    margin-top: 14px;
    font-size: 0.78rem;
    color: var(--hs-gray-500);
}

/* --- 3) Cards "Añadir tarjeta" y "Mis tarjetas" en dashboard ------------- */
body.hs-theme .hs-account-block--pm .hs-account-pm-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 600px) {
    body.hs-theme .hs-account-block--pm .hs-account-pm-cards {
        grid-template-columns: 1fr;
    }
}
body.hs-theme .hs-account-pm-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--hs-gray-200);
    border-radius: 12px;
    text-decoration: none;
    color: var(--hs-gray-800);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
body.hs-theme .hs-account-pm-card:hover {
    border-color: var(--hs-water);
    box-shadow: 0 10px 22px -12px rgba(58, 164, 213, 0.4);
    transform: translateY(-2px);
}
body.hs-theme .hs-account-pm-card-ico {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--hs-water-soft);
    color: var(--hs-water-dark);
    flex-shrink: 0;
}
body.hs-theme .hs-account-pm-card strong {
    display: block;
    color: var(--hs-navy);
    font-size: 0.96rem;
    margin-bottom: 2px;
}
body.hs-theme .hs-account-pm-card span {
    display: block;
    color: var(--hs-gray-500);
    font-size: 0.82rem;
    line-height: 1.35;
}
/* Variante "Añadir": destacada con borde azul punteado y fondo claro */
body.hs-theme .hs-account-pm-card--add {
    border-style: dashed;
    border-color: var(--hs-water);
    background: linear-gradient(135deg, #f8fcff 0%, #ffffff 100%);
}
body.hs-theme .hs-account-pm-card--add .hs-account-pm-card-ico {
    background: var(--hs-water);
    color: #fff;
    box-shadow: 0 6px 14px -6px rgba(58, 164, 213, 0.55);
}

/* --- 4) Microcopy en checkout sobre guardar tarjeta ---------------------- */
body.hs-theme .hs-checkout-pm-tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 14px;
    padding: 12px 14px;
    background: var(--hs-ice);
    border: 1px solid var(--hs-water-soft);
    border-radius: 10px;
    color: var(--hs-gray-700);
    font-size: 0.86rem;
    line-height: 1.45;
}
body.hs-theme .hs-checkout-pm-tip svg {
    color: var(--hs-water-dark);
    flex-shrink: 0;
    margin-top: 2px;
}

/* --- 5) Refuerzo de la tabla de métodos de pago del core ----------------- */
body.hs-theme .woocommerce-MyAccount-paymentMethods {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 12px;
    background: #fff;
    border: 1px solid var(--hs-gray-200);
    border-radius: 14px;
    overflow: hidden;
}
body.hs-theme .woocommerce-MyAccount-paymentMethods th,
body.hs-theme .woocommerce-MyAccount-paymentMethods td {
    padding: 14px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--hs-gray-100) !important;
    text-align: left;
    vertical-align: middle;
}
body.hs-theme .woocommerce-MyAccount-paymentMethods thead th {
    background: var(--hs-ice);
    color: var(--hs-navy);
    font-size: 0.84rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
body.hs-theme .woocommerce-MyAccount-paymentMethods tr:last-child td {
    border-bottom: 0 !important;
}
body.hs-theme .woocommerce-MyAccount-paymentMethods .button {
    background: #fff !important;
    color: var(--hs-water-dark) !important;
    border: 1px solid var(--hs-water-soft) !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    box-shadow: none !important;
}
body.hs-theme .woocommerce-MyAccount-paymentMethods .button:hover {
    background: var(--hs-water) !important;
    color: #fff !important;
    border-color: var(--hs-water) !important;
}

/* End v2.37 */