/**
 * Storefront content edges. Header, footer and page sections share this class.
 * Horizontal geometry is protected from ordinary Tailwind utilities. Put card
 * padding and readable text measures inside this container, never on it.
 * Loaded in the critical CSS seed so the first paint uses the final width.
 */
.joalpe-content-container {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1536px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

@media (min-width: 768px) {
  .joalpe-content-container {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

@media (min-width: 1024px) {
  .joalpe-content-container {
    padding-left: 64px !important;
    padding-right: 64px !important;
  }
}

@media (min-width: 1280px) {
  .joalpe-content-container {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
}

@media (min-width: 1536px) {
  .joalpe-content-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (min-width: 1920px) {
  .joalpe-content-container {
    max-width: 1720px !important;
  }
}