/* LOWIZ mobile interface audit — compact navigation, safe overlays, iOS spacing */
:root{
  --lowiz-safe-top: env(safe-area-inset-top, 0px);
  --lowiz-safe-bottom: env(safe-area-inset-bottom, 0px);
  --lowiz-mobile-header: 58px;
  --lowiz-overlay-layer: 4000;
  --lowiz-modal-layer: 4010;
}

html{scroll-padding-top:72px!important}
:focus-visible{outline:3px solid #9b8cff!important;outline-offset:3px}

@media (max-width:760px){
  html{scroll-padding-top:calc(var(--lowiz-mobile-header) + 12px)!important}
  body{padding-bottom:var(--lowiz-safe-bottom)!important}

  /* One compact mobile header: brand + search + cart + menu. */
  .site-header{
    position:sticky!important;
    top:0!important;
    z-index:1000!important;
    min-height:var(--lowiz-mobile-header)!important;
    padding:0!important;
    background:rgba(8,9,14,.96)!important;
    backdrop-filter:blur(18px)!important;
  }
  .site-header .nav-shell,
  .site-header.scrolled .nav-shell{
    width:calc(100% - 24px)!important;
    min-height:var(--lowiz-mobile-header)!important;
    height:var(--lowiz-mobile-header)!important;
    margin:0 auto!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:8px!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .site-header .brand{
    min-width:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    font-size:1.05rem!important;
    white-space:nowrap!important;
  }
  .site-header .desktop-nav,
  .site-header .market-search,
  .market-category-bar,
  .site-header .theme-toggle,
  .site-header .wallet-badge,
  .site-header .library-trigger,
  .site-header .nav-cta,
  .site-header .login-trigger{display:none!important}

  .site-header .nav-actions{
    display:flex!important;
    grid-column:auto!important;
    grid-row:auto!important;
    align-items:center!important;
    gap:4px!important;
  }
  .site-header .search-trigger,
  .site-header .cart-trigger,
  .site-header .menu-toggle{
    display:grid!important;
    place-items:center!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    margin:0!important;
    padding:0!important;
    border-radius:12px!important;
    color:#f4f3ff!important;
    background:rgba(255,255,255,.06)!important;
  }
  .site-header .menu-toggle{gap:5px!important}
  .site-header .menu-toggle i{width:18px!important;background:#f4f3ff!important}
  .site-header .cart-badge{top:-3px!important;right:-3px!important}

  /* Mobile drawer contains the account tools; it never overlays the header. */
  .site-header .mobile-menu{
    position:fixed!important;
    z-index:1010!important;
    top:calc(var(--lowiz-mobile-header) + 8px)!important;
    left:12px!important;
    right:12px!important;
    max-height:0!important;
    padding:0 16px!important;
    overflow:hidden!important;
    border:1px solid transparent!important;
    border-radius:18px!important;
    color:#f6f5fb!important;
    background:rgba(18,19,29,.98)!important;
    box-shadow:0 24px 60px rgba(0,0,0,.48)!important;
    opacity:0!important;
    pointer-events:none!important;
  }
  .site-header .mobile-menu.open{
    max-height:min(78dvh,470px)!important;
    padding:12px 16px calc(14px + var(--lowiz-safe-bottom))!important;
    border-color:rgba(255,255,255,.13)!important;
    opacity:1!important;
    pointer-events:auto!important;
  }
  .site-header .mobile-menu a,
  .site-header .mobile-menu button{
    width:100%!important;
    min-height:46px!important;
    padding:0 4px!important;
    border:0!important;
    border-bottom:1px solid rgba(255,255,255,.07)!important;
    border-radius:0!important;
    color:#f5f4fb!important;
    background:transparent!important;
    font:700 14px/1.2 var(--font,system-ui)!important;
    text-align:left!important;
  }
  .site-header .mobile-menu>*:last-child{border-bottom:0!important}

  /* The first content and products remain visible immediately on category screens. */
  .category-hero,
  .catalog-hero,
  .random-accounts-hero,
  .gaming-category-hero{
    min-height:120px!important;
    height:120px!important;
  }
  .category-hero [class*="letter"],
  .category-hero [class*="monogram"],
  .catalog-hero [class*="letter"],
  .catalog-hero [class*="monogram"]{display:none!important}
  .lowiz-home-categories .lhc-card,
  .lhc-card{min-height:124px!important}
  .lowiz-home-categories .lhc-media{background-size:cover!important}

  /* There is one support entry point. It respects the iPhone home indicator. */
  .floating-whatsapp,
  #floatingWhatsapp{display:none!important}
  #supportFloatingButton.floating-support,
  .floating-support{
    z-index:900!important;
    right:12px!important;
    bottom:calc(12px + var(--lowiz-safe-bottom))!important;
    width:48px!important;
    min-width:48px!important;
    height:48px!important;
    min-height:48px!important;
    padding:0!important;
    border-radius:14px!important;
  }
  .floating-support b{display:none!important}
  .mobile-buy-bar{
    z-index:920!important;
    min-height:64px!important;
    padding:9px 12px max(9px,var(--lowiz-safe-bottom))!important;
  }
  .compare-tray{
    z-index:930!important;
    bottom:calc(74px + var(--lowiz-safe-bottom))!important;
  }
  body:has(.compare-tray:not([hidden])) .floating-support{display:none!important}

  /* All customer modals own the top visual layer and keep CTAs out of the safe area. */
  .cart-overlay,
  .search-overlay,
  .product-overlay,
  .checkout-overlay,
  .auth-overlay,
  .tiktok-order-overlay,
  .wallet-overlay,
  .account-overlay,
  .purchase-choice-overlay,
  .support-modal-overlay,
  .pdf-library-overlay,
  .pdf-reader-overlay,
  .smart-overlay,
  .lowiz-mobile-drawer,
  .lx-overlay{z-index:var(--lowiz-overlay-layer)!important}

  .cart-drawer,
  .search-modal,
  .product-modal,
  .checkout-modal,
  .auth-modal,
  .tiktok-order-modal,
  .support-modal,
  .smart-modal,
  .pdf-library-modal,
  .pdf-reader-modal{z-index:var(--lowiz-modal-layer)!important}

  .product-overlay,
  .search-overlay,
  .checkout-overlay{align-items:end!important;padding:0!important}
  .product-modal,
  .search-modal,
  .checkout-modal{
    width:100%!important;
    max-height:min(92dvh,860px)!important;
    margin:0!important;
    padding:18px 16px calc(18px + var(--lowiz-safe-bottom))!important;
    overflow-y:auto!important;
    border-right:0!important;
    border-bottom:0!important;
    border-left:0!important;
    border-radius:22px 22px 0 0!important;
  }
  .product-modal{gap:14px!important}
  .detail-cover{min-height:190px!important;max-height:250px!important}
  .detail-copy h2{font-size:1.45rem!important;line-height:1.15!important}
  .detail-copy>p{
    display:-webkit-box!important;
    overflow:hidden!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:3!important;
  }
  .detail-includes{margin-bottom:14px!important;line-height:1.55!important}
  .detail-actions,
  .checkout-actions{position:sticky!important;bottom:calc(-18px - var(--lowiz-safe-bottom))!important;padding:12px 0 calc(12px + var(--lowiz-safe-bottom))!important;background:linear-gradient(180deg,rgba(18,18,22,0),#121216 28%)!important}
  .detail-actions .button,
  .checkout-actions .button,
  .checkout-modal [type="submit"]{min-height:50px!important}

  /* Fixed widgets must never sit over an active surface. */
  body.no-scroll .floating-support,
  body.no-scroll .floating-whatsapp,
  body.no-scroll .mobile-buy-bar,
  body.no-scroll .compare-tray,
  body.no-scroll .support-entry-prompt{
    visibility:hidden!important;
    pointer-events:none!important;
  }

  .button,
  .button-primary,
  .button-secondary,
  .product-modal .button,
  .cart-drawer .button,
  .checkout-modal button:not(.close-button),
  .support-modal button:not(.close-button){
    min-height:48px!important;
    border-radius:12px!important;
  }
}

@media (max-width:380px){
  .site-header .nav-shell{width:calc(100% - 18px)!important}
  .site-header .search-trigger,
  .site-header .cart-trigger,
  .site-header .menu-toggle{width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important}
}