/* --------------------------------------------------------------------------
   1) Base styles: 4 columns on desktop, hide star ratings & add-to-cart
-------------------------------------------------------------------------- */
body .ps-js-product.products.columns-3 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 15px !important;           /* total horizontal gap = 3 * 15px = 45px */
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Empty-state alert spacing */
body .ps-js-product-message.ps-alert {
  margin: 0 !important;

}



body .ps-js-product.products.columns-3 li.product {
  /* 4 columns by default (desktop) */
  width: calc((100% - 45px) / 4) !important;  /* subtract exactly 3*gap */
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}



body .ps-js-product.products.columns-3 li.product .ph-summary-wrap {
  text-align: center !important;
  position: relative !important;
  margin-bottom: .8em !important;
  margin-top: 0 !important;
}


/* --------------------------------------------------------------------------
   2) Thumbnail padding & image spacing
-------------------------------------------------------------------------- */
body .ps-js-product.products li.product a.woocommerce-loop-product__link {
  display: block !important;        /* make sure padding takes effect */
  padding-top:    20px !important;
  overflow: hidden !important;      /* hide zoom overflow */
  position: relative !important;    /* for sale badges */
}




/* Hide review stars & add-to-cart */
body .ps-js-product li.product .add_to_cart_button,
body .ps-js-product li.product .button.product_type_simple,
body .ps-js-product li.product .button.product_type_variable {
  display: none !important;
}

/* Product image: fill container, no shadow */
body .ps-js-product li.product img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  box-shadow: none !important;
}

/* Give the <small> its own block and styling, but no fixed font-size */
body .ps-js-product li.product small.ast-woo-product-category {
  display: block !important;
    font-size: 13.6px !important;
  color: rgba(0, 0, 0, 0.9) !important;   /* adjust opacity if you like */
  pointer-events: none !important;
  
  /* no font-size here — <small> will already be smaller */
}


/* Product title */
body .ps-js-product li.product .woocommerce-loop-product__title {
  font-weight: 500 !important; /* normal weight */
    font-size: 16px !important;
  color: #000 !important;
}

/* Extra horizontal padding on just the product titles in PeepSo profile */
body .ps-js-product.products.columns-3 li.product .woocommerce-loop-product__title {
  padding-left:  1.2em !important;
  padding-right: 1.2em !important;
  box-sizing:    border-box !important;
}


/* Price styling */
body .ps-js-product li.product .price {
  display: block !important;
  margin-bottom: 0.5em !important;
  font-weight: 400 !important;
    font-size: 14.4px !important;
  color: #000 !important;
}




/* --------------------------------------------------------------------------
Fix the sale bubbles placment when product is on sale
-------------------------------------------------------------------------- */
/* Ensure the product link container is relatively positioned and doesn't clip its children */
.ps-js-product.products li.product a.woocommerce-loop-product__link {
    position: relative !important;
    overflow: visible !important;
}

/* Lower the image’s stacking order */
.ps-js-product.products li.product a.woocommerce-loop-product__link img {
    position: relative !important;
    z-index: 1 !important;
}





/* ------------------------------------------------------------
   3) Image zoom on hover
------------------------------------------------------------ */
/* make sure the link wrapper hides the overflow */
body .ps-js-product.products li.product a.woocommerce-loop-product__link {
  display: block;          /* ensures block formatting */
  overflow: hidden !important;
}

/* Subtle 5% hover-zoom on product thumbnails */
body .ps-js-product.products li.product a.woocommerce-loop-product__link img {
  /* ready to animate */
  transition: transform 0.4s ease-in-out;
}

body .ps-js-product.products li.product a.woocommerce-loop-product__link:hover img {
  /* gentle 5% grow */
  transform: scale(1.05) !important;
}




/* --------------------------------------------------------------------------
   2) Responsive adjustments: 
      - 2 columns on tablets (<= 992px)
      - 1 column on smaller screens (<= 576px)
-------------------------------------------------------------------------- */

/* ==========================================================================
   PeepSo Product Grid — perfect 3-up and 2-up layouts with exact gaps
   ========================================================================== */

/* --- 3-columns between 61.24em (980px) and 46.25em (740px) --- */
@media (max-width: 61.24em) and (min-width: 46.25em) {
  #peepso-wrap .ps-js-product.products.columns-3 {
    display: flex !important;
    flex-wrap: wrap !important;
    /* 1.5rem gutters all around */
    gap: 1.5rem !important;
    margin: 0;    /* no extra side-margins */
    padding: 0;   /* assume container padding is handled elsewhere */
  }
  #peepso-wrap .ps-js-product.products.columns-3 li.product {
    /* calc((100% of row – total gutters) / 3 columns) */
    flex: 0 0 calc((100% - (2 * 1.5rem)) / 3) !important;
    max-width: calc((100% - (2 * 1.5rem)) / 3) !important;
  }
}

/* --- 2-columns below 46.24em (740px) --- */
@media (max-width: 46.24em) {
  #peepso-wrap .ps-js-product.products.columns-3 {
    display: flex !important;
    flex-wrap: wrap !important;
    /* slightly tighter gutter on very small screens */
    gap: 1rem !important;
    margin: 0;
    padding: 0;
  }
  #peepso-wrap .ps-js-product.products.columns-3 li.product {
    /* calc((100% – 1 gutter) / 2 columns) */
    flex: 0 0 calc((100% - 1rem) / 2) !important;
    max-width: calc((100% - 1rem) / 2) !important;
  }
}



/* ≤ 980px: force those exact font‑sizes */
@media (max-width: 61.24em) {
  /* Product title */
  body .ps-js-product li.product .woocommerce-loop-product__title {
    font-size: 14.591999px !important;
  }

  /* Category (rel="tag") */
  body .ps-js-product li.product a[rel="tag"] {
    font-size: 12.403199px !important;
  }

  /* Price */
  body .ps-js-product li.product .price {
    font-size: 13.132799px !important;
  }
}