/* v15 — mobile adaptation pass 3: robust shell, iPhone widths, tablet and modal polish */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (max-width:900px){
  html,body{width:100%;max-width:100%;overflow-x:hidden!important}
  html body.store-body{overscroll-behavior-x:none!important}
  html body.store-body #app,
  html body.store-body #app>.store-layout,
  html body.store-body #app>.store-layout>.main{width:100%!important;max-width:100%!important;min-width:0!important}

  /* Never let the desktop rail enter the mobile document flow. */
  html body.store-body #app>.store-layout>aside.sidebar,
  html body.store-body #app>.store-layout>aside.sidebar.is-compact{display:none!important;position:fixed!important;inset:0 auto 0 0!important;margin:0!important}
  html body.store-body #app>.store-layout>aside.sidebar.mobile-open-v13,
  html body.store-body #app>.store-layout>aside.sidebar.is-compact.mobile-open-v13{display:flex!important}
  html body.store-body.mobile-nav-open-v14{overflow:hidden!important;touch-action:none!important}
  html body.store-body.mobile-nav-open-v14 #app>.store-layout>.main{pointer-events:none!important}
  html body.store-body.mobile-nav-open-v14 #app>.store-layout>aside.sidebar{pointer-events:auto!important}

  /* Mobile header — consistent 2 rows and no overflow. */
  html body.store-body .topbar.topbar-v849{grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-auto-rows:auto!important;align-items:center!important;gap:8px!important}
  html body.store-body .topbar.topbar-v849>*{min-width:0!important}
  html body.store-body .topbar.topbar-v849 .topbar-search-v849{grid-column:1/-1!important;grid-row:1!important;overflow:hidden!important}
  html body.store-body .topbar.topbar-v849 .topbar-search-v849 .quick-trigger-placeholder-v175{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  html body.store-body .topbar.topbar-v849 .lang-switch,
  html body.store-body .topbar.topbar-v849 .notifications-shell-v283,
  html body.store-body .topbar.topbar-v849 .cart-shell-v11,
  html body.store-body .topbar.topbar-v849 .profile-menu-shell-v285,
  html body.store-body .topbar.topbar-v849 .guest-login-v931,
  html body.store-body .topbar.topbar-v849 .mobile-nav-toggle-v13{grid-row:2!important;min-width:0!important;width:100%!important}
  html body.store-body .topbar.topbar-v849 .top-btn,
  html body.store-body .topbar.topbar-v849 .login-top,
  html body.store-body .topbar.topbar-v849 .mobile-nav-toggle-v13{overflow:visible!important}
  html body.store-body .topbar.topbar-v849 .cart-shell-v11,
  html body.store-body .topbar.topbar-v849 .notifications-shell-v283,
  html body.store-body .topbar.topbar-v849 .profile-menu-shell-v285{position:relative!important}
  html body.store-body .topbar-action-badge-v11,
  html body.store-body .cart-count-v9,
  html body.store-body .notifications-count-v283{top:-5px!important;right:-5px!important;transform:none!important}

  /* Popovers become safe sheets and never leave the viewport. */
  html body.store-body .topbar-popover-v9,
  html body.store-body .topbar-popover-v11,
  html body.store-body .lang-menu-v12,
  html body.store-body .notifications-panel-v283,
  html body.store-body .profile-menu-v285{position:fixed!important;left:10px!important;right:10px!important;top:calc(116px + env(safe-area-inset-top))!important;width:auto!important;max-width:none!important;max-height:calc(100dvh - 136px - env(safe-area-inset-bottom))!important;margin:0!important;overflow:auto!important;border-radius:24px!important}
  html body.store-body .lang-menu-v12 .lang-menu-list-v9{gap:8px!important}
  html body.store-body .lang-menu-v12 .lang-menu-list-v9>button{min-height:66px!important;padding:10px 12px!important}
  html body.store-body .profile-menu-v285 .profile-menu-list-v9>button{min-height:62px!important}

  /* Hero text must remain horizontal in every localization. */
  html body.store-body .promo-slider,
  html body.store-body .promo-slider *{min-width:0!important}
  html body.store-body .promo-slider h1,
  html body.store-body .promo-slider h1 *,
  html body.store-body .promo-slider .hero-mixed-title-v841,
  html body.store-body .promo-slider .hero-mixed-title-v841 *{writing-mode:horizontal-tb!important;text-orientation:mixed!important;word-break:normal!important;overflow-wrap:anywhere!important;white-space:normal!important}
  html body.store-body .promo-slider .promo-banner.compact-promo{contain:layout paint!important}
  html body.store-body .promo-slider .promo-copy,
  html body.store-body .promo-slider .tg-copy-v389{padding:24px 18px 58px!important}

  /* Home/catalog card consistency. */
  html body.store-body .app-grid,
  html body.store-body .app-grid.home-main-grid,
  html body.store-body .catalog-grid.app-list-grid,
  html body.store-body .home-row .app-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;min-width:0!important;gap:14px!important}
  html body.store-body .app-grid>* ,
  html body.store-body .catalog-grid>*{width:100%!important;min-width:0!important;max-width:none!important}
  html body.store-body .material-card-v844{display:flex!important;flex-direction:column!important}
  html body.store-body .material-card-v844__hero-copy,
  html body.store-body .material-card-v844__title,
  html body.store-body .material-card-v844__description{min-width:0!important;max-width:100%!important}
  html body.store-body .material-card-v844__title{overflow-wrap:anywhere!important}
  html body.store-body .material-card-v844__foot{margin-top:auto!important}
  html body.store-body .section-head,
  html body.store-body .section-head.compact{display:flex!important;flex-wrap:nowrap!important}
  html body.store-body .section-head a{margin-left:auto!important}

  /* Catalog filter and selects. */
  html body.store-body .catalog-filter{overflow:visible!important}
  html body.store-body .catalog-filter .custom-select{position:relative!important}
  html body.store-body .catalog-filter .custom-select-menu{max-height:min(48dvh,360px)!important;overflow:auto!important}

  /* Inner pages and generic panels. */
  html body.store-body .main>section,
  html body.store-body .main>article,
  html body.store-body .main>.page,
  html body.store-body .main>[class*='-page-']{max-width:100%!important;min-width:0!important}
  html body.store-body table{max-width:100%!important}
  html body.store-body .table-wrap,
  html body.store-body [class*='table-wrap'],
  html body.store-body [class*='table-scroll']{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  html body.store-body input,
  html body.store-body textarea,
  html body.store-body select{font-size:16px!important}

  /* Modal and sheet safety on phones. */
  html body.store-body .native-quick-modal-v175,
  html body.store-body .front-admin-modal-v856,
  html body.store-body .front-admin-modal-v857,
  html body.store-body .bug-report-modal-v850,
  html body.store-body .screenshot-modal-card{left:10px!important;right:10px!important;top:auto!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;width:auto!important;max-width:none!important;max-height:min(88dvh,760px)!important;margin:0!important;border-radius:24px!important;overflow:auto!important}
  html body.store-body .front-admin-modal-v856,
  html body.store-body .front-admin-modal-v857{padding:14px!important}

  /* Footer should end with content, not a tall empty viewport. */
  html body.store-body .site-footer,
  html body.store-body .compact-footer{min-height:0!important;height:auto!important;overflow:visible!important}
  html body.store-body .footer-line,
  html body.store-body .footer-links{min-height:0!important;height:auto!important}
}

@media (max-width:430px){
  html body.store-body .main{padding-left:9px!important;padding-right:9px!important}
  html body.store-body .topbar.topbar-v849{gap:6px!important}
  html body.store-body .topbar.topbar-v849 .top-btn,
  html body.store-body .topbar.topbar-v849 .login-top,
  html body.store-body .topbar.topbar-v849 .mobile-nav-toggle-v13{height:44px!important;min-height:44px!important;border-radius:14px!important}
  html body.store-body .topbar.topbar-v849 .top-btn .i,
  html body.store-body .topbar.topbar-v849 .login-top .i,
  html body.store-body .topbar.topbar-v849 .mobile-nav-toggle-v13 .i{font-size:19px!important}
  html body.store-body .rate-strip-v846{padding:12px!important;border-radius:18px!important}
  html body.store-body .promo-slider .promo-copy,
  html body.store-body .promo-slider .tg-copy-v389{padding:22px 16px 54px!important}
  html body.store-body .promo-slider .promo-copy h1,
  html body.store-body .promo-slider .hero-mixed-title-v841{font-size:clamp(29px,9.5vw,38px)!important}
  html body.store-body .material-card-v844__hero{grid-template-columns:76px minmax(0,1fr)!important;gap:12px!important}
  html body.store-body .material-card-v844__icon-wrap,
  html body.store-body .material-card-v844__icon{width:76px!important;height:76px!important;min-width:76px!important}
  html body.store-body .material-card-v844__title{font-size:21px!important}
  html body.store-body .material-card-v844__description{font-size:14px!important;-webkit-line-clamp:3!important}
  html body.store-body .section-title-with-icon h2,
  html body.store-body .section-head h2{font-size:27px!important}
  html body.store-body .billing-page-v4 .billing-summary-v1{grid-template-columns:1fr!important}
  html body.store-body .billing-page-v4 .billing-tabs-v1{margin-left:-2px!important;margin-right:-2px!important}
  html body.store-body .order-pay-card-v257,
  html body.store-body .order-pay-card-v258,
  html body.store-body .order-pay-side-v257,
  html body.store-body .order-pay-side-v258,
  html body.store-body .checkout-form-v251,
  html body.store-body .checkout-summary-v251{padding:15px!important;border-radius:20px!important}
}

@media (max-width:360px){
  html body.store-body .topbar.topbar-v849{grid-template-columns:repeat(5,minmax(42px,1fr))!important}
  html body.store-body .topbar.topbar-v849 .topbar-search-v849{height:46px!important;min-height:46px!important;padding:0 11px!important}
  html body.store-body .topbar.topbar-v849 .topbar-search-v849 kbd{display:none!important}
  html body.store-body .rate-live-v846{display:grid!important;grid-template-columns:1fr!important;gap:3px!important}
  html body.store-body .rate-live-v846 small{text-align:left!important}
  html body.store-body .material-card-v844{padding:14px!important}
  html body.store-body .material-card-v844__hero{grid-template-columns:68px minmax(0,1fr)!important}
  html body.store-body .material-card-v844__icon-wrap,
  html body.store-body .material-card-v844__icon{width:68px!important;height:68px!important;min-width:68px!important}
  html body.store-body .material-card-v844__title{font-size:19px!important}
  html body.store-body .material-card-v844__tags button{height:31px!important;padding:0 10px!important;font-size:12px!important}
}

/* Tablet: keep the desktop rail compact and avoid squeezed content. */
@media (min-width:901px) and (max-width:1180px){
  html body.store-body.storefront-rail-v429,
  html body.store-body.storefront-rail-v430{--rail-col-v429:92px!important;--rail-width-v429:68px!important;--rail-left-v429:12px!important;--rail-col-v430:92px!important;--rail-width-v430:68px!important;--rail-left-v430:12px!important}
  html body.store-body #app>.store-layout:not(.auth-layout){column-gap:10px!important;padding-right:14px!important}
  html body.store-body #app>.store-layout:not(.auth-layout)>main.main{padding-top:14px!important}
  html body.store-body .topbar.topbar-v849{gap:8px!important}
  html body.store-body .topbar.topbar-v849 .topbar-search-v849{min-width:260px!important}
  html body.store-body .app-grid.home-main-grid,
  html body.store-body .catalog-grid.app-list-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body.store-body .material-card-v844{min-width:0!important}
}

@media (max-width:900px) and (orientation:landscape){
  html body.store-body .topbar-popover-v9,
  html body.store-body .topbar-popover-v11,
  html body.store-body .lang-menu-v12,
  html body.store-body .notifications-panel-v283,
  html body.store-body .profile-menu-v285{top:10px!important;bottom:10px!important;max-height:none!important}
  html body.store-body #app>.store-layout>aside.sidebar.mobile-open-v13{width:min(310px,46vw)!important}
  html body.store-body .promo-slider .promo-copy,
  html body.store-body .promo-slider .tg-copy-v389{padding-bottom:28px!important}
}
