/* ============================================================================
 * BobGrow Theme — Child of Hummingbird (PrestaShop 9.1) + Bootstrap 5.3
 * Reference design: herbiesheadshop.com/es
 * Brand colors: green primary (#00ae69), yellow buy button (#ffd335)
 * ============================================================================
 *
 *  1.  Variables & fonts
 *  2.  Base reset & typography
 *  3.  Layout (#wrapper, columns)
 *  4.  Header
 *      4.1 Cross-promotional banner
 *      4.2 Main row (logo, search, icons)
 *      4.3 Language / currency selectors
 *  5.  Navigation bar (green gradient)
 *  6.  Footer
 *  7.  Home sections
 *      7.1 Image slider
 *      7.2 Reassurance bar
 *      7.3 Top products carousel
 *      7.4 Categories grid / subcategories
 *  8.  Category listing
 *      8.1 Category header (compact)
 *      8.2 Sidebar (single outer card)
 *      8.3 Facetada accordion (transparent items, divider only)
 *      8.4 Price slider (noUiSlider)
 *      8.5 Active filters
 *      8.6 Subcategories ("Explora por banco")
 *      8.7 Products-top (count + sort + filter button)
 *      8.8 Products grid
 *  9.  Product card miniature
 * 10.  Product detail page
 * 11.  Forms & inputs
 * 12.  Buttons
 * 13.  Breadcrumb & pagination
 * 14.  Modals & offcanvas (BS5)
 * 15.  Utilities (back-to-top, etc.)
 * 16.  Responsive — tablet (max 991px)
 * 17.  Responsive — mobile (max 767px)
 * 18.  Bootstrap 5 / Hummingbird compatibility
 *
 * Conventions:
 *  - Selectors prefixed with `#wrapper` or `body#X` to override Hummingbird
 *  - `!important` only where strictly necessary (documented)
 *  - All `bobgrow-*` classes follow BEM (block__element--modifier)
 * ============================================================================ */


/* ============================================================================
   1. VARIABLES & FONTS
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');

:root {
  /* Brand */
  --primary-color:   #00ae69;
  --primary-hover:   #008e56;
  --primary-semi:    rgba(0, 174, 105, 0.15);
  --nav-gradient:    linear-gradient(135deg, #00ae69, #008e56 40%, #006644 75%, #004d30);
  --divider-gradient: linear-gradient(135deg, #00ae69, #008e56 50%, #004d30);

  /* Neutrals */
  --color-white:     #ffffff;
  --main-text-color: #414141;
  --text-heading:    #181818;
  --text-muted:      #ada9a9;
  --color-sale:      #c91818;
  --color-accent-purple: #7d22e1;
  --badge-yellow:    #ffd335;

  /* Surfaces */
  --bg-body:         #ffffff;
  --bg-card:         #ffffff;
  --bg-header:       #ffffff;
  --bg-footer:       #00ae69;
  --bg-footer-bottom: #008e56;
  --border-color:    #e3e3e3;

  /* Typography */
  --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-10: 0.625rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-25: 1.5625rem;
  --fs-26: 1.625rem;
  --fs-32: 2rem;

  /* Spacing */
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;

  /* Radii */
  --radius-sm:     8px;
  --radius-md:    16px;
  --radius-lg:    20px;
  --radius-xl:    40px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-card:  0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.15);
  --shadow-btn:   0 2px 8px rgba(0, 174, 105, 0.3);

  /* Header heights (used by sticky-aware components) */
  --cross-banner-height:   48px;
  --top-container-height:  90px;
  --desktop-links-height:  45px;
  --header-total-height:   calc(var(--cross-banner-height) + var(--top-container-height) + var(--desktop-links-height));
  --header-scrolled-height: calc(var(--top-container-height) + var(--desktop-links-height));
}


/* ============================================================================
   2. BASE RESET & TYPOGRAPHY
   ============================================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-family);
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--main-text-color);
  background-color: var(--bg-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--primary-hover); }

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  color: var(--text-heading);
  font-weight: 700;
  margin: 0 0 0.5em;
}

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

button {
  font-family: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}


/* ============================================================================
   3. LAYOUT
   ============================================================================ */

#wrapper { background: var(--bg-body); }

.container-fluid {
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 15px;
}

#main {
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-xl);
}


/* ============================================================================
   4. HEADER
   ============================================================================ */

#header {
  background-color: var(--bg-header);
  position: sticky;
  top: 0;
  /* z-index alto para quedar SIEMPRE encima de elementos sticky de página
     como .cart-grid__aside-wrapper (z:1020 en Hummingbird carrito).
     Modal del menú está en 9001, backdrop 8990, así que 1050 no entra en conflicto. */
  z-index: 1050;
  width: 100%;
  transition: box-shadow 0.2s ease;
}

#header.scrolled,
#header.sticky,
#header.is-sticky { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10); }


/* ---- 4.1 Cross-promotional banner ---- */

#header .cross-banner {
  background: var(--nav-gradient);
  color: var(--color-white);
  height: var(--cross-banner-height);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-13);
  font-weight: 500;
  padding: 0 var(--spacing-md);
  text-align: center;
}

#header .cross-banner__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#header .cross-banner__item .btn {
  background: var(--color-white);
  color: var(--text-heading);
  border-radius: 999px;
  padding: 4px 14px;
  font-weight: 600;
  font-size: var(--fs-12);
  border: none;
  margin-left: 6px;
}

#header.scrolled .cross-banner,
#header.sticky .cross-banner,
#header.is-sticky .cross-banner { display: none; }


/* ---- 4.2 Header main row (logo + search + icons) ---- */

#header .bobgrow-header-main {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  height: var(--top-container-height);
  padding: 0 var(--spacing-md);
  max-width: 1290px;
  margin: 0 auto;
}

#header .bobgrow-header-logo { flex: 0 0 auto; }
#header .bobgrow-header-logo__img {
  max-height: 60px;
  width: auto;
  display: block;
}

#header .bobgrow-header-search {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  max-width: 600px;
  position: relative; /* anchor para Bobi asomado encima del search */
}

/* Bobi asomado encima del search bar — solo desktop, sutil.
   top: -22px = pixel-perfect para que las manos se apoyen sobre el borde
   superior del input. Lado IZQUIERDO. */
#header .bobgrow-header-search__bobi {
  position: absolute;
  top: -22px;
  left: 28px;
  width: 52px;
  height: auto;
  z-index: 10;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
  /* ESTÁTICO — sin transition ni focus transform: al escribir Bobi NO se mueve */
}
/* Mobile: ocultar — el search es un icono trigger, no hay barra dónde apoyarse */
@media (max-width: 767px) {
  #header .bobgrow-header-search__bobi { display: none; }
}

#header .bobgrow-header-search form,
#header .bobgrow-header-search .ps-searchbar__form {
  display: flex;
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}

/* DESACTIVADA — focus-within canónico vive más abajo en una sola regla */
#header .bobgrow-original-focus-placeholder { display: none; }

#header .bobgrow-header-search input[type="text"],
#header .bobgrow-header-search input[type="search"],
#header .bobgrow-header-search .ps-searchbar__input {
  flex: 1 1 auto;
  border: none;
  outline: none;
  background: transparent;
  padding: 10px 18px;
  font-size: var(--fs-14);
  color: var(--main-text-color);
  min-width: 0;
}

#header .bobgrow-header-search button[type="submit"],
#header .bobgrow-header-search .ps-searchbar__submit {
  background: var(--primary-color);
  color: var(--color-white);
  border: none;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

#header .bobgrow-header-search button[type="submit"]:hover,
#header .bobgrow-header-search .ps-searchbar__submit:hover {
  background: var(--primary-hover);
}

#header .bobgrow-header-icons {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

#header .bobgrow-header-icon-btn,
#header .bobgrow-header-icon-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-circle);
  color: var(--text-heading);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#header .bobgrow-header-icon-btn:hover,
#header .bobgrow-header-icon-link:hover {
  background: var(--primary-semi);
  color: var(--primary-color);
}

/* Cart wrap: necesita ser inline-flex con dimensiones, si no el SVG hijo
   no ocupa el espacio del .bobgrow-header-icon-link (38x38) y queda invisible. */
#header .bobgrow-cart-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* SVG dentro de cualquier icon-link del header: tamaño fijo 22px (no inherit del SVG default 300x150). */
#header .bobgrow-header-icon-link svg,
#header .bobgrow-header-icon-btn > a > svg,
#header .bobgrow-cart-icon-wrap > svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: block;
}

/* Badge contador del carrito — soporta tres clases que aparecen en el DOM:
   .bobgrow-cart-badge (template propio), .cart-products-count (PS9 nativo del blockcart),
   .header-block__badge (variante mobile). */
#header .bobgrow-cart-badge,
#header .bobgrow-cart-btn .cart-products-count,
#header .blockcart .cart-products-count,
#header .header-block__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--badge-yellow);
  color: var(--text-heading);
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: var(--fs-10);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  pointer-events: none;
}


/* ---- 4.3 Language / currency selectors (dropdown) ---- */

/* Wrapper: necesita position:relative para anclar el dropdown absolute */
#header .bobgrow-header-icon-btn.bobgrow-selector {
  position: relative;
  width: auto;
  min-width: 56px;
  padding: 0 4px;
}

/* Toggle estilo "texto + chevron" — proporción casa con los otros iconos
   del header (38x38) que también miden 38px de alto. Aumentamos la fuente
   y el padding interno para que el peso visual sea equivalente. */
#header .bobgrow-selector-toggle--text {
  width: auto;
  min-width: 54px;
  height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
#header .bobgrow-selector-toggle--text:hover,
#header .bobgrow-selector-toggle--text[aria-expanded="true"] {
  background: var(--primary-semi);
  color: var(--primary-color);
}
#header .bobgrow-selector-toggle__label {
  display: inline-block;
  line-height: 1;
  font-size: var(--fs-14);
  font-weight: 800;
}
#header .bobgrow-header-currency .bobgrow-selector-toggle__label {
  font-size: 1.125rem;
  font-weight: 700;
  margin-top: -1px;
}
#header .bobgrow-selector-toggle__chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.18s ease;
  opacity: 0.7;
}
#header .bobgrow-selector-toggle--text[aria-expanded="true"] .bobgrow-selector-toggle__chevron {
  transform: rotate(180deg);
  opacity: 1;
}

#header .bobgrow-selector-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 1100;
}

#header .bobgrow-selector-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#header .bobgrow-selector-dropdown a,
#header .bobgrow-selector-dropdown button {
  display: block;
  width: 100%;
  padding: 8px 16px;
  background: transparent;
  border: none;
  text-align: left;
  color: var(--main-text-color);
  font-size: var(--fs-14);
}

#header .bobgrow-selector-dropdown a:hover,
#header .bobgrow-selector-dropdown button:hover {
  background: var(--primary-semi);
  color: var(--primary-color);
}

/* Lista de opciones convertidas (JS transforma <select> en <ul><li><a>) */
#header .bobgrow-selector-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
#header .bobgrow-selector-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  color: var(--text-heading);
  font-size: var(--fs-14);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
#header .bobgrow-selector-option:hover {
  background: var(--primary-semi);
  color: var(--primary-color);
}
#header .bobgrow-selector-option.is-selected {
  background: rgba(0, 174, 105, 0.10);
  color: var(--primary-color);
  font-weight: 700;
}
#header .bobgrow-selector-option.is-selected::after {
  content: "";
  width: 14px;
  height: 14px;
  margin-left: auto;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300ae69' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'/%3e%3c/svg%3e") center/contain no-repeat;
}


/* ============================================================================
   5. NAVIGATION BAR
   ============================================================================ */

#header .bobgrow-nav-bar {
  background: var(--nav-gradient);
  width: 100%;
  height: var(--desktop-links-height);
  position: relative;
  z-index: 1;
  margin-top: 14px; /* separación del logo + search row — antes pegado */
}
@media (max-width: 767px) {
  #header .bobgrow-nav-bar { margin-top: 0; }
}

#header .bobgrow-nav-bar .container,
#header .bobgrow-nav-bar .container-fluid {
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  height: 100%;
  display: flex;
  align-items: center;
}

#header .bobgrow-nav-bar .rlmenu,
#header .bobgrow-nav-bar .rlmenu_navigation {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
}

#header .bobgrow-nav-bar .element_nav { display: inline-flex; }

#header .bobgrow-nav-bar .open_rlmenu {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 16px;
  background: transparent;
  border: none;
  color: var(--color-white);
  font-size: var(--fs-14);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

#header .bobgrow-nav-bar .open_rlmenu:hover,
#header .bobgrow-nav-bar .open_rlmenu:focus {
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}

#header .bobgrow-nav-bar .open_rlmenu .material-icons,
#header .bobgrow-nav-bar .open_rlmenu i {
  color: inherit;
  font-size: 22px;
  line-height: 1;
}

#header .bobgrow-nav-bar a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
}

#header .bobgrow-nav-bar a:hover { color: var(--color-white); }


/* ============================================================================
   6. FOOTER
   ============================================================================ */

#footer {
  background: var(--bg-footer);
  color: var(--color-white);
  margin-top: var(--spacing-xl);
}

#footer a { color: var(--color-white); }
#footer a:hover { color: var(--badge-yellow); }

#footer .footer-container {
  max-width: 1290px;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-md);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-xl);
}

#footer .footer__main h3,
#footer .footer__main h4,
#footer .footer-container h3,
#footer .footer-container h4 {
  color: var(--color-white);
  font-size: var(--fs-16);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#footer .footer__main ul li,
#footer .footer-container ul li {
  margin-bottom: 6px;
  font-size: var(--fs-14);
}

#footer .footer__bottom,
#footer .l-footer__bottom {
  background: var(--bg-footer-bottom);
  padding: var(--spacing-md);
  text-align: center;
  font-size: var(--fs-13);
}


/* ============================================================================
   7. HOME PAGE
   ============================================================================ */

/* ---- 7.1 Image slider (Hummingbird carousel + ps_imageslider) ---- */
.homeslider,
.bobgrow-slider {
  max-width: 1290px;
  margin: 0 auto var(--spacing-xl);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

.homeslider img,
.bobgrow-slider img {
  width: 100%;
  height: auto;
  display: block;
}

/* Reassurance bar — definición canónica más abajo, sección "REASSURANCE BAR — REDISEÑO BOBGROW" */

/* ---- 7.3 Top products carousel ---- */
#wrapper .bobgrow-top-products {
  margin: 0 0 var(--spacing-xl);
  position: relative;
}

#wrapper .bobgrow-section-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text-heading);
  margin: 0 0 var(--spacing-md);
  line-height: 1.3;
}

#wrapper .bobgrow-top-products__carousel {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 16px;
  padding: 4px 16px 12px 4px;
  margin: 0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 174, 105, 0.35) transparent;
}

#wrapper .bobgrow-top-products__carousel::-webkit-scrollbar { height: 6px; }
#wrapper .bobgrow-top-products__carousel::-webkit-scrollbar-track { background: transparent; }
#wrapper .bobgrow-top-products__carousel::-webkit-scrollbar-thumb {
  background: rgba(0, 174, 105, 0.35);
  border-radius: 3px;
}

#wrapper .bobgrow-top-products__carousel > .bobgrow-card,
#wrapper .bobgrow-top-products__carousel > article.product-miniature {
  flex: 0 0 auto;
  width: 240px;
  max-width: 240px;
  margin: 0;
  scroll-snap-align: start;
}

/* Carousel navigation arrows (added via JS) */
#wrapper .bobgrow-top-products__nav {
  position: absolute;
  top: -2px;
  right: 0;
  display: flex;
  gap: 8px;
  z-index: 2;
}

#wrapper .bobgrow-top-products__arrow {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-circle);
  background: var(--color-white);
  color: var(--text-heading);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#wrapper .bobgrow-top-products__arrow:hover:not(.is-disabled) {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--color-white);
}

#wrapper .bobgrow-top-products__arrow.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

#wrapper .bobgrow-top-products__arrow svg {
  width: 18px;
  height: 18px;
  display: block;
}


/* ============================================================================
   8. CATEGORY LISTING
   ============================================================================ */

/* ---- 8.1 Category header (compact: title + count) ---- */
#wrapper .bobgrow-category-header {
  background: transparent;
  padding: var(--spacing-md) 0;
  margin-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
}

#wrapper .bobgrow-category-header__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  max-width: 1290px;
}

#wrapper .bobgrow-category-header__title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--text-heading);
  margin: 0;
  line-height: 1.2;
}

#wrapper .bobgrow-category-header__count {
  color: var(--text-muted);
  font-size: var(--fs-14);
}

#wrapper .bobgrow-all-products-header {
  margin: var(--spacing-lg) 0 var(--spacing-md);
}

/* ---- 8.2 Sidebar (single outer card)
   ANTES: .bobgrow-sidebar tenía sticky + overflow:auto + overflow-x:hidden →
   el overflow CLIPABA el box-shadow del .bobgrow-sidebar__inner por arriba,
   abajo y derecha (el shadow se renderiza fuera del border-box).
   FIX: sticky pasa al INNER. La outer no clipa nada. El inner tiene un
   max-height interno opcional si la lista de filtros llegara a ser muy larga. */

#wrapper .bobgrow-sidebar {
  padding-right: 0;
  margin-bottom: var(--spacing-lg);
}

#wrapper .bobgrow-sidebar__inner {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  padding: 22px 20px;
  position: relative;
  overflow: hidden; /* solo el inner clipa — su border-radius funciona y la
                       shadow se renderiza FUERA del inner, sin ser clipada */
}

/* Banda decorativa superior en gradient bobgrow (encabeza visualmente la card) */
#wrapper .bobgrow-sidebar__inner::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--nav-gradient);
}

/* Sticky en el INNER (no en la outer), sin overflow que clipe la sombra.
   El parent .bobgrow-sidebar permanece estático con overflow:visible.
   Para restaurar el scroll interno cuando la lista de filtros es muy larga
   sin volver a clipar la sombra del __inner, el overflow va al CHILD
   (#search_filters_wrapper) — el __inner se mantiene visible con su shadow. */
@media (min-width: 768px) {
  #wrapper .bobgrow-sidebar__inner {
    position: sticky;
    top: 215px;
    z-index: 1;
    max-height: calc(100vh - 230px);
    display: flex;
    flex-direction: column;
  }
  /* El wrapper de los filtros (hijo directo del __inner) escrolla. Padding
     amplio a la derecha para que el chevron de cada accordion-button NO se
     pegue al thumb del scrollbar (~20px de hueco visual). El margin-right
     negativo extiende el área scrollable hasta el borde del card. */
  #wrapper .bobgrow-sidebar__inner > #search_filters_wrapper,
  #wrapper .bobgrow-sidebar__inner > .ps-facetedsearch,
  #wrapper .bobgrow-sidebar__inner > .left-block {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    /* hueco interior amplio para que el chevron del accordion no roce el thumb */
    padding-right: 18px;
    margin-right: -6px;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 174, 105, 0.35) rgba(0, 174, 105, 0.06);
    /* Smooth scroll */
    scroll-behavior: smooth;
  }

  /* WebKit scrollbar — más anchura y mejor relleno */
  #wrapper .bobgrow-sidebar__inner > #search_filters_wrapper::-webkit-scrollbar,
  #wrapper .bobgrow-sidebar__inner > .ps-facetedsearch::-webkit-scrollbar,
  #wrapper .bobgrow-sidebar__inner > .left-block::-webkit-scrollbar {
    width: 8px;
    background: transparent;
  }
  /* Track: línea verde-tinted muy sutil */
  #wrapper .bobgrow-sidebar__inner > #search_filters_wrapper::-webkit-scrollbar-track,
  #wrapper .bobgrow-sidebar__inner > .ps-facetedsearch::-webkit-scrollbar-track,
  #wrapper .bobgrow-sidebar__inner > .left-block::-webkit-scrollbar-track {
    background: rgba(0, 174, 105, 0.06);
    border-radius: 999px;
    margin: 4px 0;
  }
  /* Thumb: gradient verde con borde-relleno blanco (efecto pill flotante) */
  #wrapper .bobgrow-sidebar__inner > #search_filters_wrapper::-webkit-scrollbar-thumb,
  #wrapper .bobgrow-sidebar__inner > .ps-facetedsearch::-webkit-scrollbar-thumb,
  #wrapper .bobgrow-sidebar__inner > .left-block::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00ae69 0%, #008e56 100%);
    border-radius: 999px;
    border: 2px solid var(--bg-card);
    background-clip: padding-box;
    min-height: 36px;
    transition: background 0.18s ease;
  }
  #wrapper .bobgrow-sidebar__inner > #search_filters_wrapper::-webkit-scrollbar-thumb:hover,
  #wrapper .bobgrow-sidebar__inner > .ps-facetedsearch::-webkit-scrollbar-thumb:hover,
  #wrapper .bobgrow-sidebar__inner > .left-block::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #00c478 0%, #00a061 100%);
    background-clip: padding-box;
    border: 1px solid var(--bg-card);
  }
  /* Active state: thumb se contrae sutil */
  #wrapper .bobgrow-sidebar__inner > #search_filters_wrapper::-webkit-scrollbar-thumb:active,
  #wrapper .bobgrow-sidebar__inner > .ps-facetedsearch::-webkit-scrollbar-thumb:active,
  #wrapper .bobgrow-sidebar__inner > .left-block::-webkit-scrollbar-thumb:active {
    background: var(--primary-hover);
    background-clip: padding-box;
    border: 1px solid var(--bg-card);
  }
  /* Corners + buttons: invisibles */
  #wrapper .bobgrow-sidebar__inner > #search_filters_wrapper::-webkit-scrollbar-button,
  #wrapper .bobgrow-sidebar__inner > .ps-facetedsearch::-webkit-scrollbar-button,
  #wrapper .bobgrow-sidebar__inner > .left-block::-webkit-scrollbar-button { display: none; }
  #wrapper .bobgrow-sidebar__inner > #search_filters_wrapper::-webkit-scrollbar-corner,
  #wrapper .bobgrow-sidebar__inner > .ps-facetedsearch::-webkit-scrollbar-corner { background: transparent; }
}

/* Mobile: hide desktop sidebar, will be shown in offcanvas via JS clone */
@media (max-width: 767px) {
  #wrapper .bobgrow-sidebar { display: none; }
}

/* ---- 8.3 Facetada accordion (transparent items, separator only) ---- */
/* Reset BS5 accordion variables to avoid green tint on expanded panels */
#wrapper .bobgrow-sidebar__inner #search-filters,
#wrapper .bobgrow-sidebar__inner #search-filters .accordion,
#wrapper .bobgrow-sidebar__inner #search-filters .accordion-item {
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--primary-color);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
}

/* All wrappers inside sidebar inner: transparent (no nested cards) */
#wrapper .bobgrow-sidebar__inner #search_filters_wrapper,
#wrapper .bobgrow-sidebar__inner #_desktop_faceted,
#wrapper .bobgrow-sidebar__inner #search-filters,
#wrapper .bobgrow-sidebar__inner .ps-facetedsearch,
#wrapper .bobgrow-sidebar__inner .search-filters,
#wrapper .bobgrow-sidebar__inner .accordion,
#wrapper .bobgrow-sidebar__inner .accordion-flush {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

/* Each facet group: transparent, separated by border-bottom */
#wrapper .bobgrow-sidebar__inner #search-filters .accordion-item,
#wrapper .bobgrow-sidebar__inner #search-filters section.accordion-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  box-shadow: none;
  padding: 12px 0;
  margin: 0;
}

#wrapper .bobgrow-sidebar__inner #search-filters .accordion-item:first-child {
  padding-top: 4px;
}

#wrapper .bobgrow-sidebar__inner #search-filters .accordion-item:last-child {
  border-bottom: none;
  padding-bottom: 4px;
}

/* Facet group title (button) */
#wrapper .bobgrow-sidebar__inner #search-filters .accordion-button {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 4px 0;
  margin: 0 0 6px;
  width: 100%;
  text-align: left;
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--text-heading);
  cursor: pointer;
  border-radius: 0;
  text-transform: none;
}

#wrapper .bobgrow-sidebar__inner #search-filters .accordion-button:not(.collapsed) {
  color: var(--primary-color);
}

#wrapper .bobgrow-sidebar__inner #search-filters .accordion-button:focus,
#wrapper .bobgrow-sidebar__inner #search-filters .accordion-button:hover {
  background: transparent;
  outline: none;
}

#wrapper .bobgrow-sidebar__inner #search-filters .accordion-button::after {
  width: 12px;
  height: 12px;
  background-size: 12px;
  margin-left: auto;
}

/* Facet body (ul) */
#wrapper .bobgrow-sidebar__inner #search-filters .accordion-body {
  padding: 4px 0;
  margin: 0;
  background: transparent;
  list-style: none;
}

#wrapper .bobgrow-sidebar__inner #search-filters .accordion-body li {
  margin: 0;
  padding: 0;
}

/* Each filter item */
#wrapper .bobgrow-sidebar__inner #search-filters .search-filters__item {
  display: flex;
  align-items: center;
  padding: 5px 0;
  margin: 0;
  background: transparent;
  font-size: var(--fs-14);
  color: var(--main-text-color);
  cursor: pointer;
}

#wrapper .bobgrow-sidebar__inner #search-filters .search-filters__form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  margin: 0;
  min-height: auto;
}

#wrapper .bobgrow-sidebar__inner #search-filters .search-filters__form-check .form-check-input {
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1.5px solid #cccccc;
  border-radius: 3px;
  background-color: var(--color-white);
  cursor: pointer;
  flex-shrink: 0;
}

#wrapper .bobgrow-sidebar__inner #search-filters .search-filters__form-check .form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

#wrapper .bobgrow-sidebar__inner #search-filters .search-filters__form-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  cursor: pointer;
  font-size: var(--fs-14);
  color: var(--main-text-color);
  line-height: 1.4;
  background: transparent;
}

#wrapper .bobgrow-sidebar__inner #search-filters .search-filters__link {
  color: inherit;
  text-decoration: none;
  flex: 1 1 auto;
  background: transparent;
}

#wrapper .bobgrow-sidebar__inner #search-filters .search-filters__magnitude {
  margin-left: auto;
  font-size: var(--fs-12);
  color: var(--text-muted);
  font-weight: 400;
  background: transparent;
}

#wrapper .bobgrow-sidebar__inner #search-filters .search-filters__item:hover .search-filters__link,
#wrapper .bobgrow-sidebar__inner #search-filters .search-filters__item:hover .search-filters__form-label {
  color: var(--primary-color);
}

/* ---- 8.4 Price slider (noUiSlider in facetada) ---- */
#wrapper .bobgrow-sidebar__inner #search-filters .search-filters__slider-container {
  padding: 12px 4px 4px;
  background: transparent;
}

#wrapper .bobgrow-sidebar__inner #search-filters .search-filters__slider {
  margin: 8px 4px 12px;
  position: relative;
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
}

#wrapper .bobgrow-sidebar__inner #search-filters .search-filters__slider .noUi-connect {
  background: var(--primary-color);
}

#wrapper .bobgrow-sidebar__inner #search-filters .search-filters__slider .noUi-handle {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-circle);
  background: var(--primary-color);
  border: 2px solid var(--color-white);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: grab;
  top: -5px;
  right: -8px;
}

#wrapper .bobgrow-sidebar__inner #search-filters .search-filters__slider .noUi-handle::before,
#wrapper .bobgrow-sidebar__inner #search-filters .search-filters__slider .noUi-handle::after {
  display: none;
}

#wrapper .bobgrow-sidebar__inner #search-filters .search-filters__slider-values {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text-heading);
}

/* Clear all button */
#wrapper .bobgrow-sidebar__inner #search-filters .search-filters__clear {
  padding: 0 0 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-color);
}

#wrapper .bobgrow-sidebar__inner #search-filters .search-filters__clear .btn {
  font-size: var(--fs-13);
  padding: 4px 10px;
}

/* ---- 8.5 Active filters chips ---- */
#wrapper #js-active-search-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--spacing-md);
}

#wrapper #js-active-search-filters .active-filters__title {
  font-size: var(--fs-13);
  color: var(--text-muted);
  margin-right: 8px;
  font-weight: 500;
}

#wrapper #js-active-search-filters .filter-block,
#wrapper #js-active-search-filters .js-active-search-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary-semi);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: var(--fs-12);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

#wrapper #js-active-search-filters .filter-block:hover {
  background: var(--primary-color);
  color: var(--color-white);
}

/* ---- 8.6 Subcategories grid ("Explora por banco") ---- */
#wrapper .bobgrow-subcategories {
  margin: var(--spacing-sm) 0 var(--spacing-lg);
}

#wrapper .bobgrow-subcategories__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 576px) {
  #wrapper .bobgrow-subcategories__grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
@media (min-width: 768px) {
  #wrapper .bobgrow-subcategories__grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}
@media (min-width: 1200px) {
  #wrapper .bobgrow-subcategories__grid { grid-template-columns: repeat(6, 1fr); }
}

#wrapper .bobgrow-subcategories__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: var(--spacing-md) 10px;
  background: var(--color-white);
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--border-color);
  text-decoration: none;
  color: var(--text-heading);
  text-align: center;
  min-height: 130px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

#wrapper .bobgrow-subcategories__card:hover,
#wrapper .bobgrow-subcategories__card:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
  border-color: var(--primary-color);
  color: var(--primary-color);
  text-decoration: none;
}

#wrapper .bobgrow-subcategories__img-wrap {
  position: relative;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  background: linear-gradient(135deg, #e9f8f1 0%, #d3f0e1 100%);
  overflow: hidden;
  flex-shrink: 0;
}

#wrapper .bobgrow-subcategories__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  position: relative;
  z-index: 2;
}

/* Placeholder personalizado: SOLO SVG temático (sin letra overlay).
   El SVG es protagonista visual y se ve bien grande dentro del círculo. */
#wrapper .bobgrow-subcategories__placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
}

#wrapper .bobgrow-subcategories__placeholder-icon {
  width: 60%;
  height: 60%;
  color: var(--primary-color);
  transition: transform 0.22s ease, color 0.18s ease;
  display: block;
}

#wrapper .bobgrow-subcategories__card:hover .bobgrow-subcategories__placeholder-icon {
  transform: scale(1.10) rotate(-4deg);
  color: var(--primary-hover);
}

#wrapper .bobgrow-subcategories__name {
  font-size: var(--fs-13);
  font-weight: 500;
  line-height: 1.3;
  color: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#wrapper .bobgrow-subcategories .bobgrow-subcategories__card--hidden { display: none; }

#wrapper .bobgrow-subcategories.bobgrow-subcategories--expanded .bobgrow-subcategories__card--hidden {
  display: flex;
}

#wrapper .bobgrow-subcategories__toggle {
  display: block;
  margin: var(--spacing-md) auto 0;
  background: transparent;
  border: 1.5px solid var(--primary-color);
  color: var(--primary-color);
  border-radius: 999px;
  padding: 8px 20px;
  font-size: var(--fs-13);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#wrapper .bobgrow-subcategories__toggle:hover,
#wrapper .bobgrow-subcategories__toggle:focus {
  background: var(--primary-color);
  color: var(--color-white);
  outline: none;
}

/* ---- 8.7 Products-top bar (count + sort + filter button) ---- */
#wrapper .bobgrow-products-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0 14px;
  margin-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
}

#wrapper .bobgrow-products-top__count {
  color: var(--text-muted);
  font-size: var(--fs-14);
}

#wrapper .bobgrow-products-top__controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Filter button: visible only on mobile (sidebar hidden there) */
#wrapper .bobgrow-filter-btn {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-14);
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#wrapper .bobgrow-filter-btn:hover {
  background: var(--primary-color);
  color: var(--color-white);
}

@media (max-width: 767px) {
  #wrapper .bobgrow-filter-btn { display: inline-flex; }
}

/* Sort dropdown */
#wrapper .products__sort-dropdown {
  position: relative;
}

#wrapper .products__sort-dropdown-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: var(--fs-14);
  border-radius: var(--radius-sm);
}

/* ---- 8.8 Products grid ---- */
#wrapper .bobgrow-product-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 576px) {
  #wrapper .bobgrow-product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  #wrapper .bobgrow-product-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Full-width layout: more columns */
body.layout-full-width #wrapper .bobgrow-product-grid {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  body.layout-full-width #wrapper .bobgrow-product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1200px) {
  body.layout-full-width #wrapper .bobgrow-product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ============================================================================
   9. PRODUCT CARD MINIATURE
   ============================================================================ */

#wrapper article.product-miniature,
#wrapper .product-miniature,
#wrapper .bobgrow-card.product-miniature {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 0;
  border: none;
  text-align: center;
  height: auto;
  min-height: 0;
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}

#wrapper .product-miniature:hover,
#wrapper article.product-miniature:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

/* ---- 9.1 Image wrap (transparent — blends with card) ---- */
#wrapper .bobgrow-card__image-wrap {
  flex: 0 0 216px;
  height: 216px;
  background: transparent;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 12px 12px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

#wrapper .bobgrow-card__image-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: transparent;
}

#wrapper .bobgrow-card__image,
#wrapper .bobgrow-card__image-wrap img,
#wrapper .bobgrow-card__image-wrap picture img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  background: transparent;
  transition: transform 0.3s ease;
}

#wrapper .product-miniature:hover .bobgrow-card__image {
  transform: scale(1.04);
}

/* Image bottom line removed — was breaking visual flow */
#wrapper .bobgrow-card__image-line { display: none; }

/* ---- 9.2 Wishlist — OCULTAR los renders auto del módulo rlwishlist
 *      (hooks displayProductListReviews / displayProductActions) porque
 *      ya pintamos nuestro propio heart en el image corner (cards) y al
 *      lado del título (ficha producto). El JS del módulo SIGUE
 *      adjuntando handlers a TODAS las `.fav_list` al DOMContentLoaded,
 *      así que las nuestras quedan funcionales aunque ocultemos las
 *      auto-renderizadas.
 *      Los duplicados están:
 *        - Cards: `.product-list-review > .rlwishlist_hearth` (suelto bajo stars)
 *        - Ficha: `.rlwishlist_product` (checkbox+label del hook displayProductActions)
 *      Importante: NO usar `display:none` sobre todo `.rlwishlist_hearth`
 *      porque romperíamos también el nuestro dentro de `.bobgrow-card__wishlist`. */

/* El segundo `.rlwishlist_hearth` que el hook displayProductListReviews
   inyecta directamente bajo `.bobgrow-card__rating` (suelto, sin wrapper) */
#wrapper .bobgrow-card__rating > .rlwishlist_hearth,
#wrapper .product-list-review > .rlwishlist_hearth,
#wrapper .bobgrow-card__rating .product-list-review + .rlwishlist_hearth {
  display: none !important;
}

/* `.rlwishlist_product` (checkbox+label hook displayProductActions) sobra
   en ficha producto porque ya pintamos heart manual `.product__wishlist`. */
body#product .rlwishlist_product {
  display: none !important;
}

/* IMPORTANTE: el módulo rlwishlist.css aplica `position: absolute; top: 8px; right: 8px`
   sobre `.rlwishlist_hearth .fav_list` — colapsa el container a 0×0 y descuadra
   nuestros hearts (puestos manualmente con su propio wrapper bobgrow). Forzamos
   position estático dentro de nuestros contenedores y dejamos que su flexbox
   gestione el layout. */
#wrapper .bobgrow-card__wishlist .fav_list,
#wrapper .product__wishlist .fav_list {
  position: static !important;
  top: auto !important;
  right: auto !important;
}


/* ---- 9.2 Wishlist heart en cards (renderizado manualmente) ----
   El módulo rlwishlist renderiza dos <span class="fav_list"> dentro de
   .rlwishlist_hearth — uno activo (corazón relleno) y otro desactivo
   (outline). El JS oculta uno u otro según el estado. */
#wrapper .bobgrow-card__wishlist {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
}

/* Cada heart: pill blanco con shadow + transition al estado */
#wrapper .bobgrow-card__wishlist .fav_list,
#wrapper .bobgrow-card__wishlist .rlwishlist_hearth .fav_list {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-circle);
  background: var(--color-white);
  color: var(--text-heading);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  transition: color 0.18s ease, background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  border: none;
  padding: 0;
}

/* Outline (sin favorito) — verde en hover */
#wrapper .bobgrow-card__wishlist .fav_list.desactive:hover {
  color: var(--color-sale);
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

/* Activo (en wishlist) — fondo rojo, corazón blanco */
#wrapper .bobgrow-card__wishlist .fav_list.active {
  background: var(--color-sale);
  color: var(--color-white);
  box-shadow: 0 2px 10px rgba(201, 24, 24, 0.32);
}
#wrapper .bobgrow-card__wishlist .fav_list.active:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(201, 24, 24, 0.40);
}

/* SVG dentro: 16px, hereda color */
#wrapper .bobgrow-card__wishlist .fav_list svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

/* IMPORTANTE: rlwishlist.css fuerza `.fav_list.active svg path { fill: #C81D25 }`
   con specificity (0,2,1). Como nuestro fondo activo también es rojo
   (var(--color-sale) = #c91818), el SVG queda rojo sobre rojo → invisible.
   Forzamos fill blanco con specificity superior. */
#wrapper .bobgrow-card__wishlist .fav_list.active svg,
#wrapper .bobgrow-card__wishlist .fav_list.active svg path,
#wrapper .product__wishlist .fav_list.active svg,
#wrapper .product__wishlist .fav_list.active svg path {
  fill: var(--color-white) !important;
}

/* También garantizar que el hover del módulo (que fuerza fill rojo) no
   nos rompa el outline (cuando .desactive) — debe usar currentColor para
   tomar nuestro --color-sale al hacer hover. */
#wrapper .bobgrow-card__wishlist .fav_list.desactive svg,
#wrapper .bobgrow-card__wishlist .fav_list.desactive svg path,
#wrapper .product__wishlist .fav_list.desactive svg,
#wrapper .product__wishlist .fav_list.desactive svg path {
  fill: currentColor !important;
}

/* Estado oculto: el módulo añade .hidden al span no-mostrado */
#wrapper .bobgrow-card__wishlist .fav_list.hidden { display: none; }

/* Wrapper rlwishlist_hearth: sin estilos heredados */
#wrapper .bobgrow-card__wishlist .rlwishlist_hearth {
  display: inline-flex;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}


/* ---- 9.2b Wishlist heart en la ficha de producto (mismo hook) ---- */
.product__name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}
.product__name-row .product__name {
  flex: 1 1 auto;
  margin: 0;
}

#wrapper .product__wishlist {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Heart toggle en ficha producto — usa el mismo patrón .fav_list que las
   cards. Pill blanco circular con corazón outline, hover rojo, active fill
   rojo cuando el producto está en la wishlist. */
#wrapper .product__wishlist .rlwishlist_hearth {
  display: inline-flex;
  background: transparent;
  padding: 0;
  margin: 0;
  border: none;
}

#wrapper .product__wishlist .fav_list {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-circle);
  background: var(--color-white);
  color: var(--text-heading);
  cursor: pointer;
  border: 1.5px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
#wrapper .product__wishlist .fav_list.desactive:hover {
  color: var(--color-sale);
  border-color: var(--color-sale);
  transform: scale(1.06);
}
#wrapper .product__wishlist .fav_list.active {
  background: var(--color-sale);
  color: var(--color-white);
  border-color: var(--color-sale);
  box-shadow: 0 4px 14px rgba(201, 24, 24, 0.30);
}
#wrapper .product__wishlist .fav_list.active:hover {
  transform: scale(1.06);
}
#wrapper .product__wishlist .fav_list svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
#wrapper .product__wishlist .fav_list svg path {
  fill: currentColor;
}
#wrapper .product__wishlist .fav_list.hidden { display: none; }

/* ---- 9.3 Flags overlay ---- */
#wrapper .bobgrow-card__flags {
  position: absolute;
  top: 12px;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  z-index: 4;
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

#wrapper .bobgrow-card__flag {
  display: inline-block;
  padding: 4px 10px 4px 14px;
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--color-white);
  background: var(--primary-color);
  border-radius: 0 999px 999px 0;
  line-height: 1.4;
}

#wrapper .bobgrow-card__flag.product-flag.discount,
#wrapper .bobgrow-card__flag.product-flag.on-sale { background: var(--color-sale); }
#wrapper .bobgrow-card__flag.product-flag.new      { background: var(--color-accent-purple); }
#wrapper .bobgrow-card__flag.product-flag.out_of_stock { background: var(--text-muted); }
#wrapper .bobgrow-card__flag.product-flag.online-only { background: var(--text-heading); }

/* ---- 9.4 Body (title + rating) ---- */
#wrapper .bobgrow-card__body {
  flex: 0 0 auto;
  padding: 14px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#wrapper .bobgrow-card__title-link {
  text-decoration: none;
  color: inherit;
}

#wrapper .bobgrow-card__title {
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-heading);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: calc(var(--fs-14) * 1.4 * 2);
}

#wrapper .bobgrow-card__title-link:hover .bobgrow-card__title {
  color: var(--primary-color);
}

#wrapper .bobgrow-card__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  min-height: 0;
}

#wrapper .bobgrow-card__rating:empty {
  display: none;
  margin: 0;
}

#wrapper .bobgrow-card__rating .star-content,
#wrapper .bobgrow-card__rating .grade-stars {
  color: var(--badge-yellow);
  font-size: var(--fs-12);
  display: inline-flex;
  align-items: center;
}

/* ---- 9.5 Footer (prices + buy button) ---- */
#wrapper .bobgrow-card__footer {
  margin-top: auto;
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#wrapper .bobgrow-card__prices {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px 8px;
  flex-wrap: wrap;
  margin: 0;
  padding: 6px 0;
}

#wrapper .bobgrow-card__price,
#wrapper .bobgrow-card__price .price {
  font-size: var(--fs-20);
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1.2;
}

#wrapper .bobgrow-card__price.regular-price,
#wrapper .bobgrow-card__price del {
  font-size: var(--fs-14);
  color: var(--text-muted);
  font-weight: 400;
  text-decoration: line-through;
}

/* Yellow buy button */
#wrapper .bobgrow-card__buy-btn,
#wrapper article.product-miniature button.bobgrow-card__buy-btn,
#wrapper .bobgrow-card__buy-btn.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 10px 16px;
  background: linear-gradient(90deg, var(--badge-yellow), #ffbc2b);
  color: var(--text-heading);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--fs-14);
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}

#wrapper .bobgrow-card__buy-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

#wrapper .bobgrow-card__buy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* "Ver detalles" button (out of stock) */
#wrapper .bobgrow-card__details-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 10px 16px;
  background: transparent;
  color: var(--primary-color);
  border: 1.5px solid var(--primary-color);
  border-radius: var(--radius-sm);
  font-size: var(--fs-14);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#wrapper .bobgrow-card__details-btn:hover {
  background: var(--primary-color);
  color: var(--color-white);
}


/* ============================================================================
   10. PRODUCT DETAIL PAGE
   ============================================================================ */

body#product { background: var(--bg-body); }

/* ============================================================================
   PRODUCT DETAIL REDESIGN 2026-05-23 — Layout 2-col con info sticky,
   trust badges, sticky mobile CTA bar + Bobi peek sutil.
   ============================================================================ */

body#product .product__container,
body#product .product-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  max-width: 1290px;
  margin: 0 auto;
  padding: var(--spacing-lg) var(--spacing-md);
}

@media (min-width: 768px) {
  body#product .product__container,
  body#product .product-container {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--spacing-xl);
  }
}

/* Info column STICKY en desktop — siempre visible durante scroll de la
   galería + descripción. UX similar a Apple, Decathlon, Herbies. */
@media (min-width: 992px) {
  body#product .product__right,
  body#product .product-right {
    position: sticky;
    top: 20px;
    align-self: start;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    /* Scroll suave sin scrollbar visible */
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
  }
  body#product .product__right::-webkit-scrollbar { width: 4px; }
  body#product .product__right::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }
}

/* Title + wishlist row */
body#product .product__name-row {
  margin-bottom: var(--spacing-sm);
}
body#product .product__name,
body#product h1.product__name {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-heading);
  letter-spacing: -0.01em;
}

/* Price box prominente */
body#product .product-prices {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-md);
  background: linear-gradient(135deg, rgba(0, 174, 105, 0.06) 0%, rgba(0, 174, 105, 0.02) 100%);
  border: 1px solid rgba(0, 174, 105, 0.15);
  border-radius: var(--radius-md);
}
body#product .current-price,
body#product .product__price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
}
body#product .current-price [itemprop="price"],
body#product .current-price-value,
body#product .current-price > span:first-child,
body#product .current-price {
  font-size: clamp(2rem, 3.6vw, 2.75rem) !important;
  font-weight: 800;
  color: var(--primary-color) !important;
  line-height: 1.1;
}
body#product .regular-price,
body#product .product__regular-price {
  font-size: var(--fs-18);
  color: var(--text-muted);
  text-decoration: line-through;
}
body#product .product-discount,
body#product .discount-percentage {
  background: var(--badge-yellow);
  color: var(--text-heading);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--fs-12);
  font-weight: 800;
}
body#product .tax-shipping-delivery-label {
  display: block;
  font-size: var(--fs-12);
  color: var(--text-muted);
  margin-top: 6px;
}

/* Descripción corta — debajo del precio, antes de variantes. Tono de
   resumen/teaser. Se oculta si está vacía (algunos productos no la tienen). */
body#product .product__description-short {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-sm) 0;
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--text-body);
  border-bottom: 1px solid var(--border-color);
}
body#product .product__description-short:empty,
body#product .product__description-short:not(:has(*)):where(:not(:has(:not(:empty)))) {
  display: none;
}
/* Fallback :empty con :has — algunos navegadores tratan whitespace como
   contenido. Doble cinturón con visibility check via min-height. */
body#product .product__description-short:empty {
  display: none;
}
body#product .product__description-short p:last-child,
body#product .product__description-short ul:last-child {
  margin-bottom: 0;
}
body#product .product__description-short ul {
  padding-left: 20px;
}
body#product .product__description-short li {
  margin-bottom: 4px;
}

/* Variants — selectors más visibles y clavados con la marca */
body#product .product-variants__item,
body#product .product-variants > .product-variants__item {
  margin-bottom: var(--spacing-md);
}
body#product .product-variants__name,
body#product .control-label {
  display: block;
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--text-heading);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

/* Add to cart — botón más prominente, verde primario en vez de yellow */
body#product .product__actions .add-to-cart,
body#product .product__actions [data-button-action="add-to-cart"],
body#product .add-to-cart {
  background: var(--primary-color) !important;
  color: var(--color-white) !important;
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  font-size: var(--fs-15);
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(0, 174, 105, 0.30);
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
body#product .product__actions .add-to-cart:hover,
body#product .product__actions [data-button-action="add-to-cart"]:hover {
  background: var(--primary-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 174, 105, 0.40);
}

/* Free-shipping progress — convertir texto plano en barra visual */
body#product .product__additional-info,
body#product [data-ps-ref="product-additional-info"],
body#product .rlfreeshipping {
  background: var(--color-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  margin-top: var(--spacing-md);
  font-size: var(--fs-13);
  color: var(--text-body);
}

/* ---- Galería producto: imagen clickable + modal full size ----
   PS9 default: botón lupa abajo abre modal con imagen mas PEQUEÑA. Lo fix:
   - Ocultar el botón lupa (redundante)
   - Cursor zoom-in en la imagen (handled via JS too)
   - Modal con imagen tamaño máximo del viewport */
body#product .product__zoom,
body#product .product-cover__zoom,
body#product .layer_cover {
  display: none !important;
}
body#product .product-cover,
body#product .js-product-cover {
  cursor: zoom-in;
  position: relative;
}
body#product .product-cover img,
body#product .product__cover img {
  cursor: zoom-in;
  transition: transform 0.3s ease;
}
body#product .product-cover:hover img {
  transform: scale(1.02);
}

/* Modal imagen — tamaño completo, sin restricciones */
#product-modal .modal-dialog,
.product-images-modal .modal-dialog {
  max-width: min(95vw, 1400px) !important;
  width: auto;
  margin: 1rem auto;
}
#product-modal .modal-content,
.product-images-modal .modal-content {
  background: rgba(0, 0, 0, 0.92);
  border: none;
  border-radius: var(--radius-md);
}
#product-modal .modal-body,
.product-images-modal .modal-body {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}
#product-modal img,
.product-images-modal img {
  max-width: 100% !important;
  max-height: 88vh !important;
  width: auto !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}
/* Botón cerrar del modal — blanco sobre fondo oscuro */
#product-modal .btn-close,
.product-images-modal .btn-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-circle);
  filter: invert(1);
  opacity: 1;
  transition: background-color 0.18s ease, transform 0.15s ease;
}
#product-modal .btn-close:hover,
.product-images-modal .btn-close:hover {
  background-color: rgba(255, 255, 255, 0.32);
  transform: rotate(90deg);
}
/* Carousel arrows dentro del modal (next/prev) */
#product-modal .carousel-control-prev,
#product-modal .carousel-control-next,
.product-images-modal .carousel-control-prev,
.product-images-modal .carousel-control-next {
  width: 60px;
  opacity: 0.9;
}
#product-modal .carousel-control-prev-icon,
#product-modal .carousel-control-next-icon,
.product-images-modal .carousel-control-prev-icon,
.product-images-modal .carousel-control-next-icon {
  width: 32px;
  height: 32px;
  background-color: rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-circle);
  padding: 8px;
  background-size: 60%;
}

/* ---- TRUST BADGES card con Bobi peek ---- */
body#product .bobgrow-product-trust {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
  margin-top: var(--spacing-md);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}
body#product .bobgrow-product-trust__bobi {
  position: absolute;
  top: -22px;
  right: 16px;
  width: 56px;
  height: auto;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18));
}
body#product .bobgrow-product-trust__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm) var(--spacing-md);
}
@media (max-width: 575px) {
  body#product .bobgrow-product-trust__list { grid-template-columns: 1fr; }
}
body#product .bobgrow-product-trust__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
body#product .bobgrow-product-trust__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-circle);
  background: var(--primary-semi);
  color: var(--primary-color);
}
body#product .bobgrow-product-trust__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
body#product .bobgrow-product-trust__text strong {
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1.2;
}
body#product .bobgrow-product-trust__text span {
  font-size: var(--fs-12);
  color: var(--text-muted);
  line-height: 1.3;
}

/* ---- STICKY MOBILE CTA BAR ---- */
.bobgrow-product-sticky-mobile {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  background: var(--color-white);
  border-top: 1px solid var(--border-color);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.10);
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  display: none;
  align-items: center;
  gap: 12px;
  transform: translateY(100%);
  transition: transform 0.25s ease;
  pointer-events: none;
}
.bobgrow-product-sticky-mobile.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}
@media (max-width: 991px) {
  body#product .bobgrow-product-sticky-mobile { display: flex; }
}
.bobgrow-product-sticky-mobile__price {
  flex: 0 0 auto;
}
.bobgrow-product-sticky-mobile__price-value {
  font-size: var(--fs-20);
  font-weight: 800;
  color: var(--primary-color);
}
.bobgrow-product-sticky-mobile__btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--primary-color);
  color: var(--color-white);
  border: none;
  border-radius: 999px;
  padding: 14px 22px;
  font-size: var(--fs-15);
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(0, 174, 105, 0.30);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.bobgrow-product-sticky-mobile__btn:hover,
.bobgrow-product-sticky-mobile__btn:active {
  background: var(--primary-hover);
}
.bobgrow-product-sticky-mobile__btn svg {
  flex-shrink: 0;
}

/* Padding-bottom al body cuando la sticky bar está activa para que no
   tape contenido del footer */
@media (max-width: 991px) {
  body#product {
    padding-bottom: 100px;
  }
}

body#product .product__left,
body#product .product-left {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

body#product .product__right,
body#product .product-right {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

body#product .product__title,
body#product h1.product__title,
body#product .product-detail-name {
  font-size: var(--fs-26);
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1.2;
  margin: 0 0 var(--spacing-sm);
}

body#product .product__price,
body#product .current-price {
  font-size: var(--fs-32);
  font-weight: 700;
  color: var(--primary-color);
  display: flex;
  align-items: baseline;
  gap: 12px;
}

body#product .regular-price,
body#product .product__regular-price {
  font-size: var(--fs-18);
  color: var(--text-muted);
  text-decoration: line-through;
  font-weight: 400;
}

/* Product images gallery */
body#product .product-images {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

body#product .product-cover img,
body#product .product-images__cover img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
}

body#product .product-images__thumbnails,
body#product .product-thumbnails {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}

body#product .product-thumbnails img {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  object-fit: cover;
  flex-shrink: 0;
}

body#product .product-thumbnails img.selected,
body#product .product-thumbnails img:hover {
  border-color: var(--primary-color);
}

/* Product variant / attributes */
body#product .product-variants__variant,
body#product .product-variant {
  margin-bottom: var(--spacing-md);
}

body#product .product-variants__title,
body#product .product-variant__label {
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 8px;
}

body#product .product-variants__option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Add to cart button */
body#product .btn-add-to-cart,
body#product button[data-button-action="add-to-cart"] {
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(90deg, var(--badge-yellow), #ffbc2b);
  color: var(--text-heading);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--fs-16);
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}

body#product .btn-add-to-cart:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* Product description accordion */
body#product .product__accordion .accordion-item {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-sm);
  border: 1px solid var(--border-color);
  overflow: clip; /* clip preserves border-radius without breaking BS5 collapse animation */
}

body#product .product__accordion .accordion-button {
  font-size: var(--fs-16);
  font-weight: 700;
  color: var(--text-heading);
  background: transparent;
  border: none;
  padding: 14px 18px;
}

body#product .product__accordion .accordion-button:not(.collapsed) {
  color: var(--primary-color);
  background: transparent;
}

body#product .product__accordion .accordion-body {
  padding: 14px 18px;
  color: var(--main-text-color);
  line-height: 1.6;
}


/* ============================================================================
   11. FORMS & INPUTS
   ============================================================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="url"],
textarea,
select {
  width: 100%;
  padding: 10px 14px;
  background: var(--color-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--fs-14);
  font-family: var(--font-family);
  color: var(--main-text-color);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-semi);
}

.form-control:focus { box-shadow: 0 0 0 3px var(--primary-semi); border-color: var(--primary-color); }

label { font-weight: 500; color: var(--text-heading); margin-bottom: 6px; display: inline-block; }


/* ============================================================================
   12. BUTTONS
   ============================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  font-size: var(--fs-14);
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.btn-primary {
  background: var(--primary-color);
  color: var(--color-white);
  border-color: var(--primary-color);
}
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--color-white); }

.btn-outline-primary {
  background: transparent;
  color: var(--primary-color);
  border-color: var(--primary-color);
}
.btn-outline-primary:hover { background: var(--primary-color); color: var(--color-white); }

.btn-buy {
  background: linear-gradient(90deg, var(--badge-yellow), #ffbc2b);
  color: var(--text-heading);
  border: none;
  font-weight: 700;
}
.btn-buy:hover { filter: brightness(1.05); transform: translateY(-1px); }


/* ============================================================================
   13. BREADCRUMB & PAGINATION
   ============================================================================ */

/* Wrapper de la nav breadcrumb (Hummingbird) — banda sutil verde-tinted */
#wrapper .breadcrumb__wrapper,
.breadcrumb__wrapper {
  background: linear-gradient(180deg, #f7fbf9 0%, #ffffff 100%);
  border-bottom: 1px solid rgba(0, 174, 105, 0.08);
  margin-bottom: var(--spacing-md);
  padding: 0;
}
#wrapper .breadcrumb__wrapper .container,
.breadcrumb__wrapper .container,
.breadcrumb__wrapper .container-fluid {
  max-width: 1290px;
  margin: 0 auto;
  padding: 12px var(--spacing-md);
}

#wrapper .breadcrumb,
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--text-muted);
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.4;
  background: transparent;
}

/* Items: cada uno con su separador antes (excepto el primero) */
.breadcrumb-item {
  display: inline-flex;
  align-items: center;
}

/* Separador: chevron SVG sutil — más profesional que un guión */
.breadcrumb-item + .breadcrumb-item::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 4px;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ada9a9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='9 18 15 12 9 6'/%3e%3c/svg%3e") center/12px no-repeat;
  flex-shrink: 0;
  opacity: 0.7;
  padding: 0;
}

/* Link del breadcrumb: pill discreto con hover verde */
.breadcrumb-link,
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.breadcrumb-link:hover,
.breadcrumb a:hover {
  background: var(--primary-semi);
  color: var(--primary-color);
}

/* Primer item ("Bobgrow"): icono home prefijo */
.breadcrumb-item:first-child .breadcrumb-link::before,
.breadcrumb-item:first-child a::before {
  content: "";
  display: inline-block;
  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='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3e%3cpolyline points='9 22 9 12 15 12 15 22'/%3e%3c/svg%3e") center/contain no-repeat;
  flex-shrink: 0;
  margin-right: 2px;
}

/* Último item (página actual): bold + color heading, sin link */
.breadcrumb-item:last-child {
  color: var(--text-heading);
  font-weight: 700;
  padding: 6px 10px;
}
.breadcrumb-item:last-child span {
  color: var(--text-heading);
  font-weight: 700;
}

/* Esconder texto vacío rodado en span por el theme parent */
.breadcrumb-item span:empty { display: none; }

/* Mobile: scroll horizontal si demasiados niveles, sin wrap feo */
@media (max-width: 575px) {
  #wrapper .breadcrumb,
  .breadcrumb {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #wrapper .breadcrumb::-webkit-scrollbar { display: none; }
  .breadcrumb-link,
  .breadcrumb a {
    padding: 4px 8px;
    white-space: nowrap;
  }
}

.pagination {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin: var(--spacing-lg) 0;
  list-style: none;
  padding: 0;
}

.pagination .page-item .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--text-heading);
  font-size: var(--fs-14);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pagination .page-item .page-link:hover {
  background: var(--primary-semi);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.pagination .page-item.active .page-link {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--color-white);
}


/* ============================================================================
   14. MODALS & OFFCANVAS (Bootstrap 5)
   ============================================================================ */

/* Offcanvas facetada mobile — fondo blanco sólido, width fijo */
#offcanvas-faceted {
  --bs-offcanvas-bg: #ffffff;
  --bs-offcanvas-color: var(--text-heading);
  --bs-offcanvas-width: 360px;
  background: var(--color-white);
  width: 360px;
  max-width: 90vw;
  z-index: 1055;
  border: none;
}

#offcanvas-faceted .offcanvas-header {
  background: var(--color-white);
  border-bottom: 1px solid var(--border-color);
  padding: 14px 18px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 5;
}

#offcanvas-faceted .offcanvas-title {
  font-size: var(--fs-16);
  font-weight: 700;
  color: var(--text-heading);
  margin: 0;
}

#offcanvas-faceted .offcanvas-body {
  background: var(--color-white);
  padding: 18px;
  overflow-y: auto;
}

#offcanvas-faceted #_mobile_faceted { padding: 0; }

/* Inside offcanvas: same transparent accordion-item pattern as desktop sidebar */
#offcanvas-faceted .accordion,
#offcanvas-faceted .accordion-flush,
#offcanvas-faceted .accordion-collapse,
#offcanvas-faceted .ps-facetedsearch,
#offcanvas-faceted .search-filters,
#offcanvas-faceted ul.accordion-body {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

#offcanvas-faceted .accordion-item {
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--primary-color);
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: transparent;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  padding: 12px 0;
  margin: 0;
}

#offcanvas-faceted .accordion-item:first-child { padding-top: 4px; }
#offcanvas-faceted .accordion-item:last-child { border-bottom: none; }

#offcanvas-faceted .accordion-button {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 4px 0;
  margin: 0 0 6px;
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--text-heading);
  width: 100%;
  text-align: left;
}

#offcanvas-faceted .accordion-button:not(.collapsed) { color: var(--primary-color); }

#offcanvas-faceted .accordion-button::after {
  width: 12px;
  height: 12px;
  background-size: 12px;
}

#offcanvas-faceted .search-filters__item {
  display: flex;
  align-items: center;
  padding: 6px 0;
  margin: 0;
  font-size: var(--fs-14);
  color: var(--main-text-color);
}

#offcanvas-faceted .search-filters__form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
}

#offcanvas-faceted .search-filters__form-check .form-check-input {
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1.5px solid #cccccc;
  border-radius: 3px;
  background: var(--color-white);
}

#offcanvas-faceted .search-filters__form-check .form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

#offcanvas-faceted .search-filters__form-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  flex: 1 1 auto;
  cursor: pointer;
  font-size: var(--fs-14);
  color: var(--main-text-color);
}

#offcanvas-faceted .search-filters__magnitude {
  margin-left: auto;
  font-size: var(--fs-12);
  color: var(--text-muted);
}

/* Offcanvas backdrop */
.offcanvas-backdrop.show {
  background-color: #000;
  opacity: 0.6;
}

/* Modal BS5 baseline — high z-index para escapar stacking contexts ancestros */
.modal { z-index: 9000; }
.modal-backdrop { z-index: 8990; }
.modal-backdrop.show { opacity: 0.55; background-color: #000; }


/* ============================================================================
   15. UTILITIES
   ============================================================================ */

#back-to-top {
  position: fixed;
  /* bottom lee --bobgrow-bottom-stack (BottomBarStack) para no pisar las barras fijas inferiores */
  bottom: calc(var(--bobgrow-bottom-stack, 0px) + 24px);
  right: 24px;
  width: 44px;
  height: 44px;
  background: var(--primary-color);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-circle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  z-index: 100;
}

#back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.visually-hidden,
.sr-only,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.text-primary { color: var(--primary-color); }
.bg-primary { background: var(--primary-color); color: var(--color-white); }
.border-primary { border-color: var(--primary-color); }


/* ============================================================================
   16. RESPONSIVE — TABLET (max-width 991px)
   ============================================================================ */
@media (max-width: 991px) {
  #header .bobgrow-header-main {
    padding: 0 var(--spacing-md);
    gap: 12px;
  }
  #header .bobgrow-header-search { max-width: 100%; }
  #header .bobgrow-header-icons { gap: 6px; }
  #header .bobgrow-header-logo__img { max-height: 48px; }

  #footer .footer-container { gap: var(--spacing-lg); }

  /* Top products: smaller cards */
  #wrapper .bobgrow-top-products__carousel > .bobgrow-card,
  #wrapper .bobgrow-top-products__carousel > article.product-miniature {
    width: 220px;
    max-width: 220px;
  }

  /* Category header smaller */
  #wrapper .bobgrow-category-header__title { font-size: 1.5rem; }
}



/* ============================================================================
   COMPLEMENT — Clases reales del HTML no cubiertas en el refactor inicial.
   Añadido tras revisión con HTML servido. Mantiene la organización por zona.
   ============================================================================ */


/* ---- HEADER: cross-banner detallado ---- */
#header .cross-banner__row {
  display: flex;
  align-items: center;
  margin: 0;
}

#header .js-cross-banner-container {
  flex: 1 1 auto;
  padding: 0;
}

#header .cross-banner__content {
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

#header .cross-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: nowrap; /* SIN wrap — antes el btn caía a 2ª fila en mobile */
  width: 100%;
}
/* Mobile pequeño: ocultar el botón "Comprar ahora" para que el announcement
   sea UNA línea limpia. Specificity 3 clases (#header + 2) para vencer al
   `#header .cross-content__btn { display: inline-flex }` posterior. */
@media (max-width: 575px) {
  #header .cross-banner .cross-content__btn,
  #header .cross-banner .ui-button.cross-content__btn,
  #header .cross-content .cross-content__btn {
    display: none;
  }
  #header .cross-content {
    gap: 8px;
  }
  #header .cross-content__text {
    font-size: 12px;
    white-space: normal;
  }
}

#header .cross-content__icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
  flex-shrink: 0;
}

#header .cross-content__text {
  font-weight: 500;
}

#header .cross-content__btn,
#header .cross-banner .ui-button {
  background: var(--color-white);
  color: var(--text-heading);
  padding: 4px 14px;
  border-radius: 999px;
  font-size: var(--fs-12);
  font-weight: 600;
  border: none;
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  text-decoration: none;
}


/* ---- HEADER: layout interno (Hummingbird usa .header-bottom*) ---- */
#header .header-bottom,
#header .header-bottom.bobgrow-header-main {
  background: var(--bg-header);
  padding: 0;
  /* Hummingbird añade border-bottom:1px solid #dee2e6 → línea gris debajo del
     logo cruzando hasta los iconos. Quitamos para look limpio. */
  border: none;
  box-shadow: none;
}

#header .header-bottom__container {
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

#header .header-bottom__row {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  height: var(--top-container-height);
  flex-wrap: nowrap;
}

#header .header-bottom__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

#header .header-bottom__h1 {
  margin: 0;
  font-size: 0;
  line-height: 0;
}

#header .header-bottom__h1 .navbar-brand,
#header .header-bottom__logo .navbar-brand {
  display: inline-block;
  text-decoration: none;
}

#header .header-bottom__h1 img.logo,
#header .header-bottom__logo img.logo,
#header .header-bottom .logo.img-fluid {
  max-height: 60px;
  width: auto;
  height: auto;
  display: block;
}

#header .header-bottom__search {
  flex: 1 1 auto;
  max-width: 600px;
}

#header .header-bottom__icons {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}


/* ---- HEADER: rating badge (5 estrellas + opiniones) ---- */
#header .bobgrow-rating-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 4px 10px;
  text-decoration: none;
  color: var(--text-heading);
  border-radius: var(--radius-sm);
  background: transparent;
  transition: background-color 0.15s ease;
}

#header .bobgrow-rating-badge:hover {
  background: var(--primary-semi);
}

#header .bobgrow-rating-badge__stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: var(--badge-yellow);
}

#header .bobgrow-rating-badge__stars svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

#header .bobgrow-rating-badge__score {
  font-weight: 700;
  font-size: var(--fs-13);
  color: var(--text-heading);
}

#header .bobgrow-rating-badge__text,
#header .bobgrow-rating-badge__label {
  font-size: var(--fs-10);
  color: var(--text-muted);
  line-height: 1.2;
}


/* ---- HEADER: language & currency selectors (header-block wrapper) ---- */
#header .bobgrow-header-lang,
#header .bobgrow-header-currency {
  position: relative;
}

#header .header-block {
  position: relative;
}

#header .header-block__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-circle);
  background: transparent;
  border: none;
  color: var(--text-heading);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#header .header-block__action-btn:hover,
#header .bobgrow-selector-toggle:hover {
  background: var(--primary-semi);
  color: var(--primary-color);
}

#header .header-block__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#header .header-block__icon svg {
  width: 18px;
  height: 18px;
}


/* ---- HEADER: nav full-width wrapper ---- */
#header .header-nav-full-width {
  width: 100%;
}


/* ---- HOME: top products section title needs left padding when arrows ---- */
#wrapper .bobgrow-top-products .bobgrow-section-title {
  padding-right: 90px;
}


/* ---- LISTING / CATEGORY: product price helpers ---- */
#wrapper .product-price-and-shipping {
  display: inline-flex;
  align-items: baseline;
  gap: 4px 8px;
  flex-wrap: wrap;
}

#wrapper .product-list-review,
#wrapper .product-list-comments-number {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-12);
  color: var(--text-muted);
}

#wrapper .product-title {
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
  color: var(--text-heading);
}


/* ---- FORM: card add-to-cart form (around buy button) ---- */
#wrapper .bobgrow-card__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: 0;
}


/* ---- FOOTER: blocks ---- */
#footer .footer-block {
  margin-bottom: var(--spacing-lg);
}

#footer .footer-block__title {
  color: var(--color-white);
  font-size: var(--fs-16);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#footer .footer-block__title--toggle::after {
  content: "+";
  margin-left: 8px;
  font-weight: 400;
}

#footer .footer-block__content { padding: 0; }

#footer .footer-block__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

#footer .footer-block__list li {
  margin-bottom: 6px;
  font-size: var(--fs-14);
}

#footer .footer-block__list a {
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.15s ease;
}

#footer .footer-block__list a:hover {
  color: var(--badge-yellow);
}


/* ---- FOOTER: reassurance ---- */
#footer .footer-reassurance {
  background: var(--bg-footer-bottom);
  padding: var(--spacing-md) 0;
}

#footer .footer-reassurance__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  gap: var(--spacing-md);
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  list-style: none;
}

#footer .footer-reassurance__item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-white);
  font-size: var(--fs-13);
}

#footer .footer-reassurance__icon {
  flex: 0 0 auto;
  color: var(--badge-yellow);
}

#footer .footer-reassurance__icon svg { width: 22px; height: 22px; }

#footer .footer-reassurance__text {
  flex: 1 1 auto;
  line-height: 1.3;
}


/* ---- FOOTER: social ---- */
#footer .footer-social {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: var(--spacing-md);
}

#footer .footer-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-circle);
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

#footer .footer-social__link:hover {
  background: var(--badge-yellow);
  color: var(--text-heading);
}

#footer .footer-social__link svg {
  width: 18px;
  height: 18px;
}


/* ---- MODAL BS5 ---- */
.modal-dialog {
  max-width: 600px;
  margin: 1.75rem auto;
}

.modal-content {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  overflow: clip;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
}

.modal-title {
  font-size: var(--fs-18);
  font-weight: 700;
  color: var(--text-heading);
  margin: 0;
}

.modal-body {
  padding: var(--spacing-md);
}

.modal-footer {
  padding: var(--spacing-md);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}


/* RLMENU MODAL — definición canónica más abajo (sección "MENÚ — diseño definitivo bobgrow"). */



/* ---- OFFCANVAS-TOP variant ---- */
.offcanvas-top {
  top: 0;
  right: 0;
  left: 0;
  height: 30vh;
  max-height: 100%;
  border-bottom: 1px solid var(--border-color);
  transform: translateY(-100%);
}
.offcanvas-top.show { transform: none; }


/* ---- ALERTS ---- */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-md);
  border: 1px solid transparent;
  font-size: var(--fs-14);
}

.alert-success {
  background: rgba(0, 174, 105, 0.12);
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.alert-danger {
  background: rgba(201, 24, 24, 0.10);
  color: var(--color-sale);
  border-color: var(--color-sale);
}

.alert-warning {
  background: rgba(255, 211, 53, 0.18);
  color: #856404;
  border-color: var(--badge-yellow);
}

.alert-info {
  background: rgba(0, 174, 105, 0.08);
  color: var(--text-heading);
  border-color: var(--border-color);
}



/* ============================================================================
   FOOTER (rediseñado profesional)
   Estructura HTML real:
     <footer #footer>
       <div .footer__before>           — newsletter PS (ps-emailsubscription) [opcional]
       <footer .footer__main>
         <div .footer-reassurance>     — barra horizontal con 5 ventajas
         <div .footer__body>
           <div .footer__top-row>      — logo + social + newsletter
           <hr .footer__divider>
           <div .footer__columns row>  — N columnas .footer-block (links)
   ============================================================================ */

/* Newsletter PS (footer__before) — esconder, ya tenemos newsletter custom en footer__body */
#footer .footer__before { display: none; }

/* Bloque footer principal — fondo verde */
#footer.footer,
#footer .footer__main {
  background: var(--bg-footer);
  color: var(--color-white);
  margin-top: var(--spacing-xl);
}

#footer a { color: rgba(255, 255, 255, 0.92); }
#footer a:hover { color: var(--badge-yellow); }

/* ---- Reassurance bar (5 ventajas en horizontal) ---- */
#footer .footer-reassurance {
  background: var(--bg-footer-bottom);
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

#footer .footer-reassurance .container,
#footer .footer-reassurance > div {
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

#footer .footer-reassurance__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  gap: var(--spacing-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

#footer .footer-reassurance__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-white);
  font-size: var(--fs-13);
  font-weight: 500;
}

#footer .footer-reassurance__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--badge-yellow);
}

#footer .footer-reassurance__icon svg {
  width: 24px;
  height: 24px;
}

#footer .footer-reassurance__text {
  line-height: 1.3;
}

/* ---- Body principal ---- */
#footer .footer__body {
  padding: var(--spacing-xl) 0 var(--spacing-md);
}

#footer .footer__body > .container,
#footer .footer__body > div {
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* ---- Top row: logo + social a la izquierda, newsletter a la derecha ---- */
#footer .footer__top-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  align-items: start;
  margin-bottom: var(--spacing-lg);
}

@media (min-width: 768px) {
  #footer .footer__top-row {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--spacing-xl);
  }
}

#footer .footer__logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
}
/* Mobile: logo + social CENTRADOS (antes left-aligned, descompensado al
   estar el newsletter apilado debajo en 1 col). */
@media (max-width: 767px) {
  #footer .footer__logo-wrap {
    align-items: center;
    text-align: center;
  }
  #footer .footer-social {
    justify-content: center;
  }
}

#footer .footer__logo-link { text-decoration: none; }

#footer .footer__logo-img {
  max-width: 110px;
  height: auto;
  display: block;
  filter: brightness(0) invert(1); /* logo blanco sobre fondo verde */
}

#footer .footer-social {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
}

#footer .footer-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-circle);
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-white);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

#footer .footer-social__link:hover {
  background: var(--badge-yellow);
  color: var(--text-heading);
  transform: translateY(-2px);
}

#footer .footer-social__link svg {
  width: 18px;
  height: 18px;
}

/* ---- Newsletter custom ---- */
#footer .footer__newsletter {
  background: rgba(255, 255, 255, 0.08);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
}

#footer .footer__newsletter-title {
  color: var(--color-white);
  font-size: var(--fs-18);
  font-weight: 700;
  margin: 0 0 8px;
}

#footer .footer__newsletter-desc {
  font-size: var(--fs-14);
  color: rgba(255, 255, 255, 0.80);
  margin: 0 0 var(--spacing-md);
  line-height: 1.5;
}

#footer .footer__newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#footer .footer__newsletter-input-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#footer .footer__newsletter-input {
  flex: 1 1 200px;
  padding: 12px 16px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-white);
  font-size: var(--fs-14);
  color: var(--main-text-color);
  outline: none;
}

#footer .footer__newsletter-input:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.30);
}

#footer .footer__newsletter-btn {
  padding: 12px 24px;
  background: var(--badge-yellow);
  color: var(--text-heading);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--fs-14);
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}

#footer .footer__newsletter-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

#footer .footer__newsletter-privacy {
  font-size: var(--fs-12);
  color: rgba(255, 255, 255, 0.70);
  margin: 0;
}

#footer .footer__newsletter-privacy a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: underline;
}

#footer .footer__newsletter-privacy a:hover {
  color: var(--badge-yellow);
}

/* ---- Divider ---- */
#footer .footer__divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin: var(--spacing-lg) 0;
}

/* ---- Columnas de links — 2 cols incluso en mobile (más uniforme) ---- */
#footer .footer__columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* SIEMPRE mínimo 2 cols, incluso mobile */
  gap: var(--spacing-lg) var(--spacing-md);
  max-width: 980px;
  margin: 0 auto;
}

@media (min-width: 992px) {
  #footer .footer__columns { grid-template-columns: repeat(3, 1fr); }
}
/* Mobile muy pequeño (<360px) sí stack en 1 col para no apretar */
@media (max-width: 359px) {
  #footer .footer__columns { grid-template-columns: 1fr; }
}

/* La 4ª columna se distribuye automaticamente en el grid responsive */
#footer .footer-block.col-md-6,
#footer .footer-block.col-lg-3,
#footer .footer-block {
  width: auto;
  flex: 0 0 auto;
}

#footer .footer-block { margin: 0; }

#footer .footer-block__title,
#footer .footer-block__title--toggle {
  color: var(--color-white);
  font-size: var(--fs-14);
  font-weight: 700;
  margin: 0 0 var(--spacing-md);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  position: relative;
  cursor: pointer;
}

/* Toggle button mobile (collapse) */
#footer .footer-block__title--toggle button {
  background: transparent;
  border: none;
  position: absolute;
  inset: 0;
  cursor: pointer;
}

#footer .footer-block__title--toggle i.material-icons {
  font-size: 18px;
  margin-left: auto;
  transition: transform 0.2s ease;
}

#footer .footer-block__content { padding: 0; }

#footer .footer-block__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

#footer .footer-block__list li {
  margin: 0 0 6px;
  font-size: var(--fs-14);
  line-height: 1.5;
}

#footer .footer-block__list a {
  color: rgba(255, 255, 255, 0.82);
  transition: color 0.15s ease, padding-left 0.2s ease;
  display: inline-block;
}

#footer .footer-block__list a:hover {
  color: var(--badge-yellow);
  padding-left: 4px;
}

/* Mobile: footer columns collapsibles (BS5 collapse) */
@media (max-width: 767px) {
  #footer .footer-block__title--toggle {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 12px;
    margin-bottom: 12px;
  }
  #footer .footer-block__content.collapse:not(.show) { display: none; }
  #footer .footer-block__content.show { display: block; }
}

@media (min-width: 768px) {
  #footer .footer-block__title button.d-md-none { display: none; }
  #footer .footer-block__content { display: block; }
}

/* ---- Bottom (copyright) ---- */
#footer .footer__bottom,
#footer .l-footer__bottom {
  background: var(--bg-footer-bottom);
  padding: var(--spacing-md);
  text-align: center;
  font-size: var(--fs-13);
  color: rgba(255, 255, 255, 0.85);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}


/* ============================================================================
   PRODUCT DETAIL — accordion descripción/detalles HORIZONTAL en desktop
   Desktop (≥992px): grid 2 columnas, contenido siempre visible, sin botón toggle
   Mobile (<992px):   accordion BS5 normal (colapsable, primero abierto)
   ============================================================================ */

body#product .product__accordion {
  background: transparent;
  border: none;
  margin-top: var(--spacing-xl);
}

/* ---- DESKTOP: 2 columnas siempre abiertas ---- */
@media (min-width: 992px) {
  body#product .product__accordion {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;
  }

  /* Cada accordion-item se convierte en un panel-card */
  body#product .product__accordion .accordion-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin: 0;
    overflow: visible;
  }

  /* Header: se convierte en título estático (no botón) */
  body#product .product__accordion .accordion-header {
    margin: 0 0 var(--spacing-md);
  }

  body#product .product__accordion .accordion-button {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 0 12px;
    margin: 0;
    width: 100%;
    text-align: left;
    font-size: var(--fs-20);
    font-weight: 700;
    color: var(--text-heading);
    border-bottom: 2px solid var(--primary-color);
    cursor: default;
    pointer-events: none;
    border-radius: 0;
  }

  /* Ocultar la flecha del accordion en desktop */
  body#product .product__accordion .accordion-button::after {
    display: none;
  }

  /* Body siempre visible */
  body#product .product__accordion .accordion-collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
  }

  body#product .product__accordion .accordion-collapse.collapse,
  body#product .product__accordion .accordion-collapse.collapsing {
    display: block !important;
    height: auto !important;
  }

  body#product .product__accordion .accordion-body {
    padding: 0;
    color: var(--main-text-color);
    line-height: 1.65;
  }

  /* Contenido rico de la descripción */
  body#product .product__accordion .product__description.rich-text,
  body#product .product__accordion .rich-text {
    color: var(--main-text-color);
    line-height: 1.7;
  }

  body#product .product__accordion .rich-text h2,
  body#product .product__accordion .rich-text h3 {
    color: var(--text-heading);
    font-size: var(--fs-16);
    margin: var(--spacing-md) 0 8px;
    font-weight: 700;
  }

  body#product .product__accordion .rich-text h2:first-child {
    margin-top: 0;
  }

  body#product .product__accordion .rich-text p {
    margin: 0 0 var(--spacing-sm);
  }

  body#product .product__accordion .rich-text ul,
  body#product .product__accordion .rich-text ol {
    margin: 0 0 var(--spacing-md);
    padding-left: var(--spacing-lg);
  }

  body#product .product__accordion .rich-text li {
    list-style: disc;
    margin-bottom: 4px;
  }

  body#product .product__accordion .rich-text strong {
    color: var(--text-heading);
    font-weight: 700;
  }

  body#product .product__accordion .rich-text a {
    color: var(--primary-color);
    text-decoration: underline;
  }
}

/* ---- MOBILE/TABLET: accordion BS5 normal con estilo bobgrow ---- */
@media (max-width: 991px) {
  body#product .product__accordion .accordion-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
    overflow: clip; /* preserva radius sin romper animación */
  }

  body#product .product__accordion .accordion-header { margin: 0; }

  body#product .product__accordion .accordion-button {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 14px 18px;
    font-size: var(--fs-16);
    font-weight: 700;
    color: var(--text-heading);
    cursor: pointer;
    width: 100%;
    text-align: left;
    border-radius: 0;
  }

  body#product .product__accordion .accordion-button:not(.collapsed) {
    color: var(--primary-color);
    border-bottom: 1px solid var(--border-color);
  }

  body#product .product__accordion .accordion-button:focus {
    outline: none;
    box-shadow: none;
  }

  body#product .product__accordion .accordion-body {
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-md);
    color: var(--main-text-color);
    line-height: 1.65;
  }
}



/* ============================================================================
   SEARCH BAR PrestaShop (ps_searchbar) — diseño profesional
   HTML real:
     #_desktop_ps_searchbar > #ps_searchbar.ps-searchbar
       > .ps-searchbar__form
         > input.material-icons.ps-searchbar__magnifier (icon left)
         > input.ps-searchbar__input
         > button.ps-searchbar__clear (X visible cuando escribes)
       > .ps-searchbar__dropdown.js-search-dropdown.d-none (autocomplete results)
   ============================================================================ */

#header #_desktop_ps_searchbar,
#header .ps-searchbar--mobile {
  flex: 1 1 auto;
  max-width: 600px;
}

#header #ps_searchbar,
#header .ps-searchbar {
  position: relative;
  width: 100%;
}

#header .ps-searchbar__form {
  display: flex;
  align-items: center;
  background: var(--color-white);
  border: 1.5px solid var(--border-color);
  border-radius: 999px;
  padding: 4px 4px 4px 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
}

/* DESACTIVADA — sustituida por la regla canónica más abajo */
#header .bobgrow-original-focus-placeholder-2 { display: none; }

#header .ps-searchbar__magnifier {
  font-size: 20px;
  color: var(--text-muted);
  margin-right: 8px;
  flex-shrink: 0;
}

#header .ps-searchbar__input,
#header .js-search-input.form-control {
  flex: 1 1 auto;
  border: none;
  outline: none;
  background: transparent;
  padding: 10px 0;
  font-size: var(--fs-14);
  font-family: var(--font-family);
  color: var(--main-text-color);
  min-width: 0;
  box-shadow: none;
}

#header .ps-searchbar__input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

#header .ps-searchbar__input:focus {
  outline: none;
  box-shadow: none;
}

/* Clear button (X cuando hay texto) */
#header .ps-searchbar__clear,
#header .ps-searchbar__clear.js-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  margin-right: 4px;
  padding: 0;
  border-radius: var(--radius-circle);
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#header .ps-searchbar__clear:hover {
  background: var(--primary-semi);
  color: var(--primary-color);
}

#header .ps-searchbar__clear .material-icons {
  font-size: 18px;
}

/* Botón submit (lupa verde a la derecha) */
#header .ps-searchbar__submit,
#header .ps-searchbar__form button[type="submit"] {
  background: var(--primary-color);
  color: var(--color-white);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-circle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 4px;
  transition: background-color 0.15s ease;
}

#header .ps-searchbar__submit:hover {
  background: var(--primary-hover);
}

/* Dropdown autocomplete — anclado al form, no al viewport */
#header .ps-searchbar__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--color-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  max-height: 400px;
  overflow-y: auto;
  /* Evitar que el dropdown cause scroll del body al abrir */
  overscroll-behavior: contain;
}

#header .ps-searchbar__dropdown.d-none { display: none; }

#header .ps-searchbar__results {
  padding: 8px 0;
}

#header .ps-searchbar__results a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  color: var(--main-text-color);
  text-decoration: none;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.15s ease;
}

#header .ps-searchbar__results a:last-child {
  border-bottom: none;
}

#header .ps-searchbar__results a:hover {
  background: var(--primary-semi);
}

#header .ps-searchbar__results img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Anti scroll-jump: prevenir scrollIntoView automático en focus
   El input puede tener scroll-margin que provoca el bug del usuario */
#header .ps-searchbar__input {
  scroll-margin-top: 0;
  scroll-margin-bottom: 0;
  scroll-behavior: auto;
}

#header .ps-searchbar__input:focus,
#header .js-search-input:focus {
  /* No mover scroll al obtener foco */
  scroll-margin-top: 0;
}


/* ============================================================================
   RLMENU MODAL (Nuestro catálogo) — usando BS5 default (no transforms custom)
   ============================================================================ */


/* ============================================================================
   FIX SCROLL-JUMP en input focus
   Si el body tiene smooth scroll-behavior, el focus de un input puede causar
   un scroll automático al elemento. Lo desactivamos en formularios del header.
   ============================================================================ */
html {
  /* Mantener smooth scroll en general */
  scroll-behavior: smooth;
}

/* Pero NO en inputs del header — evita el bug del scroll subiendo solo */
#header input:focus,
#header textarea:focus,
#header select:focus {
  scroll-margin-top: 9999px; /* Evita scrollIntoView automático */
}

/* Nota: NO usar `contain: layout style` en #header — rompe `position: sticky`
   en algunas páginas (notablemente /carrito con .cart-grid__aside-wrapper).
   El sticky se vuelve estático y el header aparece "anclado" donde se
   pinta primero en lugar de seguir el scroll. */



/* ============================================================================
   GLOBAL VISUAL UPGRADE — Mejoras profesionales globales
   Aplicado tras revisión de capturas home/categoría/producto/menú.
   ============================================================================ */


/* ============================================================================
   1. HEADER — más prominente y profesional
   ============================================================================ */

/* Logo principal: más grande, espacio respirado */
#header .header-bottom__h1 img.logo,
#header .header-bottom__logo img.logo,
#header .header-bottom .logo.img-fluid,
#header .bobgrow-header-logo__img {
  max-height: 72px;
  width: auto;
  height: auto;
  display: block;
}

@media (max-width: 767px) {
  #header .header-bottom__h1 img.logo,
  #header .header-bottom__logo img.logo,
  #header .header-bottom .logo.img-fluid {
    max-height: 56px;
  }
}

/* Header main: más altura y respiración */
#header .header-bottom__row {
  height: 96px;
  gap: var(--spacing-lg);
}

@media (max-width: 767px) {
  #header .header-bottom__row { height: auto; padding: 12px 0; }
}

/* Search bar — más destacado */
#header .ps-searchbar__form {
  padding: 6px 6px 6px 18px;
  border: 1.5px solid var(--border-color);
  border-radius: 999px;
  background: var(--color-white);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Estado focus del search del header — UNA sola definición canónica.
   Antes había 3 reglas conflictivas (border-color + box-shadow + border 1.5px)
   que daban efecto "doble borde". Ahora: border mantiene su color base y solo
   añadimos halo verde-semi sutil + un cambio de border-color tenue. */
#header .ps-searchbar__form:focus-within,
#header .bobgrow-header-search .ps-searchbar__form:focus-within,
#header .bobgrow-header-search form:focus-within {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px var(--primary-semi) !important;
  outline: none;
}

#header .ps-searchbar__input {
  padding: 12px 0;
  font-size: var(--fs-14);
}

#header .ps-searchbar__submit,
#header .ps-searchbar__form button[type="submit"] {
  width: 44px;
  height: 44px;
}


/* ============================================================================
   2. CROSS-BANNER — alineación y CTA más profesional
   ============================================================================ */

#header .cross-banner {
  background: var(--nav-gradient);
  height: 44px;
  padding: 0 var(--spacing-md);
}

#header .cross-content {
  font-size: var(--fs-13);
  font-weight: 500;
  letter-spacing: 0.01em;
}

#header .cross-content__btn,
#header .cross-banner .ui-button {
  background: var(--color-white);
  color: var(--primary-color);
  padding: 4px 16px;
  border-radius: 999px;
  font-size: var(--fs-12);
  font-weight: 700;
  border: none;
  margin-left: 12px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

#header .cross-content__btn:hover {
  background: var(--badge-yellow);
  color: var(--text-heading);
}


/* ============================================================================
   3. SLIDER HERO — más visual y proporcionado
   ============================================================================ */

.homeslider,
.bobgrow-slider,
#slider,
.imageslider {
  max-width: 1290px;
  margin: var(--spacing-md) auto var(--spacing-xl);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
}

.homeslider img,
.bobgrow-slider img,
#slider img,
.imageslider img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Carousel indicators (dots) */
.homeslider .carousel-indicators,
#slider .carousel-indicators {
  bottom: 16px;
  gap: 8px;
}

.homeslider .carousel-indicators [data-bs-target],
#slider .carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.4);
  opacity: 1;
}

.homeslider .carousel-indicators .active,
#slider .carousel-indicators .active {
  background: var(--primary-color);
  border-color: var(--color-white);
}


/* ============================================================================
   REASSURANCE BAR — REDISEÑO BOBGROW
   ----------------------------------------------------------------------------
   HTML (de modules/blockreassurance/views/templates/hook/reassurance.tpl):

     <section class="bobgrow-reassurance">
       <div class="bobgrow-reassurance__track">
         <div class="bobgrow-reassurance__item">       ← x5
           <div class="bobgrow-reassurance__icon">
             <img class="bobgrow-reassurance__image" src="..." width="60" height="60">
           </div>
           <div class="bobgrow-reassurance__text">
             <strong class="bobgrow-reassurance__title">Semillas gratis</strong>
             <span class="bobgrow-reassurance__desc">Con cada compra ...</span>
           </div>
         </div>
       </div>
     </section>

   Diseño: 5 cards en línea (desktop) con accent gradient verde a la izquierda,
   icono PNG dentro de círculo verde-tinted, hover lift sutil + accent que crece.
   Sección con fondo verde-tinted muy suave (var(--primary-semi) a 30%) para
   separar visualmente de hero + grid de colecciones siguientes.
   ============================================================================ */

#wrapper .bobgrow-reassurance,
.bobgrow-reassurance {
  position: relative;
  max-width: 1290px;
  margin: 0 auto var(--spacing-xl);
  padding: 0 var(--spacing-md);
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}

#wrapper .bobgrow-reassurance__track,
.bobgrow-reassurance__track {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  max-width: 1240px;
  margin: 0 auto;
  padding: 0;
}

@media (min-width: 576px) {
  #wrapper .bobgrow-reassurance__track,
  .bobgrow-reassurance__track {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  #wrapper .bobgrow-reassurance__track,
  .bobgrow-reassurance__track {
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
  }
}

#wrapper .bobgrow-reassurance__item,
.bobgrow-reassurance__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px 16px 22px;
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

/* Accent bar vertical izquierdo en gradient bobgrow */
#wrapper .bobgrow-reassurance__item::before,
.bobgrow-reassurance__item::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #00ae69 0%, #008e56 100%);
  transition: width 0.22s ease, top 0.22s ease, bottom 0.22s ease;
}

#wrapper .bobgrow-reassurance__item:hover,
.bobgrow-reassurance__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);
  border-color: rgba(0, 174, 105, 0.30);
}

#wrapper .bobgrow-reassurance__item:hover::before,
.bobgrow-reassurance__item:hover::before {
  width: 6px;
  top: 0;
  bottom: 0;
}

/* Icono: círculo verde-tinted, icono PNG dentro a 36x36 */
#wrapper .bobgrow-reassurance__icon,
.bobgrow-reassurance__icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  background: linear-gradient(135deg, rgba(0, 174, 105, 0.16) 0%, rgba(0, 174, 105, 0.06) 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 174, 105, 0.18);
}

#wrapper .bobgrow-reassurance__icon img,
#wrapper .bobgrow-reassurance__image,
.bobgrow-reassurance__icon img,
.bobgrow-reassurance__image {
  width: 28px;
  height: 28px;
  max-width: 28px;
  max-height: 28px;
  object-fit: contain;
  display: block;
}

#wrapper .bobgrow-reassurance__icon svg,
.bobgrow-reassurance__icon svg {
  width: 28px;
  height: 28px;
  color: var(--primary-color);
  display: block;
}

/* Texto: jerarquía clara — title bold, desc readable */
#wrapper .bobgrow-reassurance__text,
.bobgrow-reassurance__text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

#wrapper .bobgrow-reassurance__title,
.bobgrow-reassurance__title {
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--text-heading);
  margin: 0;
  line-height: 1.25;
  letter-spacing: 0.005em;
}

#wrapper .bobgrow-reassurance__desc,
.bobgrow-reassurance__desc {
  font-size: var(--fs-12);
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
  font-weight: 500;
}

/* Mobile: padding reducido, texto algo más grande para legibilidad */
@media (max-width: 575px) {
  #wrapper .bobgrow-reassurance {
    padding: var(--spacing-lg) var(--spacing-sm);
    border-radius: var(--radius-md);
  }
  #wrapper .bobgrow-reassurance__item {
    padding: 14px 14px 14px 20px;
  }
  #wrapper .bobgrow-reassurance__icon {
    width: 48px;
    height: 48px;
  }
  #wrapper .bobgrow-reassurance__icon img,
  #wrapper .bobgrow-reassurance__image {
    width: 28px;
    height: 28px;
  }
}


/* ============================================================================
   5. SECTION TITLE genérico — bonito en todas las secciones
   ============================================================================ */

#wrapper .bobgrow-section-title,
#wrapper h2.bobgrow-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-heading);
  margin: 0 0 var(--spacing-md);
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 12px;
}

#wrapper .bobgrow-section-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 24px;
  background: var(--primary-color);
  border-radius: 2px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  #wrapper .bobgrow-section-title { font-size: 1.25rem; }
}


/* ============================================================================
   6. PRODUCT CARDS — sombra y hover más profesional
   ============================================================================ */

#wrapper article.product-miniature,
#wrapper .product-miniature,
#wrapper .bobgrow-card.product-miniature {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--border-color);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 0;
  text-align: center;
  height: auto;
  transition: box-shadow 0.25s ease, transform 0.2s ease, border-color 0.2s ease;
}

#wrapper .product-miniature:hover,
#wrapper article.product-miniature:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
  border-color: var(--primary-color);
}

/* Image wrap con padding más suave */
#wrapper .bobgrow-card__image-wrap {
  flex: 0 0 200px;
  height: 200px;
  background: linear-gradient(180deg, #fafafa 0%, transparent 100%);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 16px;
}

/* Title más legible */
#wrapper .bobgrow-card__title {
  font-size: var(--fs-14);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-heading);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(var(--fs-14) * 1.4 * 2);
}

#wrapper .bobgrow-card__title-link:hover .bobgrow-card__title {
  color: var(--primary-color);
}

#wrapper .bobgrow-card__price {
  font-size: var(--fs-20);
  font-weight: 800;
  color: var(--primary-color);
  line-height: 1;
}

/* Buy button más prominente */
#wrapper .bobgrow-card__buy-btn,
#wrapper article.product-miniature button.bobgrow-card__buy-btn {
  padding: 11px 16px;
  background: linear-gradient(135deg, var(--badge-yellow), #ffbc2b);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(255, 211, 53, 0.40);
  letter-spacing: 0.02em;
}

#wrapper .bobgrow-card__buy-btn:hover {
  box-shadow: 0 4px 12px rgba(255, 211, 53, 0.55);
}


/* CATEGORY SEO — definición canónica más abajo en sección
   "CATEGORY SEO — texto expandible (NO cloaking)" */


/* ============================================================================
   8. FOOTER — logo más compacto, mejor jerarquía
   ============================================================================ */

#footer .footer__logo-img { max-width: 90px; }

@media (max-width: 767px) {
  #footer .footer__logo-img { max-width: 70px; }
}

#footer .footer__top-row {
  align-items: center;
  gap: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
}

#footer .footer__newsletter {
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.20);
  padding: var(--spacing-lg);
}

#footer .footer__newsletter-title {
  font-size: var(--fs-20);
  margin-bottom: 6px;
}

#footer .footer__newsletter-input {
  padding: 13px 18px;
}

#footer .footer__newsletter-btn {
  padding: 13px 22px;
  font-weight: 700;
}

/* Social icons más grandes y prominentes */
#footer .footer-social__link {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.18);
}

#footer .footer-social__link svg {
  width: 18px;
  height: 18px;
}

/* Footer columns: más respiración entre items */
#footer .footer-block__title {
  font-size: var(--fs-14);
  font-weight: 800;
  letter-spacing: 0.10em;
  margin-bottom: 14px;
}

#footer .footer-block__list li {
  margin-bottom: 8px;
  line-height: 1.6;
}



/* ============================================================================
   10. PRODUCT DETAIL — galería y comentarios más profesional
   ============================================================================ */

body#product .product-cover {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  border: 1px solid var(--border-color);
}

body#product .product-cover img {
  border-radius: var(--radius-sm);
}

/* Sección comentarios vacía: card sutil */
body#product .product-comments,
body#product #productCommentsList,
body#product .product-comments-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

body#product .product-comments h3,
body#product .product-comments-wrapper h3 {
  font-size: var(--fs-18);
  font-weight: 700;
  color: var(--text-heading);
  margin: 0 0 var(--spacing-md);
}


/* ============================================================================
   11. HOMEPAGE: "Colecciones" / Category icons row (rlhomecategories)
   ============================================================================ */

#wrapper .category-icons-row,
#wrapper .home-categories,
#wrapper .rlhomecategories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--spacing-md);
  margin: var(--spacing-xl) auto;
  max-width: 1290px;
  padding: 0 var(--spacing-md);
}

#wrapper .category-icons-row a,
#wrapper .home-categories a,
#wrapper .rlhomecategories a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: var(--spacing-md);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  text-decoration: none;
  color: var(--text-heading);
  font-size: var(--fs-13);
  font-weight: 600;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

#wrapper .category-icons-row a:hover,
#wrapper .home-categories a:hover,
#wrapper .rlhomecategories a:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

#wrapper .category-icons-row a img,
#wrapper .home-categories a img,
#wrapper .rlhomecategories a img,
#wrapper .category-icons-row a svg,
#wrapper .home-categories a svg {
  width: 48px;
  height: 48px;
  object-fit: contain;
  color: var(--primary-color);
}


/* ============================================================================
   12. CUSTOM TEXT BLOCKS — quitar bloques vacíos visualmente molestos
   ============================================================================ */

.ps-customtext:empty,
.custom-text-block:empty,
.ps-customtext .row > div:empty {
  display: none;
}

.ps-customtext,
.custom-text-block {
  max-width: 1290px;
  margin: var(--spacing-xl) auto;
  padding: 0 var(--spacing-md);
}

.ps-customtext h2,
.ps-customtext h3,
.custom-text-block h2 {
  font-size: var(--fs-20);
  color: var(--text-heading);
  margin: 0 0 var(--spacing-sm);
}

.ps-customtext p,
.custom-text-block p {
  color: var(--main-text-color);
  line-height: 1.6;
  margin: 0 0 var(--spacing-sm);
}


/* ============================================================================
   13. SPACING GLOBAL entre secciones — ritmo visual consistente
   ============================================================================ */

#wrapper main > section,
#wrapper main > div > section,
#wrapper #content > section,
#wrapper #content > div {
  margin-bottom: var(--spacing-xl);
}

#wrapper #content {
  padding: var(--spacing-md) 0;
}



/* ============================================================================
   PRO FIX — Correcciones profesionales tras review usuario:
   1. Header: search centrado, icons a la derecha con buen espaciado
   2. Sidebar-content: más aire entre facetada y productos
   3. Menú: items principales VISIBLES garantizado
   4. Footer: rediseño completo más limpio y profesional
   ============================================================================ */


/* ============================================================================
   1. HEADER LAYOUT — logo izq | search centro | icons derecha
   ============================================================================ */

#header .header-bottom__container {
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

/* Layout 3 columnas — grid `1fr auto 1fr` da centrado GEOMÉTRICO real
   del buscador, sin depender de los anchos asimétricos de logo (164px) e
   iconos (214px). El track central se ajusta al ancho fijo del search;
   los tracks 1fr de los lados son IGUALES → el centro del search coincide
   con el centro del header. */
#header .header-bottom__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--spacing-md);
  height: 60px; /* valor exacto del usuario para clavarlo */
}

@media (max-width: 991px) {
  #header .header-bottom__row { gap: var(--spacing-sm); height: 80px; }
  #header .header-bottom__container { padding: 0 var(--spacing-md); }
}

#header .header-bottom__logo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  justify-self: start;
}

#header .header-bottom__h1 img.logo,
#header .header-bottom__logo img.logo,
#header .header-bottom .logo.img-fluid {
  max-height: 72px;
  width: auto;
  height: auto;
  display: block;
}

@media (max-width: 767px) {
  #header .header-bottom__h1 img.logo,
  #header .header-bottom__logo img.logo,
  #header .header-bottom .logo.img-fluid {
    max-height: 44px; /* logo más compacto en mobile — no compite con barra menu */
  }
}
@media (max-width: 575px) {
  #header .header-bottom__h1 img.logo,
  #header .header-bottom__logo img.logo,
  #header .header-bottom .logo.img-fluid {
    max-height: 38px;
  }
}

/* Search: columna `auto` del grid → toma el width fijo definido aquí. */
#header .header-bottom__search,
#header .header-bottom__search.col {
  display: flex;
  align-items: center;
  width: clamp(320px, 42vw, 560px);
  max-width: 100%;
  margin: 0;
  padding: 0;
  min-width: 0;
  justify-self: center;
}

/* Desktop searchbar inner: ocupar todo el width del wrapper, sin ms-auto */
#header .header-bottom__search #_desktop_ps_searchbar {
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
  margin: 0 !important; /* Override Bootstrap ms-auto */
  display: flex;
}

#header #_desktop_ps_searchbar #ps_searchbar,
#header .ps-searchbar {
  width: 100%;
}

/* Icons a la derecha — justify-self: end fuerza alineación derecha en grid */
#header .header-bottom__icons {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  justify-self: end;
}

/* Mobile: flex horizontal con logo a la izq + iconos mobile a la der.
   Los iconos mobile (#_mobile_ps_*) ya son `d-md-none d-flex col-auto` —
   flex-wrap:nowrap los mantiene en una fila. Search desktop oculto por BS5. */
@media (max-width: 767px) {
  #header .header-bottom__row {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    height: auto;
    padding: 12px 14px;
    gap: 6px;
  }
  #header .header-bottom__logo {
    flex: 0 1 auto;
    justify-self: start;
    margin-right: auto;
  }
  /* Iconos mobile flotando horizontales a la derecha */
  #header .ps-searchbar--mobile,
  #header #_mobile_ps_customersignin,
  #header #_mobile_ps_shoppingcart {
    flex: 0 0 auto;
    margin: 0;
  }
  #header .ps-searchbar--mobile .header-block,
  #header #_mobile_ps_customersignin .header-block,
  #header #_mobile_ps_shoppingcart .header-block {
    margin: 0;
  }
  /* Botones de acción mobile: tamaño consistente con desktop icons */
  #header .ps-searchbar--mobile .header-block__action-btn,
  #header #_mobile_ps_customersignin .header-block__action-btn,
  #header #_mobile_ps_shoppingcart .header-block__action-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-heading);
    border-radius: var(--radius-sm);
    background: transparent;
    text-decoration: none;
    position: relative;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  #header .ps-searchbar--mobile .header-block__action-btn:hover,
  #header #_mobile_ps_customersignin .header-block__action-btn:hover,
  #header #_mobile_ps_shoppingcart .header-block__action-btn:hover {
    background: var(--primary-semi);
    color: var(--primary-color);
  }
  #header .header-block__icon { font-size: 22px; }

  /* Search desktop oculto pero el wrapper `.bobgrow-header-search` se mantiene
     visible porque CONTIENE el botón de search mobile (`.ps-searchbar--mobile`).
     Ocultamos solo el child desktop. */
  #header .bobgrow-header-search,
  #header .header-bottom__search {
    display: contents !important;
  }
  #header #_desktop_ps_searchbar { display: none !important; }
  #header .ps-searchbar--mobile {
    display: inline-flex !important;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin: 0;
  }
  /* Iconos desktop ocultos en mobile */
  #header .bobgrow-header-icons.d-none.d-md-flex { display: none; }
}

/* Rating badge: trust signal IMPORTANTE — siempre visible. En tablet/mobile
   compactamos para que NO compita con el logo (que tiene flex-shrink:0). */
@media (max-width: 991px) {
  #header .bobgrow-rating-badge {
    padding: 2px 6px;
    gap: 1px;
  }
  #header .bobgrow-rating-badge__stars svg {
    width: 11px;
    height: 11px;
  }
  /* Tablet: ocultar label "Opiniones", queda solo "★★★★★ 4.8" */
  #header .bobgrow-rating-badge__label { display: none; }
  #header .bobgrow-rating-badge__text {
    flex-direction: row;
    align-items: center;
    gap: 4px;
  }
  #header .bobgrow-rating-badge__score {
    font-size: 12px;
  }
}
/* Mobile pequeño: solo estrellas + 4.8 muy compacto, layout horizontal */
@media (max-width: 575px) {
  #header .bobgrow-rating-badge {
    flex-direction: row;
    align-items: center;
    gap: 3px;
    padding: 2px 4px;
  }
  #header .bobgrow-rating-badge__stars svg {
    width: 10px;
    height: 10px;
  }
  #header .bobgrow-rating-badge__score {
    font-size: 11px;
  }
}
/* Logo NUNCA debe encogerse al competir con rating badge en flex */
#header .bobgrow-header-logo__img { flex-shrink: 0; }
#header .header-bottom__h1,
#header .header-bottom__logo .navbar-brand { flex-shrink: 0; }


/* ============================================================================
   2. LAYOUT CATEGORÍA — más aire entre sidebar y productos
   ============================================================================ */

body.page-category #wrapper #content-wrapper > .row,
body.page-category #wrapper main > .row,
body.layout-left-column #wrapper #content-wrapper > .row,
body.layout-left-column #wrapper main > .row {
  --bs-gutter-x: var(--spacing-xl);
}

@media (min-width: 992px) {
  body.layout-left-column #wrapper #left-column {
    padding-right: 0;
    padding-left: 12px;
  }
  body.layout-left-column #wrapper #center-column {
    padding-left: var(--spacing-lg);
    padding-right: 12px;
  }
}

/* Si el layout no usa el system de columnas BS, dar gap directo en main */
@media (min-width: 992px) {
  body.layout-left-column #wrapper main,
  body.page-category #wrapper main {
    gap: var(--spacing-xl);
  }
}



/* ============================================================================
   MENÚ — DISEÑO DEFINITIVO BOBGROW
   ----------------------------------------------------------------------------
   HTML (de modules/rlmenu/views/templates/hook/menu_new.tpl):

     #header > .bobgrow-nav-bar > .rlmenu > .open_rlmenu (trigger)
     <body> > #rlmenu_burger.modal                  ← movido por ModalPortal
              > .modal-dialog > .modal-content
                > .modal-body
                  > .menu_header (Bienvenido + .btn-close)
                  > .subitems_N (N panels absolute, JS los abre con height:100vh)
                  > .rlmenu_primary
                    > .rlmenu_category
                      > .title
                      > .item × N (.item_primary | .open_subitems)

   JS (modules/rlmenu/views/js/rlmenu.js):
     - clic en .open_subitems → height:100vh + overflowY:scroll inline
     - clic en .rlmenu_back   → height:0 inline (vuelve atrás)

   Por qué el menú salía oscuro antes: BS5 inserta .modal-backdrop como hijo
   directo de <body> con z-index 1050; si el modal queda atrapado en un
   stacking context del header (sticky, transform, z-index sobre position…),
   el backdrop pinta ENCIMA del modal y todo se ve apagado.

   Fix raíz: ModalPortal en header.js mueve #rlmenu_burger a hijo directo
   de <body> al DOMContentLoaded. Aquí reforzamos con z-index y display de
   defensa en profundidad, sin abusar de !important.
   ============================================================================ */

/* Backdrop por debajo, modal por encima — escapan al stacking del header. */
#rlmenu_burger.modal {
  z-index: 9001;
  height: 100vh;
  height: 100dvh; /* viewport dinámico iOS/Chrome mobile */
  /* Override de las variables del módulo rlmenu: el HTML las define como
     --rlmenu_color:#ffffff (blanco) → si dejamos heredar, el texto de los
     items queda blanco sobre blanco. Las redefinimos a colores bobgrow. */
  --rlmenu_color: var(--text-heading);
  --rlmenu_color_hover: var(--primary-color);
}
#rlmenu_burger.modal.show { display: block; }
.modal-backdrop { z-index: 8990; }
.modal-backdrop.show { opacity: 0.55; background-color: #000; }

/* Trigger en la nav bar: estilo bobgrow (verde gradient, hover claro) */
#header .bobgrow-nav-bar .open_rlmenu {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: var(--color-white);
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  border-radius: 999px;
  transition: background-color 0.18s ease, transform 0.15s ease;
  text-transform: none;
}
#header .bobgrow-nav-bar .open_rlmenu:hover,
#header .bobgrow-nav-bar .open_rlmenu:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  outline: none;
  transform: translateY(-1px);
}
#header .bobgrow-nav-bar .open_rlmenu .material-icons { font-size: 22px; }

/* Diálogo: panel lateral izquierdo (drawer), 420px desktop, full-screen mobile. */
#rlmenu_burger .modal-dialog {
  margin: 0;
  max-width: 420px;
  width: 100%;
  height: 100vh;
  display: flex;
}
@media (max-width: 575px) {
  #rlmenu_burger .modal-dialog { max-width: 100%; }
}

/* Contenedor: full-height, sombra fuerte. dvh > vh en mobile para usar la
   altura VISIBLE real (la barra de Chrome/Safari se contabiliza) y evitar
   que los últimos items queden tras la URL bar. */
#rlmenu_burger .modal-content {
  background: var(--color-white);
  border: none;
  border-radius: 0;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.35);
  width: 100%;
  height: 100vh; /* fallback */
  height: 100dvh; /* dynamic viewport height — iOS Chrome/Safari, Android Chrome */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* GPU composite layer: aísla el modal completo de repaints del body
     durante scroll. Previene "parpadeos" iOS Safari/Chrome. */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Body sin padding, contenedor flex para header fijo + scroll interno. */
#rlmenu_burger .modal-body {
  padding: 0;
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---- Header del menú: fondo gradient bobgrow, blanco sobre verde ---- */
#rlmenu_burger .menu_header {
  display: flex !important; /* el JS lo oculta con display:none al entrar a subitems → forzamos visible */
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: 22px var(--spacing-lg);
  background: var(--nav-gradient);
  color: var(--color-white);
  border-bottom: none;
  flex-shrink: 0;
  position: relative;
  z-index: 60;
}
#rlmenu_burger .modal-title {
  font-size: var(--fs-18);
  font-weight: 700;
  color: var(--color-white);
  margin: 0;
  letter-spacing: 0.01em;
}
#rlmenu_burger .menu_header::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 28px;
  background: var(--badge-yellow);
  border-radius: 4px;
  margin-right: 12px;
  flex-shrink: 0;
}

/* ---- Botón cerrar: blanco sobre verde con halo ---- */
#rlmenu_burger .btn-close {
  box-sizing: content-box;
  width: 30px;
  height: 30px;
  padding: 0.35em;
  background: rgba(255, 255, 255, 0.15) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/14px auto no-repeat;
  border: 0;
  border-radius: var(--radius-circle);
  opacity: 1;
  cursor: pointer;
  margin-left: auto;
  transition: background-color 0.18s ease, transform 0.15s ease;
  flex-shrink: 0;
}
#rlmenu_burger .btn-close:hover {
  background-color: rgba(255, 255, 255, 0.30);
  transform: rotate(90deg);
}
#rlmenu_burger .btn-close:focus-visible {
  outline: 2px solid var(--badge-yellow);
  outline-offset: 2px;
  box-shadow: none;
}

/* ---- Panel principal (categorías) ---- */
#rlmenu_burger .rlmenu_primary {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--color-white);
  padding: 0;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Padding bottom EXTRA generoso — 120px + safe-area-inset → en iOS
     Chrome con el toolbar inferior visible el viewport pierde ~80px
     extra. Sin esto, "Contact" queda detrás del toolbar y nunca se ve. */
  padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
}

/* Títulos de sección "Categorías" / "Personal area" */
#rlmenu_burger .rlmenu_category > .title,
#rlmenu_burger .rlmenu_personal > .title {
  display: block;
  padding: 18px var(--spacing-lg) 10px;
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  background: transparent;
  margin: 0;
}

/* Items principales — bloque clicable completo, jerarquía visual fuerte */
#rlmenu_burger .rlmenu_category .item { margin: 0; width: 100%; }

#rlmenu_burger .item_primary,
#rlmenu_burger .open_subitems {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px var(--spacing-lg);
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--text-heading);
  text-decoration: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  transition: background-color 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
}

/* Indicador lateral verde animado en hover (marca bobgrow) */
#rlmenu_burger .item_primary::before,
#rlmenu_burger .open_subitems::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--primary-color);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}
#rlmenu_burger .item_primary:hover::before,
#rlmenu_burger .open_subitems:hover::before { transform: scaleY(1); }

#rlmenu_burger .item_primary:hover,
#rlmenu_burger .open_subitems:hover {
  background: var(--primary-semi);
  color: var(--primary-color);
  padding-left: calc(var(--spacing-lg) + 8px);
}

/* Imagen al inicio del item, si la categoría tiene img_menu */
#rlmenu_burger .item_primary .img_menu,
#rlmenu_burger .open_subitems .img_menu {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Chevron derecha — separado del label con margin-auto */
#rlmenu_burger .item_primary .material-icons,
#rlmenu_burger .open_subitems .material-icons {
  font-size: 22px;
  color: var(--text-muted);
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.18s ease, color 0.18s ease;
}
#rlmenu_burger .item_primary:hover .material-icons,
#rlmenu_burger .open_subitems:hover .material-icons {
  color: var(--primary-color);
  transform: translateX(4px);
}

/* ---- Subitems panels (JS modifica style.height: 0 ↔ 100vh)
 * IMPORTANTE: el módulo rlmenu tiene `#rlmenu_burger .modal-body .subitems { top: 0; }`
 * con specificity 0,1,2,0 — necesitamos al menos esa specificity para sobreescribir
 * el `top:0` y posicionar el panel debajo del menu_header (siempre visible para tener X close). */
#rlmenu_burger .modal-body .subitems {
  position: absolute;
  top: 72px; /* debajo del menu_header (gradient + yellow accent + X) */
  left: 0;
  right: 0;
  width: 100%;
  background: var(--color-white);
  height: 0;
  overflow: hidden;
  z-index: 10;
  pointer-events: none;
  /* SIN transition cuando cerrado — la transition del módulo (transition: all 200ms)
     provocaba PARPADEO durante scroll en iOS: cualquier repaint/composite re-animaba
     todas las props del subitem. Solo activamos transition cuando el subitem se abre
     intencionadamente vía .is-active (cf abajo). */
  transition: none;
  /* iOS Safari/Chrome: forzar GPU compositing layer separado para que los
     repaints durante scroll del rlmenu_primary NO afecten visualmente al
     subitem (causa documentada del bug de parpadeo). */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* Subitem activo: tanto por inline style[height] como por clase .is-active.
   La transition height se activa SOLO aquí — al abrir/cerrar intencionadamente. */
#rlmenu_burger .modal-body .subitems[style*="height: 100vh"],
#rlmenu_burger .modal-body .subitems[style*="height:100vh"],
#rlmenu_burger .modal-body .subitems[style*="height: 90vh"],
#rlmenu_burger .modal-body .subitems[style*="height:90vh"],
#rlmenu_burger .modal-body .subitems.is-active {
  transition: height 0.28s ease;
  z-index: 50;
  pointer-events: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* IMPORTANTE: usamos top:72 + bottom:0 en vez de height:calc(100vh-72) — el
     calc(100vh) falla en mobile con barras dinámicas del navegador (Chrome
     mobile collapse, Safari URL bar). top+bottom obliga al panel a llenar
     SIEMPRE el modal-body completo independientemente del viewport. */
  top: 72px !important;
  bottom: 0 !important;
  height: auto !important;
  max-height: none !important;
}

/* Cuando modal-body tiene un subitem activo, ocultar rlmenu_primary
   defensivamente (CSS guard sin :has(), funciona en TODOS los navegadores). */
#rlmenu_burger .modal-body.has-open-subitem > .rlmenu_primary {
  display: none !important;
}
/* Y ocultar TODOS los subitems excepto el .is-active */
#rlmenu_burger .modal-body.has-open-subitem > .subitems:not(.is-active) {
  display: none !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* iOS: distinguir tap de scroll en items grandes del menú — evita que un
   swipe disparé tap accidental en una categoría (era el bug "se abre un
   subitem cuando intento scroll"). */
#rlmenu_burger .rlmenu_primary,
#rlmenu_burger .modal-body .subitems {
  touch-action: pan-y;
}
#rlmenu_burger .item_primary,
#rlmenu_burger .open_subitems,
#rlmenu_burger .subitem,
#rlmenu_burger .item_viewall {
  touch-action: manipulation; /* tap fast pero el browser distingue del scroll */
}

/* GUARD CSS-only: cuando hay un subitem abierto (height inline ≠ 0),
   forzar rlmenu_primary oculto. Por si el JS de bootstrap se cae o el
   módulo deja estado inconsistente. Requiere :has() (iOS Safari 15.4+,
   Chrome 105+, ~98% global 2026). */
#rlmenu_burger .modal-body:has(> .subitems[style*="height: 100vh"]) > .rlmenu_primary,
#rlmenu_burger .modal-body:has(> .subitems[style*="height:100vh"]) > .rlmenu_primary,
#rlmenu_burger .modal-body:has(> .subitems[style*="height: 90vh"]) > .rlmenu_primary {
  display: none !important;
}

/* Si por bug del módulo hay MÁS DE UN subitem abierto, sólo el ÚLTIMO
   debe quedar visible. CSS oculta los anteriores. */
#rlmenu_burger .modal-body > .subitems[style*="height: 100vh"]
  ~ .subitems[style*="height: 100vh"] ~ .subitems[style*="height: 100vh"],
#rlmenu_burger .modal-body > .subitems[style*="height: 100vh"]
  ~ .subitems[style*="height: 100vh"]:not(:last-of-type) {
  display: none !important;
}

/* Botón "Volver" sticky arriba del subitems — texto corto, sin truncate */
#rlmenu_burger .rlmenu_back {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--spacing-lg);
  background: var(--primary-semi);
  border: 0;
  border-bottom: 1px solid var(--border-color);
  font-weight: 700;
  color: var(--primary-color);
  cursor: pointer;
  margin: 0;
  font-size: var(--fs-12);
  width: 100%;
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* Permitir multi-línea por si el template original (sin override) sigue
     enviando el nombre largo de la categoría → no se corta. */
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}
#rlmenu_burger .rlmenu_back:hover,
#rlmenu_burger .rlmenu_back:focus-visible {
  background: rgba(0, 174, 105, 0.22);
  outline: none;
}
#rlmenu_burger .rlmenu_back i.material-icons {
  font-size: 22px;
  color: var(--primary-color);
  flex-shrink: 0;
}
#rlmenu_burger .rlmenu_back__label {
  flex: 1 1 auto;
}

/* "Ver todos" — CARD destacada (no banner sutil): claramente clicable,
   con nombre de categoría como anchor (SEO óptimo) y hint visual de acción. */
#rlmenu_burger .subitems__viewall {
  padding: 14px var(--spacing-lg);
  background: rgba(0, 174, 105, 0.05);
  border-bottom: 1px solid var(--border-color);
}

#rlmenu_burger .item_viewall--card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 18px;
  background: var(--color-white);
  border: 1.5px solid var(--primary-color);
  border-radius: var(--radius-md);
  color: var(--text-heading);
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
  position: relative;
  overflow: hidden;
}
#rlmenu_burger .item_viewall--card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--primary-color);
}
#rlmenu_burger .item_viewall--card:hover,
#rlmenu_burger .item_viewall--card:focus-visible {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 174, 105, 0.25);
  outline: none;
}
#rlmenu_burger .item_viewall--card:hover .item_viewall__title,
#rlmenu_burger .item_viewall--card:hover .item_viewall__hint {
  color: var(--color-white);
}
#rlmenu_burger .item_viewall--card:hover::before {
  background: var(--badge-yellow);
}

#rlmenu_burger .item_viewall__title {
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1.3;
  display: block;
  width: 100%;
  word-break: break-word;
  transition: color 0.18s ease;
}

#rlmenu_burger .item_viewall__hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color 0.18s ease;
}
#rlmenu_burger .item_viewall__hint .material-icons {
  font-size: 16px;
  transition: transform 0.18s ease;
}
#rlmenu_burger .item_viewall--card:hover .item_viewall__hint .material-icons {
  transform: translateX(4px);
}

/* Fallback: si por cualquier razón el template original sigue activo (sin
   override), mantenemos un estilo razonable para .item_viewall sin --card. */
#rlmenu_burger .item_viewall:not(.item_viewall--card) {
  display: inline-block;
  padding: 14px var(--spacing-lg);
  color: var(--text-heading);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--fs-14);
}
#rlmenu_burger .item_viewall:not(.item_viewall--card):hover {
  color: var(--primary-color);
  text-decoration: underline;
}

/* db-sub-span "(Ver todos)" del template original: lo neutralizamos
   visualmente porque ahora el hint vive dentro de .item_viewall--card.
   Si no hay override (template viejo), sigue siendo legible. */
#rlmenu_burger .db-sub-span {
  position: static !important;
  display: inline;
  margin-left: 4px;
  padding: 0 var(--spacing-md) 0 0;
  font-size: var(--fs-12);
  color: var(--primary-color);
  opacity: 0.85;
  font-weight: 600;
  left: auto !important;
  width: auto !important;
}

/* El wrapper div sin clase (template antiguo) — mantener legacy compatible */
#rlmenu_burger .subitems > div:not([class]) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background: rgba(255, 211, 53, 0.14);
  border-bottom: 1px solid var(--border-color);
}

/* Subitems individuales (subcategorías) */
#rlmenu_burger .subitem {
  display: block;
  padding: 13px var(--spacing-lg);
  font-size: var(--fs-14);
  color: var(--main-text-color);
  text-decoration: none;
  border-bottom: 1px solid var(--border-color);
  background: transparent;
  transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}
#rlmenu_burger .subitem:hover {
  background: var(--primary-semi);
  color: var(--primary-color);
  padding-left: calc(var(--spacing-lg) + 6px);
}
#rlmenu_burger .subitem:last-child { border-bottom: none; }

/* Panel "Personal area" — separado visualmente */
#rlmenu_burger .rlmenu_personal {
  border-top: 8px solid var(--bg-card);
  background: var(--color-white);
  padding-bottom: var(--spacing-md);
}
#rlmenu_burger .rlmenu_personal .items { list-style: none; margin: 0; padding: 0; }
#rlmenu_burger .rlmenu_personal .item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px var(--spacing-lg);
  font-size: var(--fs-14);
  color: var(--text-heading);
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.18s ease;
}
#rlmenu_burger .rlmenu_personal .item:hover {
  background: var(--primary-semi);
  color: var(--primary-color);
  padding-left: calc(var(--spacing-lg) + 4px);
}
#rlmenu_burger .rlmenu_personal .item svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}
#rlmenu_burger .rlmenu_personal .item:last-child { border-bottom: none; }


/* ============================================================================
   HOME — HERO ESTÁTICO (reemplazo del ps_imageslider)
   ============================================================================ */

#wrapper .bobgrow-hero {
  position: relative;
  max-width: 1290px;
  margin: var(--spacing-md) auto var(--spacing-xl);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.12);
  background: var(--nav-gradient);
  isolation: isolate;
}

#wrapper .bobgrow-hero__link {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
}

#wrapper .bobgrow-hero__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1290 / 420;
  overflow: hidden;
}

#wrapper .bobgrow-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#wrapper .bobgrow-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(0, 77, 48, 0.78) 0%, rgba(0, 142, 86, 0.40) 55%, rgba(0, 174, 105, 0.05) 100%);
  z-index: 1;
}

#wrapper .bobgrow-hero__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-xl) calc(var(--spacing-xl) + 8px);
  color: var(--color-white);
  max-width: 60%;
}

#wrapper .bobgrow-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--badge-yellow);
  color: var(--text-heading);
  font-size: var(--fs-12);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  border-radius: 999px;
}

#wrapper .bobgrow-hero__title {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
  color: var(--color-white);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

#wrapper .bobgrow-hero__desc {
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 1.45;
  margin: 0;
  color: rgba(255, 255, 255, 0.94);
  max-width: 540px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
}

#wrapper .bobgrow-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--badge-yellow);
  color: var(--text-heading);
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--fs-14);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
#wrapper .bobgrow-hero__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  color: var(--text-heading);
}
#wrapper .bobgrow-hero__cta svg { width: 16px; height: 16px; }

/* ── Bobi al lado IZQUIERDO del slider, FUERA del rectángulo, abrazándolo
   desde fuera. Pequeño (no domina la composición). Estático. ── */
#wrapper .bobgrow-hero {
  overflow: visible;
}
#wrapper .bobgrow-hero__bobi {
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: -123px; /* fuera del slider a la izquierda — valor exacto del usuario */
  transform: none;
  width: clamp(110px, 11vw, 150px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.18));
}

/* Mobile: Bobi peek desde el TOP del slider (head + hand "agarrando" el
   borde superior). Cambio respecto a antes (bottom:-6) — ahora `top:-10`
   para que la mano coincida con el borde superior y dé sensación de
   "agarrar". z-index alto para que pinte por encima del overlay. */
@media (max-width: 991px) {
  #wrapper .bobgrow-hero__bobi {
    left: auto;
    right: -8px;
    top: -10px;
    bottom: auto;
    transform: none;
    width: 110px;
    z-index: 5; /* > content (z:2) + overlay (z:1) */
  }
}
@media (max-width: 575px) {
  #wrapper .bobgrow-hero__bobi {
    width: 95px;
    right: -10px;
    top: -8px;
    opacity: 1;
  }
}

/* Bocadillo "¡Hola, cultivador!" — pegado JUSTO encima de Bobi, sale de su
   boca. La cola apunta hacia abajo apuntando a la cabeza de Bobi. */
#wrapper .bobgrow-hero__speech {
  position: absolute;
  z-index: 4;
  /* ENCIMA de la cabeza de Bobi — sin tapar la cara.
     Bobi alto ≈ 150px, bubble alto ≈ 40px → bottom:170+ lo deja sobre la cabeza. */
  bottom: clamp(170px, 18vw, 230px);
  left: -128px;
  transform: none;
  background: var(--color-white);
  color: var(--text-heading);
  font-weight: 800;
  font-size: var(--fs-13);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  white-space: nowrap;
  animation: bobgrow-hero-speech 6s ease-in-out infinite;
  transform-origin: bottom center;
}
#wrapper .bobgrow-hero__speech::after {
  content: "";
  position: absolute;
  /* cola en el centro inferior apuntando hacia abajo (hacia Bobi) */
  left: 50%;
  margin-left: -8px;
  bottom: -8px;
  width: 0;
  height: 0;
  border-top: 10px solid var(--color-white);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
}
/* Mobile: bocadillo oculto (Bobi va dentro del slider) */
@media (max-width: 991px) {
  #wrapper .bobgrow-hero__speech { display: none; }
}
@keyframes bobgrow-hero-speech {
  0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
  10%      { transform: translateY(-4px) scale(1.04); }
  20%      { transform: translateY(0) scale(1); }
  50%      { opacity: 1; }
  90%      { opacity: 1; }
}
#wrapper .bobgrow-hero__speech-text {
  position: relative;
  z-index: 1;
}

/* Respect reduce-motion */
@media (prefers-reduced-motion: reduce) {
  #wrapper .bobgrow-hero__bobi,
  #wrapper .bobgrow-hero__speech { animation: none; }
}

@media (max-width: 767px) {
  #wrapper .bobgrow-hero { border-radius: var(--radius-md); margin: var(--spacing-sm) auto var(--spacing-lg); }
  /* Aspect-ratio antes era 4/5 (PORTRAIT — demasiado alto en mobile). 16/11
     da una altura más razonable (~258px en 375px viewport) sin perder
     impacto visual. */
  #wrapper .bobgrow-hero__image-wrap { aspect-ratio: 16 / 11; }
  #wrapper .bobgrow-hero__content {
    padding: var(--spacing-lg);
    max-width: 100%;
    justify-content: flex-end;
    gap: var(--spacing-sm);
  }
  #wrapper .bobgrow-hero__desc { display: none; }

  /* Mobile: Bobi más pequeño y a la esquina */
  #wrapper .bobgrow-hero__bobi {
    width: 130px;
    right: -10px;
    bottom: -6px;
  }
  /* Bocadillo oculto en mobile — no hay sitio */
  #wrapper .bobgrow-hero__speech { display: none; }
}

@media (max-width: 575px) {
  #wrapper .bobgrow-hero__bobi {
    width: 100px;
    right: -12px;
    opacity: 0.92;
  }
}


/* ============================================================================
   CATEGORY SEO — texto expandible (NO cloaking)
   ----------------------------------------------------------------------------
   El texto SEO de la categoría aparece bajo la rejilla de productos. Antes
   estaba clipado con `max-height: 240px; overflow: hidden;` SIN forma de
   leerlo entero → Google ve un texto que el usuario no puede leer → técnica
   considerada cloaking. Fix: botón "Leer más / Leer menos" controlado por JS
   (SeoToggle en header.js) que expande con transición suave.
   ============================================================================ */

#wrapper .category__seo-content,
#wrapper #category-description {
  position: relative;
  margin: var(--spacing-xl) auto 0;
  padding: var(--spacing-lg) 0 0;
  max-width: 1100px;
  color: var(--main-text-color);
  font-size: var(--fs-14);
  line-height: 1.7;
}

#wrapper .category__seo-content--collapsible {
  max-height: 240px;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

#wrapper .category__seo-content--collapsible::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 110px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--bg-body) 90%);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#wrapper .category__seo-content.is-expanded {
  max-height: 9999px; /* no transition end issue — alto inalcanzable */
}
#wrapper .category__seo-content.is-expanded::after { opacity: 0; }

#wrapper .category__seo-content h2,
#wrapper #category-description h2 {
  font-size: var(--fs-20);
  color: var(--text-heading);
  font-weight: 700;
  margin: var(--spacing-md) 0 8px;
}
#wrapper .category__seo-content h3,
#wrapper #category-description h3 {
  font-size: var(--fs-18);
  color: var(--primary-color);
  font-weight: 700;
  margin: var(--spacing-md) 0 6px;
}
#wrapper .category__seo-content p,
#wrapper #category-description p {
  margin: 0 0 var(--spacing-sm);
  line-height: 1.7;
}
#wrapper .category__seo-content a,
#wrapper #category-description a {
  color: var(--primary-color);
  text-decoration: underline;
}
#wrapper .category__seo-content a:hover {
  color: var(--primary-hover);
}

/* Botón "Leer más / Leer menos" */
#wrapper .bobgrow-seo-toggle-wrap {
  display: flex;
  justify-content: center;
  margin: 12px auto var(--spacing-xl);
  max-width: 1100px;
  position: relative;
  z-index: 2;
}

#wrapper .bobgrow-seo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-white);
  color: var(--primary-color);
  border: 1.5px solid var(--primary-color);
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 700;
  font-size: var(--fs-14);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.15s ease;
}
#wrapper .bobgrow-seo-toggle:hover,
#wrapper .bobgrow-seo-toggle:focus-visible {
  background: var(--primary-color);
  color: var(--color-white);
  outline: none;
  transform: translateY(-1px);
}
#wrapper .bobgrow-seo-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
}
#wrapper .bobgrow-seo-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}


/* ============================================================================
   4. FOOTER REDISEÑO PROFESIONAL
   Estructura limpia con jerarquía clara y mejor uso del espacio.
   ============================================================================ */

#footer.footer,
#footer .footer__main {
  background: var(--bg-footer);
  color: var(--color-white);
  margin-top: var(--spacing-xl);
  padding: 0;
}

/* Reassurance bar — top decoration con border */
#footer .footer-reassurance {
  background: rgba(0, 0, 0, 0.10);
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

#footer .footer-reassurance .container,
#footer .footer-reassurance > div {
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

#footer .footer-reassurance__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 991px) {
  #footer .footer-reassurance__list { justify-content: center; }
}

#footer .footer-reassurance__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-white);
  font-size: var(--fs-13);
  font-weight: 500;
}

#footer .footer-reassurance__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--badge-yellow);
}

#footer .footer-reassurance__icon svg {
  width: 22px;
  height: 22px;
}

/* Body principal con mejor padding */
#footer .footer__body {
  padding: var(--spacing-xl) 0;
}

#footer .footer__body > .container,
#footer .footer__body > div {
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* Top row reorganizado: logo+social (1 col compacta) + newsletter (1 col grande) */
#footer .footer__top-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 768px) {
  #footer .footer__top-row {
    grid-template-columns: minmax(200px, 280px) 1fr;
    align-items: center;
    gap: var(--spacing-xl);
  }
}

#footer .footer__logo-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

#footer .footer__logo-img {
  max-width: 100px;
  height: auto;
}

#footer .footer-social {
  display: flex;
  gap: 8px;
}

#footer .footer-social__link {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-circle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

#footer .footer-social__link:hover {
  background: var(--badge-yellow);
  color: var(--text-heading);
  transform: translateY(-2px);
}

#footer .footer-social__link svg {
  width: 18px;
  height: 18px;
}

/* Newsletter más estilizado */
#footer .footer__newsletter {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
}

#footer .footer__newsletter-title {
  font-size: var(--fs-18);
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--color-white);
}

#footer .footer__newsletter-desc {
  font-size: var(--fs-13);
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 var(--spacing-md);
  line-height: 1.5;
}

#footer .footer__newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#footer .footer__newsletter-input-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#footer .footer__newsletter-input {
  flex: 1 1 220px;
  padding: 12px 16px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-white);
  font-size: var(--fs-14);
  color: var(--main-text-color);
  outline: none;
}

#footer .footer__newsletter-input:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.30);
}

#footer .footer__newsletter-btn {
  padding: 12px 22px;
  background: var(--badge-yellow);
  color: var(--text-heading);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--fs-14);
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}

#footer .footer__newsletter-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

#footer .footer__newsletter-privacy {
  font-size: var(--fs-11, 0.6875rem);
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  line-height: 1.5;
}

#footer .footer__newsletter-privacy a {
  color: rgba(255, 255, 255, 0.90);
  text-decoration: underline;
}

/* Sin divider (ya está el borde del top-row) */
#footer .footer__divider { display: none; }

/* Columnas con grid — SIEMPRE mínimo 2 cols incluso en mobile */
#footer .footer__columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-xl);
  margin: 0;
  max-width: 100%;
}

@media (min-width: 992px) {
  #footer .footer__columns { grid-template-columns: repeat(4, 1fr); }
}
/* Mobile MUY pequeño <360 sí stack en 1 col para no apretar */
@media (max-width: 359px) {
  #footer .footer__columns { grid-template-columns: 1fr; }
}

#footer .footer__col,
#footer .footer-block {
  width: auto;
  flex: none;
}

#footer .footer__col-title,
#footer .footer-block__title {
  font-size: var(--fs-13);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 var(--spacing-md);
  color: var(--color-white);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--badge-yellow);
  display: inline-block;
}

#footer .footer__link-list,
#footer .footer-block__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer .footer__link-list li,
#footer .footer-block__list li {
  margin-bottom: 10px;
  line-height: 1.5;
}

#footer .footer__link,
#footer .footer-block__list a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: var(--fs-13);
  transition: color 0.15s ease, padding-left 0.2s ease;
  display: inline-block;
}

#footer .footer__link:hover,
#footer .footer-block__list a:hover {
  color: var(--badge-yellow);
  padding-left: 4px;
}

/* Contact list con iconos */
#footer .footer__contact-item {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

#footer .footer__contact-item svg {
  flex-shrink: 0;
  opacity: 0.85;
}

/* Dirección postal de la empresa titular (columna Contacto) */
#footer .footer__address {
  margin: 14px 0 0;
  font-style: normal;
  font-size: var(--fs-12);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}

#footer .footer__address strong {
  display: block;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
  margin-bottom: 2px;
}

/* Bottom bar (copyright + empresa titular + age badge) */
#footer .footer__after-hook,
#footer .footer__age-badge {
  display: inline-block;
}

#footer .footer__bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

#footer .footer__bottom-inner .footer__copyright,
#footer .footer__bottom-inner .footer__company {
  margin: 0;
}

#footer .footer__company {
  max-width: 780px;
  font-size: var(--fs-12);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

#footer .footer__company strong {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
}

#footer .footer__bottom-inner .footer__age-badge {
  margin-left: 0;
}

/* Aviso de jurisdicción (temporal, exigido por la pasarela de pago) */
#footer .footer__jurisdiction {
  max-width: 860px;
  margin: 2px 0 0;
  font-size: var(--fs-11, 11px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}

#footer .footer__age-badge {
  background: var(--badge-yellow);
  color: var(--text-heading);
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-12);
  margin-left: 8px;
}

#footer .footer__bottom,
#footer .l-footer__bottom {
  background: var(--bg-footer-bottom);
  padding: 14px var(--spacing-md);
  text-align: center;
  font-size: var(--fs-12);
  color: rgba(255, 255, 255, 0.85);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Payment icons row */
#footer .footer__payment {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: var(--spacing-md) 0 0;
  margin-top: var(--spacing-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

#footer .footer__payment-label {
  font-size: var(--fs-13);
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
}

#footer .footer__payment-icons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

#footer .footer__payment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#footer .footer__payment-icon svg {
  display: block;
  height: 28px;
  width: auto;
}


/* ============================================================================
   PÁGINA 404 — diseño creativo bobgrow grow shop
   ----------------------------------------------------------------------------
   Full-bleed layout con ghost "404" gigante de fondo, ilustración SVG de
   planta que sigue creciendo (mensaje positivo) + maceta agrietada, semillas
   flotantes animadas y CTAs prominentes. 2 cols desktop, 1 col mobile.
   ============================================================================ */

/* Wrapper de la página entera — sin container del parent */
.bobgrow-404-page {
  padding: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.page-content--bobgrow-404 {
  position: relative;
  width: 100%;
  background:
    radial-gradient(ellipse at 20% 100%, rgba(0, 174, 105, 0.10), transparent 55%),
    radial-gradient(ellipse at 80% 0%, rgba(255, 211, 53, 0.10), transparent 50%),
    linear-gradient(180deg, #f7fbf9 0%, #ffffff 100%);
  padding: clamp(var(--spacing-lg), 6vw, var(--spacing-xl)) var(--spacing-md);
  min-height: 60vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ghost gigante "404" detrás del contenido — decorativo */
.bobgrow-404__ghost {
  position: absolute;
  font-family: var(--font-family);
  font-weight: 900;
  font-size: clamp(220px, 32vw, 460px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--primary-color);
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-5deg);
  z-index: 0;
  white-space: nowrap;
}

.bobgrow-404__container {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  align-items: center;
}

@media (min-width: 768px) {
  .bobgrow-404__container {
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(var(--spacing-lg), 4vw, var(--spacing-xl));
  }
}

/* ── Columna ART ── */
.bobgrow-404__art-col {
  display: flex;
  align-items: center;
  justify-content: center;
}
.bobgrow-404__scene {
  width: 100%;
  max-width: 420px;
  position: relative;
}
.bobgrow-404__scene-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Planta crece — animación suave de "respiración" */
.bobgrow-404__plant {
  transform-origin: 200px 380px;
  animation: bobgrow-404-grow 6s ease-in-out infinite;
}
@keyframes bobgrow-404-grow {
  0%, 100% { transform: scaleY(1) rotate(0deg); }
  50%      { transform: scaleY(1.015) rotate(-0.6deg); }
}

/* Sol rota lento */
.bobgrow-404__sun {
  transform-origin: 320px 80px;
  animation: bobgrow-404-pulse 4s ease-in-out infinite;
}
@keyframes bobgrow-404-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.08); opacity: 1; }
}

/* Semillas flotantes */
.bobgrow-404__particles circle {
  animation: bobgrow-404-float 3.5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.bobgrow-404__particles circle:nth-child(1) { animation-delay: 0s; }
.bobgrow-404__particles circle:nth-child(2) { animation-delay: 0.5s; }
.bobgrow-404__particles circle:nth-child(3) { animation-delay: 1.0s; }
.bobgrow-404__particles circle:nth-child(4) { animation-delay: 1.5s; }
.bobgrow-404__particles circle:nth-child(5) { animation-delay: 2.0s; }
.bobgrow-404__particles circle:nth-child(6) { animation-delay: 2.5s; }

@keyframes bobgrow-404-float {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(-12px); opacity: 1; }
}

/* Respect reduce-motion */
@media (prefers-reduced-motion: reduce) {
  .bobgrow-404__plant,
  .bobgrow-404__sun,
  .bobgrow-404__particles circle { animation: none; }
}

/* ── Columna CONTENT ── */
.bobgrow-404__content-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
  text-align: left;
}
@media (max-width: 767px) {
  .bobgrow-404__content-col { align-items: center; text-align: center; }
}

.bobgrow-404__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--primary-semi);
  color: var(--primary-color);
  border-radius: 999px;
  font-size: var(--fs-12);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.bobgrow-404__eyebrow svg { flex-shrink: 0; }

.bobgrow-404__title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 900;
  color: var(--text-heading);
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.bobgrow-404__lead {
  font-size: clamp(var(--fs-16), 1.6vw, var(--fs-18));
  color: var(--main-text-color);
  line-height: 1.5;
  margin: 0;
  max-width: 540px;
}

.bobgrow-404__server-msg {
  display: inline-block;
  font-size: var(--fs-13);
  color: var(--text-muted);
  margin: 0;
  padding: 10px 16px;
  background: rgba(0, 174, 105, 0.05);
  border-left: 3px solid var(--primary-color);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.bobgrow-404__server-msg a {
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: underline;
}

/* CTAs principales */
.bobgrow-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: 4px;
}

.bobgrow-404__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--fs-14);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  border: 2px solid transparent;
  cursor: pointer;
}

.bobgrow-404__cta--primary {
  background: var(--primary-color);
  color: var(--color-white);
  box-shadow: 0 6px 18px rgba(0, 174, 105, 0.32);
}
.bobgrow-404__cta--primary:hover {
  background: var(--primary-hover);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 174, 105, 0.42);
}

.bobgrow-404__cta--ghost {
  background: var(--color-white);
  color: var(--primary-color);
  border-color: var(--primary-color);
}
.bobgrow-404__cta--ghost:hover {
  background: var(--primary-color);
  color: var(--color-white);
  transform: translateY(-2px);
}

/* ── Atajos populares ── */
.bobgrow-404__shortcuts {
  margin-top: var(--spacing-md);
  width: 100%;
  max-width: 540px;
}

.bobgrow-404__shortcuts-label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.bobgrow-404__shortcuts-line {
  flex: 1 1 auto;
  height: 1px;
  background: var(--border-color);
}

.bobgrow-404__shortcuts-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 767px) {
  .bobgrow-404__shortcuts-list { justify-content: center; }
}

.bobgrow-404__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--color-white);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text-heading);
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.bobgrow-404__chip svg {
  color: var(--primary-color);
  transition: color 0.15s ease;
}
.bobgrow-404__chip:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 174, 105, 0.22);
}
.bobgrow-404__chip:hover svg { color: var(--color-white); }

/* Mobile fine-tuning */
@media (max-width: 575px) {
  .page-content--bobgrow-404 { padding: var(--spacing-lg) var(--spacing-md); }
  .bobgrow-404__ghost { font-size: clamp(180px, 60vw, 280px); }
  .bobgrow-404__scene { max-width: 280px; }
  .bobgrow-404__actions { flex-direction: column; width: 100%; }
  .bobgrow-404__cta { width: 100%; justify-content: center; }
}


/* ============================================================================
   STAR RATING — sin reseñas = todas grises (no amarilla solitaria)
   ----------------------------------------------------------------------------
   Estructura productcomments:
     .product-list-review > .grade-stars > .star-content.star-empty (5 stars,
       primer star con style="visibility:hidden" para hueco) +
       .star-content.star-full (.star-on × N filled overlap).
   El módulo siempre renderiza UNA .star-on aunque la nota sea 0, dando la
   sensación de "1 estrella amarilla = mala valoración" cuando realmente no
   hay reseñas. Fix: si JS marca .is-empty-rating en el wrapper, ocultamos
   la capa amarilla y revelamos las 5 vacías.
   ============================================================================ */

#wrapper .product-list-review.is-empty-rating .star-full,
#wrapper .product-list-review.is-empty-rating .star-on {
  display: none !important;
}

/* El primer .star del .star-empty tiene visibility:hidden inline para que la
   .star-on lo sobreescriba; al ocultar la amarilla, lo revelamos. */
#wrapper .product-list-review.is-empty-rating .star-content.star-empty .star {
  visibility: visible !important;
  opacity: 0.45;
  color: var(--text-muted);
}

/* También aceptar emptyness ANTES de que la AJAX rellene los datos: por
   defecto, mientras `data-ps-ref="number-value"` esté vacío, ocultar todo
   el bloque para evitar el flash de "1 estrella" amarilla durante la carga. */
#wrapper .product-list-review:not(.is-empty-rating) .grade-stars:empty {
  display: none;
}


/* ============================================================================
   AUTH CREATIVO — Login + Register con Bobi mascot
   ----------------------------------------------------------------------------
   Split screen: hero panel verde gradient con Bobi peeking + welcome copy a
   la izq, card limpia con form a la der. Mobile: stack con Bobi flotando.
   ============================================================================ */

.bobgrow-auth-page {
  padding: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.bobgrow-auth {
  width: 100%;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255, 211, 53, 0.10), transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(0, 174, 105, 0.12), transparent 55%),
    linear-gradient(180deg, #f7fbf9 0%, #ffffff 100%);
  padding: clamp(var(--spacing-lg), 4vw, var(--spacing-xl)) var(--spacing-md);
  min-height: calc(100vh - 240px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bobgrow-auth__container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  background: var(--color-white);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.10);
  border: 1px solid rgba(0, 174, 105, 0.10);
  border-radius: var(--radius-lg);
  position: relative;
  /* NO overflow:hidden — Bobi necesita extenderse fuera del hero panel
     y sobre el form panel para que la mano "agarre" la columna. */
}

@media (min-width: 992px) {
  .bobgrow-auth__container {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 600px;
  }
}

/* ── HERO PANEL (izquierda desktop) ── */
.bobgrow-auth__hero {
  position: relative;
  background: linear-gradient(135deg, #00ae69 0%, #008e56 50%, #006644 100%);
  color: var(--color-white);
  padding: clamp(var(--spacing-lg), 4vw, calc(var(--spacing-xl) + 8px));
  /* overflow visible para que Bobi pueda extenderse sobre el form panel */
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 280px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* Las decoraciones (hojas + semillas) NO deben salir del hero panel
   — sólo Bobi. Por eso clipamos las decor con su propio contenedor. */
.bobgrow-auth__hero-decor {
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
@media (min-width: 992px) {
  .bobgrow-auth__hero,
  .bobgrow-auth__hero-decor {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  }
}
.bobgrow-auth__form-panel {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
@media (min-width: 992px) {
  .bobgrow-auth__form-panel {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  }
}
@media (min-width: 992px) {
  .bobgrow-auth__hero { min-height: auto; }
}

/* Decoraciones: hojas + semillas flotando */
.bobgrow-auth__hero-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.bobgrow-auth__leaf {
  position: absolute;
  color: rgba(255, 255, 255, 0.08);
  width: 180px;
  height: 180px;
  transition: transform 8s ease-in-out infinite;
}
.bobgrow-auth__leaf--1 {
  top: -40px; left: -40px;
  transform: rotate(-20deg);
  animation: bobgrow-auth-float-leaf 12s ease-in-out infinite;
}
.bobgrow-auth__leaf--2 {
  bottom: -60px; right: -30px;
  width: 220px; height: 220px;
  transform: rotate(160deg);
  animation: bobgrow-auth-float-leaf 14s ease-in-out infinite reverse;
}
@keyframes bobgrow-auth-float-leaf {
  0%, 100% { transform: rotate(-20deg) translateY(0); }
  50%      { transform: rotate(-12deg) translateY(-8px); }
}

.bobgrow-auth__seed {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--badge-yellow);
  box-shadow: 0 0 12px rgba(255, 211, 53, 0.6);
}
.bobgrow-auth__seed--1 { top: 18%; right: 12%; animation: bobgrow-auth-float-seed 5s ease-in-out infinite; }
.bobgrow-auth__seed--2 { bottom: 25%; left: 8%; width: 6px; height: 6px; animation: bobgrow-auth-float-seed 6s ease-in-out infinite 1s; }
.bobgrow-auth__seed--3 { top: 50%; right: 6%; width: 10px; height: 10px; animation: bobgrow-auth-float-seed 7s ease-in-out infinite 2s; }
@keyframes bobgrow-auth-float-seed {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.85; }
  50%      { transform: translateY(-14px) scale(1.15); opacity: 1; }
}

.bobgrow-auth__hero-content {
  position: relative;
  z-index: 2;
  max-width: 480px;
}

.bobgrow-auth__eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
  border-radius: 999px;
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--spacing-md);
}

.bobgrow-auth__title {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 900;
  color: var(--color-white);
  line-height: 1.1;
  margin: 0 0 var(--spacing-md);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.bobgrow-auth__lead {
  font-size: clamp(var(--fs-15), 1.4vw, var(--fs-16));
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 var(--spacing-lg);
  max-width: 420px;
}

.bobgrow-auth__perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bobgrow-auth__perks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--color-white);
}
.bobgrow-auth__perks li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--badge-yellow);
  color: var(--text-heading);
  border-radius: var(--radius-circle);
  font-weight: 900;
  font-size: 13px;
  flex-shrink: 0;
}

/* Bobi peeking — z-index alto para que su mano quede VISIBLEMENTE encima
   de la columna del form (efecto "agarra el borde"). */
.bobgrow-auth__bobi {
  position: absolute;
  z-index: 0; /* DEBAJO del form-panel — Bobi asomado sutil, no tapa form */
  width: 170px;
  height: auto;
  right: -29px;  /* valor exacto del usuario para clavarlo */
  top: 20px;     /* arriba en positivo */
  bottom: auto;
  pointer-events: none;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.20));
  opacity: 1;
}

/* REGISTER: Bobi cae desde arriba — sin rotación, top positivo */
.bobgrow-auth--register .bobgrow-auth__bobi {
  bottom: auto;
  top: 150px;
  right: -29px; /* valor exacto del usuario para clavarlo */
  width: 170px;
  transform: none;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22));
}
/* Mobile register: panels apilan, top:150px ya no aplica — Bobi peek inferior
   como en login mobile */
@media (max-width: 991px) {
  .bobgrow-auth--register .bobgrow-auth__bobi {
    top: auto;
    bottom: -4px;
    right: -10px;
    width: 160px;
  }
}
@media (max-width: 575px) {
  .bobgrow-auth--register .bobgrow-auth__bobi {
    width: 140px;
    right: -8px;
    bottom: -6px;
  }
}

/* En FORGOT-PASSWORD, layout single-column con Bobi al lado izquierdo */
.bobgrow-auth__container--single {
  grid-template-columns: 1fr !important;
  max-width: 560px;
  position: relative;
  margin: 0 auto;
}
/* Forgot-password: Bobi peek asomado desde la esquina superior derecha del
   campo email — como leyendo lo que escribes. Specificity 2-clases (parent
   .bobgrow-auth--forgot) para vencer al override mobile genérico de
   .bobgrow-auth__bobi (login/register) que también aplicaría aquí porque la
   img tiene ambas clases. */
.bobgrow-auth--forgot .bobgrow-auth__email-field {
  position: relative;
}
.bobgrow-auth--forgot .bobgrow-auth__bobi--forgot {
  position: absolute;
  z-index: 5;
  width: 70px;
  height: auto;
  top: -14px;        /* valor exacto del usuario para clavarlo en desktop */
  right: 20px;       /* positivo — dentro del input desde la derecha */
  left: auto;
  bottom: auto;
  transform: none;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}
@media (max-width: 575px) {
  .bobgrow-auth--forgot .bobgrow-auth__bobi--forgot {
    width: 48px;
    top: -2px;  /* valor exacto del usuario para clavarlo en mobile */
    right: 4px;
  }
}

/* Badge eyebrow tipo pill verde-semi sobre el title */
.bobgrow-auth__form-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--primary-semi);
  color: var(--primary-color);
  border-radius: 999px;
  font-size: var(--fs-12);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--spacing-sm);
}

.bobgrow-auth--forgot .bobgrow-auth__form-panel {
  padding: clamp(var(--spacing-xl), 5vw, calc(var(--spacing-xl) + 12px));
}

/* Submit del forgot — pill verde primary igual que login */
.bobgrow-auth--forgot #send-reset-link,
.bobgrow-auth--forgot button[name="submit"] {
  width: 100%;
  padding: 14px 28px;
  background: var(--primary-color);
  color: var(--color-white);
  border: none;
  border-radius: 999px;
  font-size: var(--fs-14);
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 174, 105, 0.30);
  margin-top: var(--spacing-sm);
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.bobgrow-auth--forgot #send-reset-link:hover,
.bobgrow-auth--forgot button[name="submit"]:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 174, 105, 0.40);
}
/* ============================================================================
   GLOBAL: prevenir scroll horizontal en mobile (overflow-x:hidden en body).
   Cualquier hijo con `right: -Xpx` o `transform: translateX(...)` desborda
   y aparece scroll horizontal en iOS. */
html, body { overflow-x: hidden; }
#wrapper, #footer { overflow-x: clip; }

/* ============================================================================
   SEARCH MOBILE OFFCANVAS — Bobi peek + estética bobgrow
   ============================================================================
   En mobile el buscador usa BS5 offcanvas-top desde #searchCanvas. Por defecto
   sale como una banda blanca plana — lo decoramos con borde verde, sombra,
   y Bobi peeking desde la esquina derecha. */

#searchCanvas.offcanvas {
  background: linear-gradient(180deg, var(--color-white) 0%, #f4faf6 100%);
  box-shadow: 0 12px 32px rgba(0, 102, 68, 0.18);
  border-bottom: 3px solid var(--primary-color);
}
#searchCanvas .offcanvas-header {
  position: relative;
  padding: 40px 15px 22px; /* valor exacto usuario */
  gap: 12px;
}
/* Bobi peek desde el lado IZQUIERDO — como mirando lo que escribes.
   Valores exactos del usuario (top: 8px, left: 55px) para que en mobile
   quede asomado encima del campo de búsqueda. */
#searchCanvas::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 55px;
  right: auto;
  width: 56px;
  height: 38px;
  background: url("../img/bob-peek.png") no-repeat center/contain;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18));
}
#searchCanvas .ps-searchbar__form {
  border: 2px solid var(--primary-color);
  border-radius: 999px;
  background: var(--color-white);
  box-shadow: 0 2px 8px rgba(0, 174, 105, 0.10);
}
#searchCanvas .js-search-input.form-control {
  font-size: 16px; /* evita zoom iOS al focar input */
  padding: 12px 18px;
  border: none;
  background: transparent;
}
#searchCanvas .ps-searchbar__magnifier {
  color: var(--primary-color);
}
/* Botón "Cancelar"/cerrar con estilo bobgrow */
#searchCanvas .offcanvas-header .btn-close,
#searchCanvas .ps-searchbar__close,
#searchCanvas [data-bs-dismiss="offcanvas"] {
  color: var(--primary-color);
  font-weight: 700;
  background: transparent;
  border: none;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background-color 0.15s ease;
}
#searchCanvas .offcanvas-header .btn-close:hover,
#searchCanvas .ps-searchbar__close:hover,
#searchCanvas [data-bs-dismiss="offcanvas"]:hover {
  background: var(--primary-semi);
}
/* keyframes bobgrow-bobi-wave eliminado — Bobi auth queda estático. */
/* Desktop override eliminado — base ya correcta para desktop.
   Mobile shrink + reposiciona Bobi al pie del hero panel apilado. */
@media (max-width: 991px) {
  .bobgrow-auth__bobi {
    top: auto;        /* reset top:20 desktop */
    bottom: -4px;
    right: -10px;
    width: 160px;
  }
}
@media (max-width: 575px) {
  .bobgrow-auth__bobi {
    width: 140px;
    right: -8px;
    bottom: -6px;
  }
}

/* ── FORM PANEL (derecha desktop) ── */
.bobgrow-auth__form-panel {
  padding: clamp(var(--spacing-lg), 4vw, var(--spacing-xl));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-md);
  background: var(--color-white);
}

.bobgrow-auth__form-header {
  margin-bottom: var(--spacing-sm);
}
.bobgrow-auth__form-title {
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 800;
  color: var(--text-heading);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.bobgrow-auth__form-sub {
  font-size: var(--fs-14);
  color: var(--text-muted);
  margin: 0;
}

.bobgrow-auth__form-wrapper {
  /* Resetea cualquier card heredada del form — el panel ya es card */
}
.bobgrow-auth__form-wrapper #login-form,
.bobgrow-auth__form-wrapper #customer-form,
.bobgrow-auth__form-wrapper .register-form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: none !important;
}

/* Buttons-wrapper en login: pillas verde + ghost olvido */
.bobgrow-auth__form-wrapper .buttons-wrapper,
.bobgrow-auth__form-wrapper .buttons-wrapper--split {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
  flex-wrap: wrap;
}
.bobgrow-auth__form-wrapper .btn-basic {
  background: transparent !important;
  color: var(--primary-color) !important;
  border: none !important;
  padding: 8px 0 !important;
  font-size: var(--fs-13) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.bobgrow-auth__form-wrapper .btn-basic:hover {
  text-decoration: underline !important;
  color: var(--primary-hover) !important;
}
.bobgrow-auth__form-wrapper #submit-login,
.bobgrow-auth__form-wrapper button[data-link-action="sign-in"] {
  width: auto;
  min-width: 200px;
  padding: 14px 28px;
  background: var(--primary-color);
  color: var(--color-white);
  border: none;
  border-radius: 999px;
  font-size: var(--fs-14);
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 174, 105, 0.30);
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.bobgrow-auth__form-wrapper #submit-login:hover,
.bobgrow-auth__form-wrapper button[data-link-action="sign-in"]:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 174, 105, 0.40);
}

/* Register form submit */
.bobgrow-auth__form-wrapper #customer-form button[type="submit"] {
  width: 100%;
  padding: 14px 24px;
  background: var(--primary-color);
  color: var(--color-white);
  border: none;
  border-radius: 999px;
  font-size: var(--fs-14);
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 174, 105, 0.30);
  margin-top: var(--spacing-md);
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.bobgrow-auth__form-wrapper #customer-form button[type="submit"]:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 174, 105, 0.40);
}

/* Form fields (heredados de body#authentication general — los reforzamos aquí) */
.bobgrow-auth__form-wrapper .form-control {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--fs-14);
  color: var(--text-heading);
  background: var(--color-white);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.bobgrow-auth__form-wrapper textarea.form-control {
  height: auto;
  min-height: 120px;
  padding: 12px 16px;
}
.bobgrow-auth__form-wrapper .form-control:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px var(--primary-semi);
}
.bobgrow-auth__form-wrapper .form-control-label,
.bobgrow-auth__form-wrapper .form-label {
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--text-heading);
  margin: 0 0 6px;
  display: block;
}

/* Password input con eye toggle */
.bobgrow-auth__form-wrapper .input-group.password-field {
  position: relative;
  display: block;
}
.bobgrow-auth__form-wrapper .input-group.password-field input { padding-right: 52px; }
.bobgrow-auth__form-wrapper [data-ps-action="toggle-password"] {
  position: absolute !important;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 38px !important;
  height: 38px !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  color: var(--text-muted) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer;
  z-index: 2;
  box-shadow: none !important;
  margin: 0 !important;
}
.bobgrow-auth__form-wrapper [data-ps-action="toggle-password"]:hover {
  background: var(--primary-semi) !important;
  color: var(--primary-color) !important;
  transform: translateY(-50%) !important;
}

/* Form footer: CTA crear cuenta / iniciar sesión */
.bobgrow-auth__form-footer {
  border-top: 1px dashed var(--border-color);
  padding-top: var(--spacing-md);
  margin-top: var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.bobgrow-auth__form-footer p {
  margin: 0;
  font-size: var(--fs-13);
  color: var(--text-muted);
}
.bobgrow-auth__register-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: transparent;
  color: var(--primary-color);
  border: 1.5px solid var(--primary-color);
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--fs-13);
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.15s ease;
}
.bobgrow-auth__register-cta:hover {
  background: var(--primary-color);
  color: var(--color-white);
  transform: translateY(-1px);
}
.bobgrow-auth__register-cta svg {
  transition: transform 0.18s ease;
}
.bobgrow-auth__register-cta:hover svg { transform: translateX(3px); }

/* Mobile: panels apilan, Bobi más pequeño */
@media (max-width: 991px) {
  .bobgrow-auth__hero {
    padding: var(--spacing-lg) var(--spacing-md);
    padding-bottom: 120px; /* espacio para Bobi peek */
  }
  .bobgrow-auth__bobi {
    width: 160px;
    right: -10px;
    bottom: -4px;
  }
}

/* Hide forgot password ugly link below buttons (style it nicer) */
.bobgrow-auth__form-wrapper .forgot-password,
.bobgrow-auth__form-wrapper .login__forgot-password {
  margin: 0;
}


/* ============================================================================
   PÁGINA LOGIN — /iniciar-sesion (body#authentication)
   ----------------------------------------------------------------------------
   Antes: form estirado a todo el ancho, sin contenedor, jerarquía pobre.
   Ahora: card centrada con sombra, dos columnas en desktop (login + CTA crear
   cuenta), inputs con iconos, espaciado pro.
   ============================================================================ */

body#authentication #content-wrapper {
  background: linear-gradient(180deg, #f7fbf9 0%, #ffffff 60%);
  padding: var(--spacing-xl) 0 var(--spacing-xl);
}

body#authentication .page-header {
  max-width: 920px;
  margin: 0 auto var(--spacing-lg);
  padding: 0 var(--spacing-md);
  text-align: center;
}
body#authentication .page-title-section {
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  font-weight: 800;
  color: var(--text-heading);
  margin: 0;
  letter-spacing: -0.01em;
}
body#authentication .page-title-section::before {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background: var(--nav-gradient);
  border-radius: 999px;
  margin: 0 auto 18px;
}

/* Login wrapper: dos columnas en desktop, una en mobile */
body#authentication .page-content--general,
body#authentication #content {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

body#authentication .login,
body#authentication .login-form-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  align-items: stretch;
}
@media (min-width: 768px) {
  body#authentication .login,
  body#authentication .login-form-container {
    grid-template-columns: 1.2fr 1fr;
  }
}

/* Card del form de login */
body#authentication .login__form-wrapper,
body#authentication #login-form {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  padding: var(--spacing-xl);
}

body#authentication #login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Form-group: estiliza inputs con label arriba */
body#authentication .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
body#authentication .form-group label,
body#authentication .form-group .form-control-label,
body#authentication .form-control-label {
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--text-heading);
  margin: 0;
}
body#authentication .form-control,
body#authentication input[type="email"],
body#authentication input[type="password"],
body#authentication input[type="text"] {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--fs-14);
  color: var(--text-heading);
  background: var(--color-white);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
body#authentication .form-control:focus,
body#authentication input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px var(--primary-semi);
}

/* Password input con eye toggle absoluto a la derecha */
body#authentication .input-group.password-field {
  position: relative;
  display: block;
}
body#authentication .input-group.password-field input { padding-right: 52px; }

body#authentication [data-ps-action="toggle-password"] {
  position: absolute !important;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px !important;
  height: 38px !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  color: var(--text-muted) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer;
  z-index: 2;
  box-shadow: none !important;
  margin: 0 !important;
}
body#authentication [data-ps-action="toggle-password"]:hover {
  background: var(--primary-semi) !important;
  color: var(--primary-color) !important;
  transform: translateY(-50%) !important;
}
body#authentication [data-ps-action="toggle-password"] .material-icons {
  font-size: 20px;
}

/* Buttons wrapper: forgot link + submit button en la misma fila */
body#authentication .buttons-wrapper,
body#authentication .buttons-wrapper--split {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-sm);
  flex-wrap: wrap;
}
body#authentication .buttons-wrapper .btn-basic {
  background: transparent !important;
  color: var(--primary-color) !important;
  border: none !important;
  padding: 8px 0 !important;
  font-size: var(--fs-13) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
body#authentication .buttons-wrapper .btn-basic:hover {
  text-decoration: underline !important;
  background: transparent !important;
  color: var(--primary-hover) !important;
}
body#authentication .buttons-wrapper #submit-login {
  flex: 0 0 auto;
  min-width: 200px;
  width: auto;
  margin: 0 !important;
}

/* Mobile: stack en columna */
@media (max-width: 575px) {
  body#authentication .buttons-wrapper {
    flex-direction: column;
    align-items: stretch;
  }
  body#authentication .buttons-wrapper #submit-login {
    width: 100% !important;
    min-width: 0;
  }
  body#authentication .buttons-wrapper .btn-basic {
    text-align: center;
  }
}

/* Login grid: hide default <hr>, posiciona form/prompt en columnas */
body#authentication .login > hr,
body#authentication .login__form-wrapper + hr,
body#authentication hr + .login__register-prompt {
  /* el separator default queda redundante en layout grid */
}
body#authentication .login {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "form" "prompt";
  gap: var(--spacing-lg);
  align-items: stretch;
}
body#authentication .login > hr { display: none; }
body#authentication .login__form-wrapper { grid-area: form; }
body#authentication .login__register-prompt { grid-area: prompt; }

@media (min-width: 768px) {
  body#authentication .login {
    grid-template-columns: 1.4fr 1fr;
    grid-template-areas: "form prompt";
  }
}

/* Fila de acciones: forgot left, submit right */
body#authentication .forgot-password,
body#authentication .login__forgot-password {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
}
body#authentication .forgot-password a,
body#authentication .login__forgot-password a {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--primary-color);
  text-decoration: none;
}
body#authentication .forgot-password a:hover {
  text-decoration: underline;
}

/* Botón submit principal — full-width verde */
body#authentication #submit-login,
body#authentication button[type="submit"][data-link-action="sign-in"],
body#authentication .login__submit {
  width: 100%;
  height: 48px;
  background: var(--primary-color);
  color: var(--color-white);
  border: none;
  border-radius: 999px;
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 4px 14px rgba(0, 174, 105, 0.25);
  margin-top: 8px;
}
body#authentication #submit-login:hover,
body#authentication button[type="submit"][data-link-action="sign-in"]:hover,
body#authentication .login__submit:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 174, 105, 0.30);
}

/* "¿No tiene cuenta?" — panel CTA al lado derecho */
body#authentication .login__register-prompt,
body#authentication .no-account {
  background: linear-gradient(135deg, var(--primary-color) 0%, #008e56 100%);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: var(--spacing-md);
  text-align: center;
  position: relative;
  overflow: hidden;
}
body#authentication .login__register-prompt::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
body#authentication .login__register-prompt::after {
  content: "";
  position: absolute;
  bottom: -60px;
  left: -30px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
body#authentication .login__register-prompt h2,
body#authentication .login__register-prompt > p:first-child,
body#authentication .login__register-prompt > strong,
body#authentication .login__register-prompt-title {
  font-size: var(--fs-20);
  font-weight: 800;
  color: var(--color-white);
  margin: 0 0 6px;
  position: relative;
  z-index: 1;
}
body#authentication .login__register-prompt a,
body#authentication .login__register-prompt .btn,
body#authentication .login__register-prompt-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--badge-yellow);
  color: var(--text-heading);
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--fs-14);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  position: relative;
  z-index: 1;
  align-self: center;
  min-width: 180px;
}
body#authentication .login__register-prompt a:hover,
body#authentication .login__register-prompt .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  color: var(--text-heading);
}

/* Error / success messages */
body#authentication .alert-danger,
body#authentication .alert-warning {
  background: rgba(201, 24, 24, 0.08);
  color: var(--color-sale);
  border: 1px solid rgba(201, 24, 24, 0.30);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: var(--fs-13);
}
body#authentication .alert-success {
  background: rgba(0, 174, 105, 0.08);
  color: var(--primary-color);
  border-color: rgba(0, 174, 105, 0.30);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: var(--fs-13);
}

/* Required field asterisk */
body#authentication .required-field-info,
body#authentication .form-control-comment {
  font-size: var(--fs-12);
  color: var(--text-muted);
  margin-top: 4px;
}

/* La página de creación de cuenta (registro) usa similar layout */
body#authentication.page-customer-account .register-form,
body#authentication .register-form {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  padding: var(--spacing-xl);
  max-width: 640px;
  margin: 0 auto;
}


/* ============================================================================
   17. RESPONSIVE — MOBILE (max-width 767px)
   ============================================================================ */
@media (max-width: 767px) {
  /* Header: stack rows */
  #header .bobgrow-header-main {
    flex-wrap: wrap;
    height: auto;
    padding: var(--spacing-sm) var(--spacing-md);
    gap: 8px;
  }
  #header .bobgrow-header-search {
    order: 3;
    width: 100%;
    flex: 1 1 100%;
  }
  #header .bobgrow-header-logo__img { max-height: 40px; }

  /* Nav bar: shorter */
  #header .bobgrow-nav-bar { height: 40px; }
  #header .bobgrow-nav-bar .open_rlmenu {
    font-size: var(--fs-13);
    padding: 0 12px;
  }

  /* Cross banner: smaller text */
  #header .cross-banner {
    font-size: var(--fs-12);
    height: 40px;
    padding: 0 8px;
  }

  /* Category header */
  #wrapper .bobgrow-category-header__title { font-size: 1.25rem; }

  /* Product grid: 2 cols max on mobile */
  #wrapper .bobgrow-product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Top products: smaller cards */
  #wrapper .bobgrow-top-products__carousel > .bobgrow-card,
  #wrapper .bobgrow-top-products__carousel > article.product-miniature {
    width: 180px;
    max-width: 180px;
  }

  /* Hide top-products arrows on mobile (touch swipe is natural) */
  #wrapper .bobgrow-top-products__nav { display: none; }

  /* Card miniature smaller */
  #wrapper .bobgrow-card__image-wrap {
    flex: 0 0 160px;
    height: 160px;
    padding: 10px 10px 0;
  }
  #wrapper .bobgrow-card__title { font-size: var(--fs-13); }
  #wrapper .bobgrow-card__price { font-size: var(--fs-18); }

  /* Reassurance bar: el grid de la sección REASSURANCE BAR REDISEÑO BOBGROW
     ya maneja el responsive con grid-template-columns 1fr/2/5. No tocar aquí. */

  /* Footer single column */
  #footer .footer-container { grid-template-columns: 1fr; gap: var(--spacing-lg); }

  /* Section titles smaller */
  #wrapper .bobgrow-section-title { font-size: 1.125rem; }

  /* Subcategories 2 cols */
  #wrapper .bobgrow-subcategories__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Product detail: single column en MUY mobile (<575) — 768+ usa 2 col compacto */
  body#product .product__container,
  body#product .product-container {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
  }
  body#product .product__title { font-size: var(--fs-20); }
  body#product .product__price { font-size: var(--fs-25); }
}


/* ============================================================================
   18. BOOTSTRAP 5 / HUMMINGBIRD COMPATIBILITY
   ----------------------------------------------------------------------------
   Overrides necessary because:
   - Hummingbird's theme.css ships Bootstrap 5 utilities with high specificity
   - Some legacy modules (rlthemecustom) used to register Bootstrap 4 styles;
     we now load only BS5 (bootstrap-minimal.css is commented out in PHP)
   - Some BS5 components need brand-color overrides
   ============================================================================ */

/* Containers: respect bobgrow max-width across pages */
.container,
.container-fluid {
  max-width: 1290px;
}

/* Bootstrap form-check — layout BS5 correcto (input flotado a la IZQUIERDA del
 * label). Antes se anulaba globalmente (float:none; padding-left:0) lo que
 * ROMPÍA todos los checkboxes de formularios (registro, cuenta, checkout): el
 * input caía desalineado del texto y parecía "cuadro vacío sin texto".
 * La facetada usa su propia clase `.search-filters__form-check` (token distinto,
 * no es `.form-check`) con layout flex propio → este fix NO la afecta. */
.form-check { margin-bottom: .125rem; padding-left: 1.5em; }
.form-check .form-check-input { float: left; margin-left: -1.5em; }

/* Disable Hummingbird homepage grid gap (was 2.5rem creating big empty spaces) */
.page-content--home {
  gap: 0;
}

/* Hummingbird's <code>.page-product</code> wrapper sometimes adds extra padding we don't want */
body#product .page-content {
  padding: 0;
}

/* Modal show: BS5 uses display: block + transitions */
.modal.fade.show { display: block; }

/* Carousel indicators (homeslider) */
.carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-white);
  opacity: 0.6;
}
.carousel-indicators .active { opacity: 1; background: var(--primary-color); }


/* ============================================================================
 * END OF BOBGROW STYLESHEET
 * ============================================================================ */


/* ============================================================================
   PRODUCT DETAIL — fix layout descripción 100% + variables prominentes
   ============================================================================ */

/* ---- 1. Descripción/Detalles ocupan TODO el ancho ---- */
/* El HTML real envuelve el accordion en .product__bottom > .product__bottom-left
   (con un -right vacío). Forzamos que -left ocupe el 100% del bottom. */

body#product .product__bottom {
  display: block;
  width: 100%;
  max-width: 1290px;
  margin: var(--spacing-xl) auto 0;
  padding: 0 var(--spacing-md);
}

body#product .product__bottom-left {
  width: 100%;
  max-width: 100%;
  flex: 1 1 100%;
  padding: 0;
}

/* Si Hummingbird tiene .product__bottom-right con contenido, lo dejamos a un lado
   solo cuando NO esté vacío */
body#product .product__bottom-right:empty {
  display: none;
}

body#product .product__bottom-right:not(:empty) {
  margin-top: var(--spacing-lg);
  padding: 0;
}


/* ---- 2. Variables del producto: selector prominente y obvio ---- */

body#product .product__variants,
body#product .product-variants,
body#product .js-product-variants {
  margin: var(--spacing-md) 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

body#product .product-variant {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body#product .product-variant__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

body#product .product-variant__legend {
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--text-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  padding: 0;
}

body#product .product-variant__selected,
body#product .product-variant__label .selected-value {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--primary-color);
  background: var(--primary-semi);
  padding: 2px 10px;
  border-radius: 999px;
}

/* Select prominente — chevron y border visible */
body#product .product-variant select.form-select,
body#product .product-variant .form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: 12px 44px 12px 16px;
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--text-heading);
  background-color: var(--color-white);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300ae69'%3e%3cpath d='M3.204 5L8 10.481 12.796 5H3.204z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
}

body#product .product-variant select.form-select:hover {
  border-color: var(--primary-color);
}

body#product .product-variant select.form-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-semi);
}

/* Si el variant tiene radio buttons en vez de select (BS5 form-check) */
body#product .product-variant__option,
body#product .product-variants__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

body#product .product-variant input[type="radio"],
body#product .product-variant input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

body#product .product-variant input[type="radio"] + label,
body#product .product-variant input[type="checkbox"] + label,
body#product .product-variant .form-check-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  padding: 10px 18px;
  background: var(--color-white);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--text-heading);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

body#product .product-variant input[type="radio"] + label:hover,
body#product .product-variant input[type="checkbox"] + label:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

body#product .product-variant input[type="radio"]:checked + label,
body#product .product-variant input[type="checkbox"]:checked + label {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--color-white);
}


/* ============================================================================
   ============================================================================
   PULIDO EXHAUSTIVO — Todas las páginas de cliente, checkout, CMS, búsqueda,
   marcas y wishlist. Identidad bobgrow consistente (verde + amarillo, cards
   con sombra suave, accent gradient verde en headers).
   ============================================================================
   ============================================================================ */


/* ============================================================================
   PAGE LAYOUT GENÉRICO — page-header + content para todas las páginas customer
   ============================================================================ */

body#authentication #content-wrapper,
body#my-account #content-wrapper,
body#identity #content-wrapper,
body#addresses #content-wrapper,
body#address #content-wrapper,
body#history #content-wrapper,
body#order-detail #content-wrapper,
body#order-follow #content-wrapper,
body#order-return #content-wrapper,
body#order-slip #content-wrapper,
body#discount #content-wrapper,
body#contact #content-wrapper,
body#password #content-wrapper,
body#guest-tracking #content-wrapper,
body#cms #content-wrapper,
body#stores #content-wrapper {
  background: linear-gradient(180deg, #f7fbf9 0%, #ffffff 70%);
  padding: var(--spacing-xl) 0 var(--spacing-xl);
  min-height: 50vh;
}

/* Page header unificado — título grande con accent verde encima */
body#authentication .page-header,
body#my-account .page-header,
body#identity .page-header,
body#addresses .page-header,
body#address .page-header,
body#history .page-header,
body#order-detail .page-header,
body#order-follow .page-header,
body#contact .page-header,
body#password .page-header,
body#guest-tracking .page-header,
body#cms .page-header,
body#stores .page-header,
body#discount .page-header,
body#search .page-header,
body#manufacturer .page-header,
body#supplier .page-header {
  max-width: 1100px;
  margin: 0 auto var(--spacing-lg);
  padding: 0 var(--spacing-md);
  text-align: center;
}
body#authentication .page-title-section,
body#my-account .page-title-section,
body#identity .page-title-section,
body#addresses .page-title-section,
body#address .page-title-section,
body#history .page-title-section,
body#order-detail .page-title-section,
body#order-follow .page-title-section,
body#contact .page-title-section,
body#password .page-title-section,
body#guest-tracking .page-title-section,
body#cms .page-title-section,
body#stores .page-title-section,
body#discount .page-title-section,
body#search .page-title-section,
body#manufacturer .page-title-section,
body#supplier .page-title-section,
body#cms .page-title,
body#authentication .page-title,
body#contact .page-title,
body#my-account .page-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--text-heading);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
body#authentication .page-title-section::before,
body#my-account .page-title-section::before,
body#identity .page-title-section::before,
body#addresses .page-title-section::before,
body#address .page-title-section::before,
body#history .page-title-section::before,
body#order-detail .page-title-section::before,
body#order-follow .page-title-section::before,
body#contact .page-title-section::before,
body#password .page-title-section::before,
body#guest-tracking .page-title-section::before,
body#cms .page-title-section::before,
body#stores .page-title-section::before,
body#search .page-title-section::before,
body#manufacturer .page-title-section::before,
body#supplier .page-title-section::before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  background: var(--nav-gradient);
  border-radius: 999px;
  margin: 0 auto 16px;
}

/* Container general del contenido — más ancho para tablas y forms anchos */
body#my-account #content,
body#identity #content,
body#addresses #content,
body#address #content,
body#history #content,
body#order-detail #content,
body#order-follow #content,
body#contact #content,
body#password #content,
body#guest-tracking #content,
body#cms #content,
body#stores #content,
body#discount #content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}


/* ============================================================================
   FORMS GLOBAL — inputs, selects, textareas, validation
   Aplica a las clases nativas BS5 que PS9 usa en customer/checkout/contact forms.
   ============================================================================ */

.bobgrow-card-form,
body#authentication .form-fields,
body#identity .form-fields,
body#address .form-fields,
body#contact form,
body#password form,
body#guest-tracking form,
body#my-account form {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  padding: clamp(var(--spacing-md), 4vw, var(--spacing-xl));
}

body#identity .form-control,
body#address .form-control,
body#contact .form-control,
body#password .form-control,
body#guest-tracking .form-control,
body#authentication .form-control,
body#order-follow .form-control {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--fs-14);
  color: var(--text-heading);
  background: var(--color-white);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  font-family: inherit;
}

body#identity textarea.form-control,
body#address textarea.form-control,
body#contact textarea.form-control,
body#password textarea.form-control {
  height: auto;
  min-height: 120px;
  padding: 12px 16px;
  resize: vertical;
}

body#identity .form-control:focus,
body#address .form-control:focus,
body#contact .form-control:focus,
body#password .form-control:focus,
body#guest-tracking .form-control:focus,
body#order-follow .form-control:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px var(--primary-semi);
}

body#identity select.form-control,
body#address select.form-control,
body#contact select.form-control,
body#identity .form-select,
body#address .form-select,
body#contact .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23414141' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  padding-right: 40px;
  appearance: none;
  -webkit-appearance: none;
}

body#identity label.form-control-label,
body#address label.form-control-label,
body#contact label.form-control-label,
body#password label.form-control-label,
body#guest-tracking label.form-control-label,
body#order-follow label.form-control-label,
body#identity .form-label,
body#address .form-label,
body#contact .form-label,
body#password .form-label,
body#guest-tracking .form-label,
body#order-follow .form-label {
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--text-heading);
  margin: 0 0 6px;
  display: block;
}

/* Required asterisco rojo */
body#identity .form-control-label.required::after,
body#address .form-control-label.required::after,
body#contact .form-control-label.required::after,
body#authentication .form-label.required::after,
body#identity .form-label.required::after,
body#address .form-label.required::after,
body#contact .form-label.required::after {
  content: " *";
  color: var(--color-sale);
}

/* Form-group: spacing */
body#identity .form-group,
body#address .form-group,
body#contact .form-group,
body#password .form-group,
body#guest-tracking .form-group,
body#order-follow .form-group,
body#identity .mb-3,
body#address .mb-3,
body#contact .mb-3,
body#authentication .mb-3 {
  margin-bottom: var(--spacing-md);
}

/* Botones submit en forms — verde pill consistente */
body#identity button[type="submit"],
body#address button[type="submit"],
body#contact button[type="submit"],
body#password button[type="submit"],
body#guest-tracking button[type="submit"],
body#order-follow button[type="submit"],
body#cart .checkout button[type="submit"],
body#my-account .form button[type="submit"] {
  background: var(--primary-color);
  color: var(--color-white);
  border: none;
  border-radius: 999px;
  padding: 12px 28px;
  font-size: var(--fs-14);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
  box-shadow: 0 4px 14px rgba(0, 174, 105, 0.28);
}
body#identity button[type="submit"]:hover,
body#address button[type="submit"]:hover,
body#contact button[type="submit"]:hover,
body#password button[type="submit"]:hover,
body#guest-tracking button[type="submit"]:hover,
body#order-follow button[type="submit"]:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 174, 105, 0.36);
}

/* Validation messages */
.form-error-message,
.help-block ul,
small.text-danger,
.text-danger {
  color: var(--color-sale);
  font-size: var(--fs-12);
  margin-top: 4px;
}
.form-control.is-invalid,
.form-control:invalid:not(:placeholder-shown):not(:focus) {
  border-color: var(--color-sale);
}

/* Custom checkboxes/radios — pill green when checked */
.custom-checkbox,
.custom-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--fs-14);
  color: var(--text-heading);
  position: relative;
  user-select: none;
}
.custom-checkbox input[type="checkbox"],
.custom-radio input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--primary-color);
}


/* ============================================================================
   REGISTER FORM (body#registration o body#authentication.page-customer-account)
   HTML real: <body id="registration"> + <section class="register-form"> > <form id="customer-form">
   La página /registro carga con body#registration (no authentication).
   ============================================================================ */

body#registration #content-wrapper,
body#registration.page-customer-account #content-wrapper {
  background: linear-gradient(180deg, #f7fbf9 0%, #ffffff 70%);
  padding: var(--spacing-xl) 0;
  min-height: 50vh;
}
body#registration .page-header,
body#registration .page-title-section {
  max-width: 1100px;
  margin: 0 auto var(--spacing-lg);
  padding: 0 var(--spacing-md);
  text-align: center;
}
body#registration .page-title-section {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--text-heading);
  margin: 0;
  letter-spacing: -0.01em;
}
body#registration .page-title-section::before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  background: var(--nav-gradient);
  border-radius: 999px;
  margin: 0 auto 16px;
}

body#registration .register-form,
body#registration section.register-form,
body#registration #customer-form,
body#authentication .register-form,
body#authentication section.register-form,
body#authentication #customer-form {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  padding: clamp(var(--spacing-md), 4vw, var(--spacing-xl));
  max-width: 720px;
  margin: 0 auto;
}

/* Si register-form ya tiene card, no anidamos otra */
body#registration .register-form #customer-form,
body#authentication .register-form #customer-form {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: none;
}

/* Login prompt inferior del register */
body#registration .register-form__login-prompt,
body#authentication .register-form__login-prompt {
  text-align: center;
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px dashed var(--border-color);
  font-size: var(--fs-13);
  color: var(--text-muted);
}
body#registration .register-form__login-prompt a,
body#authentication .register-form__login-prompt a {
  color: var(--primary-color);
  font-weight: 700;
  text-decoration: none;
}
body#registration .register-form__login-prompt a:hover,
body#authentication .register-form__login-prompt a:hover { text-decoration: underline; }

/* Botón submit registro */
body#registration #customer-form .form-control,
body#registration .form-control,
body#registration input[type="email"],
body#registration input[type="password"],
body#registration input[type="text"],
body#registration input[type="date"] {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--fs-14);
  color: var(--text-heading);
  background: var(--color-white);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
body#registration .form-control:focus,
body#registration input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px var(--primary-semi);
}
body#registration label.form-control-label,
body#registration .form-label {
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--text-heading);
  margin: 0 0 6px;
  display: block;
}
body#registration .form-group,
body#registration .mb-3 { margin-bottom: var(--spacing-md); }

body#registration button[type="submit"],
body#registration #customer-form button[type="submit"] {
  background: var(--primary-color);
  color: var(--color-white);
  border: none;
  border-radius: 999px;
  padding: 14px 32px;
  font-size: var(--fs-14);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
  box-shadow: 0 4px 14px rgba(0, 174, 105, 0.28);
}
body#registration button[type="submit"]:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 174, 105, 0.36);
}

/* Privacy/optin blocks */
body#registration .form-fields,
body#registration .form-section {
  margin-bottom: var(--spacing-lg);
}

/* Gender radio Sr/Sra: pill style */
body#authentication .form-group fieldset,
body#authentication #customer-form .radio-inline,
body#authentication input[name="id_gender"] {
  display: inline-flex;
  gap: 6px;
}
body#authentication input[name="id_gender"] + label,
body#authentication input[name="id_gender"] ~ label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: var(--fs-14);
}

/* Date picker */
body#authentication input[type="date"] { padding-right: 12px; }

/* Privacy info block */
body#authentication .privacy {
  background: rgba(0, 174, 105, 0.04);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: var(--fs-12);
  color: var(--text-muted);
  margin-top: var(--spacing-md);
}
body#authentication .privacy h2,
body#authentication .privacy strong {
  font-size: var(--fs-13);
  color: var(--text-heading);
  margin: 0 0 4px;
}

body#authentication #customer-form .form-group {
  margin-bottom: var(--spacing-md);
}

/* Password meter — visual feedback */
.password-requirements {
  background: rgba(0, 174, 105, 0.04);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: var(--fs-12);
  color: var(--text-muted);
  margin-top: 6px;
}
.password-requirements p {
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.password-requirements p:last-child { margin-bottom: 0; }
.password-requirements__icon { font-size: 16px; color: var(--text-muted); }
.password-requirements__icon.valid { color: var(--primary-color); }

/* Bar progress for strength */
.progress-container { margin: 8px 0; }
.progress {
  height: 4px;
  background: var(--border-color);
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: var(--color-sale);
  border-radius: 999px;
  transition: width 0.3s ease, background-color 0.3s ease;
}
.progress-bar[data-strength="weak"] { background: var(--color-sale); }
.progress-bar[data-strength="medium"] { background: var(--badge-yellow); }
.progress-bar[data-strength="strong"] { background: var(--primary-color); }


/* ============================================================================
   FORGOT PASSWORD (body#password)
   ============================================================================ */

body#password #content {
  max-width: 520px;
}
body#password form {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  padding: var(--spacing-xl);
}
body#password .back-to-login,
body#password a[href*="iniciar-sesion"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none;
  margin-top: var(--spacing-md);
}
body#password .back-to-login:hover { text-decoration: underline; }


/* ============================================================================
   MY ACCOUNT DASHBOARD (body#my-account)
   ----------------------------------------------------------------------------
   Grid de cards con iconos. Cada card es un link a una sub-sección.
   ============================================================================ */

body#my-account .links,
body#my-account .account-links,
body#my-account #links-container,
body#my-account ul.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 576px) {
  body#my-account .links,
  body#my-account .account-links,
  body#my-account ul.row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  body#my-account .links,
  body#my-account .account-links,
  body#my-account ul.row {
    grid-template-columns: repeat(3, 1fr);
  }
}

body#my-account .links li,
body#my-account .account-links li {
  list-style: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Card de link account: vertical icono + título + descripción */
body#my-account .links a,
body#my-account .account-links a,
body#my-account li > a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: var(--spacing-lg);
  background: var(--color-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  text-decoration: none;
  color: var(--text-heading);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  position: relative;
  overflow: hidden;
  height: 100%;
}
body#my-account .links a::before,
body#my-account .account-links a::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--nav-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}
body#my-account .links a:hover,
body#my-account .account-links a:hover,
body#my-account li > a:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 174, 105, 0.14);
  border-color: var(--primary-color);
  color: var(--text-heading);
}
body#my-account .links a:hover::before,
body#my-account .account-links a:hover::before {
  transform: scaleX(1);
}

/* Icono dentro de la card — Material icon convertido a círculo verde-tinted */
body#my-account .links a i.material-icons,
body#my-account .account-links a i.material-icons,
body#my-account li > a i.material-icons {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-semi);
  color: var(--primary-color);
  border-radius: var(--radius-circle);
  font-size: 24px;
  transition: background-color 0.18s ease, transform 0.22s ease;
}
body#my-account .links a:hover i.material-icons,
body#my-account .account-links a:hover i.material-icons {
  background: var(--primary-color);
  color: var(--color-white);
  transform: scale(1.08) rotate(-6deg);
}

/* Texto del link */
body#my-account .links a span:not(.material-icons),
body#my-account .account-links a span:not(.material-icons),
body#my-account li > a > span {
  font-size: var(--fs-15);
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1.3;
}

body#my-account .row { margin: 0; }


/* ============================================================================
   ADDRESSES — list + form (body#addresses, body#address)
   ============================================================================ */

body#addresses .addresses-footer,
body#addresses .address-footer,
body#addresses .links {
  margin-top: var(--spacing-lg);
  text-align: center;
}

body#addresses .addresses-footer a,
body#addresses .add-address {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--primary-color);
  color: var(--color-white);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: var(--fs-14);
  box-shadow: 0 4px 14px rgba(0, 174, 105, 0.28);
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
body#addresses .addresses-footer a:hover,
body#addresses .add-address:hover {
  background: var(--primary-hover);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 174, 105, 0.36);
}

/* Address card grid */
body#addresses #content {
  max-width: 1100px;
}
body#addresses .addresses-list,
body#addresses .row.addresses-list,
body#addresses .address-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  margin: 0;
}
@media (min-width: 576px) {
  body#addresses .addresses-list,
  body#addresses .address-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  body#addresses .addresses-list,
  body#addresses .address-list { grid-template-columns: repeat(3, 1fr); }
}

body#addresses .address,
body#addresses article.address {
  background: var(--color-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
body#addresses .address::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--primary-color);
}
body#addresses .address:hover {
  border-color: var(--primary-color);
  box-shadow: 0 6px 18px rgba(0, 174, 105, 0.14);
}

body#addresses .address-header,
body#addresses .address-title {
  font-size: var(--fs-16);
  font-weight: 700;
  color: var(--text-heading);
  margin: 0;
}

body#addresses .address-body,
body#addresses .address address {
  font-style: normal;
  font-size: var(--fs-13);
  color: var(--main-text-color);
  line-height: 1.55;
  flex: 1 1 auto;
  margin: 0;
}

body#addresses .address-footer,
body#addresses .address-actions {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
  margin-top: 12px;
}

body#addresses .address-footer a,
body#addresses .address-actions a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--text-heading);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
body#addresses .address-footer a:hover,
body#addresses .address-actions a:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: var(--primary-semi);
}
body#addresses .address-footer a[href*="delete"] {
  margin-left: auto;
  color: var(--color-sale);
  border-color: rgba(201, 24, 24, 0.30);
}
body#addresses .address-footer a[href*="delete"]:hover {
  background: rgba(201, 24, 24, 0.08);
  border-color: var(--color-sale);
  color: var(--color-sale);
}

/* Address form */
body#address #content {
  max-width: 720px;
}
body#address form {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  padding: var(--spacing-xl);
}


/* ============================================================================
   HISTORIAL / PEDIDOS (body#history) + ORDER DETAIL (body#order-detail)
   ============================================================================ */

body#history #content,
body#order-detail #content { max-width: 1100px; }

body#history .table,
body#history table.table-bordered,
body#history table {
  width: 100%;
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
body#history table thead {
  background: var(--bg-card);
}
body#history table th {
  padding: 14px 16px;
  font-size: var(--fs-12);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}
body#history table td {
  padding: 14px 16px;
  font-size: var(--fs-13);
  color: var(--text-heading);
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}
body#history table tbody tr:last-child td { border-bottom: none; }
body#history table tbody tr:hover { background: var(--primary-semi); }

/* Order status pill */
body#history .label,
body#history .badge,
body#history .order-status,
.order-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* Botones detail (Ver detalle, Repedir, etc) */
body#history table a.btn,
body#history table .btn-primary,
body#history table .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--primary-color);
  color: var(--color-white);
  border: none;
  font-size: var(--fs-12);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
body#history table a.btn:hover { background: var(--primary-hover); color: var(--color-white); }

/* Order detail page */
body#order-detail .order-detail,
body#order-detail .order-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}
@media (min-width: 768px) {
  body#order-detail .order-detail,
  body#order-detail .order-content {
    grid-template-columns: 2fr 1fr;
  }
}

body#order-detail .order-details,
body#order-detail .order-detail__content,
body#order-detail .card,
body#order-detail .box {
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

body#order-detail h3, body#order-detail h4 {
  font-size: var(--fs-16);
  font-weight: 800;
  color: var(--text-heading);
  margin: 0 0 var(--spacing-sm);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}


/* ============================================================================
   CART (body#cart) — line items + summary
   ============================================================================ */

body#cart #content-wrapper {
  background: linear-gradient(180deg, #f7fbf9 0%, #ffffff 70%);
  padding: var(--spacing-xl) 0;
}

/* NO override de .cart-grid display — usamos el row flex de BS5 directamente.
   Sólo ajustamos margen, gap interno y los items children. */
body#cart .cart-grid.row {
  max-width: 1290px;
  margin: 0 auto;
  --bs-gutter-x: var(--spacing-lg);
  --bs-gutter-y: var(--spacing-lg);
}
body#cart .cart-grid__content,
body#cart .cart-grid__aside {
  margin-bottom: var(--spacing-md);
}
/* Mobile: stack columns */
@media (max-width: 991px) {
  body#cart .cart-grid__content,
  body#cart .cart-grid__aside {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

body#cart h1.h1,
body#cart .cart-header h1 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--text-heading);
  margin: 0 0 var(--spacing-md);
}
body#cart h1.h1::before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  background: var(--nav-gradient);
  border-radius: 999px;
  margin-bottom: 14px;
}

/* Lista de items */
body#cart .cart-grid-body,
body#cart .cart-items,
body#cart .card.cart-container,
body#cart .cart-grid__main {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
  padding: 0;
  overflow: hidden;
}

body#cart .cart-item,
body#cart .cart-items-list > li,
body#cart .cart-grid__row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
  align-items: center;
}
body#cart .cart-item:last-child,
body#cart .cart-items-list > li:last-child { border-bottom: none; }

body#cart .product-line__image,
body#cart .cart-item img,
body#cart .cart-line__image {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
}

body#cart .product-line__title,
body#cart .cart-item .product-name {
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--text-heading);
  text-decoration: none;
  line-height: 1.3;
}
body#cart .product-line__title:hover { color: var(--primary-color); }

body#cart .product-line__price,
body#cart .cart-item .product-price {
  font-size: var(--fs-16);
  font-weight: 800;
  color: var(--primary-color);
}

/* Quantity controls */
body#cart .product-quantity,
body#cart .qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-white);
}
body#cart .product-quantity button,
body#cart .qty .btn-touchspin,
body#cart .js-touchspin {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-heading);
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}
body#cart .product-quantity button:hover,
body#cart .qty .btn-touchspin:hover { background: var(--primary-semi); }
body#cart .product-quantity input,
body#cart .qty input.form-control {
  width: 44px;
  height: 32px;
  border: none;
  text-align: center;
  background: transparent;
  font-weight: 700;
  color: var(--text-heading);
}

/* Remove icon */
body#cart .remove-from-cart,
body#cart .cart-item .delete {
  color: var(--text-muted);
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}
body#cart .remove-from-cart:hover {
  background: rgba(201, 24, 24, 0.10);
  color: var(--color-sale);
}

/* Summary panel — sticky en desktop */
body#cart .cart-grid__aside-wrapper,
body#cart .cart-summary,
body#cart .cart-grid__aside {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
  padding: var(--spacing-lg);
  z-index: 1 !important;
}

body#cart .cart-summary__line,
body#cart .cart-summary-line,
body#cart .cart-total {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: var(--fs-13);
}
body#cart .cart-summary__total,
body#cart .cart-total {
  font-size: var(--fs-16);
  font-weight: 800;
  color: var(--text-heading);
  border-bottom: none;
  padding-top: 16px;
}
body#cart .cart-summary__total .value { color: var(--primary-color); }

/* CTA Checkout — verde primary fuerte (no el verde pálido default de BS5) */
body#cart .cart-detailed-actions .btn-primary,
body#cart .checkout .btn-primary,
body#cart .checkout a.btn,
body#cart a[href*="pedido"].btn,
body#cart .text-sm-center .btn-primary,
body#cart .cart-summary__actions .btn,
body#cart .cart-summary__actions a {
  width: 100%;
  padding: 14px 24px !important;
  background: var(--primary-color) !important;
  color: var(--color-white) !important;
  border: none !important;
  border-radius: 999px !important;
  font-size: var(--fs-15) !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 6px 18px rgba(0, 174, 105, 0.32);
  margin-bottom: 0;
}
body#cart .cart-detailed-actions .btn-primary:hover,
body#cart .checkout .btn-primary:hover,
body#cart .cart-summary__actions .btn:hover {
  background: var(--primary-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 174, 105, 0.42);
  color: var(--color-white) !important;
}

/* Continuar comprando link */
body#cart a[href*="comprando"],
body#cart .continue,
body#cart .cart-detailed-actions a.btn:not(.btn-primary) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: transparent;
  color: var(--primary-color);
  border: 1.5px solid var(--primary-color);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
body#cart a[href*="comprando"]:hover {
  background: var(--primary-semi);
  color: var(--primary-color);
}

/* Promo code */
body#cart .promo-code,
body#cart .promo-code-form,
body#cart #_desktop_cart_voucher {
  border-top: 1px dashed var(--border-color);
  padding-top: var(--spacing-md);
  margin-top: var(--spacing-md);
}

/* Empty cart */
body#cart .cart-empty,
body#cart .no-items {
  text-align: center;
  padding: var(--spacing-xl);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
}


/* ============================================================================
   CHECKOUT (body#checkout)
   ============================================================================ */

body#checkout #content-wrapper {
  background: linear-gradient(180deg, #f7fbf9 0%, #ffffff 70%);
  padding: var(--spacing-xl) 0;
}

body#checkout .checkout-process,
body#checkout .checkout-flow {
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}
@media (min-width: 992px) {
  body#checkout .checkout-process,
  body#checkout .checkout-flow {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  }
}

/* Steps */
body#checkout .step,
body#checkout .checkout-step {
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body#checkout .step.-current,
body#checkout .step.js-current-step,
body#checkout .checkout-step.-current {
  border-color: var(--primary-color);
  box-shadow: 0 6px 20px rgba(0, 174, 105, 0.14);
}
body#checkout .step.-complete::after,
body#checkout .checkout-step.-complete::after {
  content: "✓";
  position: absolute;
  top: 22px;
  right: 22px;
  width: 28px;
  height: 28px;
  background: var(--primary-color);
  color: var(--color-white);
  border-radius: var(--radius-circle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

body#checkout .step-title,
body#checkout .step h1,
body#checkout .step h2,
body#checkout .checkout-step__title {
  font-size: var(--fs-18);
  font-weight: 800;
  color: var(--text-heading);
  margin: 0 0 var(--spacing-md);
  display: flex;
  align-items: center;
  gap: 10px;
}
body#checkout .step-title .step-number,
body#checkout .step-number {
  width: 30px;
  height: 30px;
  background: var(--primary-color);
  color: var(--color-white);
  border-radius: var(--radius-circle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-14);
  font-weight: 800;
  flex-shrink: 0;
}

/* Address radio cards in checkout */
body#checkout .address-item,
body#checkout .delivery-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--color-white);
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
body#checkout .address-item:hover,
body#checkout .delivery-option:hover {
  border-color: var(--primary-color);
}
body#checkout .address-item.selected,
body#checkout .delivery-option.selected,
body#checkout .address-item:has(input:checked),
body#checkout .delivery-option:has(input:checked) {
  border-color: var(--primary-color);
  background: var(--primary-semi);
}

/* Payment options */
body#checkout .payment-option,
body#checkout .payment-options .payment-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--color-white);
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
body#checkout .payment-option:hover { border-color: var(--primary-color); }

/* Aside summary */
body#checkout .checkout-summary,
body#checkout .cart-summary {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
  padding: var(--spacing-lg);
  position: sticky;
  top: calc(var(--top-container-height) + 20px);
  z-index: 1 !important;
}

/* Final submit button */
body#checkout .order-confirmation-button,
body#checkout button[type="submit"].btn-primary,
body#checkout #payment-confirmation .btn-primary {
  width: 100%;
  padding: 14px 24px;
  background: var(--primary-color);
  color: var(--color-white);
  border: none;
  border-radius: 999px;
  font-size: var(--fs-15);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 174, 105, 0.32);
  transition: background-color 0.18s ease, transform 0.18s ease;
}
body#checkout .order-confirmation-button:hover,
body#checkout button[type="submit"].btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
}


/* ============================================================================
   ORDER CONFIRMATION (body#order-confirmation)
   ============================================================================ */

body#order-confirmation #content {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

body#order-confirmation .order-confirmation-success,
body#order-confirmation #order-confirmation-heading {
  text-align: center;
  padding: var(--spacing-xl);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  margin-bottom: var(--spacing-lg);
  position: relative;
  overflow: hidden;
}
body#order-confirmation .order-confirmation-success::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--nav-gradient);
}
body#order-confirmation .order-confirmation-success h1,
body#order-confirmation .order-confirmation-success h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--primary-color);
  margin: 0 0 var(--spacing-sm);
}
body#order-confirmation .order-confirmation-success h1::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--primary-color);
  color: var(--color-white);
  border-radius: var(--radius-circle);
  font-size: 28px;
  margin: 0 auto var(--spacing-md);
}


/* ============================================================================
   CMS PAGES (body#cms)
   ============================================================================ */

body#cms #content {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

body#cms .cms-content,
body#cms .cms-block,
body#cms .page-content--cms,
body#cms .rich-text {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  padding: clamp(var(--spacing-lg), 4vw, var(--spacing-xl));
  font-size: var(--fs-16);
  line-height: 1.7;
  color: var(--main-text-color);
}

body#cms .cms-content h2,
body#cms .cms-block h2,
body#cms .rich-text h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.625rem);
  font-weight: 800;
  color: var(--text-heading);
  margin: var(--spacing-lg) 0 var(--spacing-sm);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary-semi);
}
body#cms .cms-content h3,
body#cms .rich-text h3 {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 800;
  color: var(--primary-color);
  margin: var(--spacing-md) 0 8px;
}
body#cms .cms-content h4,
body#cms .rich-text h4 {
  font-size: var(--fs-18);
  font-weight: 700;
  color: var(--text-heading);
  margin: var(--spacing-md) 0 6px;
}
/* PS9 envuelve el contenido CMS en .page-content--cms.rich-text: los selectores
   .cms-content solos no llegaban y las listas quedaban sin viñeta ni sangría. */
body#cms .cms-content p,
body#cms .rich-text p { margin: 0 0 var(--spacing-md); }
body#cms .cms-content a,
body#cms .rich-text a {
  color: var(--primary-color);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
body#cms .cms-content a:hover,
body#cms .rich-text a:hover {
  color: var(--primary-hover);
  text-decoration-thickness: 2px;
}
body#cms .cms-content ul,
body#cms .cms-content ol,
body#cms .rich-text ul,
body#cms .rich-text ol {
  margin: 0 0 var(--spacing-md);
  padding-left: var(--spacing-lg);
}
body#cms .cms-content ul li,
body#cms .cms-content ol li,
body#cms .rich-text ul li,
body#cms .rich-text ol li {
  margin-bottom: 6px;
  list-style: revert;
}
body#cms .cms-content blockquote,
body#cms .rich-text blockquote {
  border-left: 4px solid var(--primary-color);
  background: var(--primary-semi);
  padding: var(--spacing-md) var(--spacing-lg);
  margin: var(--spacing-md) 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
}
body#cms .cms-content img,
body#cms .rich-text img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin: var(--spacing-md) 0;
}


/* ============================================================================
   CONTACT (body#contact)
   ============================================================================ */

body#contact .contact-form,
body#contact #content {
  max-width: 1100px;
  margin: 0 auto;
}

/* NO forzar display:grid sobre body#contact .row — el HTML real usa
   layout-left-column con `.row` flex de BS5 (col-md-4 + col-md-8).
   Si forzamos grid aquí, el flex de los col-* se ignora y los hijos
   colapsan a width:auto (~125px). Mantener el flex nativo. */
body#contact .contact-rich {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}
@media (min-width: 768px) {
  body#contact .contact-rich {
    grid-template-columns: 1fr 1.5fr;
  }
}

/* Sidebar "Información de la tienda" (.ps-contactinfo en HTML real)
   Panel verde gradient con info de la tienda */
body#contact .ps-contactinfo,
body#contact .contact-rich .block,
body#contact .left-column .ps-contactinfo {
  background: linear-gradient(135deg, var(--primary-color) 0%, #008e56 100%);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 174, 105, 0.20);
}
body#contact .ps-contactinfo::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
body#contact .ps-contactinfo::after {
  content: "";
  position: absolute;
  bottom: -60px;
  left: -30px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
body#contact .ps-contactinfo__title {
  color: var(--color-white);
  font-size: var(--fs-18);
  font-weight: 800;
  margin: 0 0 var(--spacing-md);
  position: relative;
  z-index: 1;
}
body#contact .ps-contactinfo__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
body#contact .ps-contactinfo__item .material-icons {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.16);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-circle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 18px;
}
body#contact .ps-contactinfo__info,
body#contact .ps-contactinfo__item address {
  font-style: normal;
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--color-white);
}
body#contact .ps-contactinfo a {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body#contact .ps-contactinfo a:hover { color: var(--badge-yellow); }

/* Contact: el layout-left-column de Hummingbird usa col-md-4 col-lg-3 lo que
   resulta en sidebar muy estrecha (33% tablet, 25% desktop) — el padding 40px
   colapsa el texto. Solución: stack vertical hasta 992px, side-by-side solo
   en desktop con anchos rebalanceados. */
body#contact #wrapper > .row,
body#contact #wrapper #content-wrapper > .row,
body#contact .row {
  --bs-gutter-x: var(--spacing-lg);
}

@media (max-width: 991px) {
  body#contact #left-column,
  body#contact .wrapper__left-column,
  body#contact #center-column,
  body#contact .wrapper__center-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: var(--spacing-md);
  }
}

@media (min-width: 992px) {
  body#contact #left-column,
  body#contact .wrapper__left-column,
  body#contact #left-column.wrapper__left-column {
    flex: 0 0 32% !important;
    max-width: 32% !important;
  }
  body#contact #center-column,
  body#contact .wrapper__center-column,
  body#contact #center-column.wrapper__center-column {
    flex: 0 0 68% !important;
    max-width: 68% !important;
  }
}

/* Padding del panel ps-contactinfo más comedido */
body#contact .ps-contactinfo {
  padding: var(--spacing-lg);
}

/* Contact form card */
body#contact form,
body#contact .contact-form form {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  padding: clamp(var(--spacing-lg), 4vw, var(--spacing-xl));
}


/* ============================================================================
   SEARCH RESULTS (body#search)
   ============================================================================ */

body#search #content-wrapper {
  background: linear-gradient(180deg, #f7fbf9 0%, #ffffff 50%);
  padding: var(--spacing-xl) 0;
}

body#search .page-header h1::before {
  content: "🔍 ";
}
body#search .page-content--search-results .total-products,
body#search .ps_searchbar-results-info {
  text-align: center;
  font-size: var(--fs-13);
  color: var(--text-muted);
  margin-bottom: var(--spacing-lg);
}


/* ============================================================================
   BRANDS / MANUFACTURERS (body#manufacturer) — listado de marcas
   ============================================================================ */

body#manufacturer #content,
body#manufacturer #content-wrapper {
  background: linear-gradient(180deg, #f7fbf9 0%, #ffffff 50%);
  padding: var(--spacing-md) 0 var(--spacing-xl);
}

body#manufacturer .brand__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  list-style: none;
  margin: 0 auto;
  max-width: 1290px;
  padding: 0 var(--spacing-md);
}
@media (min-width: 576px) { body#manufacturer .brand__list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { body#manufacturer .brand__list { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { body#manufacturer .brand__list { grid-template-columns: repeat(5, 1fr); } }

/* Cada brand: card con imagen arriba, nombre debajo */
body#manufacturer .brand,
body#manufacturer .bobgrow-brand-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
  list-style: none;
}
body#manufacturer .brand:hover,
body#manufacturer .bobgrow-brand-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary-color);
  box-shadow: 0 8px 22px rgba(0, 174, 105, 0.14);
}

/* Image area */
body#manufacturer .brand__image,
body#manufacturer .bobgrow-brand-card__image {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: 0;
}
body#manufacturer .brand img,
body#manufacturer .brand__img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}

/* Placeholder leaf + initial cuando no hay imagen */
body#manufacturer .bobgrow-brand-card__placeholder {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-circle);
  background: linear-gradient(135deg, #e9f8f1 0%, #d3f0e1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
body#manufacturer .bobgrow-brand-card__placeholder-icon {
  position: absolute;
  inset: 14px;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  color: var(--primary-color);
  opacity: 0.20;
}
body#manufacturer .bobgrow-brand-card__placeholder-letter {
  position: relative;
  z-index: 1;
  font-size: 26px;
  font-weight: 800;
  color: var(--primary-color);
  font-family: var(--font-family);
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Info: nombre + count */
body#manufacturer .brand__infos,
body#manufacturer .bobgrow-brand-card__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}
body#manufacturer .brand__title,
body#manufacturer .brand__title.stretched-link {
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--text-heading);
  text-decoration: none;
  line-height: 1.3;
  display: block;
  width: 100%;
  word-break: break-word;
}
body#manufacturer .brand:hover .brand__title,
body#manufacturer .bobgrow-brand-card:hover .brand__title { color: var(--primary-color); }

body#manufacturer .brand__products,
body#manufacturer .bobgrow-brand-card__count {
  font-size: var(--fs-12);
  color: var(--text-muted);
  margin: 0;
  font-weight: 600;
}


/* ============================================================================
   WISHLIST PAGE (rlwishlist /module/rlwishlist/wishlist)
   ============================================================================ */

body .customer_wishlist {
  padding: var(--spacing-xl) var(--spacing-md);
  background: linear-gradient(180deg, #f7fbf9 0%, #ffffff 50%);
}
body .customer_wishlist h1 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 800;
  color: var(--text-heading);
  text-align: center;
  margin-bottom: var(--spacing-md);
}
body .customer_wishlist h1::before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  background: var(--nav-gradient);
  border-radius: 999px;
  margin: 0 auto 14px;
}

body .wishlist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  max-width: 1290px;
  margin: 0 auto;
}
@media (min-width: 576px) { body .wishlist { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { body .wishlist { grid-template-columns: repeat(4, 1fr); } }

body .wishlist_product {
  width: 100% !important;
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
body .wishlist_product:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 174, 105, 0.14);
}

body .wishlist_product .delete_wishlist {
  background: var(--color-white);
  border: 1px solid var(--border-color);
}
body .wishlist_product .delete_wishlist:hover {
  background: var(--color-sale);
  border-color: var(--color-sale);
  color: var(--color-white);
}


/* ============================================================================
   STORES (body#stores) — listado de tiendas
   ============================================================================ */

body#stores .stores-list,
body#stores .store-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}
@media (min-width: 768px) {
  body#stores .stores-list,
  body#stores .store-list { grid-template-columns: repeat(2, 1fr); }
}
body#stores .store-item,
body#stores .store-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  padding: var(--spacing-lg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}


/* ============================================================================
   STATUS PILLS / BADGES — orden, pago, envío
   ============================================================================ */

.badge.pill-success,
.badge.bg-success,
[class*="status"][class*="paid"],
[class*="status"][class*="delivered"] {
  background: rgba(0, 174, 105, 0.15) !important;
  color: var(--primary-color) !important;
  border: 1px solid rgba(0, 174, 105, 0.30);
}
.badge.pill-warning,
.badge.bg-warning,
[class*="status"][class*="pending"] {
  background: rgba(255, 211, 53, 0.20) !important;
  color: #8a6d10 !important;
  border: 1px solid rgba(255, 211, 53, 0.50);
}
.badge.pill-danger,
.badge.bg-danger,
[class*="status"][class*="cancel"] {
  background: rgba(201, 24, 24, 0.10) !important;
  color: var(--color-sale) !important;
  border: 1px solid rgba(201, 24, 24, 0.30);
}


/* ============================================================================
   ALERTS — info, success, warning, error
   ============================================================================ */

.alert {
  border-radius: var(--radius-md);
  border-width: 1px;
  border-style: solid;
  padding: 12px 16px;
  font-size: var(--fs-14);
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.alert-success { background: rgba(0, 174, 105, 0.08); color: var(--primary-hover); border-color: rgba(0, 174, 105, 0.30); }
.alert-info    { background: rgba(0, 174, 105, 0.05); color: var(--text-heading); border-color: var(--border-color); }
.alert-warning { background: rgba(255, 211, 53, 0.12); color: #8a6d10; border-color: rgba(255, 211, 53, 0.40); }
.alert-danger  { background: rgba(201, 24, 24, 0.08); color: var(--color-sale); border-color: rgba(201, 24, 24, 0.30); }


/* ============================================================================
   PAGE LOADER (spinner global)
   ============================================================================ */

.page-loader {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(2px);
}
.page-loader__spinner,
.spinner-border {
  border-color: var(--primary-semi);
  border-top-color: var(--primary-color);
}


/* ============================================================================
   RESPONSIVE COMPLETO — todos los breakpoints
   Tablet 768-991 + mobile <767 + small mobile <575
   ============================================================================ */

@media (max-width: 991px) {
  /* Sticky asides drop to non-sticky on tablet+ */
  body#cart .cart-grid__aside-wrapper,
  body#checkout .checkout-summary,
  body#category .bobgrow-sidebar__inner {
    position: static !important;
    max-height: none !important;
  }
}

@media (max-width: 767px) {
  /* Customer page headers más compactos */
  body#authentication .page-header,
  body#my-account .page-header,
  body#cart h1.h1,
  body#cms .page-header,
  body#contact .page-header { padding: 0 var(--spacing-sm); }

  /* Cart items 2 cols (image + content), price wraps */
  body#cart .cart-item,
  body#cart .cart-items-list > li,
  body#cart .cart-grid__row {
    grid-template-columns: 70px 1fr;
    gap: 12px;
  }
  body#cart .product-line__image,
  body#cart .cart-item img { width: 70px; height: 70px; }

  /* Contact 1 col */
  body#contact .contact-rich { grid-template-columns: 1fr; }

  /* Address cards 1 col */
  body#addresses .addresses-list,
  body#addresses .address-list { grid-template-columns: 1fr; }

  /* History table → cards */
  body#history table { font-size: var(--fs-12); }
  body#history table th,
  body#history table td { padding: 10px 8px; }

  /* My-account cards full width */
  body#my-account .links,
  body#my-account .account-links { grid-template-columns: 1fr; }

  /* Forms padding reducido */
  body#identity form,
  body#address form,
  body#contact form,
  body#password form,
  body#authentication .login__form-wrapper,
  body#authentication #login-form,
  body#authentication #customer-form { padding: var(--spacing-lg) var(--spacing-md); }
}

@media (max-width: 575px) {
  /* Page header titles más pequeños */
  body#authentication .page-title-section,
  body#cart h1.h1,
  body#cms .page-title-section,
  body#my-account .page-title-section { font-size: 1.5rem; }

  /* Buttons full width en mobile */
  body#cart .cart-detailed-actions .btn-primary,
  body#checkout .order-confirmation-button,
  body#identity button[type="submit"],
  body#address button[type="submit"],
  body#contact button[type="submit"] { width: 100%; }

  /* Address actions stack */
  body#addresses .address-footer,
  body#addresses .address-actions { flex-wrap: wrap; }

  /* Cart row stack */
  body#cart .cart-item,
  body#cart .cart-items-list > li {
    grid-template-columns: 60px 1fr;
    padding: 12px;
  }
  body#cart .product-line__image,
  body#cart .cart-item img { width: 60px; height: 60px; }
}

/* Touch device tweaks */
@media (hover: none) {
  /* Aumentar tamaño de touch targets */
  .bobgrow-404__cta,
  body#cart .product-quantity button,
  body#cart .remove-from-cart { min-height: 44px; }
}


/* ============================================================================
   PRINT styles — facturas/órdenes imprimibles limpias
   ============================================================================ */

@media print {
  #header, #footer, .bobgrow-nav-bar, .footer__newsletter,
  .bobgrow-card__wishlist, .product__wishlist,
  .bobgrow-cart-btn, .bobgrow-header-icons,
  .bobgrow-404, .alert { display: none !important; }
  body, #wrapper { background: white !important; }
  .order-detail, .cart-summary, table { box-shadow: none !important; border: 1px solid #ccc !important; }
}



/* ============================================================================
   CartModal — popup "producto añadido a la cesta" (estilo Shopify)
   ----------------------------------------------------------------------------
   Overlay inyectado en <body> por CartModal (header.js) con el markup de
   themes/bobgrow/modules/ps_shoppingcart/modal.tpl. Va FUERA de #wrapper, así
   que NO se prefija con #wrapper. z-index por encima de age-gate/cookies.
   ============================================================================ */

.bobgrow-cartmodal-open { overflow: hidden; }

.bobgrow-cartmodal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 24, 16, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .22s ease;
}
.bobgrow-cartmodal-overlay.is-visible { opacity: 1; }

.bobgrow-cartmodal {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
  padding: 30px 28px 24px;
  text-align: left;
  transform: translateY(16px) scale(.97);
  opacity: 0;
  transition: transform .28s cubic-bezier(.2, .8, .3, 1), opacity .28s ease;
}
.is-visible .bobgrow-cartmodal { transform: translateY(0) scale(1); opacity: 1; }

.bobgrow-cartmodal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f3f4f6;
  color: #4b5563;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.bobgrow-cartmodal__close:hover { background: #e5e7eb; color: #181818; transform: rotate(90deg); }

.bobgrow-cartmodal__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 36px 18px 0;
}
.bobgrow-cartmodal__check {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary-semi, rgba(0, 174, 105, .15));
  color: var(--primary-color, #00ae69);
}
.bobgrow-cartmodal__title {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.2;
  color: #181818;
}

.bobgrow-cartmodal__product {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid #eef0f2;
  border-bottom: 1px solid #eef0f2;
}
.bobgrow-cartmodal__thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  border-radius: 12px;
  overflow: hidden;
  background: #f7f8f9;
  border: 1px solid #eef0f2;
}
.bobgrow-cartmodal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bobgrow-cartmodal__details { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 2px; }
.bobgrow-cartmodal__name {
  font-weight: 600;
  font-size: .98rem;
  color: #181818;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bobgrow-cartmodal__attr,
.bobgrow-cartmodal__qty { font-size: .82rem; color: #6b7280; }
.bobgrow-cartmodal__price {
  margin-top: 4px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--primary-color, #00ae69);
}

.bobgrow-cartmodal__summary { padding: 16px 2px 4px; }
.bobgrow-cartmodal__sumline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .9rem;
  color: #4b5563;
  margin-bottom: 8px;
}
.bobgrow-cartmodal__sumline--total {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid #eef0f2;
  font-size: 1.05rem;
  font-weight: 700;
  color: #181818;
}
.bobgrow-cartmodal__sumval { font-variant-numeric: tabular-nums; }

.bobgrow-cartmodal__footer { display: flex; gap: 12px; margin-top: 18px; }
.bobgrow-cartmodal__btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  font-weight: 600;
  font-size: .95rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .08s ease;
}
.bobgrow-cartmodal__btn:active { transform: translateY(1px); }
.bobgrow-cartmodal__btn--ghost {
  background: #fff;
  border: 1.5px solid #d6dadf;
  color: #374151;
}
.bobgrow-cartmodal__btn--ghost:hover { border-color: #b9bfc6; background: #f9fafb; color: #181818; }
.bobgrow-cartmodal__btn--primary {
  background: var(--primary-color, #00ae69);
  border: 1.5px solid var(--primary-color, #00ae69);
  color: #fff;
}
.bobgrow-cartmodal__btn--primary:hover {
  background: var(--primary-hover, #008e56);
  border-color: var(--primary-hover, #008e56);
  color: #fff;
}

.bobgrow-cartmodal__viewcart {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-size: .9rem;
  font-weight: 600;
  color: var(--primary-color, #00ae69);
  text-decoration: none;
}
.bobgrow-cartmodal__viewcart:hover { color: var(--primary-hover, #008e56); text-decoration: underline; }

@media (max-width: 480px) {
  .bobgrow-cartmodal { padding: 26px 18px 20px; border-radius: 16px; }
  .bobgrow-cartmodal__footer { flex-direction: column-reverse; }
  .bobgrow-cartmodal__title { font-size: 1.08rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bobgrow-cartmodal-overlay,
  .bobgrow-cartmodal { transition: none; }
}