/* The same content and data are used in both layouts. */
html[data-layout=desktop] body{min-width:1200px;max-width:none;margin:0}
html[data-layout=desktop] header{display:flex;flex-wrap:nowrap;gap:35px;padding:28px 5%}
html[data-layout=desktop] header input{order:0;flex:1;flex-basis:auto;min-width:180px}
html[data-layout=desktop] .headerContacts{order:0;flex-direction:column;flex-basis:auto;align-items:flex-start;gap:5px}
html[data-layout=desktop] .logo{font-size:32px}
html[data-layout=desktop] .hero{grid-template-columns:1.1fr 1fr}
html[data-layout=desktop] .hero>div:first-child{padding:48px}
html[data-layout=desktop] .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
html[data-layout=desktop] .card{padding:18px}
html[data-layout=desktop] .picture{height:190px}
html[data-layout=desktop] .name{font-size:14px;min-height:64px}
html[data-layout=desktop] .toolbar{flex-direction:row}
html[data-layout=desktop] .business{grid-template-columns:1fr 1fr}
html[data-layout=desktop] .legalLayout{grid-template-columns:235px 1fr}
html[data-layout=desktop] .legalLayout nav{position:sticky;flex-direction:column}
html[data-layout=mobile] body{width:100%;max-width:480px;margin:0 auto;overflow-x:clip;box-shadow:0 0 30px #263a2110}
html[data-layout=mobile] header{padding:18px 16px;gap:12px;flex-wrap:wrap}
html[data-layout=mobile] .logo{font-size:27px}
html[data-layout=mobile] header input{order:3;flex:1 1 100%;min-width:0;width:100%;min-height:44px}
html[data-layout=mobile] #cartOpen{margin-left:auto;padding:12px 14px;min-height:44px}
html[data-layout=mobile] .headerContacts{order:4;flex:1 1 100%;display:flex;flex-direction:row;gap:6px 12px;flex-wrap:wrap;align-items:center;font-size:11px}
html[data-layout=mobile] .headerContacts>a:first-child{font-size:13px}
html[data-layout=mobile] .headerContacts>a:last-child{font-size:11px}
html[data-layout=mobile] .top{padding:9px 16px;font-size:10px;gap:10px}
html[data-layout=mobile] .clientNav{padding:10px 16px;flex-wrap:nowrap;overflow-x:auto;gap:7px;scrollbar-width:thin}
html[data-layout=mobile] .clientNav button{flex:none;padding:11px 13px;min-height:42px;font-size:12px;white-space:nowrap}
html[data-layout=mobile] .clientNav #accountOpen{margin-left:0}
html[data-layout=mobile] .launchNotice{padding:12px 16px;font-size:11px}
html[data-layout=mobile] main{padding:22px 16px;max-width:480px}
html[data-layout=mobile] .hero{grid-template-columns:1fr;min-height:0}
html[data-layout=mobile] .hero>div:first-child{padding:26px 22px}
html[data-layout=mobile] .hero h1{font-size:35px;letter-spacing:-1.4px;line-height:1.12}
html[data-layout=mobile] .hero.hasRecommendation h1{font-size:26px;letter-spacing:-.7px}
html[data-layout=mobile] .hero p{font-size:13px;line-height:1.6}
html[data-layout=mobile] .heroVisual{min-height:220px}
html[data-layout=mobile] .heroVisual .bannerPhoto img{height:200px}
html[data-layout=mobile] .bannerBrand{font-size:44px}
html[data-layout=mobile] .bannerPrice{font-size:23px}
html[data-layout=mobile] .bannerControls{margin-top:18px;gap:7px}
html[data-layout=mobile] .visualLabel{font-size:8px;bottom:15px;left:20px}
html[data-layout=mobile] .benefits{gap:12px;font-size:11px;padding:20px 0 26px}
html[data-layout=mobile] .benefits b{display:block;margin-bottom:6px}
html[data-layout=mobile] .sectionHead{margin-top:30px}
html[data-layout=mobile] .sectionHead h2{font-size:27px}
html[data-layout=mobile] .sectionHead .eyebrow{font-size:9px;line-height:1.7}
html[data-layout=mobile] .toolbar{flex-direction:column;gap:12px}
html[data-layout=mobile] .toolbar #filters{flex:none;flex-wrap:nowrap;overflow-x:auto;padding:3px 0 8px;max-width:100%}
html[data-layout=mobile] #filters button{flex:none;white-space:nowrap;font-size:12px;padding:11px 16px;min-height:43px}
html[data-layout=mobile] .popularFilter{font-size:12px;min-height:40px}
html[data-layout=mobile] #sort{width:100%;min-height:44px}
html[data-layout=mobile] .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
html[data-layout=mobile] .card{padding:11px;min-width:0}
html[data-layout=mobile] .picture{height:140px;padding:3px}
html[data-layout=mobile] .name{font-size:12px;min-height:76px;overflow-wrap:anywhere}
html[data-layout=mobile] .sku{font-size:9px}
html[data-layout=mobile] .price{font-size:18px;overflow-wrap:anywhere}
html[data-layout=mobile] .qty button{width:30px;min-height:44px}
html[data-layout=mobile] .qty input{min-height:44px;font-size:15px}
html[data-layout=mobile] .add{font-size:12px;min-height:44px;padding:11px 8px}
html[data-layout=mobile] .lineTotal{font-size:10px;line-height:1.5}
html[data-layout=mobile] .picture .cartBadge{font-size:15px;padding:10px}
html[data-layout=mobile] .business{grid-template-columns:1fr;gap:0;padding:24px;margin-top:30px}
html[data-layout=mobile] .business h2{font-size:27px}
html[data-layout=mobile] footer{padding:24px 16px;gap:16px}
html[data-layout=mobile] .footerContacts{align-items:flex-start;gap:10px;flex-direction:column}
html[data-layout=mobile] .legalFooter{font-size:11px;gap:8px 14px}
html[data-layout=mobile] .viewSwitcher{flex-direction:column;align-items:flex-start;gap:12px}
html[data-layout=mobile] .viewSwitcher [role=group]{width:100%}
html[data-layout=mobile] .viewSwitcher button{flex:1}
html[data-layout=mobile] .contactWidget{right:max(16px,calc((100vw - 480px)/2 + 16px));bottom:18px}
html[data-layout=mobile] .maxLauncher{font-size:15px;padding:12px 17px}
html[data-layout=mobile] .maxPanel{width:min(330px,calc(100vw - 32px))}
html[data-layout=mobile] .storageNotice{left:max(12px,calc((100vw - 480px)/2 + 12px));right:auto;width:min(448px,calc(100vw - 24px));max-width:none;z-index:10}
html[data-layout=mobile] dialog{max-width:448px;width:calc(100vw - 24px);padding:22px}
html[data-layout=mobile] .cartRow{grid-template-columns:32px minmax(0,1fr) 70px 24px;gap:8px;font-size:12px}
html[data-layout=mobile] .cartRow img{width:32px;height:40px}
html[data-layout=mobile] .cartRow input{width:70px;min-height:42px}
html[data-layout=mobile] .orderCard{padding:16px}
html[data-layout=mobile] .orderTop{flex-direction:column;gap:12px}
html[data-layout=mobile] .orderTable table{font-size:12px}
html[data-layout=mobile] .ordersPager{gap:8px;font-size:11px}
html[data-layout=mobile] .ordersPager button{padding:10px}
html[data-layout=mobile] .legalLayout{grid-template-columns:1fr;gap:20px}
html[data-layout=mobile] .legalLayout nav{position:static;flex-direction:row;flex-wrap:wrap;gap:4px}
html[data-layout=mobile] .legalLayout nav a{font-size:11px;background:#eef2e6;padding:7px}
html[data-layout=mobile] .legalText{padding:20px}
html[data-layout=mobile] .legalText h1{font-size:27px}
footer{padding-bottom:110px}
html[data-layout=mobile] footer{padding-bottom:105px}
html[data-layout=mobile] input:not([type=checkbox]),html[data-layout=mobile] select,html[data-layout=mobile] textarea{font-size:16px}
html[data-layout=mobile] .qty input{font-size:16px}
html[data-layout=mobile] .qty button{width:40px}

[hidden]{display:none!important}
.categoryPicker{flex:1;min-width:0}#filters{display:flex;flex-wrap:wrap;gap:8px;max-height:90px;overflow:hidden;align-content:flex-start}#filters.expanded{max-height:none;overflow:visible}#filters button{min-height:40px;flex:0 0 auto;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#categoriesToggle{margin-top:8px;padding:10px 14px;border:1px solid #cbd5c1;border-radius:20px;background:#eef3e7;color:#35502e;font-weight:bold}html[data-layout=mobile] .categoryPicker{width:100%}html[data-layout=mobile] .toolbar #filters{flex-wrap:wrap;overflow:hidden;padding:0;max-height:94px}html[data-layout=mobile] .toolbar #filters.expanded{max-height:none;overflow:visible}html[data-layout=mobile] #filters button{min-height:43px}