/* ================================================================
   Mobile product-card fix — kamchi.co.il   (2026-10-21)
   Scope: @media (max-width:767px) ONLY — desktop is NOT touched.
   Loaded AFTER woocommerce.css (dependency) so these rules win.

   Fixes the broken mobile product grid on category pages:
     1. .container-block kept the 80px desktop side-padding on phones,
        shrinking the grid to ~245px and making product images tiny
        (~116px). Replaced with a real phone gutter → images ~170px.
     2. .products-list__item stretched (min-height:100% +
        justify-content:space-between + padding-bottom:40px) so cards
        in a pair matched the tallest and spread content apart, leaving
        large empty vertical gaps. Content now packs under the image.
     3. The price block had no white-space control, so the ₪ currency
        symbol wrapped onto its own line. Each amount is now one unit.
   ================================================================ */

@media (max-width: 767px) {

  /* (1) Real phone gutter instead of the 80px desktop padding, scoped
         to the product-grid section so the rest of the page is untouched. */
  .section-products__items .container-block {
    padding-left: 12px;
    padding-right: 12px;
  }
  .section-products__items #prod_list_hold {
    margin-left: 0;
    margin-right: 0;
  }

  /* (2) Pack card content directly under the image — no stretch gap. */
  .section-products__items .products-list__item {
    justify-content: flex-start;
    min-height: 0;
    padding-bottom: 16px;
  }
  .section-products__items .products-list__thumb {
    margin-bottom: 10px;
  }
  .section-products__items .products-list__item-top + .products-list__item-bottom {
    margin-top: 8px;
  }
  .section-products__items .products-list__buttons {
    margin-bottom: 0;
  }

  /* (3) Price on one line, currency symbol never orphaned, centered. */
  .section-products__items .products-list__buttons .products-price__item {
    justify-content: center !important;
  }
  .section-products__items .prices-block {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 2px 8px;
  }
  .section-products__items .prices-block del,
  .section-products__items .prices-block ins,
  .section-products__items .prices-block .woocommerce-Price-amount {
    white-space: nowrap;
  }

  /* Title: centered under the image (matches the Figma intent). */
  .section-products__items .products-list__title {
    text-align: center;
    margin-bottom: 0;
  }
}