/* ==========================================================================
   ExtraParts — дополнения шаблона extraparts_v2, которых нет в прототипе.
   main.css собирается из прототипа; здесь — только то, что появилось при переносе в Битрикс.
   ========================================================================== */

/* Дизайн светлый: тёмная тема системы не красит фон страниц и поля (часть подключаемых стилей Битрикса разрешает тёмную схему) */
:root { color-scheme: light; }

/* Логотип «А · Эволюция» (img/logo.svg и logo-inverse.svg, 273×31, без мелкой подписи): высоты вместо прежних из main.css,
   рассчитанных на логотип с подписью, — видимый размер знака и надписи прежний */
.ep-logo img { height: clamp(15px, 4.8vw, 21px); } /* на телефоне — место под значок входа (375px: 158px в ширину) */
@media (min-width: 1024px) {
  .ep-logo img { height: 28px; }
}
.drawer .ep-logo img { height: 20px; }
.ep-footer .ep-logo img { height: 28px; filter: none; } /* свой файл для тёмного фона — оранжевый акцент сохраняется */
/* самые узкие экраны (до 360px): в шапке только знак «EP» — левая часть того же файла */
@media (max-width: 359.98px) {
  .ep-header .ep-logo img { width: 36px; height: 20px; object-fit: cover; object-position: left center; }
}

/* Вход в кабинет на телефоне и планшете — значок рядом с поиском и корзиной (в прототипе ссылки не было);
   подпись «Войти» / «Кабинет» скрыта визуально, но остаётся именем ссылки для экранного диктора */
@media (max-width: 1023.98px) {
  .header-action--login { display: inline-flex; }
  .header-action--login .header-action__label {
    display: inline;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Веб-форма: общий итог отправки */
.form-success {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--ok-soft);
  color: var(--ok);
}
.form-success .ep-icon { flex: none; width: 24px; height: 24px; }
.form-success p { color: var(--ink); }
.form__error {
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: var(--fs-sm);
}

/* Карточка товара: «В корзину» — форма (работает и без JS), кнопка остаётся элементом строки цены */
.product-card__buy-form { display: contents; }
.product-card__buy[aria-busy="true"] { opacity: .7; cursor: progress; }
/* «Сообщить о поступлении» длиннее «В корзину»: в узкой карточке — под ценой, в две строки, а не за край */
.product-card__notice { flex-shrink: 1; white-space: normal; }

/* Карточка товара: форма покупки не ломает строку «количество + кнопка» и панели */
.buy-form { display: contents; }
.buy-form .ep-btn[aria-busy="true"] { opacity: .7; cursor: progress; }

/* Карточка товара: старая цена рядом с новой */
.buybox__old { margin-left: 8px; font-size: var(--fs-base); font-weight: 500; color: var(--muted); }

/* Карточка товара: миниатюры фото */
.gallery__thumbs { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; }
.gallery__thumb {
  display: grid;
  place-items: center;
  width: 72px; height: 56px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-media);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.gallery__thumb[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }

/* Карточка товара: отзывы */
.review-list { display: grid; gap: 12px; margin-bottom: 16px; }
.review { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); }
.review__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.review__author { font-weight: 600; }
.review__meta { font-size: var(--fs-xs); color: var(--muted); }
.review__text { margin-top: 8px; color: var(--ink-2); }

/* Веб-форма: выбор одного варианта (оценка) */
.choice-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.choice-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--control-border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.choice input:checked + span { border-color: var(--brand); background: var(--brand-soft); color: var(--ink); font-weight: 600; }
.choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Объявление магазина (инфоблок 34 «Всплывающие окна») — окно из footer.php: значок, заголовок из текста, «Понятно» */
.notice-dialog { width: min(92vw, 460px); }
.notice-dialog__title { display: flex; align-items: center; gap: 12px; line-height: 1.25; text-wrap: balance; }
.notice-dialog__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); }
.notice-dialog__text { color: var(--ink-2); line-height: 1.55; overflow-wrap: break-word; text-wrap: pretty; }
.notice-dialog__text > * + * { margin-top: .6em; }
.notice-dialog__text :is(b, strong) { color: var(--ink); font-weight: 600; }
.notice-dialog__text a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.notice-dialog__text :is(ul, ol) { padding-left: 1.25em; }
.notice-dialog__text ul { list-style: disc; }
.notice-dialog__ok { width: 100%; margin-top: 20px; }
@media (prefers-reduced-motion: no-preference) {
  .notice-dialog[open] { animation: notice-in .2s cubic-bezier(0.2, 0, 0, 1); }
  .notice-dialog[open]::backdrop { animation: notice-fade .2s ease-out; }
}
@keyframes notice-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes notice-fade { from { opacity: 0; } }

/* Подвал: открыть форму вопроса */
.ep-footer__ask {
  min-height: 44px;
  margin-top: 8px;
  color: var(--on-inverse);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   Страницы, которых нет в прототипе: общий заголовок, текст из редактора, каталог
   ========================================================================== */

/* Заголовок страницы: крошки + H1 (header.php) */
.page-head { padding-bottom: 4px; }
.page-head__title {
  margin-top: 4px;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.page-head__page { font-weight: 500; color: var(--muted); }

/* Текст из визуального редактора (SEO-тексты, статьи, страницы «Покупателям») */
.ep-prose { max-width: 46rem; color: var(--ink-2); line-height: 1.6; overflow-wrap: break-word; }
.ep-prose > * + * { margin-top: 12px; }
.ep-prose :is(h2, h3, h4) { margin-top: 28px; color: var(--ink); font-weight: 700; line-height: 1.25; text-wrap: balance; }
.ep-prose > :first-child { margin-top: 0; }
.ep-prose h2 { font-size: var(--fs-lg); }
.ep-prose h3 { font-size: var(--fs-md); }
.ep-prose h4 { font-size: var(--fs-base); }
.ep-prose :is(ul, ol) { padding-left: 1.25em; }
.ep-prose ul { list-style: disc; }
.ep-prose ol { list-style: decimal; }
.ep-prose li + li { margin-top: 6px; }
.ep-prose li::marker { color: var(--muted); }
.ep-prose a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.ep-prose :is(b, strong) { color: var(--ink); font-weight: 600; }
.ep-prose img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.ep-prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var(--fs-sm); }
.ep-prose :is(th, td) { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ep-prose th { color: var(--ink); font-weight: 600; }
.ep-prose blockquote { padding-left: 16px; border-left: 3px solid var(--brand); }
.ep-prose hr { border: 0; border-top: 1px solid var(--line); }
/* размеры и шрифты, заданные в редакторе вручную, не ломают сетку страницы */
.ep-prose [style] { font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; }

/* Корень каталога */
.catalog-root { padding-block: 16px var(--section-y); }
.catalog-root__grid { display: grid; gap: 12px; }
.root-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border-radius: var(--card-radius);
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.root-card__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icon name" "icon count";
  align-items: center;
  column-gap: 12px;
  min-height: 48px;
}
.root-card__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--surface-3);
  color: var(--icon-strong);
  transition: background-color .15s ease, color .15s ease;
}
.root-card__name { grid-area: name; align-self: end; font-weight: 700; line-height: 1.25; }
.root-card__count { grid-area: count; align-self: start; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.root-card__subs { display: flex; flex-wrap: wrap; gap: 6px; }
.root-card__subs a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.root-card__subs .root-card__all { background: none; color: var(--link); font-weight: 600; }
@media (hover: hover) {
  .root-card__head:hover .root-card__name { color: var(--link); }
  .root-card__head:hover .root-card__icon { background: var(--brand-soft); color: var(--brand-ink); }
  .root-card__subs a:hover { color: var(--ink); background: var(--surface-3); }
}
@media (min-width: 640px) {
  .catalog-root__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .catalog-root__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .root-card { padding: 20px; }
}

/* Раздел каталога: подразделы, колонки «фильтр + товары» */
.catalog-page { padding-bottom: var(--section-y); }
.subsections__list {
  display: flex;
  gap: 8px;
  margin: 4px calc(-1 * var(--gutter)) 0;
  padding: 4px var(--gutter) 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.subsections__list::-webkit-scrollbar { display: none; }
.subsections__chip { min-height: 40px; }
.subsections__chip[aria-current="page"] { border-color: var(--brand); background: var(--brand-soft); color: var(--ink); font-weight: 600; }
.subsections__count { color: var(--muted); font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) {
  .subsections__list { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow: visible; }
}

.catalog-layout { display: grid; gap: 24px; margin-top: 12px; }
.catalog-layout__aside { display: none; }
@media (min-width: 1024px) {
  .catalog-layout { grid-template-columns: 264px minmax(0, 1fr); gap: 32px; align-items: start; }
  .catalog-layout__aside { display: block; }
}

.catalog-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; }
.catalog-toolbar__count { font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.catalog-toolbar__filter { margin-left: auto; }
.catalog-toolbar__badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--on-brand);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.sort-links { display: flex; gap: 4px; width: 100%; overflow-x: auto; scrollbar-width: none; }
.sort-links::-webkit-scrollbar { display: none; }
.sort-links__link {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 40px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
}
.sort-links__link[aria-current="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--sh-1); }
@media (hover: hover) {
  .sort-links__link:hover { color: var(--ink); }
}
@media (min-width: 640px) {
  .sort-links { width: auto; margin-left: auto; }
}
@media (min-width: 1024px) {
  .catalog-toolbar__filter { display: none; }
}

/* Выбранные условия фильтра над сеткой */
.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; }
.filter-chips__list { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chips__chip { min-height: 36px; padding: 6px 10px 6px 14px; border-color: transparent; background: var(--brand-soft); color: var(--ink); }
.filter-chips__chip .ep-icon { width: 16px; height: 16px; }
.filter-chips__reset {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Сетка карточек */
.catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 479px) {
  .catalog-grid .product-card__media { padding: 8px; }
  .catalog-grid .product-card__body { gap: 10px; padding: 12px; }
  .catalog-grid .product-card__title { font-size: var(--fs-sm); }
}
@media (min-width: 768px) {
  .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 1280px) {
  .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.catalog-empty { margin-top: 0; }

/* Вид списка: плитка или строки — раздел каталога и поиск (include/view-switch.php, js/main.js). Строки — атрибут
   data-catalog-view="line" на <html>: его ставит встроенный скрипт до отрисовки сетки по cookie catalog_view, поэтому вид не мигает */
.view-switch { display: flex; flex: none; gap: 4px; }
.view-switch[hidden] { display: none; }
.view-switch__btn {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-pill);
  color: var(--muted);
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.view-switch__btn .ep-icon { width: 20px; height: 20px; }
.view-switch__btn[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
@media (hover: hover) {
  .view-switch__btn:hover { color: var(--ink); }
}
@media (max-width: 639.98px) {
  .view-switch { order: 1; } /* на телефоне — в первой строке, рядом с кнопкой «Фильтры»; сортировка — второй строкой */
  .sort-links { order: 2; }
  .search-page__toolbar .view-switch { margin-left: auto; } /* в поиске кнопки «Фильтры» нет — к правому краю */
}
.product-card__text { display: none; }
[data-catalog-view="line"] .catalog-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
[data-catalog-view="line"] .catalog-grid .product-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); height: auto; }
[data-catalog-view="line"] .catalog-grid .product-card__media {
  align-self: start;
  margin: 12px 0 12px 12px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
[data-catalog-view="line"] .catalog-grid .product-card__body { gap: 8px; padding: 12px 14px 14px; }
[data-catalog-view="line"] .catalog-grid .product-card__title { font-size: var(--fs-base); font-weight: 600; -webkit-line-clamp: 2; }
[data-catalog-view="line"] .catalog-grid .product-card__text {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ink-2);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
[data-catalog-view="line"] .catalog-grid .product-card__foot { justify-content: flex-start; gap: 8px 16px; }
[data-catalog-view="line"] .catalog-grid .product-card__buy { flex: 0 0 auto; }
@media (hover: hover) {
  [data-catalog-view="line"] .catalog-grid .product-card:hover { transform: none; }
}
@media (max-width: 639.98px) {
  /* телефон: название до трёх строк (модель и артикул целиком), «В корзину» — значок рядом с ценой, подпись — для диктора */
  [data-catalog-view="line"] .catalog-grid .product-card__title { -webkit-line-clamp: 3; }
  [data-catalog-view="line"] .catalog-grid .product-card__foot { justify-content: space-between; }
  [data-catalog-view="line"] .catalog-grid button.product-card__buy { width: 48px; padding: 0; }
  [data-catalog-view="line"] .catalog-grid button.product-card__buy [data-label] {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (min-width: 640px) {
  [data-catalog-view="line"] .catalog-grid .product-card { grid-template-columns: 168px minmax(0, 1fr); }
  [data-catalog-view="line"] .catalog-grid .product-card__media { margin: 16px 0 16px 16px; }
  [data-catalog-view="line"] .catalog-grid .product-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title foot" "text foot";
    align-content: start;
    gap: 6px 24px;
    padding: 16px 20px;
  }
  [data-catalog-view="line"] .catalog-grid .product-card__title { grid-area: title; }
  [data-catalog-view="line"] .catalog-grid .product-card__text { grid-area: text; -webkit-line-clamp: 3; }
  [data-catalog-view="line"] .catalog-grid .product-card__foot {
    grid-area: foot;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    margin-top: 0;
    gap: 10px;
  }
  [data-catalog-view="line"] .catalog-grid .product-card__price { font-size: 1.375rem; }
}

/* Страницы списка */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 28px; }
.pager__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; }
.pager__link, .pager__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 12px;
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.pager__link { padding: 0 6px; }
.pager__step { padding: 0 12px; }
.pager__link[aria-current="page"] { background: var(--surface-inverse); color: var(--on-inverse); }
.pager__gap { min-width: 20px; text-align: center; color: var(--muted); }
@media (hover: hover) {
  .pager__link:not([aria-current]):hover, .pager__step:hover { background: var(--surface-3); color: var(--ink); }
}
@media (max-width: 479px) {
  .pager__step { padding: 0; }
  .pager__step-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Фильтр */
.filter { display: grid; }
.filter__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; }
.filter__title { font-size: var(--fs-lg); font-weight: 700; }
.filter__reset { font-size: var(--fs-sm); font-weight: 600; color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.filter-group { border-top: 1px solid var(--line); }
.filter-group__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 0;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.filter-group__head::-webkit-details-marker { display: none; }
.filter-group__head:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.filter-group__name { flex: 1; }
.filter-group__count {
  display: inline-grid;
  place-items: center;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-size: 12px;
}
.filter-group__chevron { color: var(--muted); transition: transform .15s ease; }
.filter-group[open] .filter-group__chevron { transform: rotate(180deg); }
.filter-group__body { min-width: 0; margin: 0; padding: 0 0 12px; border: 0; }
.filter-group__list { display: grid; gap: 2px; }
.filter-group__list.is-collapsed > li:nth-child(n+9):not(:has(input:checked)) { display: none; }
.filter-option { align-items: center; min-height: 36px; padding: 4px 0; color: var(--ink); }
.filter-option input:disabled + span { color: var(--muted); }
.filter-group__more { min-height: 36px; margin-top: 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--link); }
.filter__foot { position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(to top, var(--bg) 75%, transparent); }
.filter__submit { width: 100%; }
.filter__submit[aria-busy="true"] { opacity: .7; cursor: progress; }
@media (min-width: 1024px) {
  .filter.is-pristine .filter__foot { display: none; } /* до первого изменения (js/catalog.js) */
}

/* Фильтр на телефоне — окно справа */
.filter-dialog {
  width: min(100vw, 440px);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: var(--surface);
  color: var(--ink);
  overflow: hidden;
}
.filter-dialog[open] { display: flex; flex-direction: column; animation: filter-in .22s ease-out; }
.filter-dialog::backdrop { background: var(--scrim); }
@keyframes filter-in { from { transform: translateX(100%); } }
.filter-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 8px 10px 16px;
  border-bottom: 1px solid var(--line);
}
.filter-dialog__title { font-size: var(--fs-lg); font-weight: 700; }
.filter-dialog__body { flex: 1; overflow: auto; padding: 8px 16px 0; overscroll-behavior: contain; }
.filter-dialog .filter__title { display: none; } /* заголовок — у окна */
.filter-dialog .filter__head { justify-content: flex-end; padding: 0; }
.filter-dialog .filter__head:not(:has(.filter__reset)) { display: none; }
.filter-dialog .filter__foot { padding-bottom: max(12px, env(safe-area-inset-bottom)); background: var(--surface); }

/* Страница поиска */
.search-page { padding-bottom: var(--section-y); }
.search-page__form { max-width: 760px; margin-top: 12px; }
.search-page__exact { margin-top: 12px; }
.search-page__toolbar { margin-top: 24px; }
.search-page__groups { margin-bottom: 12px; }
.search-page__empty { max-width: 760px; margin-top: 24px; }
.search-page__popular { padding-top: 32px; }
.search-page__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* Корзина */
.cart-page { padding-block: 12px var(--section-y); }
.cart-empty { max-width: 640px; }
.cart-empty__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cart-layout { display: grid; gap: 16px; }
.cart-list { display: grid; gap: 12px; }
.cart-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  grid-template-areas:
    "media info remove"
    "media qty sum";
  align-items: center;
  gap: 10px 14px;
  padding: 14px;
  border-radius: var(--card-radius);
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.cart-item__media {
  grid-area: media;
  align-self: start;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-media);
}
.cart-item__media img { width: 100%; height: 100%; object-fit: contain; }
.cart-item__info { grid-area: info; min-width: 0; }
.cart-item__title { font-weight: 600; line-height: 1.35; }
@media (hover: hover) {
  .cart-item__title:hover { color: var(--link); }
}
.cart-item__price { margin-top: 4px; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.cart-item__qty { grid-area: qty; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.cart-item__qty .qty { height: 44px; }
.cart-item__left { font-size: var(--fs-xs); color: var(--muted); }
.cart-item__sum { grid-area: sum; justify-self: end; font-size: var(--fs-md); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cart-item__remove { grid-area: remove; align-self: start; justify-self: end; margin: -8px -8px 0 0; color: var(--muted); }
.cart-item__remove[aria-busy="true"] { opacity: .5; cursor: progress; }
@media (hover: hover) {
  .cart-item__remove:hover { color: var(--danger); background: var(--danger-soft); }
}
.cart-items__recalc { margin-top: 12px; }
.cart-warning { margin-top: 12px; background: var(--warn-soft); }
.cart-warning .callout__icon { color: var(--warn); }

.cart-summary {
  display: grid;
  gap: 10px;
  padding: 20px;
  border-radius: var(--card-radius);
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.cart-summary__title { font-size: var(--fs-lg); font-weight: 700; }
.cart-summary__line { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cart-summary__line--muted { color: var(--muted); }
.cart-summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-weight: 600;
}
.cart-summary__total b { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cart-summary__submit { width: 100%; margin-top: 4px; }
.cart-summary__notes { display: grid; gap: 6px; margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }
.cart-summary__notes li { display: flex; align-items: center; gap: 8px; }
.cart-summary__notes .ep-icon { color: var(--brand-ink); }
@media (min-width: 640px) {
  .cart-item {
    grid-template-columns: 112px minmax(0, 1fr) auto auto 44px;
    grid-template-areas: "media info qty sum remove";
    gap: 16px;
    padding: 16px;
  }
  .cart-item__remove { align-self: center; margin: 0; }
  .cart-item__sum { min-width: 96px; text-align: right; }
}
@media (min-width: 1024px) {
  .cart-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
  .cart-summary { position: sticky; top: calc(var(--header-h) + 16px); }
}

/* ==========================================================================
   Информационные страницы (body.page-content): «Покупателям», доставка, контакты, о компании
   ========================================================================== */

/* Навигация по разделу «Покупателям» под заголовком */
.section-nav__list {
  display: flex;
  gap: 8px;
  margin: 12px calc(-1 * var(--gutter)) 0;
  padding: 4px var(--gutter) 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.section-nav__list::-webkit-scrollbar { display: none; }
.section-nav__link { flex: none; }
.section-nav__link[aria-current="page"] { border-color: var(--brand); background: var(--brand-soft); color: var(--ink); font-weight: 600; }
@media (min-width: 1024px) {
  .section-nav__list { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow: visible; }
}

/* Мост: обёртки старой вёрстки из файлов страниц (section > container > page__inner > page__content / text__content) */
.page-content main > .section { padding: 16px 0 var(--section-y); }
.page-content main .container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.page-content main :is(.section__inner, .page__inner, .page__content) { display: block; }
.page-content main .page__aside { display: none; } /* старое боковое меню — вместо него навигация под заголовком */
.page-content main .illustration { margin: 16px 0; }
.content-page { padding-block: 16px var(--section-y); }

/* Текст из редактора на информационных страницах: те же правила, что .ep-prose */
.page-content .text__content { max-width: 46rem; color: var(--ink-2); line-height: 1.6; overflow-wrap: break-word; }
.page-content .text__content > * + * { margin-top: 12px; }
.page-content .text__content :is(h2, h3, h4) { margin-top: 28px; color: var(--ink); font-weight: 700; line-height: 1.25; }
.page-content .text__content > :first-child { margin-top: 0; }
.page-content .text__content :is(h1, h2) { font-size: var(--fs-lg); } /* h1 в тексте страницы — второй заголовок: выглядит как подзаголовок */
.page-content .text__content h1 { color: var(--ink); font-weight: 700; line-height: 1.25; }
.page-content .text__content h3 { font-size: var(--fs-md); }
.page-content .text__content :is(ul, ol) { padding-left: 1.25em; }
.page-content .text__content ul { list-style: disc; }
.page-content .text__content ol { list-style: decimal; }
.page-content .text__content li + li { margin-top: 6px; }
.page-content .text__content li::marker { color: var(--muted); }
.page-content .text__content a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.page-content .text__content :is(b, strong) { color: var(--ink); font-weight: 600; }
.page-content .text__content img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.page-content .text__content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var(--fs-sm); }
.page-content .text__content :is(th, td) { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
/* ручное оформление из редактора: шрифты, выравнивание по ширине и отступы-«якоря» не ломают страницу */
.page-content .text__content [style] { font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; }
.page-content .text__content [style*="justify"] { text-align: left !important; }
.page-content .text__content :is(h2, h3)[style*="padding-top"] { padding-top: 0 !important; margin-top: 28px !important; }
.page-content .text__content img[style*="float"] { margin: 4px 0 16px 24px; }
.page-content .text__content img[style*="float:left"], .page-content .text__content img[style*="float: left"] { margin: 4px 24px 16px 0; }
@media (max-width: 639px) {
  .page-content .text__content img[style*="float"] { float: none !important; display: block; width: auto !important; margin: 12px 0; }
}

/* Вопросы и ответы */
.faq { display: grid; gap: 8px; max-width: 52rem; }
.faq__item { border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-1); }
.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 12px 16px;
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-md); }
.faq__chevron { flex: none; color: var(--muted); transition: transform .15s ease; }
.faq__item[open] .faq__chevron { transform: rotate(180deg); }
.faq__answer { padding: 0 16px 16px; }
.faq-empty { color: var(--ink-2); }
.faq-empty a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.content-cta { max-width: 52rem; margin-top: 24px; flex-wrap: wrap; }
.content-cta > div { flex: 1 1 220px; }

/* Новости и статьи */
.article-list { display: grid; gap: 12px; margin-top: 8px; }
.article-item {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  height: 100%;
  padding: 12px;
  border-radius: var(--card-radius);
  background: var(--surface);
  box-shadow: var(--sh-1);
  transition: box-shadow .15s ease;
}
.article-item:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) {
  .article-item:hover { box-shadow: var(--sh-2); }
  .article-item:hover .article-item__title a { color: var(--link); }
}
.article-item__media { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-sm); background: var(--surface-2); }
.article-item__media img { width: 100%; height: 100%; object-fit: cover; }
.article-item__date { font-size: var(--fs-xs); color: var(--muted); }
.article-item__title { margin-top: 4px; font-size: var(--fs-base); font-weight: 700; line-height: 1.3; text-wrap: balance; }
.article-item__title a::after { content: ""; position: absolute; inset: 0; }
.article-item__title a:focus-visible { outline: none; }
.article-item__text { margin-top: 6px; font-size: var(--fs-sm); color: var(--ink-2); display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
/* компактные карточки (как новости на главной): маленькая картинка, главное — дата и заголовок */
@media (min-width: 640px) {
  .article-item { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 14px; }
}
@media (min-width: 1024px) {
  .article-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
/* Статья или новость: текст в карточке, сбоку на компьютере (на телефоне — ниже) поиск по модели и «Читайте также» */
.article-layout { display: grid; gap: 16px; align-items: start; }
.article-detail { padding: 20px; border-radius: var(--card-radius); background: var(--surface); box-shadow: var(--sh-1); }
.article-detail__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: var(--fs-sm); color: var(--muted); }
/* картинка по центру карточки: у части картинок белый фон — на белой карточке он не выглядит заплаткой */
.article-detail__image { display: block; width: auto; max-width: 100%; max-height: 440px; height: auto; margin: 16px auto 0; border-radius: var(--r-md); }
.article-detail__text { margin-top: 20px; }
.article-detail__back { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.article-aside { display: grid; gap: 16px; }
.aside-card { padding: 20px; border-radius: var(--card-radius); background: var(--surface); box-shadow: var(--sh-1); }
.aside-card__title { font-size: var(--fs-md); font-weight: 700; line-height: 1.25; }
.aside-card__text { margin-top: 6px; font-size: var(--fs-sm); color: var(--ink-2); }
.article-search__row { display: flex; gap: 8px; margin-top: 12px; }
.article-search__row .ep-field__input { flex: 1; min-width: 0; }
.article-search .link-more { margin-top: 12px; }
.more-list { display: grid; gap: 14px; margin-top: 12px; }
.more-list a { color: var(--ink); font-weight: 600; line-height: 1.35; text-decoration: none; }
@media (hover: hover) {
  .more-list a:hover { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
}
.more-list__date { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--muted); }
@media (min-width: 768px) {
  .article-detail { padding: 32px; }
}
@media (min-width: 1024px) {
  .article-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; }
  .article-aside { position: sticky; top: calc(var(--header-h) + 16px); }
}
/* Лишние <br> в файлах страниц после компонентов (например, /clients/articles/index.php): отступы задают сами блоки */
.page-content main > br { display: none; }

/* Отзывы о магазине */
.shop-reviews { max-width: 52rem; }
.review__stars { display: inline-flex; gap: 2px; color: var(--line-strong); }
.review__stars .is-on { color: var(--brand); fill: currentColor; }
.review__product {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--link);
}

/* Контакты */
.contacts-grid { display: grid; gap: 16px; }
.contact-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: var(--card-radius);
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.contact-card__city { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-lg); font-weight: 700; }
.contact-card__phone { font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (hover: hover) {
  .contact-card__phone:hover { color: var(--link); }
}
.contact-card__rows { display: grid; gap: 8px; font-size: var(--fs-sm); color: var(--ink-2); }
.contact-card__rows li { display: flex; align-items: flex-start; gap: 8px; }
.contact-card__rows .ep-icon { margin-top: 1px; color: var(--brand-ink); }
.contact-card__map { overflow: hidden; border-radius: var(--r-md); background: var(--surface-2); aspect-ratio: 4 / 3; }
.contact-card__map iframe { display: block; width: 100%; height: 100%; border: 0; }
.contact-card__route { min-height: 40px; font-size: var(--fs-sm); }
.contact-card__photos-title { font-size: var(--fs-sm); font-weight: 600; }
.contact-card__gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.contact-card__gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); }
.contacts-extra { display: grid; gap: 16px; margin-top: 16px; }
.contacts-box { display: grid; justify-items: start; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: var(--card-radius); background: var(--surface-2); }
.contacts-box__title { font-size: var(--fs-md); font-weight: 700; }
.contacts-box__list { display: grid; gap: 8px; }
.contacts-box__list li { display: flex; align-items: center; gap: 8px; }
.contacts-box__list .ep-icon { color: var(--brand-ink); }
.contacts-box__list a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.contacts-box__text { font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-2); }
@media (min-width: 768px) {
  .contacts-extra { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .contacts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}

/* Вход, регистрация, восстановление и смена пароля */
.page-content main .frame, .page-content main .frameWrapper { display: block; }
/* Страницы без .container (вход и пароль, формы /request/, выбор города): обёртка .frameWrapper — контейнер, как .ep-container */
.page-content main > .frame > .frameWrapper {
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.auth-card { max-width: 30rem; padding-block: 8px var(--section-y); }
/* Регистрация и пароль: карточка — прямой потомок main, без обёртки страницы: отступ — край контента .ep-container */
.page-content main > .auth-card { margin-inline: max(var(--gutter), (100% - var(--container)) / 2); }
.auth-card__lead { margin-bottom: 12px; color: var(--ink-2); }
.auth-form { padding: 20px; }
.auth-form__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.auth-form__link, .auth-card__alt a, .auth-form .form__error a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.auth-form__link { display: inline-flex; align-items: center; min-height: 40px; font-size: var(--fs-sm); font-weight: 500; }
.auth-form__submit { width: 100%; }
.auth-form__captcha { border-radius: var(--r-sm); }
.auth-card__alt { margin-top: 16px; font-size: var(--fs-sm); color: var(--ink-2); }
.ep-field__hint { font-size: var(--fs-xs); color: var(--muted); }
.password-field { position: relative; }
.password-field .ep-field__input { padding-right: 52px; }
.password-field__toggle {
  position: absolute;
  top: 50%; right: 4px;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 10px;
  color: var(--muted);
  transform: translateY(-50%);
}
.password-field__toggle[aria-pressed="true"] { color: var(--ink); }
@media (hover: hover) {
  .password-field__toggle:hover { color: var(--ink); background: var(--surface-3); }
}

/* Веб-форма на странице («Задать вопрос», «Оставить отзыв») */
.form-card { max-width: 40rem; margin-top: 32px; padding: 20px 20px 4px; border-radius: var(--card-radius); background: var(--surface); box-shadow: var(--sh-1); }
.form-card__title { font-size: var(--fs-lg); font-weight: 700; }
.form-card .form { padding: 16px 0; box-shadow: none; background: none; }
/* «Сообщить о поступлении» (/ajax/add2notice/): товар над формой, ссылка на него — и после отправки */
.notice-card { margin-top: 8px; }
.notice-card__lead { color: var(--ink-2); }
.notice-card__good { margin-top: 8px; color: var(--ink); font-weight: 600; }
.notice-card :is(.notice-card__good, .form-success) a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.notice-card .form-success { margin-bottom: 16px; }

/* Выбор города (/change_city/, разметка страницы и виджета местоположений Битрикса):
   города со складами — чипы, поиск любого города — поле и кнопка нового вида */
.cityListBlock { display: grid; gap: 24px; max-width: 40rem; padding-top: 8px; }
.cityList { display: flex; flex-wrap: wrap; gap: 8px; }
.cityList a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid var(--chip-line);
  border-radius: var(--r-pill);
  background: var(--chip-bg);
  color: var(--chip-ink);
  font-weight: 500;
  transition: border-color .15s ease, color .15s ease;
}
@media (hover: hover) {
  .cityList a:hover { border-color: var(--chip-line-hover); color: var(--ink); }
}
.cityListBlock form { display: grid; gap: 12px; padding: 20px; border-radius: var(--card-radius); background: var(--surface); box-shadow: var(--sh-1); }
.cityListBlock form > p:first-child { color: var(--ink); font-weight: 600; }
.cityListBlock form > p:empty { display: none; } /* лишний незакрытый <p> в разметке страницы */
:is(.cityListBlock, .address-form__location) .bx-sls .dropdown-block {
  min-height: 48px;
  padding: 0 40px;
  border: 1.5px solid var(--field-line);
  border-radius: 12px;
  background-color: var(--field-bg);
  box-shadow: none;
  font-size: 1rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
:is(.cityListBlock, .address-form__location) .bx-sls .dropdown-block:focus-within { border-color: var(--focus); box-shadow: 0 0 0 4px var(--focus-ring-soft); background-color: var(--surface); }
:is(.cityListBlock, .address-form__location) .bx-sls .bx-ui-sls-container { min-height: 45px; } /* поля виджета лежат в нём абсолютно — иначе обрезаются по 25px */
:is(.cityListBlock, .address-form__location) .bx-sls input[type="text"] { width: 100%; min-height: 45px; border: 0; background: transparent; color: var(--ink); font-size: 1rem; outline: none; }
:is(.cityListBlock, .address-form__location) .bx-sls input[type="text"]::placeholder { color: var(--field-placeholder); opacity: 1; }
:is(.cityListBlock, .address-form__location) .bx-sls :is(.dropdown-icon, .bx-ui-sls-clear, .bx-ui-sls-loader) { top: 50%; margin-top: 0; transform: translateY(-50%); }
:is(.cityListBlock, .address-form__location) .bx-sls .dropdown-icon { left: 14px; }
:is(.cityListBlock, .address-form__location) .bx-sls .bx-ui-sls-clear { right: 6px; }
:is(.cityListBlock, .address-form__location) .bx-sls .dropdown-fade2white { display: none; }
:is(.cityListBlock, .address-form__location) .bx-sls .bx-ui-sls-pane { top: calc(100% + 4px); z-index: 5; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--sh-2); }
:is(.cityListBlock, .address-form__location) .bx-sls .dropdown-item { margin: 0; padding: 10px 12px; border-radius: 8px; }
:is(.cityListBlock, .address-form__location) .bx-sls .dropdown-item-text { color: var(--muted); }
:is(.cityListBlock, .address-form__location) .bx-sls .dropdown-item-text span { color: var(--ink); }
:is(.cityListBlock, .address-form__location) .bx-sls :is(.bx-ui-sls-variant-active, .dropdown-item:hover) { background-color: var(--surface-3); }
.cityListBlock [type="submit"] {
  min-height: 48px;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--btn-radius);
  background: var(--brand);
  color: var(--on-brand);
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, transform .1s ease;
}
.cityListBlock [type="submit"]:active { background: var(--brand-press); transform: scale(0.96); }
@media (hover: hover) {
  .cityListBlock [type="submit"]:hover { background: var(--brand-hover); }
}

/* Ошибка 404 (общий /404.php, старая разметка): заголовок — в шапке страницы, кнопки — нового вида; главное действие — каталог */
.page-404 .err-page { padding: 0 0 var(--section-y); }
.page-404 .err-page .container { max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.page-404 .err-page .page__title { display: none; } /* второй H1 — тот же заголовок уже в шапке страницы */
.page-404 .err-page p { color: var(--ink-2); font-size: var(--fs-md); }
.page-404 .error__buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.page-404 .error-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--btn-radius);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  transition: background-color .15s ease, border-color .15s ease;
}
.page-404 .error-link[href="/catalog/"] { border-color: transparent; background: var(--brand); color: var(--on-brand); }
@media (hover: hover) {
  .page-404 .error-link:hover { border-color: var(--ink); }
  .page-404 .error-link[href="/catalog/"]:hover { border-color: transparent; background: var(--brand-hover); }
}

/* SEO-текст раздела */
.seo-text__grid { display: grid; gap: 16px; margin-top: 16px; }
.seo-text__aside { padding: 18px; border-radius: 14px; background: var(--surface); box-shadow: var(--sh-1); }
@media (min-width: 1024px) {
  .seo-text__grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
}

/* ==========================================================================
   Карточка товара: цена и «В корзину» в навигации по разделам
   С 1024px появляются, когда навигация прилипла к шапке: верхний блок покупки к этому моменту уже ушёл вверх,
   поэтому две кнопки одновременно не видны. Боковой блок покупки у разделов убран — разделы на всю ширину.
   На телефоне и планшете — прежняя нижняя панель покупки.
   ========================================================================== */
.page-nav--buy { display: flex; align-items: center; gap: 16px; }
.page-nav__nav { flex: 1; min-width: 0; }
.page-nav__buy { display: none; }
.page-nav__price { font-size: var(--fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* кнопка — не ссылка раздела: без высоты, отступов и серого цвета ссылок навигации */
.page-nav__buy .ep-btn { min-height: 40px; padding: 8px 16px; white-space: nowrap; }
.page-nav__buy .ep-btn--primary { color: var(--on-brand); }
.page-nav__buy .ep-btn--secondary { color: var(--ink); }
@media (min-width: 1024px) {
  .pdp-layout { grid-template-columns: minmax(0, 1fr); }
  .page-nav__buy {
    display: flex;
    flex: none;
    align-items: center;
    gap: 16px;
    opacity: 0;
    visibility: hidden; /* скрытая кнопка не получает фокус и не читается диктором */
    transition: opacity .15s ease, visibility 0s linear .15s;
  }
  .page-nav.is-stuck .page-nav__buy { opacity: 1; visibility: visible; transition: opacity .15s ease, visibility 0s; }
}

/* ==========================================================================
   Набор в карточке товара (экран и подходящие матрицы): версии под заголовком, сводка наличия, список вариантов
   ========================================================================== */
.pdp__versions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pdp__versions .chip[aria-current="page"] { border-color: var(--brand); background: var(--brand-soft); color: var(--ink); font-weight: 600; }
.buybox__variants { margin-top: 14px; font-size: var(--fs-sm); }
.variant-list { margin-top: 16px; }
/* Телефон: название и наличие, ниже — цена и кнопка; с 768px — в одну строку */
.variant {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "info info" "price buy";
  align-items: center;
  gap: 10px 16px;
  padding-block: 16px;
  border-top: 1px solid var(--line);
}
.variant:last-child { padding-bottom: 0; }
.variant__info { grid-area: info; display: grid; justify-items: start; gap: 6px; }
.variant__name { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; overflow-wrap: anywhere; }
@media (hover: hover) {
  .variant__name:hover { text-decoration-color: currentColor; }
}
.variant__stock { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.variant .stock { font-size: var(--fs-sm); }
.variant__price { grid-area: price; font-size: var(--fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.variant__price s { margin-left: 6px; font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
.variant__buy { grid-area: buy; justify-self: end; max-width: 100%; }
.variant .ep-btn { white-space: normal; } /* «Сообщить о поступлении» переносится на узком экране, а не вылезает */
@media (min-width: 768px) {
  .variant { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "info price buy"; }
}

/* ==========================================================================
   Выбор города: поиск населённого пункта в меню и подсказка «Ваш город — …?» (main.js, ajax/location.php)
   ========================================================================== */
.city__search { padding: 6px 6px 8px; }
.city__input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--field-line);
  border-radius: 10px;
  background: var(--field-bg);
  color: var(--field-ink);
  font-size: var(--fs-base);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.city__input:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 4px var(--focus-ring-soft); background: var(--surface); }
.city__input::placeholder { color: var(--field-placeholder); opacity: 1; }
.city__results:not(:empty) { max-height: min(50vh, 360px); overflow-y: auto; margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.city__empty { padding: 10px 12px; font-size: var(--fs-sm); color: var(--muted); }
.city__confirm {
  position: absolute;
  z-index: 80;
  top: calc(100% + 2px);
  left: -12px;
  width: max-content;
  max-width: min(320px, calc(100vw - 24px));
  padding: 14px 16px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--sh-3);
}
.city__confirm-text { margin-bottom: 10px; }
.city__confirm-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Карточка товара: самая дешёвая доставка в город посетителя (ajax/delivery.php, product.js) */
.buybox__delivery { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: var(--fs-sm); color: var(--ink-2); }
.buybox__delivery .ep-icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--muted); }
.buybox__delivery b { color: var(--ink); font-weight: 600; }

/* Вход через Яндекс ID и Google (include/social-auth.php) — вход, регистрация, оформление заказа */
.ep-social { display: grid; gap: 12px; margin-top: 16px; }
.ep-social__or { display: flex; align-items: center; gap: 12px; font-size: var(--fs-sm); color: var(--muted); }
.ep-social__or::before, .ep-social__or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.ep-social__lead { font-weight: 600; }
.ep-social__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 8px; }
.ep-social__btn { gap: 10px; }
.ep-social__icon { width: 20px; height: 20px; flex: none; }
.ep-social__note { font-size: var(--fs-xs); color: var(--muted); }
.ep-social__note a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.order__form-block > .ep-social { margin: 0 0 24px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }

/* ==========================================================================
   Личный кабинет (body.page-account, include/personal/): меню, личные данные и адреса, заказы, заказ, оплата.
   Поле города в адресе — виджет местоположений: правила .bx-sls в блоке «Выбор города»
   ========================================================================== */
.account { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-block: 8px var(--section-y); }
.account__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; align-content: start; }
.account__aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border-radius: var(--card-radius);
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.account-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
.account-user__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface-inverse);
  color: var(--on-inverse);
  font-size: var(--fs-md);
  font-weight: 700;
}
.account-user__text { min-width: 0; }
.account-user__name { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.account-user__email { font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }

/* Пункты меню: на телефоне — лента с прокруткой (следующий пункт виден краем), на широком экране — список */
.account-nav__list {
  display: flex;
  gap: 8px;
  margin-inline: -16px;
  padding: 2px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.account-nav__list::-webkit-scrollbar { display: none; }
.account-nav__list > li { flex: none; }
.account-nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px 10px 12px;
  border: 1px solid var(--chip-line);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.account-nav__link .ep-icon { width: 20px; height: 20px; color: var(--muted); }
.account-nav__link[aria-current] { border-color: var(--brand); background: var(--brand-soft); color: var(--ink); font-weight: 600; }
.account-nav__link[aria-current] .ep-icon { color: var(--brand-ink); }
@media (hover: hover) {
  .account-nav__link:hover { border-color: var(--chip-line-hover); color: var(--ink); }
}

.account-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
  padding: 20px 16px;
  border-radius: var(--card-radius);
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.account-card__title { font-size: var(--fs-lg); font-weight: 700; line-height: 1.25; }
.account-card__count { margin-left: 4px; font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
.account-card__lead { color: var(--ink-2); }
.account__notice { align-items: center; }
.account-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-self: start;
  min-height: 40px;
  color: var(--link);
  font-size: var(--fs-sm);
  font-weight: 500;
}
@media (hover: hover) {
  .account-back:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* Формы кабинета: личные данные (alente:form personal) и адрес (delivery) — template_ep.php */
.account-form, .address-form { display: grid; gap: 16px; }
.account-form__errors { margin-top: 4px; padding-left: 1.25em; list-style: disc; }
.account-form__section { display: grid; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.account-form__subtitle { font-size: var(--fs-md); font-weight: 600; }
.account-form__section .ep-field { max-width: 24rem; }
.address-form__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; }
.address-form__field { grid-column: 1 / -1; }
.address-form__field--short { grid-column: auto; }

/* Адреса: строка раскрывается в форму правки (details), удаление — отдельная форма POST с подтверждением */
.address-list { display: grid; gap: 8px; }
.address-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.address-item__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 4px 10px 14px;
  border-radius: var(--r-md);
  list-style: none;
  cursor: pointer;
}
.address-item__summary::-webkit-details-marker { display: none; }
.address-item__icon { width: 20px; height: 20px; color: var(--muted); }
.address-item__text { flex: 1; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.address-item__toggle { flex: none; color: var(--link); font-size: var(--fs-sm); font-weight: 600; }
.address-item__toggle-close,
.address-item__details[open] .address-item__toggle-edit { display: none; }
.address-item__details[open] .address-item__toggle-close { display: inline; }
.address-item__form { padding: 6px 4px 16px 14px; }
.address-item__delete { padding: 4px; }
.address-item__remove { color: var(--muted); }
@media (hover: hover) {
  .address-item__summary:hover .address-item__toggle { text-decoration: underline; text-underline-offset: 3px; }
  .address-item__remove:hover { background: var(--danger-soft); color: var(--danger); }
}
.address-add__toggle { list-style: none; cursor: pointer; }
.address-add__toggle::-webkit-details-marker { display: none; }
.address-add__toggle .ep-icon { transition: transform .15s ease; }
.address-add__label-close,
.address-add[open] .address-add__label-open { display: none; }
.address-add[open] .address-add__label-close { display: inline; }
.address-add[open] .address-add__toggle .ep-icon { transform: rotate(45deg); }
.address-add__form { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }

/* Заказы: фильтр и карточки — вся карточка ссылка на заказ (ссылка в заголовке растянута), «Оплатить» поверх */
.orders-filter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 12px; }
.orders-filter__status, .orders-filter__actions { grid-column: 1 / -1; }
.orders-filter .ep-field { grid-template-columns: minmax(0, 1fr); }
.orders-filter .ep-field__input { min-width: 0; }
.orders-filter__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.orders-filter__reset {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--link);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.order-list { display: grid; gap: 12px; }
.order-card {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 16px 40px 16px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.order-card__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title sum" "status status"; align-items: center; gap: 6px 12px; }
.order-card__title { grid-area: title; font-size: var(--fs-md); font-weight: 700; line-height: 1.3; }
.order-card__status { grid-area: status; justify-self: start; }
.order-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.order-card__link:focus-visible { outline: none; }
.order-card__link:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; }
.order-card__sum { grid-area: sum; font-size: var(--fs-md); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.order-card__meta { font-size: var(--fs-sm); color: var(--muted); }
.order-card__info { display: grid; gap: 4px; font-size: var(--fs-sm); }
.order-card__info > div, .order-summary__info > div { display: grid; gap: 2px; }
.order-card__info dt, .order-summary__info dt { color: var(--muted); }
.order-card__info dd { color: var(--ink-2); overflow-wrap: anywhere; }
.order-card__track { font-family: var(--font-mono); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.order-card__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.order-card__chevron { position: absolute; top: 50%; right: 12px; width: 20px; height: 20px; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
@media (hover: hover) {
  .order-card:hover { border-color: var(--line-strong); box-shadow: var(--sh-1); }
  .order-card:hover .order-card__title { color: var(--link); }
}
.tag--danger { background: var(--danger-soft); color: var(--danger); }

/* Заказ: товары и итог (строки сумм — общие с корзиной: .cart-summary__line, .cart-summary__total) */
.order-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.order-head__title { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); font-weight: 700; line-height: 1.2; }
.order-head__date { flex-basis: 100%; font-size: var(--fs-sm); color: var(--muted); }
.order-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.order-lines { display: grid; }
.order-line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-areas: "media info" "media sum";
  gap: 4px 12px;
  padding-block: 12px;
  border-top: 1px solid var(--line);
}
.order-line:first-child { padding-top: 0; border-top: 0; }
.order-line__media {
  grid-area: media;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-media);
}
.order-line__media img { width: 100%; height: 100%; object-fit: contain; }
.order-line__info { grid-area: info; min-width: 0; }
.order-line__title { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
@media (hover: hover) {
  a.order-line__title:hover { color: var(--link); }
}
.order-line__price { margin-top: 2px; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.order-line__sum { grid-area: sum; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.order-repeat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.order-repeat__hint { font-size: var(--fs-sm); color: var(--muted); }
.order-summary { gap: 12px; }
.order-summary__info { display: grid; gap: 10px; font-size: var(--fs-sm); }
.order-summary__info dd { color: var(--ink); overflow-wrap: anywhere; }
.order-summary__lines { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.order-summary__pay { width: 100%; }

/* Оплата: способ и сумма, ниже — кнопка банка из шаблона платёжной системы (оформление банка) */
.pay-card__system { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.pay-card__logo { flex: none; max-width: 120px; height: auto; }
.pay-card__name { font-weight: 600; }
.pay-card__sum { font-size: var(--fs-sm); color: var(--ink-2); }
.pay-card__sum b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.pay-card__action { padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-2); }
.pay-card__action .wf-error-code { font-weight: 600; color: var(--danger); }

@media (min-width: 640px) {
  .order-card__head { display: flex; flex-wrap: wrap; }
  .order-card__sum { margin-left: auto; }
  .order-card__info > div { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 8px; }
  .order-line { grid-template-columns: 88px minmax(0, 1fr) auto; grid-template-areas: "media info sum"; align-items: center; gap: 16px; }
  .order-line__sum { text-align: right; }
}
@media (min-width: 768px) {
  .account-card { padding: 24px 28px; }
  .orders-filter { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
  .orders-filter__status, .orders-filter__actions { grid-column: auto; }
}
@media (min-width: 1024px) {
  .account { grid-template-columns: 272px minmax(0, 1fr); gap: 24px; align-items: start; }
  .account__aside { position: sticky; top: calc(var(--header-h) + 16px); gap: 16px; padding: 20px 12px; }
  .account-user { padding-inline: 8px; }
  .account-nav__list { display: grid; gap: 2px; margin: 0; padding: 0; overflow: visible; }
  .account-nav__list > li:last-child { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
  .account-nav__link { padding: 10px 12px; border: 0; border-radius: var(--r-md); font-size: var(--fs-base); }
  .account-nav__link[aria-current] { box-shadow: inset 3px 0 0 var(--brand); }
}
@media (min-width: 1024px) and (hover: hover) {
  .account-nav__link:hover { background: var(--surface-3); }
  .account-nav__link[aria-current]:hover { background: var(--brand-soft); }
}
@media (min-width: 1280px) {
  .order-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
  .order-summary { position: sticky; top: calc(var(--header-h) + 16px); }
}

/* Карточка товара: совместимость компактно — модели в несколько колонок, P/N под ними на всю ширину */
.compat-grid { grid-template-columns: none; gap: 24px; }
.model-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: 4px 12px; }
.model-list li { gap: 8px; padding: 6px 10px; border-radius: 8px; font-size: var(--fs-sm); font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.model-list .ep-icon { flex: none; width: 16px; height: 16px; }
@media (min-width: 768px) {
  .model-list { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
}

/* Карточка товара: описание шире — как текстовые страницы (.ep-prose, 46rem) */
.pdp-section .prose { max-width: 46rem; }

/* Поиск в шапке: шапка липкая и сама попадает в scroll-padding-top, поэтому Chrome на каждый символ «показывал каретку» — прокручивал страницу вверх */
html:has(.ep-header .ep-search__input:focus) { scroll-padding-top: 0; }

/* Окно со страницей (footer.php, #page-dialog): вход и «Сообщить о поступлении» — карточка формы со своей страницы
   в окне без своих отступов, фона и тени, как форма «Задать вопрос» */
.modal__body { padding: 8px 24px 24px; }
.modal__body > .modal__text { margin: 0; }
.modal__body :is(.auth-card, .notice-card) { max-width: none; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.modal .modal__body .form { padding: 12px 0 0; background: none; box-shadow: none; }

/* Окно «Товар добавлен в корзину» (footer.php, #cart-dialog; js/main.js): товар, итог корзины и две кнопки —
   «Перейти в корзину» и «Оформить заказ» (основная); мимо окна, Esc или крестик — продолжить покупки */
.cart-dialog__title { display: flex; align-items: flex-start; gap: 8px; line-height: 1.25; text-wrap: balance; }
.cart-dialog__title .ep-icon { flex: none; margin-top: 1px; color: var(--ok); } /* по первой строке заголовка */
.cart-dialog__product { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: center; gap: 14px; margin-top: 8px; }
.cart-dialog__product:has(> [hidden]) { grid-template-columns: minmax(0, 1fr); }
.cart-dialog__media {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-media);
}
.cart-dialog__media[hidden] { display: none; } /* без фото товара — только название и цена */
.cart-dialog__media img { width: 100%; height: 100%; object-fit: contain; }
.cart-dialog__info { min-width: 0; }
.cart-dialog__name {
  display: -webkit-box;
  overflow: hidden;
  font-weight: 600;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.cart-dialog__price { margin-top: 4px; font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; }
.cart-dialog__warning { margin-top: 14px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--warn-soft); color: var(--warn); font-size: var(--fs-sm); }
.cart-dialog__total { margin-top: 14px; font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cart-dialog__total:empty { display: none; }
.cart-dialog__actions { display: grid; gap: 10px; margin-top: 18px; }
@media (min-width: 480px) {
  .cart-dialog__actions { grid-template-columns: 1fr 1fr; }
}

/* Виджет Битрикс24 «Открытые линии» (скрипт портала; цвет в настройках портала — #0072BC, он общий с рабочим сайтом).
   В новом дизайне — как знак логотипа (img/logo.svg): синий круг #2369B0 и оранжевый штрих в верхнем левом углу.
   Цвет виджет пишет в атрибут style, поэтому здесь !important; у шапки чата в style стоит !important — её перекрывает фон-градиент */
.b24-widget-button-wrapper, .b24-widget-button-popup, .bx-livechat-wrapper, .ep-chat-tab { --ep-b24: #2369B0; }
.b24-widget-button-wrapper :is(.b24-widget-button-inner-block, .b24-widget-button-inner-mask) { background: var(--ep-b24) !important; }
.b24-widget-button-wrapper .b24-widget-button-pulse { border-color: var(--ep-b24) !important; }
.b24-widget-button-wrapper .b24-widget-button-openline_livechat { background-color: var(--ep-b24) !important; }
:is(.b24-widget-button-popup, .b24-widget-button-popup-triangle) { border-color: var(--ep-b24) !important; }
.b24-widget-button-wrapper .b24-widget-button-inner-container::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 3px solid transparent;
  border-top-color: var(--brand);
  border-radius: 50%;
  transform: rotate(-45deg); /* дуга от 9 до 12 часов — как оранжевый уголок знака */
  pointer-events: none;
}
.bx-livechat-wrapper .bx-livechat-head { background-image: linear-gradient(var(--ep-b24), var(--ep-b24)) !important; }

/* Кнопка чата на телефоне и планшете (js/main.js, «Кнопка чата Битрикс24»): по умолчанию — справа внизу над нижней панелью
   покупки и плашкой cookie, с теми же отступами, что у кнопки чата прототипа .chat-fab. Её можно перетащить (прилипает к краю)
   и смахнуть за край — тогда у края остаётся язычок .ep-chat-tab, он возвращает кнопку */
@media (max-width: 1023.98px) {
  .b24-widget-button-wrapper.b24-widget-button-position-bottom-right { right: 12px; bottom: 16px; }
  .b24-widget-button-wrapper.b24-widget-button-position-bottom-left { left: 12px; bottom: 16px; }
  .has-buybar .b24-widget-button-wrapper { bottom: 88px; }
  .b24-widget-button-wrapper .b24-widget-button-inner-container { touch-action: none; } /* палец на кнопке тащит её, а не страницу */
  .b24-widget-button-wrapper { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* без выделения текста при перетаскивании */
}
@media (max-width: 767.98px) {
  .has-cookie .b24-widget-button-wrapper { bottom: 104px; }
  .has-buybar.has-cookie .b24-widget-button-wrapper { bottom: 184px; }
}
.b24-widget-button-wrapper.ep-chat-hidden { display: none !important; }
.b24-widget-button-wrapper.ep-chat-dragging { opacity: .9; }
.b24-widget-button-wrapper.ep-chat-dragging .b24-widget-button-popup { display: none; }
.ep-chat-tab {
  position: fixed;
  z-index: 10150; /* как у кнопки виджета */
  right: 0;
  display: grid;
  place-items: center;
  width: 30px; height: 52px;
  padding: 0;
  border: 0;
  border-radius: 14px 0 0 14px;
  background: var(--ep-b24);
  color: #fff;
  box-shadow: var(--sh-2);
  cursor: pointer;
}
.ep-chat-tab--left { right: auto; left: 0; border-radius: 0 14px 14px 0; }
.ep-chat-tab .ep-icon { width: 20px; height: 20px; }
.ep-chat-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Карточка товара: артикул — Roboto Mono с перечёркнутым нулём (подключён в catalog.element/ep/template.php);
   «Наличие на сайте актуальное» — заметнее: крупнее, зелёным */
.sku__code { font-family: 'Roboto Mono', var(--font-mono); }
.buybox__fresh { gap: 8px; margin-top: 10px; font-size: var(--fs-sm); font-weight: 600; color: var(--ok); }
.buybox__fresh .ep-icon { width: 18px; height: 18px; }

/* Карточка товара: наличие по складам — много: 3 зелёные полоски, достаточно: 2 оранжевые, мало: 1 красная */
.stock--mid { color: var(--warn); }
.stock--mid .stock__bars i:nth-child(-n+2) { opacity: 1; }
.stock--low { color: var(--danger); }

/* Карточка товара, «Совместимость»: нюансы товара из описания — первыми; длинные списки свёрнуты до 5 строк (product.js) */
.compat-intro { margin: 12px 0 0; color: var(--ink); }
.model-list.is-collapsed { overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent); mask-image: linear-gradient(to bottom, #000 65%, transparent); }
.compat-more { min-height: 40px; margin-top: 4px; font: inherit; font-size: var(--fs-sm); }
.compat-more:hover .ep-icon { transform: none; }
.compat-more[aria-expanded="true"] .ep-icon { transform: rotate(180deg); }

/* Карточка товара: выделение цветом из описания (result_modifier.php: style="color:…" → класс) и ссылки в тексте — видны как ссылки */
.prose .ep-red { color: var(--danger); }
.prose .ep-blue { color: var(--link); }
.prose a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) {
  .prose a:hover { text-decoration-thickness: 2px; }
}

/* Карточка товара, «Оплата и доставка»: способы доставки в город посетителя — срок и цена (product.js, ajax/delivery.php) */
.ship__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.ship__city { font: inherit; font-size: var(--fs-sm); color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.ship__status { font-size: var(--fs-sm); color: var(--muted); }
.ship__list { display: grid; }
.ship__row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.ship__row:first-child { border-top: 0; padding-top: 0; }
.ship__row .ep-icon { width: 20px; height: 20px; color: var(--icon-strong); }
.ship__name { display: grid; gap: 2px; font-weight: 600; color: var(--ink); }
.ship__note { font-weight: 400; color: var(--muted); }
.ship__price { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ship__badge { display: inline-block; justify-self: start; margin-top: 2px; padding: 1px 8px; border-radius: 6px; background: var(--ok-soft); color: var(--ok); font-size: 12px; font-weight: 600; }
.info-card__note + .info-card__head { margin-top: 8px; }

/* Карточка товара: переключение фото в увеличении — стрелки по краям и счётчик внизу (product.js) */
.lightbox__nav { position: absolute; top: 50%; translate: 0 -50%; background: var(--surface); box-shadow: var(--sh-1); }
.lightbox__nav--prev { left: 8px; }
.lightbox__nav--next { right: 8px; }
.lightbox__count { position: absolute; bottom: 10px; left: 50%; translate: -50% 0; padding: 2px 10px; border-radius: 999px; background: var(--surface); box-shadow: var(--sh-1); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.lightbox img { touch-action: pan-y; } /* горизонтальный свайп — переключение фото, вертикальная прокрутка остаётся */