.loader-wrap {
    position: fixed;
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    top: 0;
    left: 0;
    z-index: 10000 !important;
    background-color: rgba(0, 0, 0, 0.35);
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader {
    width: 48px;
    height: 48px;
    border: 5px solid #fff;
    border-bottom-color: var(--btn-violet-hover);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.fav_btn.active svg path {
    fill: currentColor;

}

.icon-wrapper {
    right: 98px;
}

@media(max-width: 576px) {
    .icon-wrapper {
        right: 50px;
    }
}

/* P-292 M-12: на телефоне (до 640 px) показывается только активная кнопка вида списка, и она ведёт на противоположный вид
   (1 колонка <-> 2 колонки). Иконка должна показывать результат нажатия, поэтому в этом диапазоне иконки поменяны местами:
   кнопка «в 2 колонки» (value=list) - иконка плиток, кнопка «в 1 колонку» (value=plate) - иконка строк. Значения view не меняются.
   Подписи: два span (телефон / компьютер), показ по ширине; визуально скрыты, нужны скринридеру. Файл версионируется ядром (?mtime). */
.view-btn {
    position: relative;
}

.view-btn .view-btn__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.view-btn .view-btn__label--m {
    display: block;
}

.view-btn .view-btn__label--d {
    display: none;
}

@media (max-width: 639px) {
    .view-btn--list:before {
        background-image: url(images/icons/icon-tile.svg);
    }

    .view-btn--tile:before {
        background-image: url(images/icons/icon-row.svg);
    }
}

@media (min-width: 640px) {
    .view-btn .view-btn__label--m {
        display: none;
    }

    .view-btn .view-btn__label--d {
        display: block;
    }
}

/* P-292 M-02: до 1279 px вместо старой нижней панели .header__controls показывается единое нижнее меню .sp-bn
   (компонент bitrix:menu, шаблон mobile_bottom). .header__controls остаётся в DOM: от 1280 px это иконки в шапке,
   а его счётчики .bascounter/.favcounter обновляют скрипты каталога - нижнее меню их зеркалит. */
@media (max-width: 1279px) {
    .header__controls {
        display: none;
    }
}

/* P-292 (замечание владельца): виджет звонка Envybox до 1279 px - пульсирующие кольца (.cbk-phone-circle, ...second_circle,
   ...third_circle) выходят за кнопку и перехватывали нажатия соседних элементов (значок «Фильтры», кнопки вида). Они декоративные:
   pointer-events:none только у колец; видимый круг (.cbk-phone-bgr) и трубка нажимаемы целиком. Скрипт Envybox не правится. */
@media (max-width: 1279px) {
    .cbk-phone .cbk-phone-circle,
    .cbk-phone .cbk-phone-second_circle,
    .cbk-phone .cbk-phone-third_circle {
        pointer-events: none !important;
    }
}

/* P-292: на узком телефоне (320 px) шапка шире экрана на 36 px: поле поиска не сжималось (min-content) и выталкивало кнопку каталога.
   Поле может сужаться (min-width:0), промежутки меньше. Проверено 320/360/375/390 px. */
@media (max-width: 639px) {
    .header__main {
        gap: 10px;
    }

    .header__search,
    .header__search .smartsearch-title__wrap,
    .header__search .smartsearch-title__input-conteiner {
        min-width: 0;
    }

    .header__search .smartsearch-title__input {
        width: 100%;
        min-width: 0;
    }
}

/* P-292-H: шапка specialty_new по Figma («Header - Адаптив и все элементы», 5930:370213): поле поиска - белая таблетка с тонкой серой
   рамкой, лупа справа внутри, плейсхолдер «Я ищу...» целиком; под шапкой - лента быстрых ссылок (меню fast_links). */
.header {
    padding-bottom: 2px;
}

.header__search .smartsearch-title__input-conteiner {
    position: relative;
}

.header__search .smartsearch-title__input-conteiner:before {
    display: none !important;
    content: none !important;
}

.header__search .smartsearch-title__wrap .smartsearch-title__input {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    padding: 0 52px 0 20px;
    font-size: 14px;
    line-height: 20px;
    color: #212121;
    background: #fff;
    border: 1px solid #ECECEC;
    border-radius: 50px;
    text-overflow: ellipsis;
}

.header__search .smartsearch-title__wrap .smartsearch-title__input::placeholder {
    color: #B8B3B3;
    opacity: 1;
}

.header__search .smartsearch-title__wrap .smartsearch-title__input:focus,
.header__search .smartsearch-title__wrap .smartsearch-title__input:hover {
    border-color: #6667AB;
    background: #fff;
}

.header__search .search-form__search-btn {
    position: absolute;
    top: 50%;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    transform: translateY(-50%);
}

.header__search .search-form__search-btn svg {
    width: 24px;
    height: 24px;
}

.header__search .search-form__search-btn svg path {
    stroke: #7F7F84;
}

.header__search .icon-wrapper {
    right: 48px;
}

.header__bottom {
    padding-top: 4px;
}

.header__bottom .sp-fast__list {
    margin-left: calc(var(--gap-half) * -1);
    margin-right: calc(var(--gap-half) * -1);
    padding: 0 var(--gap-half);
}

@media (max-width: 639px) {
    .header__search .smartsearch-title__wrap .smartsearch-title__input {
        height: 40px;
        padding-left: 16px;
    }

    .header__search .search-form__search-btn {
        right: 4px;
        width: 32px;
        height: 32px;
    }

    .header__search .icon-wrapper {
        right: 40px;
    }
}

@media (min-width: 1280px) {
    /* десктоп: лупа - фиолетовый круг справа, как в Figma */
    .header__search .search-form__search-btn {
        right: 4px;
        width: 40px;
        height: 40px;
        background: #6667AB;
    }

    .header__search .search-form__search-btn svg path {
        stroke: #fff;
    }

    .header__bottom {
        padding-top: 8px;
    }

    .header__bottom .sp-fast__list {
        margin: 0;
        padding: 0;
    }
}