/* Phone finishing layer. Palette and materials come from dracares-theme.css. */
@media screen and (max-width:768px){
body[data-mobile-public]{
 --dash-rail-width:4px;--dash-rail-height:3px;
 --dash-raised:inset 0 1px var(--color-highlight),inset 0 -1px var(--color-shadow),0 3px 7px var(--color-shadow);
 --dash-control:inset 0 1px var(--color-highlight),0 2px 3px var(--color-shadow);
 -webkit-tap-highlight-color:transparent;
}
[data-theme=light] body[data-mobile-public]{--dash-rail-width:6px;--dash-rail-height:5px}
body[data-mobile-public] :is(input,select,textarea){font-size:16px;font-family:var(--font);max-width:100%}
body[data-mobile-public] :is(input,textarea)::placeholder{color:var(--text-muted);opacity:1}
body[data-mobile-public] :is(button,a,input,select,textarea):focus-visible{outline:2px solid var(--color-text-link);outline-offset:3px}
body[data-mobile-public] :is(button,.btn,.tab){touch-action:manipulation}
body[data-mobile-public] :is(input[type=checkbox],input[type=radio],input[type=range]){accent-color:var(--color-accent-bronze)}
body[data-mobile-public] select{min-height:48px;background:var(--color-input-bg);color:var(--text);border:1px solid var(--color-control-border);border-radius:var(--radius-sm);box-shadow:var(--shadow-inset)}
body[data-mobile-public] option{background:var(--surface);color:var(--text)}
body[data-mobile-public] .header-inner{height:auto;min-height:68px;gap:8px;padding:8px 12px;flex-wrap:wrap}
body[data-mobile-public] .header-actions{gap:4px;min-width:0}
body[data-mobile-public] .logo{min-width:0;gap:8px}
body[data-mobile-public] .logo-name{font-size:18px;overflow-wrap:anywhere}
body[data-mobile-public] .theme-toggle{min-width:48px;min-height:44px;margin:0}
body[data-mobile-public] .section-title{font-size:20px!important}
body[data-mobile-public] :is(.design-products,.design-categories,.cats-grid,.related-grid){padding:10px;gap:10px}
body[data-mobile-public] :is(.product-modal,.auth-modal,.cart-drawer,.user-panel){max-width:100%;max-height:var(--public-height,100dvh);overscroll-behavior:contain}
body[data-mobile-public] :is(.cart-footer,.cart-drawer-footer,.modal-footer){padding-bottom:max(16px,env(safe-area-inset-bottom))}
body[data-mobile-public] :is(.tabs,.filter-tabs){max-width:100%;overflow-x:auto;flex-wrap:nowrap;gap:6px}
body[data-mobile-public] :is(.tabs,.filter-tabs)>*{flex-shrink:0;min-height:44px}
body[data-mobile-public=checkout] .checkout-layout{grid-template-columns:minmax(0,1fr);gap:24px}
body[data-mobile-public=checkout] #leftCol{padding-inline-start:0;padding-top:16px}
body[data-mobile-public=checkout] #leftCol::before{inset:0 0 auto;width:auto;height:var(--dash-rail-height)}
body[data-mobile-public=checkout] .card-body{padding:16px}
body[data-mobile-public=checkout] .form-grid{grid-template-columns:minmax(0,1fr)}
body[data-mobile-public=checkout] .header-steps{order:3;flex-basis:100%;justify-content:center}
body[data-mobile-public=checkout] .step{font-size:14px}
body[data-mobile-public=checkout] .step-line{width:18px}
body[data-mobile-public=checkout] .success-screen{margin:20px 12px;padding:24px 16px}
body[data-mobile-public=product] .product-wrap{grid-template-columns:minmax(0,1fr);gap:24px}
body[data-mobile-public=product] .product-info{padding-inline-start:0;padding-top:20px}
body[data-mobile-public=product] .product-info::before{inset:0 0 auto;width:auto;height:var(--dash-rail-height)}
body[data-mobile-public=product] .product-name{font-size:24px}
body[data-mobile-public=product] .buy-row{flex-wrap:wrap;gap:10px}
body[data-mobile-public=loyalty] .balance-card{padding:24px 16px}
body[data-mobile-public=tracking] .header{padding:10px 12px;gap:8px;flex-wrap:wrap}
body[data-mobile-public=tracking] .header .theme-toggle{margin-inline-start:auto}
body[data-mobile-public=blog] .blog-controls{bottom:max(12px,env(safe-area-inset-bottom));right:12px;gap:8px;padding:4px 8px;max-width:calc(100% - 24px)}
body[data-mobile-public=brain] .brain-theme{left:8px}
body[data-mobile-public=brain] .auth-box{width:calc(100% - 24px);padding:28px 20px}
body[data-mobile-public=brain] .env-header{padding:8px 12px 8px 66px;min-height:68px;gap:8px}
body[data-mobile-public=brain] .h-brand{font-size:16px}
body[data-mobile-public=brain] .h-title{font-size:14px}
body[data-mobile-public=brain] .h-status{font-size:12px;min-width:52px}
body[data-mobile-public=brain] .h-sep{display:none}
body[data-mobile-public=brain] .svc-label{opacity:1;font-size:11px;padding:2px 4px;bottom:calc(100% + 3px)}
body[data-mobile-public=brain] #detailPanel{width:min(100%,420px)}
body[data-mobile-public=brain] :is(.panel-head,.panel-section){padding-inline:16px}
body[data-mobile-public=brain] :is(.info-row-val,.tool-item-name){font-size:14px}
body[data-mobile-public=solar] .solar-theme{top:10px;left:12px}
body[data-mobile-public=solar] header{padding:14px 12px 14px 72px;gap:12px}
body[data-mobile-public=solar] .bottom-grid{grid-template-columns:minmax(0,1fr);padding:10px;gap:16px}
body[data-mobile-public=solar] .stats-row{padding:18px 10px 10px;gap:10px}
body[data-mobile-public=solar] :is(.ctrl-card,.section-card,.flower-card){padding:16px}
body[data-mobile-public=solar] :is(.stat-label,.stat-sub,.header-time){font-size:14px}
body[data-mobile-public=solar] .login-box{max-width:calc(100% - 24px);padding:28px 20px}
body[data-mobile-public=login]{padding:70px 14px 24px}
body[data-mobile-public=login] .login-wrap{width:100%;padding:0}
body[data-mobile-public=login] .card{padding:24px 20px}
body[data-mobile-public=login] .login-theme{top:12px;left:12px}
body[data-mobile-public=builder] .builder{height:auto;min-height:0;display:flex;flex-direction:column;overflow:visible}
body[data-mobile-public=builder] :is(.panel,.toolbar){padding:14px;min-width:0}
body[data-mobile-public=builder] .panel::after{inset:auto 0 0;height:var(--dash-rail-height);width:auto}
body[data-mobile-public=builder] .top{padding:10px 12px}
body[data-mobile-public=builder] .top-actions{flex-basis:100%;gap:8px}
body[data-mobile-public=builder] .top-actions button{font-size:14px;min-height:44px}
body[data-mobile-public=builder] .toolbar{align-items:stretch;gap:10px}
body[data-mobile-public=builder] .segmented{width:100%}
body[data-mobile-public=builder] .segmented button{flex:1;min-height:44px;font-size:14px}
body[data-mobile-public=builder] .canvas-scroll{padding:12px}
body[data-mobile-public=builder] .tile .resize{width:28px;height:28px}
body[data-mobile-public=builder] .preview-head{height:auto;min-height:56px;gap:8px}
body[data-mobile-public=builder] dialog{width:100%;height:100dvh;max-height:100dvh;max-width:100%;margin:0}
}
@media screen and (max-width:359px){
body[data-mobile-public] .header-actions{flex-wrap:wrap}
body[data-mobile-public] .logo-name{font-size:16px}
body[data-mobile-public] .product-price{font-size:18px}
body[data-mobile-public=solar] .weather-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){body[data-mobile-public] *,body[data-mobile-public] *::before,body[data-mobile-public] *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}