/* ======================================
   ARAUMA SHOP
   ====================================== */


/* ======================================
   BACKGROUND
   ====================================== */

body.woocommerce-shop {
  background-color: #EFEFEF;
}

/* ======================================
   TÍTULOS OCULTOS
   ====================================== */

body.woocommerce-shop h1.page-title,
body.woocommerce-shop .woocommerce-products-header__title,
body.woocommerce-shop .entry-title,
.page-header h1.entry-title {
  display: none !important;
}

body.woocommerce-shop .woocommerce-result-count,
body.woocommerce-shop .woocommerce-ordering,
body.woocommerce-shop ul.products.columns-4 {
  display: none !important;
}

.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-button {
  display: none !important;
}


/* ======================================
   LAYOUT SHOP
   ====================================== */

/* Quitar max-width del main solo en la página shop */
body.woocommerce-shop #primary.content-area,
body.woocommerce-shop .site-main {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Imagen hero — ancho completo, altura proporcional */
body.woocommerce-shop .page-description .wp-block-uagb-image {
  width: 100% !important;
  max-width: 100% !important;
}

body.woocommerce-shop .page-description .wp-block-uagb-image figure {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

body.woocommerce-shop .page-description .wp-block-uagb-image img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* ======================================
   ENCABEZADO ANTES DEL GRID
   ====================================== */

.arauma-shop-header {
  padding: 40px 30px 32px !important;
}

.arauma-shop-heading {
  font-family: var(--arauma-font) !important;
  font-size: 30px !important;
  font-weight: 300 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--arauma-text-dark) !important;
  margin: 0 0 8px !important;
}

.arauma-shop-desc {
  font-family: var(--arauma-font) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--arauma-text-muted) !important;
  margin: 0 !important;
}


/* Separador entre productos y random product */
hr.arauma-shop-divider {
  display: block !important;
  visibility: visible !important;
  border: none !important;
  border-top: 1px solid #dddddd !important;
  margin: 40px 30px 0 !important;
  height: 0 !important;
  background: none !important;
}

/* 30px de margen lateral y espacio arriba solo en los productos */
body.woocommerce-shop .wp-block-woocommerce-product-collection {
  padding-left: 30px !important;
  padding-right: 30px !important;
  padding-top: 40px !important;
}


/* ======================================
   GRID
   ====================================== */

/* El contenedor flex de 2 columnas tiene align-items:center por defecto — lo forzamos a top */
body.woocommerce-shop .wp-block-group.is-layout-flex {
  align-items: flex-start !important;
}

.wp-block-woocommerce-product-collection ul.wc-block-product-template {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}


/* ======================================
   TARJETA
   ====================================== */

.wp-block-woocommerce-product-collection li.wc-block-product {
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ======================================
   HOVER — imagen secundaria de galería
   ====================================== */

.wp-block-woocommerce-product-collection .arauma-thumb {
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  aspect-ratio: 1 / 1 !important;
  background-color: #EFEFEF !important;
}

.wp-block-woocommerce-product-collection .arauma-thumb > a {
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
}

.wp-block-woocommerce-product-collection .arauma-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 !important;
  transition: opacity 0.35s ease !important;
}

.wp-block-woocommerce-product-collection .arauma-thumb .arauma-secondary-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  opacity: 0 !important;
}

.wp-block-woocommerce-product-collection li.wc-block-product:hover .arauma-secondary-image {
  opacity: 1 !important;
}

.wp-block-woocommerce-product-collection li.wc-block-product:hover .arauma-thumb img:not(.arauma-secondary-image) {
  opacity: 0 !important;
}


/* ======================================
   IMAGEN
   ====================================== */

.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-image,
.wp-block-woocommerce-product-collection .wc-block-product-image {
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

/* Contenedor cuadrado — via wrapper interno para no depender de height heredado */
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-image a,
.wp-block-woocommerce-product-collection .wc-block-product-image a {
  display: block !important;
  aspect-ratio: 1 / 1 !important;
  background-color: #EFEFEF !important;
  overflow: hidden !important;
  width: 100% !important;
}

.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-image img,
.wp-block-woocommerce-product-collection .wc-block-product-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  transition: opacity var(--arauma-transition) !important;
}


/* ======================================
   TÍTULO DEL PRODUCTO
   ====================================== */

.wp-block-woocommerce-product-collection .wc-block-components-product-name,
.wp-block-woocommerce-product-collection .wp-block-post-title,
.wp-block-woocommerce-product-collection .wp-block-post-title a {
  font-family: var(--arauma-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.35 !important;
  text-transform: uppercase !important;
  color: var(--arauma-text-dark) !important;
  margin: 0 !important;
  padding: 14px 0 0 !important;
  display: block !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: color var(--arauma-transition) !important;
}


/* ======================================
   PRECIO
   ====================================== */

.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-price {
  padding: 6px 0 12px !important;
  margin: 0 !important;
  text-align: center !important;
}

.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-price .wc-block-components-product-price,
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-price .price {
  font-family: var(--arauma-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--arauma-gold) !important;
  letter-spacing: 0.06em !important;
}

.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-price del,
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-price .wc-block-components-product-price__regular {
  color: var(--arauma-text-del) !important;
  opacity: 0.8 !important;
  margin-right: 6px !important;
  font-size: 13px !important;
}

.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-price ins,
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-price .wc-block-components-product-price__sale {
  text-decoration: none !important;
  color: var(--arauma-text-price) !important;
  font-weight: 500 !important;
}


/* ======================================
   BADGE OFERTA
   ====================================== */

.wp-block-woocommerce-product-collection .wc-block-components-product-sale-badge {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  bottom: auto !important;
  background: var(--arauma-gold) !important;
  color: var(--arauma-white) !important;
  border: none !important;
  border-radius: var(--arauma-radius-sm) !important;
  font-family: var(--arauma-font) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 4px 8px !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}


/* ======================================
   PAGINACIÓN
   ====================================== */

.wp-block-woocommerce-product-collection .wc-block-pagination {
  margin-top: 40px !important;
  display: flex !important;
  justify-content: center !important;
  gap: 6px !important;
}

.wp-block-woocommerce-product-collection .wc-block-pagination-page,
.wp-block-woocommerce-product-collection .wc-block-pagination__ellipsis {
  font-family: var(--arauma-font) !important;
  font-size: 14px !important;
  color: var(--arauma-text-dark) !important;
  border: 1px solid var(--arauma-border-control) !important;
  border-radius: var(--arauma-radius-sm) !important;
  min-width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--arauma-white) !important;
  cursor: pointer !important;
  transition: background var(--arauma-transition), border-color var(--arauma-transition), color var(--arauma-transition) !important;
}

.wp-block-woocommerce-product-collection .wc-block-pagination-page:hover,
.wp-block-woocommerce-product-collection .wc-block-pagination-page:focus {
  background: var(--arauma-green) !important;
  border-color: var(--arauma-green) !important;
  color: var(--arauma-white) !important;
}

.wp-block-woocommerce-product-collection .wc-block-pagination-page--active {
  background: var(--arauma-green) !important;
  border-color: var(--arauma-green) !important;
  color: var(--arauma-white) !important;
}


/* ======================================
   RESPONSIVE — Tablet (max 1024px)
   ====================================== */

@media (max-width: 1024px) {

  body.woocommerce-shop .wp-block-woocommerce-product-collection {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .wp-block-woocommerce-product-collection ul.wc-block-product-template {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

}


/* ======================================
   RESPONSIVE — Mobile (max 767px)
   ====================================== */

/* Forzar 2 columnas con container queries (para dispositivos reales) */
@container (max-width: 600px) {
  .wc-block-product-template.is-layout-flex,
  ul.wc-block-product-template {
    grid-template-columns: repeat(2, 1fr) !important;
    flex-wrap: wrap !important;
  }

  .wc-block-product-template.is-layout-flex > li,
  ul.wc-block-product-template > li {
    width: calc(50% - 6px) !important;
    flex: 0 0 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
  }
}

@media (max-width: 767px) {

  /* Evitar overflow horizontal */
  body.woocommerce-shop,
  body.woocommerce-shop .site-main,
  body.woocommerce-shop .page-description,
  body.woocommerce-shop .woocommerce-products-header,
  body.woocommerce-shop .wp-block-woocommerce-product-collection,
  body.woocommerce-shop .wc-block-product-template {
    overflow-x: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Forzar 2 columnas también con flex (WooCommerce Blocks usa is-layout-flex) */
  body.woocommerce-shop .wc-block-product-template.is-layout-flex,
  body.woocommerce-shop ul.wc-block-product-template {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  body.woocommerce-shop .wc-block-product-template.is-layout-flex > li,
  body.woocommerce-shop ul.wc-block-product-template > li {
    width: calc(50% - 6px) !important;
    flex: 0 0 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
    box-sizing: border-box !important;
  }

  /* Ocultar imagen hero en mobile */
  body.woocommerce-shop .page-description .wp-block-uagb-image {
    display: none !important;
  }

  /* Centrar encabezado y agregar padding para el menú sticky */
  .arauma-shop-header {
    text-align: center !important;
    padding-top: 80px !important;
  }

  body.woocommerce-shop .wp-block-woocommerce-product-collection {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .wp-block-woocommerce-product-collection ul.wc-block-product-template {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .wp-block-woocommerce-product-collection .wc-block-components-product-name,
  .wp-block-woocommerce-product-collection .wp-block-post-title,
  .wp-block-woocommerce-product-collection .wp-block-post-title a {
    font-size: 13px !important;
    padding: 10px 0 0 !important;
  }

  .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-price {
    padding: 4px 0 10px !important;
    font-size: 13px !important;
  }

}


/* ======================================
   RESPONSIVE — Móvil pequeño (max 480px)
   ====================================== */

@media (max-width: 480px) {

  .wp-block-woocommerce-product-collection ul.wc-block-product-template {
    grid-template-columns: 1fr !important;
  }

}