/* ZELQIVO mobile stability + responsive alignment layer */
@media (max-width:700px){
  *,*::before,*::after{box-sizing:border-box!important}
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  body{min-width:0!important}
  img,video,svg,canvas{max-width:100%!important}

  /* Stop the cloned fixed hero from covering the real page sections. */
  #zelqivo-anime-bg{display:none!important;visibility:hidden!important;pointer-events:none!important}

  header,.site-header,.header,.navbar,.topbar,.main-header{width:100%!important;max-width:100%!important;overflow:visible!important}
  .header-inner,.header-container{width:100%!important;max-width:100%!important;display:flex!important;align-items:center!important}
  nav,.primary-nav{max-width:100%!important}

  main,section,.products-section,.category-hero,.future,.content,.page-section{width:100%!important;max-width:100%!important;min-width:0!important}
  .hero,.hero-section,.hero-content,.hero-copy{max-width:100%!important;min-width:0!important}

  /* Mobile hero: copy first, visual second, no overlap. */
  .hero{padding:18px 16px 0!important;margin:0 auto!important}
  .hero-anime{display:grid!important;grid-template-columns:1fr!important;width:100%!important;min-height:0!important;height:auto!important;border-radius:22px!important;overflow:hidden!important;align-items:stretch!important}
  .hero-copy{position:relative!important;z-index:3!important;padding:42px 22px 24px!important;margin:0!important;align-self:auto!important}
  .hero-visual{position:relative!important;inset:auto!important;width:100%!important;min-height:340px!important;height:340px!important;margin:0!important;z-index:2!important;overflow:hidden!important}
  .hero-product-image{position:absolute!important;width:92%!important;max-width:430px!important;height:auto!important;max-height:330px!important;right:1%!important;bottom:-2%!important;object-fit:contain!important;object-position:center bottom!important}
  .hero-product-glow{position:absolute!important;width:76%!important;right:9%!important;top:8%!important}
  .hero-orbit{position:absolute!important;width:78%!important;right:5%!important;top:4%!important}
  .hero-chip{font-size:.66rem!important;padding:8px 11px!important}
  .hero-chip-1{top:7%!important;right:4%!important}
  .hero-chip-2{bottom:7%!important;right:3%!important}

  /* Marquee stays in document flow and cannot cover the next section. */
  .marquee-wrap{position:relative!important;width:100%!important;max-width:100%!important;overflow:hidden!important;margin-top:24px!important;z-index:4!important}
  .marquee-track{position:relative!important;max-width:none!important;white-space:nowrap!important}

  /* Category heading/cards remain inside the phone viewport. */
  section#categories{padding:58px 16px!important}
  #categories .section-inner{width:100%!important;max-width:100%!important}
  #categories .section-head{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:16px!important;margin-bottom:28px!important;flex-wrap:wrap!important}
  #categories .section-head h2{font-size:clamp(1.8rem,8vw,2.5rem)!important;line-height:1.02!important}
  #categories .section-head .view-all{margin-left:auto!important}
  .cat-grid{width:100%!important;max-width:100%!important;min-width:0!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .cat-card{min-width:0!important;width:100%!important;overflow:hidden!important;padding:20px 16px!important;gap:24px!important}

  .products-grid,.product-grid,.cards-grid,.category-grid,.grid{width:100%!important;max-width:100%!important;min-width:0!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .product-card,.p-card{min-width:0!important;width:100%!important;overflow:hidden!important}
  .product-card img,.p-card img,.cat-card img{width:100%!important;max-width:100%!important;height:auto!important;object-fit:contain!important}
  .product-card h1,.product-card h2,.product-card h3,.product-card h4,.product-card p,.p-card h1,.p-card h2,.p-card h3,.p-card h4,.p-card p,.cat-card h3{overflow-wrap:anywhere!important;word-break:normal!important}

  #zelqivoCartPanel,#zelqivoWishlistPanel{width:100%!important;max-width:100%!important;overflow:hidden!important}
  #zelqivoCartPanel .z-drawer,#zelqivoWishlistPanel .z-drawer{width:min(92vw,430px)!important;max-width:92vw!important;margin-left:auto!important;overflow-y:auto!important;overflow-x:hidden!important}
  #zelqivoCartPanel .z-cart-item,#zelqivoWishlistPanel .z-cart-item{min-width:0!important;max-width:100%!important}
  #zelqivoCartPanel .z-cart-item img,#zelqivoWishlistPanel .z-cart-item img{max-width:72px!important;height:auto!important}

  .modal,.modal-content,.dialog,.popup,.dropdown-menu,.search-overlay,.search-modal,.quick-view-modal,.quick-view,.mobile-panel,.drawer,.panel{max-width:100vw!important}
  .modal-content,.quick-view-modal,.quick-view{width:min(94vw,520px)!important;margin-inline:auto!important}
  input,select,textarea,button{max-width:100%!important}
}
@media(max-width:380px){
  .products-grid,.product-grid,.cards-grid,.category-grid,.grid,.cat-grid{grid-template-columns:1fr!important}
  .header-inner,.header-container{padding-left:10px!important;padding-right:10px!important}
  .icon-btn,.hamburger{width:34px!important;height:34px!important;min-width:34px!important}
}
