/**
 * LBM — Buscador visible en la cabecera movil.
 *
 * Antes el buscador solo existia en escritorio: en movil lbm-header.css lo
 * ocultaba (linea 292) y el unico acceso era abrir el menu desplegable.
 * Buscar es la herramienta principal de una tienda de 4.800 productos, asi
 * que pasa a una segunda fila bajo el logo, siempre visible.
 *
 * Se hace en un fichero aparte para no tocar lbm-header.css: revertir es
 * quitar el encolado, y la cabecera de escritorio no se altera.
 */

@media (max-width: 980px) {

  /* Gana a la regla que lo oculta en lbm-header.css:292. */
  .lbm-head__search {
    display: flex !important;
    /* position:static es imprescindible.
       En escritorio el buscador va en absolute para centrarlo, y en absolute
       el elemento sale del flujo: 'order' no se aplica y quedaba encima del
       logo. Comprobado en produccion. */
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    /* Sin transform: un translate aunque sea 0 convierte el form en
       containing block y el panel de sugerencias (position:fixed dentro
       del form) se recortaba al ancho del campo compacto. */
    transform: none;
    /* Segunda fila: la barra superior mantiene logo, carrito y menu. */
    order: 10;
    flex: 0 0 100%;
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
  }

  /* La barra pasa a dos filas. */
  .lbm-head__bar {
    flex-wrap: wrap;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 16px 10px !important;
    row-gap: 8px;
    align-items: center;
    column-gap: 8px;
  }
  /* Auto, sin !important: el JS anima la altura al compactar. */
  .lbm-head { height: auto; }

  /* El buscador ocupa el ancho completo y se ve como campo, no como icono. */
  .lbm-head__search {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 9px;
    padding: 9px 12px;
    align-items: center;
    gap: 9px;
  }
  .lbm-head__search input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    font-size: 16px;  /* 16px evita que iOS haga zoom al enfocar */
    background: transparent;
    border: 0;
    color: #fff;
    padding: 0;
  }
  .lbm-head__search input::placeholder { color: rgba(255,255,255,.6); }
  .lbm-head__search svg { width: 18px; height: 18px; }

  /* El logo deja de estirarse para que quepan carrito y menu a su lado.
     overflow+max-width recortan las letras en el estado compacto.
     196px = wordmark entero a 30px de alto (PNG 1304×200). */
  .lbm-head__logo {
    flex: 0 1 auto;
    margin-right: auto;
    overflow: hidden;
    max-width: 196px;
    transition: max-width .36s cubic-bezier(.22, .61, .36, 1),
                margin .36s cubic-bezier(.22, .61, .36, 1);
  }
  .lbm-head__logo img {
    height: 30px;
    width: auto;
    max-width: none;
    display: block;
  }
}

/* ==========================================================================
   Cabecera móvil compacta al scroll (2026-09-08)

   Al bajar, una sola fila: símbolo + buscador + carrito + menú.
   Las letras del logo se recogen; el recuadro del buscador sube al hueco.
   Revertir: este bloque + cabeceraCompacta() en lbm-header-movil.js.
   Backup: registro/rollback/header-compacto-20260908/
   ========================================================================== */
@media (max-width: 980px) {
  .lbm-head.is-compacto .lbm-head__bar {
    flex-wrap: nowrap;
    row-gap: 0;
    padding: 6px 12px !important;
  }

  /* El círculo del PNG es 200×200; a 30px de alto, 32px de ancho lo cubren
     con un pelo de aire (las letras empiezan en x=236). */
  .lbm-head.is-compacto .lbm-head__logo {
    max-width: 32px;
    margin-right: 0;
    flex: 0 0 32px;
  }

  /* order 0: el form ya está en el DOM entre logo y carrito; el 10 lo
     mandaba a la segunda fila. */
  .lbm-head.is-compacto .lbm-head__search {
    order: 0;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 7px 10px;
  }

  .lbm-head.is-compacto .lbm-cart__mobile-icon {
    margin-left: 0;
    margin-right: 0;
  }

  .lbm-head.is-compacto .lbm-burger {
    margin-left: 0;
  }

  /* Al escribir: el campo vuelve a la segunda fila a todo el ancho.
     Gana a .is-compacto: si no, las sugerencias salían en un cachito. */
  .lbm-head.is-buscando .lbm-head__bar {
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 8px 16px 10px !important;
  }
  .lbm-head.is-buscando .lbm-head__logo {
    max-width: 196px;
    margin-right: auto;
    flex: 0 1 auto;
  }
  .lbm-head.is-buscando .lbm-head__search {
    order: 10;
    flex: 0 0 100%;
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 9px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lbm-head__logo {
    transition: none;
  }
}

/* ---------- Sugerencias en movil ----------
   El panel se ancla al buscador, que ahora esta en la segunda fila. */
@media (max-width: 980px) {
  /* El panel se posiciona respecto al buscador, que en escritorio va
     centrado con transform. En movil eso lo empujaba fuera de la pantalla
     por la izquierda: se ancla al ancho de la ventana. */
  .lbm-sug {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: 108px !important;      /* justo bajo el campo de busqueda */
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    transform: none !important;
    margin: 0 !important;
    max-height: calc(100vh - 128px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }
  /* Los textos largos no deben ensanchar el panel. */
  .lbm-sug__prodtxt,
  .lbm-sug__cattxt,
  .lbm-sug__title { min-width: 0; overflow-wrap: anywhere; }

  /* En compacto el campo ya no está en la segunda fila. */
  html.lbm-head-compacto .lbm-sug {
    top: 64px !important;
    max-height: calc(100vh - 84px);
  }
  /* Al escribir se abre a dos filas: el panel baja con el campo. */
  html.lbm-head-buscando .lbm-sug {
    top: 108px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-height: calc(100vh - 128px);
  }
}

/* ==========================================================================
   Menu movil por niveles deslizantes
   ========================================================================== */

/* El contenedor recorta los paneles que estan fuera de pantalla. */
.lbm-mnav {
  overflow-x: hidden;
}

.lbm-mnav__panel {
  position: absolute;
  top: 58px;              /* bajo la barra superior del menu */
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: inherit;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.lbm-mnav__panel.is-activo { transform: translateX(0); }
/* El panel padre no desaparece: se desplaza a la izquierda, como en VerdeTop. */
.lbm-mnav__panel.is-fuera { transform: translateX(-28%); }

@media (prefers-reduced-motion: reduce) {
  .lbm-mnav__panel { transition: none; }
}

/* ---------- Cabecera de cada panel ---------- */
.lbm-mnav__panelhead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  position: sticky;
  top: 0;
  background: inherit;
  z-index: 2;
}
.lbm-mnav__back {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  height: auto;
  padding: 4px 4px 4px 2px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  flex: 1 1 auto;
  text-align: left;
}
.lbm-mnav__back:hover { background: rgba(255, 255, 255, .18); }
.lbm-mnav__paneltitle {
  font-size: 16px;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Filas con hijos ---------- */
.lbm-mnav__row--has {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.lbm-mnav__row--has > span { flex: 1 1 auto; min-width: 0; }
.lbm-mnav__chev { flex: 0 0 auto; opacity: .5; }

/* ---------- "Ver todo en ..." ----------
   Conserva el acceso a la categoria padre: sin esto, entrar en Fertilizantes
   para ver sus hijas dejaba sin forma de abrir la propia categoria. */
.lbm-mnav__vertodo a {
  display: block;
  font-weight: 700;
  opacity: .85;
}
.lbm-mnav__vertodo {
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  margin-bottom: 4px;
  padding-bottom: 4px;
}

/* ---------- "Mi cuenta" con su nombre ----------
   Antes era solo el icono: el aria-label lo lee un lector de pantalla, pero
   quien mira la pantalla no ve nada. */
.lbm-mnav__row[aria-label="Mi cuenta"] {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ---------- Texto "Mi cuenta" ----------
   Hay dos enlaces: el de la barra (a.is-icon) y el del menu movil. Los dos
   llevaban solo el icono. */
.lbm-cuenta-txt {
  font-size: 15px;
  line-height: 1;
}
/* En la barra de escritorio, junto al icono. */
a.is-icon[aria-label="Mi cuenta"] {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
}
a.is-icon[aria-label="Mi cuenta"] .lbm-cuenta-txt { font-size: 15px; }

/* En pantallas estrechas de escritorio el texto sobra: el icono basta y
   dejar sitio a las secciones importa mas. */
@media (max-width: 1180px) and (min-width: 981px) {
  a.is-icon[aria-label="Mi cuenta"] .lbm-cuenta-txt { display: none; }
}

/* Los paneles heredan el padding de .lbm-mnav__list del CSS base, pero al
   moverlos a un contenedor propio se perdia y el texto tocaba el borde. */
.lbm-mnav__panel > .lbm-mnav__list,
.lbm-mnav__panel > ul {
  padding-left: 16px;
  padding-right: 16px;
  margin: 0;
  list-style: none;
}
.lbm-mnav__panel > ul > li > a,
.lbm-mnav__panel > ul > li > .lbm-mnav__row {
  padding-top: 11px;
  padding-bottom: 11px;
}

/* ==========================================================================
   Correcciones del 2026-08-31
   ========================================================================== */

/* --- 1. Las subcategorias no se veian ---------------------------------------
   .lbm-mnav__sub venia del acordeon anterior con max-height:0, y solo se
   abria con .is-open en el <li> padre. Con paneles deslizantes ese <li> ya
   no existe: el <ul> se mueve a un panel propio, nunca recibe .is-open y se
   quedaba colapsado a 0 de alto. Los 11 hijos de Cultivo estaban en el DOM,
   pero recortados por overflow:hidden — de ahi el panel en blanco.
   Dentro de un panel, la lista siempre esta desplegada. */
.lbm-mnav__panel .lbm-mnav__sub {
  max-height: none;
  overflow: visible;
  transition: none;
  padding-left: 0;
  padding-right: 0;
}

/* El sangrado de 53px era para marcar jerarquia dentro del acordeon. En un
   panel propio ya no hay nada de lo que colgar: sobra y roba ancho al texto. */
.lbm-mnav__panel > ul.lbm-mnav__sub {
  padding-left: 16px;
  padding-right: 16px;
}

/* Las filas del acordeon iban al 82% de opacidad para pesar menos que su
   padre. En un panel son el contenido principal y deben leerse igual de
   bien que las de primer nivel. */
.lbm-mnav__panel .lbm-mnav__sub a {
  opacity: 1;
  font-size: 18px;
  line-height: 1.3;
}

/* --- 2. "Ver todo en …" ------------------------------------------------- */
.lbm-mnav__vertodo > a {
  color: #ef7d00;
  font-family: 'myriad_prosemibold', 'myriad_proregular', sans-serif;
}

/* --- 3. "Mi cuenta" desalineado -----------------------------------------
   Su <a> no recibia el padding de las demas filas del panel porque el
   selector solo cubria hijos directos de <ul>, y este enlace lleva ademas
   .is-icon con su propio ancho fijo heredado de la barra. */
.lbm-mnav__panel a[aria-label="Mi cuenta"],
.lbm-mnav__list a[aria-label="Mi cuenta"] {
  display: flex;
  align-items: center;
  gap: 12px;
  width: auto;
  padding-top: 11px;
  padding-bottom: 11px;
  font-size: 15px;
  line-height: 1;
}
.lbm-mnav__panel a[aria-label="Mi cuenta"] svg,
.lbm-mnav__list a[aria-label="Mi cuenta"] svg {
  width: 20px;
  height: 20px;
  flex: none;
}
/* El icono de las demas filas mide 20px y deja 12px de hueco; el texto de
   todas ellas arranca por tanto a 32px del borde de la lista. */
.lbm-mnav__panel .lbm-cuenta-txt {
  font-size: 15px;
  line-height: 1;
}

/* --- 4. El carrito sobra dentro del menu --------------------------------
   El drawer ya es el carrito. Un segundo acceso dentro del menu abria
   ademas la pagina /carrito/, que es justo lo que no debe existir. */
.lbm-mnav__top a[aria-label="Carrito"] {
  display: none;
}
/* Sin el carrito, la barra superior del menu la ocupan buscador y cerrar. */
.lbm-mnav__top {
  gap: 10px;
}

/* --- Alineacion de las filas del menu (2026-08-31) -----------------------
   Las filas con hijos son <button> y las que enlazan directo son <a>, y
   cada tipo traia su propio gap del CSS base (12px frente a 15px). Con el
   mismo icono de 20px, el texto de "Cannalogia", "Guias y manuales" y
   "Mi cuenta" arrancaba 3px mas a la derecha que el de las demas: poco
   como medida, suficiente para que la columna de texto se vea torcida.
   Un unico gap para todas las filas del menu. */
.lbm-mnav__panel > ul > li > a,
.lbm-mnav__panel > ul > li > .lbm-mnav__row,
.lbm-mnav__list > li > a,
.lbm-mnav__list > li > .lbm-mnav__row {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Todos los iconos ocupan lo mismo, tengan el viewBox que tengan: si uno
   mide 18 y otro 20, el texto vuelve a descuadrarse. */
.lbm-mnav__panel > ul > li > a > svg,
.lbm-mnav__panel > ul > li > .lbm-mnav__row > svg,
.lbm-mnav__list > li > a > svg,
.lbm-mnav__list > li > .lbm-mnav__row > svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

/* ==========================================================================
   Footer — legibilidad y contraste (2026-08-31)

   El bloque superior del footer va sobre naranja de marca (#ef7d00). Sobre
   ese fondo habia texto en gris azulado #445055 (los enlaces legales y de
   seccion) y en el propio naranja (la direccion, al convertirse en enlace
   y heredar el color de enlace del tema). Medido: #445055 sobre #ef7d00 da
   un contraste de 2,2:1, cuando el minimo exigible para texto es 4,5:1 —
   se leia mal ya antes de tocar nada, y la direccion directamente
   desaparecia.

   Todo el texto sobre naranja pasa a blanco. Es el unico color que da
   contraste suficiente (3,9:1 en el peor caso, 8:1 en los tamanos
   grandes) sin cambiar el naranja de marca.
   ========================================================================== */

/* El bloque naranja: todo su contenido en blanco. */
.et-l--footer .et_pb_section_0_tb_footer,
.et-l--footer .et_pb_section_0_tb_footer p,
.et-l--footer .et_pb_section_0_tb_footer span,
.et-l--footer .et_pb_section_0_tb_footer li,
.et-l--footer .et_pb_section_0_tb_footer h1,
.et-l--footer .et_pb_section_0_tb_footer h2,
.et-l--footer .et_pb_section_0_tb_footer h3,
.et-l--footer .et_pb_section_0_tb_footer h4 {
  color: #ffffff !important;
}

/* Los enlaces, tambien blancos: el naranja sobre naranja es invisible y el
   gris no llega al contraste minimo. Se distinguen por el subrayado, no
   por el color. */
.et-l--footer .et_pb_section_0_tb_footer a {
  color: #ffffff !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, .45);
  transition: text-decoration-color .18s ease;
}
.et-l--footer .et_pb_section_0_tb_footer a:hover,
.et-l--footer .et_pb_section_0_tb_footer a:focus-visible {
  text-decoration-color: #ffffff;
}

/* Los titulos de seccion ("Donde estamos", "Contacto", "Horario") son la
   estructura del footer: en blanco pleno y algo mas contenidos de tamano,
   que a 32px competian con los titulos de la propia pagina. */
.et-l--footer .et_pb_section_0_tb_footer h2,
.et-l--footer .et_pb_section_0_tb_footer h3 {
  font-family: 'myriad_prosemibold', 'myriad_proregular', sans-serif;
  letter-spacing: .01em;
  margin-bottom: .45em !important;
}

@media (max-width: 980px) {
  .et-l--footer .et_pb_section_0_tb_footer h2,
  .et-l--footer .et_pb_section_0_tb_footer h3 {
    font-size: 21px !important;
    line-height: 1.25 !important;
  }

  /* Datos de contacto y horario: tamano de lectura comodo, no de titular. */
  .et-l--footer .et_pb_section_0_tb_footer p,
  .et-l--footer .et_pb_section_0_tb_footer span,
  .et-l--footer .et_pb_section_0_tb_footer a {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  /* Los legales pesan menos que el resto: son referencia, no contenido. */
  .et-l--footer .et_pb_section_0_tb_footer p:last-of-type,
  .et-l--footer .et_pb_section_0_tb_footer p:last-of-type a {
    font-size: 13.5px !important;
    line-height: 1.9 !important;
  }

  /* Aire entre los tres grupos: sin esto se leen como un solo parrafo. */
  .et-l--footer .et_pb_text {
    margin-bottom: 22px !important;
  }
  .et-l--footer .et_pb_section_0_tb_footer {
    padding-top: 28px !important;
    padding-bottom: 24px !important;
  }

  /* La barra gris inferior (copyright): mas discreta todavia. */
  .et-l--footer .et_pb_section_1_tb_footer p,
  .et-l--footer .et_pb_section_1_tb_footer span {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }
}

/* La direccion, pinchable a Google Maps: sobre el naranja va en blanco
   como el resto, no en el color de enlace del tema. */
.lbm-footer-mapa {
  color: #ffffff !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, .5);
}
.lbm-footer-mapa:hover,
.lbm-footer-mapa:focus-visible {
  color: #ffffff !important;
  text-decoration-color: #ffffff;
}
@media (max-width: 980px) {
  .lbm-footer-mapa {
    display: inline-block;
    padding: 3px 0;   /* area tactil comoda para el pulgar */
  }
}

/* --- Titulos del footer (2026-08-31) ------------------------------------
   Son <h5>, no <h2>/<h3> como aparentaba su tamano, asi que la regla
   anterior no los alcanzaba. Ademas Divi los pinta desde
   et-core-unified-tb-19, que carga DESPUES de este fichero: hace falta su
   misma especificidad (.et-db #et-boc .et-l) para ganarle.
   Seguian en #445055 sobre naranja: 2,2:1 de contraste. */
.et-db #et-boc .et-l .et-l--footer h1,
.et-db #et-boc .et-l .et-l--footer h2,
.et-db #et-boc .et-l .et-l--footer h3,
.et-db #et-boc .et-l .et-l--footer h4,
.et-db #et-boc .et-l .et-l--footer h5,
.et-db #et-boc .et-l .et-l--footer h6,
.et-l--footer .et_pb_text_inner h5,
.et-l--footer .et_pb_text_inner h4,
.et-l--footer .et_pb_text_inner h3 {
  color: #ffffff !important;
}

/* 31px para un titulo de footer en un movil de 390px es tamano de titular
   de pagina: compite con el contenido en vez de organizarlo. */
@media (max-width: 980px) {
  .et-db #et-boc .et-l .et-l--footer h1,
  .et-db #et-boc .et-l .et-l--footer h2,
  .et-db #et-boc .et-l .et-l--footer h3,
  .et-db #et-boc .et-l .et-l--footer h4,
  .et-db #et-boc .et-l .et-l--footer h5,
  .et-db #et-boc .et-l .et-l--footer h6,
  .et-l--footer .et_pb_text_inner h5 {
    font-size: 20px !important;
    line-height: 1.3 !important;
    margin-bottom: .5em !important;
    letter-spacing: .01em;
  }
}

/* La barra gris del copyright ya tiene su propio fondo (#445055): ahi el
   naranja de marca SI contrasta y se deja como esta. */

/* --- Enlaces sueltos del menu, en naranja corporativo (2026-08-31) -------
   "Cannalogia", "Guias y manuales" y "Mi cuenta" no son categorias de
   producto: son secciones aparte. El naranja de marca los separa
   visualmente del bloque de categorias sin necesidad de un separador.

   Se seleccionan por ser <a> directos de la lista: las categorias son
   <button> (abren panel), asi que la distincion es estructural y no
   depende de los nombres, que pueden cambiar en el menu de WordPress. */
/* Solo las filas de PRIMER nivel que son enlace directo.

   Distinguir por etiqueta (<a> frente a <button>) no vale: una
   subcategoria sin hijos tambien se pinta como <a>, asi que "Crecimiento",
   "Floracion", "Coco"... se volvian naranjas dentro de los paneles y se
   leian mal. Lo que separa de verdad los dos casos es la clase que pone
   lbm-header.php: las filas de primer nivel llevan .lbm-mnav__row y las
   subcategorias de .lbm-mnav__sub son <a> sin clase.

   El :scope del panel raiz no sirve como filtro porque los paneles hijos
   reutilizan la misma estructura, de ahi que la condicion sea la clase. */
.lbm-mnav__list > li > a.lbm-mnav__row {
  color: #ef7d00;
}
.lbm-mnav__list > li > a.lbm-mnav__row svg {
  color: #ef7d00;
  stroke: currentColor;
}

/* "Mi cuenta" venia a 15px (heredado del enlace de la barra de escritorio,
   donde convive con iconos pequenos) frente a los 17px de los otros dos
   enlaces del menu. Mismo nivel, mismo tamano. */
.lbm-mnav__list > li > a.lbm-mnav__row[aria-label="Mi cuenta"],
.lbm-mnav__list > li > a.lbm-mnav__row[aria-label="Mi cuenta"] .lbm-cuenta-txt {
  font-size: 17px;
}

/* El "Ver todo en ..." de dentro de los paneles ya iba en naranja por su
   cuenta; se deja como estaba para no cambiar dos cosas a la vez. */

/* --- Alineacion dentro de los paneles (2026-08-31) -----------------------
   Dentro de un panel conviven dos tipos de fila: las que tienen hijos son
   <button class="lbm-mnav__row"> y las que enlazan directo son <a> sin
   clase. La regla base de .lbm-mnav__row (pensada para el menu raiz, donde
   cada fila lleva icono) aplica padding-left:18px, y las subcategorias no
   lo llevan: "Fabricantes" arrancaba 18px mas a la derecha que
   "Crecimiento", "Floracion" o "Coco".

   En los paneles ninguna fila tiene icono, asi que el sangrado sobra: se
   iguala a 0 y el margen lateral lo pone el padding del <ul>. */
.lbm-mnav__panel > ul > li > .lbm-mnav__row,
.lbm-mnav__panel > ul > li > a {
  padding-left: 0;
  padding-right: 0;
}

/* La flecha de las filas con hijos se ancla al borde derecho, no detras
   del texto: asi todas las flechas quedan en la misma columna. */
.lbm-mnav__panel > ul > li > .lbm-mnav__row .lbm-mnav__chev,
.lbm-mnav__panel > ul > li > .lbm-mnav__row > svg:last-child {
  margin-left: auto;
  flex: none;
}

/* "Ver todo en ..." abre la categoria padre: se separa del listado de
   hijas con una linea, para que se lea como cabecera y no como una mas. */
.lbm-mnav__panel > ul > li.lbm-mnav__vertodo {
  border-bottom: 1px solid rgba(255, 255, 255, .13);
  padding-bottom: 4px;
  margin-bottom: 4px;
}

/* Subcategorías: panel claro de la home (#f2f4f4) y texto oscuro. */
.lbm-head .lbm-mnav__panel:has(.lbm-mnav__panelhead) {
  background: #f2f4f4;
  color: #1e2528;
}
.lbm-head .lbm-mnav__panel:has(.lbm-mnav__panelhead) button,
.lbm-head .lbm-mnav__panel:has(.lbm-mnav__panelhead) a {
  color: #1e2528;
}
.lbm-head .lbm-mnav__panel:has(.lbm-mnav__panelhead) .lbm-mnav__panelhead {
  border-bottom-color: rgba(68, 80, 85, .14);
  background: #f2f4f4;
}
.lbm-head .lbm-mnav__panel:has(.lbm-mnav__panelhead) .lbm-mnav__back:hover {
  background: rgba(68, 80, 85, .08);
}
.lbm-head .lbm-mnav__panel:has(.lbm-mnav__panelhead) .lbm-mnav__row.is-current,
.lbm-head .lbm-mnav__panel:has(.lbm-mnav__panelhead) a[href*="cannalog"] {
  color: #ef7d00;
}
/* Subcategorías en paneles: mismo peso visual que las filas raíz (o mayor). */
.lbm-mnav__panel:has(.lbm-mnav__panelhead) > ul > li > a,
.lbm-mnav__panel:has(.lbm-mnav__panelhead) > ul > li > .lbm-mnav__row {
  font-size: 18px;
  line-height: 1.3;
  padding-top: 13px;
  padding-bottom: 13px;
}
.lbm-mnav__panel:has(.lbm-mnav__panelhead) .lbm-mnav__vertodo > a {
  font-size: 18px;
}
@media (max-width: 980px) {
  /* El top:108px del buscador de la barra deja un hueco y se ve la
     primera categoría del menú. Con el drawer abierto el campo está en
     .lbm-mnav__top (~58px): el desplegable arranca ahí y tapa la lista. */
  body.lbm-nav-open .lbm-mnav .lbm-sug,
  .lbm-mnav.is-open .lbm-sug {
    top: 58px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    max-height: none !important;
    min-height: calc(100vh - 58px) !important;
    border-radius: 0 !important;
    background: #fff !important;
    z-index: 100002 !important;
  }
}
/* Marcas de Fertilizantes en el panel móvil. */
.lbm-mnav__marcas-sep{
  flex: 0 0 100%;
  width: 100%;
  height: 0;
  margin: 10px 0 8px;
  padding: 0 !important;
  border: 0;
  border-top: 1px solid rgba(68, 80, 85, .14);
  list-style: none;
}
.lbm-mnav__panel:has(.lbm-mnav__marca) > ul {
  display: flex;
  flex-wrap: wrap;
}
.lbm-mnav__panel:has(.lbm-mnav__marca) > ul > li {
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
}
.lbm-mnav__panel > ul > li.lbm-mnav__marca {
  flex: 0 0 50%;
  width: 50%;
  padding-right: 12px;
}
.lbm-head .lbm-mnav__panel:has(.lbm-mnav__panelhead) li.lbm-mnav__marca > a {
  color: #ef7d00;
  font-size: 16.5px;
  line-height: 1.3;
  padding-top: 9px;
  padding-bottom: 9px;
  font-family: 'myriad_prosemibold', 'myriad_proregular', sans-serif;
  font-weight: 600;
}
/* Ofertas destacadas en el panel movil: una fila con swipe, mismo tamano. */
.lbm-mnav__panel > ul > li.lbm-mnav__ofertas{
  flex: 0 0 100%;
  width: 100%;
  margin-top: 10px;
  padding: 12px 0 8px;
}
.lbm-mnav__ofertas-row{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.lbm-mnav__ofertas-row::-webkit-scrollbar{ display: none; }
.lbm-head .lbm-mnav__panel:has(.lbm-mnav__panelhead) li.lbm-mnav__ofertas a.lbm-oferta{
  display: grid;
  grid-template-columns: 112px minmax(0,1fr);
  gap: 0 12px;
  align-items: stretch;
  width: 262px;
  flex: 0 0 262px;
  max-width: 86vw;
  padding: 0;
  font-size: inherit;
  color: #1e2528;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 24px -16px rgba(30,37,40,.4);
  scroll-snap-align: start;
}
.lbm-mnav__ofertas .lbm-oferta__foto{
  aspect-ratio: auto;
  min-height: 112px;
}
.lbm-mnav__ofertas .lbm-oferta__txt{
  padding: 12px 14px 14px 8px;
  gap: 2px;
}
.lbm-mnav__ofertas .lbm-oferta__flag{
  top: 8px; left: 8px;
  font-size: 11px;
  padding: 4px 8px;
}
.lbm-mnav__ofertas .lbm-oferta__nom{ font-size: 16px; }
.lbm-mnav__ofertas .lbm-oferta__spec{ font-size: 12.5px; margin-bottom: 4px; }
.lbm-mnav__ofertas .lbm-oferta__precio strong{ font-size: 22px; }
.lbm-mnav__ofertas .lbm-oferta__cta{
  margin-top: 8px;
  padding: 8px 14px;
  font-size: 13.5px;
}
/* Kits OASIS en Packs de cultivo (móvil). Carril, como en la home. */
.lbm-mnav__panel > ul > li.lbm-mnav__oasis{
  flex: 0 0 100%;
  width: 100%;
  margin-top: 8px;
  padding: 6px 0 4px;
}
.lbm-mnav__oasis .lbm-mega-oasis{
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  width: auto;
  max-width: none;
  padding: 12px 2px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lbm-mnav__oasis .lbm-mega-oasis::-webkit-scrollbar{ display: none; }
.lbm-head .lbm-mnav__oasis .lbm-mega-oasis__kit,
.lbm-mnav__oasis .lbm-mega-oasis__kit{
  flex: 0 0 min(78%, 280px);
  width: min(78%, 280px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding: 18px 14px 14px;
}
.lbm-mnav__oasis .lbm-mega-oasis__nom{ font-size: 17px; }
.lbm-mnav__oasis .lbm-mega-oasis__quien{ font-size: 12px; }
.lbm-mnav__oasis .lbm-mega-oasis__ir{ font-size: 13px; padding: 9px 12px; }