/*
 * SafeLeaf Product Cards — product-cards.css
 * Covers: WooCommerce standard loop, legacy WC blocks, new WC blocks (8+)
 * Selectors verified against live HTML 2026-03-30
 */

/* ── Shared design tokens ───────────────────────────────────────────────────── */
:root {
  --slpc-bg:           #ffffff;
  --slpc-bg-img:       #f0f4f0;
  --slpc-border:       #e0e8e0;
  --slpc-border-hover: #49c435;
  --slpc-radius:       10px;
  --slpc-shadow:       0 1px 4px rgba(0,0,0,0.06);
  --slpc-shadow-hover: 0 8px 28px rgba(73,196,53,0.14);
  --slpc-text:         #1c2a1c;
  --slpc-text-muted:   #7a9a7a;
  --slpc-green:        #49c435;
  --slpc-green-d:      #2e7d32;
  --slpc-price:        #2e7d32;
}


/* ══════════════════════════════════════════════════════════════════════════════
   1. PRODUCT CATEGORIES BLOCK  (.wc-block-product-categories)
   Verified HTML:
     div.wp-block-woocommerce-product-categories.wc-block-product-categories.is-list
       ul.wc-block-product-categories-list.wc-block-product-categories-list--depth-0
         li.wc-block-product-categories-list-item
           a[style=""]
             span.wc-block-product-categories-list-item__image
               img
             span.wc-block-product-categories-list-item__name
   ══════════════════════════════════════════════════════════════════════════════ */

/* Override WooCommerce is-list display — target both class combos with high specificity */
div.wc-block-product-categories ul.wc-block-product-categories-list,
div.wc-block-product-categories.is-list ul.wc-block-product-categories-list,
div.wp-block-woocommerce-product-categories ul.wc-block-product-categories-list,
ul.wc-block-product-categories-list {
  list-style: none !important;
  margin:     0 !important;
  padding:    0 !important;
  display:    grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  gap:        16px !important;
}

.wc-block-product-categories-list-item {
  margin:  0 !important;
  padding: 0 !important;
}

/* The card itself */
.wc-block-product-categories-list-item > a {
  display:         flex !important;
  flex-direction:  column !important;
  background:      var(--slpc-bg) !important;
  border:          1px solid var(--slpc-border) !important;
  border-radius:   var(--slpc-radius) !important;
  overflow:        hidden !important;
  text-decoration: none !important;
  color:           var(--slpc-text) !important;
  box-shadow:      var(--slpc-shadow) !important;
  height:          100% !important;
  transition:      border-color 0.18s, transform 0.18s, box-shadow 0.18s !important;
  /* kill any inherited line-height from theme nav */
  line-height:     normal !important;
  padding:         0 !important;
  min-height:      0 !important;
}

.wc-block-product-categories-list-item > a:hover {
  border-color: var(--slpc-border-hover) !important;
  transform:    translateY(-3px) !important;
  box-shadow:   var(--slpc-shadow-hover) !important;
  color:        var(--slpc-text) !important;
}

/* Image span — acts as the image container */
.wc-block-product-categories-list-item__image {
  display:     block !important;
  width:       100% !important;
  aspect-ratio: 4/3 !important;
  overflow:    hidden !important;
  background:  var(--slpc-bg-img) !important;
  flex-shrink: 0 !important;
}

.wc-block-product-categories-list-item__image img {
  width:      100% !important;
  height:     100% !important;
  object-fit: cover !important;
  display:    block !important;
  transition: transform 0.35s !important;
}

.wc-block-product-categories-list-item > a:hover
.wc-block-product-categories-list-item__image img {
  transform: scale(1.05) !important;
}

/* Category name */
.wc-block-product-categories-list-item__name {
  display:     block !important;
  padding:     12px 14px 14px !important;
  font-size:   0.875rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color:       var(--slpc-text) !important;
}

/* Product count (shown as <mark> inside __name when hasCount:true) */
.wc-block-product-categories-list-item__name mark {
  background:  transparent !important;
  color:       var(--slpc-text-muted) !important;
  font-size:   0.75rem !important;
  font-weight: 400 !important;
}

/* Nested sub-category lists — indent slightly, same card style */
.wc-block-product-categories-list--depth-1 {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  margin-top: 8px !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   2. LEGACY WC PRODUCT GRID BLOCKS  (.wc-block-grid)
   Used by: newest-products, best-selling-products, on-sale-products, etc.
   ══════════════════════════════════════════════════════════════════════════════ */

.wc-block-grid__products {
  display: grid !important;
  gap:     20px !important;
  list-style: none !important;
  margin:  0 !important;
  padding: 0 !important;
}

/* column count classes WC adds: .has-1-columns … .has-6-columns */
.wc-block-grid.has-4-columns .wc-block-grid__products { grid-template-columns: repeat(4, 1fr) !important; }
.wc-block-grid.has-3-columns .wc-block-grid__products { grid-template-columns: repeat(3, 1fr) !important; }
.wc-block-grid.has-2-columns .wc-block-grid__products { grid-template-columns: repeat(2, 1fr) !important; }

.wc-block-grid__product {
  background:     var(--slpc-bg) !important;
  border:         1px solid var(--slpc-border) !important;
  border-radius:  var(--slpc-radius) !important;
  overflow:       hidden !important;
  box-shadow:     var(--slpc-shadow) !important;
  padding:        0 !important;
  margin:         0 !important;
  display:        flex !important;
  flex-direction: column !important;
  transition:     border-color 0.18s, transform 0.18s, box-shadow 0.18s !important;
}

.wc-block-grid__product:hover {
  border-color: var(--slpc-border-hover) !important;
  transform:    translateY(-3px) !important;
  box-shadow:   var(--slpc-shadow-hover) !important;
}

/* Product image */
.wc-block-grid__product-link { display: block !important; }

.wc-block-grid__product-image {
  aspect-ratio: 4/3 !important;
  overflow:     hidden !important;
  background:   var(--slpc-bg-img) !important;
  margin:       0 !important;
  display:      block !important;
}

.wc-block-grid__product-image img {
  width:      100% !important;
  height:     100% !important;
  object-fit: cover !important;
  display:    block !important;
  transition: transform 0.35s !important;
}

.wc-block-grid__product:hover .wc-block-grid__product-image img {
  transform: scale(1.05) !important;
}

/* Title — flex:1 makes all cards same height by absorbing spare space */
.wc-block-grid__product-title {
  font-size:   0.92rem !important;
  font-weight: 700 !important;
  color:       var(--slpc-text) !important;
  line-height: 1.35 !important;
  padding:     14px 16px 4px !important;
  margin:      0 !important;
  display:     block !important;
  flex:        1 !important;
  text-decoration: none !important;
}

/* Price */
.wc-block-grid__product-price {
  font-size:   0.9rem !important;
  font-weight: 600 !important;
  color:       var(--slpc-price) !important;
  padding:     4px 16px 8px !important;
  margin:      0 !important;
  display:     block !important;
}

.wc-block-grid__product-price .woocommerce-Price-amount { color: inherit !important; }

.wc-block-grid__product-price del {
  color:    var(--slpc-text-muted) !important;
  opacity:  0.7 !important;
  font-size: 0.82em !important;
}

/* Rating */
.wc-block-grid__product-rating {
  padding: 0 16px 6px !important;
  margin:  0 !important;
}

/* Add to cart */
.wc-block-grid__product-add-to-cart {
  display:          block !important;
  margin:           auto 16px 16px !important;
  background-color: var(--slpc-green) !important;
  color:            #ffffff !important;
  border:           none !important;
  border-radius:    6px !important;
  font-size:        0.8rem !important;
  font-weight:      600 !important;
  padding:          9px 16px !important;
  text-align:       center !important;
  text-decoration:  none !important;
  transition:       background-color 0.15s !important;
  letter-spacing:   0.02em !important;
  cursor:           pointer !important;
}

.wc-block-grid__product-add-to-cart:hover {
  background-color: var(--slpc-green-d) !important;
  color:            #ffffff !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   3. NEW WC BLOCKS — product-collection (WC 8+)
   ══════════════════════════════════════════════════════════════════════════════ */

.wc-block-product-template {
  gap: 20px !important;
}

.wc-block-product-template .wc-block-product {
  background:     var(--slpc-bg) !important;
  border:         1px solid var(--slpc-border) !important;
  border-radius:  var(--slpc-radius) !important;
  overflow:       hidden !important;
  box-shadow:     var(--slpc-shadow) !important;
  display:        flex !important;
  flex-direction: column !important;
  transition:     border-color 0.18s, transform 0.18s, box-shadow 0.18s !important;
}

.wc-block-product-template .wc-block-product:hover {
  border-color: var(--slpc-border-hover) !important;
  transform:    translateY(-3px) !important;
  box-shadow:   var(--slpc-shadow-hover) !important;
}

.wc-block-product-template .wc-block-product figure,
.wc-block-product-template .wc-block-product .wp-block-woocommerce-product-image {
  aspect-ratio: 4/3 !important;
  overflow:     hidden !important;
  background:   var(--slpc-bg-img) !important;
  margin:       0 !important;
}

.wc-block-product-template .wc-block-product figure img,
.wc-block-product-template .wc-block-product .wp-block-woocommerce-product-image img {
  width:      100% !important;
  height:     100% !important;
  object-fit: cover !important;
  display:    block !important;
  transition: transform 0.35s !important;
}

.wc-block-product-template .wc-block-product:hover figure img,
.wc-block-product-template .wc-block-product:hover .wp-block-woocommerce-product-image img {
  transform: scale(1.05) !important;
}

.wc-block-components-product-name,
.wp-block-woocommerce-product-title a {
  font-size:       0.92rem !important;
  font-weight:     700 !important;
  color:           var(--slpc-text) !important;
  text-decoration: none !important;
  line-height:     1.35 !important;
  display:         block !important;
  padding:         14px 16px 4px !important;
  flex:            1 !important;
}

.wc-block-components-product-price,
.wc-block-components-product-price__value {
  font-size:   0.9rem !important;
  font-weight: 600 !important;
  color:       var(--slpc-price) !important;
  padding:     4px 16px 8px !important;
  display:     block !important;
}

.wc-block-components-product-button .wp-block-button__link {
  background-color: var(--slpc-green) !important;
  color:            #ffffff !important;
  border:           none !important;
  border-radius:    6px !important;
  font-size:        0.8rem !important;
  font-weight:      600 !important;
  padding:          9px 16px !important;
  transition:       background-color 0.15s !important;
  text-decoration:  none !important;
}

.wc-block-components-product-button .wp-block-button__link:hover {
  background-color: var(--slpc-green-d) !important;
  color:            #ffffff !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   4. STANDARD WOOCOMMERCE LOOP  (ul.products — archive/category pages)
   ══════════════════════════════════════════════════════════════════════════════ */

/* Kill WooCommerce clearfix pseudo-elements — they become ghost grid items */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none !important;
  content: none !important;
}

/* CSS Grid enforces equal row heights — flexbox wrap does not */
.woocommerce ul.products {
  display:               grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap:                   20px !important;
  align-items:           stretch !important;
}

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

.woocommerce ul.products li.product {
  /* Override WooCommerce default float + percentage width */
  float:          none !important;
  width:          auto !important;
  margin:         0 !important;
  /* Card styles */
  background:     var(--slpc-bg) !important;
  border:         1px solid var(--slpc-border) !important;
  border-radius:  var(--slpc-radius) !important;
  overflow:       hidden !important;
  box-shadow:     var(--slpc-shadow) !important;
  padding:        0 !important;
  display:        flex !important;
  flex-direction: column !important;
  transition:     border-color 0.18s, transform 0.18s, box-shadow 0.18s !important;
}

.woocommerce ul.products li.product:hover {
  border-color: var(--slpc-border-hover) !important;
  transform:    translateY(-3px) !important;
  box-shadow:   var(--slpc-shadow-hover) !important;
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  display:         block !important;
  text-decoration: none !important;
  color:           inherit !important;
}

.woocommerce ul.products li.product img {
  width:         100% !important;
  aspect-ratio:  4/3 !important;
  object-fit:    cover !important;
  display:       block !important;
  border-radius: var(--slpc-radius) var(--slpc-radius) 0 0 !important;
  transition:    transform 0.35s !important;
  margin:        0 !important;
}

.woocommerce ul.products li.product:hover img { transform: scale(1.05) !important; }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size:   0.92rem !important;
  font-weight: 700 !important;
  color:       var(--slpc-text) !important;
  line-height: 1.35 !important;
  padding:     14px 16px 4px !important;
  margin:      0 !important;
  flex:        1 !important;
}

.woocommerce ul.products li.product .price {
  font-size:   0.9rem !important;
  font-weight: 600 !important;
  color:       var(--slpc-price) !important;
  padding:     4px 16px 12px !important;
  margin:      0 !important;
  display:     block !important;
}

.woocommerce ul.products li.product .price del {
  color:    var(--slpc-text-muted) !important;
  opacity:  0.7 !important;
  font-size: 0.82em !important;
}

.woocommerce ul.products li.product .price ins { text-decoration: none !important; }

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
  display:          block !important;
  margin:           auto 16px 16px !important;
  background-color: var(--slpc-green) !important;
  color:            #ffffff !important;
  border:           none !important;
  border-radius:    6px !important;
  font-size:        0.8rem !important;
  font-weight:      600 !important;
  padding:          9px 16px !important;
  text-align:       center !important;
  text-decoration:  none !important;
  transition:       background-color 0.15s !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
  background-color: var(--slpc-green-d) !important;
  color:            #ffffff !important;
}

.woocommerce ul.products li.product .onsale {
  background:    var(--slpc-green) !important;
  color:         #fff !important;
  border-radius: 6px !important;
  font-size:     0.7rem !important;
  font-weight:   700 !important;
  top:           10px !important;
  left:          10px !important;
  min-height:    0 !important;
  min-width:     0 !important;
  padding:       4px 8px !important;
  line-height:   1.4 !important;
}

.woocommerce ul.products li.product .star-rating {
  padding: 0 16px !important;
  margin:  0 0 4px !important;
  color:   var(--slpc-green) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   5. SINGLE PRODUCT PAGE
   ══════════════════════════════════════════════════════════════════════════════ */

.woocommerce div.product .product_title {
  color:       var(--slpc-text) !important;
  font-weight: 800 !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color:     var(--slpc-price) !important;
  font-weight: 700 !important;
  font-size: 1.4rem !important;
}

.woocommerce div.product .single_add_to_cart_button {
  background-color: var(--slpc-green) !important;
  color:            #ffffff !important;
  border-radius:    6px !important;
  border:           none !important;
  font-weight:      700 !important;
  padding:          12px 28px !important;
  font-size:        1rem !important;
  transition:       background-color 0.15s !important;
}

.woocommerce div.product .single_add_to_cart_button:hover {
  background-color: var(--slpc-green-d) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   6. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .wc-block-grid.has-4-columns .wc-block-grid__products { grid-template-columns: repeat(2, 1fr) !important; }

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

@media (max-width: 600px) {
  ul.wc-block-product-categories-list { grid-template-columns: repeat(2, 1fr) !important; }

  .wc-block-grid.has-4-columns .wc-block-grid__products,
  .wc-block-grid.has-3-columns .wc-block-grid__products { grid-template-columns: repeat(2, 1fr) !important; }

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

  .woocommerce ul.products li.product img,
  .wc-block-grid__product-image { aspect-ratio: 1/1 !important; }
}