/* Reset completo para corrigir problemas de alinhamento */
html, body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: white !important;
}

#app {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: white !important;
}

.app-container {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: white !important;
}

.app-container > header {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  background-color: white !important;
}

.app-container > main {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  background-color: white !important;
}

.container {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.header-container,
.hero-banner .container,
.benefits-section .container,
.featured-products .container,
.promotion-section .container,
.about-section .container,
.new-arrivals .container,
.trust-section .container,
.offer-section .container {
  width: 100% !important;
  display: block !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Correções específicas para seções */
.hero-banner,
.benefits-section,
.featured-products,
.promotion-section,
.about-section,
.new-arrivals,
.trust-section,
.offer-section {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* Correções de flexbox */
@media (min-width: 768px) {
  .hero-banner .container {
    display: flex !important;
  }
}