/* ============================================
   CLEANFIT — WooCommerce Custom CSS Override
   Matching menu.css design system
   ============================================ */

:root {
  --green: #2d6a3f;
  --green-pale: #f0f5f1;
  --orange: #e8671a;
  --dark: #1a1a1a;
  --muted: #6b7280;
  --radius: 16px;
}

/* === PRODUCT GRID === */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* === PRODUCT CARD === */
.woocommerce ul.products li.product {
  background: #fff !important;
  border: 1px solid #f0f0f0 !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  cursor: pointer !important;
  position: relative !important;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1) !important;
}

/* === PRODUCT IMAGE WRAP — zoom on hover === */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  height: 300px !important;
}

.woocommerce ul.products li.product a img {
  width: 100% !important;
  height: 300px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}

/* Zoom image on card hover */
.woocommerce ul.products li.product:hover a img {
  transform: scale(1.06) !important;
}

/* === HOVER OVERLAY with cart button === */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(26, 26, 26, 0.18) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  pointer-events: none !important;
}

.woocommerce ul.products li.product:hover a.woocommerce-LoopProduct-link::after {
  opacity: 1 !important;
}

/* === PRODUCT BODY === */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  font-family: "Bricolage Grotesque", sans-serif !important;
  padding: 1rem 1.2rem 0.25rem !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* === STAR RATING === */
.woocommerce ul.products li.product .star-rating {
  color: var(--orange) !important;
  font-size: 0.85rem !important;
  margin: 0 1.2rem 0.4rem !important;
  display: flex !important;
  align-items: center !important;
}

/* === PRICE === */
.woocommerce ul.products li.product .price {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  padding: 0 1.2rem 0.5rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

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

.woocommerce ul.products li.product .price del {
  color: var(--muted) !important;
  font-weight: 400 !important;
  font-size: 0.82rem !important;
}

/* === ADD TO CART BUTTON — giống .btn-add-cart trong menu.css === */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
  width: calc(100% - 2.4rem) !important;
  margin: 0.3rem 1.2rem 1.1rem !important;
  padding: 0.55rem 0 !important;
  border-radius: 50px !important;
  border: 1.5px solid #e5e5e5 !important;
  background: #fff !important;
  color: var(--dark) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.22s, color 0.22s, border-color 0.22s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
  background: var(--dark) !important;
  color: #fff !important;
  border-color: var(--dark) !important;
}

/* Added to cart state */
.woocommerce ul.products li.product .added_to_cart {
  display: none !important;
}

/* === SALE BADGE === */
.woocommerce ul.products li.product .onsale {
  background: var(--dark) !important;
  color: #fff !important;
  border-radius: 50px !important;
  padding: 0.25rem 0.75rem !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  top: 0.65rem !important;
  left: 0.65rem !important;
  right: auto !important;
  min-height: auto !important;
  min-width: auto !important;
  line-height: 1.4 !important;
  z-index: 2 !important;
}

/* === CARD ENTRANCE ANIMATION — giống @keyframes cardIn === */
@keyframes woo-card-in {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.woocommerce ul.products li.product {
  animation: woo-card-in 0.35s ease forwards !important;
}

/* Stagger delay for first 6 cards */
.woocommerce ul.products li.product:nth-child(1) { animation-delay: 0.05s !important; }
.woocommerce ul.products li.product:nth-child(2) { animation-delay: 0.10s !important; }
.woocommerce ul.products li.product:nth-child(3) { animation-delay: 0.15s !important; }
.woocommerce ul.products li.product:nth-child(4) { animation-delay: 0.20s !important; }
.woocommerce ul.products li.product:nth-child(5) { animation-delay: 0.25s !important; }
.woocommerce ul.products li.product:nth-child(6) { animation-delay: 0.30s !important; }

/* === RESPONSIVE === */
@media (max-width: 1024px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr !important;
  }
}