/**
 * Loaded LAST in app/layout.tsx — wins over public/css/style.css
 *
 * style.css (max-width: 767px) sets:
 *   .menu_side_area { margin-left: 20px; width: 100%; }
 * which breaks the header flex row (logo + hamburger) and makes the whole
 * page look shifted left with extra space on the right.
 */

/* Never let theme force full-width + offset on header actions */
@media (max-width: 767px) {
  header .menu_side_area {
    margin-left: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Last column should only be as wide as the hamburger + gap, not “100% + margin” */
  header .de-flex > .de-flex-col:last-child {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* Theme’s swiper helper uses 100vw — can exceed visible width on iOS */
  .swiper-container-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Constrain to layout width (avoids 100vw / iOS mismatch); overflow handled in globals */
html,
body {
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 991px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl,
  .container-fluid {
    padding-left: max(16px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
  }

  header .container {
    padding-top: 0 !important;
    padding-bottom: 20px !important;
    padding-left: max(16px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
  }
}