/* ==========================================================================
   Arreglos de compatibilidad con Divi 5
   --------------------------------------------------------------------------
   Rejilla "Explora por Categor\u00edas" (shortcode subcategorias_divi_blurb).

   En Divi 4 la clase .et_pb_column_1_6 daba a cada columna su 16,6% de ancho.
   En Divi 5 esa clase ya no lleva anchura, asi que cada tarjeta se encogia
   hasta el ancho de su texto y quedaban de tamanos distintos. Aqui la fila
   pasa a ser una rejilla de columnas iguales, independiente de las clases
   heredadas de Divi.
   ========================================================================== */

.subcategorias-producto{
  /* Grid y no flex: en flex el ancho lo declara cada hijo, y Divi reaplica
     width/margin sobre .et_pb_column desde varias hojas que cargan despues
     de esta. En Grid el reparto lo hace el contenedor y esas reglas ya no
     pueden romper el numero de columnas. */
  display:grid !important;
  /* auto-fit y no repeat(6,1fr): el numero de subcategorias varia por
     categoria (Armarios tiene 2, Fertilizantes 11). Con 6 columnas fijas,
     una categoria de 2 dejaba 4 celdas vacias y las tarjetas encogidas a
     un tercio del ancho disponible. Con auto-fit la rejilla crea solo las
     columnas que necesita, hasta 6, y las reparte a lo ancho.
     El minmax pone el suelo: por debajo de 150px el nombre de la categoria
     se parte en demasiadas lineas. */
  /* El maximo de 230px evita el efecto contrario: una categoria con solo
     2 subcategorias repartia los 1030px disponibles en tarjetas de 501px,
     desproporcionadas frente al icono que contienen. Con el techo, dos
     tarjetas se quedan en su tamano natural y la fila se centra. */
  grid-template-columns:repeat(auto-fit,minmax(150px,230px));
  justify-content:center;
  align-items:stretch;
  gap:22px;
  max-width:1200px;
  margin:0 auto !important;
  padding:0;
}

/* Cada columna es la tarjeta: conserva su borde y su radio. */
/* Cada columna es la tarjeta: ocupa su celda de grid completa. El ancho
   lo fija la rejilla del contenedor, no la columna \u2014 asi los margenes y
   anchos que Divi reaplica (width:45% desde et-core-unified, entre otros)
   no pueden encoger la tarjeta ni empujarla a otra fila. */
.subcategorias-producto > .et_pb_column{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  flex:none !important;
  margin:0 !important;
  padding:18px 12px !important;
  float:none !important;
  display:flex !important;
  flex-direction:column;
  box-sizing:border-box;
}

.subcategorias-producto > .et_pb_column > .et_pb_blurb{
  display:flex !important;
  flex-direction:column;
  flex:1;
  width:100%;
  margin:0 !important;
  padding:0 !important;
}

.subcategorias-producto .et_pb_blurb_content{
  display:flex;
  flex-direction:column;
  flex:1;
  width:100% !important;
  max-width:none !important;
  padding:0 !important;
  margin:0 !important;
}

/* La imagen: caja de altura fija y centrada. Divi 5 impone su propio display
   y anchura sobre estos nodos, por eso hace falta !important. */
.subcategorias-producto .et_pb_main_blurb_image{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:132px !important;
  width:100% !important;
  margin:0 0 12px !important;
  padding:0 !important;
}
.subcategorias-producto .et_pb_main_blurb_image a,
.subcategorias-producto .et_pb_main_blurb_image .et_pb_image_wrap{
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  line-height:0 !important;
}
.subcategorias-producto .et_pb_main_blurb_image img{
  display:block !important;
  width:132px !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 !important;
}

/* El titulo queda siempre abajo, de modo que todas las tarjetas se alinean. */
.subcategorias-producto .et_pb_blurb_container{
  margin-top:auto;
  width:100%;
  text-align:center;
}
.subcategorias-producto .et_pb_module_header{
  margin:0;
  padding:0;
  font-size:15px;
  line-height:1.25;
  min-height:3.75em;      /* 3 lineas: todas las tarjetas acaban igual de altas */
  display:flex;
  align-items:center;
  justify-content:center;
  overflow-wrap:break-word;   /* sin hyphens: evita cortes tipo "calibra-cion" */
}
.subcategorias-producto .et_pb_module_header a{text-decoration:none}

/* ---------- responsive ----------
   Con Grid solo hay que declarar CUANTAS columnas: el ancho de cada una lo
   reparte la rejilla. Antes cada breakpoint recalculaba el ancho del hijo
   con calc(), y esos anchos competian con los que Divi reaplica por su
   cuenta \u2014 el motivo de que en movil se viera una tarjeta por fila. */
@media (max-width:1100px){
  .subcategorias-producto{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px}
}
@media (max-width:820px){
  .subcategorias-producto{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px}
}
@media (max-width:520px){
  /* Dos por fila: con 390px de pantalla, tres dejarian las tarjetas por
     debajo de 100px y el nombre partido en tres lineas. */
  /* Aqui si se fija en 2: con minmax cabrian 2 justas, pero un nombre
     largo ("Tierra para plantas de marihuana y sustratos") forzaria a
     auto-fit a bajar a 1 columna. Dos, siempre. */
  .subcategorias-producto{grid-template-columns:repeat(2,1fr);gap:14px}
  .subcategorias-producto > .et_pb_column{padding:14px 10px !important}
  .subcategorias-producto .et_pb_main_blurb_image{height:100px !important}
  .subcategorias-producto .et_pb_main_blurb_image img{width:100px !important}
  .subcategorias-producto .et_pb_module_header{font-size:14px}
}

/* Ficha: un solo related para todos los anchos; 2 columnas en m\u00f3vil */
@media (max-width:767px){
  .et_pb_wc_related_products ul.products{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
  }
  .et_pb_wc_related_products ul.products li.product{
    width:calc(50% - 6px) !important;
    margin:0 !important;
    float:none !important;
  }
}

/* Hero: el p\u00f3ster cubre el cuadro 1:1; no puede sumar altura al padding-top:100% */
.video-responsive-square{
  position:relative;
  overflow:hidden;
}
.video-responsive-square > .lbm-hero-poster{
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  transform:none !important;
  object-fit:cover !important;
  z-index:0;
  display:block !important;
  margin:0 !important;
  border:none;
  outline:none;
}
.video-responsive-square .lbm-hero-video{
  z-index:1;
  opacity:0;
}
.video-responsive-square .lbm-hero-video.is-playing{
  opacity:1;
}
@media (max-width:767px){
  .video-responsive-square .lbm-hero-video{
    display:none !important;
  }
}

/* Ficha: Woo oculta la galer\u00eda (opacity:0) hasta flexslider \u2192 LCP 7s. La foto ya tiene width/height. */
.woocommerce div.product div.images.woocommerce-product-gallery,
.woocommerce-product-gallery{
  opacity:1 !important;
}

/* Fase 08 a11y: skip-link oculto hasta teclado (sin 1×1 ni left:-9999). */
.lbm-skip-link{
  position:absolute;
  left:12px;
  top:0;
  z-index:100000;
  padding:10px 14px;
  background:#111;
  color:#fff;
  text-decoration:none;
  border-radius:4px;
  transform:translateY(-160%);
  transition:transform .15s ease;
}
.lbm-skip-link:focus,
.lbm-skip-link:focus-visible{
  transform:translateY(12px);
  outline:2px solid #fff;
}
.lbm-canarias-block{font-weight:600;}

.video-responsive-square:has(.lbm-hero-video.is-playing) .lbm-hero-poster{opacity:0;transition:opacity .4s;}

/* lbm-cky-compact: banner cookies no tapa el LCP en m\u00f3vil */
@media (max-width: 576px) {
  .cky-consent-container .cky-consent-bar { padding: 12px 0 !important; }
  .cky-notice .cky-title { font-size: 15px !important; line-height: 1.3 !important; margin: 0 0 6px !important; }
  .cky-notice-des { max-height: 3.6em !important; overflow: hidden !important; }
  .cky-notice-btn-wrapper .cky-btn { padding: 7px 8px !important; font-size: 13px !important; min-height: 40px !important; }
}

html.lbm-cky-wait .cky-overlay,
html.lbm-cky-wait .cky-consent-container,
html.lbm-cky-wait .cky-consent-bar{
  display:none !important;
}


/* Home slider: no reaplicar el hero antiguo (flex + ::before) sobre la fila 0.
   Ese layout romp\u00eda el slider al volver a la pesta\u00f1a (banner en blanco) y
   descuadraba el bloque .lbm-visita de debajo. */
.home .lbm-home-hero-row,
.home .et_pb_row_0.lbm-home-hero-row {
  background-image: none;
}
@media (max-width: 980px) {
  .home .lbm-home-hero-row,
  .home .et_pb_row_0.lbm-home-hero-row,
  .home .et_pb_row_0:has(.lbm-home-hero-slider) {
    display: block !important;
    overflow: visible !important;
    background-color: transparent !important;
    background-image: none !important;
  }
  .home .lbm-home-hero-row::before,
  .home .et_pb_row_0.lbm-home-hero-row::before,
  .home .et_pb_row_0:has(.lbm-home-hero-slider)::before {
    content: none !important;
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    background: none !important;
  }
}

/* Grow shop: la foto rellena la celda sin height:100% (colapsa al volver de pesta\u00f1a). */
.lbm-visita__media {
  position: relative;
  align-self: stretch;
  min-height: 280px;
}
.lbm-visita__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media (max-width: 980px) {
  .lbm-visita__media {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }
}


/* --- El ancho de la tarjeta lo fija la celda, no Divi (2026-08-31) -------
   et-core-unified-cpt-tb-29305-tb-19-deferred aplica

     .et-db #et-boc .et-l .et_pb_row_6col > .et_pb_column.et_pb_column_1_6
       { width: 45% !important }

   dentro de @media (max-width:980px). Ese 45% se calcula sobre la CELDA de
   grid (149px), no sobre la fila, asi que dejaba tarjetas de 67px con 82px
   de hueco a su lado. Al llevar !important y sumar dos clases mas que
   nuestro selector, ganaba.

   Aqui se replica esa especificidad exacta para devolverle el ancho
   completo de la celda. */
@media (max-width: 980px) {
  .et-db #et-boc .et-l .subcategorias-producto.et_pb_row_6col > .et_pb_column.et_pb_column_1_6,
  .et-db #et-boc .et-l .subcategorias-producto > .et_pb_column.et_pb_column_1_6,
  .et-db #et-boc .et-l .subcategorias-producto > .et_pb_column {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* lbm-fix-cosecha-descubre: la caja naranja de "Cuando tengas tu cosecha"
   queda estrecha (margin-right 55% + el icono flotando a la izquierda) y Divi
   trae overflow-wrap:break-word, asi que por debajo de ~1300px partia la
   palabra por la mitad: "Descubr / e toda". Sin el corte cabe entera. */
.et-db #et-boc .et-l .et_pb_text_8 .et_pb_text_inner h2,
.et-db #et-boc .et-l .et_pb_text_10 .et_pb_text_inner h2 {
  overflow-wrap: normal;
  word-break: keep-all;
}