/* ПРОТОТИП: центральная часть карточки товара.
   Композиция и плотность - по образцу клиента (sklad-generator.ru),
   палитра - своя, из логотипа Ру-Техники (бриф UI/UX от 13.08.2026). */

/* ============================================================
   1. ЦВЕТОВАЯ СИСТЕМА
   Цвета взяты пипеткой из логотипа Ру-Техники:
   красный #d22232 (21% пикселей), графит #3e3d3e (66%), чернила #221e1f (7%).
   Тёмно-синий #24427c, который стоял здесь раньше, - фирменный цвет
   конкурента, из палитры убран полностью.
   Правило брифа "один экран - один главный красный акцент": красным красим
   только главную кнопку и активный переключатель. Ссылки, иконки, служебные
   элементы - графит; зелёный - только смысловые статусы ("В наличии").
   ============================================================ */
.wf-card,
.wf-wide {
    --wf-red: #d22232;
    --wf-red-dark: #b21c2a;
    --wf-red-soft: #fdf0f1;
    --wf-graphite: #3e3d3e;
    --wf-graphite-dark: #2e2d2e;
    --wf-green: #2f7d32;
    --wf-green-soft: #edf6ee;
    --wf-text: #221e1f;
    --wf-muted: #6d6b6e;
    --wf-line: #e3e2e4;
    --wf-bg: #f5f5f6;
    --wf-bg-deep: #ebebec;
}

/* Вертикальный ритм объявляем на общем родителе всех блоков карточки, а не
   только на наших: правило отступов ниже применяется и к блокам Aspro
   (вкладки характеристик, дисклеймер), у которых нет классов .wf-*. */
.catalog-detail__item {
    --wf-gap-section: 48px;
    --wf-gap-inner: 20px;
}

/* ============================================================
   2. РАСКЛАДКА: узкая галерея слева, широкая колонка справа
   Только для широких экранов. На телефоне у сайта свой шаблон
   (aspro-premier-mobile) со своей раскладкой - перестраивать колонки там
   нельзя, иначе галерея схлопнется в узкую полосу.
   ============================================================ */
@media (min-width: 768px) {
    .catalog-detail__main-parts {
        flex-wrap: wrap;
    }
    .catalog-detail__main-part--left,
    .catalog-detail__main-part--right {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }
    .catalog-detail__top-info .detail-gallery-big {
        flex: 0 0 450px;
        max-width: 450px;
    }
}
/* Нижняя часть (вкладки, дисклеймер, подарки) - строго друг под другом и на всю
   ширину, иначе справа от таблицы характеристик остаётся пустая полоса.
   !important обязателен: часть стилей Aspro подгружается отложенно и попадает в
   DOM позже нашего файла, поэтому при равной специфичности перебивает его. */
.catalog-detail__bottom-info > .detail-block,
.catalog-detail__bottom-info .props_block,
.catalog-detail__bottom-info .props_block__wrapper,
.catalog-detail__bottom-info .tab-content,
.catalog-detail__bottom-info .tab-pane,
.catalog-detail__bottom-info .properties-group {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Вкладки с характеристиками подняты сразу после первого экрана (было - в самом
   низу, после блока доверия и аналогов). wf_card_wide.php и
   .catalog-detail__bottom-info - соседи под одним родителем
   (.catalog-detail__item), но их блоки в разных обёртках. Делаем родителя
   flex-колонкой, а сами обёртки - display:contents, чтобы все блоки
   сортировались одним общим order. */
.catalog-detail__item.flex-1 {
    display: flex !important;
    flex-direction: column !important;
}
.catalog-detail__item.flex-1 > .wf-wide,
.catalog-detail__item.flex-1 > .catalog-detail__bottom-info {
    display: contents;
}
/* ВАЖНО: блокам без своего номера flex даёт order 0, то есть поднимает их
   ВЫШЕ первого экрана (у него order 1). Так наверх карточки уехал штатный
   блок «Статьи». Поэтому всем блокам нижней части сначала задаём общий
   большой номер - любой блок решения, нынешний или будущий, встанет в конец,
   а не над товаром, - и только потом расставляем свои. */
.catalog-detail__item.flex-1 > .catalog-detail__bottom-info > * {
    order: 20;
}
.catalog-detail__top-info { order: 1; }
.catalog-detail__item.flex-1 > .catalog-detail__bottom-info > .tabs-block { order: 2; }
.wf-analogs { order: 3; }
.wf-brandblock { order: 4; }
.wf-trust { order: 5; }
.wf-benefits { order: 6; }
.wf-consult { order: 7; }
.wf-docs { order: 8; }

/* ============================================================
   3. ЕДИНЫЙ ВЕРТИКАЛЬНЫЙ РИТМ (бриф п.3)
   Между самостоятельными секциями - один и тот же отступ, внутри блока - вдвое
   меньше. Все блоки страницы лежат в одном flex-потоке (см. order выше),
   поэтому правило задаётся один раз на всех, а не по месту у каждого блока.
   Aspro раздаёт своим блокам утилитарные классы отступов (mt--80, gap--48),
   они бьют по специфичности - отсюда !important.
   ============================================================ */
.catalog-detail__item.flex-1 > .wf-wide > *,
.catalog-detail__item.flex-1 > .catalog-detail__bottom-info > * {
    margin-top: 0 !important;
    margin-bottom: var(--wf-gap-section, 48px) !important;
}
.catalog-detail__item.flex-1 > .catalog-detail__bottom-info {
    margin-top: 0 !important;
}
.catalog-detail__top-info {
    margin-bottom: var(--wf-gap-section, 48px) !important;
}
/* последний блок страницы лишний отступ снизу не держит */
.wf-docs:last-child,
.catalog-detail__bottom-info > .gift:last-child {
    margin-bottom: 0 !important;
}
/* заголовок секции: заметный воздух сверху уже дан отступом секции,
   здесь только ритм внутри блока */
.wf-analogs__title,
.wf-benefits__title,
.wf-docs__title,
.wf-brandblock__head {
    margin-bottom: var(--wf-gap-inner, 20px);
}

/* дубль вкладки «Описание»: штатная вкладка Aspro (#desc) выводит то же поле,
   что кастомная вкладка команды (#description). Прячем штатную.
   Настоящее лечение - убрать её в настройках карточки, это к команде. */
.tabs-block .nav-tabs li a[href="#desc"],
.tabs-block .tab-content > #desc {
    display: none !important;
}

/* кнопка «Оставить заявку» - штатный виджет Aspro, всплыл под нашим блоком
   после перестройки колонок. У нас уже есть «Запросить КП»/«Получить
   консультацию» - штатную прячем. */
.catalog-detail__cart.js-config-btns {
    display: none !important;
}
/* строки наличие/дешевле/гарантия из того же штатного блока переносятся
   JS-ом (wf_card.js) внутрь .wf-card__buy */
.wf-card__avail {
    margin: 0 0 16px;
    padding: 0;
}

/* ============================================================
   4. ПЕРВЫЙ ЭКРАН (бриф п.2)
   ============================================================ */

/* заголовок и бренд в одну строку */
.wf-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
}
/* Бриф п.2.5: цена - самый крупный элемент страницы ПОСЛЕ названия.
   Штатный класс Aspro font_24 давал заголовку 24px, то есть меньше цены;
   поднимаем название, чтобы иерархия читалась правильно. */
.wf-title-row h1 {
    font-size: 30px !important;
    line-height: 1.2;
}
.wf-brand {
    text-align: right;
    flex: 0 0 auto;
    padding-top: 2px;
}
.wf-brand__name {
    display: block;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .01em;
    color: #3e3d3e;
    white-space: nowrap;
}
.wf-brand__note {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8a888b;
}

/* лента миниатюр под галереей */
.wf-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.wf-thumb {
    flex: 1 1 0;
    min-width: 0;
    height: 62px;
    padding: 5px;
    background: #fff;
    border: 1px solid #e3e2e4;
    border-radius: 5px;
    cursor: pointer;
    transition: border-color .15s;
}
.wf-thumb:hover {
    border-color: #bdbabe;
}
.wf-thumb.is-active {
    border-color: #d22232;
    box-shadow: inset 0 0 0 1px #d22232;
}
.wf-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wf-card {
    margin: 0;
    font-size: 15px;
    color: var(--wf-text);
}

/* --- строка действий --- */
.wf-card__actions {
    display: flex;
    align-items: center;
    gap: 26px;
    padding-bottom: 14px;
    margin-bottom: var(--wf-gap-inner);
    border-bottom: 1px solid var(--wf-line);
    flex-wrap: wrap;
}
.wf-act {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: none;
    border: 0;
    font-size: 14px;
    color: var(--wf-graphite);
    cursor: pointer;
}
.wf-act:hover {
    color: var(--wf-red);
}
.wf-act--right {
    margin-left: auto;
}
.wf-act__ico {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    background: currentColor;
    opacity: .65;
}
.wf-act__ico--compare {
    -webkit-mask: linear-gradient(#000 0 0) 0 100%/4px 60% no-repeat, linear-gradient(#000 0 0) 6px 100%/4px 100% no-repeat, linear-gradient(#000 0 0) 12px 100%/4px 40% no-repeat;
            mask: linear-gradient(#000 0 0) 0 100%/4px 60% no-repeat, linear-gradient(#000 0 0) 6px 100%/4px 100% no-repeat, linear-gradient(#000 0 0) 12px 100%/4px 40% no-repeat;
}
.wf-act__ico--share {
    -webkit-mask: radial-gradient(circle 3px at 13px 3px, #000 99%, transparent) 0 0/16px 16px no-repeat, radial-gradient(circle 3px at 3px 8px, #000 99%, transparent) 0 0/16px 16px no-repeat, radial-gradient(circle 3px at 13px 13px, #000 99%, transparent) 0 0/16px 16px no-repeat;
            mask: radial-gradient(circle 3px at 13px 3px, #000 99%, transparent) 0 0/16px 16px no-repeat, radial-gradient(circle 3px at 3px 8px, #000 99%, transparent) 0 0/16px 16px no-repeat, radial-gradient(circle 3px at 13px 13px, #000 99%, transparent) 0 0/16px 16px no-repeat;
}
/* «Сравнение» и «Поделиться» подключены к штатным механизмам решения:
   кнопка сравнения получает класс .active от нативного item-action.js,
   «Поделиться» - обёртка вокруг штатного share_buttons.php */
.wf-act.js-item-action.active {
    color: var(--wf-red);
    font-weight: 600;
}
.wf-act__share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
/* попап ya-share2 штатно открывается по :hover/:focus-within своим же CSS
   (share.css), но тот же файл подгружается отложенно (vendor.lazyjs) и
   переприменяется позже нашего - без !important попап не показывается. */
.wf-act--right.share .shares-block:hover .ya-share2,
.wf-act--right.share .shares-block:focus-within .ya-share2 {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ссылка на раздел каталога из строки «Мощность» в характеристиках */
.wf-power-link {
    color: inherit !important;
    border-bottom: 1px dashed currentColor;
}
.wf-power-link:hover {
    color: var(--wf-red) !important;
}

/* --- плашка ключевых характеристик: 3-4 штуки в одну строку --- */
.wf-card__specs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px 24px;
    padding: 16px 20px;
    margin-bottom: var(--wf-gap-inner);
    background: var(--wf-bg);
    border-radius: 6px;
}
.wf-card__spec-label {
    font-size: 13px;
    line-height: 1.3;
    color: var(--wf-muted);
    margin-bottom: 3px;
}
.wf-card__spec-value {
    font-size: 17px;
    line-height: 1.25;
    font-weight: 600;
}

/* --- переключатели: активный вариант красной рамкой --- */
.wf-card__choices {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 24px;
    margin-bottom: var(--wf-gap-inner);
}
.wf-card__choice-title {
    font-size: 14px;
    color: var(--wf-muted);
    margin-bottom: 8px;
}
.wf-card__options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.wf-card__options--images .wf-opt {
    width: 124px;
}

.wf-opt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px 8px;
    background: #fff;
    border: 1px solid var(--wf-line);
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, box-shadow .15s;
}
.wf-opt:hover {
    border-color: #bdbabe;
}
.wf-opt.is-active {
    border-color: var(--wf-red);
    box-shadow: inset 0 0 0 1px var(--wf-red);
    background: var(--wf-red-soft);
}
.wf-opt__img {
    display: block;
    height: 58px;
    width: 100%;
}
.wf-opt__img img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}
.wf-opt__name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}
.wf-opt__price {
    font-size: 12px;
    color: var(--wf-muted);
    white-space: nowrap;
}
.wf-opt.is-active .wf-opt__price {
    color: var(--wf-red);
    font-weight: 600;
}
.wf-opt--text {
    min-width: 142px;
    padding: 12px 14px 10px;
}

/* --- цена отдельной строкой и кнопки под ней --- */
.wf-card__buy {
    display: block;
    padding: 18px 0 0;
    border-top: 1px solid var(--wf-line);
}
.wf-card__price {
    margin-bottom: 14px;
}
.wf-card__price-value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}
.wf-card__price-note {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--wf-muted);
}
.wf-card__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.wf-btn {
    padding: 13px 26px;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color .15s, color .15s, border-color .15s;
}
.wf-btn--primary {
    background: var(--wf-red);
    border-color: var(--wf-red);
    color: #fff;
}
.wf-btn--primary:hover {
    background: var(--wf-red-dark);
    border-color: var(--wf-red-dark);
    color: #fff;
}
.wf-btn--ghost {
    background: #fff;
    border-color: #c9c7ca;
    color: var(--wf-text);
}
.wf-btn--ghost:hover {
    border-color: var(--wf-graphite);
    background: var(--wf-bg);
}

/* ============================================================
   5. ТАБЛИЦА ХАРАКТЕРИСТИК (бриф п.4)
   Разметка чужая, штатная Aspro (.properties-group во вкладке #char).
   Оставляем табличную подачу, но делаем воздушнее: выше строки, заметные
   заголовки групп на сером фоне (не красная заливка), значения легче
   названий, спокойная зебра.
   ============================================================ */
.tabs-block .properties-group__group {
    margin-bottom: 28px;
}
.tabs-block .properties-group__group:last-child {
    margin-bottom: 0;
}
.tabs-block .properties-group__group-name {
    padding: 12px 16px !important;
    margin-bottom: 0 !important;
    background: var(--wf-bg-deep, #ebebec);
    border-radius: 5px 5px 0 0;
    font-size: 16px !important;
    font-weight: 700;
    color: #221e1f;
}
.tabs-block .properties-group__item {
    padding: 13px 16px !important;
    border-bottom: 1px solid #ececed;
    align-items: flex-start;
}
/* спокойная зебра: чётные строки светло-серые */
.tabs-block .properties-group__item:nth-child(even) {
    background: #fafafa;
}
.tabs-block .properties-group__item:last-child {
    border-bottom: 0;
}
/* название параметра - плотнее, значение - легче */
.tabs-block .properties-group__name {
    color: #555356 !important;
    font-weight: 500;
}
.tabs-block .properties-group__value {
    color: #221e1f !important;
    font-weight: 400;
}
/* подсказки «?» - в фирменный красный вместо синего решения */
.tabs-block .hint__icon {
    border-color: #c9c7ca !important;
    color: var(--wf-muted) !important;
}
.tabs-block .hint__icon:hover {
    border-color: var(--wf-red) !important;
    background: var(--wf-red) !important;
    color: #fff !important;
}

/* Одна колонка, как в прототипе. Aspro раскладывает группы характеристик в
   две колонки - components/aspro/props.group.premier/.default/style.css:
     @media (min-width: 992px) {
         .properties-group--table .properties-group__items:has(.properties-group__item:nth-of-type(3))
     }
     .properties-group--table .properties-group__group-name + .properties-group__items
   На старом тесте (ruteh3) таблица оставалась в одну колонку при побайтово
   одинаковом style.css и одинаковой разметке - почему, выяснить не удалось.
   Поэтому не полагаемся на это совпадение, а задаём раскладку явно: одна
   колонка - то, под что сделана вся отделка блока выше (заголовок группы на
   всю ширину, зебра по строкам, значение справа от названия). */
.tabs-block .properties-group--table .properties-group__items {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
}

/* --- аккордеон групп: включается только на мобильном, см. медиазапрос --- */
.wf-acc-toggle {
    display: none;
}

/* ============================================================
   6. БЛОК ЦИФР О КОМПАНИИ (бриф п.7): графит вместо синего, 4 колонки
   ============================================================ */
.wf-wide {
    margin: 0;
    font-size: 15px;
    color: var(--wf-text);
}
.wf-trust {
    padding: 32px 32px 34px;
    background: var(--wf-graphite);
    border-radius: 8px;
    color: #fff;
}
.wf-trust__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding-bottom: var(--wf-gap-inner);
    margin-bottom: 26px;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.wf-trust__lead {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    max-width: 560px;
}
.wf-trust__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.wf-trust__tags span {
    padding: 6px 14px;
    background: rgba(255, 255, 255, .12);
    border-radius: 20px;
    font-size: 13px;
}
.wf-trust__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
.wf-trust__num {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 6px;
}
.wf-trust__title {
    font-size: 14px;
    line-height: 1.35;
}
.wf-trust__note {
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .65);
    margin-top: 3px;
}

/* ============================================================
   7. АНАЛОГИ (бриф п.5): таблица, до 5 позиций, метка причины
   ============================================================ */
.wf-analogs__title,
.wf-benefits__title,
.wf-docs__title {
    font-size: 20px;
    font-weight: 700;
}
.wf-analogs__scroll {
    overflow-x: auto;
}
.wf-analogs__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.wf-analogs__table th {
    padding: 12px 14px;
    background: var(--wf-bg);
    color: var(--wf-muted);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
}
.wf-analogs__table td {
    padding: 14px;
    border-bottom: 1px solid var(--wf-line);
    vertical-align: middle;
}
/* вся строка кликабельна (обработчик в wf_card.js) */
.wf-analogs__table tbody tr {
    cursor: pointer;
}
.wf-analogs__table tbody tr:hover td {
    background: #fafafa;
}
.wf-analogs__table a {
    color: var(--wf-text);
}
.wf-analogs__table tbody tr:hover .wf-analogs__name {
    color: var(--wf-red);
}
/* метка причины рекомендации: зелёная у смысловых плюсов
   («В наличии», «Дешевле»), нейтральная серая у справочных */
.wf-analogs__badge {
    display: inline-block;
    margin-top: 5px;
    padding: 3px 9px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
    background: var(--wf-green-soft);
    color: var(--wf-green);
}
.wf-analogs__badge--neutral {
    background: var(--wf-bg-deep);
    color: #555356;
}
.wf-analogs__price {
    font-weight: 700;
    white-space: nowrap;
}
.wf-analogs__th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.wf-analogs__th:hover {
    color: var(--wf-red);
}
.wf-analogs__caret {
    display: inline-block;
    margin-left: 6px;
    border: 4px solid transparent;
    border-top-color: currentColor;
    opacity: .35;
    vertical-align: middle;
}
.wf-analogs__th.is-sorted .wf-analogs__caret {
    opacity: 1;
}
.wf-analogs__th.is-sorted.is-asc .wf-analogs__caret {
    border-top-color: transparent;
    border-bottom-color: currentColor;
    margin-top: -4px;
}
.wf-analogs__product {
    display: flex;
    align-items: center;
    gap: 14px;
}
.wf-analogs__pic {
    flex: 0 0 60px;
    width: 60px;
    height: 46px;
    background: var(--wf-bg);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wf-analogs__pic img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.wf-analogs__text {
    min-width: 0;
}
.wf-analogs__name {
    transition: color .15s;
}
.wf-analogs__power {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--wf-muted);
}
.wf-analogs__actions {
    white-space: nowrap;
    text-align: right;
}
/* кнопка в строке не должна конкурировать с главной CTA страницы -
   поэтому она контурная и компактная, а не красная заливная */
.wf-btn--sm {
    padding: 8px 16px;
    font-size: 13px;
}

/* --- набор иконок для плиток преимуществ ---
   Рисунки лежат здесь, а не в разметке: SVG не дублируется на каждой плитке,
   цвет задаётся заливкой элемента (маска), размер - его шириной. */
.wf-ico--shield {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
.wf-ico--engine {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9 17 7M7 17l-2.1 2.1'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9 17 7M7 17l-2.1 2.1'/%3E%3C/svg%3E");
}
.wf-ico--bolt {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9z'/%3E%3C/svg%3E");
}
.wf-ico--globe {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18z'/%3E%3C/svg%3E");
}
.wf-ico--wrench {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0 5.3 5.3l-8.7 8.7a2.1 2.1 0 0 1-3-3z'/%3E%3Cpath d='M14.7 6.3 18 3a4 4 0 0 1 3 3l-3.3 3.3'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0 5.3 5.3l-8.7 8.7a2.1 2.1 0 0 1-3-3z'/%3E%3Cpath d='M14.7 6.3 18 3a4 4 0 0 1 3 3l-3.3 3.3'/%3E%3C/svg%3E");
}
.wf-ico--people {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.9'/%3E%3Cpath d='M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.9'/%3E%3Cpath d='M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E");
}
.wf-ico--ruble {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M9.5 17.5V7.5h3a2.6 2.6 0 0 1 0 5.2H8'/%3E%3Cpath d='M8 15.2h5'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M9.5 17.5V7.5h3a2.6 2.6 0 0 1 0 5.2H8'/%3E%3Cpath d='M8 15.2h5'/%3E%3C/svg%3E");
}

/* ============================================================
   8. ПРЕИМУЩЕСТВА БРЕНДА (бриф п.6): не таблица, а плитки с маркером
   ============================================================ */
.wf-brandblock {
    padding: 26px 28px 28px;
    background: var(--wf-bg);
    border-radius: 8px;
}
.wf-brandblock__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
}
.wf-brandblock__title {
    font-size: 20px;
    font-weight: 700;
}
.wf-brandblock__note {
    font-size: 13px;
    color: var(--wf-muted);
}
.wf-brandblock__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.wf-brandblock__item {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    background: #fff;
    border-radius: 6px;
}
.wf-brandblock__ico {
    display: block;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    background: var(--wf-red);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}
.wf-brandblock__label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 4px;
}
.wf-brandblock__value {
    display: block;
    font-size: 13px;
    line-height: 1.45;
    color: var(--wf-muted);
}

/* ============================================================
   9. ПОЧЕМУ БЕРУТ У НАС (бриф п.8): 4 карточки равной высоты
   ============================================================ */
.wf-benefits__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.wf-benefits__item {
    display: flex;
    flex-direction: column;
    padding: 22px 20px;
    background: #fff;
    border: 1px solid var(--wf-line);
    border-radius: 6px;
}
.wf-benefits__ico {
    display: block;
    width: 30px;
    height: 30px;
    margin-bottom: 14px;
    background: var(--wf-red);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}
.wf-benefits__item-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 7px;
}
.wf-benefits__item-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--wf-muted);
}

/* ============================================================
   10. КОНСУЛЬТАЦИЯ (бриф п.9): контрастная секция, текст слева, CTA справа
   ============================================================ */
.wf-consult {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    padding: 30px 32px;
    background: var(--wf-graphite);
    border-radius: 8px;
    color: #fff;
}
.wf-consult__title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 7px;
}
.wf-consult__note {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .72);
    max-width: 560px;
}
.wf-consult__contact {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.wf-consult__phone {
    font-size: 20px;
    font-weight: 700;
    color: #fff !important;
    white-space: nowrap;
}
.wf-consult__phone:hover {
    color: #fff !important;
    opacity: .85;
}

/* ============================================================
   11. ДОКУМЕНТЫ (бриф п.10): карточка с крупной иконкой и типом файла
   ============================================================ */
.wf-docs__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
}
.wf-docs__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--wf-line);
    border-radius: 6px;
    color: var(--wf-text) !important;
    transition: border-color .15s, background-color .15s;
}
.wf-docs__item:hover {
    border-color: var(--wf-red);
    background: var(--wf-bg);
}
/* иконки файлов - серые, а не красные: их на экране сразу восемь, красным
   пятном они спорили бы с главной кнопкой страницы (бриф п.1.6). Красный
   загорается только под курсором. */
.wf-docs__item:hover .wf-docs__ico {
    background: var(--wf-red);
}
.wf-docs__ico {
    display: block;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    background: var(--wf-muted);
    opacity: .85;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E");
}
.wf-docs__name {
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
}
.wf-docs__type {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--wf-muted);
    font-weight: 400;
}

/* ============================================================
   12. АДАПТИВ
   ============================================================ */
@media (max-width: 1279px) {
    .wf-benefits__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 768px) and (max-width: 1100px) {
    .catalog-detail__top-info .detail-gallery-big {
        flex: 0 0 250px;
        max-width: 250px;
    }
}
@media (max-width: 1100px) {
    .wf-card__choices {
        grid-template-columns: minmax(0, 1fr);
    }
    .wf-trust__facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .wf-brandblock__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- мобильный: не сжатый десктоп, а своя раскладка (бриф п.11) --- */
@media (max-width: 767px) {
    .catalog-detail__item {
        --wf-gap-section: 32px;
        --wf-gap-inner: 16px;
    }
    .wf-card__actions {
        gap: 14px 18px;
        font-size: 13px;
    }
    .wf-act--right {
        margin-left: 0;
    }
    .wf-card__specs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 18px;
        padding: 16px;
    }
    .wf-card__spec-value {
        font-size: 16px;
    }
    .wf-card__options--images .wf-opt {
        width: calc(50% - 4px);
    }
    .wf-card__price-value {
        font-size: 27px;
    }
    /* главная кнопка на всю ширину, консультация - следующей строкой */
    .wf-card__buttons {
        flex-direction: column;
        gap: 10px;
    }
    .wf-card__buttons .wf-btn {
        width: 100%;
    }
    /* минимальная высота кликабельных элементов - 44px (бриф п.11.8) */
    .wf-btn,
    .wf-opt,
    .wf-docs__item,
    .wf-act,
    .wf-act__share-btn,
    .wf-consult__phone,
    .tabs-block .properties-group__group-name {
        min-height: 44px;
    }
    .wf-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .wf-act,
    .wf-act__share-btn,
    .wf-consult__phone {
        display: inline-flex;
        align-items: center;
    }
    .wf-analogs__name {
        display: inline-block;
        padding: 2px 0;
    }
    .wf-trust,
    .wf-consult,
    .wf-brandblock {
        padding: 22px 18px;
    }
    .wf-trust__facts {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .wf-benefits__grid,
    .wf-brandblock__grid,
    .wf-docs__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .wf-consult {
        display: block;
    }
    .wf-consult__contact {
        margin-top: 18px;
        display: block;
    }
    .wf-consult__phone {
        display: block;
        margin-bottom: 14px;
    }
    .wf-consult .wf-btn {
        width: 100%;
    }

    /* аналоги: вместо горизонтальной прокрутки - карточка на строку,
       подписи колонок подставляются из data-label */
    .wf-analogs__scroll {
        overflow-x: visible;
    }
    .wf-analogs__table thead {
        display: none;
    }
    .wf-analogs__table,
    .wf-analogs__table tbody,
    .wf-analogs__table tr,
    .wf-analogs__table td {
        display: block;
        width: 100%;
    }
    .wf-analogs__table tr {
        margin-bottom: 12px;
        padding: 14px 16px;
        border: 1px solid var(--wf-line);
        border-radius: 6px;
    }
    .wf-analogs__table td {
        padding: 6px 0;
        border-bottom: 0;
    }
    /* пары «подпись - значение» в одну строку */
    .wf-analogs__table td[data-label]:before {
        content: attr(data-label);
        display: inline-block;
        min-width: 108px;
        color: var(--wf-muted);
        font-size: 13px;
    }
    .wf-analogs__actions {
        text-align: left;
        padding-top: 12px !important;
    }
    .wf-analogs__actions .wf-btn {
        width: 100%;
    }
    .wf-analogs__pic {
        flex: 0 0 48px;
        width: 48px;
        height: 38px;
    }

    /* характеристики: группы сворачиваются в аккордеон,
       первая открыта (класс проставляется в wf_card.js) */
    .tabs-block .properties-group__group-name {
        position: relative;
        padding-right: 46px !important;
        cursor: pointer;
    }
    .wf-acc-toggle {
        display: block;
        position: absolute;
        top: 50%;
        right: 16px;
        width: 12px;
        height: 12px;
        margin-top: -8px;
        border-right: 2px solid #555356;
        border-bottom: 2px solid #555356;
        transform: rotate(45deg);
        transition: transform .18s;
    }
    .properties-group__group.is-open .wf-acc-toggle {
        transform: rotate(-135deg);
        margin-top: -2px;
    }
    .tabs-block .properties-group__group:not(.is-open) .properties-group__items {
        display: none;
    }
    .tabs-block .properties-group__item {
        padding: 12px 14px !important;
    }
}


/* ============================================================
   ПРАВКИ ПОСЛЕ ПЕРЕНОСА НА ASPRO 1.11.0
   ============================================================ */

/* Заголовок товара. Проектный bitrix/templates/aspro-premier/css/custom.css
   гасит .switcher-title глобально (display: none) - правило появилось на
   проде после 23.07.2026 и приехало в репозиторий вместе с прод-состоянием.
   В 1.11.0 этот класс висит на h1 карточки, поэтому название пропадало.
   Возвращаем заголовок только внутри карточки; глобальное правило не трогаем,
   его надо разбирать отдельно - оно скрывает название и на боевом сайте.
   !important не нужен: селектор специфичнее одиночного класса. */
.wf-title-row h1.switcher-title,
.catalog-detail__main h1.switcher-title {
    display: block;
}

/* Та же беда, что с заголовком товара: notice.js рендерит текст уведомления
   как <div class="notice__title switcher-title fw-600">, и глобальный
   display:none из css/custom.css гасит его. Всплывашка появлялась пустой -
   и не только наша: так же молчат все штатные уведомления решения
   ("В корзине", "Удалено из сравнения" и прочие). Здесь возвращаем текст;
   глобальное правило по-прежнему требует отдельного разбора. */
.notice__title.switcher-title {
    display: block;
}

/* И четвёртая жертва того же глобального display:none - заголовки групп в
   таблице характеристик ("Основные характеристики", "Двигатель" и т.д.):
   Aspro вешает на них класс switcher-title. Без заголовков таблица
   разъезжается в один сплошной список, а вся отделка блока выше (серая
   плашка группы, скругление, отбивка между группами) рассчитана на то, что
   заголовок виден. */
.tabs-block .properties-group__group-name.switcher-title {
    display: block;
}

/* ============================================================
   STICKY-СТРОКА ТОВАРА
   Полный набор стилей блока, восстановленного коммитом 4b18271.

   Оригинал живёт в style.css шаблона компонента catalog.element/main, но в
   1.11.0 Aspro грузит этот файл отложенно: в HTML нет обычного <link>, путь
   лежит в JS-списке ленивой загрузки — и до браузера он, судя по всему, не
   доезжает вовсе. Из-за этого блок сначала вываливался в поток картинкой во
   всю ширину, а потом, после первой правки, показывался прозрачным и в
   столбик: применялось только то, что я успел продублировать.

   Поэтому держим здесь ВЕСЬ набор: wf_card.css подключается сразу и тегом
   <link> прямо в разметке (см. wf_card_block.php), так что блок не зависит
   от ленивого файла. Правила скопированы из него дословно — если однажды
   будете править внешний вид полосы, правьте здесь, оригинал не применяется.
   ============================================================ */

.catalog-detail-sticky-product {
  --catalog-detail-sticky-offset: 0px;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: var(--catalog-detail-sticky-offset);
  transform: translateY(-12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 991;
}

.catalog-detail-sticky-product--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.catalog-detail-sticky-product__shell {
  background: var(--black_bg_black);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  margin-top: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
}

.catalog-detail-sticky-product__shell.outer-rounded-x {
  border-radius: 0 !important;
}

.catalog-detail-sticky-product__inner {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  padding: 14px 0;
}

.catalog-detail-sticky-product__main {
  align-items: center;
  display: flex;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}

.catalog-detail-sticky-product__image {
  border-radius: 10px;
  flex: 0 0 56px;
  height: 56px;
  overflow: hidden;
  width: 56px;
}

.catalog-detail-sticky-product__image img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.catalog-detail-sticky-product__content {
  min-width: 0;
}

.catalog-detail-sticky-product__title {
  color: var(--white_text_black);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-detail-sticky-product__price {
  font-size: 16px !important;
  line-height: 1.25 !important;
}

.catalog-detail-sticky-product__price .price,
.catalog-detail-sticky-product__price .price_value,
.catalog-detail-sticky-product__price .price_new,
.catalog-detail-sticky-product__price .values_wrapper,
.catalog-detail-sticky-product__price span,
.catalog-detail-sticky-product__price div,
.catalog-detail-sticky-product__price strong,
.catalog-detail-sticky-product__price b {
  font-size: 16px !important;
  line-height: 1.25 !important;
}

.catalog-detail-sticky-product__price .price.font_24,
.catalog-detail-sticky-product__price .price.font_22,
.catalog-detail-sticky-product__price .price.font_20,
.catalog-detail-sticky-product__price .price_value.font_24,
.catalog-detail-sticky-product__price .price_value.font_22,
.catalog-detail-sticky-product__price .price_value.font_20 {
  font-size: 16px !important;
  line-height: 1.25 !important;
}

.catalog-detail-sticky-product__price .font_12,
.catalog-detail-sticky-product__price .secondary-color,
.catalog-detail-sticky-product__price .catalog-detail__price-old,
.catalog-detail-sticky-product__price .price_matrix_wrapper {
  font-size: 14px !important;
  line-height: 1.3 !important;
}

.catalog-detail-sticky-product__actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 20px;
}

.catalog-detail-sticky-product__button {
  min-width: 176px;
}

/* Пометка про НДС в полосе. Скрипт полосы копирует HTML штатного прайс-блока
   целиком (syncStickyPrice берёт innerHTML), вместе со штатной подписью
   «Цена указана без учета НДС» — а в карточке мы утверждаем обратное
   («Цена с учётом НДС», см. .wf-card__price-note). Получалось, что на одной
   странице цена подписана двумя взаимоисключающими способами. В узкой полосе
   подпись всё равно нечитаемо мелкая, поэтому просто убираем её: цена там
   справочная, полная формулировка есть в карточке. */
.catalog-detail-sticky-product__price .vat {
    display: none;
}

/* Ниже 992px полосы нет: скрипт её и так не показывает (isDesktop), но
   правило страхует на случай, если JS отработает раньше ресайза. В оригинале
   это правило лежит внутри @media — при переносе сюда медиазапрос обязателен,
   иначе блок скрыт всегда. */
@media (max-width: 991px) {
    .catalog-detail-sticky-product {
        display: none;
    }
}

/* Тень шапки убирается, чтобы полоса стыковалась с ней встык. */
#headerfixed,
#headerfixed .maxwidth-theme,
#headerfixed .logo-row,
#headerfixed .line-row,
#headerfixed .header__inner {
  box-shadow: none !important;
}


/* Дубль цены N2: боксик в правой sticky-колонке (.catalog-detail__buy-block).
   В 1.11.0 Aspro складывает туда цену, а своим js-popup-block-adaptive
   доносит ещё и копию строк наличия/гарантии - получался второй прайс-блок
   под описанием. На 1.7.0 колонка оставалась пустой, поэтому в прототипе
   правила на неё не было. Гасим только сам боксик: в колонке ниже лежат
   штатные блоки акций и услуг, их трогать нельзя. */
.catalog-detail__main-part--right .catalog-detail__buy-block {
    display: none !important;
}

/* Остаток от скрытого боксика: включаемая область Aspro "текст под ценой"
   ($arResult['INCLUDE_PRICE'], последний элемент правой колонки). После
   скрытия боксика висела одинокой серой строкой под описанием, а про НДС
   у нас уже написано в .wf-card__price-note. Блоки акций и услуг в этой же
   колонке остаются видимыми. */
.catalog-detail__main-part--right .price_txt {
    display: none !important;
}

/* Дубль цены. Штатный блок цены Aspro идёт сразу после нашего .wf-card и из
   DOM не удаляется, поэтому под крупной ценой прототипа показывалась ещё
   одна, штатная. Обёртка содержит только этот блок, гасим её целиком.
   Цена в правой sticky-колонке при этом остаётся. */
.wf-card + .visible-by-container-rule {
    display: none !important;
}