/*this code is to style the results on teh shop landing page i.e. align left right and up down and neaten appearance */
@media (max-width: 767px) {
  /* Make the product tiles use flex column layout */
  li.wc-block-product {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
  }
  
    li.wc-block-product {
    /* Light grey border to identify each item individualy */
    border: 1px solid #e0e0e0;
  }

  /* Make product titles consistent height */
  li.wc-block-product h3.wp-block-post-title {
    min-height: 3.5em; /* Adjust based on your title length */
    margin-bottom: auto;
  }

  /* Ensure price stays near bottom if empty (optional tweak) */
  li.wc-block-product .wc-block-components-product-price {
    min-height: 1.5em;
  }

  /* View Product button spacing */
  li.wc-block-product .wp-block-button {
    margin-top: auto !important;
  }

  /* Optional: constrain button width to look tidy */
  li.wc-block-product .wp-block-button__link {
    display: inline-block;
    margin: 12px auto 0;
    padding: 8px 16px;
    font-size: 14px;
  }

  /* Remove bottom space under product image */
  li.wc-block-product .wc-block-grid__product-image {
    margin-bottom: 4px !important;
  }

  /* Reduce margin below product title */
  li.wc-block-product h3.wp-block-post-title {
    margin-bottom: 10px !important;
  }

  /* Remove excess margin from the price block */
  li.wc-block-product .wc-block-components-product-price {
    margin-bottom: 4px !important;
  }

  /* Tighten up the button block margin */
  li.wc-block-product .wp-block-button {
    margin-bottom: 0 !important;
  }

  /* Adjust padding inside the tile for overall compaction */
  li.wc-block-product {
    padding: 2px !important;
  }

  /* Product title: reduce space below */
  li.wc-block-product h3.wp-block-post-title {
    margin-bottom: 0 !important;
  }

  /* Price wrapper: collapse height */
  li.wc-block-product .wp-block-woocommerce-product-price,
  li.wc-block-product .wc-block-components-product-price {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    line-height: 0 !important;
    display: none !important; /* Hide if empty */
  }

  /* View Product button wrapper: pull it up */
  li.wc-block-product .wp-block-button {
    margin-top: 8px !important;
  }

  /* Align button itself tightly */
  li.wc-block-product .wp-block-button__link {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Add space above product thumbnail */
  li.wc-block-product .wc-block-grid__product-image {
    margin-top: 20px !important;
  }
}