/* SECURIX v5 — robust mobile/tablet viewport fence.
   Loaded LAST. It intentionally uses a wider 1100px breakpoint because some
   Android/Chrome configurations expose a ~980px CSS viewport in portrait. */
@media (max-width:1100px){
  html,body{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:hidden!important;overscroll-behavior-x:none}
  body{position:relative!important}
  *,*::before,*::after{box-sizing:border-box}
  img,svg,video,canvas,iframe{max-width:100%;height:auto}
  header,[data-header],main,#main-content,footer{width:100%!important;max-width:100%!important;min-width:0!important}
  #main-content{overflow-x:hidden!important}
  #main-content>section,#main-content>div{max-width:100%!important;min-width:0!important}

  /* Header: force a real viewport-based mobile composition instead of relying
     on inherited percentage widths from desktop wrappers. */
  [data-header]{padding:8px 0 0!important;overflow:visible!important}
  [data-header]>div{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;min-width:0!important;margin:0 auto!important}
  .sx-header-utility{display:none!important}
  .sx-header-main-row,[data-sticky-row]{
    width:100%!important;max-width:100%!important;min-width:0!important;
    display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;gap:8px!important;margin-top:0!important;
    padding:8px!important;border-radius:16px!important;overflow:visible!important
  }
  .sx-header-main-row>[data-mega-toggle],.sx-header-main-row>nav{display:none!important}
  .sx-header-logo{grid-column:1!important;grid-row:1!important;display:flex!important;align-items:center!important;min-width:0!important;padding:0 2px!important}
  .sx-header-logo img{display:block!important;width:auto!important;height:28px!important;max-width:116px!important;object-fit:contain!important}
  .sx-header-actions{grid-column:3!important;grid-row:1!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:6px!important;min-width:0!important}
  .sx-header-actions>[data-mobile-open],.sx-header-actions>[data-cart-open]{display:grid!important;width:38px!important;height:38px!important;min-width:38px!important;border-radius:10px!important}
  .sx-header-account,.sx-header-wishlist,.sx-header-actions>div:last-child{display:none!important}
  .sx-live-search{grid-column:1/-1!important;grid-row:2!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important}
  .sx-search-form{width:100%!important;max-width:100%!important;min-width:0!important;height:42px!important}
  .sx-search-form input{width:1%!important;min-width:0!important;max-width:none!important;font-size:14px!important}
  .sx-search-panel{left:0!important;right:0!important;width:100%!important;max-width:100%!important}

  /* Drawers/dialogs may never define the document width. */
  #mobileMenu,#cartDrawer,[role="dialog"]{max-width:100vw!important;overflow:hidden!important}
  #mobileMenu aside{width:min(390px,90vw)!important;max-width:90vw!important}
  dialog{width:min(560px,calc(100vw - 20px))!important;max-width:calc(100vw - 20px)!important;margin:auto!important}

  /* Authentication gets a viewport-anchored wrapper. This fixes the Android
     case where a desktop ancestor leaves the form at ~250px wide/off-screen. */
  .sx-auth{
    width:100vw!important;max-width:100vw!important;min-width:0!important;
    margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;
    padding:24px 12px 52px!important;overflow:hidden!important
  }
  .sx-auth-wrap{width:min(560px,calc(100vw - 24px))!important;max-width:calc(100vw - 24px)!important;min-width:0!important;margin:0 auto!important;padding:0!important}
  .sx-auth-card,.sx-auth-form,.sx-auth-form label,.sx-auth-two{width:100%!important;max-width:100%!important;min-width:0!important}
  .sx-auth-two{grid-template-columns:1fr!important}
  .sx-auth-form input:not([type=checkbox]){width:100%!important;max-width:100%!important;min-width:0!important}
  .sx-auth-logo img{max-width:150px!important;height:auto!important}

  /* Tables can scroll INSIDE their own component, never the page. */
  table{max-width:none}
  .sx-compare-shell,.sx-compare-group,.sx-compare-table,.sx-detail-products-final{min-width:0!important}

  footer{overflow:hidden!important}
}

@media (max-width:430px){
  [data-header]>div{width:calc(100vw - 12px)!important;max-width:calc(100vw - 12px)!important}
  .sx-header-main-row,[data-sticky-row]{padding:7px!important;gap:7px!important}
  .sx-header-logo img{max-width:104px!important;height:26px!important}
  .sx-header-actions{gap:5px!important}
  .sx-header-actions>[data-mobile-open],.sx-header-actions>[data-cart-open]{width:36px!important;height:36px!important;min-width:36px!important}
  .sx-auth{padding-left:10px!important;padding-right:10px!important}
  .sx-auth-wrap{width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important}
}