/* ============================================================
   WOOCOMMERCE – RESPONSIVE PRODUCT GRID COLUMNS
   Mobile:  3 columns  (max 767px)
   Tablet:  4 columns  (768px – 1024px)
   Desktop: 6 columns  (1025px and above)

   Paste into: Appearance → Customize → Additional CSS
   ============================================================ */


/* ----------------------------------------------------------
   MOBILE – 3 Columns (max-width: 767px)
   ---------------------------------------------------------- */
@media (max-width: 767px) {

  ul.products,
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 0 8px !important;
  }

  ul.products li.product,
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product {
    width: 100% !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
  }

  /* Shrink font sizes slightly so text fits in narrow cards */
  ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  ul.products li.product .price,
  .woocommerce ul.products li.product .price {
    font-size: 11px !important;
  }

  ul.products li.product .button,
  .woocommerce ul.products li.product .button {
    font-size: 10px !important;
    padding: 7px 4px !important;
  }

}


/* ----------------------------------------------------------
   TABLET – 4 Columns (768px – 1024px)
   ---------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {

  ul.products,
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
    padding: 0 12px !important;
  }

  ul.products li.product,
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product {
    width: 100% !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
  }

  ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  ul.products li.product .price,
  .woocommerce ul.products li.product .price {
    font-size: 13px !important;
  }

  ul.products li.product .button,
  .woocommerce ul.products li.product .button {
    font-size: 12px !important;
    padding: 9px 8px !important;
  }

}


/* ----------------------------------------------------------
   DESKTOP – 6 Columns (1025px and above)
   ---------------------------------------------------------- */
@media (min-width: 1025px) {

  ul.products,
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 16px !important;
    padding: 0 !important;
  }

  ul.products li.product,
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product {
    width: 100% !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
  }

  ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  ul.products li.product .price,
  .woocommerce ul.products li.product .price {
    font-size: 13px !important;
  }

  ul.products li.product .button,
  .woocommerce ul.products li.product .button {
    font-size: 12px !important;
    padding: 9px 10px !important;
  }

}


/* ----------------------------------------------------------
   SHARED CARD STYLES – applies to all screen sizes
   ---------------------------------------------------------- */

ul.products li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: #ffffff !important;
  border: 1px solid #ebebeb !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07) !important;
  padding: 10px 8px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
  overflow: hidden !important;
}

ul.products li.product:hover,
.woocommerce ul.products li.product:hover {
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.13) !important;
  transform: translateY(-2px) !important;
}

/* Product image fills the card width */
ul.products li.product img,
.woocommerce ul.products li.product img {
  width: 100% !important;
  height: auto !important;
  border-radius: 5px !important;
  display: block !important;
}

/* Add to Cart button – full width inside card */
ul.products li.product .button,
.woocommerce ul.products li.product .button {
  display: block !important;
  width: 100% !important;
  margin-top: 8px !important;
  font-weight: 800 !important;
  text-align: center !important;
  border-radius: 5px !important;
  background-color: #e74c3c !important;
  color: #ffffff !important;
  border: none !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:hover {
  background-color: #c0392b !important;
  color: #ffffff !important;
}

/* Price color */
ul.products li.product .price,
.woocommerce ul.products li.product .price {
  color: #c0392b !important;
  font-weight: 800 !important;
  text-align: center !important;
}