/* /assets/css/woo-overrides.css */

/* =========================================================
   Cycle Fix London — WooCommerce Isolation Mode
   Purpose:
   - Stop hero/min-height rules from affecting shop pages
   - Fix footer overlap by ensuring main content expands
   - Make /shop/ “boring and stable”
   ========================================================= */

/* 0) Remove flex/sticky-footer hacks on Woo pages —
      these were causing the whitespace gap.
      The isolation overrides are now in style.css. */

/* 2) Kill common “hero section” behaviour on shop archives */
body.cfx-woo-isolation.woocommerce-shop .woocommerce-products-header,
body.cfx-woo-isolation.woocommerce-shop .woocommerce-products-header * {
  height: auto !important;
  min-height: 0 !important;
}

body.cfx-woo-isolation.woocommerce-shop .woocommerce-products-header {
  padding-top: 24px !important;
  padding-bottom: 16px !important;
  margin-bottom: 16px !important;
}

/* 3) The search bar wrapper: prevent it from forcing huge blank space */
body.cfx-woo-isolation.woocommerce-shop .woocommerce-product-search,
body.cfx-woo-isolation.woocommerce-shop .product-search,
body.cfx-woo-isolation.woocommerce-shop .shop-search,
body.cfx-woo-isolation.woocommerce-shop .shop-search-wrap {
  height: auto !important;
  min-height: 0 !important;
  margin-bottom: 16px !important;
  padding-bottom: 0 !important;
}

/* 4) Ensure product loop sits directly after header/search */
body.cfx-woo-isolation.woocommerce-shop ul.products,
body.cfx-woo-isolation.woocommerce-shop .products {
  margin-top: 0 !important;
}

/* 5) Stop any accidental clipping from theme wrappers */
body.cfx-woo-isolation.woocommerce-shop #primary,
body.cfx-woo-isolation.woocommerce-shop #main,
body.cfx-woo-isolation.woocommerce-shop .content-area,
body.cfx-woo-isolation.woocommerce-shop .site-main {
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
}

/* 6) Optional: if your theme has a generic “section” class with min-height:100vh,
      neutralise it ONLY on Woo pages.
      Add/adjust selectors to match your theme (examples below). */
body.cfx-woo-isolation .hero,
body.cfx-woo-isolation .page-hero,
body.cfx-woo-isolation .section--hero,
body.cfx-woo-isolation .cfx-hero,
body.cfx-woo-isolation .cfx-page-header {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

/* 7) Keep things readable (common “clumped” typography fixes) */
body.cfx-woo-isolation.woocommerce-shop .woocommerce-result-count,
body.cfx-woo-isolation.woocommerce-shop .woocommerce-ordering {
  margin: 0 0 16px 0 !important;
}

/* 8) Mobile sanity: prevent huge vertical gaps */
@media (max-width: 768px) {
  body.cfx-woo-isolation.woocommerce-shop .woocommerce-products-header {
    padding-top: 16px !important;
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
  }
}