/* Промо-полоса, верхняя строка, шапка, поиск, категории */
.promo{background:var(--ink);color:#fff;text-align:center;font-size:12px;font-weight:500;letter-spacing:.04em;padding:9px 16px}
.top{font-size:12px;color:var(--mute)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;height:36px}
.top .city{display:flex;align-items:center;gap:4px;padding:0;border:0;background:none;color:var(--text);font:inherit;font-weight:500;cursor:pointer}
.top .city .i{width:16px;height:16px}
.top .links{display:flex;gap:24px}
.top a{transition:color .15s}
.top a:hover{color:var(--ink)}
header{position:sticky;top:0;background:rgba(255,255,255,.96);-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);z-index:20;border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:40px;height:72px}
.logo{flex:none;font-size:28px;font-weight:800;letter-spacing:-.05em;color:var(--ink)}
.logo i{font-style:normal;font-weight:300}
.search{flex:1;min-width:0;display:flex;align-items:center;gap:10px;height:44px;padding:0 6px 0 14px;border:1px solid var(--field);border-radius:0;transition:border-color .2s}
.search:focus-within{border-color:var(--ink)}
.search .i{width:20px;height:20px;color:var(--mute)}
.search input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none}
.search input::placeholder{color:var(--mute)}
.search button{flex:none;height:32px;padding:0 18px;border:0;border-radius:0;background:var(--ink);color:#fff;font-size:13px;font-weight:500}
.ico{display:flex;gap:28px;font-size:12px}
.ico a{display:flex;flex-direction:column;align-items:center;gap:3px;transition:opacity .15s}
.ico a:hover{opacity:.6}
.cats .wrap{display:flex;gap:30px;height:48px;align-items:center;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.cats .wrap::-webkit-scrollbar{display:none}
.cats a{position:relative;padding:14px 0;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink)}
.cats a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:currentColor;transform:scaleX(0);transition:transform .2s}
.cats a:hover::after,.cats a.on::after{transform:scaleX(1)}
.cats a.hot{color:var(--sale)}
.top .city .chev{width:14px;height:14px;transition:transform .15s}
.top .city[aria-expanded="true"] .chev{transform:rotate(180deg)}
.city-pick{position:relative;z-index:30}
.city-menu{position:absolute;left:-12px;top:calc(100% + 2px);min-width:250px;background:#fff;border:1px solid var(--ink);box-shadow:0 16px 40px rgba(0,0,0,.14)}
.city-menu button{display:block;width:100%;padding:10px 16px;border:0;background:none;text-align:left;font:inherit;font-size:14px;color:var(--text);cursor:pointer}
.city-menu button:hover,.city-menu button:focus-visible{background:var(--soft);outline:none}
.city-menu button.on{font-weight:700;color:var(--ink);background:var(--soft)}
.city-menu button.on::after{content:"✓";float:right}
.cm-search{padding:8px;border-bottom:1px solid var(--line)}
.cm-search input{width:100%;height:38px;padding:0 10px;border:1px solid var(--field);background:#fff;color:var(--text);font:inherit;font-size:14px;outline:none}
.cm-search input:focus{border-color:var(--ink)}
.cm-list{max-height:min(280px,50vh);overflow-y:auto;padding:4px 0}
.cm-none{padding:16px;text-align:center;font-size:13px;color:var(--mute)}
/* выбор города в фильтре: выглядит как поле формы */
.cp-filter{display:block}
.cp-filter .cp-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:42px;padding:0 12px;border:1px solid var(--field);background:#fff;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s}
.cp-filter .cp-btn:hover,.cp-filter .cp-btn[aria-expanded="true"]{border-color:var(--ink)}
.cp-filter .cp-btn .chev{width:16px;height:16px;color:var(--mute);transition:transform .15s}
.cp-filter .cp-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.cp-filter .city-menu{left:0;right:0;min-width:0}