/* ==========================================================================
   ILRITORNO — wc-fix.css
   FORZAR grid en productos y limpiar layout WC con especificidad MAXIMA
   Carga DESPUES de todo, gana en cascade
   ========================================================================== */

/* ============================================================
   PRODUCTS FLEX (no grid) — evita problema de "celda vacía first"
   que CSS Grid causaba con clases .first/.last legacy de WC
   ============================================================ */
body ul.products,
body ul.products.columns-1,
body ul.products.columns-2,
body ul.products.columns-3,
body ul.products.columns-4,
body ul.products.columns-5,
body ul.products.columns-6,
body .woocommerce ul.products {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.25rem !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  float: none !important;
}

/* Reset pseudo-elementos */
body ul.products::before,
body ul.products::after {
  display: none !important;
  content: none !important;
}

/* Default 2 columnas mobile */
body ul.products > li.product {
  flex: 0 0 calc((100% - 1.25rem) / 2) !important;
  max-width: calc((100% - 1.25rem) / 2) !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 1rem !important;
  clear: none !important;
  float: none !important;
}

/* Tablet >= 600px — 3 cols */
@media (min-width: 600px) {
  body ul.products { gap: 1.5rem !important; }
  body ul.products > li.product {
    flex: 0 0 calc((100% - 3rem) / 3) !important;
    max-width: calc((100% - 3rem) / 3) !important;
  }
}

/* Desktop >= 1024px — 3 cols con gap 2rem (tienda) */
@media (min-width: 1024px) {
  body ul.products { gap: 2rem !important; }
  body ul.products > li.product {
    flex: 0 0 calc((100% - 4rem) / 3) !important;
    max-width: calc((100% - 4rem) / 3) !important;
  }
}

/* Productos destacados HOME en pantallas grandes — 4 cols cards más chicas */
@media (min-width: 1280px) {
  .section--alt ul.products,
  .section ul.products.columns-4 {
    gap: 1.5rem !important;
  }
  .section--alt ul.products > li.product,
  .section ul.products.columns-4 > li.product {
    flex: 0 0 calc((100% - 4.5rem) / 4) !important;
    max-width: calc((100% - 4.5rem) / 4) !important;
  }
}

/* Productos relacionados (single) — 4 cols en desktop */
@media (min-width: 1024px) {
  .related.products ul.products,
  .up-sells ul.products,
  .cross-sells ul.products {
    gap: 1.25rem !important;
  }
  .related.products ul.products > li.product,
  .up-sells ul.products > li.product,
  .cross-sells ul.products > li.product {
    flex: 0 0 calc((100% - 3.75rem) / 4) !important;
    max-width: calc((100% - 3.75rem) / 4) !important;
  }
}

/* Si algún <li> está vacío, ocultarlo */
body ul.products li.product:not(:has(.woocommerce-loop-product__title)):not(:has(.price)) {
  display: none !important;
}

/* Reset clases legacy first/last que WC añadía para flex/clear viejo */
body ul.products li.product.first,
body ul.products li.product.last {
  clear: none !important;
  float: none !important;
}

/* Quitar cualquier <li> que NO sea .product */
body ul.products > li:not(.product) {
  display: none !important;
}

/* Reset de cada item — quitar widths inline de WC */
body ul.products li.product,
body ul.products li.product.first,
body ul.products li.product.last,
body .woocommerce ul.products li.product {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 1rem !important;
  float: none !important;
  clear: none !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid var(--ir-line) !important;
  border-radius: 14px !important;
  text-align: center !important;
  transition: transform 300ms ease, box-shadow 300ms ease !important;
  position: relative !important;
}

body ul.products li.product:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 30px rgba(46, 47, 36, 0.08) !important;
}

/* Imagen full width con aspect ratio — visible siempre */
body ul.products li.product > a:first-of-type {
  display: block !important;
  width: 100% !important;
}

body ul.products li.product img,
body ul.products li.product .attachment-woocommerce_thumbnail,
body ul.products li.product .wp-post-image {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  max-width: 100% !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  background: var(--ir-cream) !important;
  margin: 0 0 0.85rem !important;
  display: block !important;
  transition: transform 500ms ease;
}

body ul.products li.product:hover img {
  transform: scale(1.04);
}

/* Title */
body ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--ir-font-display) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: var(--ir-dark) !important;
  margin: 0 0 0.4rem !important;
  padding: 0 !important;
  text-align: center;
  min-height: 0 !important;
  display: block !important;
}

@media (min-width: 1024px) {
  body ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.1rem !important;
  }
}

/* Price */
body ul.products li.product .price,
body ul.products li.product span.price,
body ul.products li.product .woocommerce-Price-amount {
  font-family: var(--ir-font-body) !important;
  font-size: 0.95rem !important;
  color: var(--ir-earth) !important;
  font-weight: 500 !important;
  margin: 0 0 0.85rem !important;
  display: block !important;
  text-align: center;
}

body ul.products li.product .price bdi {
  font-family: var(--ir-font-body) !important;
}

/* Botón */
body ul.products li.product .button,
body ul.products li.product a.button.product_type_simple,
body ul.products li.product a.button.add_to_cart_button {
  display: inline-block !important;
  padding: 0.6rem 1.4rem !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  border-radius: 999px !important;
  text-transform: uppercase !important;
  font-family: var(--ir-font-ui) !important;
  font-weight: 500 !important;
  background: var(--ir-dark) !important;
  color: var(--ir-cream) !important;
  border: none !important;
  margin-top: auto !important;
  align-self: center !important;
  width: auto !important;
  height: auto !important;
  line-height: 1.2 !important;
}

body ul.products li.product .button:hover {
  background: var(--ir-earth) !important;
}

/* Wishlist + Quick view buttons absolute */
body ul.products li.product .ir-quick-btn,
body ul.products li.product .ir-wish-btn {
  position: absolute !important;
  top: 1rem !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 50% !important;
  border: none !important;
}
body ul.products li.product .ir-quick-btn { right: 1rem !important; }
body ul.products li.product .ir-wish-btn { right: 3.75rem !important; }

/* Quitar "Ver carrito" feo y links extras */
body ul.products li.product .added_to_cart {
  display: none !important;
}

/* ============================================================
   RELATED PRODUCTS — block layout (no descuadrado)
   ============================================================ */
.related.products,
.up-sells.upsells,
.cross-sells {
  display: block !important;
  width: 100% !important;
  margin-top: 4rem !important;
  padding-top: 3rem !important;
  border-top: 1px solid var(--ir-line) !important;
  clear: both;
}

.related.products > h2,
.up-sells.upsells > h2,
.cross-sells > h2 {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-family: var(--ir-font-display) !important;
  font-size: 2rem !important;
  font-weight: 400 !important;
  margin: 0 0 2rem !important;
}

.related.products > ul.products,
.up-sells.upsells > ul.products,
.cross-sells > ul.products {
  width: 100% !important;
  clear: both;
}

/* ============================================================
   SINGLE PRODUCT — TABS contenido tipografia body, no display
   ============================================================ */
.woocommerce-Tabs-panel {
  font-family: var(--ir-font-body) !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  color: var(--ir-dark) !important;
  padding: 1rem 0 0 !important;
}

.woocommerce-Tabs-panel h2 {
  font-family: var(--ir-font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  margin: 0 0 1rem !important;
  text-align: left !important;
}

.woocommerce-Tabs-panel h3 {
  font-family: var(--ir-font-display) !important;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  margin: 1.5rem 0 0.5rem !important;
  text-align: left !important;
}

.woocommerce-Tabs-panel h4 {
  font-family: var(--ir-font-ui) !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  color: var(--ir-earth) !important;
  font-weight: 500 !important;
  margin: 1.5rem 0 0.5rem !important;
  text-align: left !important;
  line-height: 1.3 !important;
}

.woocommerce-Tabs-panel p {
  font-family: var(--ir-font-body) !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  margin: 0 0 0.85rem !important;
  color: var(--ir-dark) !important;
}

.woocommerce-Tabs-panel ul,
.woocommerce-Tabs-panel ol {
  margin: 0 0 1rem !important;
  padding-left: 1.25rem !important;
  list-style-position: outside;
}

.woocommerce-Tabs-panel ul li,
.woocommerce-Tabs-panel ol li {
  font-family: var(--ir-font-body) !important;
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
  margin-bottom: 0.35rem !important;
  list-style: disc;
  color: var(--ir-dark) !important;
}

.woocommerce-Tabs-panel ol li { list-style: decimal; }

.woocommerce-Tabs-panel .ir-product-detail {
  font-family: var(--ir-font-body) !important;
}

.woocommerce-Tabs-panel .ir-product-detail p:first-child {
  /* Tagline italic */
  font-family: var(--ir-font-display) !important;
  font-size: 1.25rem !important;
  font-style: italic;
  color: var(--ir-earth) !important;
  margin: 0 0 1rem !important;
  text-align: left;
}

/* ============================================================
   PAGINA JABONES — quitar texto duplicado en cards (badge encima de title)
   ============================================================ */
.cat-card__media span[style] {
  display: none !important;
}

/* Si la card no tiene foto, fondo decorativo neutro */
.cat-card__media:empty {
  background: linear-gradient(135deg, var(--ir-cream), var(--ir-beige)) !important;
}

/* ============================================================
   HOME hero slider — verificar que se ve
   ============================================================ */
.hero--slider .hero__content {
  margin: 0 auto;
}

.hero--slider .hero__inner {
  display: block !important;
  text-align: center;
}

.hero--slider .hero__title {
  display: block;
  text-align: center;
}

/* ============================================================
   ESCALAR TIPOGRAFIAS de section heads
   ============================================================ */
.section__head h2 {
  font-family: var(--ir-font-display) !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
}

/* ============================================================
   CONTAINER overflow protection
   ============================================================ */
.container {
  overflow-x: visible;
}

main {
  overflow-x: hidden;
}