/* ==========================================================================
   LBM — Categoria
   Rejilla de 4 columnas, panel de filtros pegajoso y tarjeta con
   fabricante + minidescripcion. Colores y tipografia de la web:
   #445055 gris azulado, #ef7d00 naranja, myriad_proregular / Futura Bold.
   ========================================================================== */

.lbm-cat {
  --lbm-naranja: #ef7d00;
  --lbm-gris: #445055;
  --lbm-linea: #e3e6e8;
  --lbm-suave: #f6f7f8;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 18px;
  font-family: 'myriad_proregular', Helvetica, Arial, sans-serif;
}

/* ---------- Barra superior ---------- */
.lbm-cat__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-bottom: 1px solid var(--lbm-linea);
  margin-bottom: 18px;
}
.lbm-cat__barra-izq,
.lbm-cat__barra-der { display: flex; align-items: center; gap: 12px; }

.lbm-cat__cuenta { color: #6b7679; font-size: 14px; }

.lbm-cat__abrir {
  display: none;             /* solo en movil */
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--lbm-linea);
  border-radius: 999px;
  padding: 9px 16px;
  font: inherit;
  font-size: 14.5px;
  color: var(--lbm-gris);
  cursor: pointer;
}
.lbm-cat__badge {
  background: var(--lbm-naranja);
  color: #fff;
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0 6px;
}

/* El desplegable de orden de WooCommerce, con el aspecto de la web. */
.lbm-cat .woocommerce-ordering select {
  border: 1px solid var(--lbm-linea);
  border-radius: 999px;
  padding: 9px 34px 9px 16px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--lbm-gris);
  background-color: #fff;
  cursor: pointer;
}
.lbm-cat .woocommerce-ordering { margin: 0; }

/* ---------- Filtros activos ---------- */
.lbm-cat__activos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 16px;
}
.lbm-cat__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--lbm-suave);
  border: 1px solid var(--lbm-linea);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13.5px;
  color: var(--lbm-gris);
  text-decoration: none;
}
.lbm-cat__chip:hover { border-color: var(--lbm-naranja); color: var(--lbm-naranja); }
.lbm-cat__chip span[aria-hidden] { font-size: 16px; line-height: 1; opacity: .6; }
.lbm-cat__limpiar {
  font-size: 13.5px;
  color: var(--lbm-naranja);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Dos columnas ---------- */
.lbm-cat__cuerpo {
  display: grid;
  grid-template-columns: 258px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.lbm-cat--sinfiltros .lbm-cat__cuerpo { grid-template-columns: minmax(0, 1fr); }

/* ---------- Panel de filtros ---------- */
.lbm-cat__panel {
  /* Pegajoso: al bajar por un listado largo los filtros siguen a mano.
     El top deja hueco a la cabecera fija de la web. */
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  border: 1px solid var(--lbm-linea);
  border-radius: 14px;
  background: #fff;
  padding: 4px 0;
}
.lbm-cat__panelhead {
  display: none;   /* solo se ve como cabecera del cajon movil */
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--lbm-linea);
}
.lbm-cat__cerrar {
  background: none; border: 0; padding: 4px; cursor: pointer; color: var(--lbm-gris);
}

.lbm-cat__grupo { border-bottom: 1px solid var(--lbm-linea); }
.lbm-cat__grupo:last-child { border-bottom: 0; }

.lbm-cat__grupobtn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: none;
  border: 0;
  padding: 14px 16px;
  font-family: 'myriad_prosemibold', 'myriad_proregular', sans-serif;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lbm-gris);
  cursor: pointer;
  text-align: left;
}
.lbm-cat__grupobtn svg { flex: none; transition: transform .2s ease; }
.lbm-cat__grupo.is-abierto .lbm-cat__grupobtn svg { transform: rotate(180deg); }

.lbm-cat__opciones { display: none; padding: 0 16px 12px; }
.lbm-cat__grupo.is-abierto .lbm-cat__opciones { display: block; }

.lbm-cat__opcion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 14.5px;
  color: var(--lbm-gris);
  text-decoration: none;
  line-height: 1.3;
}
.lbm-cat__opcion:hover { color: var(--lbm-naranja); }
.lbm-cat__opcion-txt { flex: 1; }
.lbm-cat__opcion-n { color: #98a1a4; font-size: 12.5px; flex: none; }

/* La casilla se dibuja con CSS: son enlaces, no <input>, para que cada
   estado sea una URL y el filtro funcione sin JavaScript. */
.lbm-cat__marca-box {
  width: 17px; height: 17px; flex: none;
  border: 1.5px solid #c6cccd;
  border-radius: 4px;
  position: relative;
  transition: border-color .15s ease, background-color .15s ease;
}
.lbm-cat__opcion:hover .lbm-cat__marca-box { border-color: var(--lbm-naranja); }
.lbm-cat__opcion.is-activo .lbm-cat__marca-box {
  background: var(--lbm-naranja);
  border-color: var(--lbm-naranja);
}
.lbm-cat__opcion.is-activo .lbm-cat__marca-box::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 4px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.lbm-cat__opcion.is-activo { color: var(--lbm-naranja); }

.lbm-cat__panelpie { display: none; }

/* ==========================================================================
   Rejilla de productos — 4 por fila
   ========================================================================== */

/* WooCommerce/Divi montan el listado con floats sobre un <ul> en block:
   por eso "columns-4" no daba 4 columnas reales y las tarjetas quedaban
   de alturas distintas. Con Grid el reparto es exacto y todas las
   tarjetas de una fila miden lo mismo. */
.lbm-cat__resultados ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.lbm-cat__resultados ul.products::before,
.lbm-cat__resultados ul.products::after { content: none !important; display: none !important; }

.lbm-cat__resultados ul.products li.product {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #fff;
  border: 1px solid var(--lbm-linea);
  border-radius: 14px;
  overflow: visible;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.lbm-cat__resultados ul.products li.product:hover {
  border-color: #cfd5d7;
  box-shadow: 0 6px 20px rgba(68, 80, 85, .09);
}

/* ---------- Contenido de la tarjeta ---------- */
.lbm-pcard .woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px 14px 0;
  text-decoration: none;
  color: inherit;
}
.lbm-pcard img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 0 0 12px !important;
}

.lbm-pcard__marca {
  display: block;
  font-family: 'myriad_prosemibold', 'myriad_proregular', sans-serif;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--lbm-naranja);
  margin-bottom: 4px;
}

.lbm-cat__resultados ul.products li.product h2,
.lbm-cat__resultados ul.products li.product .woocommerce-loop-product__title {
  font-family: 'myriad_prosemibold', 'myriad_proregular', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.32 !important;
  color: var(--lbm-gris) !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  text-align: left !important;
  /* Dos lineas maximo: con titulos de largo desigual, las tarjetas de una
     misma fila se descuadraban y el precio quedaba a distinta altura. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lbm-pcard__desc {
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #7b8487 !important;
  margin: 0 0 10px !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Precio ---------- */
.lbm-pcard__precio {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 14px 12px;
  margin-top: auto;   /* pegado abajo: alinea el precio en toda la fila */
}
.lbm-cat__resultados ul.products li.product .price {
  font-family: 'myriad_prosemibold', 'myriad_proregular', sans-serif !important;
  font-size: 18px !important;
  color: var(--lbm-gris) !important;
  margin: 0 !important;
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}
.lbm-cat__resultados ul.products li.product .price del {
  font-size: 13.5px !important;
  color: #a4acae !important;
  opacity: 1;
  font-family: 'myriad_proregular', sans-serif !important;
}
.lbm-cat__resultados ul.products li.product .price ins {
  text-decoration: none;
  color: var(--lbm-gris) !important;
  background: none;
}
/* El "-x%" que va detras del precio rebajado: naranja y sin adornos.
   El .price ya es flex con gap, asi que se coloca solo. */
.lbm-cat__resultados ul.products li.product .price .lbm-pcard__pct {
  font-family: 'myriad_prosemibold', 'myriad_proregular', sans-serif !important;
  font-size: 13.5px !important;
  color: var(--lbm-naranja, #ef7d00) !important;
  white-space: nowrap;
}

.lbm-pcard__dto {
  background: #fdf0e2;
  color: #c96500;
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 12.5px;
  font-family: 'myriad_prosemibold', 'myriad_proregular', sans-serif;
  white-space: nowrap;
}

/* La etiqueta de oferta de WooCommerce, sobre la imagen. */
.lbm-cat__resultados ul.products li.product .onsale {
  position: absolute;
  top: 10px; left: 10px;
  margin: 0 !important;
  background: var(--lbm-naranja) !important;
  color: #fff !important;
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 12px;
  line-height: 1.5;
  min-height: 0;
  min-width: 0;
  z-index: 2;
}

/* ---------- Variantes al pasar el raton ---------- */
.lbm-pcard__vars {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 14px;
  /* Ocultas hasta el hover: en reposo la tarjeta se lee de un vistazo. */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .22s ease, opacity .18s ease, padding .22s ease;
  padding-bottom: 0;
}
.lbm-pcard:hover .lbm-pcard__vars,
.lbm-pcard:focus-within .lbm-pcard__vars {
  max-height: 140px;
  opacity: 1;
  padding-bottom: 14px;
}
.lbm-pcard__var {
  border: 1px solid var(--lbm-linea);
  background: #fff;
  border-radius: 8px;
  padding: 5px 10px;
  font-family: 'myriad_proregular', sans-serif;
  font-size: 12.5px;
  color: var(--lbm-gris);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.lbm-pcard__var:hover { border-color: var(--lbm-naranja); color: var(--lbm-naranja); }
.lbm-pcard__var.is-sel {
  border-color: var(--lbm-naranja);
  background: #fdf3e8;
  color: #c96500;
}

/* En tactil no hay hover: los formatos se ven siempre. */
@media (hover: none) {
  .lbm-pcard__vars { max-height: 140px; opacity: 1; padding-bottom: 14px; }
}

/* ---------- Boton de compra ---------- */
.lbm-cat__resultados ul.products li.product .button,
.lbm-cat__resultados ul.products li.product .added_to_cart {
  margin: 0 14px 14px !important;
  background: var(--lbm-naranja) !important;
  color: #fff !important;
  border-radius: 9px !important;
  padding: 10px 14px !important;
  font-family: 'myriad_prosemibold', 'myriad_proregular', sans-serif !important;
  font-size: 14px !important;
  text-align: center;
  border: 0 !important;
  transition: background-color .15s ease;
}
.lbm-cat__resultados ul.products li.product .button:hover { background: #d97100 !important; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1200px) {
  .lbm-cat__cuerpo { grid-template-columns: 232px minmax(0, 1fr); gap: 22px; }
  .lbm-cat__resultados ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}

@media (max-width: 980px) {
  /* El panel deja de caber al lado: pasa a cajon a pantalla completa. */
  .lbm-cat__cuerpo { grid-template-columns: minmax(0, 1fr); }
  .lbm-cat__abrir { display: inline-flex; }

  .lbm-cat__panel {
    position: fixed;
    inset: 0;
    z-index: 99999;
    max-height: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    transform: translateX(-100%);
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
  }
  .lbm-cat__panel.is-abierto { transform: translateX(0); }
  .lbm-cat__panelhead { display: flex; }
  .lbm-cat__grupos { flex: 1; overflow-y: auto; }

  .lbm-cat__panelpie {
    display: block;
    padding: 12px 16px;
    border-top: 1px solid var(--lbm-linea);
    background: #fff;
  }
  .lbm-cat__ver {
    display: block;
    background: var(--lbm-naranja);
    color: #fff;
    text-align: center;
    padding: 13px;
    border-radius: 10px;
    text-decoration: none;
    font-family: 'myriad_prosemibold', 'myriad_proregular', sans-serif;
  }

  .lbm-cat__resultados ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .lbm-cat__resultados ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .lbm-cat { padding: 0 12px; }
  .lbm-pcard__desc { display: none; }   /* en 2 columnas no cabe y estorba */
  .lbm-cat__resultados ul.products li.product h2,
  .lbm-cat__resultados ul.products li.product .woocommerce-loop-product__title { font-size: 14px !important; }
  .lbm-cat__resultados ul.products li.product .price { font-size: 16px !important; }
}

@media (max-width: 400px) {
  .lbm-cat__resultados ul.products { gap: 11px; }
  .lbm-pcard .woocommerce-LoopProduct-link { padding: 10px 10px 0; }
  .lbm-pcard__precio { padding: 0 10px 10px; }
}

/* ==========================================================================
   La columna del filtro viejo, recuperada para el listado
   --------------------------------------------------------------------------
   Las plantillas de categoria de Divi tienen dos columnas: una estrecha a
   la izquierda que contenia [wpf-filters id=1] y otra ancha con el
   listado. Al quitar el plugin, esa columna se queda vacia pero sigue
   ocupando 240px + 64px de canalon: el listado se quedaba en 848px de
   1152 y las tarjetas bajaban a 115px de ancho.

   El panel de filtros nuevo va DENTRO del listado (.lbm-cat__cuerpo), asi
   que esa columna ya no hace falta: se oculta y la del listado pasa a
   ocupar la fila entera.
   ========================================================================== */
.et-db #et-boc .et-l .et_pb_row_4_tb_body > .et_pb_column:first-child:has(> .et_pb_module:only-child),
body.tax-product_cat .et_pb_row_4_tb_body > .et_pb_column_5_tb_body {
  display: none !important;
}

body.tax-product_cat .et_pb_column_6_tb_body,
body.post-type-archive-product .et_pb_column_6_tb_body {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ==========================================================================
   Barra superior del listado — rediseno (2026-08-31)
   Antes salia dos veces (la propia y la de WooCommerce, ya retirada) y la
   que quedaba era texto suelto sobre una linea. Ahora es una barra con
   cuerpo propio: el recuento a la izquierda con el nombre de la
   categoria, y el orden a la derecha como control, no como formulario.
   ========================================================================== */
.lbm-cat__barra {
  background: var(--lbm-suave);
  border: 1px solid var(--lbm-linea);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 20px;
}

/* El recuento pasa a ser el dato principal de la izquierda: la cifra
   destaca y la palabra "productos" la acompana en gris. */
.lbm-cat__cuenta {
  font-size: 15px;
  color: #6b7679;
}
.lbm-cat__cuenta strong {
  font-family: 'myriad_prosemibold', 'myriad_proregular', sans-serif;
  font-size: 17px;
  color: var(--lbm-gris);
  margin-right: 3px;
}

/* Etiqueta del selector: sin ella, un desplegable suelto no dice que
   ordena. */
.lbm-cat__ordlabel {
  font-size: 14px;
  color: #6b7679;
  white-space: nowrap;
}

.lbm-cat .woocommerce-ordering select {
  background-color: #fff;
  border-radius: 10px;
  min-width: 210px;
}
.lbm-cat .woocommerce-ordering select:focus-visible {
  outline: 2px solid var(--lbm-naranja);
  outline-offset: 1px;
}

/* En movil el selector ocupa toda la fila: a 390px, recuento y
   desplegable uno al lado del otro dejan el segundo en 120px. */
@media (max-width: 560px) {
  .lbm-cat__barra { padding: 12px; }
  .lbm-cat__barra-der { width: 100%; }
  .lbm-cat .woocommerce-ordering,
  .lbm-cat .woocommerce-ordering select { width: 100%; min-width: 0; }
  .lbm-cat__ordlabel { display: none; }
}

/* --- El formato elegido, resaltado (2026-08-31) --------------------------
   .is-sel definia fondo y borde naranjas, pero Divi pinta todos los
   <button> con sus propios estilos desde una hoja que carga despues: el
   boton se marcaba en el DOM y seguia viendose blanco, asi que no habia
   forma de saber que formato estaba seleccionado.
   Se sube la especificidad al nivel de la tarjeta. */
.lbm-cat__resultados li.product .lbm-pcard__var {
  background-color: #fff;
  border: 1px solid var(--lbm-linea);
  color: var(--lbm-gris);
}
.lbm-cat__resultados li.product .lbm-pcard__var:hover {
  border-color: var(--lbm-naranja);
  color: var(--lbm-naranja);
}
.lbm-cat__resultados li.product .lbm-pcard__var.is-sel {
  background-color: #fdf3e8;
  border-color: var(--lbm-naranja);
  color: #c96500;
  font-family: 'myriad_prosemibold', 'myriad_proregular', sans-serif;
}

/* --- Correccion del bloque anterior -------------------------------------
   El bloque de arriba redefine el fondo blanco del boton con el selector
   largo (.lbm-cat__resultados li.product .lbm-pcard__var), mas especifico
   que el .is-sel que se habia escrito antes en este mismo fichero: el
   estado seleccionado perdia el fondo y el borde naranjas, y solo
   cambiaba el color del texto.

   Estas reglas van al final a proposito, con el mismo peso que la regla
   base pero declaradas despues, para que el estado seleccionado gane. */
.lbm-cat__resultados li.product .lbm-pcard__var.is-sel,
.lbm-cat__resultados ul.products li.product .lbm-pcard__var.is-sel {
  background-color: #fdf3e8 !important;
  border-color: #ef7d00 !important;
  color: #c96500 !important;
}

/* ==========================================================================
   Bloques de producto de la home (2026-08-31)

   Los pintan modulos et_pb_shop de Divi, fuera de .lbm-cat__resultados: el
   CSS de la tarjeta no les llegaba y salian como texto suelto (titulo,
   descripcion y precio uno debajo de otro, sin caja ni rejilla).

   Aqui se repiten las reglas de la tarjeta colgando de .et_pb_shop, para
   que la home y las categorias se vean igual. Divi maqueta con floats
   sobre un <ul> en block, asi que hace falta Grid tambien.
   ========================================================================== */
body.home .et_pb_shop ul.products,
body.page .et_pb_shop ul.products {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
body.home .et_pb_shop ul.products.columns-4,
body.page .et_pb_shop ul.products.columns-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
body.home .et_pb_shop ul.products::before,
body.home .et_pb_shop ul.products::after {
  content: none !important;
  display: none !important;
}

body.home .et_pb_shop ul.products li.product,
body.page .et_pb_shop ul.products li.product {
  --lbm-naranja: #ef7d00;
  --lbm-gris: #445055;
  --lbm-linea: #e3e6e8;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #fff;
  border: 1px solid var(--lbm-linea);
  border-radius: 14px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
body.home .et_pb_shop ul.products li.product:hover {
  border-color: #cfd5d7;
  box-shadow: 0 6px 20px rgba(68, 80, 85, .09);
}

body.home .et_pb_shop .woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px 14px 0;
  text-decoration: none;
  color: inherit;
}
body.home .et_pb_shop ul.products li.product img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 0 0 12px !important;
}

body.home .et_pb_shop ul.products li.product h2,
body.home .et_pb_shop ul.products li.product .woocommerce-loop-product__title {
  font-family: 'myriad_prosemibold', 'myriad_proregular', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.32 !important;
  color: #445055 !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  text-align: left !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.home .et_pb_shop .lbm-pcard__marca {
  display: block;
  font-family: 'myriad_prosemibold', 'myriad_proregular', sans-serif;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #ef7d00;
  margin-bottom: 4px;
}
body.home .et_pb_shop .lbm-pcard__desc {
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #7b8487 !important;
  margin: 0 0 10px !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Las estrellas, discretas y alineadas a la izquierda como el resto. */
body.home .et_pb_shop ul.products li.product .star-rating {
  margin: 0 14px 8px !important;
  font-size: 12px !important;
  float: none !important;
}

body.home .et_pb_shop .lbm-pcard__precio {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 14px 12px;
  margin-top: auto;
}
body.home .et_pb_shop ul.products li.product .price {
  font-family: 'myriad_prosemibold', 'myriad_proregular', sans-serif !important;
  font-size: 18px !important;
  color: #445055 !important;
  margin: 0 !important;
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}
body.home .et_pb_shop ul.products li.product .price del {
  font-size: 13.5px !important;
  color: #a4acae !important;
  opacity: 1;
  font-family: 'myriad_proregular', sans-serif !important;
}
body.home .et_pb_shop ul.products li.product .price ins {
  text-decoration: none;
  color: #445055 !important;
  background: none;
}
body.home .et_pb_shop .lbm-pcard__dto {
  background: #fdf0e2;
  color: #c96500;
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 12.5px;
  font-family: 'myriad_prosemibold', 'myriad_proregular', sans-serif;
  white-space: nowrap;
}

/* La etiqueta de oferta de Divi/WooCommerce sobre la imagen: en la home
   sigue saliendo (el remove_action solo cubre listados), asi que al menos
   se coloca igual que en la categoria. */
body.home .et_pb_shop ul.products li.product .onsale {
  position: absolute;
  top: 10px; left: 10px;
  margin: 0 !important;
  background: #ef7d00 !important;
  color: #fff !important;
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 12px;
  line-height: 1.5;
  min-height: 0;
  min-width: 0;
  z-index: 2;
}

/* Variantes al pasar el raton, igual que en la categoria. */
body.home .et_pb_shop .lbm-pcard__vars {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .22s ease, opacity .18s ease, padding .22s ease;
}
body.home .et_pb_shop li.product:hover .lbm-pcard__vars,
body.home .et_pb_shop li.product:focus-within .lbm-pcard__vars {
  max-height: 140px;
  opacity: 1;
  padding-bottom: 14px;
}
body.home .et_pb_shop .lbm-pcard__var {
  border: 1px solid #e3e6e8;
  background: #fff;
  border-radius: 8px;
  padding: 5px 10px;
  font-family: 'myriad_proregular', sans-serif;
  font-size: 12.5px;
  color: #445055;
  cursor: pointer;
}
body.home .et_pb_shop .lbm-pcard__var:hover { border-color: #ef7d00; color: #ef7d00; }
body.home .et_pb_shop .lbm-pcard__var.is-sel {
  background-color: #fdf3e8 !important;
  border-color: #ef7d00 !important;
  color: #c96500 !important;
}
@media (hover: none) {
  body.home .et_pb_shop .lbm-pcard__vars { max-height: 140px; opacity: 1; padding-bottom: 14px; }
}

body.home .et_pb_shop ul.products li.product .button,
body.home .et_pb_shop ul.products li.product .added_to_cart {
  margin: 0 14px 14px !important;
  background: #ef7d00 !important;
  color: #fff !important;
  border-radius: 9px !important;
  padding: 10px 14px !important;
  font-family: 'myriad_prosemibold', 'myriad_proregular', sans-serif !important;
  font-size: 14px !important;
  text-align: center;
  border: 0 !important;
}

/* El velo gris de Divi al pasar por encima tapaba la foto entera. */
body.home .et_pb_shop ul.products li.product .et_overlay { display: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  body.home .et_pb_shop ul.products,
  body.home .et_pb_shop ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 980px) {
  body.home .et_pb_shop ul.products,
  body.home .et_pb_shop ul.products.columns-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body.home .et_pb_shop ul.products,
  body.home .et_pb_shop ul.products.columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body.home .et_pb_shop .lbm-pcard__desc { display: none; }
  body.home .et_pb_shop ul.products li.product h2,
  body.home .et_pb_shop ul.products li.product .woocommerce-loop-product__title { font-size: 14px !important; }
  body.home .et_pb_shop ul.products li.product .price { font-size: 16px !important; }
}

/* --- Ajustes finos de la home (2026-08-31) -------------------------------
   Divi centra los titulos de sus modulos de tienda desde
   et-core-unified, que carga despues de este fichero: el !important de
   arriba no bastaba y los nombres salian centrados mientras que en la
   categoria van a la izquierda. Se replica su especificidad. */
html body.et-db #et-boc .et-l .et_pb_shop ul.products li.product h2,
body.home .et_pb_shop.et_pb_module ul.products li.product h2,
body.home .et_pb_shop.et_pb_module ul.products li.product .woocommerce-loop-product__title,
body.home .et_pb_shop.et_pb_module ul.products li.product .lbm-pcard__desc,
body.home .et_pb_shop.et_pb_module ul.products li.product .star-rating {
  text-align: left !important;
}
/* La valoracion es un elemento inline con ancho fijo: text-align no la
   mueve, hay que quitarle el centrado por margen. */
body.home .et_pb_shop.et_pb_module ul.products li.product .star-rating {
  margin-left: 14px !important;
  margin-right: auto !important;
}

/* El precio y su pastilla, en la misma linea.
   Con 214px de tarjeta, "1.389,43 € 844,51 € −39%" no cabe y el
   descuento caia solo a una tercera linea: la tarjeta crecia 77px de alto
   y las de una misma fila quedaban descuadradas. Se reduce un punto el
   tachado y se permite que la pastilla comparta linea con el precio
   final. */
body.home .et_pb_shop.et_pb_module ul.products li.product .price {
  font-size: 17px !important;
  row-gap: 2px;
}
body.home .et_pb_shop.et_pb_module ul.products li.product .price del {
  font-size: 12.5px !important;
}
body.home .et_pb_shop .lbm-pcard__precio {
  row-gap: 4px;
}

/* --- Titulos a la izquierda: la regla exacta de Divi (2026-08-31) --------
   Divi centra los titulos con

     .et-db #et-boc .et-l .et_pb_shop_0.et_pb_shop .woocommerce ul.products li.product h2

   — con el indice del modulo (.et_pb_shop_0) y un .woocommerce por medio,
   dos escalones mas que el selector anterior. Se replica la misma forma
   para los cuatro modulos de la home. */
.et-db #et-boc .et-l .et_pb_shop.et_pb_module .woocommerce ul.products li.product h2,
.et-db #et-boc .et-l .et_pb_shop.et_pb_module .woocommerce ul.products li.product h3,
.et-db #et-boc .et-l .et_pb_shop.et_pb_module .woocommerce ul.products li.product .woocommerce-loop-product__title,
.et-db #et-boc .et-l .et_pb_shop.et_pb_module .woocommerce ul.products li.product .lbm-pcard__desc,
.et-db #et-boc .et-l .et_pb_shop.et_pb_module .woocommerce ul.products li.product .lbm-pcard__marca {
  text-align: left !important;
}
/* Y el tamano, que la misma regla de Divi fija en 24px. */
.et-db #et-boc .et-l .et_pb_shop.et_pb_module .woocommerce ul.products li.product h2,
.et-db #et-boc .et-l .et_pb_shop.et_pb_module .woocommerce ul.products li.product h3 {
  font-size: 15px !important;
  line-height: 1.32 !important;
}

/* --- Tamano del titulo en la home (2026-08-31) --------------------------
   Divi fija 24px con el selector que incluye el INDICE del modulo
   (.et_pb_shop_0, _1, _2, _3), un escalon de especificidad por encima de
   .et_pb_shop.et_pb_module. Se replican los indices —hay cuatro modulos
   en la home, se cubren ocho por si se anaden mas— para que el titulo se
   vea igual que en la categoria (15px, dos lineas). */
.et-db #et-boc .et-l .et_pb_shop_0.et_pb_shop .woocommerce ul.products li.product h2,
.et-db #et-boc .et-l .et_pb_shop_0.et_pb_shop .woocommerce ul.products li.product h3,
.et-db #et-boc .et-l .et_pb_shop_0.et_pb_shop .woocommerce ul.products li.product .woocommerce-loop-product__title,
.et-db #et-boc .et-l .et_pb_shop_1.et_pb_shop .woocommerce ul.products li.product h2,
.et-db #et-boc .et-l .et_pb_shop_1.et_pb_shop .woocommerce ul.products li.product h3,
.et-db #et-boc .et-l .et_pb_shop_1.et_pb_shop .woocommerce ul.products li.product .woocommerce-loop-product__title,
.et-db #et-boc .et-l .et_pb_shop_2.et_pb_shop .woocommerce ul.products li.product h2,
.et-db #et-boc .et-l .et_pb_shop_2.et_pb_shop .woocommerce ul.products li.product h3,
.et-db #et-boc .et-l .et_pb_shop_2.et_pb_shop .woocommerce ul.products li.product .woocommerce-loop-product__title,
.et-db #et-boc .et-l .et_pb_shop_3.et_pb_shop .woocommerce ul.products li.product h2,
.et-db #et-boc .et-l .et_pb_shop_3.et_pb_shop .woocommerce ul.products li.product h3,
.et-db #et-boc .et-l .et_pb_shop_3.et_pb_shop .woocommerce ul.products li.product .woocommerce-loop-product__title,
.et-db #et-boc .et-l .et_pb_shop_4.et_pb_shop .woocommerce ul.products li.product h2,
.et-db #et-boc .et-l .et_pb_shop_4.et_pb_shop .woocommerce ul.products li.product h3,
.et-db #et-boc .et-l .et_pb_shop_4.et_pb_shop .woocommerce ul.products li.product .woocommerce-loop-product__title,
.et-db #et-boc .et-l .et_pb_shop_5.et_pb_shop .woocommerce ul.products li.product h2,
.et-db #et-boc .et-l .et_pb_shop_5.et_pb_shop .woocommerce ul.products li.product h3,
.et-db #et-boc .et-l .et_pb_shop_5.et_pb_shop .woocommerce ul.products li.product .woocommerce-loop-product__title,
.et-db #et-boc .et-l .et_pb_shop_6.et_pb_shop .woocommerce ul.products li.product h2,
.et-db #et-boc .et-l .et_pb_shop_6.et_pb_shop .woocommerce ul.products li.product h3,
.et-db #et-boc .et-l .et_pb_shop_6.et_pb_shop .woocommerce ul.products li.product .woocommerce-loop-product__title,
.et-db #et-boc .et-l .et_pb_shop_7.et_pb_shop .woocommerce ul.products li.product h2,
.et-db #et-boc .et-l .et_pb_shop_7.et_pb_shop .woocommerce ul.products li.product h3,
.et-db #et-boc .et-l .et_pb_shop_7.et_pb_shop .woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 15px !important;
  line-height: 1.32 !important;
  text-align: left !important;
}

/* ==========================================================================
   BLOQUES DESTACADOS DE LA HOME — rediseno editorial (2026-09-01)
   --------------------------------------------------------------------------
   Sustituye por completo al intento anterior, que se quedaba corto: eran
   las mismas cinco tarjetas iguales con otro color de pastilla.

   Ahora cada bloque tiene una forma propia:

     OFERTAS (shop_0 / shop_1)  banda oscura a sangre. El primer producto
                                ocupa el doble (2x2) con su foto grande y
                                el descuento como sello. Los demas, en
                                tarjetas oscuras alrededor.

     SEMILLAS (shop_2 / shop_3) banda clara. Tarjetas altas tipo catalogo,
                                con la marca arriba y la foto a sangre.

   Divi pinta desde et-core-unified, que carga DESPUES de este fichero: las
   reglas que pelean con el llevan su misma forma (.et-db es el <body>, por
   eso va concatenado: body.et-db).
   ========================================================================== */

body.home .et_pb_shop {
  --lbm-naranja: #ef7d00;
  --lbm-tinta: #1c2226;
  --lbm-tinta-2: #262f34;
  --lbm-tenue: #7b8487;
  --lbm-linea: #e6e9eb;
  --lbm-verde: #23c16b;
}

/* --------------------------------------------------------------------------
   1. La banda oscura de OFERTAS
   Se estira a todo el ancho de la ventana con el truco del margen negativo
   al 50vw, porque la fila de Divi esta limitada a 1296px.
   -------------------------------------------------------------------------- */
body.home .et_pb_shop_0,
body.home .et_pb_shop_1 {
  position: relative;
  margin-bottom: 0 !important;   /* Divi trae -8px y solapaba con el texto */
  padding: 4px 0 46px;
  z-index: 1;
}
body.home .et_pb_shop_0::before,
body.home .et_pb_shop_1::before {
  content: "";
  position: absolute;
  top: -236px;                    /* deja 57px de blanco, igual que encima
                                     de la tarjeta "Mayor Grow" */
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background:
    radial-gradient(1100px 380px at 18% 0%, rgba(239,125,0,.16), transparent 62%),
    linear-gradient(180deg, #1c2226 0%, #232c31 100%);
  z-index: -1;
}

/* La cabecera de ofertas va sobre la banda: texto en claro. */
body.home .et_pb_text_0 {
  position: relative;
  z-index: 2;
  margin-bottom: 30px !important;
  padding-top: 34px;
}

/*
 * El bloque "¿Quieres cultivar desde cero...?" respiraba distinto arriba
 * que abajo: 51px de padding superior contra 8px de inferior, asi que el
 * texto quedaba pegado al bloque de manuales que viene despues.
 */
html body.home.et-db #et-boc .et-l .et_pb_section_2,
body.home .et_pb_section_2 {
  padding-top: 52px !important;
  padding-bottom: 52px !important;
}
html body.et-db #et-boc .et-l .et_pb_text_0 .et_pb_text_inner h2 {
  /* Misma tipografia y tamano que "Un armario entero, en una caja."
     (.lbm-hx-head h2): la portada usa Futura Bold para todos los titulos
     de bloque. Aqui el color si cambia — el fondo es la banda oscura. */
  font-family: "Futura Bold", "Futura", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400 !important;
  color: #fff !important;
  font-size: clamp(30px, 4vw, 54px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  max-width: 15ch;
  margin: 0 auto 12px !important;
  padding-bottom: 0 !important;
}
body.home .et_pb_text_0 .et_pb_text_inner p {
  /* Igual que .lbm-hx-head__sub, con el color adaptado al fondo oscuro. */
  font-family: "Futura Book", "Futura", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
  color: rgba(255,255,255,.66) !important;
  font-size: clamp(16.5px, 1.5vw, 19.5px) !important;
  line-height: 1.55 !important;
  max-width: 44ch;
  margin: 0 auto !important;
}
body.home .et_pb_text_0 .et_pb_text_inner h2::before {
  /* Se ve como el rotulo "KITS DE CULTIVO INTERIOR" (.lbm-hx-eyebrow):
     texto naranja suelto, sin pastilla ni borde. La capsula era la unica
     de la portada y rompia la coherencia del resto de bloques. */
  content: attr(data-kicker);
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  font-family: "Futura Book", "Futura", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(12px, 1.1vw, 13.5px);
  letter-spacing: .16em;
  text-transform: uppercase;
  /* Naranja literal: --lbm-naranja se declara en .et_pb_shop y este titulo
     cuelga de .et_pb_text_0, que no lo hereda. */
  color: #ef7d00;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 16px;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   2. Rejilla de OFERTAS: el primero manda (2x2)
   -------------------------------------------------------------------------- */
body.home .et_pb_shop_0 ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px !important;
}
body.home .et_pb_shop_0 ul.products li.product:nth-child(1) {
  grid-column: span 2;
}

/*
 * Tarjeta blanca, como las del resto de la portada.
 *
 * Antes era translucida (blanco al 4,5%) sobre la banda oscura. El
 * problema no era el color en si: la foto del producto llega con fondo
 * blanco solido, asi que se recortaba un rectangulo claro dentro de una
 * tarjeta casi negra y la imagen se veia cortada. Con la tarjeta blanca
 * la foto funde con ella y el recorte desaparece.
 */
html body.et-db #et-boc .et-l .et_pb_shop_0.et_pb_shop .woocommerce ul.products li.product,
body.home .et_pb_shop_0 ul.products li.product,
body.home .et_pb_shop_1 ul.products li.product {
  background: #fff !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 18px !important;
  overflow: hidden;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
body.home .et_pb_shop_0 ul.products li.product:hover,
body.home .et_pb_shop_1 ul.products li.product:hover {
  transform: translateY(-4px);
  border-color: rgba(239,125,0,.55) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.28) !important;
}

/* Textos en claro dentro de la banda. */
html body.et-db #et-boc .et-l .et_pb_shop_0.et_pb_shop .woocommerce ul.products li.product h2,
html body.et-db #et-boc .et-l .et_pb_shop_1.et_pb_shop .woocommerce ul.products li.product h2,
body.home .et_pb_shop_0 ul.products li.product .woocommerce-loop-product__title,
body.home .et_pb_shop_1 ul.products li.product .woocommerce-loop-product__title {
  color: var(--lbm-tinta) !important;
  font-family: "Futura Bold", "Futura", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  margin: 14px 16px 0 !important;
  text-align: left !important;
}
body.home .et_pb_shop_0 ul.products li.product .lbm-pcard__desc,
body.home .et_pb_shop_1 ul.products li.product .lbm-pcard__desc {
  color: var(--lbm-tenue) !important;
  margin: 7px 16px 0 !important;
  font-size: 13px !important;
}
body.home .et_pb_shop_0 ul.products li.product .star-rating,
body.home .et_pb_shop_1 ul.products li.product .star-rating {
  /* Naranja de la casa: sobre blanco el ambar claro no se leia. */
  color: var(--lbm-naranja) !important;
  margin: 10px 16px 0 !important;
}

/* La foto: fondo claro para que el producto recorte bien sobre la banda. */
html body.et-db #et-boc .et-l .et_pb_shop_0.et_pb_shop .woocommerce ul.products li.product img,
body.home .et_pb_shop_0 ul.products li.product img,
body.home .et_pb_shop_1 ul.products li.product img {
  /* La tarjeta ya es blanca: la foto no necesita su propio fondo, que era
     justo lo que dibujaba el rectangulo recortado. */
  background: transparent !important;
  border-radius: 14px !important;
  margin: 0 !important;
  padding: 12px !important;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
body.home .et_pb_shop_0 .woocommerce-LoopProduct-link,
body.home .et_pb_shop_1 .woocommerce-LoopProduct-link {
  padding: 12px 12px 0 !important;
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* En el destacado la foto es mas alta y ocupa mas. */
body.home .et_pb_shop_0 ul.products li.product:nth-child(1) img {
  aspect-ratio: auto;
  height: 300px;
  padding: 20px !important;
}
body.home .et_pb_shop_0 ul.products li.product:nth-child(1) .woocommerce-loop-product__title {
  font-size: 24px !important;
  line-height: 1.16 !important;
  letter-spacing: -0.02em;
  margin: 18px 20px 0 !important;
}
body.home .et_pb_shop_0 ul.products li.product:nth-child(1) .lbm-pcard__desc {
  font-size: 14.5px !important;
  -webkit-line-clamp: 3;
  margin: 9px 20px 0 !important;
}
body.home .et_pb_shop_0 ul.products li.product:nth-child(1) .star-rating {
  margin: 12px 20px 0 !important;
}
body.home .et_pb_shop_0 ul.products li.product:nth-child(1) .lbm-pcard__precio {
  padding: 14px 20px 20px !important;
}
body.home .et_pb_shop_0 ul.products li.product:nth-child(1) .price {
  font-size: 30px !important;
}

/* Precio sobre oscuro. */
body.home .et_pb_shop_0 .lbm-pcard__precio,
body.home .et_pb_shop_1 .lbm-pcard__precio {
  padding: 12px 16px 16px !important;
  margin-top: auto !important;
  align-items: center !important;
  gap: 9px !important;
  row-gap: 5px !important;
}
html body.et-db #et-boc .et-l .et_pb_shop_0.et_pb_shop .woocommerce ul.products li.product .price,
body.home .et_pb_shop_0 ul.products li.product .price,
body.home .et_pb_shop_1 ul.products li.product .price {
  color: var(--lbm-tinta) !important;
  font-family: "Futura Bold", "Futura", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400 !important;
  font-size: 21px !important;
  align-items: center !important;
  gap: 9px !important;
}
body.home .et_pb_shop_0 ul.products li.product .price del,
body.home .et_pb_shop_1 ul.products li.product .price del {
  color: var(--lbm-tenue) !important;
  font-size: 13.5px !important;
}
body.home .et_pb_shop_0 ul.products li.product .price ins,
body.home .et_pb_shop_1 ul.products li.product .price ins {
  color: var(--lbm-tinta) !important;
}

/* El descuento, como sello naranja. */
body.home .et_pb_shop_0 .lbm-pcard__dto,
body.home .et_pb_shop_1 .lbm-pcard__dto {
  background: var(--lbm-naranja) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 4px 11px !important;
  font-size: 12.5px !important;
  box-shadow: 0 4px 14px rgba(239,125,0,.38);
}
body.home .et_pb_shop_0 ul.products li.product:nth-child(1) .lbm-pcard__dto {
  font-size: 15px !important;
  padding: 6px 14px !important;
}

/* --------------------------------------------------------------------------
   3. SEMILLAS: banda clara, tarjetas de catalogo
   -------------------------------------------------------------------------- */
body.home .et_pb_text_1 {
  margin-bottom: 26px !important;
  padding-top: 8px;
}
html body.et-db #et-boc .et-l .et_pb_text_1 .et_pb_text_inner h3,
html body.et-db #et-boc .et-l .et_pb_text_1 .et_pb_text_inner h2 {
  color: #1c2226 !important;
  font-size: 38px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.028em !important;
  max-width: 18ch;
  margin: 0 auto 10px !important;
  padding-bottom: 0 !important;
}
body.home .et_pb_text_1 .et_pb_text_inner h3::before,
body.home .et_pb_text_1 .et_pb_text_inner h2::before {
  content: attr(data-kicker);
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  font-family: 'myriad_prosemibold', 'myriad_proregular', sans-serif;
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #1f7a43;
  background: #e8f5ec;
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 16px;
  line-height: 1;
}
body.home .et_pb_text_1 .et_pb_text_inner p {
  color: var(--lbm-tenue) !important;
  font-size: 16px !important;
  max-width: 46ch;
  margin: 0 auto !important;
}

body.home .et_pb_shop_2 ul.products {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px !important;
}
html body.et-db #et-boc .et-l .et_pb_shop_2.et_pb_shop .woocommerce ul.products li.product,
body.home .et_pb_shop_2 ul.products li.product,
body.home .et_pb_shop_3 ul.products li.product {
  background: #fff !important;
  border: 1px solid var(--lbm-linea) !important;
  border-radius: 18px !important;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
body.home .et_pb_shop_2 ul.products li.product:hover {
  transform: translateY(-4px);
  border-color: #cfd5d7 !important;
  box-shadow: 0 16px 34px rgba(28,34,38,.13);
}
/* Foto a sangre arriba, sin margenes: aspecto de catalogo. */
html body.et-db #et-boc .et-l .et_pb_shop_2.et_pb_shop .woocommerce ul.products li.product img,
body.home .et_pb_shop_2 ul.products li.product img,
body.home .et_pb_shop_3 ul.products li.product img {
  width: 100% !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
body.home .et_pb_shop_2 .woocommerce-LoopProduct-link,
body.home .et_pb_shop_3 .woocommerce-LoopProduct-link {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  flex: 1;
}
body.home .et_pb_shop_2 .lbm-pcard__marca,
body.home .et_pb_shop_3 .lbm-pcard__marca {
  margin: 14px 15px 0 !important;
  font-size: 10.5px !important;
  letter-spacing: .12em !important;
  color: var(--lbm-naranja) !important;
}
html body.et-db #et-boc .et-l .et_pb_shop_2.et_pb_shop .woocommerce ul.products li.product h2,
body.home .et_pb_shop_2 ul.products li.product .woocommerce-loop-product__title,
body.home .et_pb_shop_3 ul.products li.product .woocommerce-loop-product__title {
  color: #1c2226 !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  margin: 5px 15px 0 !important;
  text-align: left !important;
}
body.home .et_pb_shop_2 ul.products li.product .lbm-pcard__desc,
body.home .et_pb_shop_3 ul.products li.product .lbm-pcard__desc {
  color: var(--lbm-tenue) !important;
  margin: 7px 15px 0 !important;
}
body.home .et_pb_shop_2 .lbm-pcard__precio,
body.home .et_pb_shop_3 .lbm-pcard__precio {
  padding: 12px 15px 15px !important;
  margin-top: auto !important;
  align-items: center !important;
  gap: 8px !important;
  row-gap: 5px !important;
}
html body.et-db #et-boc .et-l .et_pb_shop_2.et_pb_shop .woocommerce ul.products li.product .price,
body.home .et_pb_shop_2 ul.products li.product .price,
body.home .et_pb_shop_3 ul.products li.product .price {
  color: #1c2226 !important;
  font-size: 18px !important;
  align-items: center !important;
  gap: 8px !important;
}
body.home .et_pb_shop_2 ul.products li.product .price del,
body.home .et_pb_shop_3 ul.products li.product .price del {
  color: #aab1b3 !important;
  font-size: 13px !important;
}
body.home .et_pb_shop_2 .lbm-pcard__dto,
body.home .et_pb_shop_3 .lbm-pcard__dto {
  background: #e8f5ec !important;
  color: #1f7a43 !important;
  border-radius: 999px !important;
  padding: 3px 9px !important;
  font-size: 12px !important;
}

/* El velo gris de Divi tapaba la foto. */
body.home .et_pb_shop ul.products li.product .et_overlay { display: none !important; }

/* --- Estrellas sobre la banda oscura ------------------------------------
   WooCommerce pinta el carril de estrellas vacias en ::before a #ccc, que
   sobre el fondo oscuro casi no se ve y ademas ensucia. Se atenua el
   carril y se deja el relleno en ambar. */
body.home .et_pb_shop_0 ul.products li.product .star-rating::before,
body.home .et_pb_shop_1 ul.products li.product .star-rating::before {
  color: rgba(255,255,255,.22) !important;
}
body.home .et_pb_shop_0 ul.products li.product .star-rating span,
body.home .et_pb_shop_1 ul.products li.product .star-rating span {
  color: #ffb457 !important;
}

/* --- El -8px de Divi que solapaba con la seccion siguiente ---------------
   Los modulos de tienda traen margin-bottom:-8px puesto desde el
   constructor, con el selector propio de Divi. Con las tarjetas nuevas,
   mas altas, ese solape dejaba el rotulo "SEMILLAS" encima del ultimo
   producto. Se anula con su misma forma (.et-db es el <body>). */
html body.et-db #et-boc .et-l .et_pb_shop_0,
html body.et-db #et-boc .et-l .et_pb_shop_1,
html body.et-db #et-boc .et-l .et_pb_shop_2,
html body.et-db #et-boc .et-l .et_pb_shop_3 {
  margin-bottom: 0 !important;
}
/* Y un respiro entre el bloque de ofertas y el de semillas. */
html body.et-db #et-boc .et-l .et_pb_text_1 {
  margin-top: 54px !important;
}
@media (max-width: 767px) {
  html body.et-db #et-boc .et-l .et_pb_text_1 { margin-top: 34px !important; }
}

/* --- Contraste de las estrellas sobre la banda oscura ------------------
   Nota: los productos sin resenas no pintan el elemento .star-rating, asi
   que aqui solo llegan valoraciones reales. El relleno va en ambar y el
   carril restante atenuado, para que se lea la nota sin ensuciar. */
body.home .et_pb_shop_0 ul.products li.product .star-rating,
body.home .et_pb_shop_1 ul.products li.product .star-rating {
  opacity: 1 !important;
}
body.home .et_pb_shop_0 ul.products li.product .star-rating span::before,
body.home .et_pb_shop_1 ul.products li.product .star-rating span::before {
  color: #ffb457 !important;
}




/* --------------------------------------------------------------------------
   4. Tablet
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1100px) {
  body.home .et_pb_shop_0 ul.products { grid-template-columns: repeat(2, minmax(0,1fr)); }
  body.home .et_pb_shop_0 ul.products li.product:nth-child(1) { grid-column: span 2; grid-row: auto; }
  body.home .et_pb_shop_2 ul.products { grid-template-columns: repeat(3, minmax(0,1fr)); }
  html body.et-db #et-boc .et-l .et_pb_text_0 .et_pb_text_inner h2 { font-size: 34px !important; }
  html body.et-db #et-boc .et-l .et_pb_text_1 .et_pb_text_inner h3 { font-size: 30px !important; }
}

/* --------------------------------------------------------------------------
   5. Movil: mosaico. Sin carruseles.
   Los modulos de movil traen 4 productos: 1 destacado a lo ancho, 2 en
   pareja y 1 ancho abajo. El destacado va en vertical con la foto grande,
   que en un movil es lo que vende.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

  body.home .et_pb_shop_1 { padding: 4px 0 34px; }
  body.home .et_pb_shop_0::before,
  body.home .et_pb_shop_1::before { top: -205px; }

  body.home .et_pb_text_0 { padding-top: 30px; margin-bottom: 22px !important; }
  html body.et-db #et-boc .et-l .et_pb_text_0 .et_pb_text_inner h2 {
    font-size: 30px !important;
    max-width: 14ch;
  }
  html body.et-db #et-boc .et-l .et_pb_text_1 .et_pb_text_inner h3,
  html body.et-db #et-boc .et-l .et_pb_text_1 .et_pb_text_inner h2 {
    font-size: 27px !important;
    max-width: 15ch;
  }
  body.home .et_pb_text_0 .et_pb_text_inner p,
  body.home .et_pb_text_1 .et_pb_text_inner p { font-size: 14.5px !important; }
  body.home .et_pb_text_0 .et_pb_text_inner h2::before,
  body.home .et_pb_text_1 .et_pb_text_inner h3::before { font-size: 10.5px; padding: 5px 12px; margin-bottom: 14px; }

  body.home .et_pb_shop_1 ul.products,
  body.home .et_pb_shop_3 ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 11px !important;
  }
  /* 1o y 4o a lo ancho. */
  body.home .et_pb_shop_1 ul.products li.product:nth-child(1),
  body.home .et_pb_shop_3 ul.products li.product:nth-child(1),
  body.home .et_pb_shop_1 ul.products li.product:nth-child(4),
  body.home .et_pb_shop_3 ul.products li.product:nth-child(4) {
    grid-column: 1 / -1;
  }
  /* El destacado: foto ancha arriba, texto debajo. */
  body.home .et_pb_shop_1 ul.products li.product:nth-child(1) img,
  body.home .et_pb_shop_3 ul.products li.product:nth-child(1) img {
    aspect-ratio: 16 / 10;
  }
  body.home .et_pb_shop_1 ul.products li.product:nth-child(1) .woocommerce-loop-product__title,
  body.home .et_pb_shop_3 ul.products li.product:nth-child(1) .woocommerce-loop-product__title {
    font-size: 19px !important;
    line-height: 1.2 !important;
  }
  body.home .et_pb_shop_1 ul.products li.product:nth-child(1) .price,
  body.home .et_pb_shop_3 ul.products li.product:nth-child(1) .price {
    font-size: 24px !important;
  }
  /* El cuarto, en horizontal para cerrar el mosaico sin hueco. */
  body.home .et_pb_shop_1 ul.products li.product:nth-child(4) .woocommerce-LoopProduct-link,
  body.home .et_pb_shop_3 ul.products li.product:nth-child(4) .woocommerce-LoopProduct-link {
    display: grid !important;
    grid-template-columns: 34% 1fr;
    grid-template-rows: auto auto auto 1fr;
    column-gap: 12px;
    align-items: start;
  }
  body.home .et_pb_shop_1 ul.products li.product:nth-child(4) .et_shop_image,
  body.home .et_pb_shop_3 ul.products li.product:nth-child(4) .et_shop_image {
    grid-column: 1; grid-row: 1 / -1; align-self: stretch;
  }
  body.home .et_pb_shop_1 ul.products li.product:nth-child(4) img,
  body.home .et_pb_shop_3 ul.products li.product:nth-child(4) img {
    height: 100%; min-height: 96px; aspect-ratio: auto;
  }
  body.home .et_pb_shop_1 ul.products li.product:nth-child(4) .lbm-pcard__marca,
  body.home .et_pb_shop_3 ul.products li.product:nth-child(4) .lbm-pcard__marca {
    grid-column: 2; grid-row: 1; margin: 12px 12px 0 0 !important;
  }
  body.home .et_pb_shop_1 ul.products li.product:nth-child(4) .woocommerce-loop-product__title,
  body.home .et_pb_shop_3 ul.products li.product:nth-child(4) .woocommerce-loop-product__title {
    grid-column: 2; grid-row: 2; margin: 4px 12px 0 0 !important;
  }
  body.home .et_pb_shop_1 ul.products li.product:nth-child(4) .star-rating,
  body.home .et_pb_shop_3 ul.products li.product:nth-child(4) .star-rating {
    grid-column: 2; grid-row: 3; margin: 6px 12px 0 0 !important;
  }
  body.home .et_pb_shop_1 ul.products li.product:nth-child(4) .lbm-pcard__precio,
  body.home .et_pb_shop_3 ul.products li.product:nth-child(4) .lbm-pcard__precio {
    grid-column: 2; grid-row: 4; align-self: end;
    padding: 8px 12px 12px 0 !important;
  }
  /* La descripcion solo cabe en el destacado. */
  body.home .et_pb_shop_1 ul.products li.product:not(:nth-child(1)) .lbm-pcard__desc,
  body.home .et_pb_shop_3 ul.products li.product:not(:nth-child(1)) .lbm-pcard__desc {
    display: none !important;
  }
  body.home .et_pb_shop ul.products li.product .woocommerce-loop-product__title {
    font-size: 13.5px !important;
    margin: 10px 12px 0 !important;
  }
  body.home .et_pb_shop .lbm-pcard__marca { margin: 11px 12px 0 !important; }
  body.home .et_pb_shop .lbm-pcard__precio { padding: 9px 12px 12px !important; }
  body.home .et_pb_shop ul.products li.product .price { font-size: 16.5px !important; }
  body.home .et_pb_shop ul.products li.product .price del { font-size: 12px !important; }
  body.home .et_pb_shop ul.products li.product .star-rating { margin: 7px 12px 0 !important; font-size: 11px !important; }

  /* Sin hover en tactil. */
  body.home .et_pb_shop ul.products li.product:hover { transform: none; box-shadow: none; }
}

/* ==========================================================================
   ARREGLOS DE LA PAGINA DE CATEGORIA (2026-09-01)
   ========================================================================== */

/* --- 1. Tarjetas: Divi las pinta desde la plantilla de cuerpo -------------
   El Theme Builder trae una regla propia

     .et-db #et-boc .et-l .et_pb_shop_0_tb_body.et_pb_shop .woocommerce
     ul.products li.product h2

   con font-size:21px, line-height:1.1em y text-align:center !important, que
   carga despues de este fichero y ganaba a las reglas de .lbm-cat__resultados.
   Los titulos salian a 21px, centrados y partidos en dos lineas cortadas.
   Se replica su misma forma anteponiendo html body.et-db (recordar: .et-db
   ES el <body>, por eso va concatenado) para sumar un escalon. */
html body.et-db #et-boc .et-l .et_pb_shop_0_tb_body.et_pb_shop .woocommerce ul.products li.product h1,
html body.et-db #et-boc .et-l .et_pb_shop_0_tb_body.et_pb_shop .woocommerce ul.products li.product h2,
html body.et-db #et-boc .et-l .et_pb_shop_0_tb_body.et_pb_shop .woocommerce ul.products li.product h3,
html body.et-db #et-boc .et-l .et_pb_shop_0_tb_body.et_pb_shop .woocommerce ul.products li.product .woocommerce-loop-product__title,
html body.et-db #et-boc .et-l .lbm-cat__resultados ul.products li.product h2,
html body.et-db #et-boc .et-l .lbm-cat__resultados ul.products li.product .woocommerce-loop-product__title {
  font-size: 15px !important;
  line-height: 1.32 !important;
  text-align: left !important;
  color: #2c3438 !important;
  font-family: 'myriad_prosemibold', 'myriad_proregular', sans-serif !important;
  margin: 12px 14px 0 !important;
  padding: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* La descripcion y la marca, alineadas igual. */
html body.et-db #et-boc .et-l .lbm-cat__resultados ul.products li.product .lbm-pcard__desc,
html body.et-db #et-boc .et-l .lbm-cat__resultados ul.products li.product .lbm-pcard__marca {
  text-align: left !important;
}

/* --- 2. El precio salia naranja ------------------------------------------
   et-divi-customizer fija

     .woocommerce ul.products li.product .price { color:#ef7d00 !important }

   El naranja es el color de marca y en la tarjeta compite con todo lo demas;
   ademas el precio rebajado ya se distingue por el tachado y la pastilla.
   Se devuelve al gris tinta, como en la home. */
html body.et-db #et-boc .et-l .lbm-cat__resultados ul.products li.product .price,
html body.et-db .woocommerce ul.products li.product .price,
html body.et-db .woocommerce-page ul.products li.product .price {
  color: #2c3438 !important;
  font-size: 18px !important;
  font-family: 'myriad_prosemibold', 'myriad_proregular', sans-serif !important;
}
html body.et-db #et-boc .et-l .lbm-cat__resultados ul.products li.product .price del,
html body.et-db .woocommerce ul.products li.product .price del {
  color: #aab1b3 !important;
  font-size: 13px !important;
}
html body.et-db #et-boc .et-l .lbm-cat__resultados ul.products li.product .price ins,
html body.et-db .woocommerce ul.products li.product .price ins {
  color: #2c3438 !important;
  background: none !important;
  text-decoration: none !important;
}

/* --- 3. Tarjetas de la misma fila, a la misma altura ----------------------
   Las que llevan estrellas o pastilla de descuento crecian y descuadraban
   la fila. El precio se ancla abajo, como en la home. */
.lbm-cat__resultados ul.products li.product {
  display: flex;
  flex-direction: column;
}
.lbm-cat__resultados ul.products li.product .woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.lbm-cat__resultados ul.products li.product .lbm-pcard__precio {
  margin-top: auto !important;
}

/* --- 4. El panel de filtros quedaba por debajo de la cabecera -------------
   .lbm-cat__panel y header.lbm-head tenian los dos z-index:99999. A igualdad
   gana el que va despues en el DOM, que es la cabecera: al desplegar el
   filtro en movil, la cabecera se pintaba encima y tapaba los primeros
   elementos de la lista. El panel sube por encima. */
.lbm-cat__panel {
  z-index: 100002 !important;
}
.lbm-cat__panel-overlay,
.lbm-cat__velo {
  z-index: 100001 !important;
}

/* --- 5. Movil: las tarjetas no llenaban su columna ------------------------
   Divi inyecta en linea (hoja "inline", gana a cualquier fichero):

     @media (max-width:767px) .woocommerce-page ul.products li.product:nth-child(n)
       { width: 45.25% !important }
     @media (max-width:479px) ... { width: 100% !important }

   Eso es maquetacion con porcentajes y floats, pensada para el <ul> en
   block. Aqui el <ul> es Grid, asi que ese 45,25% se aplica DENTRO de una
   celda que ya mide la mitad: la tarjeta quedaba en 76px de los 158
   disponibles, con la foto a 54px y los titulos partidos.

   Se anula con la misma forma de Divi (:nth-child(n) incluido) mas
   html body.et-db para ganar el escalon. El reparto lo hace la rejilla. */
@media (max-width: 767px) {
  html body.et-db .woocommerce ul.products li.product:nth-child(n),
  html body.et-db .woocommerce-page ul.products li.product:nth-child(n),
  html body.et-db .lbm-cat__resultados ul.products li.product:nth-child(n) {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
  }

  /* La rejilla, a dos columnas reales y a todo el ancho. */
  html body.et-db .lbm-cat__resultados ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 11px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* La foto vuelve a ocupar la tarjeta entera. */
  html body.et-db .lbm-cat__resultados ul.products li.product img {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    object-position: top center;
    margin: 0 !important;
    background: #fff;
    padding: 0 !important;
  }

  /* Textos compactos para dos columnas. */
  html body.et-db #et-boc .et-l .lbm-cat__resultados ul.products li.product h2,
  html body.et-db #et-boc .et-l .lbm-cat__resultados ul.products li.product .woocommerce-loop-product__title,
  html body.et-db #et-boc .et-l .et_pb_shop_0_tb_body.et_pb_shop .woocommerce ul.products li.product h2 {
    font-size: 13.5px !important;
    line-height: 1.3 !important;
    margin: 9px 11px 0 !important;
  }
  html body.et-db .lbm-cat__resultados ul.products li.product .lbm-pcard__marca {
    margin: 10px 11px 0 !important;
    font-size: 10px !important;
  }
  html body.et-db .lbm-cat__resultados ul.products li.product .lbm-pcard__desc {
    display: none !important;   /* en dos columnas no cabe */
  }
  html body.et-db .lbm-cat__resultados ul.products li.product .lbm-pcard__precio {
    padding: 8px 11px 11px !important;
    gap: 6px !important;
    row-gap: 4px !important;
  }
  html body.et-db #et-boc .et-l .lbm-cat__resultados ul.products li.product .price,
  html body.et-db .woocommerce ul.products li.product .price {
    font-size: 15.5px !important;
    gap: 6px !important;
  }
  html body.et-db .woocommerce ul.products li.product .price del {
    font-size: 11.5px !important;
  }
  /* El precio por rango ("9,00 € - 39,00 €") se partia en tres lineas. */
  html body.et-db .lbm-cat__resultados ul.products li.product .price .woocommerce-Price-amount {
    white-space: nowrap;
  }
}

/* Por debajo de 480px Divi fuerza width:100% (una sola columna). Se mantienen
   las dos columnas: con la foto cuadrada caben de sobra. */
@media (max-width: 479px) {
  html body.et-db .woocommerce ul.products li.product:nth-child(n),
  html body.et-db .woocommerce-page ul.products li.product:nth-child(n),
  html body.et-db .lbm-cat__resultados ul.products li.product:nth-child(n) {
    width: auto !important;
    max-width: none !important;
  }
  html body.et-db .lbm-cat__resultados ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* ==========================================================================
   TARJETA COMPACTA DE CATEGORIA (2026-09-01)
   --------------------------------------------------------------------------
   Criterio: maximo aprovechamiento del espacio. Nombre completo, foto mas
   grande, cero huecos muertos, y todo lo que antes sumaba alto (el % de
   descuento en su linea, la descripcion de dos lineas variables) fuera del
   flujo o convertido en una linea fija.
   ========================================================================== */

.lbm-cat__resultados ul.products li.product {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}

/* --- La foto, mas grande y sin marco ------------------------------------
   Antes tenia padding por los cuatro lados y fondo blanco: el producto se
   veia pequeno en el centro de un marco vacio. Ahora ocupa el ancho entero
   de la tarjeta. */
html body.et-db .lbm-cat__resultados ul.products li.product .woocommerce-LoopProduct-link {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  flex: 1;
}
html body.et-db .lbm-cat__resultados ul.products li.product .et_shop_image,
html body.et-db .lbm-cat__resultados ul.products li.product img {
  width: 100% !important;
  max-width: 100% !important;
  display: block;
  margin: 0 !important;
  border-radius: 0 !important;
}
html body.et-db .lbm-cat__resultados ul.products li.product img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: top center;
  background: #fff;
  padding: 0 !important;
}

/* --- El % de descuento, superpuesto sobre la foto ------------------------
   Fuera del flujo: no suma ni un pixel de alto a la tarjeta. */
html body.et-db .lbm-cat__resultados ul.products li.product .lbm-pcard__dto {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  margin: 0 !important;
  background: #ef7d00 !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 3px 9px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-family: 'myriad_prosemibold', 'myriad_proregular', sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  white-space: nowrap;
}

/* --- La marca ------------------------------------------------------------ */
html body.et-db .lbm-cat__resultados ul.products li.product .lbm-pcard__marca {
  margin: 10px 11px 0 !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
  line-height: 1.2 !important;
}

/* --- El nombre, COMPLETO -------------------------------------------------
   Se quita el recorte a dos lineas: el criterio es que se lea entero. Con
   13px y 1.25 de interlineado, un nombre largo ocupa tres lineas cortas y
   sigue siendo mas compacto que antes, porque hemos quitado la descripcion
   de dos lineas y la fila del descuento. */
html body.et-db #et-boc .et-l .lbm-cat__resultados ul.products li.product h2,
html body.et-db #et-boc .et-l .lbm-cat__resultados ul.products li.product .woocommerce-loop-product__title,
html body.et-db #et-boc .et-l .et_pb_shop_0_tb_body.et_pb_shop .woocommerce ul.products li.product h2 {
  font-size: 13px !important;
  line-height: 1.25 !important;
  margin: 4px 11px 0 !important;
  display: block !important;
  -webkit-line-clamp: none !important;
  overflow: visible !important;
  text-align: left !important;
}

/* --- Las categorias, una sola linea deslizable ---------------------------
   Sustituyen a la mini descripcion. Altura fija pase lo que pase: la
   categoria que se esta viendo va primera y marcada, y las demas se
   alcanzan deslizando el dedo. */
.lbm-cat__resultados .lbm-pcard__cats {
  display: flex;
  gap: 5px;
  margin: 7px 0 0 11px;
  padding: 0 11px 0 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.lbm-cat__resultados .lbm-pcard__cats::-webkit-scrollbar { display: none; }
.lbm-cat__resultados .lbm-pcard__cat {
  flex: 0 0 auto;
  scroll-snap-align: start;
  background: #f1f3f4;
  color: #6b7478;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 10.5px;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.lbm-cat__resultados .lbm-pcard__cat:hover {
  background: #e3e6e8;
  color: #2c3438;
}
.lbm-cat__resultados .lbm-pcard__cat.is-actual {
  background: #fdf0e2;
  color: #c96500;
}

/* --- El precio ----------------------------------------------------------- */
html body.et-db .lbm-cat__resultados ul.products li.product .lbm-pcard__precio {
  padding: 9px 11px 11px !important;
  margin-top: auto !important;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  row-gap: 2px;
}
html body.et-db #et-boc .et-l .lbm-cat__resultados ul.products li.product .price,
html body.et-db .woocommerce ul.products li.product .price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 !important;
}
/* El PVP tachado, delante del precio rebajado. */
html body.et-db .lbm-cat__resultados ul.products li.product .price del {
  order: -1;
  opacity: 1;
}
html body.et-db .lbm-cat__resultados ul.products li.product .price ins {
  text-decoration: none !important;
  background: none !important;
}
/* El rango largo ya no existe, pero por si algun producto lo devuelve. */
html body.et-db .lbm-cat__resultados ul.products li.product .price .woocommerce-Price-amount {
  white-space: nowrap;
}

/* --- Los formatos (1u. / 5u.) -------------------------------------------- */
.lbm-cat__resultados ul.products li.product .lbm-pcard__vars {
  padding: 0 11px 10px !important;
  gap: 5px;
}
.lbm-cat__resultados ul.products li.product .lbm-pcard__var {
  padding: 3px 8px;
  font-size: 11.5px;
  border-radius: 7px;
}

/* --------------------------------------------------------------------------
   BARRA DE FILTRO Y ORDEN, EN UNA SOLA FILA
   -------------------------------------------------------------------------- */
.lbm-cat__barra {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.lbm-cat__barra-izq,
.lbm-cat__barra-der {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.lbm-cat__barra-der { margin-left: auto; }

/* El recuento de productos no aporta y roba sitio. */
.lbm-cat__cuenta { display: none !important; }

/* El boton de filtrar, con mas presencia. */
html body.et-db .lbm-cat__abrir {
  background: #2c3438;
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 9px 15px;
  font-family: 'myriad_prosemibold', 'myriad_proregular', sans-serif;
  font-size: 14px;
  line-height: 1.2;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s ease;
}
html body.et-db .lbm-cat__abrir:hover { background: #ef7d00; }
html body.et-db .lbm-cat__abrir svg { flex: 0 0 auto; }

/* El desplegable de orden, al lado y en la misma linea. */
.lbm-cat__ordlabel { display: none !important; }
html body.et-db .lbm-cat__barra .woocommerce-ordering { margin: 0 !important; }
html body.et-db .lbm-cat__barra select.orderby {
  border: 1px solid #dde1e3;
  border-radius: 10px;
  padding: 9px 30px 9px 12px;
  font-size: 13.5px;
  line-height: 1.2;
  color: #2c3438;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%236b7478' stroke-width='1.7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  appearance: none;
  -webkit-appearance: none;
  max-width: 100%;
  text-overflow: ellipsis;
  cursor: pointer;
}

/* --- Movil --------------------------------------------------------------- */
@media (max-width: 767px) {
  .lbm-cat__barra { gap: 8px; }
  html body.et-db .lbm-cat__abrir { padding: 9px 14px; font-size: 13.5px; }
  html body.et-db .lbm-cat__barra select.orderby {
    padding: 9px 28px 9px 11px;
    font-size: 13px;
  }
  /* La seleccion, en una linea. */
  .lbm-cat__barra-der { flex: 1; justify-content: flex-end; min-width: 0; }
  html body.et-db .lbm-cat__barra .woocommerce-ordering { min-width: 0; flex: 1; max-width: 190px; }
  html body.et-db .lbm-cat__barra select.orderby { width: 100%; }

  html body.et-db #et-boc .et-l .lbm-cat__resultados ul.products li.product h2,
  html body.et-db #et-boc .et-l .lbm-cat__resultados ul.products li.product .woocommerce-loop-product__title {
    font-size: 12.5px !important;
    margin: 4px 9px 0 !important;
  }
  html body.et-db .lbm-cat__resultados ul.products li.product .lbm-pcard__marca { margin: 9px 9px 0 !important; }
  .lbm-cat__resultados .lbm-pcard__cats { margin-left: 9px; padding-right: 9px; }
  html body.et-db .lbm-cat__resultados ul.products li.product .lbm-pcard__precio { padding: 8px 9px 10px !important; }
  .lbm-cat__resultados ul.products li.product .lbm-pcard__vars { padding: 0 9px 9px !important; }
}

/* --- Densidad final del titulo (2026-09-01) -----------------------------
   Divi fija el tamano con el selector que lleva el INDICE del modulo
   (.et_pb_shop_0_tb_body), un escalon por encima del generico. Se replica
   con html body.et-db delante para ganarle tambien en movil. */
html body.et-db #et-boc .et-l .et_pb_shop_0_tb_body.et_pb_shop .woocommerce ul.products li.product h2,
html body.et-db #et-boc .et-l .et_pb_shop_0_tb_body.et_pb_shop .woocommerce ul.products li.product h3,
html body.et-db #et-boc .et-l .et_pb_shop_0_tb_body.et_pb_shop .woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 13px !important;
  line-height: 1.25 !important;
  text-align: left !important;
  margin: 4px 11px 0 !important;
  display: block !important;
  -webkit-line-clamp: none !important;
  overflow: visible !important;
}
@media (max-width: 767px) {
  html body.et-db #et-boc .et-l .et_pb_shop_0_tb_body.et_pb_shop .woocommerce ul.products li.product h2,
  html body.et-db #et-boc .et-l .et_pb_shop_0_tb_body.et_pb_shop .woocommerce ul.products li.product h3,
  html body.et-db #et-boc .et-l .et_pb_shop_0_tb_body.et_pb_shop .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 12.5px !important;
    line-height: 1.24 !important;
    margin: 4px 9px 0 !important;
  }
}

/* El titulo del bloque "Una seleccion hecha para ti" ocupaba dos lineas
   enormes en movil y empujaba los productos fuera de pantalla. */
@media (max-width: 767px) {
  html body.et-db #et-boc .et-l .lbm-cat h2,
  html body.et-db #et-boc .et-l .lbm-cat__titulo {
    font-size: 22px !important;
    line-height: 1.15 !important;
  }
}


/* ==========================================================================
   MAS ANCHO PARA LOS PRODUCTOS (2026-09-01)
   --------------------------------------------------------------------------
   En movil se perdian 63px de los 390 de pantalla antes de llegar a las
   tarjetas: 19,5px por lado del .et_pb_row de Divi + 12px por lado del
   .lbm-cat. Con dos columnas eso son ~31px menos por tarjeta, que es justo
   lo que falta para que quepa una linea mas de titulo.

   Se recorta el margen exterior y el aire se devuelve DENTRO de la
   tarjeta, que es donde se ve.
   ========================================================================== */

/* La fila de Divi que envuelve el listado. Solo la de la plantilla de
   categoria (_tb_body), para no tocar el resto de la web. */
html body.et-db #et-boc .et-l .et_pb_row_4_tb_body,
html body.et-db #et-boc .et-l .et_pb_section_3_tb_body .et_pb_row {
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.lbm-cat {
  padding-left: 10px;
  padding-right: 10px;
}

/* --- Aire interior de la tarjeta ---------------------------------------
   El texto no debe pegarse al borde: se sube el colchon interior de 11 a
   12px, que con el ancho recuperado sigue dejando mas sitio util que antes. */
html body.et-db .lbm-cat__resultados ul.products li.product .lbm-pcard__marca {
  margin: 11px 12px 0 !important;
}
html body.et-db #et-boc .et-l .lbm-cat__resultados ul.products li.product h2,
html body.et-db #et-boc .et-l .lbm-cat__resultados ul.products li.product .woocommerce-loop-product__title,
html body.et-db #et-boc .et-l .et_pb_shop_0_tb_body.et_pb_shop .woocommerce ul.products li.product h2 {
  margin: 5px 12px 0 !important;
}
html body.et-db .lbm-cat__resultados ul.products li.product .lbm-pcard__precio {
  padding: 10px 12px 12px !important;
}
.lbm-cat__resultados ul.products li.product .lbm-pcard__vars {
  padding: 0 12px 11px !important;
}

@media (max-width: 767px) {
  .lbm-cat {
    padding-left: 8px;
    padding-right: 8px;
  }
  html body.et-db .lbm-cat__resultados ul.products { gap: 9px !important; }

  html body.et-db .lbm-cat__resultados ul.products li.product .lbm-pcard__marca {
    margin: 10px 11px 0 !important;
  }
  html body.et-db #et-boc .et-l .lbm-cat__resultados ul.products li.product h2,
  html body.et-db #et-boc .et-l .lbm-cat__resultados ul.products li.product .woocommerce-loop-product__title,
  html body.et-db #et-boc .et-l .et_pb_shop_0_tb_body.et_pb_shop .woocommerce ul.products li.product h2 {
    margin: 4px 11px 0 !important;
  }
  html body.et-db .lbm-cat__resultados ul.products li.product .lbm-pcard__precio {
    padding: 9px 11px 11px !important;
  }
  .lbm-cat__resultados ul.products li.product .lbm-pcard__vars {
    padding: 0 11px 10px !important;
  }
}

/* --------------------------------------------------------------------------
   MIGAS DE PAN con el mismo lenguaje que las pastillas
   --------------------------------------------------------------------------
   Van solo arriba de la categoria y de la ficha, que es donde ubican al
   cliente. En una sola linea deslizable: en movil "Inicio / Fertilizantes /
   Fabricantes / Great Hydro / +Peso Engorde" ocupaba tres lineas.
   -------------------------------------------------------------------------- */
html body.et-db #et-boc .et-l .et_pb_wc_breadcrumb .woocommerce-breadcrumb,
html body.et-db .woocommerce-breadcrumb {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 !important;
  padding: 2px 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  line-height: 1.4;
  font-size: 11.5px;
}
/* Los separadores "/" los envuelve el JS en .lbm-mig__sep para poder
   ocultarlos sin afectar al texto de la pagina actual. */
html body.et-db .woocommerce-breadcrumb .lbm-mig__sep { display: none; }
/* La pagina actual: misma pastilla pero marcada, como la chip "is-actual". */
html body.et-db .woocommerce-breadcrumb .lbm-mig__actual {
  flex: 0 0 auto;
  background: #fdf0e2;
  color: #c96500;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 11.5px;
  line-height: 1.45;
}
html body.et-db .woocommerce-breadcrumb::-webkit-scrollbar { display: none; }

html body.et-db #et-boc .et-l .et_pb_wc_breadcrumb .woocommerce-breadcrumb a,
html body.et-db .woocommerce-breadcrumb a {
  flex: 0 0 auto;
  background: #f1f3f4;
  color: #6b7478 !important;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 11.5px;
  line-height: 1.45;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease;
}
html body.et-db .woocommerce-breadcrumb a:hover {
  background: #e3e6e8;
  color: #2c3438 !important;
}

/* La ultima miga (la pagina actual) es texto suelto, no un <a>: se le
   devuelve tamano y se marca en naranja, como la chip "actual". */
html body.et-db #et-boc .et-l .et_pb_wc_breadcrumb .woocommerce-breadcrumb::after,
html body.et-db .woocommerce-breadcrumb::after {
  content: "";
  flex: 0 0 4px;
}

/* --- La foto, con el mismo redondeo que la tarjeta ---------------------
   La tarjeta tiene 14px de radio; la foto iba a canto vivo y rompia la
   forma. El radio real lo fija el bloque del final del fichero. */
html body.et-db .lbm-cat__resultados ul.products li.product .et_shop_image {
  overflow: hidden;
  display: block;
}

/* --- El bloque de variantes, sin hueco cuando esta plegado --------------
   .lbm-pcard__vars va con max-height:0 y opacity:0 hasta que se pasa el
   raton, pero conservaba 10px de padding inferior: dejaba una franja
   vacia bajo el precio en todas las tarjetas. */
.lbm-cat__resultados ul.products li.product .lbm-pcard__vars {
  padding-bottom: 0 !important;
}
.lbm-cat__resultados ul.products li.product:hover .lbm-pcard__vars,
.lbm-cat__resultados ul.products li.product:focus-within .lbm-pcard__vars {
  padding-bottom: 11px !important;
}
@media (hover: none) {
  /* En tactil las variantes van siempre visibles, asi que el aire vuelve. */
  .lbm-cat__resultados ul.products li.product .lbm-pcard__vars {
    padding-bottom: 11px !important;
  }
}


/* ==========================================================================
   AJUSTES DE CATEGORIA (2026-09-01, segunda tanda)
   ========================================================================== */

/* --- 1. Las migas arrastraban la pagina ---------------------------------
   El <nav> es flex: con overflow-x:auto pero sin ancho maximo crecia hasta
   caber su contenido (454px en una pantalla de 390) y estiraba el body a
   493px, dejando la franja blanca a la derecha al deslizar. Hay que
   limitarlo explicitamente. */
.woocommerce-breadcrumb {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
/* Y que ningun antepasado se estire por su culpa. */
.et_pb_wc_breadcrumb,
.et_pb_wc_breadcrumb .et_pb_module_inner {
  max-width: 100%;
  overflow: hidden;
}

/* --- 2. La mini descripcion, de vuelta bajo el nombre ------------------- */
html body.et-db .lbm-cat__resultados ul.products li.product .lbm-pcard__desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
  color: #7b8487 !important;
  margin: 5px 12px 0 !important;
}
@media (max-width: 767px) {
  html body.et-db .lbm-cat__resultados ul.products li.product .lbm-pcard__desc {
    font-size: 11px !important;
    margin: 4px 11px 0 !important;
  }
}

/* --- 3. Los formatos, siempre visibles y con el actual marcado ----------
   Antes se desplegaban al pasar el raton y no habia ninguno marcado: el
   cliente no sabia a que formato correspondia el precio. Ahora se ven
   siempre y el mas barato (el del precio mostrado) va en naranja. */
.lbm-cat__resultados ul.products li.product .lbm-pcard__vars {
  max-height: none !important;
  opacity: 1 !important;
  padding-bottom: 11px !important;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
html body.et-db .lbm-cat__resultados ul.products li.product .lbm-pcard__var.is-sel {
  background-color: #fdf0e2 !important;
  border-color: #ef7d00 !important;
  color: #c96500 !important;
  font-family: 'myriad_prosemibold', 'myriad_proregular', sans-serif;
}

/* --- 4. El boton de filtrar, naranja ------------------------------------ */
html body.et-db .lbm-cat__abrir {
  background: #ef7d00 !important;
  color: #fff !important;
}
html body.et-db .lbm-cat__abrir:hover {
  background: #d97100 !important;
}

/* El rotulo "Filtrar" de la cabecera del panel, tambien naranja. */
html body.et-db .lbm-cat__panelhead,
html body.et-db .lbm-cat__panelhead > span,
html body.et-db .lbm-cat__panelhead strong {
  color: #ef7d00 !important;
}

/* --- 5. Los filtros marcados, en naranja --------------------------------
   Se pueden marcar varios a la vez (ya lo permitia el panel); lo que
   faltaba era que se notara cual esta activo. */
html body.et-db .lbm-cat__opcion.is-sel,
html body.et-db .lbm-cat__opcion[aria-pressed="true"],
html body.et-db .lbm-cat__opcion.is-activo {
  color: #c96500 !important;
  font-family: 'myriad_prosemibold', 'myriad_proregular', sans-serif;
}
html body.et-db .lbm-cat__opcion input[type="checkbox"] {
  accent-color: #ef7d00;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
html body.et-db .lbm-cat__opcion input[type="checkbox"]:checked + span,
html body.et-db .lbm-cat__opcion:has(input:checked) {
  color: #c96500 !important;
}

/* --- La casilla del filtro activo, rellena y con tick -------------------
   Solo cambiaba el color del borde: a simple vista no se distinguia de una
   sin marcar. Se rellena en naranja con la marca de verificacion dentro. */
html body.et-db .lbm-cat__opcion.is-activo .lbm-cat__marca-box {
  background-color: #ef7d00 !important;
  border-color: #ef7d00 !important;
  position: relative;
}
html body.et-db .lbm-cat__opcion.is-activo .lbm-cat__marca-box::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
/* Al pasar por encima de una sin marcar, se insinua. */
html body.et-db .lbm-cat__opcion:hover .lbm-cat__marca-box {
  border-color: #ef7d00 !important;
}

/* --- El precio, siempre anclado abajo -----------------------------------
   Con la mini descripcion de vuelta, las de una linea dejaban el precio a
   media altura mientras que las de dos lo empujaban abajo: dentro de una
   misma fila no coincidian. El bloque de precio empuja hacia abajo y el de
   formatos queda pegado a el. */
.lbm-cat__resultados ul.products li.product .woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
html body.et-db .lbm-cat__resultados ul.products li.product .lbm-pcard__precio {
  margin-top: auto !important;
}



/* --- La foto, sin marco gris -------------------------------------------
   Habia dos fondos grises (#f4f6f7 en escritorio, #f7f8f9 en movil) mas
   6-8px de padding: aunque la foto fuese 600x600 exactos, el marco se
   comia un 10% del cuadro y se veia como un recuadro gris alrededor del
   producto. Quitado el padding y el fondo pasa a blanco.

   Se mantiene object-fit:contain a proposito. De 400 fichas, 371 se
   sirven ya cuadradas y rellenan el cuadro entero; las 29 restantes van
   de 423x600 a 600x579, y con cover se les recortaria hasta un 30% de
   imagen, cortando el envase. Con contain sobre blanco se ven enteras y
   el sobrante no se distingue de la tarjeta, que tambien es blanca. */

/* --- La foto, sin tocar el canto de la tarjeta --------------------------
   Al quitar el fondo gris se quito tambien el padding, y la foto paso a
   ocupar el 100% exacto del ancho: quedaba pegada a los bordes y las
   esquinas redondeadas de la tarjeta la mordian. Ademas quedaba una regla
   suelta de una tanda anterior (padding:4px !important dentro del
   @media de movil) que iba despues y ganaba por el !important, asi que el
   padding:0 de arriba no llegaba a aplicarse nunca en movil.

   Ahora el aire lo pone el contenedor, no la imagen: asi la foto respira
   por los cuatro lados y el redondeo lo recorta el contenedor, que es
   quien tiene la forma de la tarjeta. */
html body.et-db .lbm-cat__resultados ul.products li.product .et_shop_image {
  border-radius: 13px 13px 0 0 !important;
  overflow: hidden;
  display: block;
  background: #fff;
}
html body.et-db .lbm-cat__resultados ul.products li.product img {
  padding: 10px 10px 4px !important;
  background: #fff;
  /* El redondeo lo recorta .et_shop_image. Si se le pone tambien a la
     imagen se dibuja por dentro del padding blanco y no se ve: la esquina
     que asoma es el canto recto de ese relleno. */
  border-radius: 0 !important;
}
@media (max-width: 767px) {
  html body.et-db .lbm-cat__resultados ul.products li.product img {
    padding: 8px 8px 3px !important;
  }
}

/* --- El descuento de la home, superpuesto sobre la foto -----------------
   En las categorias la pildora va absoluta sobre la imagen; en la home se
   habia quedado en el flujo (position:static), asi que ocupaba su linea y
   empujaba la foto hacia abajo: las imagenes de la fila no coincidian
   segun tuvieran descuento o no. Mismo tratamiento que en categoria. */
body.home .et_pb_shop ul.products li.product {
  position: relative;
}
body.home .et_pb_shop ul.products li.product .lbm-pcard__dto {
  position: absolute !important;
  top: 8px;
  left: 8px;
  z-index: 3;
  margin: 0 !important;
  line-height: 1.35 !important;
  white-space: nowrap;
}
/* El destacado grande de la primera fila, un poco mas separado del borde. */
body.home .et_pb_shop_0 ul.products li.product:nth-child(1) .lbm-pcard__dto {
  top: 12px;
  left: 12px;
}


/* --- Estrellas: no pegadas al borde, color Google ---------------- */
html body.et-db .lbm-cat__resultados ul.products li.product .star-rating,
.lbm-cat__resultados ul.products li.product .star-rating,
.lbm-pcard .star-rating {
  float: none !important;
  display: block !important;
  margin: 6px 12px 8px !important;
  padding: 0 !important;
  font-size: 14px !important;
  width: 5.4em;
  color: #FABB05 !important;
}
html body.et-db .lbm-cat__resultados ul.products li.product .star-rating::before,
.lbm-cat__resultados ul.products li.product .star-rating::before,
.lbm-pcard .star-rating::before {
  color: #e0e0e0 !important;
}
html body.et-db .lbm-cat__resultados ul.products li.product .star-rating span,
html body.et-db .lbm-cat__resultados ul.products li.product .star-rating span::before,
.lbm-cat__resultados ul.products li.product .star-rating span::before,
.lbm-pcard .star-rating span::before {
  color: #FABB05 !important;
}

/* --- Realce suave de la foto al pasar el raton -------------------
   Nada de lupa que persigue al cursor: en una rejilla de 24 productos
   eso marea. Un 4% basta para decir "esto se puede pulsar". */
html body.et-db .lbm-cat__resultados ul.products li.product .et_overlay,
.lbm-cat__resultados ul.products li.product .et_overlay {
  display: none !important;
}
html body.et-db .lbm-cat__resultados ul.products li.product .et_shop_image,
.lbm-cat__resultados ul.products li.product .et_shop_image {
  overflow: hidden;
}
html body.et-db .lbm-cat__resultados ul.products li.product .et_shop_image img,
.lbm-cat__resultados ul.products li.product .et_shop_image img {
  transform-origin: 50% 50%;
  transition: transform .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  html body.et-db .lbm-cat__resultados ul.products li.product:hover .et_shop_image img,
  .lbm-cat__resultados ul.products li.product:hover .et_shop_image img {
    transform: scale(1.04);
  }
}
@media (prefers-reduced-motion: reduce) {
  html body.et-db .lbm-cat__resultados ul.products li.product .et_shop_image img,
  .lbm-cat__resultados ul.products li.product .et_shop_image img {
    transition: none;
    transform: none !important;
  }
}

/* ==========================================================================
   Panel de filtros: formulario, no enlaces
   --------------------------------------------------------------------------
   Cada valor era un <a> con la combinacion ya montada en el href. Una
   categoria ofrecia 45, y cada uno llevaba a otra pagina con otros 45: un
   arbol sin fondo que los rastreadores recorrieron entero — el 12/09/2026 el
   rastreador de Meta pidio 79.533 combinaciones distintas en un dia, el 85%
   del trafico del sitio, y el 11/09 tumbo el PHP. Ahora son casillas dentro
   de un <form method="get">: la URL que sale es la misma, pero no hay nada
   que rastrear, porque ningun rastreador envia formularios.
   ========================================================================== */

/* El formulario no debe contar para el layout: en movil el panel es un flex
   en columna con .lbm-cat__grupos scrollable, y un bloque por medio lo rompe. */
.lbm-cat__form { display: contents; }

/* La casilla real se oculta: la que se ve sigue siendo .lbm-cat__marca-box,
   dibujada con CSS igual que antes. */
.lbm-cat__opcion { cursor: pointer; }
.lbm-cat__opcion .lbm-cat__check {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}
.lbm-cat__opcion .lbm-cat__check:focus-visible ~ .lbm-cat__marca-box {
  outline: 2px solid var(--lbm-naranja);
  outline-offset: 2px;
}

/* Estado marcado en vivo, sin esperar a la recarga y sin depender del JS. */
html body.et-db .lbm-cat__opcion:has(.lbm-cat__check:checked) {
  color: #c96500 !important;
}
html body.et-db .lbm-cat__opcion:has(.lbm-cat__check:checked) .lbm-cat__marca-box {
  background-color: #ef7d00 !important;
  border-color: #ef7d00 !important;
}
html body.et-db .lbm-cat__opcion:has(.lbm-cat__check:checked) .lbm-cat__marca-box::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* "Aplicar filtros": solo lo ve quien no tiene JavaScript. Con JS cada cambio
   navega solo y el propio JS marca el formulario con .is-auto. */
.lbm-cat__aplicar { padding: 4px 16px 16px; }
.lbm-cat__aplicar button {
  width: 100%;
  background: var(--lbm-naranja);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 11px;
  cursor: pointer;
  font-size: 14.5px;
  font-family: 'myriad_prosemibold', 'myriad_proregular', sans-serif;
}
.lbm-cat__form.is-auto .lbm-cat__aplicar { display: none; }

/* "Ver resultados" pasa de enlace a boton de envio. */
.lbm-cat__panelpie .lbm-cat__ver {
  width: 100%;
  border: 0;
  cursor: pointer;
  font-size: 15px;
}

/* En movil ya esta el pie del cajon: dos botones seguidos sobran. */
@media (max-width: 980px) {
  .lbm-cat__aplicar { display: none; }
}

/* Los colores del panel, tambien cuando sale de .lbm-cat
   --------------------------------------------------------------------------
   En movil el JS cuelga el panel del <body> para que la cabecera pegajosa no
   se le pinte encima. Al salir de .lbm-cat perdia las variables, que estaban
   declaradas solo ahi: el tick de la casilla marcada se quedaba sin relleno y
   el boton "Ver resultados" salia con texto blanco sobre fondo transparente,
   o sea invisible. Se declaran tambien en el panel. */
.lbm-cat__panel {
  --lbm-naranja: #ef7d00;
  --lbm-gris: #445055;
  --lbm-linea: #e3e6e8;
  --lbm-suave: #f6f7f8;
}