/* ZUPIX MOBILE-021 — screenshot-driven mobile hardening.
   Loaded AFTER published Site Design rules so desktop edits cannot break phone geometry. */

@media (max-width:760px){
  :root{--z21-mobile-gutter:10px}

  /* Never allow fixed mobile UI to cover the last page content. */
  html body:has(.z20-mobile-nav){
    padding-bottom:calc(var(--z20-mobile-nav-h) + var(--z20-safe-bottom) + 18px)!important;
  }

  /* The admin design launcher was covering product cards, forms and the footer.
     Keep it available on phones, but make it an unobtrusive icon button. */
  html body .zid-launcher{
    left:12px!important;
    bottom:calc(var(--z20-mobile-nav-h) + var(--z20-safe-bottom) + 12px)!important;
    width:46px!important;
    min-width:46px!important;
    max-width:46px!important;
    height:46px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:15px!important;
    overflow:hidden!important;
    box-shadow:0 10px 24px rgba(69,67,196,.24)!important;
  }
  html body .zid-launcher>span{display:none!important}
  html body .zid-launcher>i{
    width:32px!important;
    height:32px!important;
    margin:0!important;
    border-radius:11px!important;
    font-size:16px!important;
  }

  /* Home service hub: protect phone typography from desktop design-editor values. */
  html body #marketHomeHero .z208-main{padding:22px 18px 18px!important}
  html body #marketHomeHero .z208-main h1{font-size:32px!important;line-height:1.06!important;letter-spacing:-.035em!important}
  html body #marketHomeHero .z208-intro{font-size:14px!important;line-height:1.5!important}
  html body #marketHomeHero .z208-primary{min-height:50px!important;font-size:15px!important}
  html body #marketHomeHero .z208-service{height:auto!important;min-height:158px!important;padding:16px!important;overflow:hidden!important}
  html body #marketHomeHero .z208-label{font-size:12px!important;line-height:1.25!important;gap:9px!important}
  html body #marketHomeHero .z208-copy h2{font-size:22px!important;line-height:1.14!important;letter-spacing:-.025em!important}
  html body #marketHomeHero .z208-copy p{font-size:13.5px!important;line-height:1.48!important}
  html body #marketHomeHero .z208-secondary{font-size:13.5px!important}
  html body #marketHomeHero .z208-games a{min-width:0!important;font-size:12.5px!important}

  /* Horizontal category rail: labels were colliding ("Все товарыИгры и ключи"). */
  html body .premium-home .market-icon-strip{
    width:100%!important;
    min-width:0!important;
    padding:8px!important;
    overflow:hidden!important;
  }
  html body .premium-home .market-icon-rail{
    width:100%!important;
    min-width:0!important;
    gap:8px!important;
    padding:0 2px!important;
  }
  html body .premium-home .market-icon-strip .market-icon-rail .market-rail-item{
    flex:0 0 72px!important;
    width:72px!important;
    min-width:72px!important;
    max-width:72px!important;
    height:92px!important;
    min-height:92px!important;
    gap:6px!important;
    overflow:hidden!important;
  }
  html body .premium-home .market-icon-strip .market-icon-rail .market-rail-icon{
    width:52px!important;
    height:52px!important;
    min-width:52px!important;
    flex-basis:52px!important;
    border-radius:15px!important;
  }
  html body .premium-home .market-icon-strip .market-icon-rail .market-rail-label{
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    width:70px!important;
    max-width:70px!important;
    min-height:26px!important;
    max-height:26px!important;
    margin:0 auto!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    text-align:center!important;
    font-size:10.5px!important;
    line-height:13px!important;
    font-weight:650!important;
  }

  /* Quick Steam RU top-up: the green NEW badge was clipped and white SVGs were
     invisible on white tiles. Keep the control compact and fully readable. */
  html body .zquick-topup{
    width:100%!important;
    min-width:0!important;
    margin:12px 0 16px!important;
    padding:10px!important;
    gap:9px!important;
    overflow:hidden!important;
  }
  html body .zquick-services{
    position:relative!important;
    min-width:0!important;
    padding:29px 8px 8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
  }
  html body .zquick-new{
    top:7px!important;
    left:10px!important;
    height:18px!important;
    padding:0 8px!important;
    font-size:8px!important;
    box-shadow:none!important;
  }
  html body .zquick-service-grid{gap:7px!important;padding:0!important}
  html body .zquick-service{
    width:49px!important;
    min-width:49px!important;
    flex:0 0 49px!important;
    height:48px!important;
  }
  html body .zquick-service-icon{
    width:36px!important;
    height:36px!important;
    border-radius:11px!important;
    overflow:hidden!important;
  }
  html body .zquick-service-icon img{width:100%!important;height:100%!important;object-fit:contain!important}
  html body .zquick-service--steam .zquick-service-icon{background:#111827!important;border-color:#111827!important;padding:6px!important}
  html body .zquick-service--telegram .zquick-service-icon{background:#28a8e9!important;border-color:#28a8e9!important;padding:5px!important}
  html body .zquick-service--roblox .zquick-service-icon{background:#fff!important;padding:4px!important}
  html body .zquick-service--playstation .zquick-service-icon{background:#fff!important;padding:4px!important}
  html body .zquick-service--apple .zquick-service-icon{background:#fff!important;padding:5px!important}
  html body .zquick-service--pubg .zquick-service-icon{background:#fff8e9!important;padding:2px!important}
  html body .zquick-copy{padding:5px 3px 2px!important}
  html body .zquick-kicker{flex-wrap:wrap!important;gap:6px!important;margin-bottom:7px!important}
  html body .zquick-kicker>span{font-size:9px!important;line-height:1.2!important}
  html body .zquick-copy h2{font-size:23px!important;line-height:1.12!important}
  html body .zquick-copy p{font-size:12px!important;line-height:1.5!important;margin:6px 0!important}
  html body .zquick-copy a{font-size:12px!important;line-height:1.35!important}
  html body .zquick-field{min-height:0!important;height:auto!important;padding:13px!important;border-radius:16px!important}
  html body .zquick-field>span{font-size:11px!important}
  html body .zquick-login input,html body .zquick-amount input{font-size:17px!important}
  html body .zquick-login>small{min-height:0!important;margin-top:3px!important;font-size:10px!important;white-space:normal!important}
  html body .zquick-login>i{top:50%!important;transform:translateY(-50%)!important}
  html body .zquick-amount-chips{gap:6px!important;margin-top:5px!important;flex-wrap:wrap!important}
  html body .zquick-amount-chips button{height:34px!important;min-width:58px!important;padding:0 11px!important;font-size:12px!important}
  html body .zquick-pay{min-height:92px!important;padding:14px 15px!important}
  html body .zquick-pay>small{font-size:11px!important}
  html body .zquick-pay>strong{font-size:25px!important}
  html body .zquick-cashback{justify-self:start!important;font-size:9px!important}

  /* Product cards: eliminate clipped chips/titles and footer collisions in the
     two-column phone grid. */
  html body .premium-home .market-products-showcase .market-product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  html body .premium-home .market-products-showcase .market-card{
    min-width:0!important;
    width:auto!important;
    overflow:hidden!important;
    border-radius:16px!important;
  }
  html body .premium-home .market-products-showcase .market-cover-wrap{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:1/1!important;
  }
  html body .premium-home .market-products-showcase .market-card-body{
    min-width:0!important;
    padding:9px 9px 10px!important;
  }
  html body .premium-home .market-products-showcase .market-card-topline,
  html body .premium-home .market-products-showcase .market-card-meta-chips{
    min-width:0!important;
    width:100%!important;
  }
  html body .premium-home .market-products-showcase .market-card-meta-chips{
    display:flex!important;
    align-items:flex-start!important;
    flex-wrap:wrap!important;
    gap:4px!important;
    min-height:43px!important;
    overflow:visible!important;
  }
  html body .premium-home .market-products-showcase .market-card-tag,
  html body .premium-home .market-products-showcase .market-card-delivery{
    max-width:100%!important;
    min-width:0!important;
    min-height:20px!important;
    padding:4px 7px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:9px!important;
    line-height:1!important;
  }
  html body .premium-home .market-products-showcase .market-card-body h3{
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    margin:5px 0 7px!important;
    padding:0!important;
    font-size:12px!important;
    line-height:19px!important;
    font-weight:650!important;
    -webkit-line-clamp:2!important;
    overflow:hidden!important;
  }
  html body .premium-home .market-products-showcase .market-price-line{
    width:100%!important;
    min-width:0!important;
    min-height:28px!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    gap:4px 6px!important;
    flex-wrap:wrap!important;
    justify-content:flex-start!important;
  }
  html body .premium-home .market-products-showcase .market-price-line strong{
    max-width:100%!important;
    font-size:17px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
  }
  html body .premium-home .market-products-showcase .market-price-line del{font-size:9.5px!important}
  html body .premium-home .market-products-showcase .market-price-discount{min-height:20px!important;padding:3px 6px!important;font-size:9px!important}
  html body .premium-home .market-products-showcase .market-card-footer{
    width:100%!important;
    min-width:0!important;
    min-height:34px!important;
    height:auto!important;
    max-height:none!important;
    margin-top:7px!important;
    padding-top:7px!important;
    gap:4px!important;
    overflow:hidden!important;
  }
  html body .premium-home .market-products-showcase .market-card-seller{min-width:0!important;overflow:hidden!important}
  html body .premium-home .market-products-showcase .market-seller-chip{min-width:0!important;gap:5px!important;overflow:hidden!important}
  html body .premium-home .market-products-showcase .market-seller-avatar{width:24px!important;height:24px!important;min-width:24px!important;flex:0 0 24px!important}
  html body .premium-home .market-products-showcase .market-seller-chip b{
    max-width:58px!important;
    font-size:9px!important;
    line-height:1.1!important;
  }
  html body .premium-home .market-products-showcase .market-card-rating{gap:2px!important;min-width:0!important}
  html body .premium-home .market-products-showcase .market-card-rating .market-rating-stars{display:none!important}
  html body .premium-home .market-products-showcase .market-card-rating .market-rating-value{
    font-size:10px!important;
    white-space:nowrap!important;
  }
  html body .premium-home .market-products-showcase .market-card-rating .market-rating-value::after{content:" ★";color:#f4a300}
  html body .premium-home .market-products-showcase .market-card-rating .market-review-count{display:none!important}

  /* Trust strip: old fixed 54px article height clipped the second line. */
  html body .premium-home>.market-trust-strip{
    grid-template-columns:1fr 1fr!important;
    width:100%!important;
    overflow:hidden!important;
    border-radius:18px!important;
  }
  html body .premium-home>.market-trust-strip article{
    height:auto!important;
    min-height:92px!important;
    max-height:none!important;
    padding:13px 10px!important;
    align-items:flex-start!important;
    gap:8px!important;
    overflow:visible!important;
  }
  html body .premium-home>.market-trust-strip article:nth-child(2){border-right:0!important}
  html body .premium-home>.market-trust-strip article:nth-child(-n+2){border-bottom:1px solid #edf0f5!important}
  html body .premium-home>.market-trust-strip i{width:31px!important;height:31px!important;min-width:31px!important;flex:0 0 31px!important}
  html body .premium-home>.market-trust-strip article>div{min-width:0!important;gap:3px!important}
  html body .premium-home>.market-trust-strip b{font-size:11px!important;line-height:1.28!important;white-space:normal!important}
  html body .premium-home>.market-trust-strip span{font-size:9.5px!important;line-height:1.36!important;white-space:normal!important;overflow-wrap:anywhere!important}

  /* Footer: remove the empty right stripe, shorten the phone layout and keep all
     legal/support text above the fixed navigation. */
  html body .zupix-site-footer{
    width:100%!important;
    margin-top:22px!important;
    padding:0 0 calc(var(--z20-mobile-nav-h) + var(--z20-safe-bottom) + 18px)!important;
    overflow:hidden!important;
  }
  html body .zupix-footer-shell{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:25px 18px 20px!important;
    border-left:0!important;
    border-right:0!important;
    box-sizing:border-box!important;
  }
  html body .zupix-footer-main{grid-template-columns:1fr!important;gap:22px!important;padding-top:0!important}
  html body .zupix-footer-brand p{max-width:none!important;font-size:12.5px!important;line-height:1.55!important}
  html body .zupix-footer-brand-note{font-size:10.5px!important;line-height:1.25!important}
  html body .zupix-footer-nav{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:20px 16px!important;
  }
  html body .zupix-footer-group:first-child{grid-column:auto!important}
  html body .zupix-footer-group:last-child{grid-column:1/-1!important}
  html body .zupix-footer-group-title{font-size:12px!important;margin-bottom:9px!important}
  html body .zupix-footer-group a{font-size:11.5px!important;line-height:1.4!important;margin:7px 0!important}
  html body .zupix-footer-bottom{
    margin-top:20px!important;
    padding:14px 0 0!important;
    gap:9px!important;
    font-size:10.5px!important;
    line-height:1.45!important;
  }
  html body .zupix-footer-bottom-left{white-space:normal!important;flex-wrap:wrap!important;gap:7px!important}
  html body .zupix-footer-bottom-note{width:100%!important;text-align:left!important;justify-content:flex-start!important;align-items:flex-start!important}
}

@media (max-width:390px){
  html body #marketHomeHero .z208-main h1{font-size:29px!important}
  html body #marketHomeHero .z208-service{min-height:150px!important;padding:14px!important}
  html body #marketHomeHero .z208-copy h2{font-size:20px!important}
  html body #marketHomeHero .z208-copy p{font-size:12.5px!important}
  html body .premium-home .market-icon-strip .market-icon-rail .market-rail-item{flex-basis:68px!important;width:68px!important;min-width:68px!important;max-width:68px!important}
  html body .premium-home .market-icon-strip .market-icon-rail .market-rail-label{width:66px!important;max-width:66px!important;font-size:10px!important}
  html body .premium-home .market-products-showcase .market-product-grid{gap:7px!important}
  html body .premium-home .market-products-showcase .market-card-body{padding:8px!important}
  html body .premium-home .market-products-showcase .market-card-tag,
  html body .premium-home .market-products-showcase .market-card-delivery{font-size:8.5px!important;padding:4px 6px!important}
  html body .premium-home .market-products-showcase .market-card-body h3{font-size:11px!important;line-height:17px!important;height:36px!important;min-height:36px!important;max-height:36px!important}
  html body .premium-home .market-products-showcase .market-price-line strong{font-size:15.5px!important}
  html body .premium-home>.market-trust-strip article{min-height:94px!important;padding:12px 8px!important}
  html body .premium-home>.market-trust-strip b{font-size:10.5px!important}
  html body .premium-home>.market-trust-strip span{font-size:9px!important}
  html body .zupix-footer-shell{padding-left:16px!important;padding-right:16px!important}
}