.mobile-customer-menu[hidden]{display:none!important}.mobile-customer-menu{display:none}
@media(max-width:850px){
 body .topbar:not(.admin-topbar){height:76px;min-height:76px;padding:0 4%;gap:10px;flex-wrap:nowrap;align-items:center;overflow:visible}
 body .topbar:not(.admin-topbar) .brand{order:0;flex:0 1 195px;width:195px;min-width:0;margin:0}
 body .topbar:not(.admin-topbar) .brand img{width:100%;height:auto;max-height:54px;object-fit:contain;object-position:left center}
 body .topbar:not(.admin-topbar) .header-search,body .topbar:not(.admin-topbar) .main-nav{display:none!important}
 body .topbar:not(.admin-topbar) .account-tools{display:none!important}
 body .topbar:not(.admin-topbar) .account-tools .balance-chip{display:none}
 body .topbar:not(.admin-topbar) .menu-toggle{order:2;display:flex;align-items:center;justify-content:center;flex:0 0 42px;width:42px;height:42px;margin:0 0 0 auto;border:1px solid #343a37;border-radius:8px;color:#fff;background:#121613;font-size:25px;cursor:pointer}
 .mobile-customer-menu{display:flex;position:absolute;right:4%;top:calc(100% + 8px);width:min(280px,92vw);flex-direction:column;z-index:100;background:#111412;border:1px solid #343a37;border-radius:10px;padding:7px;box-shadow:0 16px 40px #0009}
 .mobile-customer-menu{max-height:calc(100dvh - 100px);overflow-y:auto}
 .mobile-customer-menu a{display:flex;align-items:center;gap:13px;padding:15px 17px;color:#eee;font-size:16px;line-height:1.3;text-decoration:none;border-radius:6px}
 .mobile-customer-menu a svg{width:22px;height:22px;flex:0 0 22px}
 .mobile-customer-menu .mobile-wallet{display:grid;gap:7px;margin:4px 4px 8px;background:#19271f;border:1px solid #304c3a}
 .mobile-wallet small{font-size:10px;letter-spacing:1px;color:#9db5a6}.mobile-wallet strong{font-size:20px;color:#8ad69e}
 .mobile-customer-menu a:hover,.mobile-customer-menu a:focus-visible,.mobile-customer-menu a[aria-current=page]{background:#203027;color:#8ad69e;outline:none}
}
@media(max-width:380px){body .topbar:not(.admin-topbar) .brand{flex-basis:155px;width:155px}body .topbar:not(.admin-topbar) .account-tools{gap:7px}}
/* Compact phone layout, keeping desktop rules unchanged. */
@media(max-width:850px){
 body.dashboard-page{font-size:13px}
 body .topbar:not(.admin-topbar){height:64px;min-height:64px;padding:0 4%;gap:8px}
 body .topbar:not(.admin-topbar) .brand{flex:0 1 170px;width:170px}
 body .topbar:not(.admin-topbar) .brand img{max-height:44px}
 body .topbar:not(.admin-topbar) .menu-toggle{width:36px;height:36px;flex-basis:36px;font-size:22px}
 .mobile-customer-menu{width:min(255px,92vw);padding:5px;top:calc(100% + 5px)}
 .mobile-customer-menu a{padding:11px 13px;font-size:14px;gap:11px}
 .mobile-customer-menu a svg{width:19px;height:19px;flex-basis:19px}
 .mobile-customer-menu .mobile-wallet{padding:12px 14px;gap:5px}.mobile-wallet strong{font-size:18px}
 .reference-dashboard .ticker-bar{height:40px;margin:10px 4%;padding:0 12px}.reference-dashboard .ticker-text{font-size:12px}
 .reference-dashboard .standalone-dashboard,.customer-dashboard,.dashboard{padding-left:4%;padding-right:4%}
 .reference-dashboard .dashboard-main-column{gap:11px}.reference-dashboard .dashboard-grid{gap:12px}
 .reference-dashboard .dashboard-greeting{min-height:0;padding:20px 18px}.reference-dashboard .dashboard-greeting h1{font-size:24px;line-height:1.25;margin:10px 0 12px}.reference-dashboard .dashboard-greeting p{font-size:13px;line-height:1.6;margin:0}
 .reference-hero-link{font-size:13px;margin-top:16px}.welcome-label{font-size:10px;letter-spacing:1px}
 .reference-dashboard .reference-support{min-height:0;padding:16px 18px;gap:12px}.reference-support>span{font-size:32px}.reference-support strong{font-size:14px}.reference-support p{font-size:12px;line-height:1.5}.reference-support>a{font-size:12px}
 .reference-dashboard .wallet-hero{padding:18px;gap:14px}.reference-dashboard .wallet-hero strong{font-size:28px}.reference-dashboard .wallet-caption{font-size:12px}
 .reference-wallet-actions{gap:8px}.reference-wallet-actions a{font-size:12px;padding:10px 12px}
 .reference-dashboard .dashboard-stats>a{padding:15px 18px}.reference-dashboard .dashboard-stats strong{font-size:26px}
 .reference-dashboard .dashboard-side .announcements,.reference-dashboard .recent-orders,.reference-dashboard .service-counts{padding:18px}
 .reference-dashboard .announcements h2,.reference-dashboard .panel-heading h2,.reference-dashboard .service-counts h2{font-size:18px;margin-bottom:16px}
 .reference-dashboard .announcement strong{font-size:13px}.reference-dashboard .announcement p{font-size:12px}.reference-dashboard .announcement a{font-size:12px;padding:7px 10px}.reference-dashboard .announcement{padding-bottom:15px;margin-bottom:14px}
 .reference-dashboard .standalone-welcome{height:auto;min-height:240px;padding:22px 18px}.reference-dashboard .standalone-welcome h2{font-size:28px}.reference-dashboard .standalone-welcome p{font-size:13px}.reference-dashboard .hero-mark{display:none}
 .history-page h1{font-size:26px}.history-page>p{font-size:13px;margin-bottom:15px}.history-filters{padding:12px;gap:10px}.history-filters label{font-size:11px}.history-filters input,.history-filters select,.history-filters button{padding:10px;font-size:12px}
 .history-table td{padding:10px 12px;font-size:12px}.history-table th{font-size:11px;padding:13px 12px}.history-table td strong{font-size:12px}.history-reply{font-size:12px}.history-badge{font-size:11px;padding:4px 7px}
 .order-detail-modal{width:92vw;max-height:82dvh;padding:0 16px 18px}.order-dialog-title{font-size:16px;margin:0 -16px 16px;padding:13px 16px}.order-detail-modal h3{font-size:16px;padding-bottom:15px;margin-bottom:16px}.order-dialog-columns{gap:16px}.order-dialog-columns h4{font-size:15px;margin-bottom:16px}.order-dialog-columns dl{font-size:12px;grid-template-columns:90px 1fr;gap:13px 8px}.order-detail-modal [data-live-answer] textarea{font-size:13px;min-height:90px}.order-detail-modal [data-reply-tools] button{width:30px;height:30px}
 .customer-overview h1{font-size:24px}.customer-wallet-main{padding:18px}.customer-wallet-main strong{font-size:28px}.customer-section-heading h2,.customer-order-overview h2{font-size:18px}
 .admin-section{padding:18px}.catalog-heading h2{font-size:20px}.product-grid{gap:10px}.product-card{padding:15px}.product-card h3{font-size:14px}
}
@media(max-width:420px){body .topbar:not(.admin-topbar) .brand{width:150px;flex-basis:150px}.reference-dashboard .dashboard-greeting h1{font-size:22px}.reference-support>span{display:none}}