/* Container Optimization for Desktop and Laptop */

/* Base container styles */
.container {
  max-width: 1650px;
  margin: 0 auto;
  padding: 0 15px;
  width: 100%;
}

/* Tablet and small desktop */
@media (min-width: 768px) {
  .container {
    padding: 0 20px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    padding: 0 25px;
  }
}

/* Large desktop */
@media (min-width: 1200px) {
  .container {
    padding: 0 30px;
  }
}

/* Extra large desktop */
@media (min-width: 1300px) {
  .container {
    padding: 0 30px;
    max-width: 1650px;
  }
}

/* Ultra wide screens */
@media (min-width: 1600px) {
  .container {
    padding: 0 40px;
    max-width: 1650px;
  }
}

/* Ultra wide screens (1920px+) */
@media (min-width: 1920px) {
  .container {
    padding: 0 50px;
    max-width: 1650px;
  }
}

/* Specific container overrides for different sections */
#hero .container,
.hero-section .container {
  max-width: 1650px;
}

/* Shop page container optimization */
.shop-page .container,
.woocommerce-page .container {
  max-width: 1650px;
}

/* Product page container optimization */
.single-product .container,
.product-page .container {
  max-width: 1650px;
}

/* Footer container optimization */
.footer .container,
#footer .container {
  max-width: 1650px;
}

/* Header container optimization */
.header-style-1 .container,
.main-header .container {
  max-width: 1650px;
}

/* Ensure proper spacing for content */
.container .row {
  margin: 0 -15px;
}

.container .row > [class*="col-"] {
  padding: 0 15px;
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .container {
    padding: 0 10px;
  }

  .container .row {
    margin: 0 -10px;
  }

  .container .row > [class*="col-"] {
    padding: 0 10px;
  }
}

/* Print styles */
@media print {
  .container {
    max-width: none;
    padding: 0;
    margin: 0;
  }
}