.view-switch{display:flex;align-items:center;gap:3px;align-self:center;padding:3px;border:1px solid var(--line);border-radius:10px}
.view-switch button{border:0;border-radius:7px;background:transparent;color:var(--muted);padding:7px 9px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.view-switch button:hover{color:var(--red)}
.view-switch button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
html[data-view="auto"] .view-switch [data-view-mode="auto"],
html[data-view="mobile"] .view-switch [data-view-mode="mobile"],
html[data-view="desktop"] .view-switch [data-view-mode="desktop"]{background:var(--red);color:#fff}
@media(max-width:1050px){footer{flex-wrap:wrap;gap:18px}}

/* Ручной мобильный вид использует ту же компоновку на широком экране. */
html[data-view="mobile"]{background:var(--soft)}
html[data-view="mobile"] body{width:min(390px,100%);margin-inline:auto;background:var(--bg);box-shadow:var(--shadow)}
html[data-view="mobile"] .page-shell{width:calc(100% - 24px)}
html[data-view="mobile"] .site-header{height:68px;padding-inline:10px}
html[data-view="mobile"] .site-header nav,html[data-view="mobile"] .brand small{display:none}
html[data-view="mobile"] .brand{gap:7px}
html[data-view="mobile"] .brand-mark{width:34px;height:34px;border-radius:10px}
html[data-view="mobile"] .brand b{font-size:14px}
html[data-view="mobile"] .header-actions{gap:5px}
html[data-view="mobile"] .icon-button,html[data-view="mobile"] .cart-button,html[data-view="mobile"] .account-button{width:38px;height:38px;padding:0;justify-content:center}
html[data-view="mobile"] .cart-button,html[data-view="mobile"] .account-button{font-size:0}
html[data-view="mobile"] .cart-button span{font-size:13px;margin:0}
html[data-view="mobile"] .account-button:after{content:"◎";font-size:20px}
html[data-view="mobile"] .hero{grid-template-columns:1fr;padding-block:42px;gap:25px}
html[data-view="mobile"] .hero h1{font-size:37px}
html[data-view="mobile"] .hero-copy>p{font-size:16px}
html[data-view="mobile"] .hero-visual{height:340px}
html[data-view="mobile"] .hero-facts{gap:15px;flex-wrap:wrap}
html[data-view="mobile"] .category-grid,html[data-view="mobile"] .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
html[data-view="mobile"] .product-card{padding:9px}
html[data-view="mobile"] .product-image{height:155px}
html[data-view="mobile"] .product-title{font-size:13px}
html[data-view="mobile"] .product-bottom strong{font-size:17px}
html[data-view="mobile"] .delivery-section{margin-block:35px;padding:28px;grid-template-columns:1fr;gap:20px}
html[data-view="mobile"] .section{padding-block:35px}
html[data-view="mobile"] .section-heading{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:7px;margin-bottom:22px}
html[data-view="mobile"] .section-heading>a{justify-self:start;line-height:1.35}
html[data-view="mobile"] .catalog-page{padding-block:35px}
html[data-view="mobile"] .catalog-heading{align-items:start}
html[data-view="mobile"] .catalog-heading h1{font-size:36px}
html[data-view="mobile"] .catalog-heading>b{display:none}
html[data-view="mobile"] .catalog-toolbar>.primary-button{padding-inline:17px;font-size:0}
html[data-view="mobile"] .catalog-toolbar>.primary-button:after{content:"⌕";font-size:21px}
html[data-view="mobile"] .catalog-controls{display:grid;grid-template-columns:1fr}
html[data-view="mobile"] .catalog-controls label{display:grid;gap:5px}
html[data-view="mobile"] .catalog-select{width:100%;min-width:0}
html[data-view="mobile"] .product-layout{grid-template-columns:1fr}
html[data-view="mobile"] .product-gallery,html[data-view="mobile"] .product-info,html[data-view="mobile"] .buy-panel,html[data-view="mobile"] .product-description{grid-column:auto;grid-row:auto}
html[data-view="mobile"] .gallery{min-height:330px}
html[data-view="mobile"] .gallery img{height:330px}
html[data-view="mobile"] .buy-panel{position:static}
html[data-view="mobile"] .product-info h1{font-size:29px}
html[data-view="mobile"] .cart-page{padding-block:35px}
html[data-view="mobile"] .cart-page>h1{font-size:37px}
html[data-view="mobile"] .checkout-layout{grid-template-columns:1fr}
html[data-view="mobile"] .checkout-panel{position:static}
html[data-view="mobile"] .cart-line{grid-template-columns:62px 1fr 30px}
html[data-view="mobile"] .cart-line>.line-quantity,html[data-view="mobile"] .cart-line>strong{grid-column:2}
html[data-view="mobile"] .cart-line>.remove{grid-column:3;grid-row:1}
html[data-view="mobile"] .account-page{padding-block:35px 65px}
html[data-view="mobile"] .account-heading h1{font-size:37px}
html[data-view="mobile"] .account-profile{grid-template-columns:auto 1fr}
html[data-view="mobile"] .profile-stat{border-left:0;border-top:1px solid var(--line);padding:14px 0 0}
html[data-view="mobile"] .account-order summary{grid-template-columns:1fr 1fr;position:relative}
html[data-view="mobile"] .account-order summary span:nth-child(3),html[data-view="mobile"] .account-order summary span:nth-child(4){padding-top:8px;border-top:1px solid var(--line)}
html[data-view="mobile"] .account-order summary i{position:absolute;right:18px;top:18px}
html[data-view="mobile"] .success-actions{flex-direction:column}
html[data-view="mobile"] footer{flex-direction:column;gap:20px;padding:30px 20px}
html[data-view="mobile"] .view-switch{align-self:flex-start}