/* Mobile v30 — one real mobile scroller, compact auth/order pages and cart sheet. */
@media (max-width: 900px) {
  :root {
    --mobile-v30-gutter: 14px;
    --mobile-v30-dock-h: 70px;
    --mobile-v30-dock-gap: 8px;
    --mobile-v30-bottom-clearance: calc(var(--mobile-v30-dock-h) + var(--mobile-v30-dock-gap) + env(safe-area-inset-bottom) + 12px);
    --mobile-v30-vh: 100dvh;
  }

  html {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
  }

  html body.store-body {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-x: none !important;
    overscroll-behavior-y: none !important;
    -webkit-overflow-scrolling: touch !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
    background-attachment: scroll !important;
    scroll-behavior: auto !important;
  }

  html body.store-body #app,
  html body.store-body #app > .store-layout,
  html body.store-body #app > .store-layout:not(.auth-layout),
  html body.store-body #app > .store-layout.auth-layout,
  html body.store-body #app > .store-layout > main.main {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
  }

  html body.store-body #app {
    min-height: 100% !important;
  }

  html body.store-body #app > .store-layout:not(.auth-layout) {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100% !important;
    padding: 0 !important;
  }

  html body.store-body #app > .store-layout:not(.auth-layout) > main.main,
  html body.store-body #app > .store-layout.sidebar-collapsed:not(.auth-layout) > main.main,
  html body.store-body #app > .store-layout.mobile-layout-v23:not(.auth-layout) > main.main,
  html body.store-body #app > .store-layout.mobile-layout-v24:not(.auth-layout) > main.main {
    display: flex !important;
    flex: 1 0 auto !important;
    flex-direction: column !important;
    min-height: 100% !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    padding-bottom: var(--mobile-v30-bottom-clearance) !important;
  }

  html body.store-body #app::before,
  html body.store-body #app::after,
  html body.store-body #app > .store-layout::before,
  html body.store-body #app > .store-layout::after,
  html body.store-body main.main::before,
  html body.store-body main.main::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.store-body footer.site-footer,
  html body.store-body .site-footer.compact-footer {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin-top: 26px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Bottom dock is always attached to the visual viewport, never to page flow. */
  html body.store-body > .mobile-bottom-nav-v18,
  html body.store-body > .mobile-bottom-nav-v23,
  html body.store-body > .mobile-bottom-nav-v27 {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: max(var(--mobile-v30-dock-gap), env(safe-area-inset-bottom)) !important;
    z-index: 2147482000 !important;
    width: min(calc(100vw - (var(--mobile-v30-gutter) * 2)), 732px) !important;
    min-height: var(--mobile-v30-dock-h) !important;
    height: auto !important;
    margin: 0 !important;
    transform: translate3d(-50%, 0, 0) !important;
    contain: layout paint style !important;
    isolation: isolate !important;
  }

  html.cart-open body.store-body > .mobile-bottom-nav-v18,
  html.cart-open body.store-body > .mobile-bottom-nav-v23,
  html.cart-open body.store-body > .mobile-bottom-nav-v27,
  html body.store-body.cart-open > .mobile-bottom-nav-v18,
  html body.store-body.cart-open > .mobile-bottom-nav-v23,
  html body.store-body.cart-open > .mobile-bottom-nav-v27 {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(-50%, 120%, 0) !important;
  }

  /* Order desk: single-column mobile form with sane typography. */
  html body.store-body .desk-page-v176,
  html body.store-body .desk-page-v177,
  html body.store-body .desk-page-v178,
  html body.store-body .desk-page-v179 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html body.store-body .desk-hero-v176,
  html body.store-body .desk-hero-v177,
  html body.store-body .desk-hero-v178,
  html body.store-body .desk-hero-v179 {
    display: block !important;
    min-height: 0 !important;
    margin: 8px 0 16px !important;
    padding: 24px 20px !important;
    border-radius: 26px !important;
  }

  html body.store-body .desk-hero-v176 h1,
  html body.store-body .desk-hero-v177 h1,
  html body.store-body .desk-hero-v178 h1,
  html body.store-body .desk-hero-v179 h1 {
    margin: 18px 0 12px !important;
    font-size: clamp(38px, 11vw, 52px) !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;
  }

  html body.store-body .desk-hero-v176 p,
  html body.store-body .desk-hero-v177 p,
  html body.store-body .desk-hero-v178 p,
  html body.store-body .desk-hero-v179 p {
    max-width: none !important;
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1.5 !important;
  }

  html body.store-body .desk-steps-v176,
  html body.store-body .desk-steps-v177,
  html body.store-body .desk-steps-v178,
  html body.store-body .desk-steps-v179 {
    display: none !important;
  }

  html body.store-body .desk-layout-v176,
  html body.store-body .desk-layout-v177,
  html body.store-body .desk-layout-v178,
  html body.store-body .desk-layout-v179 {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html body.store-body .desk-form-v176,
  html body.store-body .desk-form-v177,
  html body.store-body .desk-form-v178,
  html body.store-body .desk-form-v179 {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 22px 18px !important;
    border-radius: 26px !important;
  }

  html body.store-body .desk-form-title-v177,
  html body.store-body .desk-form-title-v179 {
    margin-bottom: 20px !important;
  }

  html body.store-body .desk-form-title-v177 h2,
  html body.store-body .desk-form-title-v179 h2 {
    font-size: 32px !important;
    line-height: 1.05 !important;
  }

  html body.store-body .desk-form-grid-v176,
  html body.store-body .desk-form-grid-v177,
  html body.store-body .desk-form-grid-v179 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  html body.store-body .desk-field-v176 input,
  html body.store-body .desk-field-v177 input,
  html body.store-body .desk-custom-input-v176,
  html body.store-body .desk-custom-input-v177,
  html body.store-body .desk-custom-input-v178 {
    width: 100% !important;
    min-width: 0 !important;
    height: 54px !important;
    padding: 0 16px !important;
    border-radius: 17px !important;
    font-size: 16px !important;
  }

  html body.store-body .desk-description-v176 textarea,
  html body.store-body .desk-description-v177 textarea,
  html body.store-body .desk-description-v179 textarea {
    min-height: 150px !important;
    padding: 15px 16px !important;
    border-radius: 18px !important;
    font-size: 16px !important;
  }

  html body.store-body .desk-chip-grid-v176,
  html body.store-body .desk-chip-grid-v177,
  html body.store-body .desk-chip-grid-v178,
  html body.store-body .desk-chip-grid-v179,
  html body.store-body .desk-budget-row-v176,
  html body.store-body .desk-budget-row-v177,
  html body.store-body .desk-budget-row-v178,
  html body.store-body .desk-budget-row-v179 {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 9px !important;
    width: 100% !important;
    padding-bottom: 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  html body.store-body .desk-chip-grid-v176::-webkit-scrollbar,
  html body.store-body .desk-budget-row-v176::-webkit-scrollbar { display: none !important; }

  html body.store-body .desk-chip-grid-v176 > *,
  html body.store-body .desk-budget-row-v176 > * {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  html body.store-body .desk-actions-v176,
  html body.store-body .desk-actions-v177,
  html body.store-body .desk-actions-v179 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Auth routes: one natural page, no nested 100dvh shells or inner card scrollbar. */
  html body.store-body #app > .store-layout.auth-layout,
  html body.store-body #app > .store-layout.auth-layout-v930,
  html body.store-body #app > .store-layout.auth-layout > main.main,
  html body.store-body #app > .store-layout.auth-layout-v930 > main.main {
    display: block !important;
    min-height: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body.store-body .auth-v928 {
    display: block !important;
    width: 100% !important;
    min-height: 100% !important;
    height: auto !important;
    max-height: none !important;
    padding: 14px 14px 28px !important;
    overflow: visible !important;
  }

  html body.store-body .auth-v928-topbar {
    width: 100% !important;
    min-height: 52px !important;
    height: auto !important;
    margin: 0 auto 12px !important;
  }

  html body.store-body .auth-v928-brand img {
    width: 148px !important;
    max-width: 58vw !important;
  }

  html body.store-body .auth-v928-back {
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    border-radius: 16px !important;
  }

  html body.store-body .auth-v928-shell {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }

  html body.store-body .auth-v928-story { display: none !important; }

  html body.store-body .auth-v928-card {
    width: 100% !important;
    max-width: 520px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 22px 18px !important;
    border-radius: 26px !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
  }

  html body.store-body .auth-v928-card-head h2 {
    font-size: clamp(30px, 9vw, 40px) !important;
    line-height: 1 !important;
  }

  html body.store-body .auth-v928-telegram {
    min-height: 58px !important;
    border-radius: 18px !important;
  }

  html body.store-body .auth-v928-field {
    margin-bottom: 13px !important;
  }

  html body.store-body .auth-v928-field > div {
    min-height: 54px !important;
    height: 54px !important;
    border-radius: 17px !important;
  }

  html body.store-body .auth-v928-field input {
    height: 52px !important;
    font-size: 16px !important;
  }

  html body.store-body .auth-v928-primary {
    height: 56px !important;
    border-radius: 18px !important;
    font-size: 16px !important;
  }

  /* Cart is a real mobile bottom sheet teleported to BODY. */
  html body.store-body > .drawer-mask {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    display: block !important;
    width: 100vw !important;
    height: var(--mobile-v30-vh) !important;
    margin: 0 !important;
    background: rgba(24, 39, 59, .36) !important;
    backdrop-filter: blur(12px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
  }

  html body.store-body > .cart-drawer {
    position: fixed !important;
    left: var(--mobile-v30-gutter) !important;
    right: var(--mobile-v30-gutter) !important;
    top: auto !important;
    bottom: max(var(--mobile-v30-gutter), env(safe-area-inset-bottom)) !important;
    z-index: 2147483001 !important;
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 600px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: calc(var(--mobile-v30-vh) - (var(--mobile-v30-gutter) * 2)) !important;
    margin: 0 auto !important;
    padding: 16px !important;
    gap: 14px !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    transform: none !important;
    contain: layout paint style !important;
    box-shadow: 0 28px 90px rgba(35, 57, 86, .28), inset 0 1px 0 rgba(255,255,255,.96) !important;
  }

  html body.store-body > .cart-drawer .drawer-head {
    flex: 0 0 auto !important;
    padding: 0 !important;
  }

  html body.store-body > .cart-drawer .cart-drawer-head h2 {
    font-size: 31px !important;
    line-height: 1 !important;
  }

  html body.store-body > .cart-drawer .drawer-close {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 16px !important;
  }

  html body.store-body > .cart-drawer .cart-empty-state {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 24px 18px !important;
    border-radius: 24px !important;
    align-items: center !important;
    text-align: center !important;
  }

  html body.store-body > .cart-drawer .cart-empty-icon {
    width: 72px !important;
    height: 72px !important;
    border-radius: 22px !important;
  }

  html body.store-body > .cart-drawer .cart-empty-state h3 {
    font-size: 28px !important;
  }

  html body.store-body > .cart-drawer .cart-empty-state p {
    max-width: 330px !important;
    font-size: 15px !important;
  }

  html body.store-body > .cart-drawer .cart-empty-state .primary.wide {
    width: 100% !important;
    max-width: 360px !important;
    height: 54px !important;
    margin-top: 6px !important;
    border-radius: 18px !important;
  }

  html body.store-body > .cart-drawer .cart-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: min(46dvh, 430px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body.store-body > .cart-drawer .cart-summary-card,
  html body.store-body > .cart-drawer .cart-bottom {
    flex: 0 0 auto !important;
  }

  html body.store-body > .cart-drawer .cart-bottom {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }
}

@media (max-width: 430px) {
  :root {
    --mobile-v30-gutter: 10px;
    --mobile-v30-dock-h: 68px;
    --mobile-v30-dock-gap: 6px;
  }

  html body.store-body #app > .store-layout:not(.auth-layout) > main.main,
  html body.store-body #app > .store-layout.sidebar-collapsed:not(.auth-layout) > main.main {
    padding-bottom: var(--mobile-v30-bottom-clearance) !important;
  }

  html body.store-body .desk-hero-v176,
  html body.store-body .desk-hero-v177,
  html body.store-body .desk-hero-v178,
  html body.store-body .desk-hero-v179 {
    padding: 21px 18px !important;
  }

  html body.store-body .desk-form-v176,
  html body.store-body .desk-form-v177,
  html body.store-body .desk-form-v178,
  html body.store-body .desk-form-v179 {
    padding: 20px 16px !important;
  }

  html body.store-body .auth-v928 {
    padding: 12px 10px 22px !important;
  }

  html body.store-body .auth-v928-card {
    padding: 20px 16px !important;
    border-radius: 24px !important;
  }

  html body.store-body > .cart-drawer {
    left: 8px !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    padding: 14px !important;
    border-radius: 26px !important;
  }
}

@media (min-width: 901px) {
  html body.store-body.mobile-scroll-root-v30 { overflow-y: auto !important; }
}