/* Full-width responsive layout override */

/* Remove max-width constraints so content fills the screen */
.app-container,
.main-content,
[class*="container"] {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

/* Navbar full width */
.navbar {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}
.navbar-container {
  max-width: 100% !important;
  width: 100% !important;
  height: 72px !important;
}
.navbar-brand {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
}
.navbar-brand img {
  height: 44px !important;
}
.nav-links a,
.nav-link {
  font-size: 0.95rem !important;
  padding: 8px 14px !important;
  font-weight: 500 !important;
}

/* Hero banner full width */
.hero {
  border-radius: 0 !important;
  margin-left: -2rem !important;
  margin-right: -2rem !important;
  padding: 5rem 3rem !important;
}

/* Product grids - more columns on wider screens */
.products-grid,
.shop-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 1.5rem !important;
}

/* Categories grid - fill width */
.categories-grid {
  max-width: 100% !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
}

/* Product detail page - better use of space */
.product-detail-grid {
  max-width: 100% !important;
  gap: 3rem !important;
}

/* Footer full width */
.store-footer {
  margin-left: -2rem !important;
  margin-right: -2rem !important;
  padding-left: 3rem !important;
  padding-right: 3rem !important;
  border-radius: 0 !important;
}
.footer-grid {
  max-width: 100% !important;
}

/* Checkout page - better layout */
.checkout-grid {
  max-width: 100% !important;
}

/* Large screens (1400px+) - even more products per row */
@media (min-width: 1400px) {
  .products-grid,
  .shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 2rem !important;
  }
  .categories-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 2rem !important;
  }
  .hero {
    padding: 6rem 4rem !important;
  }
  .hero-content h1 {
    font-size: 3.5rem !important;
  }
  .product-detail-grid {
    grid-template-columns: 1.2fr 1fr !important;
  }
}

/* Extra large screens (1800px+) */
@media (min-width: 1800px) {
  .app-container,
  .main-content,
  [class*="container"] {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
  }
  .products-grid,
  .shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  }
}

/* Tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .products-grid,
  .shop-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .categories-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Mobile refinements */
@media (max-width: 768px) {
  .app-container,
  .main-content,
  [class*="container"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .hero {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    padding: 3rem 1.5rem !important;
  }
  .store-footer {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}