/* =============================================================
   ELIKA MOBILE GLOBAL FIX v2.0
   Phone/tablet only. Desktop remains untouched.
   Goal: true full-bleed page sections + no horizontal/off-canvas drift.
   ============================================================= */

@media (max-width: 900px) {
  /* 1. Hard viewport containment */
  html,
  body.elika-mobile-global-fix-enabled {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
  }

  body.elika-mobile-global-fix-enabled * {
    box-sizing: border-box;
  }

  /* 2. Remove desktop theme container widths from the page canvas */
  body.elika-mobile-global-fix-enabled :is(
    #page,
    .site,
    .site-inner,
    .site-content,
    #content,
    .content-area,
    #primary,
    #main,
    .site-main,
    article.page,
    article.type-page,
    .page-content,
    .entry-content,
    #canvas-content,
    section.custom-content,
    section.custom-content > .container,
    .site-content > .container,
    .site-content > .cs-container,
    #content > .container,
    #content > .cs-container,
    #primary > .container,
    #main > .container
  ) {
    float: none !important;
    left: auto !important;
    right: auto !important;
    inset-inline: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
    translate: none !important;
  }

  /* 3. Every top-level page block owns the full mobile viewport. */
  body.elika-mobile-global-fix-enabled :is(.entry-content,#canvas-content,.page-content) > * {
    position: relative;
    left: auto !important;
    right: auto !important;
    inset-inline: auto !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    translate: none !important;
  }

  /* 4. Known ELIKA custom page roots: true full bleed. */
  body.elika-mobile-global-fix-enabled :is(
    [id^="elika-"],
    [class^="elika-"],
    [class*=" elika-"],
    [class^="eb-"],
    [class*=" eb-"],
    [class^="ers-"],
    [class*=" ers-"],
    [class^="em-"],
    [class*=" em-"]
  ).elika-mobile-root-fix,
  body.elika-mobile-global-fix-enabled .elika-mobile-overflow-fix {
    left: auto !important;
    right: auto !important;
    inset-inline: auto !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    translate: none !important;
    overflow-x: clip !important;
  }

  /* 5. JS marks any actually overflowing descendant with this class. */
  body.elika-mobile-global-fix-enabled .elika-mobile-clamp {
    left: auto !important;
    right: auto !important;
    inset-inline: auto !important;
    float: none !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    translate: none !important;
  }

  body.elika-mobile-global-fix-enabled .elika-mobile-force-width {
    width: 100% !important;
  }

  /* 6. Desktop split grids that are visibly pushing content off-screen are stacked by JS. */
  body.elika-mobile-global-fix-enabled .elika-mobile-stack {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
  }

  body.elika-mobile-global-fix-enabled .elika-mobile-stack > * {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }

  /* 7. Generic responsive media. Iframes can still preserve their own height. */
  body.elika-mobile-global-fix-enabled :is(.entry-content,#canvas-content,.page-content) img,
  body.elika-mobile-global-fix-enabled :is(.entry-content,#canvas-content,.page-content) video {
    max-width: 100% !important;
    height: auto;
  }

  body.elika-mobile-global-fix-enabled :is(.entry-content,#canvas-content,.page-content) iframe {
    max-width: 100% !important;
  }

  /* 8. Prevent editorial copy itself from creating horizontal overflow. */
  body.elika-mobile-global-fix-enabled :is(.entry-content,#canvas-content,.page-content) :is(h1,h2,h3,h4,h5,h6,p,li,blockquote) {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.elika-mobile-global-fix-enabled :is(.entry-content,#canvas-content,.page-content) :is(h1,h2) {
    overflow-wrap: normal;
    word-break: normal;
  }

  /* 9. Common custom full-bleed formulas are explicitly neutralized on mobile. */
  body.elika-mobile-global-fix-enabled :is(.entry-content,#canvas-content,.page-content) :is(
    [style*="100vw"],
    [style*="50vw"],
    [style*="translateX"],
    [style*="translate3d"]
  ) {
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    translate: none !important;
  }

  /* 10. Keep inner editorial shells comfortably padded while section backgrounds bleed edge-to-edge. */
  body.elika-mobile-global-fix-enabled :is(
    .elika-shell,
    .elika-inner,
    .elika-container,
    .eb-shell,
    .ers-shell,
    .em-shell
  ) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    transform: none !important;
  }
}

@media (max-width: 480px) {
  body.elika-mobile-global-fix-enabled :is(
    .elika-shell,
    .elika-inner,
    .elika-container,
    .eb-shell,
    .ers-shell,
    .em-shell
  ) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}