/* mobile-fixes.css
   - small, targeted overrides for product grid / carousels on small screens
   - non-destructive: only increases responsiveness and reduces paddings
*/
@media (max-width: 767px) {
  /* Ensure product cards stack and are full width */
  .product-grid .product, .product-item, .product-card {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* bxSlider slide full width */
  .bx-wrapper .bx-viewport, .bx-wrapper .bx-slider, .bxslider, .bx-wrapper .bxslider li {
    width: 100% !important;
    max-width: 100% !important;
  }
  .bx-wrapper img, .product-card img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* Reduce margins/paddings for list/grid */
  .product-grid { margin-left: -8px !important; margin-right: -8px !important; }
  .product-grid .product { padding-left: 8px !important; padding-right: 8px !important; }

  /* Header search and filters to wrap */
  .search-area, .header-top .search, .filter-bar {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Make select boxes full width for SumoSelect transformed elements */
  .SumoSelect, .SumoSelect .CaptionCont {
    width: 100% !important;
  }

  /* Small tweak: ensure product meta text wraps */
  .product-card .title, .product-card .category {
    white-space: normal !important;
  }
}