/* Акцентный цвет в Figma — #449B9E, эталон даёт #439d94 (другой оттенок,
   заметно только в синем канале). Один токен, используется везде через
   var(--accent) — переопределяем в одном месте; хардкод того же старого
   hex ниже (`.slider-dots i.active:before`) и в `catalog-card.css`
   (`.catalog-card-dot.is-active`) — не через переменную — тоже поправлен. */
:root{--accent:#449b9e}
.catalog-card>a,.related-track article>a,.review-track article>a,.product-card>a,.mini-products article>a{display:block;height:100%}
.search-card-media img{object-fit:contain}
.catalog-card[hidden],.catalog-group[hidden],.search-card[hidden],.review-card[hidden],.series-panel[hidden]{display:none!important}
.catalog-empty,.search-empty{grid-column:1/-1;text-align:center;opacity:.65}
.catalog-filters,.search-filters{position:relative}

/* Фильтры — мультиселект со снимаемыми чипами по макету Figma `661:7656`
   Multiselection with tags. Триггер и выбранная строка меню — акцент, а не
   светлая подложка эталона; чипы — тёмные, с ✕ (ассет `catalog/icons/clear.svg`). */
.catalog-filters button[data-filter],.search-filters button[data-filter],
.sort-button,.search-sort{border-radius:8px;font-size:12px;font-weight:600}
.catalog-filters button[data-filter].is-active,
.search-filters button[data-filter].is-active{background:var(--accent);color:#fff}
.filter-menu{position:absolute;z-index:30;top:48px;left:0;min-width:220px;padding:4px;display:grid;gap:2px;border-radius:8px;background:rgba(255,255,255,.1);backdrop-filter:blur(10px);box-shadow:0 16px 40px rgba(0,0,0,.45)}
.filter-menu[hidden]{display:none!important}
.catalog-filters button.filter-option,.search-filters button.filter-option{width:100%;height:40px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:4px;text-align:left;background:transparent;font-size:12px;font-weight:500;letter-spacing:.02em;text-transform:uppercase}
.catalog-filters button.filter-option:hover,.search-filters button.filter-option:hover{background:rgba(255,255,255,.1)}
.filter-option .ui-close{opacity:0}
.catalog-filters button.filter-option.is-active,.search-filters button.filter-option.is-active{background:var(--accent);color:#fff}
.filter-option.is-active .ui-close{opacity:1}
.filter-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.filter-chips[hidden]{display:none}
.filter-chip{display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 14px;border-radius:8px;background:#171a1d;color:#fff;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.filter-chip:hover{opacity:.8}
/* overflow-x:auto здесь нужен для горизонтальной прокрутки стрелками
   («Хиты продаж»); по спеке CSS Overflow элемент с overflow-x, отличным
   от visible, и overflow-y:visible ПРИНУДИТЕЛЬНО получает вычисленный
   overflow-y:auto — то есть по вертикали контейнер тоже становится
   скролл-контейнером и обрезает ховер-раскрытие карточки (2026-09-22,
   см. `.mini-card-specs`/`.product-card` в catalog-card.css), даже когда
   `.products-section{overflow:visible}`. В отличие от `.mini-products`
   (там прокрутки на десктопе нет вовсе), тут просто отменить overflow-x
   нельзя — резервируем снизу высоту раскрытой панели характеристик
   (максимум 4 строки, ~136px), чтобы контент никогда фактически не
   вылезал за client-height и скролл-обрезка не срабатывала. */
.product-carousel{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 60px)/4);overflow-x:auto;scrollbar-width:none;padding-bottom:160px;margin-bottom:-160px}
/* Клиент, 2026-09-26: карточки «Хиты продаж» на широком десктопе кажутся
   шире, чем в «Линейках серии» — так и есть. В Figma у «Хиты продаж» 5
   карточек в ряд только на 1920px (`4322:8206`, 352px карточка), а на
   1440/768 — 4 (`4206:14530`/`4238:11883`, как у нас уже было). У
   «Линеек серии» карточка делит ряд с текстовым блоком линейки и везде
   остаётся 4 в ряд (`4322:8219` на 1920 — тоже 4, 359px, почти тот же
   размер, что у «Хитов» на 1920 при 5 в ряд). Тот же порог 1600px, что
   уже даёт 5 колонок каталогу (`catalog-card.css`). */
@media(min-width:1600px){.product-carousel{grid-auto-columns:calc((100% - 80px)/5)}}
.related-track,.review-track{grid-template-columns:none;grid-auto-flow:column;overflow-x:auto;scrollbar-width:none}.related-track{grid-auto-columns:calc((100% - 60px)/4)}.review-track{grid-auto-columns:calc((100% - 40px)/3)}
/* Эталонный селектор `.related-track article>div{height:285px}` не совпадает
   с Django-разметкой: `<a>`, оборачивающая карточку (нужна для ссылки), встала
   между `article` и `div`, поэтому высота картинки никогда не задавалась и
   `<img>` растягивал блок по своим пропорциям, вытесняя `<small>` за пределы
   `overflow:hidden` карточки — название товара пропадало целиком. Даём той же
   картинке отдельный класс вместо child-комбинатора. */
.related-track .related-media{height:285px;position:relative}
@media(min-width:1600px){.related-track .related-media{height:390px}}
@media(max-width:1023px){.related-track .related-media{height:210px}}
@media(max-width:479px){.related-track .related-media{height:185px}}
.product-thumbs{overflow-x:auto;scrollbar-width:none}
.product-thumbs button{flex:0 0 auto}
.summary-specs [data-spec-panel][hidden]{display:none}
.slider-heading button:disabled,.desktop-arrows button:disabled,.slider-arrow:disabled{opacity:.3;cursor:default}
/* Promo slider: four exact Figma variants — 1920 `4322:8192`, 1440
   `4564:12990`, 768 `4564:13018`, 360 `4564:13046`. The track clips the
   carousel at its own edges; only the centered active slide is clickable. */
.promo-track{position:relative;overflow:hidden}
.promo-track .promo-slide{display:block;position:absolute;top:0;height:100%;border-radius:8px;overflow:hidden;opacity:0;pointer-events:none;transition:left .4s ease,opacity .4s ease}
.promo-slide.active{opacity:1;z-index:2;pointer-events:auto}
.promo-slide.peek{opacity:.5;z-index:1;pointer-events:none}
.slider-arrow-shell{position:absolute;z-index:3;top:50%;width:52px;height:52px;transform:translateY(-50%);border-radius:8px;background:var(--bg);display:grid;place-items:center}
.slider-arrow-shell.prev-shell{left:32px}
.slider-arrow-shell.next-shell{right:32px}
.promo .slider-arrow{position:relative;z-index:1;top:auto;width:auto;height:auto;padding:11px;gap:8px;transform:none;background:radial-gradient(50% 100% at 50% 0%,rgba(255,255,255,.02) 0%,rgba(255,255,255,0) 100%),#171a1d;border-radius:4px;display:flex;align-items:center;justify-content:center}
.promo .slider-arrow.prev{left:auto}
.promo .slider-arrow.next{right:auto}
.slider-arrow .ui-arrow{position:relative;z-index:1;width:14px;height:14px}
.slider-dots i{transition:none;background:rgba(255,255,255,.2)}
.slider-dots i.active{position:relative;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.2)}
.slider-dots i.active:before{content:"";position:absolute;inset:0 auto 0 0;width:50%;border-radius:inherit;background:#449b9e;animation:promo-progress-enter .45s cubic-bezier(.22,1,.36,1) both}
.slider-dots i.active:after{content:none}
@keyframes promo-progress-enter{from{transform:translateX(100%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.slider-dots i.active:before{animation:none}}
@media(min-width:1024px){
  .promo-track .promo-slide{width:1000px;left:calc(50% - 500px + var(--offset,0) * 1020px)}
  .slider-dots{bottom:18px;gap:4px}
  .slider-dots i{width:6px;height:6px}
  .slider-dots i.active{width:40px}
}
@media(min-width:480px) and (max-width:1023px){
  .promo{padding:20px 24px}
  .promo-track .promo-slide{width:625px;left:calc(50% - 312.5px + var(--offset,0) * 633px)}
  .slider-arrow-shell.prev-shell{left:16px}
  .slider-arrow-shell.next-shell{right:16px}
}
@media(max-width:1023px){
  .slider-dots{bottom:8px;gap:2px}
  .slider-dots i{width:4px;height:4px}
  .slider-dots i.active{width:20px}
}
@media(max-width:479px){
  .promo{padding:20px 16px}
  .promo-track{height:120px}
  .promo-track .promo-slide{width:320px;left:calc(50% - 160px + var(--offset,0) * 324px)}
  .slider-arrow-shell{display:none}
}
.search-results:has(.search-grid>.search-card:nth-child(n+11)){height:auto;min-height:1094.519px}
.search-grid:has(>.search-card:nth-child(n+11)){height:auto}
.stores-page[data-view="list"] .list-view{height:auto;min-height:580px}
/* Строка магазина в эталоне держит фикс. высоту под 2 строки текста; с
   добавлением часов работы (`Store.hours`) в этой же колонке может стать 3 —
   переводим на min-height, чтобы не резать контент, как уже сделано для
   .list-view выше. */
.store-row{height:auto;min-height:90px}
@media(max-width:1023px){.store-row{min-height:154px}}
@media(max-width:479px){.store-row{min-height:154px}.store-row:first-child{min-height:172px}}
@media(max-width:1023px){.filter-menu{top:44px}.product-carousel{grid-auto-columns:239px}.mini-products{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:239px;overflow-x:auto;scrollbar-width:none}.related-track{grid-auto-columns:170px}.review-track{grid-auto-columns:270px}.search-results:has(.search-grid>.search-card:nth-child(n+5)){height:auto;min-height:681.042px}.search-grid:has(>.search-card:nth-child(n+5)){height:auto}.product-main{height:auto;min-height:2666px}}
@media(max-width:479px){.filter-menu{position:fixed;left:8px;right:8px;top:80px;min-width:0}.product-carousel{grid-auto-columns:190px}.mini-products{grid-auto-columns:190px}.related-track{grid-auto-columns:164px}.review-track{grid-auto-columns:250px}.search-results:has(.search-grid>.search-card:nth-child(n+7)){height:auto;min-height:1059.147px}.product-main{height:auto;min-height:2374px}}
.promo-slide-db{width:100%}
.promo-slide-db img,.promo-slide-db picture{display:block;width:100%;height:100%}
.promo-slide-db img{object-fit:cover}
@media(max-width:479px){.promo-slide-db img{content:normal}}
.video-modal{position:fixed;z-index:60;inset:0;display:grid;place-items:center;padding:24px}
.video-modal[hidden]{display:none}
.video-modal-backdrop{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:rgba(7,16,19,.85);cursor:pointer}
.video-modal-body{position:relative;width:min(960px,100%);aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000}
.video-modal-body iframe{width:100%;height:100%;border:0;display:block}
.video-modal-close{position:absolute;z-index:2;top:8px;right:8px;width:36px;height:36px;border:0;border-radius:4px;background:rgba(13,15,17,.7);color:#fff;font-size:22px;line-height:1;cursor:pointer}
body.modal-open{overflow:hidden}
.gallery-play{display:grid;place-items:center;font-size:18px}

/* Buy-панель товара: скидка процентом рядом с ценой, как в макете и в
   fixed bar той же страницы — раньше вместо неё показывался статус
   наличия. «Нет в наличии» остаётся, но отдельным приглушённым текстом,
   только когда товара действительно нет. */
.buy-price span.buy-unavailable{color:var(--muted);font-size:12px}
.buy-price del+span{margin-left:12px}

/* Ряд миниатюр галереи товара: play-кнопка + стрелки листания + сама лента,
   по макету Figma (кнопки `‹`/`›` по бокам ленты, скриншот `4295:9581`) —
   раньше был только скролл без кликабельной подсказки. */
.product-thumbs-row{display:flex;align-items:stretch;gap:4px;margin-top:4px}
.product-thumbs-row .product-thumbs,
.product-thumbs-row .gallery-play{margin-top:0}
.product-thumbs-row .gallery-play{flex:0 0 60px;width:60px;height:60px;padding:0;border:0;border-radius:4px;overflow:hidden;background:var(--surface)}
/* Клиент, 2026-09-25: стрелки миниатюр «как будто не работают». Причина —
   .product-thumbs было flex:1 (тянется на всю оставшуюся ширину ряда,
   ~557-564px), а в Figma лента миниатюр — Hug-контейнер ФИКСИРОВАННОЙ
   ширины (`4295:9578`→Frame 233: 500px на десктопе 1440,
   `396:4335`→Frame 233: 560px на планшете 768), который поэтому реально
   переполняется при 8+ фото (60px миниатюра + 4px gap) и требует скролла.
   При flex:1 контейнер расширялся под любое число миниатюр без остатка —
   переполнения не было НИ У ОДНОГО товара каталога (максимум 8 фото),
   стрелки были рабочими, но бесполезными везде. Дальше — рабочий JS
   (`product.js`, disabled по факту переполнения), но сама возможность
   переполниться нужна в первую очередь. */
.product-thumbs-row .product-thumbs{flex:1;min-width:0}
.thumbs-arrow{flex:0 0 44px;width:44px;padding:0;border:0;border-radius:4px;background:var(--surface);cursor:pointer;display:grid;place-items:center}
.thumbs-arrow:disabled{opacity:.3;cursor:default}
@media(min-width:1024px){.product-thumbs-row .product-thumbs{flex:none;width:500px}}
@media(max-width:1023px){
  .product-thumbs-row .gallery-play{flex-basis:52px;width:52px;height:52px}
  .thumbs-arrow{flex-basis:38px;width:38px}
  .product-thumbs-row .product-thumbs{flex:none;width:560px}
}
/* Мобильная галерея (Figma `412:6561`+`4315:8518`, ≤479px): вместо ленты
   миниатюр со стрелками — свайп по главному фото + точки-пагинация под
   ним, кнопка play (если есть видео) оверлеем поверх фото сверху слева
   с той же градиентной подсветкой, что у .contact-chip (пункт 13
   TODO-списка). Лента миниатюр и стрелки скрыты; сама .product-thumbs-row
   остаётся в DOM (в ней play-кнопка) — только её сама превращаем в
   абсолютный оверлей. */
.gallery-dots{display:none}
/* pan-y отдаёт вертикальный скролл странице, горизонтальный жест — нашему
   pointerdown/pointerup в product.js (иначе браузер сам решает, что это
   скролл, и обрывает последовательность pointercancel вместо pointerup —
   тот же приём, что уже есть у .catalog-card-media). */
.product-stage{touch-action:pan-y}
@media(max-width:479px){
  .product-gallery{position:relative}
  .product-thumbs-row .thumbs-arrow,
  .product-thumbs-row .product-thumbs{display:none}
  .product-thumbs-row{position:absolute;top:8px;left:8px;margin:0;z-index:2}
  .product-thumbs-row .gallery-play{width:48px;height:48px;background:radial-gradient(60% 90% at 50% 0%,rgba(255,255,255,.12),rgba(255,255,255,0) 70%),var(--surface)}
  .gallery-dots{display:flex;justify-content:center;align-items:center;gap:4px;margin-top:10px}
  .gallery-dot{width:4px;height:4px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.3);cursor:pointer;transition:width .2s ease,background-color .2s ease}
  .gallery-dot.active{width:16px;background:var(--accent)}
}
.map-empty{position:absolute;left:50%;top:50%;width:min(360px,80%);margin:0;transform:translate(-50%,-50%);padding:16px;border-radius:8px;background:rgba(13,15,17,.85);text-align:center;font-size:13px;line-height:1.3}
.category-icon{flex:0 0 auto;display:block;width:32px;height:18px}

/* Мобильное меню по макету Figma `423:4260` (Open menu). */
.mobile-menu{position:fixed;z-index:19;inset:60px 0 0;padding:0 16px 20px;display:flex;flex-direction:column;gap:40px;background:#0d0f11;font:400 12px/1 var(--body);text-transform:none;overflow-y:auto;overscroll-behavior:contain}
/* Правка клиента, 2026-09-23: шапка меню (поле поиска) должна оставаться
   зафиксированной вверху, пока список категорий/контакты/соцсети под ней
   скроллятся — раньше `.mobile-menu` скроллился целиком как один блок.
   Обёртка нужна отдельно от `.menu-search`, у которой уже есть собственный
   полупрозрачный фон пилюли (rgba(255,255,255,.1)) — контент, уезжающий
   под sticky-элемент, был бы виден сквозь неё. */
.menu-search-bar{position:sticky;top:0;z-index:2;background:#0d0f11}
.menu-search{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:8px;background:rgba(255,255,255,.1)}
.menu-search .search-field-icon{width:12px;height:12px}
.menu-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fff;font:400 14px/1 var(--body)}
.menu-search input::placeholder{color:rgba(255,255,255,.5)}
.menu-nav{display:flex;flex-direction:column;gap:4px}
.menu-category,.menu-link{display:flex;align-items:center;gap:8px;padding:13px 0;border-top:1px solid rgba(255,255,255,.1);font:600 12px/1 var(--body);letter-spacing:.02em;text-transform:uppercase}
.menu-nav>:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.menu-contacts{display:flex;flex-direction:column;gap:24px}
.menu-contact{font:15px/1.1 var(--display)}
.menu-chips{display:flex;gap:8px}
.mobile-menu .contact-chip{display:inline-flex;align-items:center;gap:8px;padding:15px 16px;font-size:12px;font-weight:600;letter-spacing:.02em}
.mobile-menu .contact-chip img{flex:0 0 auto}
/* Правка клиента, 2026-09-24 (пункт 13): «неверно/верно» в присланном
   примере — это буквально текущая реализация (плоский var(--surface)) и
   градиентная подсветка сверху, которая уже есть у .slider-arrow, просто
   не была перенесена на .contact-chip (кнопки Telegram/WhatsApp — в
   футере и в мобильном меню, оба места через общий класс). */
.contact-chip{position:relative;background:radial-gradient(60% 90% at 50% 0%,rgba(255,255,255,.12),rgba(255,255,255,0) 70%),var(--surface);font-weight:600}
.menu-brand{display:flex;flex-direction:column;gap:16px}
.menu-logo{width:130px;height:32px}
.menu-brand p{margin:4px 0 8px;font:500 11px/1.3 var(--body);opacity:.5}
.menu-brand small{font:10px/1 var(--display);text-transform:uppercase;opacity:.5}
.mobile-menu .socials{margin:0;gap:12px}
.socials img{display:block}
@media(min-width:480px){.mobile-menu{left:auto;width:360px;border-left:1px solid rgba(255,255,255,.1)}}
@media(min-width:1024px){.mobile-menu{top:72px}}

/* Липкая панель товара по макету Figma `646:7504` (fixed bar). */
.fixed-bar{position:fixed;z-index:18;left:0;right:0;bottom:0;background:rgba(7,16,19,.4);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.1)}
.fixed-bar[hidden]{display:none}
.fixed-bar-inner{max-width:1920px;margin:0 auto;min-height:80px;padding:12px 20px;display:flex;align-items:center;gap:32px}
.fixed-bar-thumb{flex:0 0 auto;width:54px;height:52px;border-radius:4px;object-fit:contain;background:var(--surface)}
.fixed-bar-title{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:8px}
.fixed-bar-title strong{font:20px/1.2 var(--display);text-transform:uppercase}
.fixed-bar-anchors{display:flex;gap:24px}
.fixed-bar-anchors a{font:500 10px/1 var(--body);letter-spacing:.02em;text-transform:uppercase;opacity:.8}
.fixed-bar-price{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;justify-content:flex-end;gap:12px}
.fixed-bar-price strong{font:20px/1.2 var(--display);text-transform:uppercase}
.fixed-bar-price del{font-size:14px;opacity:.5}
.fixed-bar-discount{margin-left:-4px;color:var(--accent);font-size:14px}
.fixed-bar-button{flex:0 0 auto;height:56px;padding:0 22px;display:inline-flex;align-items:center;gap:8px;border-radius:4px;background:var(--light);color:var(--bg);font-size:12px;font-weight:650;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.map-button{gap:8px}
@media(max-width:1023px){
  .fixed-bar-inner{gap:20px}
  .fixed-bar-price{flex-direction:column;align-items:flex-end;gap:4px}
}
@media(max-width:479px){
  .fixed-bar-inner{min-height:68px;padding:8px 16px 16px;display:grid;gap:4px 20px;grid-template-columns:1fr auto;grid-template-areas:"price button" "name button";align-items:center}
  .fixed-bar-thumb,.fixed-bar-anchors{display:none}
  .fixed-bar-title{grid-area:name;gap:0}
  .fixed-bar-title strong{font:500 10px/1 var(--body);letter-spacing:.02em;opacity:.8}
  .fixed-bar-price{grid-area:price;justify-content:flex-start}
  .fixed-bar-price strong{font-size:15px;line-height:1.1}
  .fixed-bar-price del,.fixed-bar-discount{display:none}
  .fixed-bar-button{grid-area:button;height:44px;padding:0 16px;font-size:10px}
}

/* Поле поиска (Basic input, Figma `640:5681`): иконка-лупа — ассет с двумя
   цветами (серый по умолчанию, акцент на hover/focus), а не CSS-рамка;
   кнопка очистки появляется только когда поле в фокусе и не пустое. */
.search-field-icon{position:relative;flex:0 0 auto;width:14px;height:14px;display:flex;align-items:center;justify-content:center}
.search-field-icon img{display:block}
.search-icon-default{opacity:.5}
.search-icon-accent{position:absolute;inset:0;opacity:0;transition:opacity .15s ease}
.header-search:focus-within .search-icon-accent,
.menu-search:focus-within .search-icon-accent{opacity:1}
.header-search:focus-within .search-icon-default,
.menu-search:focus-within .search-icon-default{opacity:0}
@media(hover:hover){
  .header-search:hover .search-icon-accent,.menu-search:hover .search-icon-accent{opacity:1}
  .header-search:hover .search-icon-default,.menu-search:hover .search-icon-default{opacity:0}
}
input[type="search"]::-webkit-search-cancel-button{display:none}
.header-search input,.menu-search input{caret-color:var(--accent)}
.search-clear{display:none;flex:0 0 auto;width:20px;height:20px;padding:0;border:0;border-radius:4px;background:transparent;opacity:.7;cursor:pointer}

/* «О бренде»: картинка на всю ширину блока (была центрированная и
   ограничена min(1000px,88vw)/1180px/760px/420px по брейкпоинтам) вместо
   центрирования — full-bleed до краёв секции, вертикальный размер
   сохранён тем же числом, что и раньше (иначе высота картинки с 1:1
   квадратным исходником при полной ширине взорвала бы бюджет высоты
   секции), плюс object-fit:cover, чтобы не искажалась. Второй градиент
   сверху (эталон даёт только нижний, `.about:after`) — тем же приёмом. */
.about-image{left:0;right:0;width:auto;height:1000px;transform:none}
.about-image img{height:100%;object-fit:cover}
.about:before{content:"";position:absolute;left:0;right:0;top:0;height:35%;background:linear-gradient(180deg,var(--bg),transparent);pointer-events:none}
@media(min-width:1600px){.about-image{height:1180px}}
@media(max-width:1023px){.about-image{height:760px}}
@media(max-width:479px){.about-image{height:420px}}

/* «Ключевые особенности бренда»: номер слева от заголовка+описания вместо
   сверху — эталон даёт `.features li{display:flex;flex-direction:column}`
   (число → заголовок → описание друг под другом). Заголовок и описание —
   соседние элементы `strong`/`span`, а не вложенный блок, поэтому чистый
   flex-row положил бы все три в один ряд; грид с числом на обе строки
   держит их визуально сгруппированными без правки разметки.
   2026-09-26: было `align-items:center` — на десктопе незаметно
   (описание в 1-2 строки, «центр» ≈ «верх»), но на мобильном (`.features
   ol` — 2 колонки, узкая ~156px) описание переносится на 3 строки,
   растягивая объединённую область числа (grid-row:1/3), и центрирование
   утапливало цифру далеко вниз, к описанию, а не к заголовку — реальный
   косяк вёрстки, не просто узкая колонка (Figma `4322:8241`/`items-start`
   на строке-обёртке числа+текста прямо это подтверждает). */
.features li{display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:start}
.features b{grid-row:1/3;margin-bottom:0}
.features strong{grid-column:2}
.features span{grid-column:2}
@media(max-width:479px){.features li{column-gap:16px}.features b{margin-bottom:0}}

/* Текстовые ссылки (не кнопки/чипы — у тех свой Secondary/Tertiary
   ховер) подсвечиваются акцентом на ховере: оглавление статьи и любые
   ссылки, если появятся в тексте описания/обзора/текстовой страницы. */
:is(.article-toc a,#review-body a,.legal-copy a):hover{color:var(--accent)}
.search-clear:hover{opacity:1}
.search-clear img{display:block;margin:auto}
.header-search:focus-within:has(input:not(:placeholder-shown)) .search-clear,
.menu-search:focus-within:has(input:not(:placeholder-shown)) .search-clear{display:grid;place-items:center}

/* Подсказки поиска в шапке по макету Figma `679:9297`. */
.header-search{position:absolute}
.search-suggest{position:absolute;z-index:30;left:0;right:0;top:52px;max-height:320px;padding:4px;display:grid;gap:2px;overflow-y:auto;border-radius:8px;background:rgba(255,255,255,.1);backdrop-filter:blur(10px);box-shadow:0 16px 40px rgba(0,0,0,.45)}
.search-suggest[hidden]{display:none}
.suggest-row{display:flex;align-items:center;gap:8px;min-height:42px;padding:14px 16px;border-radius:4px;background:transparent;font-size:14px;line-height:1}
.suggest-row.suggest-file{gap:12px}
.suggest-row:hover{background:rgba(255,255,255,.1)}
.suggest-file{min-height:66px}
.suggest-file img{flex:0 0 auto;width:32px;height:38px}
.suggest-file span{display:flex;flex-direction:column;gap:4px;min-width:0}
.suggest-file strong{font-weight:400;font-size:14px}
.suggest-file small{font-size:12px;opacity:.5}

/* Кнопка выбора города: иконки 14x14 из макета (`642:6676`), а не растянутый
   ассет эталона и текстовый глиф. */
.location-button img{flex:0 0 auto;width:14px;height:14px;filter:none}
.location-button .chevron{font-size:0}
@media(max-width:479px){.location-button img{width:18px;height:18px}}

/* Модалка выбора города (Figma `2002:10682`), правка клиента 2026-09-23:
   подложка самой модалки — 40% непрозрачности, как в макете
   (`bg-[rgba(7,16,19,0.4)]`), а не 88%, как у эталона (`geo.css`, не
   трогаем — оверрайд здесь). Оверлей-подложка позади модалки в эталоне уже
   была 40% (`.geo-overlay`) — это отдельный слой, путать с ним не нужно. */
.geo-dialog{background:rgba(7,16,19,.4)}

/* Иконки из макета вместо типографских глифов эталона.
   Соответствие глифов и нод — в FIGMA-AUDIT.md. */
.ui-icon{flex:0 0 auto;display:inline-block;vertical-align:middle}
.ui-arrow{width:14px;height:14px}
.ui-back{width:14px;height:14px;margin-right:8px}
.ui-chevron{width:14px;height:14px;margin-left:4px}
.ui-sort{width:14px;height:14px;margin-left:4px}
.ui-close{width:14px;height:14px}
.ui-external{width:20px;height:20px}
.ui-pin{width:14px;height:14px}
.ui-meta{width:12px;height:12px;margin-right:6px}
.ui-top{width:14px;height:14px;transform:rotate(180deg)}
.small-link .ui-arrow{margin-left:8px}
.slider-arrow .ui-arrow{width:14px;height:14px}
.map-card-close .ui-close{width:16px;height:16px}
.row-actions button:before{display:none}
.row-actions button{font-size:0;display:grid;place-items:center}
.row-actions a{font-size:0;display:inline-grid;place-items:center}
.article-author small{display:flex;align-items:center;gap:4px}
.article-author small .ui-meta:nth-of-type(2){margin-left:12px}
.article-meta span,.review-card small i{display:inline-flex;align-items:center}

/* Состояния кнопок из компонента Figma `645:6939`.
   Рост 44→48 и 56→60 на ховере — настоящий padding (Figma `645:6939`,
   см. блок ниже), а не scale. Иконки в наборе белые, поэтому на светлой
   подложке инвертируются. */
.button,.small-link,.tabs button,.desktop-arrows button,.slider-arrow,.contact-chip,
.back-chip,.article-back,.sort-button,.map-button,.fixed-bar-button,.icon-button,
.location-button,.socials a,.to-top,.row-actions button,.row-actions a,
.view-switch button,.spec-tabs button,.spec-toggle,.catalog-filters button[data-filter],
.menu-link,.menu-category{transition:background-color .18s ease,color .18s ease,transform .18s ease}

@media(hover:hover){
  /* Primary — светлая подложка становится белой */
  :is(.button.light,.map-button,.fixed-bar-button,.socials a,.row-actions button):hover{background:#fff}

  /* Secondary — тёмная подложка сменяется светлой, содержимое темнеет */
  :is(.button.secondary,.small-link,.tabs button:not(.active),
      .desktop-arrows button:not(:disabled),.slider-arrow:not(:disabled),
      .contact-chip,.back-chip,.article-back,.sort-button,
      .catalog-filters button[data-filter],.view-switch button,
      .spec-tabs button:not(.active),.spec-toggle):hover{background:#fff;color:var(--bg)}
  :is(.small-link,.desktop-arrows button:not(:disabled),.slider-arrow:not(:disabled),
      .contact-chip,.back-chip,.article-back,.sort-button,
      .catalog-filters button[data-filter]):hover .ui-icon{filter:invert(1)}

  /* Tertiary — прозрачная кнопка получает подложку. .category-nav a
     (кнопки категорий в hero) раньше не имели ни одного hover-состояния. */
  :is(.icon-button,.location-button,.to-top,.menu-link,.menu-category,.category-nav a):hover{background:var(--surface)}

  /* Рост кнопки на ховере (Figma `645:6939`) — реальный padding, +2px с
     каждой стороны (высота +4px), а не scale: Medium `16/15→18/17`, Large
     `22/21→24/23`. Только у Primary/Secondary — у Tertiary (`.icon-button`
     и т.п. выше, их нет в этом списке) padding на hover не меняется
     вообще, только фон. У каждого элемента свой базовый padding/высота
     (разные иммутабельные файлы эталона), поэтому дельта явная, не через
     общий множитель. */
  .button:hover{min-height:48px;padding:0 24px}
  .button.light:hover{min-height:58px}
  .small-link:hover{height:48px;padding:0 18px}
  .contact-chip:hover{padding:17px 18px}
  :is(.product-page .back-chip,.article-page .article-back):hover{height:48px;padding:0 18px}
  .series-catalog-page .back-chip:hover{height:44px;padding:0 16px}
  .map-button:hover{height:64px;padding:0 24px}
  .fixed-bar-button:hover{height:60px;padding:0 24px}
}
@media(hover:hover) and (max-width:1023px){
  .map-button:hover{height:56px}
}
@media(hover:hover) and (max-width:479px){
  .map-button:hover{height:44px}
  .fixed-bar-button:hover{height:48px;padding:0 18px}
}

@media(hover:hover){
  /* Двухслойная стрелка промо-баннера: реальная Hug-кнопка 36×36
     высветляется на hover, декоративная подложка .slider-arrow-shell 52×52 остаётся
     цветом фона. Иконка инвертируется в тёмную поверх светлой кнопки. */
  .promo .slider-arrow:not(:disabled):hover{background:#fff}
  .promo .slider-arrow:not(:disabled):hover .ui-icon{filter:invert(1)}
}

/* Disabled */
.button[disabled],.small-link[disabled],.tabs button[disabled],
.sort-button[disabled],.catalog-filters button[disabled],
.spec-tabs button[disabled],.spec-toggle[disabled]{opacity:.4;cursor:default}

/* Ховер карточки линейки (`.series-card`, страница «Линейки») по макету
   Figma `2076:13533` Product card effect: только зум фото (1.1×) внутри
   рамки карточки, без translateY и смены фона — эталон делал наоборот. */
.series-card{transition:none}
.series-card:hover{transform:none;background:var(--surface)}
.series-card img{transition:transform .3s ease}
.series-card:hover img{transform:scale(1.1)}

/* Высота карточки товара в эталоне прибита под образец из макета, поэтому у
   товаров с коротким списком характеристик снизу оставалась пустая зона
   (у Beta 8.70 DSP — 480 px). Блок набирает высоту по содержимому. */
.product-main{height:auto;min-height:0}
@media(max-width:1023px){.product-main{height:auto;min-height:0}}
@media(max-width:479px){.product-main{height:auto;min-height:0}}

/* Desktop header with open search (Figma 4254:12739): the search field is
   the second 44px row of a 116px header, not an overlay over category nav. */
@media(min-width:1024px){
  .site-header.search-open{height:116px;align-items:flex-start}
  .site-header.search-open .brand-logo{top:30px}
  .site-header.search-open .header-actions{visibility:hidden}
  .site-header.search-open .header-search{top:64px;gap:8px}
  .site-header.search-open .search-close{position:absolute;top:-56px;right:0;visibility:visible}
  .site-header.search-open~main .category-nav{top:132px}
  .site-header.search-open~main .store-categories,
  .site-header.search-open~main .search-categories{margin-top:132px}
}