/* ===============================================
   BLOQUE: Categorías de Producto – Nutribiótica
   =============================================== */

/* ----- Contenedor general ----- */
.nutri-product-categories-wrapper {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.nutri-product-categories__title {
  font-weight: 700;
  font-size: 1.1rem;
  color: black;
  margin-bottom: 1rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid #56AA9D;
  display: inline-block;
}

/* ----- GRID escalonado (2 columnas adaptables) ----- */
.nutri-product-categories__grid {
  display: block;
  column-count: 2;
  column-gap: 1.5rem;
  box-sizing: border-box;
}

.nutri-product-category {
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  margin-bottom: 1rem;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.nutri-product-category h4 {
  font-size: 1rem;
  font-weight: 700;
  color: black;
  margin-bottom: 0.5rem;
}

.nutri-product-category a {
  text-decoration: none;
  color: black;
}

.nutri-product-category a:hover {
  color: black;
}

.nutri-product-category ul {
  margin: 0;
  padding-left: 1.2rem;
  list-style: none;
}

.nutri-product-category li {
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* ----- Responsive: Ocultar en móvil ----- */
@media (max-width: 768px) {
  .nutri-product-categories-wrapper {
    display: none;
  }
}

/* ===============================================
   CORRECCIÓN DE ALTURA Y DESBORDE
   (sin modificar anchos ni columnas del tema)
   =============================================== */

/* Contenedor principal del producto */
.woocommerce div.product {
  align-items: flex-start !important;   /* Cada columna mantiene su altura natural */
  overflow: visible !important;         /* Permite expansión vertical */
  height: auto !important;              /* Evita recortes de contenido */
}

/* Galería principal del producto */
.woocommerce div.product .woocommerce-product-gallery {
  display: flex;
  flex-direction: column;
  overflow: visible !important;
  height: auto !important;
}

/* Imagen principal dentro de la galería */
.woocommerce div.product .woocommerce-product-gallery__wrapper {
  flex: 0 0 auto;
  order: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Bloque de categorías dentro de la galería */
.woocommerce div.product .nutri-product-categories-wrapper {
  flex: 0 0 auto;
  order: 1;
  width: 100%;
  margin-top: 2rem;
  overflow: visible;
  height: auto;
}

/* Evita que los hijos colapsen dentro de un grid/flex */
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .summary {
  align-self: flex-start !important;
}

/* Corrige cualquier corte causado por floats o grid */
.woocommerce div.product:after {
  content: "";
  display: block;
  clear: both;
}

/* ===============================================
   SEPARACIÓN ENTRE GALERÍA E INFORMACIÓN
   =============================================== */

/* En pantallas de escritorio */
@media (min-width: 769px) {
  .woocommerce div.product {
    column-gap: 3rem; /* separación visual entre las columnas */
    gap: 3rem; /* para navegadores modernos */
  }

  /* Alternativa segura si el tema ignora gap */
  .woocommerce div.product .woocommerce-product-gallery {
    margin-right: 3rem;
  }
}

/* En tablets, reducimos un poco */
@media (max-width: 992px) and (min-width: 769px) {
  .woocommerce div.product {
    column-gap: 2rem;
    gap: 2rem;
  }
  .woocommerce div.product .woocommerce-product-gallery {
    margin-right: 2rem;
  }
}