/**
 * TeoAta — product loop cards (WooCommerce / Shoptimizer)
 * Scope: ul.products li.product only. Does NOT style single-product.
 * Reference: blocks/04-productos-destacados.html
 *
 * Fix 2026-09-19: override WC/Shoptimizer float widths (~22%) that
 * collapsed cards inside our CSS grid.
 */

:root {
  --teo-negro: #120a04;
  --teo-chocolate: #573016;
  --teo-caramelo: #b8712a;
  --teo-crema: #f3e8d2;
  --teo-blanco: #fdf8f0;
  --teo-gris: #897769;
  --teo-display: "Libre Baskerville", Georgia, serif;
  --teo-body: "Outfit", sans-serif;
}

/* ── Grid (beat Shoptimizer floats) ── */
.woocommerce ul.products,
.woocommerce-page ul.products,
.teo-prod-section ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
  margin: 0 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  display: none !important;
  content: none !important;
}

.woocommerce ul.products.columns-1 { grid-template-columns: minmax(0, 1fr) !important; }
.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.woocommerce ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.woocommerce ul.products.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }

/* ── Card shell — kill WC % widths ── */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.teo-prod-section ul.products li.product {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  float: none !important;
  clear: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  left: auto !important;
  right: auto !important;
  background: var(--teo-blanco);
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  font-family: var(--teo-body);
  box-sizing: border-box !important;
  align-self: stretch;
}

.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
  clear: none !important;
  margin: 0 !important;
}

.woocommerce ul.products li.product:hover {
  box-shadow: 0 18px 48px rgba(42, 21, 9, 0.14);
  transform: translateY(-4px);
}

/* Outer WC link: full-width column filling card height */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}

/* ── Image: fixed 200px slot, always cover (no letterboxing) ── */
.woocommerce ul.products li.product .woocommerce-image__wrapper {
  flex: 0 0 200px !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 200px !important;
  min-height: 200px !important;
  max-height: 200px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #2a1509 0%, #573016 100%);
  box-sizing: border-box !important;
  position: relative !important;
}

.woocommerce ul.products li.product .woocommerce-image__wrapper > a,
.woocommerce ul.products li.product .shoptimizer-plp-carousel-container,
.woocommerce ul.products li.product .shoptimizer-plp-image-wrapper {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
}

.woocommerce ul.products li.product .shoptimizer-plp-image-wrapper img,
.woocommerce ul.products li.product .woocommerce-image__wrapper img,
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product img.wp-post-image,
.woocommerce ul.products li.product img.gallery-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce ul.products li.product .shoptimizer-plp-carousel-container .slick-dots,
.woocommerce ul.products li.product .shoptimizer-loop-gallery,
.woocommerce ul.products li.product .cgkit-swatch,
.woocommerce ul.products li.product .shoptimizer-plp-carousel--pagination {
  display: none !important;
}

/* ── Badges ── */
.woocommerce ul.products li.product .onsale,
.woocommerce ul.products li.product .teo-loop-badge {
  position: absolute;
  top: 12px;
  left: 0;
  z-index: 2;
  background: var(--teo-caramelo);
  color: var(--teo-negro);
  font-family: var(--teo-body);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  margin: 0;
  border-radius: 0;
  min-height: 0;
  line-height: 1.3;
  width: auto !important;
}

.woocommerce ul.products li.product .onsale + .teo-loop-badge--featured,
.woocommerce ul.products li.product .teo-loop-badge--featured + .onsale {
  top: 38px;
}

/* ── Body: grows so all cards share row height ── */
.woocommerce ul.products li.product .woocommerce-card__header {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 148px;
  padding: 18px 16px 56px;
  margin: 0 !important;
  text-align: left;
  background: var(--teo-blanco);
  box-sizing: border-box;
}

.woocommerce ul.products li.product .product__categories {
  display: none !important;
}

.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .shoptimizer_ratingContainer {
  display: none !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title a {
  font-family: var(--teo-display);
  font-size: 17px;
  font-weight: 700;
  font-style: normal;
  color: var(--teo-negro);
  margin: 0 0 4px;
  padding: 0;
  line-height: 1.25;
  text-decoration: none;
  width: 100%;
  min-height: calc(1.25em * 2);
  max-height: calc(1.25em * 2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover {
  color: var(--teo-caramelo);
}

.woocommerce ul.products li.product .teo-loop-excerpt {
  font-family: var(--teo-body);
  font-size: 12px;
  font-weight: 300;
  color: var(--teo-gris);
  line-height: 1.55;
  margin: 0 0 14px;
  padding: 0;
  width: 100%;
  min-height: calc(1.55em * 2);
  max-height: calc(1.55em * 2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.woocommerce ul.products li.product .teo-loop-excerpt p {
  margin: 0;
}

.woocommerce ul.products li.product .teo-loop-excerpt--empty {
  visibility: hidden;
}

.woocommerce ul.products li.product .price {
  font-family: var(--teo-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--teo-chocolate);
  margin-top: auto;
  margin-bottom: 0;
  padding: 0;
  display: block;
  width: auto;
  min-height: 1.2em;
  line-height: 1.2;
}

.woocommerce ul.products li.product .teo-loop-price-spacer {
  margin-top: auto;
  min-height: 1.2em;
  visibility: hidden;
}

.woocommerce ul.products li.product .price del {
  font-size: 13px;
  font-weight: 400;
  color: var(--teo-gris);
  opacity: 0.8;
  margin-right: 6px;
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: var(--teo-chocolate);
}

/* ── Add to cart ── */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.add_to_cart_button {
  position: absolute !important;
  right: 16px;
  bottom: 18px;
  z-index: 2;
  width: auto !important;
  max-width: calc(100% - 32px);
  background: var(--teo-negro) !important;
  color: var(--teo-crema) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 10px 14px !important;
  min-height: 44px;
  font-family: var(--teo-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
  float: none !important;
  margin: 0 !important;
}

.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover {
  background: var(--teo-caramelo) !important;
  color: var(--teo-negro) !important;
}

.woocommerce ul.products li.product a.button.loading,
.woocommerce ul.products li.product a.button.added {
  padding-right: 2.2em !important;
}

/* ── Tablet ── */
@media (max-width: 1024px) {
  .woocommerce ul.products,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4,
  .woocommerce ul.products.columns-5,
  .woocommerce ul.products.columns-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ── Mobile stack ── */
@media (max-width: 560px) {
  .woocommerce ul.products,
  .woocommerce ul.products.columns-2,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4,
  .woocommerce ul.products.columns-5,
  .woocommerce ul.products.columns-6 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ── Mobile scroll ── */
@media (max-width: 768px) {
  .woocommerce.mobile-scroll ul.products,
  .mobile-scroll ul.products {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: thin;
  }

  .woocommerce.mobile-scroll ul.products li.product,
  .mobile-scroll ul.products li.product {
    flex: 0 0 78vw !important;
    width: 78vw !important;
    max-width: 320px !important;
    scroll-snap-align: start;
    margin: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product {
    transition: none;
  }

  .woocommerce ul.products li.product:hover {
    transform: none;
  }
}