/* ================================
   MOBILE FIXES: BUTTON OVERFLOW + PRODUCT GAPS
================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (max-width: 600px) {

  /* Stop all purple buttons going off-screen */
  .tss-btn,
  .tss-card-dark .tss-btn,
  .tss-lab .tss-btn,
  .tss-bottom-cta .tss-btn,
  .wp-block-woocommerce-product-template .wp-block-button__link,
  .wp-block-woocommerce-product-template .add_to_cart_button,
  .woocommerce ul.products li.product .button,
  .wc-block-grid__product-add-to-cart .wp-block-button__link {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Make inner section cards stop touching screen edges */
  .tss-card-dark,
  .tss-card-light,
  .tss-lab-inner,
  .tss-faq-item {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Fix product grid spacing on mobile */
  .wp-block-woocommerce-product-template,
  .woocommerce ul.products,
  .wc-block-grid__products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 16px !important;
    row-gap: 22px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Make product cards fit inside the 2-column grid */
  .wp-block-woocommerce-product-template li,
  .woocommerce ul.products li.product,
  .wc-block-grid__product {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
  }

  /* Slightly reduce product card text so mobile doesn't feel cramped */
  .wp-block-woocommerce-product-template .wp-block-post-title,
  .wp-block-woocommerce-product-template .wc-block-components-product-name,
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .wc-block-grid__product-title {
    font-size: 15px !important;
    line-height: 1.15 !important;
    min-height: 78px !important;
  }

  /* Product price spacing */
  .wp-block-woocommerce-product-template .price,
  .wp-block-woocommerce-product-template .wc-block-components-product-price,
  .woocommerce ul.products li.product .price,
  .wc-block-grid__product-price {
    margin-bottom: 12px !important;
  }

  /* Add breathing room between products and the section below */
  .wp-block-woocommerce-product-collection {
    padding-bottom: 54px !important;
  }

  /* Fix section spacing below products */
  .tss-content {
    padding-top: 46px !important;
  }

  .tss-section-grid {
    gap: 22px !important;
  }

  .tss-lab {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }

  .tss-faq {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }

  .tss-bottom-cta {
    padding-top: 58px !important;
    padding-bottom: 70px !important;
  }
}