/* Start:/local/templates/versta_desktop/components/bitrix/search.title/vd_overlay/style.css?179172675910531*/
/*
 * Поиск в шапке (экран 27, SiteHeader): поле-ссылка и оверлей под шапкой.
 * Открытие, фокус, Esc и блокировку прокрутки даёт ui.js; позицию (--vd-search-top) — script.js.
 * Цвета, шрифты, радиусы — токены --vd-*.
 */

.search-title {
    display: flex;
    min-width: 0;
}

/* ---------- Поле-ссылка в шапке ---------- */
.search-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 230px;
    padding: 10px 0;
    border-bottom: 1px solid var(--vd-divider);
    font: 13px / 1 var(--vd-font-text);
    color: inherit;
    transition: border-color var(--vd-transition);
}

.search-trigger:hover,
.search-trigger[aria-expanded="true"] {
    color: inherit;
    border-bottom-color: currentColor;
}

.search-trigger__icon {
    flex: none;
    width: 16px;
    height: 16px;
}

.search-trigger__text {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: .7;
}

/* Прозрачная шапка поверх фото: линия — полупрозрачный цвет текста */
.page--header-overlay .search-trigger {
    border-bottom-color: color-mix(in srgb, currentColor 30%, transparent);
}

.page--header-overlay .search-trigger:hover {
    border-bottom-color: currentColor;
}

/* Мега-меню открыто — шапка светлая, линия обычная */
.page--header-overlay .site-header.is-mega-open .search-trigger {
    border-bottom-color: var(--vd-divider);
}

/* ---------- Оверлей ---------- */
.search-overlay {
    position: fixed;
    top: var(--vd-search-top, 0px);
    right: 0;
    bottom: 0;
    left: 0;
    /* Под модалками и дроверами ui.js */
    z-index: calc(var(--vd-z-layer) - 10);
}

.search-overlay[hidden] {
    display: none;
}

/* Затемнение страницы под панелью */
.search-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: var(--vd-overlay);
    opacity: 0;
    transition: opacity var(--vd-transition);
}

.search-overlay.is-open .search-overlay__backdrop {
    opacity: 1;
}

.search-overlay__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 36px;
    max-height: 100%;
    padding: 40px var(--vd-gutter) 48px;
    border-bottom: 1px solid var(--vd-divider);
    background: var(--vd-white);
    color: var(--vd-ink);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--vd-transition), transform var(--vd-transition);
}

.search-overlay.is-open .search-overlay__panel {
    opacity: 1;
    transform: none;
}

.search-overlay__panel:focus {
    outline: none;
}

/* Строка ввода: крупный текст, красная каретка, «Esc — закрыть ✕» справа */
.search-overlay__form {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--vd-ink);
}

.search-overlay__input {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font: 400 clamp(30px, 3.06vw, 52px) / 1.1 var(--vd-font-text);
    letter-spacing: -.01em;
    color: var(--vd-ink);
    caret-color: var(--vd-accent);
    outline: none;
    appearance: none;
}

/* Фокус и так очевиден (каретка, линия под полем) — общий :focus-visible шаблона не нужен */
.search-overlay__input:focus-visible {
    outline: none;
}

.search-overlay__input::placeholder {
    color: var(--vd-text-5);
    opacity: 1;
}

.search-overlay__input::-webkit-search-cancel-button,
.search-overlay__input::-webkit-search-decoration {
    -webkit-appearance: none;
}

.search-overlay__close {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border: 0;
    background: none;
    font: 13px / 1 var(--vd-font-text);
    color: var(--vd-text-3);
    cursor: pointer;
    transition: color var(--vd-transition);
}

.search-overlay__close:hover {
    color: var(--vd-ink);
}

/* Идёт запрос — полоска под полем «дышит» */
.search-overlay.is-loading .search-overlay__form {
    border-bottom-color: var(--vd-text-3);
    transition: border-color .6s ease;
}

/*
 * Тело: слева (4fr) подсказки и «Недавно искали», справа (8fr) товары.
 * listbox растянут на обе колонки и делит их сеткой родителя (subgrid),
 * поэтому «Недавно искали» (вне listbox) встаёт в левую колонку под подсказки.
 */
.search-overlay__body {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-template-rows: auto 1fr;
    gap: 28px clamp(32px, 5vw, 72px);
}

/* Показывать нечего — тело не занимает места */
.search-overlay__body:not(:has(> :not([hidden]))) {
    display: none;
}

.search-overlay__results {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    min-width: 0;
}

.search-overlay__results[hidden] {
    display: none;
}

.search-overlay__status {
    grid-column: 1 / -1;
    grid-row: 1;
    max-width: 640px;
    font-size: var(--vd-fs-body);
    line-height: 1.5;
    color: var(--vd-text-2);
}

.search-overlay__status[hidden] {
    display: none;
}

.search-overlay__recent {
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
}

.search-overlay__recent[hidden] {
    display: none;
}

.search-overlay__recent-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}

.search-overlay__recent-head .search-suggest__label {
    padding-bottom: 0;
}

.search-overlay__chips {
    margin: 0;
    padding: 0;
    list-style: none;
}

.search-overlay__chip {
    padding: 10px 14px;
}

/* ---------- Подсказки из ajax.php ---------- */
.search-suggest {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.search-suggest--hints {
    grid-column: 1;
    grid-row: 1;
}

.search-suggest--products {
    grid-column: 2;
    grid-row: 1 / -1;
    gap: 16px;
}

.search-suggest__label {
    padding-bottom: 10px;
    font: 11px / 1 var(--vd-font-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vd-text-3);
}

.search-suggest__hint {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--vd-surface-2);
    font: 16px / 1.25 var(--vd-font-text);
    color: var(--vd-ink);
}

.search-suggest__hint-text {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Совпадение ядро оборачивает в <b> — жирным, остальное обычным */
.search-suggest__hint-text b {
    font-weight: 700;
}

.search-suggest__meta {
    flex: none;
    font-size: 12px;
    line-height: 1;
    color: var(--vd-text-4);
    white-space: nowrap;
}

.search-suggest__hint--all {
    font-weight: 600;
}

.search-suggest__hint--all::after {
    content: '→';
}

.search-suggest__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}

.search-suggest__head .search-suggest__label {
    padding-bottom: 0;
}

.search-suggest__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.search-suggest__product {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    color: var(--vd-ink);
}

.search-suggest__media {
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: var(--vd-radius-m);
    background: var(--vd-placeholder);
    overflow: hidden;
}

.search-suggest__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-suggest__name {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font: 13.5px / 1.3 var(--vd-font-text);
}

/* Цена плитки: .price из UI-кита, размер — по макету (14px) */
.search-suggest__price {
    gap: 4px 8px;
}

.search-suggest__price .price__current {
    font-size: 14px;
}

.search-suggest__price .price__old {
    font-size: 12px;
}

/* Выбранный стрелками вариант и наведение */
.search-suggest__hint:hover,
.search-suggest__hint.is-active,
.search-suggest__product:hover .search-suggest__name,
.search-suggest__product.is-active .search-suggest__name {
    color: var(--vd-accent);
}

.search-suggest__product.is-active .search-suggest__media {
    outline: 2px solid var(--vd-accent);
    outline-offset: 3px;
}

.search-suggest__all.is-active {
    color: var(--vd-accent);
}

/* ---------- Узкие экраны (планшеты получают десктоп-шаблон); точки — как у шапки ---------- */
@media (max-width: 1360px) {
    .search-trigger {
        width: 190px;
    }
}

/* Остаётся иконка: подпись только для скринридера */
@media (max-width: 1200px) {
    .search-trigger,
    .page--header-overlay .search-trigger {
        width: auto;
        padding: 6px 0;
        border-bottom-color: transparent;
    }

    .search-trigger__text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

@media (max-width: 1024px) {
    .search-overlay__panel {
        gap: 28px;
        padding-block: 28px 36px;
    }

    .search-overlay__body {
        display: flex;
        flex-direction: column;
    }

    .search-overlay__results {
        display: flex;
        flex-direction: column;
        gap: 28px;
    }

    .search-suggest__grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

@media (max-width: 767px) {
    .search-overlay__close {
        font-size: 0;
        gap: 0;
    }

    .search-overlay__close-x {
        font-size: 18px;
    }
}

/* End */


/* Start:/local/templates/versta_desktop/components/bitrix/sale.basket.basket.line/vd_minicart/style.css?17917267597117*/
/*
 * Мини-корзина (BES-62, экран 09): иконка в шапке и дровер.
 * Каркас дровера (.drawer, __head / __body / __foot), кнопки, степпер, цена, прогресс — из UI-кита (ui.css).
 */

/* ---------- Иконка в шапке ---------- */
.mini-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.mini-cart__toggle {
    position: relative;
    display: inline-flex;
    width: 20px;
    height: 22px;
    color: inherit;
}

/* Иконка маленькая — расширяем область клика, не трогая раскладку шапки */
.mini-cart__toggle::before {
    content: '';
    position: absolute;
    inset: -11px -12px;
}

.mini-cart__icon {
    width: 20px;
    height: 22px;
}

.mini-cart__badge {
    position: absolute;
    top: -6px;
    right: -11px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: var(--vd-radius-pill);
    background: var(--vd-accent);
    color: var(--vd-white);
    font: 700 10px / 17px var(--vd-font-text);
    text-align: center;
    pointer-events: none;
}

/* ---------- Дровер ---------- */

/* Плашка «Добавили: …» над списком */
.mini-cart__notice {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 32px 6px;
    padding: 14px 16px;
    border-radius: var(--vd-radius-m);
    background: var(--vd-ink);
    color: var(--vd-white);
    font-size: 13.5px;
    line-height: 1.3;
}

.mini-cart__notice[hidden] {
    display: none;
}

.mini-cart__notice::before {
    content: '✓';
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--vd-accent);
    font: 700 11px / 1 var(--vd-font-text);
}

.mini-cart__notice--error::before {
    content: '!';
}

.mini-cart__notice-name {
    font-weight: 600;
}

.mini-cart__body--empty {
    display: flex;
    flex-direction: column;
    padding-top: 8px;
}

/* Пустое состояние из UI-кита рассчитано на страницу — в узком дровере заголовок скромнее */
.mini-cart__body--empty .empty-state__title {
    font-size: var(--vd-fs-h4);
}

.mini-cart__list {
    margin: 0;
    padding: 8px 0 0;
    list-style: none;
}

/* Позиция: фото 88×110 + описание */
.mini-cart-item {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--vd-surface-2);
    transition: opacity var(--vd-transition);
}

.mini-cart-item.is-loading {
    opacity: .5;
    pointer-events: none;
}

.mini-cart-item__media {
    display: block;
    height: 110px;
    border-radius: var(--vd-radius-s);
    background: var(--vd-placeholder);
    overflow: hidden;
}

.mini-cart-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mini-cart-item__info {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.mini-cart-item__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.mini-cart-item__name {
    min-width: 0;
    font: 600 14.5px / 1.3 var(--vd-font-text);
    overflow-wrap: anywhere;
}

.mini-cart-item__remove {
    margin: -5px -7px 0 0;
}

.mini-cart-item__variant {
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--vd-text-3);
}

.mini-cart-item__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 4px;
}

.mini-cart-item__price {
    flex-direction: row-reverse;
    justify-content: flex-start;
    text-align: right;
}

.mini-cart-item__price .price__current {
    font-size: 15px;
}

/* Бесплатная доставка: текст + полоска */
.mini-cart__shipping {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
}

.mini-cart__shipping-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 12.5px;
    line-height: 1.3;
}

.mini-cart__shipping-note {
    color: var(--vd-text-3);
    text-align: right;
}

/* «С этим покупают» */
.mini-cart__upsell {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 28px;
}

.mini-cart__upsell-title {
    font: 600 12px / 1 var(--vd-font-text);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--vd-text-3);
}

.mini-cart__upsell-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mini-cart-rec {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 10px;
    height: 100%;
    padding: 10px;
    border: 1px solid var(--vd-divider);
    border-radius: var(--vd-radius-m);
    transition: border-color var(--vd-transition);
}

.mini-cart-rec:hover {
    border-color: var(--vd-ink);
    color: inherit;
}

.mini-cart-rec__media {
    display: block;
    height: 64px;
    border-radius: var(--vd-radius-s);
    background: var(--vd-placeholder);
    overflow: hidden;
}

.mini-cart-rec__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mini-cart-rec__info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.mini-cart-rec__name {
    display: -webkit-box;
    font: 600 12.5px / 1.25 var(--vd-font-text);
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.mini-cart-rec__price {
    font-size: var(--vd-fs-caption);
    line-height: 1.2;
    color: var(--vd-text-2);
}

/* «+» — кружок; ведёт на карточку: размер выбирают там */
.mini-cart-rec__plus {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--vd-ink);
    color: var(--vd-white);
    transition: background-color var(--vd-transition);
}

.mini-cart-rec__plus::before,
.mini-cart-rec__plus::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 1.5px;
    background: currentColor;
    transform: translate(-50%, -50%);
}

.mini-cart-rec__plus::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.mini-cart-rec:hover .mini-cart-rec__plus {
    background: var(--vd-accent);
}

/* Итог и кнопки */
.mini-cart__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}

.mini-cart__total-label {
    font: 600 15px / 1 var(--vd-font-text);
}

.mini-cart__total-value {
    font: 700 26px / 1 var(--vd-font-text);
    white-space: nowrap;
}

@media (max-width: 767px) {
    .mini-cart__notice {
        margin-inline: 20px;
    }

    .mini-cart__upsell-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .mini-cart__total-value {
        font-size: 22px;
    }
}

/* End */


/* Start:/local/templates/versta_desktop/styles.css?179172675913122*/
/*
 * Типографика контента: HTML из визуального редактора (текстовые страницы, помощь, документы,
 * описания разделов, тексты новостей). Обёртка — <div class="content">…</div>,
 * раскладка страницы вокруг — .content-page в assets/css/layout.css.
 *
 * Битрикс подключает styles.css сам, в конце набора шаблона (после CSS компонентов),
 * и отдаёт его визуальному редактору. Поэтому:
 *  - все правила под :where(.content) — специфичность как у голого тега, любой класс компонента
 *    (.news-detail__text h2, .btn) их перекрывает независимо от порядка файлов;
 *  - у переменных есть запасные значения — в редакторе токенов base.css нет.
 */

:where(.content) {
    display: flow-root; /* обтекание картинок не вылезает за блок */
    max-width: 760px;
    font-size: var(--vd-fs-body, 15px);
    line-height: 1.65;
    color: var(--vd-text-2, #5f6268);
    overflow-wrap: break-word; /* длинные ссылки и цепочки &nbsp; не рвут колонку */
}

/* Широкая колонка: таблицы размеров, сертификаты */
:where(.content--wide) {
    max-width: none;
}

:where(.content) > :first-child {
    margin-top: 0;
}

:where(.content) > :last-child {
    margin-bottom: 0;
}

/* ---------- Заголовки ---------- */
:where(.content) :is(h1, h2, h3) {
    margin: 1.6em 0 .6em;
    font-family: var(--vd-font-display, Impact, 'Arial Narrow', sans-serif);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--vd-ink, #0a0a0a);
}

:where(.content) h1 { font-size: clamp(32px, 2.78vw, 40px); line-height: 1; }
:where(.content) h2 { font-size: clamp(26px, 2.22vw, 32px); line-height: 1; }
:where(.content) h3 { font-size: 22px; line-height: 1.1; letter-spacing: .08em; }

:where(.content) :is(h4, h5, h6) {
    margin: 1.4em 0 .5em;
    font-family: var(--vd-font-text, 'Helvetica Neue', Helvetica, Arial, sans-serif);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: var(--vd-ink, #0a0a0a);
}

:where(.content) h4 { font-size: 17px; }
:where(.content) :is(h5, h6) { font-size: var(--vd-fs-body, 15px); }

/* Заголовок сразу после заголовка — без двойного отступа */
:where(.content) :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
    margin-top: 0;
}

/* Редактор оборачивает заголовки в <strong> — вес уже 700 */
:where(.content) :is(h1, h2, h3, h4, h5, h6) :is(strong, b) {
    font-weight: inherit;
}

/* ---------- Текст ---------- */
:where(.content) :is(p, ul, ol, dl, table, pre, figure, blockquote) {
    margin: 0 0 1em;
}

:where(.content) :is(strong, b) {
    font-weight: 600;
    color: var(--vd-ink, #0a0a0a);
}

:where(.content) small {
    font-size: var(--vd-fs-small, 13px);
}

/* Выравнивание по ширине из редактора — с переносами, без «рек» пробелов */
:where(.content) [style*="justify"],
:where(.content) [align="justify"] {
    hyphens: auto;
}

/* Шрифт, вставленный из Word (Calibri, Times) — приводим к шрифту сайта */
:where(.content) [style*="font-family"],
:where(.content) font[face] {
    font-family: inherit !important;
}

:where(.content) a {
    color: var(--vd-ink, #0a0a0a);
    text-decoration: underline;
    text-decoration-color: var(--vd-line-strong, #d8d9dc);
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    transition: color var(--vd-transition, 200ms ease), text-decoration-color var(--vd-transition, 200ms ease);
}

:where(.content) a:hover {
    color: var(--vd-accent, #e8132b);
    text-decoration-color: currentColor;
}

:where(.content) hr {
    height: 0;
    margin: 2em 0;
    border: 0;
    border-top: 1px solid var(--vd-divider, #ececee);
}

/* ---------- Списки ---------- */
:where(.content) :is(ul, ol) {
    padding-left: 1.3em;
}

:where(.content) li + li {
    margin-top: .4em;
}

:where(.content) li::marker {
    color: var(--vd-text-3, #686b71);
}

:where(.content) li > :is(ul, ol) {
    margin: .4em 0 0;
}

:where(.content) dt {
    font-weight: 600;
    color: var(--vd-ink, #0a0a0a);
}

:where(.content) dd {
    margin: .2em 0 .8em;
}

/* ---------- Цитата ---------- */
:where(.content) blockquote {
    margin-block: 1.6em;
    padding: 4px 0 4px 24px;
    border-left: 2px solid var(--vd-ink, #0a0a0a);
    font-size: 20px;
    line-height: 1.45;
    color: var(--vd-ink, #0a0a0a);
}

:where(.content) blockquote p:last-child {
    margin-bottom: 0;
}

:where(.content) blockquote :is(cite, footer) {
    display: block;
    margin-top: 12px;
    font-size: var(--vd-fs-small, 13px);
    font-style: normal;
    color: var(--vd-text-3, #686b71);
}

/* ---------- Картинки, видео, фреймы ---------- */
:where(.content) :is(img, video, iframe) {
    max-width: 100%;
}

:where(.content) img {
    height: auto;
    border-radius: var(--vd-radius-s, 8px);
}

/* Высота из редактора (style="height: 400px") при ужатой ширине исказила бы пропорции */
:where(.content) img[style*="height"] {
    height: auto !important;
}

/* Картинка внутри строки текста (иконка) — не блочная */
:where(.content) p img:not(:only-child) {
    display: inline-block;
    vertical-align: middle;
}

/* Обтекание: float из редактора (style="float: left" или align="left") */
:where(.content) :is(img, figure)[style*="float: left"],
:where(.content) :is(img, figure)[style*="float:left"],
:where(.content) img[align="left"] {
    float: left;
    max-width: 50%;
    margin: .3em 28px 16px 0;
}

:where(.content) :is(img, figure)[style*="float: right"],
:where(.content) :is(img, figure)[style*="float:right"],
:where(.content) img[align="right"] {
    float: right;
    max-width: 50%;
    margin: .3em 0 16px 28px;
}

/* Картинка по центру (text-align: center у абзаца или margin auto) */
:where(.content) [style*="text-align: center"] img,
:where(.content) [style*="text-align:center"] img,
:where(.content) img[align="middle"] {
    margin-inline: auto;
}

:where(.content) figure img {
    width: 100%;
}

:where(.content) figcaption {
    margin-top: 10px;
    font-size: var(--vd-fs-small, 13px);
    line-height: 1.45;
    color: var(--vd-text-3, #686b71);
}

/* Видео-вставки (YouTube, VK, Rutube) — 16:9 на всю колонку */
:where(.content) iframe:is([src*="youtube"], [src*="youtu.be"], [src*="vk.com"], [src*="vkvideo"], [src*="rutube"]) {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--vd-radius-s, 8px);
}

/* ---------- Таблицы ---------- */
/*
 * 1. Таблица без ширины сама становится прокручиваемым блоком: по ширине — по содержимому,
 *    но не шире колонки; не влезает — горизонтальный скролл у таблицы, а не у страницы.
 * 2. Таблица с шириной из редактора (style="width: 100%", width="100%", фиксированная из Word) —
 *    на всю колонку. Просто блок со скроллом тут не годится: ширину получил бы блок (рамка, фон),
 *    а строки остались бы узкими. Поэтому:
 *    - одна группа строк (так пишут редактор и Word: только <tbody>) — таблица-блок со скроллом,
 *      а её <tbody> — таблица не уже блока: строки на всю колонку, широкое — прокручивается;
 *    - есть thead / tfoot / caption / colgroup (группы разъехались бы по колонкам) или браузер
 *      без :has() — обычная таблица на всю колонку без скролла, ячейки ужимаются (min-width: 0).
 * 3. Обёртка <div class="content__table"> — таблица на всю колонку, прокручивается обёртка.
 */
:where(.content) table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.5;
    -webkit-overflow-scrolling: touch;
}

/*
 * Ширина задана: атрибут width или свойство width в style (не border-width / max-width).
 * !important — иначе инлайновая ширина из Word (style="width: 638px") перебьёт колонку.
 */
:where(.content) table:where([width], [style^="width" i], [style*=" width" i], [style*=";width" i]) {
    display: table;
    width: 100% !important;
    overflow-x: visible;
}

:where(.content) table:where([width], [style^="width" i], [style*=" width" i], [style*=";width" i]):where(:not(:has(> thead, > tfoot, > caption, > colgroup, > tbody ~ tbody))) {
    display: block;
    overflow-x: auto;
}

:where(.content) table:where([width], [style^="width" i], [style*=" width" i], [style*=";width" i]):where(:not(:has(> thead, > tfoot, > caption, > colgroup, > tbody ~ tbody))) > tbody {
    display: table;
    width: 100%;
}

:where(.content__table) {
    max-width: 100%;
    margin: 0 0 1em;
    overflow-x: auto;
}

:where(.content__table) > table {
    display: table;
    width: 100%;
    margin: 0;
}

/* В обёртке таблица обычная — tbody снова группа строк (скролл у обёртки) */
:where(.content__table) > table > tbody {
    display: table-row-group;
    width: auto;
}

:where(.content) :is(th, td) {
    min-width: 4.5em; /* узкие колонки («84–88») не ломаются по тире — лучше прокрутка */
    padding: 12px 16px;
    border-top: 1px solid var(--vd-divider, #ececee);
    text-align: left;
    vertical-align: top;
}

/* Таблица с шириной без скролла — колонки ужимаются, а не вылезают за колонку текста */
:where(.content table:is([width], [style^="width" i], [style*=" width" i], [style*=";width" i])) :is(th, td) {
    min-width: 0;
}

/* Где таблица прокручивается (одна группа строк, обёртка) — узкие колонки снова держат ширину */
:where(.content table:is([width], [style^="width" i], [style*=" width" i], [style*=";width" i]):not(:has(> thead, > tfoot, > caption, > colgroup, > tbody ~ tbody))) :is(th, td),
:where(.content__table) :is(th, td) {
    min-width: 4.5em;
}

/* Ячейки из Word: нулевые отступы сверху-снизу («padding: 0cm 5.4pt») и чёрные рамки windowtext */
:where(.content) :is(th, td):where([style*="padding: 0cm" i], [style*="padding:0cm" i], [style*="padding: 0in" i], [style*="padding:0in" i]) {
    padding: 12px 16px !important;
}

:where(.content) :is(th, td):where([style*="windowtext" i]) {
    border-color: var(--vd-line-strong, #d8d9dc) !important;
}

:where(.content) th,
:where(.content) thead td {
    font-weight: 600;
    color: var(--vd-ink, #0a0a0a);
    background: var(--vd-surface, #f7f7f8);
}

:where(.content) :is(th, td) > :last-child {
    margin-bottom: 0;
}

:where(.content) caption {
    padding-bottom: 10px;
    font-size: var(--vd-fs-small, 13px);
    color: var(--vd-text-3, #686b71);
    text-align: left;
}

/* ---------- Код ---------- */
:where(.content) :is(code, kbd, samp) {
    padding: .1em .35em;
    border-radius: 4px;
    background: var(--vd-chip, #f4f4f6);
    font-family: var(--vd-font-mono, ui-monospace, Menlo, Consolas, monospace);
    font-size: .9em;
}

:where(.content) pre {
    padding: 16px 20px;
    border-radius: var(--vd-radius-s, 8px);
    background: var(--vd-surface, #f7f7f8);
    font-family: var(--vd-font-mono, ui-monospace, Menlo, Consolas, monospace);
    font-size: 13px;
    overflow-x: auto;
}

:where(.content) pre code {
    padding: 0;
    background: none;
}

/* ---------- Узкие экраны: обтекание снимаем ---------- */
@media (max-width: 767px) {
    :where(.content) :is(img, figure)[style*="float"],
    :where(.content) img[align="left"],
    :where(.content) img[align="right"] {
        float: none !important;
        max-width: 100%;
        margin: 0 0 16px;
    }

    :where(.content) blockquote {
        font-size: 17px;
    }
}

/* End */


/* Start:/local/templates/versta_desktop/template_styles.css?1791726759911*/
/*
 * VERSTA desktop — утилиты, которые должны идти ПОСЛЕДНИМИ.
 *
 * Битрикс подключает этот файл сам, в конце набора шаблона — после CSS компонентов.
 * Поэтому здесь только то, что обязано перекрывать стили компонентов.
 * Токены, сброс и типографика — assets/css/base.css (выводится первым, см. Layout::addBaseCss).
 */

/* Скрыть визуально, оставить для скринридеров */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* End */
/* /local/templates/versta_desktop/components/bitrix/search.title/vd_overlay/style.css?179172675910531 */
/* /local/templates/versta_desktop/components/bitrix/sale.basket.basket.line/vd_minicart/style.css?17917267597117 */
/* /local/templates/versta_desktop/styles.css?179172675913122 */
/* /local/templates/versta_desktop/template_styles.css?1791726759911 */