@media (max-width: 1100px) {
.work-layout {
grid-template-columns: 210px 1fr;
}
.material-grid {
grid-template-columns: 1fr 1fr;
}
.kpis {
grid-template-columns: 1fr 1fr;
}
.today-grid {
grid-template-columns: 1fr;
}
.app-header {
padding: 0 1rem;
}
.header-links {
gap: 0.8rem;
}
.workspace {
padding: 1.5rem;
}
.hero-copy {
padding: 2rem;
}
.store-hero {
min-height: 330px;
}
.split {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.app-header {
height: auto;
min-height: 75px;
padding: 0.8rem 1rem;
flex-wrap: wrap;
gap: 0.6rem;
}
.brand strong {
font-size: 1.06rem;
}
.header-links {
font-size: 0.8rem;
gap: 0.65rem;
}
.header-links .desktop-only,
.desktop-only {
display: none;
}
.store-main {
padding: 1.2rem 1rem 3rem;
}
.store-hero {
grid-template-columns: 1fr;
}
.hero-copy {
padding: 1.7rem;
}
.hero-copy h1 {
font-size: 2.2rem;
}
.hero-image {
height: 240px;
min-height: 240px;
object-position: center;
}
.products {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.8rem;
}
.product-card figure {
height: 170px;
}
.product-card .product-info {
padding: 0.9rem;
}
.product-card h3 {
font-size: 1rem;
}
.art-banner {
grid-template-columns: auto 1fr;
padding: 1.2rem;
}
.art-banner .btn {
grid-column: 1/-1;
}
.work-layout {
display: block;
}
.sidebar {
display: none;
position: fixed;
z-index: 20;
top: 0;
bottom: 0;
width: 270px;
box-shadow: 10px 0 50px #57364b30;
overflow: auto;
}
.sidebar.open {
display: flex;
}
.mobile-menu {
display: inline-flex;
}
.workspace {
padding: 1.3rem 1rem 4rem;
}
.page-heading {
align-items: flex-start;
margin-bottom: 1.2rem;
}
.page-heading h1 {
font-size: 1.7rem;
}
.greeting {
padding: 1.2rem;
grid-template-columns: 1fr 85px;
}
.greeting h2 {
font-size: 1.6rem;
}
.greeting img {
width: 85px;
height: 85px;
}
.grid.three {
grid-template-columns: 1fr;
}
.material-grid {
grid-template-columns: 1fr 1fr;
}
.grid.two,
.form-grid {
grid-template-columns: 1fr;
}
.welcome-grid {
grid-template-columns: 1fr;
}
.sync {
max-width: 100%;
font-size: 0.75rem;
}
.kpi {
padding: 1rem;
}
.kpi strong {
font-size: 1.6rem;
}
.order-row {
grid-template-columns: auto 1fr;
}
.order-row > .btn {
grid-column: 2;
width: max-content;
}
.dialog-body {
padding: 1rem;
}
.dialog-head {
padding: 1rem;
}
.dialog-foot {
padding: 1rem;
}
.welcome {
padding: 2.5rem 1rem;
}
.welcome h1 {
font-size: 2.3rem;
}
.form-grid .wide {
grid-column: auto;
}
.benefits {
justify-content: flex-start;
font-size: 0.82rem;
}
.store-footer {
padding: 1rem 1.1rem 1.3rem;
justify-content: center;
text-align: center;
}
.footer-actions {
justify-content: center;
}
.card {
padding: 1.15rem;
}
}
@media (max-width: 420px) {
.products,
.material-grid {
grid-template-columns: 1fr;
}
.footer-actions {
gap: 0.45rem;
}
.footer-pill {
padding: 0.4rem 0.8rem;
font-size: 0.86rem;
}
.product-card figure {
height: 230px;
}
.kpis {
gap: 0.6rem;
}
.greeting {
grid-template-columns: 1fr;
}
.greeting img {
display: none;
}
.header-links {
width: 100%;
justify-content: flex-end;
}
}
@media (prefers-reduced-motion: reduce) {
* {
scroll-behavior: auto !important;
transition: none !important;
animation: none !important;
}
}
@media print {
.sidebar,
.app-header,
.demo-strip,
.toolbar,
button,
.no-print,
.toast-area {
display: none !important;
}
.work-layout,
.workspace {
display: block;
padding: 0;
}
.card {
box-shadow: none;
break-inside: avoid;
}
.print-only {
display: block;
}
body {
background: #fff;
color: #111;
}
.dialog {
position: static;
border: 0;
max-height: none;
}
.dialog::backdrop {
background: none;
}
}