/*
 Theme Name:   Variedades Child
 Theme URI:    https://variedades.cl/
 Description:  Tema hijo de Astra para Sexshop Variedades (tipografía, grid y SEO).
 Author:       Variedades Sexshop
 Template:     astra
 Version:      1.0.0
 Text Domain:  variedades-child
*/

/* ------------------------------
   Tipografía global básica
--------------------------------*/
/* Si ya cargas fuentes por Astra/Cloudflare, deja esto comentado.
   Si NO las cargas, descomenta. */
/*
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
*/

/* ------------------------------
   Limpieza grid de productos
   (oculta info repetida bajo cada producto)
--------------------------------*/
.woocommerce ul.products li.product .woocommerce-loop-product__category,
.woocommerce ul.products li.product .posted_in,
.woocommerce ul.products li.product .loop-category,
.woocommerce ul.products li.product .product_meta,
.woocommerce ul.products li.product .ast-woo-shop-product-category,
.woocommerce ul.products li.product .cat-links {
  display: none !important;
}

/* ------------------------------
   Estilos para descripción de categoría
--------------------------------*/
.term-description h2 {
  font-size: 24px !important;
  font-weight: 700;
  margin-top: 30px;
  margin-bottom: 10px;
}

.term-description p {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 18px;
}

.term-description ul {
  margin-left: 20px;
  margin-bottom: 20px;
}

.term-description li {
  margin-bottom: 6px;
}

/* Ajuste extra dentro de loop de WooCommerce */
.woocommerce .term-description p {
  margin-bottom: 16px !important;
  line-height: 1.6 !important;
}

.woocommerce .term-description h2,
.woocommerce .term-description h3 {
  margin-top: 24px !important;
  margin-bottom: 12px !important;
}

.woocommerce .term-description ul li {
  margin-bottom: 10px !important;
  line-height: 1.6 !important;
}

/* ------------------------------
   Imágenes de productos (loop / grilla)
   - Mantiene tarjetas parejas
   - NO recorta productos (más premium)
   - Ratio estable (mejor CLS/percepción)
--------------------------------*/

/* 1) Asegura contenedor estable para ratio (evita “saltos”) */
.woocommerce ul.products li.product a,
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
  display: block;
}

/* 2) Fija un ratio real en el contenedor del thumbnail */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img {
  display: block;
  width: 100%;
  height: 100%;            /* clave: hace que el ratio sea real */
  object-fit: contain;     /* no recorta */
  background: #fff;
}

/* Contenedor “tipo marco” para el ratio */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img {
  aspect-ratio: 3 / 4;     /* ajusta si quieres 1/1 */
}

/* Altura mínima de tarjetas para que el grid se vea parejo */
.woocommerce ul.products li.product {
  min-height: 320px;
}

/* ------------------------------
   WooCommerce extras visuales
--------------------------------*/

/* Badge OFERTA más visible */
.woocommerce ul.products li.product .onsale {
  font-weight: 700;
}

/* Visual para productos agotados (sin ocultarlos) */
.woocommerce ul.products li.product.outofstock {
  opacity: .65;
}

/* =======================================================
   GALERÍA PRODUCTO (single product) – ESTABLE + COMPATIBLE
   - No rompe el slider/zoom/lightbox
   - Reserva espacio (mejor CLS / “pantalla blanca”)
   - Controla tamaños en móvil y PC
   ======================================================= */

/* Mantener visible (sin forzar display:block global) */
.woocommerce-product-gallery {
  position: relative;
  z-index: 10;
}

/* El <a> no debe colapsar */
.woocommerce-product-gallery__image > a {
  display: block;
}

/* Reserva espacio al wrapper para evitar saltos (CLS)
   OJO: NO usamos overflow:hidden aquí para no cortar zoom/lightbox */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
  aspect-ratio: 1 / 1;   /* si tus fotos son verticales, prueba 4/5 */
}

/* Imagen principal: estable */
.woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Miniaturas: layout limpio */
.woocommerce div.product div.images .flex-control-thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 0;
}

.woocommerce div.product div.images .flex-control-thumbs li {
  width: 60px;
  margin: 0;
  cursor: pointer;
}

.woocommerce div.product div.images .flex-control-thumbs img {
  width: 100%;
  height: auto;
  object-fit: contain;
  opacity: .75;
}

.woocommerce div.product div.images .flex-control-thumbs img:hover {
  opacity: 1;
}

/* =======================================================
   HEADER: evitar CLS (saltos de layout)
   ======================================================= */

/* Evita saltos de layout del header Astra */
#ast-hf-menu-1,
.main-header-bar,
.ast-primary-header-bar {
  min-height: 64px; /* ajusta si tu header real es más alto */
}

/* Fija altura total del header */
#masthead {
  min-height: 72px;
}

/* Barra principal */
.ast-primary-header-bar {
  min-height: 72px;
}

/* Menú */
#ast-hf-menu-1 {
  min-height: 72px;
  display: flex;
  align-items: center;
}

/* Logo fijo (SIN duplicados) */
.custom-logo-link img,
.ast-site-logo img {
  height: 40px; /* ajusta según tu logo */
  width: auto;
  display: block;
}

/* =======================================================
   MÓVIL: FIX ESPACIO EN BLANCO + GALERÍA ESTABLE
   ======================================================= */
@media (max-width: 768px) {

  /* FIX ESPACIO EN BLANCO BAJO HEADER */
  .ast-header-break-point .site-content,
  .ast-header-break-point .content-area,
  .ast-header-break-point #primary {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .ast-header-break-point .page .entry-header,
  .ast-header-break-point .page .entry-title,
  .ast-header-break-point .woocommerce-products-header,
  .ast-header-break-point .ast-archive-description {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .ast-header-break-point .entry-content > *:first-child,
  .ast-header-break-point .woocommerce .ast-archive-description > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* GALERÍA: evita “pantalla blanca” */
  .woocommerce-product-gallery {
    min-height: 320px;
    max-height: 55vh;
  }

  .woocommerce-product-gallery__image img {
    width: 100%;
    max-height: 50vh;
    height: auto;
  }

  /* Contenedor padre del producto (móvil) */
  .ast-single-product-main {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 360px !important;
  }

  .ast-single-product-main > * {
    overflow: visible !important;
  }
}

/* ===========================
   ESCRITORIO: evita “ampliada/gigante”
   =========================== */
@media (min-width: 769px) {

  /* Balance de columnas Astra/Woo */
  .woocommerce div.product div.images {
    width: 42% !important;
    max-width: 520px;
  }

  .woocommerce div.product div.summary {
    width: 55% !important;
  }

  /* Alto máximo imagen principal en PC */
  .woocommerce-product-gallery__image img {
    max-height: 520px;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}