/* ============================================================
   Echando Raíces — cabecera de una sola fila
   Menú (izquierda) | Logo (centro) | Iconos (derecha)
   Añadido 2026-07-16. No forma parte del tema base de PrestaShop:
   revisar tras cada actualización del tema por si cambian los
   selectores de los módulos usados aquí (mainmenu, searchbar,
   customersignin, shoppingcart).
   ============================================================ */

.header-top-row {
  padding-top: 14px;
  padding-bottom: 14px;
}

/* --- Logo central: texto de reserva mientras no haya logo definitivo --- */
.header-logo-col .logo-text-fallback {
  display: inline-block;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: inherit;
  text-decoration: none;
  line-height: 1;
}
.header-logo-col .logo-text-fallback:hover {
  opacity: 0.85;
  text-decoration: none;
}
.header-logo-col img {
  max-height: 40px;
}

/* --- Menú principal: quitar margen extra a la izquierda --- */
.header-menu-col #_desktop_top_menu {
  margin: 0;
}

/* Títulos de categorías en el menú: solo mayúscula inicial (norma de marca),
   no todo mayúsculas. El texto ya viene formateado así desde el nombre
   guardado en cada categoría (ver Catálogo > Categorías).
   !important necesario: el tema trae la regla
   "#header .header-top a[data-depth='0']" con más especificidad
   (id + 2 clases/atributos) que una simple #top-menu a con una clase. */
.header-menu-col #top-menu a {
  text-transform: none !important;
}

/* --- Iconos (buscador, cuenta, carrito) alineados a la derecha --- */
.header-icons-col {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
}
.header-icons-col #search_widget,
.header-icons-col #_desktop_user_info,
.header-icons-col #_desktop_cart {
  display: flex;
  align-items: center;
}

/* Solo icono: ocultar las etiquetas de texto ("Iniciar sesión", "Carrito") */
.header-icons-col span.hidden-sm-down {
  display: none !important;
}

/* Buscador compacto para que quepa junto a los otros iconos */
.header-icons-col #search_widget {
  max-width: 200px;
}

/* ------------------------------------------------------------
   Desplegable de subcategorías del menú (hover sobre CBD, etc.):
   el tema trae fondo blanco por defecto, ilegible con el texto
   claro que usamos sobre fondo oscuro. Lo oscurecemos para que
   combine con el resto de la cabecera.
   ------------------------------------------------------------ */
#header .popover.sub-menu {
  background-color: var(--hr-color-fondo-oscuro, #221200);
  border: 1px solid var(--hr-color-borde-oscuro, rgba(230, 218, 204, 0.25));
  /* Sistema de bordes redondeados — sitio completo (2026-07-29),
     validado con Victoria sobre la propuesta del carrito. Mismo
     patrón "var con fallback" que el resto de este archivo, sin
     :root propio. */
  border-radius: var(--hr-radius-card, 10px);
}

/* Corrección 2026-07-17: el tema pone cada subcategoría en "float: left"
   con un ancho fijo, lo que las reparte en 2 columnas cuando hay varias
   (p. ej. Cultivo y jardinería, con 7 subcategorías). Victoria pidió que
   vayan todas en una sola columna. */
#header .popover.sub-menu li.category {
  float: none;
  display: block;
  width: 100%;
}

/* Corrección 2026-07-17: los enlaces del desplegable estaban en 14px,
   por debajo del mínimo de legibilidad pedido (16px / 1rem). Las
   tarjetas de subcategoría de la página de categoría (#subcategories
   .subcategory-name) ya estaban en 16px, no necesitan cambio. */
#header .popover.sub-menu li.category a {
  font-size: 16px;
}

/* ------------------------------------------------------------
   Cabecera fija que se oculta al hacer scroll hacia abajo y
   reaparece al subir (ver custom-header.js). Incluye la franja
   de envíos gratis, que ahora vive dentro de la cabecera.
   ------------------------------------------------------------ */
#header {
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: transform 0.3s ease;
}

#header.hr-header-hidden {
  transform: translateY(-100%);
}

/* Corrección 2026-07-17: línea blanca del tema entre la franja de
   envíos gratis y el menú (borde inferior por defecto de .header-nav,
   pensado para un header claro, no combina con el fondo oscuro). */
.header-nav {
  border-bottom: none !important;
}