/* Компоненты по БЭМ. Каждый блок — ровно здесь и больше нигде; реестр и эталоны —
   docs/LAYOUT-REGISTRY.md, витрина — layout/kit.php. Только var(--…) из tokens.css. */

.icon{flex-shrink:0;stroke:currentColor}

/* ============================================================ П2. Базовые элементы */

/* Кнопка. Виды: --primary (одна на экран: Найти, Купить, Оформить), --secondary, --neutral,
   --soft, --danger, --in-cart. Размеры: --s 32, --m 40, обычный — --h-control, --l 52. */
.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);height:var(--h-control);padding:0 var(--s-5);border:1.5px solid transparent;border-radius:var(--r-control);background:transparent;color:var(--c-text);font:700 15px/20px var(--font);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast)}
.button:hover{text-decoration:none}
.button--s{height:var(--h-control-s);padding:0 var(--s-3);font-size:13px;line-height:16px;gap:6px}
.button--m{height:var(--h-control-m);padding:0 var(--s-4);font-size:14px}
.button--l{height:var(--h-control-l);padding:0 var(--s-6);font-size:17px;line-height:24px}
.button--block{display:flex;width:100%}

.button--primary{background:var(--c-accent);color:var(--c-text)}
.button--primary:hover{background:var(--c-accent-hover);color:var(--c-text)}
.button--primary:active{background:var(--c-accent-active)}
.button--secondary{border-color:var(--c-brand);background:var(--c-card);color:var(--c-brand);font-weight:600}
.button--secondary:hover{background:var(--c-tint);color:var(--c-brand)}
.button--secondary:active{background:var(--c-tint-hover)}
.button--neutral{border-color:var(--c-line);background:var(--c-card);color:var(--c-text);font-weight:600}
.button--neutral:hover{border-color:var(--c-field);color:var(--c-text)}
/* MAX — фирменные цвета мессенджера (значок приложения: #44CCFF, #0000FF, #5533EE, #9933DD), текст белый.
   Голубой — только у левого края: белый текст на нём не читается; под текстом синий и фиолетовый. */
.button--max,.button--max:hover,.button--max:active{border-color:transparent;background:linear-gradient(100deg,#4cf -15%,#00f 35%,#53e 72%,#93d 115%);color:#fff;font-weight:700}
.button--max:hover{filter:brightness(1.12)}
.button--max:active{filter:brightness(.92)}
.button--soft{background:var(--c-tint);color:var(--c-brand);font-weight:600}
.button--soft:hover{background:var(--c-tint-hover);color:var(--c-brand)}
.button--danger{color:var(--c-err);font-weight:600}
.button--danger:hover{background:var(--c-err-bg);color:var(--c-err)}
.button--in-cart{border-color:var(--c-ok);background:var(--c-card);color:var(--c-ok);font-weight:600}
.button--in-cart:hover{background:var(--c-ok-bg);color:var(--c-ok)}

.button.is-loading{position:relative;color:transparent;pointer-events:none}
.button.is-loading::after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--c-text);border-right-color:transparent;border-radius:var(--r-pill);animation:spin .7s linear infinite}
.button--secondary.is-loading::after,.button--soft.is-loading::after{border-color:var(--c-brand);border-right-color:transparent}
@keyframes spin{to{transform:rotate(360deg)}}
.button:disabled,.button[aria-disabled="true"]{background:var(--c-page);border-color:transparent;color:var(--c-disabled);cursor:not-allowed}
.button--secondary:disabled,.button--neutral:disabled{background:var(--c-card);border-color:var(--c-line)}

/* Ссылка-действие: «Все →», «Смотреть применимость» */
.link-more{display:inline-flex;align-items:center;gap:var(--s-1);font-weight:600;white-space:nowrap}

/* Кнопка-иконка. Подпись — обязательно aria-label. */
.icon-button{display:inline-flex;align-items:center;justify-content:center;width:var(--h-control-m);height:var(--h-control-m);flex-shrink:0;padding:0;border:1px solid transparent;border-radius:var(--r-control);background:transparent;color:var(--c-text-2);cursor:pointer;transition:background-color var(--dur-fast),color var(--dur-fast)}
.icon-button:hover{background:var(--c-page);color:var(--c-text)}
.icon-button--brand{color:var(--c-brand)}
.icon-button--brand:hover{background:var(--c-tint);color:var(--c-brand)}
.icon-button--outline{border-color:var(--c-line);background:var(--c-card);color:var(--c-brand)}
.icon-button--outline:hover{background:var(--c-tint)}
.icon-button--s{width:var(--h-control-s);height:var(--h-control-s)}
.icon-button:disabled{color:var(--c-disabled);background:transparent;cursor:not-allowed}
@media (max-width:767px){.icon-button:not(.icon-button--s){width:44px;height:44px}}

/* Поле. Обёртка .field — подпись, контрол, подсказка. Размеры: --s 40, обычный, --l 52.
   Внутри контрола: иконка слева (.field__icon + .field--icon), шеврон списка, кнопка очистки. */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field__label{font:600 14px/20px var(--font)}
.field__req{color:var(--c-err)}
.field__control{position:relative;display:flex}
.field__input{width:100%;height:var(--h-control);padding:0 14px;border:1px solid var(--c-field);border-radius:var(--r-control);background:var(--c-card);color:var(--c-text);font:400 15px/20px var(--font);outline:none;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.field__input::placeholder{color:var(--c-text-3)}
.field__input:focus{border-color:var(--c-brand);box-shadow:var(--ring)}
.field__input:focus-visible{box-shadow:0 0 0 1px var(--c-brand),var(--ring)}
.field__input:disabled{border-color:var(--c-line);background:var(--c-page);color:var(--c-disabled);cursor:not-allowed}
textarea.field__input{height:auto;min-height:104px;padding:var(--s-3) 14px;line-height:22px;resize:vertical}
select.field__input{padding-right:var(--s-10);appearance:none;-webkit-appearance:none;cursor:pointer}
.field__input--mono{font:500 15px/20px var(--font-mono);text-transform:uppercase}
.field__icon,.field__chevron{position:absolute;top:50%;transform:translateY(-50%);color:var(--c-text-3);pointer-events:none}
.field__icon{left:var(--s-3)}
.field__chevron{right:var(--s-3)}
.field--icon .field__input{padding-left:var(--s-10)}
.field__clear{position:absolute;right:6px;top:50%;transform:translateY(-50%)}
.field--clearable .field__input{padding-right:var(--s-10)}
.field__hint{display:flex;align-items:center;gap:6px;font:var(--t-small);color:var(--c-text-2)}   /* text-3 на подложке tint — 4.43:1 */
.field--error .field__input{border-color:var(--c-err);background:var(--c-err-bg)}
.field--error .field__input:focus{box-shadow:var(--ring-err)}
.field--error .field__hint{color:var(--c-err)}
.field--disabled .field__label{color:var(--c-disabled)}
.field--s .field__input{height:var(--h-control-m);font-size:14px}
.field--l .field__input{height:var(--h-control-l);font-size:18px;line-height:24px}
@media (max-width:767px){.field__input{font-size:16px}}

/* Поиск: поле с лупой и встроенной «Найти». Крестик очистки показывает js/v3.js. */
.search{position:relative;display:flex;width:100%}
.search__icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--c-text-3);pointer-events:none}
.search__input{width:100%;height:var(--h-control);padding:0 152px 0 44px;border:1.5px solid var(--c-brand);border-radius:var(--r-control);background:var(--c-card);color:var(--c-text);font:400 15px/20px var(--font);outline:none}
.search__input::placeholder{color:var(--c-text-3)}
.search__input:focus{box-shadow:var(--ring)}
.search__input::-webkit-search-cancel-button{display:none}
.search__clear{position:absolute;right:112px;top:50%;transform:translateY(-50%)}
.search__submit{position:absolute;right:var(--s-1);top:var(--s-1);height:calc(100% - 2 * var(--s-1));padding:0 var(--s-5);border-radius:calc(var(--r-control) - 2px)}
.search--l .search__input{height:var(--h-control-l);font-size:18px;line-height:24px}
.search--l .search__submit{padding:0 var(--s-6);font-size:16px}
.search__examples{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-3);margin-top:6px;font:var(--t-small);color:var(--c-text-3)}
.search__example{padding:0;border:0;background:none;color:var(--c-brand);font:inherit;cursor:pointer;white-space:nowrap}
.search__example:hover{text-decoration:underline}
.search__example--mono{font-family:var(--font-mono)}
@media (max-width:767px){
  .search__input{padding-right:96px;font-size:16px}
  .search__clear{right:80px}
  .search__submit,.search--l .search__submit{padding:0 var(--s-4)}
  .search--l .search__input{padding-right:104px}
}

/* Чекбокс, радио, переключатель. Нативный input скрыт, но в фокусе и в доступе.
   Вся строка — <label>, кликабельна целиком. */
.check{position:relative;display:flex;align-items:center;gap:10px;min-height:28px;cursor:pointer;font:400 15px/20px var(--font)}
.check__input{position:absolute;opacity:0;width:20px;height:20px;margin:0}
.check__box{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;border:1.5px solid var(--c-field);border-radius:var(--r-badge);background:var(--c-card);color:var(--c-card)}
.check__box .icon{visibility:hidden}
.check__input:checked + .check__box{border-color:var(--c-brand);background:var(--c-brand)}
.check__input:checked + .check__box .icon{visibility:visible}
.check__input:focus-visible + .check__box{outline:2px solid var(--c-brand);outline-offset:2px}
.check__input:disabled + .check__box{border-color:var(--c-line);background:var(--c-page)}
.check__input:disabled ~ .check__text{color:var(--c-disabled)}
.check__count{margin-left:auto;font:var(--t-small);color:var(--c-text-3)}
.check--radio .check__box{border-radius:var(--r-pill)}
.check--radio .check__input:checked + .check__box{background:var(--c-card)}
.check--radio .check__input:checked + .check__box::after{content:"";width:10px;height:10px;border-radius:var(--r-pill);background:var(--c-brand)}

.switch{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:28px;cursor:pointer;font:400 15px/20px var(--font)}
.switch__input{position:absolute;opacity:0;width:40px;height:24px;margin:0;right:0}
.switch__track{position:relative;width:40px;height:24px;flex-shrink:0;border-radius:var(--r-pill);background:var(--c-field);transition:background-color var(--dur-fast)}
.switch__track::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:var(--r-pill);background:var(--c-card);box-shadow:var(--shadow-knob);transition:left var(--dur-fast)}
.switch__input:checked + .switch__track{background:var(--c-brand)}
.switch__input:checked + .switch__track::after{left:18px}
.switch__input:focus-visible + .switch__track{outline:2px solid var(--c-brand);outline-offset:2px}
.switch--inline{flex-direction:row-reverse;justify-content:flex-end;gap:var(--s-3)}
.switch--inline .switch__input{right:auto;left:0}

/* Сегментный переключатель: «Физ. лицо / Юр. лицо», «Вход / Регистрация», «список / сетка».
   Внутри — радио; радиус обёртки = радиус сегмента + отступ. */
.segmented{display:inline-flex;gap:var(--s-1);max-width:100%;padding:var(--s-1);border-radius:calc(var(--r-control) + var(--s-1));background:var(--c-page)}
.segmented__item{position:relative;flex:1 1 auto}
.segmented__input{position:absolute;opacity:0;width:1px;height:1px}
.segmented__label{display:flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 var(--s-5);border-radius:var(--r-control);color:var(--c-text-2);font:600 14px/20px var(--font);white-space:nowrap;cursor:pointer;transition:background-color var(--dur-fast),color var(--dur-fast)}
.segmented__label:hover{color:var(--c-text)}
.segmented__input:checked + .segmented__label{background:var(--c-card);color:var(--c-text);box-shadow:var(--shadow-knob)}
.segmented__input:focus-visible + .segmented__label{outline:2px solid var(--c-brand);outline-offset:-2px}
.segmented__link{display:flex;align-items:center;justify-content:center;height:36px;padding:0 var(--s-4);border-radius:var(--r-control);color:var(--c-text-2);font:600 14px/20px var(--font);white-space:nowrap}
.segmented__link:hover{color:var(--c-text);text-decoration:none}
.segmented__link.is-current{background:var(--c-card);color:var(--c-text);box-shadow:var(--shadow-knob)}
.segmented__link--icon{width:36px;padding:0}
.segmented--brand .segmented__input:checked + .segmented__label{background:var(--c-brand);color:var(--c-on-navy);box-shadow:none}
.segmented--icons .segmented__label{width:36px;padding:0}
.segmented--block{display:flex;width:100%}

/* Бейдж — метка товара или варианта: «Оригинал», «Самый быстрый», «−15%». */
.badge{display:inline-flex;align-items:center;gap:var(--s-1);height:22px;padding:0 var(--s-2);border-radius:var(--r-badge);background:var(--c-page);color:var(--c-text);font:600 12px/16px var(--font);white-space:nowrap}
.badge--strong{background:var(--c-text);color:var(--c-on-navy)}
.badge--brand{background:var(--c-brand);color:var(--c-on-navy)}
.badge--tint{background:var(--c-tint);color:var(--c-brand)}
.badge--ok{background:var(--c-ok-bg);color:var(--c-ok)}
.badge--wait{background:var(--c-wait-bg);color:var(--c-wait)}
.badge--err{background:var(--c-err);color:var(--c-on-navy)}
.badge--note{background:var(--c-note-bg);color:var(--c-wait)}

/* Статус наличия — всегда с иконкой, чтобы читался без цвета. --dot — короткий, в мини-карточке. */
.status{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 var(--s-3) 0 var(--s-2);border-radius:var(--r-pill);font:600 13px/16px var(--font);white-space:nowrap}
.status--ok{background:var(--c-ok-bg);color:var(--c-ok)}
.status--wait{background:var(--c-wait-bg);color:var(--c-wait)}
.status--none{background:var(--c-page);color:var(--c-text-2)}
.status--dot{height:auto;padding:0;gap:var(--s-1);background:none;font-size:12px}
.status--dot::before{content:"";width:6px;height:6px;border-radius:var(--r-pill);background:currentColor}

/* Счётчик на иконке: корзина в шапке и таб-баре. Родитель — position:relative. */
.counter{position:absolute;top:0;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--c-accent);color:var(--c-text);font:700 11px/18px var(--font);text-align:center;box-shadow:0 0 0 2px var(--c-card)}

/* Цена. Бонусов нет (Р6). Скидка — .badge--err рядом. */
.price{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-2)}
.price__now{font:var(--t-price-m);white-space:nowrap}
.price__old{font:400 14px/20px var(--font);color:var(--c-text-3);white-space:nowrap}
.price .badge{align-self:center}
.price--l .price__now{font:var(--t-price-l)}
.price--l .price__old{font-size:16px;line-height:24px}
.price--s .price__now{font:var(--t-price-s)}
.price--s .price__old{font-size:12px;line-height:16px}

/* Артикул с копированием. Копирует js/v3.js по data-copy. */
.sku{display:inline-flex;align-items:center;gap:2px;font:var(--t-mono);color:var(--c-text)}
.sku__code{white-space:nowrap}
.sku__label{margin-right:var(--s-1);font:var(--t-body);color:var(--c-text-2)}
.sku__copy{position:relative;width:28px;height:28px}
@media (pointer:coarse){.sku__copy::after{content:'';position:absolute;inset:-8px}}   /* зона касания 44 px */
.sku__copy .icon + .icon{display:none}
.sku__copy.is-copied{color:var(--c-ok)}
.sku__copy.is-copied .icon{display:none}
.sku__copy.is-copied .icon + .icon{display:block}
.sku__copy.is-copied::after{content:"Скопировано";position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);padding:var(--s-1) var(--s-2);border-radius:var(--r-badge);background:var(--c-text);color:var(--c-on-navy);font:600 12px/16px var(--font);white-space:nowrap;pointer-events:none}

/* Хлебные крошки. На мобильном — одна ссылка на родителя. */
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:400 13px/20px var(--font)}
.crumbs li{display:flex;align-items:center;gap:6px;color:var(--c-text-2)}
.crumbs li + li::before{content:"/";color:var(--c-disabled)}
@media (max-width:767px){
  .crumbs li{display:none}
  .crumbs li:nth-last-child(2){display:flex}
  .crumbs li:nth-last-child(2)::before{content:none}
  .crumbs li:nth-last-child(2) a::before{content:"← "}
  .crumbs ol{font-size:14px}
}

/* Пагинация. Мобильный: «Показать ещё» + «← 1 / 12 →» (Р8). */
.pager{display:flex;flex-direction:column;align-items:center;gap:var(--s-3);width:100%}
.pager__more{display:none}
.pager__list{display:flex;align-items:center;gap:var(--s-1)}
.pager__page{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 6px;border-radius:var(--r-control);color:var(--c-text);font:600 14px/20px var(--font)}
.pager__page:hover{background:var(--c-page);color:var(--c-text);text-decoration:none}
.pager__page[aria-current="page"]{background:var(--c-brand);color:var(--c-on-navy)}
.pager__gap{min-width:24px;text-align:center;color:var(--c-text-3)}
.pager__arrow{width:36px;height:36px;border-color:var(--c-line);background:var(--c-card);color:var(--c-text)}
.pager__info{display:none;font:600 14px/20px var(--font);color:var(--c-text-2)}
@media (max-width:767px){
  .pager__more{display:flex}
  .pager__page,.pager__gap{display:none}
  .pager__info{display:block;padding:0 var(--s-3)}
}

/* Чип: категории в поиске со счётчиком, быстрые фильтры. */
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 var(--s-3);border:1px solid var(--c-line);border-radius:var(--r-pill);background:var(--c-card);color:var(--c-text);font:600 13px/16px var(--font);white-space:nowrap;cursor:pointer}
.chip:hover{border-color:var(--c-brand);color:var(--c-text);text-decoration:none}
.chip__count{font-weight:400;color:var(--c-text-3)}
.chip--active,.chip--active:hover{border-color:var(--c-brand);background:var(--c-brand);color:var(--c-on-navy)}
.chip--active .chip__count{color:var(--c-on-navy)}   /* on-navy-2 на синем — 3.75:1, мало */
@media (max-width:767px){.chips--scroll{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);scrollbar-width:none}}

/* Плашка. Тона: info (по умолчанию), --ok, --warn, --err. --inline — строчная, внутри формы. */
.alert{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);padding:var(--s-4) var(--s-5);border-radius:var(--r-card);background:var(--c-tint);color:var(--c-text)}
.alert > .icon{color:var(--c-brand)}
.alert__body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:220px}
.alert__title{font:600 15px/20px var(--font)}
.alert__text{color:var(--c-text-2)}
.alert--ok{background:var(--c-ok-bg)}
.alert--ok > .icon{color:var(--c-ok)}
.alert--warn{background:var(--c-note-bg)}
.alert--warn > .icon{color:var(--c-wait)}
.alert--err{background:var(--c-err-bg)}
.alert--err > .icon{color:var(--c-err)}
.alert--inline{flex-wrap:nowrap;align-items:flex-start;gap:var(--s-2);padding:10px var(--s-3);border-radius:var(--r-control);font:400 13px/18px var(--font)}
.alert--inline .alert__body{min-width:0}
@media (max-width:767px){.alert:not(.alert--inline){align-items:flex-start;padding:var(--s-4)}}
.alert--inline .alert__title{font-size:13px;line-height:18px;font-weight:500}

/* Объявление над шапкой (Р16) — закрывается, js/v3.js запоминает закрытие для этого текста. */
.announce{background:var(--c-note-bg);font:500 13px/18px var(--font)}
.announce__row{position:relative;display:flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:40px;padding-right:var(--s-10);text-align:center}
.announce__row > .icon{color:var(--c-wait)}
.announce__close{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%)}

/* Пустое состояние: пустая корзина, «ничего не найдено», 404. */
.empty{display:flex;flex-direction:column;align-items:center;gap:var(--s-4);padding:var(--s-10) var(--s-8);text-align:center}
.empty__icon{display:flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:var(--r-pill);background:var(--c-tint);color:var(--c-brand)}
.empty--ok .empty__icon{background:var(--c-ok-bg);color:var(--c-ok)}
.empty__text{max-width:440px;color:var(--c-text-2)}
.empty__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-3);margin-top:var(--s-2)}
@media (max-width:767px){.empty{padding:var(--s-8) var(--s-4)}.empty__actions{flex-direction:column;align-self:stretch}}

/* Загрузка файла: зона выбора и загруженные файлы. */
.upload{display:flex;flex-direction:column;align-items:center;gap:var(--s-3);padding:var(--s-6);border:1.5px dashed var(--c-field);border-radius:var(--r-card);background:var(--c-page);text-align:center;color:var(--c-text-2)}
.upload > .icon{color:var(--c-brand)}
.upload__title{font:600 15px/20px var(--font);color:var(--c-text)}
.upload.is-over{border-color:var(--c-brand);background:var(--c-tint)}
.upload-files{display:flex;flex-direction:column;gap:var(--s-2)}
.upload-file{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2);border:1px solid var(--c-line);border-radius:var(--r-control);background:var(--c-card)}
.upload-file__thumb{width:56px;height:56px;flex-shrink:0;border-radius:calc(var(--r-control) - 2px);background:var(--c-page);object-fit:cover}
.upload-file__body{display:flex;flex-direction:column;flex:1;min-width:0}
.upload-file__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.upload-file__size{font:var(--t-small);color:var(--c-text-3)}

/* Таблица. На мобильном --stack превращает строки в карточки «подпись — значение»
   (подпись из data-label ячейки). */
.table-wrap{overflow-x:auto;border:1px solid var(--c-line);border-radius:var(--r-card)}
.table{width:100%;border-collapse:collapse;font:var(--t-body)}
.table th{padding:10px var(--s-4);border-bottom:1px solid var(--c-line);background:var(--c-page);color:var(--c-text-2);font:600 12px/16px var(--font);text-align:left;white-space:nowrap}
.table td{padding:var(--s-3) var(--s-4);vertical-align:top}
.table tbody tr + tr{border-top:1px solid var(--c-line)}
.table tbody tr:hover{background:var(--c-page)}
.table .num{text-align:right;white-space:nowrap}
.table .nowrap{white-space:nowrap}
.table .mono{font:400 13px/20px var(--font-mono)}
@media (max-width:767px){
  .table-wrap--stack{border:0;overflow:visible}
  .table--stack thead{display:none}
  .table--stack,.table--stack tbody,.table--stack tr,.table--stack td{display:block}
  .table--stack tbody{display:flex;flex-direction:column;gap:var(--s-2)}
  .table--stack tbody tr + tr{border-top:0}
  .table--stack tr{padding:var(--s-3) var(--s-4);border:1px solid var(--c-line);border-radius:var(--r-card);background:var(--c-card)}
  .table--stack tbody tr:hover{background:var(--c-card)}
  .table--stack td{display:flex;justify-content:space-between;gap:var(--s-4);padding:var(--s-1) 0;text-align:right}
  .table--stack td::before{content:attr(data-label);color:var(--c-text-2);font:400 14px/20px var(--font);text-align:left}
  .table--stack .num{text-align:right}
}

/* Скелетон — заглушка на время подгрузки. */
.skeleton{display:block;height:16px;border-radius:var(--r-badge);background:linear-gradient(90deg,var(--c-page) 25%,var(--c-line) 50%,var(--c-page) 75%) 0 0/200% 100%;animation:skeleton 1.4s linear infinite}
.skeleton--title{height:24px;width:60%}
.skeleton--block{height:120px;border-radius:var(--r-control)}
@keyframes skeleton{to{background-position:-200% 0}}

/* Панель — белая карточка-секция страницы. Внутри — вертикальный поток с шагом 16. */
.panel{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-6);border-radius:var(--r-card);background:var(--c-card);box-shadow:var(--shadow-card)}
.panel__intro{display:flex;flex-direction:column;gap:var(--s-1)}
.panel__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-2) var(--s-4)}
.panel__sub{color:var(--c-text-2)}
.panel--tint{background:var(--c-tint);box-shadow:none}
.panel--ok{background:var(--c-ok-bg);box-shadow:none}
@media (max-width:767px){.panel{padding:var(--s-4)}}

/* Поток панелей страницы: 16 десктоп / 12 мобильный. */
.stack{display:flex;flex-direction:column;gap:var(--s-4)}
@media (max-width:767px){.stack{gap:var(--s-3)}}

/* ============================================================ П3. Блоки каталога */

/* Фото товара: квадрат с фото или заглушкой «Нет фото». Скидка — бейдж в углу. */
.photo{position:relative;display:grid;place-items:center;aspect-ratio:1/1;overflow:hidden;border-radius:var(--r-control);background:var(--c-page);color:var(--c-text-3)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--c-card)}
.photo__empty{display:flex;flex-direction:column;align-items:center;gap:var(--s-1);font:var(--t-small)}
.photo__badge{position:absolute;left:6px;top:6px}
.photo__zoom{position:absolute;right:6px;bottom:6px}
/* Фото крупно: оригинал в натуральный размер, но не больше окна браузера (окно — по фото). */
.modal.modal--photo{width:fit-content;max-width:calc(100vw - 2 * var(--s-4));max-height:calc(100vh - 2 * var(--s-4))}
.modal.modal--photo .modal__body{align-items:center;gap:var(--s-2);padding:0 var(--s-4) var(--s-4)}
.photo-zoom__stage{position:relative;display:flex;justify-content:center;min-width:0}
.photo-zoom__img{display:block;width:auto;height:auto;max-width:calc(100vw - 4 * var(--s-4));max-height:calc(100vh - 2 * var(--s-4) - 120px);object-fit:contain}
.photo-zoom__nav{position:absolute;top:50%;transform:translateY(-50%);background:var(--c-card)}
.photo-zoom__nav--prev{left:var(--s-2)}
.photo-zoom__nav--next{right:var(--s-2)}
.photo-zoom__count{margin:0;font:var(--t-small);color:var(--c-text-3)}
.gallery__slide .photo img{cursor:zoom-in}
@media (max-width:767px){.modal.modal--photo{width:100%;max-width:100%}.photo-zoom__img{max-width:100%;max-height:calc(88vh - 120px)}}

/* Свойства «подпись — значение»: в карточке-строке и в характеристиках товара. */
.props{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--s-1) var(--s-3);font:400 13px/20px var(--font)}
.props dt{color:var(--c-text-3)}
.props dd{margin:0;min-width:0}
.props .sku{font-size:14px;margin:-4px 0}

/* Степпер количества. Кнопки неактивны на 1 и на остатке (js/v3.js). */
.stepper{display:inline-flex;align-items:stretch;flex-shrink:0;height:var(--h-control);border:1px solid var(--c-field);border-radius:var(--r-control);background:var(--c-card);overflow:hidden}
.stepper__btn{display:flex;align-items:center;justify-content:center;width:var(--h-control);padding:0;border:0;background:transparent;color:var(--c-brand);cursor:pointer}
.stepper__btn:hover{background:var(--c-page)}
.stepper__btn:disabled{color:var(--c-disabled);background:transparent;cursor:not-allowed}
.stepper__input{width:48px;padding:0;border:0;border-left:1px solid var(--c-line);border-right:1px solid var(--c-line);background:transparent;text-align:center;font:600 16px/24px var(--font);-moz-appearance:textfield}
.stepper__input::-webkit-outer-spin-button,.stepper__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper__input:focus{outline:none;background:var(--c-tint)}
.stepper__input:focus-visible{outline:2px solid var(--c-brand);outline-offset:-2px}
.stepper--m{height:var(--h-control-m)}
.stepper--m .stepper__btn{width:34px}
.stepper--m .stepper__input{width:36px;font-size:15px;line-height:20px}
.stepper-note{color:var(--c-text-2)}
.stepper-note b{color:var(--c-ok);font-weight:600}

/* Наличие по складам: статус + строки складов + срок поставки. «нет» — серым, не красным. */
.stock{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2)}
.stock__rows{display:grid;grid-template-columns:auto auto;gap:var(--s-1) var(--s-3);align-items:center;font:var(--t-body)}
.stock__city{display:flex;align-items:center;gap:6px;color:var(--c-text-2)}
.stock__city .icon{color:var(--c-text-3)}
.stock__qty{font-weight:600;color:var(--c-ok);white-space:nowrap}
.stock__qty--none{font-weight:400;color:var(--c-text-3)}
.stock__lead{display:flex;align-items:center;gap:6px;font:400 13px/18px var(--font);color:var(--c-text-2)}

/* Покупка в карточке: степпер и кнопка (или «В корзине», или «Сообщить о поступлении»). */
.buy{display:flex;align-items:center;gap:var(--s-2)}
.buy > .button{flex:1;min-width:0}

/* Карточка товара — один блок, четыре вида: --row (список), --tile (сетка), --mini (карусель),
   --cart (строка корзины). Данные одни и те же (templates/v3/partials/catalog.php). */
.product-card{display:grid;gap:var(--s-4) var(--s-6);padding:var(--s-4);border-radius:var(--r-card);background:var(--c-card);box-shadow:var(--shadow-card)}
.product-card__photo{grid-area:photo}
.product-card__info{grid-area:info;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.product-card__name{font:700 17px/24px var(--font)}
.product-card__badges{display:flex;flex-wrap:wrap;gap:6px}
.product-card__stock{grid-area:stock;min-width:0}
.product-card__buy{grid-area:buy;display:flex;flex-direction:column;gap:var(--s-3);min-width:0}
.product-card__buy .buy{margin-top:auto}
.product-card__meta{font:var(--t-small);color:var(--c-text-3)}
.product-card__desc{color:var(--c-text-2);font:400 13px/18px var(--font)}
.product-card__meta .mono{font:400 12px/16px var(--font-mono)}

.product-card--row{grid-template-columns:140px minmax(0,1fr) 190px 240px;grid-template-areas:"photo info stock buy"}
.product-card--row .product-card__stock{padding-left:var(--s-6);border-left:1px solid var(--c-line)}
.product-card--hit{box-shadow:0 0 0 1.5px var(--c-brand)}
@media (max-width:1199px){
  .product-card--row{grid-template-columns:120px minmax(0,1fr) 240px;grid-template-areas:"photo info info" "photo stock buy"}
  .product-card--row .product-card__stock{padding-left:0;border-left:0}
}
@media (max-width:767px){
  .product-card{gap:var(--s-3)}
  .product-card--row{grid-template-columns:112px minmax(0,1fr);grid-template-areas:"photo info" "stock stock" "buy buy"}
  .product-card__name{font-size:16px;line-height:22px}
  .product-card--row .props{grid-template-columns:minmax(0,1fr);gap:2px}
  .product-card--row .props dt:not(.props__keep){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .product-card--row .props .props__keep{margin-top:var(--s-1)}
}

.product-card--tile{grid-template-rows:auto 1fr auto;grid-template-areas:"photo" "info" "buy";gap:var(--s-3)}
.product-card--tile .product-card__name{font-size:15px;line-height:20px}
.product-card--tile .product-card__name,.product-card--mini .product-card__name{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.product-card--tile .product-card__info{gap:6px}

.product-card--mini{grid-template-rows:auto 1fr auto;grid-template-areas:"photo" "info" "buy";gap:var(--s-2);width:184px;flex-shrink:0;padding:var(--s-3);box-shadow:none;border:1px solid var(--c-line)}
.product-card--mini .product-card__name{font:600 13px/18px var(--font);-webkit-line-clamp:2}
.product-card--mini .product-card__info{gap:var(--s-1)}
.product-card--mini .product-card__buy{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--s-2)}

.product-card--cart{grid-template-columns:88px minmax(0,1fr) auto 140px auto;grid-template-areas:"photo info qty sum remove" "photo warn warn warn remove";grid-template-rows:auto 1fr;align-items:start}
.product-card__warn{grid-area:warn;align-self:start}
.product-card__warn .alert{display:inline-flex}
.product-card--cart .product-card__name{font-size:15px;line-height:20px}
.product-card__qty{grid-area:qty;display:flex;flex-direction:column;align-items:center;gap:var(--s-1)}
.product-card__sum{grid-area:sum;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.product-card__each{font:var(--t-small);color:var(--c-text-3);white-space:nowrap}
.product-card__remove{grid-area:remove}
@media (max-width:767px){
  /* Количество — на две первые колонки: в 72 px степпер не влезал, и сумма перекрывала «+». */
  .product-card--cart{grid-template-columns:72px minmax(0,1fr) auto;grid-template-areas:"photo info remove" "warn warn warn" "qty qty sum";grid-template-rows:auto;align-items:center}
  .product-card__warn .alert{display:flex}
  .product-card__qty{align-items:flex-start}
}

/* Списки карточек */
.product-list{display:flex;flex-direction:column;gap:var(--s-3)}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s-3)}
@media (max-width:767px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}.product-grid .product-card{padding:var(--s-3)}}
.carousel{display:flex;gap:var(--s-3);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:var(--s-1)}
.carousel > *{scroll-snap-align:start}

/* Панель над списком: «Найдено N», сортировка, вид. На мобильном сортировка — списком. */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3) var(--s-6)}
.toolbar__found{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-4)}
.toolbar__found h2{font:var(--t-h3)}
.toolbar__fit{color:var(--c-brand)}
.toolbar__controls{display:flex;align-items:center;gap:var(--s-3)}
.toolbar__label{color:var(--c-text-2)}
.toolbar__select{display:none}
@media (max-width:767px){
  .toolbar__sort,.toolbar__label{display:none}
  .toolbar__select{display:flex;flex:1}
  .toolbar__controls{flex:1 1 100%}
}

/* Блок покупки на странице товара; на мобильном внизу — липкая панель .buy-bar. */
.buy-box{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s-4)}
.buy-box__price{grid-column:1/-1}
.buy-box__part{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-4);border:1px solid var(--c-line);border-radius:var(--r-card)}
.buy-box__part{margin:0;min-width:0}
.buy-box__part legend{float:left;width:100%;margin-bottom:var(--s-2);padding:0;font:600 14px/20px var(--font)}
.buy-box__action{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-4)}
.buy-box__action > .button{flex:1 1 240px}
@media (max-width:767px){.buy-box{grid-template-columns:1fr}}

.buy-bar{display:none}
@media (max-width:767px){
  .buy-bar{position:fixed;left:0;right:0;bottom:calc(var(--h-tabbar) + env(safe-area-inset-bottom));z-index:var(--z-sticky);display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-4);background:var(--c-card);border-top:1px solid var(--c-line);box-shadow:var(--shadow-raised)}
  .buy-bar__info{display:flex;flex-direction:column;align-items:flex-start;flex:1;min-width:0}
  .buy-bar .button{flex-shrink:0}
  .v3:has(.buy-bar){padding-bottom:calc(var(--h-tabbar) + 64px + env(safe-area-inset-bottom))}
}

/* Подбор по автомобилю: строкой от 1200, стопкой ниже. Выбранный — .vehicle-chosen. */
.vehicle-picker{display:grid;grid-template-columns:minmax(240px,1.2fr) repeat(3,minmax(0,1fr)) auto;grid-template-areas:"intro brand model frame submit";gap:var(--s-3) var(--s-4);align-items:end}
.vehicle-picker__intro{grid-area:intro;display:flex;gap:var(--s-3);align-self:center}
.vehicle-picker__intro > .icon{color:var(--c-brand)}
.vehicle-picker__title{font:var(--t-h3)}
.vehicle-picker__sub{color:var(--c-text-2)}
.vehicle-picker__brand{grid-area:brand}
.vehicle-picker__model{grid-area:model}
.vehicle-picker__frame{grid-area:frame}
.vehicle-picker__submit{grid-area:submit}
div.vehicle-picker__submit{display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:flex-end}
div.vehicle-picker__submit:empty{display:none}
@media (max-width:1199px){
  .vehicle-picker{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"intro intro intro" "brand model frame" ". . submit"}
}
@media (max-width:767px){
  .vehicle-picker{grid-template-columns:1fr;grid-template-areas:"intro" "brand" "model" "frame" "submit"}
}
.modal .vehicle-picker{grid-template-columns:1fr;grid-template-areas:"brand" "model" "frame" "submit"}
.modal .vehicle-picker__intro{display:none}
.vehicle-chosen{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-8);padding:var(--s-3) var(--s-4);border-radius:var(--r-card);background:var(--c-tint)}
.vehicle-chosen__title{display:flex;align-items:center;gap:var(--s-3);font-weight:700;color:var(--c-ok)}
.vehicle-chosen__title small{display:block;font:var(--t-small);color:var(--c-text-2)}
.vehicle-chosen__item{display:flex;flex-direction:column}
.vehicle-chosen__item small{font:var(--t-small);color:var(--c-text-3)}
.vehicle-chosen__actions{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-left:auto}
@media (max-width:767px){.vehicle-chosen{gap:var(--s-2) var(--s-4)}.vehicle-chosen__title{flex-basis:100%}}

/* Фильтры: колонка на десктопе, в шторке на мобильном — та же разметка. */
.filters{display:flex;flex-direction:column;gap:var(--s-5)}
.filters__head{display:flex;align-items:center;justify-content:space-between}
.filters__head h2{font:var(--t-h3)}
.filters__link{display:inline-flex;align-items:center;gap:var(--s-1);align-self:flex-start;padding:0;border:0;background:none;color:var(--c-brand);font:600 13px/20px var(--font);cursor:pointer}
.filters__link[aria-expanded="true"] .icon{transform:rotate(180deg)}
.filters__group{display:flex;flex-direction:column;gap:var(--s-1);min-width:0;margin:0;padding:0;border:0}
.filters__group legend{margin-bottom:var(--s-2);padding:0;font:700 15px/20px var(--font)}
.filters__group .check{min-height:30px;font-size:14px}
.filters__group .field{margin-bottom:var(--s-2)}
.filters__apply{display:none}
@media (max-width:767px){.filters__apply{display:flex}}
/* Характеристика — сворачиваемая группа; число в заголовке — сколько выбрано. */
.filters__fold{border-top:1px solid var(--c-line);padding-top:var(--s-4);margin-top:calc(-1 * var(--s-1))}
.filters__summary{display:flex;align-items:center;gap:var(--s-2);font:700 15px/20px var(--font);cursor:pointer;list-style:none}
.filters__summary::-webkit-details-marker{display:none}
.filters__summary .icon{margin-left:auto;color:var(--c-text-3);transition:transform .15s}
.filters__fold[open] > .filters__summary{margin-bottom:var(--s-3)}
.filters__fold[open] > .filters__summary .icon{transform:rotate(180deg)}
.filters__summary:focus-visible{outline:2px solid var(--c-brand);outline-offset:2px;border-radius:var(--r-badge)}
.filters__picked{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--c-brand);color:var(--c-on-navy);font:600 12px/1 var(--font)}
/* Кнопки-переключатели для коротких списков значений: под капотом — галочка. */
.chip-check{position:relative;display:inline-flex}
.chip-check__input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip-check__input:checked + .chip{border-color:var(--c-brand);background:var(--c-brand);color:var(--c-on-navy)}
.chip-check__input:checked + .chip .chip__count{color:var(--c-on-navy)}
.chip-check__input:focus-visible + .chip{outline:2px solid var(--c-brand);outline-offset:2px}
.chip-check:hover .chip{border-color:var(--c-brand)}

/* Диапазон цены: два поля и двойной ползунок. */
.range{display:flex;flex-direction:column;gap:var(--s-3)}
.range__fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.range__prefix{position:absolute;left:var(--s-3);top:50%;transform:translateY(-50%);font:var(--t-small);color:var(--c-text-3);pointer-events:none}
.range__fields .field__input{padding-left:32px}
.range__track{position:relative;height:20px}
.range__track::before{content:"";position:absolute;left:0;right:0;top:9px;height:3px;border-radius:var(--r-pill);background:var(--c-line)}
.range__fill{position:absolute;top:9px;height:3px;border-radius:var(--r-pill);background:var(--c-brand)}
.range__input{position:absolute;inset:0;width:100%;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.range__input::-webkit-slider-runnable-track{background:none}
.range__input::-webkit-slider-thumb{width:18px;height:18px;border:2px solid var(--c-brand);border-radius:var(--r-pill);background:var(--c-card);pointer-events:auto;cursor:pointer;-webkit-appearance:none}
.range__input::-moz-range-thumb{width:14px;height:14px;border:2px solid var(--c-brand);border-radius:var(--r-pill);background:var(--c-card);pointer-events:auto;cursor:pointer}
.range__input:focus-visible::-webkit-slider-thumb{box-shadow:var(--ring)}

/* Сетка категорий: карточки на десктопе, список со стрелками на мобильном. */
.category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.category-card{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:var(--s-1) var(--s-4);align-content:start;padding:var(--s-5);border-radius:var(--r-card);background:var(--c-card);box-shadow:var(--shadow-card)}
.category-card__icon{grid-row:1/3;color:var(--c-brand)}
.category-card__title{font:var(--t-h3);color:var(--c-text)}
.category-card__title:hover{color:var(--c-brand)}
.category-card__all{font:600 13px/24px var(--font)}
.category-card__subs{grid-column:2/-1;display:flex;flex-direction:column;gap:2px}
.category-card__chevron{display:none}
@media (max-width:1199px){.category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){
  .category-grid{grid-template-columns:1fr;gap:0;overflow:hidden;border-radius:var(--r-card);background:var(--c-card);box-shadow:var(--shadow-card)}
  .category-card{grid-template-columns:32px minmax(0,1fr) auto;align-items:center;padding:var(--s-3) var(--s-4);border-radius:0;box-shadow:none}
  .category-card + .category-card{border-top:1px solid var(--c-line)}
  .category-card__icon{grid-row:auto;width:32px;height:32px}
  .category-card__title{font:500 16px/24px var(--font)}
  .category-card__title::after{content:"";position:absolute;inset:0}
  .category-card__subs,.category-card__all{display:none}
  .category-card__chevron{display:block;color:var(--c-brand)}
}

/* Галерея: большое фото + миниатюры; на мобильном — лента со snap и точками. */
.gallery{display:flex;flex-direction:column;gap:var(--s-3);min-width:0}
.gallery__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--r-control)}
.gallery__track::-webkit-scrollbar{display:none}
.gallery__slide{flex:0 0 100%;scroll-snap-align:center}
.gallery__slide .photo{aspect-ratio:4/3}
.gallery__thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-2)}
.gallery__thumb{padding:0;border:1.5px solid var(--c-line);border-radius:var(--r-control);background:none;cursor:pointer;overflow:hidden}
.gallery__thumb[aria-current="true"]{border-color:var(--c-brand)}
.gallery__thumb .photo{border-radius:0}
.gallery__dots{display:none;justify-content:center;gap:6px}
.gallery__dot{width:6px;height:6px;border-radius:var(--r-pill);background:var(--c-line)}
.gallery__dot[aria-current="true"]{width:16px;background:var(--c-brand)}
@media (max-width:767px){.gallery__thumbs{display:none}.gallery__dots{display:flex}}

/* OEM-номера: список кодов с копированием. */
.oem{display:flex;flex-direction:column;border:1px solid var(--c-line);border-radius:var(--r-control)}
.oem__item{padding:var(--s-1) var(--s-1) var(--s-1) var(--s-4)}
.oem__item + .oem__item{border-top:1px solid var(--c-line)}
.oem .sku{display:flex;justify-content:space-between;font-size:15px;line-height:24px}

/* Характеристики: «название — значение» строками с линией. */
.specs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);font:var(--t-body)}
.specs dt,.specs dd{margin:0;padding:var(--s-2) 0;border-bottom:1px solid var(--c-line)}
.specs dt{padding-right:var(--s-4);color:var(--c-text-2)}

/* ============================================================ П4. Блоки заказа и окна */

/* Карточка выбора: способ получения, ТК, оплата, пункт выдачи. Внутри — радио. */
.choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s-3)}
.choices--compact{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--s-2)}
.choices--compact .choice{padding:var(--s-3) var(--s-4)}
.choice{position:relative;display:flex;align-items:center;gap:14px;padding:var(--s-4);border:1.5px solid var(--c-line);border-radius:var(--r-card);background:var(--c-card);cursor:pointer;transition:border-color var(--dur-fast),background-color var(--dur-fast)}
.choice:hover{border-color:var(--c-field)}
.choice:has(.check__input:checked){border-color:var(--c-brand);background:var(--c-tint)}
.choice:has(.check__input:focus-visible){outline:2px solid var(--c-brand);outline-offset:2px}
.choice .check__input:focus-visible + .check__box{outline:0}
.choice > .icon{color:var(--c-brand)}
.choice .check__box{border-radius:var(--r-pill)}
.choice .check__input:checked + .check__box{border-color:var(--c-brand);background:var(--c-card)}
.choice .check__input:checked + .check__box::after{content:"";width:10px;height:10px;border-radius:var(--r-pill);background:var(--c-brand)}
.choice__body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.choice__title{font:600 15px/20px var(--font)}
.choice__sub{font:400 13px/18px var(--font);color:var(--c-text-2)}
.choice--disabled{cursor:not-allowed;background:var(--c-page);border-color:var(--c-line)}
.choice--disabled .choice__title,.choice--disabled > .icon{color:var(--c-disabled)}
.choice--disabled:hover{border-color:var(--c-line)}
@media (max-width:767px){.choices{grid-template-columns:1fr}}

/* Пункт выдачи: город, адрес, часы, телефон, «Показать на карте». */
.pickup-point{display:flex;gap:var(--s-3)}
.pickup-point > .icon{color:var(--c-brand)}
.pickup-point__body{display:flex;flex-direction:column;gap:2px}
.pickup-point__city{font:700 16px/24px var(--font)}
.pickup-point__hours{font:var(--t-small);color:var(--c-text-2)}
.pickup-point__note{margin-top:var(--s-1);font:600 13px/18px var(--font);color:var(--c-wait)}
.pickup-point .link-more{margin-top:var(--s-1)}

/* Справка о доставке: факты и список ТК. */
.delivery-note{display:flex;flex-direction:column;gap:var(--s-3)}
.delivery-note__facts{display:flex;flex-direction:column;gap:var(--s-2)}
.delivery-note__facts li{display:flex;gap:var(--s-2)}
.delivery-note__facts .icon{color:var(--c-brand)}
.delivery-note__lead{color:var(--c-text-2)}
.chip--static,.chip--static:hover{border-color:var(--c-line);cursor:default}

/* Сводка заказа — одна на корзину, оформление и заказ. «К оплате» = товары (Р5). */
.order-summary{display:flex;flex-direction:column;gap:var(--s-4)}
.order-summary__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3)}
.order-summary__rows{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-2) var(--s-4)}
.order-summary__rows dt{color:var(--c-text-2)}
.order-summary__rows dd{margin:0;text-align:right;font-weight:600;white-space:nowrap}
.order-summary__rows .is-free{color:var(--c-ok)}
.order-summary__rows .is-ref{font-weight:400;color:var(--c-text-2)}
.order-summary__total{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);padding-top:var(--s-4);border-top:1px solid var(--c-line)}
.order-summary__total span{font:var(--t-h3)}
.order-summary__total b{font:var(--t-price-l)}
.order-summary__note{font:var(--t-small);color:var(--c-text-2)}
.order-summary__agree{font-size:14px}
.order-summary__back{align-self:center}
.sticky{position:sticky;top:var(--s-4)}
@media (max-width:1199px){.sticky{position:static}}

/* Чек-лист готовности в оформлении. */
.checklist{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-4);border-radius:var(--r-card);background:var(--c-page)}
.checklist li{display:flex;align-items:center;gap:10px;color:var(--c-text-2)}
.checklist li::before{content:"";width:18px;height:18px;flex-shrink:0;border:1.5px solid var(--c-field);border-radius:var(--r-pill)}
.checklist .is-done{color:var(--c-text)}
.checklist .is-done::before{border-color:var(--c-ok);background:var(--c-ok);box-shadow:inset 0 0 0 4px var(--c-page)}

/* Строка заказа: миниатюра, название, артикул, «2 × 1 250 ₽», сумма. */
.order-lines{display:flex;flex-direction:column}
.order-line{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:var(--s-3);align-items:center;padding:var(--s-3) 0}
.order-line + .order-line{border-top:1px solid var(--c-line)}
.order-line .photo{width:56px}
.order-line__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.order-line__name{font:600 14px/20px var(--font);color:var(--c-text)}
.order-line__meta{display:flex;flex-wrap:wrap;gap:0 var(--s-2);font:var(--t-small);color:var(--c-text-3)}
.order-line__sum{font:var(--t-price-s);white-space:nowrap}

/* Секция формы: «1. Данные покупателя». Сетка полей 2 колонки, на мобильном — одна. */
.form-section__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-2) var(--s-4)}
.form-section__head h2{font:var(--t-h3)}
.form-section__lead{display:flex;gap:var(--s-4);align-items:flex-start;color:var(--c-text-2)}
.form-section__lead > .icon{color:var(--c-brand)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.form-grid > .is-wide{grid-column:1/-1}
@media (max-width:767px){.form-grid{grid-template-columns:1fr}}

/* Пароль с кнопкой «показать». */
.field--password .field__input{padding-right:var(--s-10)}

/* Вход, регистрация, восстановление. Вкладки — .segmented, панели переключает js/v3.js. */
.auth{display:flex;flex-direction:column;gap:var(--s-5);max-width:480px}
.auth__form{display:flex;flex-direction:column;gap:var(--s-4)}
.auth__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2)}
.auth__error{padding:var(--s-3) var(--s-4);border-radius:var(--r-control);background:var(--c-err-bg);color:var(--c-err);font:var(--t-small)}
.auth__error[hidden]{display:none}
.auth__back{display:inline-flex;align-items:center;gap:var(--s-1);font-weight:600}

/* Окно: по центру на десктопе, шторкой снизу на мобильном. Нативный <dialog>. */
.modal{width:min(480px,calc(100% - 2 * var(--s-4)));max-height:calc(100% - 2 * var(--s-8));padding:0;border:0;border-radius:var(--r-card);background:var(--c-card);color:var(--c-text);box-shadow:var(--shadow-raised)}
.modal--l{width:min(640px,calc(100% - 2 * var(--s-4)))}
.modal::backdrop{background:var(--c-overlay)}
.modal:focus-visible{outline:none}
.modal:not([open]){display:none}
/* Браузер без <dialog> (iOS до 15.4): окно открывает js/v3.js атрибутом open — ставим его поверх страницы. */
.no-dialog .modal[open]{position:fixed;inset:0;z-index:var(--z-toast);margin:auto;height:fit-content}
.modal[open]{display:flex;flex-direction:column}
.modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-4) var(--s-4) var(--s-2) var(--s-6)}
.modal__head h2{font:var(--t-h3)}
.modal__body{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-2) var(--s-6) var(--s-6);overflow-y:auto}
.modal__foot{display:flex;gap:var(--s-3);padding:var(--s-4) var(--s-6);border-top:1px solid var(--c-line)}
.modal__foot > .button{flex:1}
.modal__handle{display:none}
@media (max-width:767px){
  .modal,.modal--l{width:100%;max-width:100%;max-height:88%;margin:auto 0 0;border-radius:var(--r-card) var(--r-card) 0 0}
  .modal__handle{display:block;width:40px;height:4px;margin:var(--s-2) auto 0;border-radius:var(--r-pill);background:var(--c-line)}
  .modal__head{padding:var(--s-2) var(--s-2) var(--s-2) var(--s-4)}
  .modal__body{padding:var(--s-2) var(--s-4) var(--s-4)}
  .modal__foot{padding:var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:no-preference){
  .modal[open]{animation:modal-in var(--dur) ease-out}
  @media (max-width:767px){.modal[open]{animation-name:sheet-in}}
}
@keyframes modal-in{from{opacity:0;transform:translateY(8px)}}
@keyframes sheet-in{from{transform:translateY(100%)}}

/* Тост: «Добавлено в корзину», «Скопировано». Показывает v3.toast() из js/v3.js. */
.toast{position:fixed;left:50%;bottom:var(--s-6);z-index:var(--z-toast);display:flex;align-items:center;gap:var(--s-2);max-width:calc(100% - 2 * var(--s-4));padding:var(--s-3) var(--s-4);border-radius:var(--r-control);background:var(--c-navy);color:var(--c-on-navy);font:500 14px/20px var(--font);box-shadow:var(--shadow-raised);transform:translateX(-50%);transition:opacity var(--dur),transform var(--dur)}
.toast a{color:var(--c-on-navy);font-weight:700;text-decoration:underline}
.toast.is-hidden{opacity:0;transform:translate(-50%,8px);pointer-events:none}
@media (max-width:767px){.toast{bottom:calc(var(--h-tabbar) + var(--s-3) + env(safe-area-inset-bottom))}
  .v3:has(.buy-bar) .toast{bottom:calc(var(--h-tabbar) + 64px + var(--s-3) + env(safe-area-inset-bottom))}}   /* над панелью «Купить» */

/* ============================================================ П6. Раскладка страниц и блоки страниц */

/* Заголовок страницы: крошки, h1 со счётчиком, подзаголовок. */
.page-head{display:flex;flex-direction:column;gap:var(--s-2)}
.page-head__title{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-4)}
.page-head__count{color:var(--c-text-2);font:var(--t-body-l)}
.page-head__lead{color:var(--c-text-2);font:var(--t-body-l)}

/* Колонки страницы: боковая слева 280 (фильтры, меню раздела) или справа 380 (сводка).
   На планшете и мобильном — одна колонка; левая боковая прячется, если у неё есть шторка. */
.cols{display:grid;gap:var(--s-4);align-items:start}
.cols--left{grid-template-columns:280px minmax(0,1fr)}
.cols--right{grid-template-columns:minmax(0,1fr) 380px}
.cols--half{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols__aside{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}
@media (max-width:1199px){
  .cols--left,.cols--right,.cols--half{grid-template-columns:minmax(0,1fr)}
  .cols__aside--sheet{display:none}
}

/* Кнопки «Указать автомобиль» и «Фильтры · 3» — вместо боковой колонки на узком экране. */
.listing-actions{display:none}
@media (max-width:1199px){.listing-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}}
.only-wide{display:block}
@media (max-width:1199px){.only-wide{display:none}}

/* Полоса доверия на главной — только факты с прода (Р13). */
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4)}
.trust__item{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-4);border-radius:var(--r-card);background:var(--c-card);box-shadow:var(--shadow-card)}
.trust__item > .icon{color:var(--c-brand)}
.trust__item b{display:block;font:600 15px/20px var(--font)}
.trust__item span{color:var(--c-text-2);font:var(--t-small)}
@media (max-width:1199px){.trust{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.trust{gap:var(--s-2)}.trust__item{flex-direction:column;gap:var(--s-2);padding:var(--s-3)}}

/* Верх страницы товара: галерея слева, заголовок и покупка справа. */
.product-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--s-6);align-items:start}
.product-top__info{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}
.product-top__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);color:var(--c-text-2)}
.product-top__contacts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3)}
.product-top__contacts > .messengers{flex-basis:100%}
/* Мессенджеры: подпись и ряд коротких кнопок (v3_messengers). */
.messengers{display:flex;flex-direction:column;gap:var(--s-2)}
.messengers__caption{font:var(--t-small);color:var(--c-text-2)}
.messengers__row{display:flex;flex-wrap:wrap;gap:var(--s-2)}
/* Телефон: три кнопки в ряд не помещаются (360 px) — MAX, ведущая, во всю ширину, Telegram и WhatsApp пополам. */
@media (max-width:767px){
  .messengers__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .messengers__row .button{min-width:0;padding:0 var(--s-3)}
  .messengers__row .button--max{grid-column:1/-1}
}
.product-top__brand{display:inline-flex;align-items:center;gap:var(--s-2);font-weight:600;color:var(--c-text)}
.product-top__brand img{height:20px;width:auto}
.product-top__desc{color:var(--c-text-2)}
/* Применимость: модель с русским названием, рамы — моноширинным списком, хвост свёрнут. */
.fitment td{vertical-align:top}
.fitment__ru{display:block;font:var(--t-small);color:var(--c-text-2)}
.fitment__frames{line-height:22px;word-break:break-word}
.fitment__more{display:inline}
.fitment__more summary{display:inline;color:var(--c-brand);font:600 13px/20px var(--font);cursor:pointer;list-style:none}
.fitment__more summary::-webkit-details-marker{display:none}
.fitment__more[open] summary{display:none}
/* На телефоне — карточка модели: название с русским, ниже подпись и рамы во всю ширину. */
@media (max-width:767px){
  .fitment td{display:block;text-align:left}
  .fitment td::before{display:block;margin-bottom:2px;font:var(--t-small)}
  .fitment td[data-label="Модель"]::before{content:none}
}
/* Группа полей формы без рамки браузера (оформление: блок ТК, реквизиты организации). */
.form-fieldset{min-width:0;margin:0;padding:0;border:0}
.form-fieldset[hidden]{display:none}

/* Страница товара под первым экраном: две независимые колонки — блоки разной высоты не оставляют
   пустот. Справа — доставка и OEM. На телефоне колонки
   растворяются (display:contents) и блоки встают по порядку важности: product-cols__item--N. */
.product-cols{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:var(--s-4);align-items:start}
.product-cols__main,.product-cols__side{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}
@media (max-width:1199px){.product-cols{grid-template-columns:minmax(0,1fr) 340px}}
@media (max-width:991px){
  .product-cols{display:flex;flex-direction:column}
  .product-cols__main,.product-cols__side{display:contents}
  .product-cols__item--1{order:1}.product-cols__item--2{order:2}.product-cols__item--3{order:3}.product-cols__item--4{order:4}
  .product-cols__item--5{order:5}.product-cols__item--6{order:6}.product-cols__item--7{order:7}
}
.product-cols__side .oem{max-height:420px;overflow:auto}
/* Расчёт доставки: два лучших варианта карточками, остальные — в раскрывающейся таблице. */
.delivery-quote{display:flex;flex-direction:column;gap:var(--s-3)}
.delivery-quote[aria-busy="true"],[data-delivery-box][aria-busy="true"]{opacity:.5;transition:opacity .15s}
.delivery-quote__cards{display:grid;gap:var(--s-2)}
.delivery-quote__best{display:grid;grid-template-columns:auto 1fr auto;column-gap:var(--s-2);align-items:baseline;padding:var(--s-3) var(--s-4);border-radius:var(--r-card);background:var(--c-tint)}
.delivery-quote__best .icon{grid-row:1 / 4;align-self:start;margin-top:2px;color:var(--c-brand)}
.delivery-quote__label{grid-column:2;font:600 13px/18px var(--font);color:var(--c-text-2)}
.delivery-quote__tk{grid-column:2;font-weight:700}
.delivery-quote__meta{grid-column:2;font:var(--t-small);color:var(--c-text-2)}
.delivery-quote__price{grid-column:3;grid-row:1 / 4;align-self:center;font:700 18px/24px var(--font);white-space:nowrap}
.delivery-quote__all summary{display:inline-flex;align-items:center;gap:var(--s-1);color:var(--c-brand);font:600 14px/20px var(--font);cursor:pointer;list-style:none}
.delivery-quote__all summary::-webkit-details-marker{display:none}
.delivery-quote__all[open] summary .icon{transform:rotate(180deg)}
.delivery-quote__all .table-wrap{margin-top:var(--s-3)}
.delivery-quote__table td,.delivery-quote__table th{font-size:13px;line-height:18px}
.delivery-quote__none{color:var(--c-text-3)}
.delivery-quote__note{font:var(--t-small);color:var(--c-text-3)}
/* «Сопутствующие товары» — подкатегории с фото и числом товаров, как на старой странице. */
.related-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--s-3)}
.related-cat{display:flex;flex-direction:column;gap:var(--s-1);height:100%;padding:var(--s-3);border:1px solid var(--c-line);border-radius:var(--r-card);color:var(--c-text)}
.related-cat:hover{border-color:var(--c-brand);text-decoration:none}
.related-cat .photo{aspect-ratio:4/3;margin-bottom:var(--s-2)}
.related-cat__name{font-weight:600}
.related-cat:hover .related-cat__name{color:var(--c-brand)}
.related-cat__count{font:var(--t-small);color:var(--c-text-3)}
@media (max-width:767px){.related-cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1199px){.product-top{grid-template-columns:minmax(0,1fr)}}

/* Текст описания */
.prose{display:flex;flex-direction:column;gap:var(--s-3);max-width:72ch;color:var(--c-text)}

/* Отзывы и вопросы о товаре: имя, текст, ответ магазина (как ajax/getOpinions.php, getAQ.php). */
.feedback{display:flex;flex-direction:column;gap:var(--s-3)}
.feedback__item{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-4);border:1px solid var(--c-line);border-radius:var(--r-card)}
.feedback__name{font-weight:600}
.feedback__answer{margin-top:var(--s-2);padding:var(--s-3) var(--s-4);border-left:3px solid var(--c-brand);border-radius:0 var(--r-control) var(--r-control) 0;background:var(--c-tint)}
.feedback__answer b{display:block;margin-bottom:2px;font:600 13px/18px var(--font);color:var(--c-brand)}
.feedback__empty{color:var(--c-text-2)}

/* «Зачем нужен кабинет» — список преимуществ с иконками. */
.why{display:flex;flex-direction:column;gap:var(--s-4)}
.why__item{display:flex;gap:var(--s-4)}
.why__item b{display:block;font:600 15px/20px var(--font)}
.why__item > span:last-child{color:var(--c-text-2)}
.why__icon{display:grid;place-items:center;width:48px;height:48px;flex-shrink:0;border-radius:var(--r-pill);background:var(--c-tint);color:var(--c-brand)}

/* Подкатегории раздела — плитки «название · N товаров ›». */
.subcats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
.subcat{display:flex;align-items:center;gap:var(--s-3);height:100%;padding:var(--s-4) var(--s-5);border-radius:var(--r-card);background:var(--c-card);box-shadow:var(--shadow-card);color:var(--c-text)}
.subcat:hover{color:var(--c-brand);text-decoration:none;box-shadow:0 0 0 1.5px var(--c-brand)}
.subcat__name{flex:1;min-width:0;font:600 15px/20px var(--font);overflow-wrap:anywhere}
.subcat__count{color:var(--c-text-3);font:var(--t-small);white-space:nowrap}
.subcat > .icon{color:var(--c-brand)}
@media (max-width:1199px){.subcats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.subcats{grid-template-columns:1fr;gap:var(--s-2)}.subcat{padding:var(--s-3) var(--s-4)}}

/* Реквизиты: значения — моноширинным, чтобы цифры счёта читались группами. */
.specs--mono dd{font:var(--t-mono)}

/* Шаги: «Как проходит подбор», порядок возврата. */
.steps{display:flex;flex-direction:column;gap:var(--s-3);counter-reset:step}
.steps li{position:relative;padding-left:44px;color:var(--c-text-2);counter-increment:step}
.steps li::before{content:counter(step);position:absolute;left:0;top:0;display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-pill);background:var(--c-tint);color:var(--c-brand);font:700 14px/1 var(--font)}
.steps b{display:block;margin-bottom:2px;color:var(--c-text);font-weight:600}

/* Оглавление «На этой странице» */
.toc{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6);padding:var(--s-4);border-radius:var(--r-card);background:var(--c-tint)}
.toc a{display:inline-flex;align-items:center;gap:var(--s-1);font-weight:600}

/* Ключевые цифры: «Бесплатно — до ТК от 5 000 ₽». */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3)}
.facts li{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-4);border-radius:var(--r-card);background:var(--c-page);color:var(--c-text-2);font:var(--t-small)}
.facts b{color:var(--c-text);font:var(--t-h3)}
@media (max-width:1199px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Способ оплаты — карточка с описанием (страница доставки и оплаты). */
.pay-way{display:flex;gap:var(--s-3);padding:var(--s-4);border:1px solid var(--c-line);border-radius:var(--r-card)}
.pay-way > .icon{color:var(--c-brand)}
.pay-way b{display:block;margin-bottom:2px}
.pay-way p{color:var(--c-text-2)}

/* Текстовая страница: отступы между заголовками и абзацами. */
.prose-page{gap:var(--s-4)}
.prose-page h2{margin-top:var(--s-4)}
.prose-page > p,.prose-page li{max-width:72ch}

/* Недавние запросы поиска (localStorage, Р6) */
.recent{display:flex;flex-direction:column}
.recent__item{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) 0;color:var(--c-text)}
.recent__item + .recent__item{border-top:1px solid var(--c-line)}
.recent__item .icon{color:var(--c-text-3)}
.recent__item:hover{color:var(--c-brand);text-decoration:none}

/* ============================================================ П5. Каркас */

/* Кнопка «Каталог» — синяя заливка: жёлтая на экране одна — «Найти». */
.button--brand{background:var(--c-brand);color:var(--c-on-navy)}
.button--brand:hover,.button--brand[aria-expanded="true"]{background:var(--c-brand-hover);color:var(--c-on-navy)}

/* Логотип */
.logo{display:flex;flex-direction:column;flex-shrink:0;color:var(--c-text)}
.logo:hover{color:var(--c-text);text-decoration:none}
.logo__name{font:800 24px/28px var(--font);letter-spacing:-.01em}
.logo__note{max-width:190px;font:var(--t-small);color:var(--c-text-2)}

/* Выпадающее меню у кнопки (пользователь). Открывает js/v3.js по [data-dropdown]. */
.dropdown{position:relative}
.dropdown__menu{position:absolute;right:0;top:calc(100% + var(--s-1));z-index:var(--z-dropdown);display:flex;flex-direction:column;min-width:220px;padding:var(--s-2);border-radius:var(--r-card);background:var(--c-card);box-shadow:var(--shadow-raised)}
.dropdown__menu a{display:flex;align-items:center;gap:10px;padding:var(--s-2) var(--s-3);border-radius:var(--r-control);color:var(--c-text)}
.dropdown__menu a:hover{background:var(--c-page);text-decoration:none}
.dropdown__menu .icon{color:var(--c-text-3)}

/* Шапка: основная строка + строка с городом и телефоном + меню «Каталог». */
.site-header{position:relative;z-index:var(--z-sticky);background:var(--c-card);box-shadow:0 1px 0 var(--c-line)}
.site-header__main{display:flex;align-items:center;gap:var(--s-5);padding-top:var(--s-3);padding-bottom:var(--s-3)}
.site-header__catalog{flex-shrink:0}
.site-header__search{flex:1;min-width:0}
.site-header__search .search__examples{margin-top:var(--s-1)}
.site-header__action{display:flex;align-items:center;gap:10px;padding:var(--s-1) 0;border:0;background:none;color:var(--c-text);cursor:pointer;white-space:nowrap}
.site-header__action:hover{color:var(--c-brand);text-decoration:none}
.site-header__icon{position:relative;display:flex;padding:var(--s-1)}
.site-header__icon .counter{top:-4px;right:-6px}
.site-header__label{display:flex;flex-direction:column;font:600 14px/18px var(--font)}
.site-header__label b{font:700 15px/20px var(--font)}
.site-header__cart{padding-right:var(--s-5);border-right:1px solid var(--c-line)}
.site-header__chevron{color:var(--c-text-3)}
.site-header__city-m,.site-header__burger{display:none}
.site-header__sub{border-top:1px solid var(--c-line)}
.site-header__sub-row{display:flex;align-items:center;gap:var(--s-3) var(--s-6);min-height:48px;font:400 13px/18px var(--font)}
.site-header__city{display:flex;align-items:center;gap:6px;color:var(--c-text-2)}
.site-header__city .icon{color:var(--c-brand)}
.site-header__city .filters__link{font-size:14px}
.site-header__note{flex:1;color:var(--c-text-3)}
.site-header__phone{display:flex;align-items:center;gap:var(--s-2);color:var(--c-text);font-weight:700;font-size:15px}
.site-header__phone small{display:block;font:var(--t-small);color:var(--c-text-3)}
.site-header__phone .icon{color:var(--c-brand)}
.site-header__phone:hover{text-decoration:none;color:var(--c-brand)}
.site-header__sub-row .link-more{font-size:13px}
@media (max-width:1199px){
  .site-header__main{gap:var(--s-3)}
  .site-header__catalog span,.site-header__label,.logo__note,.site-header__note,.site-header__search .search__examples,.site-header__sub-row .link-more{display:none}
  .site-header__catalog{width:var(--h-control);padding:0}
  .site-header__cart{padding-right:var(--s-3)}
}
@media (max-width:767px){
  .site-header__main{flex-wrap:wrap;gap:var(--s-2) var(--s-3);padding-top:var(--s-2)}
  .logo{flex:1;min-width:0}
  .logo__name{font-size:22px;line-height:28px}
  .site-header__search{order:5;flex-basis:100%}
  .site-header__catalog,.site-header__cart,.site-header__user,.site-header__sub{display:none}
  .site-header__city-m{display:flex;align-items:center;gap:var(--s-1);max-width:45%;min-width:0;min-height:40px;padding:var(--s-1) 0;border:0;background:none;color:var(--c-brand);font:500 14px/20px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
  .site-header__burger{display:inline-flex;margin-right:calc(-1 * var(--s-2));color:var(--c-text)}
}

/* Меню «Каталог»: 18 разделов слева, подразделы активного — справа (Р12). */
.megamenu{position:absolute;left:0;right:0;top:100%;z-index:var(--z-dropdown);padding:var(--s-4) 0 var(--s-6);background:var(--c-card);box-shadow:var(--shadow-raised);border-top:1px solid var(--c-line)}
.megamenu__inner{position:relative;display:grid;grid-template-columns:300px minmax(0,1fr);gap:var(--s-2) var(--s-8);min-height:520px}
.megamenu__list{grid-column:1;display:flex;flex-direction:column}
.megamenu__link{display:flex;align-items:center;gap:var(--s-3);padding:6px var(--s-3);border-radius:var(--r-control);color:var(--c-text);font:500 15px/20px var(--font)}
.megamenu__link > span{flex:1}
.megamenu__link > .icon:first-child{color:var(--c-brand)}
.megamenu__link > .icon:last-child{color:var(--c-text-3);visibility:hidden}
.megamenu__item.is-active > .megamenu__link{background:var(--c-tint);color:var(--c-brand);text-decoration:none}
.megamenu__item.is-active > .megamenu__link > .icon:last-child{visibility:visible}
.megamenu__panel{display:none;position:absolute;top:0;left:calc(300px + var(--s-8) + var(--gutter));right:var(--gutter)}
.megamenu__item.is-active > .megamenu__panel{display:block}
.megamenu__head{display:flex;align-items:baseline;gap:var(--s-6);margin-bottom:var(--s-4)}
.megamenu__title{font:var(--t-h2);color:var(--c-text)}
.megamenu__subs{columns:3 200px;column-gap:var(--s-6)}
.megamenu__subs li{break-inside:avoid;padding:5px 0}
.megamenu__help{grid-column:1;display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-2);padding:var(--s-3);border-radius:var(--r-control);background:var(--c-tint);font-weight:600}
@media (max-width:767px){.megamenu{display:none}}

/* Мобильное меню (шторка): карточка входа, список разделов, «Покупателям», контакты. */
.menu-card{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3);border-radius:var(--r-card);background:var(--c-tint);color:var(--c-text);font-weight:600}
.menu-card:hover{text-decoration:none;color:var(--c-text)}
.menu-card__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-pill);background:var(--c-card);color:var(--c-brand)}
.menu-card__body{flex:1;display:flex;flex-direction:column}
.menu-card__body small{font:var(--t-small);color:var(--c-text-2)}
.menu-card > .icon{color:var(--c-brand)}
.menu-list{display:flex;flex-direction:column}
.menu-list a{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) 0;color:var(--c-text);font:500 16px/24px var(--font)}
.menu-list a + a{border-top:1px solid var(--c-line)}
.menu-list a > .icon:first-child{color:var(--c-brand)}
.menu-list a > .icon:last-child{margin-left:auto;color:var(--c-text-3)}
.menu-links{display:flex;flex-direction:column;gap:var(--s-2)}
.menu-links h3{font:600 13px/18px var(--font);color:var(--c-text-3);text-transform:uppercase;letter-spacing:.04em}

/* Контакты одним блоком */
.contacts{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2);padding:var(--s-4);border-radius:var(--r-card);background:var(--c-page)}
.contacts__phone{display:flex;align-items:center;gap:var(--s-2);color:var(--c-text);font:800 20px/28px var(--font)}
.contacts__phone .icon{color:var(--c-brand)}
.contacts__hours{font:var(--t-small);color:var(--c-text-2)}

/* Подвал. На мобильном колонки ссылок — раскрывающиеся (js/v3.js сворачивает их при загрузке). */
.site-footer{margin-top:auto;padding:var(--s-10) 0 var(--s-6);background:var(--c-navy);color:var(--c-on-navy-2);font:var(--t-body)}
.site-footer a{color:var(--c-on-navy)}
.site-footer :focus-visible{outline-color:var(--c-on-navy)}
.site-footer__top{display:grid;grid-template-columns:1.2fr repeat(3,minmax(0,1fr)) 1.4fr 1.2fr;gap:var(--s-6)}
.site-footer__brand{display:flex;flex-direction:column;gap:var(--s-2)}
.site-footer__brand .logo__name{color:var(--c-on-navy)}
.site-footer h2,.site-footer summary{margin-bottom:var(--s-3);color:var(--c-on-navy);font:700 14px/20px var(--font)}
.site-footer summary{display:flex;align-items:center;justify-content:space-between;list-style:none;pointer-events:none}
.site-footer summary::-webkit-details-marker{display:none}
.site-footer summary .icon{display:none}
.site-footer__col ul{display:flex;flex-direction:column;gap:var(--s-2)}
.site-footer__points p{display:flex;gap:var(--s-2);margin-bottom:var(--s-3);color:var(--c-on-navy)}
.site-footer__points small,.site-footer__contacts small{display:block;font:var(--t-small);color:var(--c-on-navy-2)}
.site-footer__contacts{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2)}
.site-footer__contacts a{display:flex;align-items:center;gap:var(--s-2)}
.site-footer__phone{font:800 18px/24px var(--font)}
.site-footer__pay{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-8);margin-top:var(--s-8);padding:var(--s-4) 0;border-top:1px solid var(--c-navy-line);border-bottom:1px solid var(--c-navy-line);color:var(--c-on-navy)}
.site-footer__pay > span:first-child{font-weight:700}
.site-footer__pay > span{display:flex;align-items:center;gap:var(--s-2)}
.site-footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-2) var(--s-6);padding-top:var(--s-4);font:var(--t-small)}
@media (max-width:1199px){.site-footer__top{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){
  .site-footer{padding-top:var(--s-6)}
  .site-footer__top{grid-template-columns:1fr;gap:0}
  .site-footer__brand{margin-bottom:var(--s-4)}
  .site-footer__col{border-top:1px solid var(--c-navy-line)}
  .site-footer summary{margin:0;padding:var(--s-3) 0;pointer-events:auto;cursor:pointer}
  .site-footer summary .icon{display:block}
  .site-footer__col[open] summary .icon{transform:rotate(180deg)}
  .site-footer__col ul{padding-bottom:var(--s-3)}
  .site-footer__points,.site-footer__contacts{padding-top:var(--s-4);border-top:1px solid var(--c-navy-line)}
  .site-footer__pay{flex-direction:column;align-items:flex-start;gap:var(--s-2)}
}

/* Нижняя панель — только мобильный */
.tabbar{display:none}
@media (max-width:767px){
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bar);display:grid;grid-template-columns:repeat(4,1fr);padding:6px var(--s-2) calc(6px + env(safe-area-inset-bottom));background:var(--c-card);border-top:1px solid var(--c-line)}
  .tabbar__item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;border-radius:var(--r-control);color:var(--c-text-2);font:500 12px/16px var(--font)}
  .tabbar__item:hover{background:var(--c-page);color:var(--c-text-2);text-decoration:none}
  .tabbar__item--active,.tabbar__item--active:hover{color:var(--c-brand);font-weight:600}
  .tabbar__icon{position:relative;display:flex}
  .tabbar__icon .counter{top:-6px;right:-12px}
}

/* Меню раздела «Покупателям»: колонка на десктопе, раскрывающийся список на мобильном. */
.info-nav__box{padding:var(--s-4);border-radius:var(--r-card);background:var(--c-card);box-shadow:var(--shadow-card)}
.info-nav__box > summary{display:none}
.info-nav__title{margin:0 0 var(--s-3) var(--s-3);font:var(--t-h3)}
.info-nav ul{display:flex;flex-direction:column;gap:2px}
.info-nav a{display:block;padding:var(--s-2) var(--s-3);border-radius:var(--r-control);color:var(--c-text)}
.info-nav a:hover{background:var(--c-page);text-decoration:none}
.info-nav a[aria-current="page"]{background:var(--c-tint);color:var(--c-brand);font-weight:600}
@media (max-width:1199px){
  .info-nav__box{padding:0}
  .info-nav__box > summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:var(--h-control);padding:0 var(--s-4);list-style:none;cursor:pointer}
  .info-nav__box > summary::-webkit-details-marker{display:none}
  .info-nav__box[open] > summary .icon{transform:rotate(180deg)}
  .info-nav__title{display:none}
  .info-nav ul{padding:0 var(--s-2) var(--s-2)}
}

/* «Остались вопросы?», «Не нашли деталь?» */
.help-card{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-6);padding:var(--s-5) var(--s-6);border-radius:var(--r-card);background:var(--c-card);box-shadow:var(--shadow-card)}
.help-card--tint{background:var(--c-tint);box-shadow:none}
.help-card__icon{display:grid;place-items:center;width:56px;height:56px;flex-shrink:0;border-radius:var(--r-pill);background:var(--c-tint);color:var(--c-brand)}
.help-card--tint .help-card__icon{background:var(--c-card)}
.help-card__body{flex:1 1 240px;min-width:0}
.help-card__body h2{font:var(--t-h3)}
.help-card__body p{color:var(--c-text-2)}
.help-card__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-6)}
.help-card__phone{display:flex;flex-direction:column;color:var(--c-text);font:800 18px/24px var(--font)}
.help-card__phone small{font:var(--t-small);color:var(--c-text-3)}
@media (max-width:767px){
  .help-card{flex-wrap:wrap;padding:var(--s-4)}
  .help-card__icon{width:44px;height:44px}
  .help-card__body{flex-basis:calc(100% - 60px)}
  .help-card__actions{flex-basis:100%}
  .help-card__actions .button{flex:1}
}

/* Плашка cookie: показывает js/cookie-notice.js классом show (как на сайте). */
.cookie-note{position:fixed;left:var(--s-4);right:var(--s-4);bottom:var(--s-4);z-index:var(--z-toast);display:none;align-items:center;gap:var(--s-4) var(--s-6);max-width:880px;margin:0 auto;padding:var(--s-4) var(--s-5);border-radius:var(--r-card);background:var(--c-card);box-shadow:var(--shadow-raised);font:400 13px/18px var(--font);color:var(--c-text-2)}
.cookie-note.show{display:flex}
.cookie-note__actions{display:flex;gap:var(--s-2);flex-shrink:0}
@media (max-width:767px){
  .cookie-note{flex-direction:column;align-items:stretch;bottom:calc(var(--h-tabbar) + var(--s-2) + env(safe-area-inset-bottom));left:var(--s-2);right:var(--s-2)}
  .v3:has(.buy-bar) .cookie-note{bottom:calc(var(--h-tabbar) + 64px + var(--s-2) + env(safe-area-inset-bottom))}
  .cookie-note__actions .button{flex:1}
}

/* Анонс на главной (V3_PROMO): текст слева, кнопка справа; на мобильном — кнопка во всю ширину. */
/* Баннеры акций (v3_banners_home, v3_banner_category). Картинка — целиком, скругление — здесь. */
.banners{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.banners .banner:only-child{grid-column:1/-1;max-width:628px}
.banner{display:block;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-card);background:var(--c-card)}
.banner img{display:block;width:100%;height:auto}
.banner:focus-visible{outline:2px solid var(--c-brand);outline-offset:2px}
@media (hover:hover){.banner{transition:transform var(--dur-fast),box-shadow var(--dur-fast)}.banner:hover{transform:translateY(-2px);box-shadow:var(--shadow-raised)}}
.banner--list{display:none;max-width:628px}
@media (max-width:1199px){.banner--list{display:block}}
/* Телефон: друг под другом, широкие. Карусель (листать пальцем) обрезала второй баннер у края, а мышью
   не листалась вовсе — выглядело поломкой (16.10.2026). */
@media (max-width:767px){
  .banners{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
  .banners .banner:only-child,.banner--list{max-width:none}
}
.promo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-4) var(--s-6);padding:var(--s-5) var(--s-6);border-radius:var(--r-card);background:var(--c-card);box-shadow:var(--shadow-card)}
.promo__body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2);flex:1 1 360px;min-width:0}
.promo__title{font:var(--t-h3)}
.promo__title span{color:var(--c-brand)}
.promo__list{display:flex;flex-direction:column;gap:2px;padding-left:var(--s-5);list-style:disc;color:var(--c-text-2);font:var(--t-small)}
@media (max-width:767px){.promo{padding:var(--s-4)}.promo > .button{flex:1 1 100%}}

/* Кнопка-подпись у скрытого поля файла: фокус поля виден на кнопке. */
.button:has(> input[type="file"]:focus-visible){outline:2px solid var(--c-brand);outline-offset:2px}

/* Длинный город в шапке (Петропавловск-Камчатский): многоточие у названия, логотип не перекрывается. */
.site-header__city-m span{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:767px){.logo__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}

/* Без aspect-ratio (iOS до 15, Chrome до 88) фото получали высоту 0 — квадрат отступом. */
@supports not (aspect-ratio:1/1){
  .photo{height:0;padding-top:100%}
  .gallery__slide .photo,.related-cat .photo{padding-top:75%}
  .photo__empty{position:absolute;inset:0;justify-content:center}
}

/* Печать: страница товара, заказа и «Заказ оформлен» — без шапки, подвала, кнопок и плашек. */
@media print{
  .site-header,.site-footer,.tabbar,.buy-bar,.cookie-note,.toast,.skip-link,.megamenu,dialog,.button,.stepper,.help-card,.sku__copy{display:none!important}
  body{background:#fff}
  .panel{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  a{color:inherit;text-decoration:none}
}

/* Ссылка внутри текста галочки («политикой конфиденциальности») — подчёркнута: цветом от текста
   она отличается слабее 3:1 (axe link-in-text-block). */
.check__text a{text-decoration:underline}

/* iOS увеличивает страницу при фокусе на поле со шрифтом меньше 16 px: сортировка, «Цена от–до»,
   поиск по производителям, количество — на телефоне 16 px. */
@media (max-width:767px),(pointer:coarse){.field--s .field__input,.stepper .stepper__input,.stepper--m .stepper__input,.stepper--s .stepper__input{font-size:16px}}

/* Подбор по автомобилю: страница перезагружается после выбора — видно, что идёт загрузка. */
.is-busy{opacity:.6;pointer-events:none;cursor:progress}

/* Шторки и окна: прокрутка внутри не уводит страницу под ними. */
.modal__body{overscroll-behavior:contain}