/* Shared phone layout: keep the desktop components and actions, with one spacing scale. */
@media (max-width:650px){
 .main-shell{--mobile-section-gap:20px;--mobile-inner-gap:16px}
 .main-shell>.topbar{padding:12px 16px;gap:8px;height:76px}
 .topbar .logo{flex-shrink:0}.topbar .logo img{width:72px;height:40px}
 .topbar .top-actions{gap:6px;min-width:0}.topbar .top-account{display:grid;place-items:center;min-width:44px;min-height:44px}
 .topbar .top-account .avatar{width:34px;height:34px}.topbar .iconbtn{min-height:44px}
 .topbar .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
 .main-shell>#main{padding:16px 16px calc(104px + env(safe-area-inset-bottom));width:100%;min-width:0}
 #main>.mobile-account-menu{margin-bottom:20px}
 #main>.page-head{margin:16px 0 24px;min-width:0}
 #main>.page-head>div{min-width:0;width:100%}
 #main>.workspace-toolbar{margin-bottom:var(--mobile-section-gap)}
 #main>:is(.card,.grid,.stack,.gap-top,.wellbeing-layout,.family-bottom-grid,.services-grid,.shop-cards,.set-details,.subscription-cards)+:is(.card,.grid,.stack,.gap-top,.wellbeing-layout,.family-bottom-grid,.services-grid,.shop-cards,.set-details,.subscription-cards){margin-top:var(--mobile-section-gap)}
 #main :is(.grid,.today-grid,.today-top,.family-bottom-grid,.services-grid,.wellbeing-layout,.wellbeing-prompts){gap:var(--mobile-section-gap)}
 #main :is(.gap-top,.shop-cart,.set-details){margin-top:var(--mobile-section-gap)}
 #main .grid>.card,#main .stack>.card,#main .services-grid>.card,#main .family-bottom-grid>.card{margin-top:0}
 #main .card{padding:20px;border-radius:20px}
 #main .card>:is(h2,h3,p,.row)+form.stack{margin-top:var(--mobile-section-gap)}
 #main .card>h2+p:not(.gap-top){margin-top:12px}
 #main .action-list{margin-top:var(--mobile-section-gap);gap:10px}
 #main .field :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea){font-size:16px;min-width:0}
 #main .field :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select){min-height:48px}
 #main .btn{min-height:44px;white-space:normal;overflow-wrap:break-word;display:inline-flex;align-items:center;justify-content:center}
 #main .family-person>.family-health-summary{grid-column:1/-1;width:100%;margin:12px 0 0}
 #main .family-health-values{gap:10px;margin:16px 0}.family-health-values strong{font-size:16px}
 #main .family-person>.btn:last-child{margin-top:12px}
 #main .family-health-title .icon{flex-shrink:0}
 #main .today-pregnancy-actions{margin-top:0;gap:10px}
 #main .today-family-card{margin:0}
 #main .set-product{padding:0;border-radius:18px}
 #main .set-product-body{padding:18px}
 #main .set-products{gap:var(--mobile-inner-gap)}
 #main .set-extras{margin-top:24px;padding-top:24px}
 #main .set-details-footer{margin-top:24px;padding-top:20px}
 #main .set-details-footer>.btn{width:100%}
 #main .product-quantity>.btn{min-width:44px;min-height:44px}
 #main .cart-back{margin-bottom:0}
 #main .shop-cart-bar{margin-top:0;gap:12px}
 #main .shop-cart-link{white-space:nowrap;gap:8px}
 #main .doctor-fields{gap:var(--mobile-inner-gap)}
 #main .pregnancy-doctor-profile{gap:var(--mobile-inner-gap)}
 #main .pregnancy-doctor{margin-top:var(--mobile-section-gap)}
 #main .doctor-editor{margin-top:var(--mobile-inner-gap)}
 #main .preview-footer{margin-top:28px;gap:10px;line-height:1.6}
 .bottomnav>a{min-height:44px;min-width:44px}
 .main-shell input,.main-shell select,.main-shell textarea{scroll-margin-bottom:100px}
}
@media (max-width:360px){
 .topbar .btn{padding:8px 10px;font-size:11px}
 #main .shop-cart-summary strong{font-size:14px}
 #main .shop-cart-link{padding:10px;font-size:12px;gap:6px}
 #main .family-health-values strong{font-size:15px}
 #main .pregnancy-journey{padding:18px}
 #main .pregnancy-journey-head h2{font-size:25px}
 #main .pregnancy-month-cards.workspace-months{gap:8px}
 #main .pregnancy-month-cards.workspace-months>button{min-width:0;padding:8px 4px}
}
@media (max-width:650px){
 #main .date-trigger{min-height:48px}
 #main .stack:has(>.card){gap:var(--mobile-section-gap)}
 #main .crop-window{max-width:100%}
 #main .crop-stage{min-width:0}
}
@media (max-width:650px){
 #main .onboarding-choices,#main .onboarding-content-card,#main .journey-inline-editor{min-width:0;width:100%}
 #main .journey-month-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
 #main .journey-month-choices>button{width:100%;min-width:0;min-height:76px;height:auto;border-radius:16px;padding:10px;display:flex;flex-direction:column;justify-content:center;gap:6px}
 #main .journey-baby-options{flex-wrap:wrap;gap:10px}
 #main .journey-inline-actions{gap:10px}
}
@media (max-width:650px){
 #main .journey-month-choices>button{max-width:none;aspect-ratio:auto}
 #main .journey-month-choices .month-art{display:block;width:28px;height:26px;flex:none}
}
@media (max-width:650px){
 #main .journey-text-button,#main .family-idea-next,#main .profile-back{min-height:44px;display:inline-flex;align-items:center}
 .auth-real{padding-left:16px;padding-right:16px;gap:24px}
 .auth-real .field :is(input,select,textarea){font-size:16px}
 .auth-real .field :is(input,select){min-height:48px}
 .auth-real .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}
@media (max-width:650px){
 #main .subscription-checkout,#main .subscription-cards{gap:var(--mobile-section-gap)}
 #main .care-grid,#main .real-gallery{gap:var(--mobile-inner-gap)}
}