/* Index Page Styles - Main CSS file that imports all components */

/* Import all index component styles */
@import url('index/_categories.css');
@import url('index/_stores.css');
@import url('index/_featured_products.css');
@import url('index/_reviews.css');
@import url('index/_footer_text.css');
@import url('index/_mobile_optimizations.css');

/* Index-specific global styles */
.container {
  position: relative;
  overflow-x: hidden; /* Prevent horizontal scroll on mobile */
}

/* Global mobile optimizations for index page */
@media (max-width: 768px) {
  .container {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: 5px;
    padding-right: 5px;
  }
  
  /* Ensure no component causes horizontal overflow */
  * {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Touch-friendly interactions on mobile */
@media (hover: none) and (pointer: coarse) {
  .vertical-card:hover {
    transform: none;
    box-shadow: 0 8px 24px rgba(2,6,23,0.04);
  }
  
  .store-card:hover {
    transform: none;
    box-shadow: 0 4px 16px rgba(2,6,23,0.08);
  }
}

/* Smooth scrolling for mobile category carousel */
@supports (-webkit-overflow-scrolling: touch) {
  .categories-container {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  
  .vertical-card {
    scroll-snap-align: center;
  }
}