/*
Theme Name: The Petite Rack Child
Theme URI: https://thepetiterack.com
Description: Child theme for Divi
Author: The Petite Rack
Template: Divi
Version: 1.0
*/

/* You can put custom CSS below this line */
/* =========================
   SIMILAR ITEMS GRID (PDP)
   ========================= */

.pfa-product-grid ul.products {
  display: flex !important;
  flex-wrap: wrap;
  gap: 32px;
}

.pfa-product-grid ul.products li.product {
  width: calc(25% - 24px); /* 4-up grid */
}

@media (max-width: 980px) {
  .pfa-product-grid ul.products li.product {
    width: calc(50% - 16px); /* 2-up tablet */
  }
}

@media (max-width: 480px) {
  .pfa-product-grid ul.products li.product {
    width: 100%; /* 1-up mobile */
  }
}

.pfa-product-grid .product {
  border-radius: 16px;
  overflow: hidden;
}

.pfa-product-grid .woocommerce-loop-product__title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}

.pfa-product-grid .price {
  font-size: 14px;
  margin-top: 6px;
}
/* Similar Items section spacing */
.pfa-similar-wrap{
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 0 24px 40px;
}

.pfa-similar-title{
  font-size: 32px;
  margin: 0 0 18px;
}

/* Ensure Woo shortcode grid doesn't fight your layout */
.pfa-similar-grid ul.products{
  margin: 0 !important;
}