/* ============================================================
   SHOP.CSS — Listados de categoría y tienda WooCommerce
   ============================================================
   MIGRADO desde CSS anterior + adaptaciones para nueva paleta.
   ============================================================ */


/* ===== Grid de categorías (móvil 3 columnas) ===== */
@media (max-width: 767px) {
  .cat-grid ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
  }

  .cat-grid ul.products li.product-category {
    box-sizing: border-box;
  }

  .cat-grid .wc-block-grid__products {
    --columns: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px 8px !important;
  }
}


/* ===== Títulos en listados de categorías (ocultar duplicados) ===== */
ul.products li.product-category h2.woocommerce-loop-category__title,
.wc-block-grid__product-category .wc-block-grid__product-category__title {
  display: none;
}


/* ===== Imágenes y tarjetas de categoría ===== */
.woocommerce .product-category {
  padding: 15px;
  text-align: center;
}

.woocommerce .product-category img {
  width: 100%;
  height: auto;
  max-height: 180px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  padding: 10px;
  transition: transform 0.3s ease;
  will-change: transform;
}

.woocommerce .product-category:hover img {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce .product-category img {
    transition: none;
  }
  .woocommerce .product-category:hover img {
    transform: none;
  }
}


/* ===== Ocultar hero/título en archivos de categoría WooCommerce ===== */
body.tax-product_cat .ct-page-title,
body.tax-product_cat .ct-page-title *,
body.tax-product_cat .ct-page-title::before,
body.tax-product_cat .ct-page-title::after,
body.tax-product_cat .woocommerce-products-header,
body.tax-product_cat .woocommerce-products-header *,
body.tax-product_cat .archive-header,
body.tax-product_cat .archive-header *,
body.tax-product_cat .entry-header,
body.tax-product_cat .entry-header *,
body.tax-product_cat .entry-header::before,
body.tax-product_cat .entry-header::after {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  content: none !important;
}

body.tax-product_cat .page-title::before,
body.tax-product_cat .page-title::after {
  content: none !important;
  display: none !important;
}


/* ===== Específico categoría "oficina" ===== */
body.tax-product_cat.term-oficina .ct-page-title,
body.tax-product_cat.term-oficina .ct-page-title *,
body.tax-product_cat.term-oficina .ct-page-title::before,
body.tax-product_cat.term-oficina .ct-page-title::after,
body.tax-product_cat.term-oficina .archive-header,
body.tax-product_cat.term-oficina .archive-header::before,
body.tax-product_cat.term-oficina .archive-header::after {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  content: none !important;
}


/* ===== Botón cantidad + agregar al carrito personalizado ===== */
.avasol-qty-cart {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-top: 10px;
}

.avasol-qty-cart .quantity {
  margin: 0;
}

.avasol-qty-cart .qty {
  width: 60px;
  height: 42px;
  text-align: center;
  border: var(--avasol-border);
  border-radius: var(--avasol-radius-md);
  font-size: var(--avasol-text-base);
}

/* Botón Agregar — ahora naranja Avasol */
.avasol-add-to-cart {
  flex: 1;
  background: var(--avasol-orange) !important;
  color: var(--avasol-white) !important;
  font-weight: var(--avasol-font-semibold);
  font-size: var(--avasol-text-base);
  border: none;
  border-radius: var(--avasol-radius-md);
  cursor: pointer;
  transition: background var(--avasol-transition-fast),
              transform 0.1s ease;
  padding: 0 16px;
}

.avasol-add-to-cart:hover {
  background: var(--avasol-orange-dark) !important;
  transform: translateY(-1px);
}