/* Start:/local/templates/spazgan/components/bitrix/menu/top/style.min.css?1786730693490*/
ul.left-menu{list-style:none;margin:0;padding:0;margin-bottom:8px;position:relative}ul.left-menu li{padding:10px 16px;background:#f5f5f5 url(/local/templates/spazgan/components/bitrix/menu/top/images/left_menu_bg.gif) top repeat-x}ul.left-menu li a{font-size:100%;color:#bc262c;font-weight:bold;text-decoration:none}ul.left-menu li a:visited{color:#bc262c}ul.left-menu li a:hover{color:#bc262c}ul.left-menu li a.selected:link,ul.left-menu li a.selected:visited,ul.left-menu li a.selected:active,ul.left-menu li a.selected:hover{color:#fc8d3d}
/* End */


/* Start:/local/templates/.default/components/bitrix/news.list/promo_slider/style.css?179079032319819*/
/* Слайдер акций в шапке — общий для шаблонов spazgan и spazmagan_neo_new.
   Макеты: ПК 1920x142 — Figma TtQYL5xOV2dXwj0IYniT2G, узлы 39:533 (синий) и
   994:449 (красный); мобильный 375x112 — luZ65BISqoN9anKgzy1hXP, узлы 39:533
   и 2421:573 (плашка и фоны там старые, взяты с ПК-макета).

   РАЗМЕРЫ В EM от кегля самого слайдера, не в rem: корневой кегль у двух
   шаблонов разный, а баннер должен выглядеть одинаково. Число из макета / 16.

   ШИРИНА — колонка контента шаблона. Шаблон задаёт её переменной --promo-col
   на обёртке слайдера (новый — .hero-banner-strip в style.css, старый — .p-it-b
   в template_styles.css): стрелки встают по краям той же колонки, что логотип
   и кнопка «Где купить». Сам слайдер — контейнер (container-type), поэтому
   100cqw внутри — его ширина без полосы прокрутки.

   МАСШТАБ — кегль слайдера (на треке и на слое навигации):
   - мобильная раскладка (до 640, телефоны): 16px на ширине макета 375 и
     пропорционально окну, не крупнее 20px;
   - десктопная (с 640): с 1024 — колонка контента / 97.625, не крупнее
     16px, ровно макет 1562 в колонке (в новом шаблоне мышью колонка сама
     резиновая, 97.5rem, и баннер уменьшается вместе со страницей). На
     640–1023 так баннер вышел бы мелким (на 768 кегль 7.5px), поэтому там
     промежутки сжимаются до минимума, а кегль — до 9.5px, пока влезает
     колонка минимальной ширины 80.25em. Колонка шире 1562 (старый шаблон на
     1920) — растягиваются промежутки. */

/* Плашка скидки в макете набрана Druk Text Wide Medium — шрифт платный
   (Commercial Type), файла у нас нет. Берём шрифт, который уже есть на сайте:
   Druk Wide Cy Medium из шрифтов старого шаблона. Он шире и плотнее, поэтому
   кегль чуть меньше макетного и добавлена разрядка — ширина надписи как в
   макете. (Unbounded с Google Fonts пробовали — клиенту не подошёл.) */
@font-face {
    font-family: "Promo Druk Wide Medium";
    src: url("/assets/fonts/Druk-Wide-Cy-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

.promo-slider {
    position: relative;
    container-type: inline-size;
    line-height: 1.2;
    color: #fff;
    text-align: left;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
.promo-slider *,
.promo-slider *::before,
.promo-slider *::after {
    box-sizing: border-box;
}
.promo-slider__track,
.promo-slider__nav {
    font-size: min(calc(100cqw / 23.4375), 20px);
}

/* Листает сам браузер: горизонтальная прокрутка с прилипанием. Свайпы на JS
   на айфоне уже ломались (карусели НЕО, 30.08) — здесь их нет. */
.promo-slider__track {
    position: relative;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.promo-slider__track::-webkit-scrollbar {
    display: none;
}

/* Фоны со звёздами — вектор, во всю ширину полосы, повтор только по
   горизонтали и без стыков: звёзды целые, обрезает их лишь край полосы.
   Собраны скриптом build_stars.py из макета (синий — 17 звёзд, период 1920,
   поле по высоте -126..169 ед. макета; красный — звёзды с картинки 1280x720,
   плитка 653.39x466 ед. макета, верх плитки на -144.2). Размер в em —
   звёзды масштабируются вместе с баннером. На мобильном вдвое мельче. */
.promo-slide {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background: #140e54 url("/local/templates/.default/components/bitrix/news.list/promo_slider/images/bg-blue-stars.svg") 50% -2.656em / 60em 9.21875em repeat-x;
}
.promo-slide--red {
    background: #d12e27 url("/local/templates/.default/components/bitrix/news.list/promo_slider/images/bg-red-stars.svg") calc(50% + 0.5025em) -3.35em / 20.4183em 14.564em repeat-x;
}

.promo-slider .promo-slide__link {
    position: relative;
    display: block;
    height: 7.375em;
    margin: 0;
    padding: 0;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}
.promo-slider .promo-slide__link:hover,
.promo-slider .promo-slide__link:focus {
    color: #fff;
    text-decoration: none;
}
.promo-slider .promo-slide__link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}
div.promo-slide__link {
    cursor: default;
}

/* ---------- мобильная раскладка (макет 375x112) ----------
   Поле 14 | фото 76 | зазор ≥10 | текст | зазор | плашка 117 | поле 18.
   В макете поля по 8 и фото 80: поля шире, чтобы по бокам встали стрелки.
   На 375 текст начинается с 100, как в макете. Колонка шире — растут оба
   зазора поровну, текст встаёт посередине между фото и плашкой.
   Дата идёт под заголовком и заходит под плашку. */
.promo-slide__inner {
    display: grid;
    grid-template-columns: 4.75em minmax(0.625em, 1fr) auto minmax(0, 1fr) 7.3125em;
    grid-template-rows: auto auto;
    row-gap: 0.375em;
    width: max(23.4375em, var(--promo-col, 100cqw));
    height: 4.25em;
    margin: 0 auto;
    padding: 0.5625em 1.125em 0 0.875em;
}
.promo-slide__product {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.75em;
    height: 3em;
}
.promo-slider .promo-slide__product img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: contain;
}
/* На мобильном заголовок и дата — отдельные ячейки сетки, на ПК — один блок. */
.promo-slide__text {
    display: contents;
}
.promo-slide__title {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    font-family: "Druk_Wide_Cy-Bold", "Druk Wide Cy", Arial, sans-serif;
    font-weight: 700;
    font-size: 0.875em;
    line-height: 1.2;
    white-space: nowrap;
}
.promo-slide__zone {
    color: inherit;
}
.promo-slide__dates {
    grid-column: 3 / span 3;
    grid-row: 2;
    font-family: "Golos-DemiBold", "Golos UI", Arial, sans-serif;
    font-weight: 600;
    font-size: 0.75em;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}
/* Плашка скидки: заливка с градиентом и рамка из макета (313x79.26), цвета —
   от фона слайда. Кегль надписи 18px на ПК, на мобильном та же доля плашки.
   Разрядка 0.1em; такой же отступ слева — разрядка стоит и после последнего
   знака, без него надпись левее центра. */
.promo-slide__badge {
    grid-column: 5;
    grid-row: 1;
    align-self: start;
    position: relative;
    z-index: 1;
    display: block;
    width: 7.3125em;
    height: 1.852em;
    margin-top: 0.0625em;
    color: #d30e05;
}
.promo-slide__badge-from {
    stop-color: #cf0a02;
}
.promo-slide__badge-to {
    stop-color: #fa3027;
}
.promo-slide--red .promo-slide__badge {
    color: #1c1673;
}
.promo-slide--red .promo-slide__badge-from {
    stop-color: #1c1470;
}
.promo-slide--red .promo-slide__badge-to {
    stop-color: #1d2a9d;
}
.promo-slider .promo-slide__badge-bg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
/* Центр надписи — в центре залитой части: 46.5% ширины, 51% высоты. */
.promo-slide__badge-text {
    position: absolute;
    inset: 2% 7% 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Promo Druk Wide Medium", "Druk Wide Cy", Arial, sans-serif;
    font-weight: 500;
    font-size: 0.46em;
    letter-spacing: 0.1em;
    padding-left: 0.1em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
}
/* Предупреждение — полоса 29px под основной строкой. Разрядка добавляет
   пробел и после последней буквы, поэтому такой же отступ слева — иначе
   строка стоит левее центра. */
.promo-slide__warning {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 1.8125em;
    font-family: "Golos-Regular", "Golos UI", Arial, sans-serif;
    font-weight: 400;
    font-size: 1em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0.3;
}
.promo-slide__warning > span {
    display: block;
    padding-left: 0.25em;
    font-size: 0.6875em;
    line-height: 1.2;
    letter-spacing: 0.25em;
}

/* ---------- навигация ----------
   Слой поверх слайда в той же колонке; клики мимо кнопок проходят к ссылке
   слайда. Стрелки — по бокам, точки — внизу по центру. */
.promo-slider__nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: max(23.4375em, var(--promo-col, 100cqw));
    height: 7.375em;
    margin: 0 auto;
    pointer-events: none;
}
/* Точки: 6px, шаг 22, центр в 9px от низа полосы. Полоса на 6px выше
   макета (118 вместо 112) — это воздух над точками. */
.promo-slider__dots {
    position: absolute;
    left: 50%;
    bottom: 0.0625em;
    display: flex;
    transform: translateX(-50%);
}
/* Мобильные стрелки — шевроны без кружков в полях 14 и 18 по краям, на
   высоте фото и текста (9–63). Кнопка во всю эту высоту — легко попасть
   пальцем. В макете стрелок нет, добавлены по просьбе клиента. */
.promo-slider .promo-slider__arrow {
    position: absolute;
    top: 0.5625em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 3.375em;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #fff;
    cursor: pointer;
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
}
.promo-slider .promo-slider__arrow svg {
    display: block;
    width: 0.875em;
    height: 0.875em;
}
.promo-slider__arrow--prev {
    left: 0;
}
.promo-slider__arrow--next {
    right: 0;
}
.promo-slider__arrow--prev svg {
    transform: scaleX(-1);
}
.promo-slider__arrow:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}
/* Кнопки на мелком масштабе маленькие — зона нажатия шире видимой. */
.promo-slider__arrow::after,
.promo-slider__dot::after {
    content: "";
    position: absolute;
    inset: -6px;
}
.promo-slider__dot::after {
    inset: -6px 0;
}
.promo-slider .promo-slider__dot {
    position: relative;
    display: block;
    width: 1.375em;
    height: 1em;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    cursor: pointer;
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
}
.promo-slider__dot::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.375em;
    height: 0.375em;
    margin: -0.1875em 0 0 -0.1875em;
    border-radius: 50%;
    background: #fff;
    opacity: 0.3;
    transition: opacity 0.2s;
}
.promo-slider__dot[aria-current="true"]::before {
    opacity: 1;
}
.promo-slider__dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

/* ---------- десктопная раскладка (макет 1920x142), с 640 ----------
   Колонка 1562: стрелка 44 | фото, прижато вправо, до 249 | 107 | текст 651
   | 134 | плашка 313 | 64 | стрелка 44. Три промежутка гибкие, с долями
   107 : 134 : 64 — на ширине 97.625em они ровно как в макете, в колонке
   шире растут в той же пропорции, в узкой сжимаются до 1em, место под фото —
   до 11.5em (фото 174 + зазор от стрелки). Минимальная колонка — 80.25em;
   стрелка не мельче 24px, и её колонка тоже (74.75em + 2 × 24px).
   Полоса 162, а не 142, как в макете: внизу добавлено 20px под точки. */
@media (min-width: 640px) {
    .promo-slider__track,
    .promo-slider__nav {
        font-size: min(16px, max(calc(var(--promo-col, 100cqw) / 97.625), min(9.5px, calc(var(--promo-col, 100cqw) / 80.25), calc((var(--promo-col, 100cqw) - 48px) / 74.75))));
    }
    .promo-slide {
        background-position: 50% -7.625em;
        background-size: 120em 18.4375em;
    }
    .promo-slide--red {
        background-position: calc(50% + 1.005em) -9.01em;
        background-size: 40.8366em 29.128em;
    }
    .promo-slider .promo-slide__link {
        height: 10.125em;
    }
    .promo-slide__inner {
        grid-template-columns:
            max(2.75em, 24px) minmax(11.5em, 12.8125em) minmax(1em, 107fr) minmax(40.6875em, max-content)
            minmax(1em, 134fr) 19.5625em minmax(1em, 64fr) max(2.75em, 24px);
        grid-template-rows: 1fr;
        align-items: center;
        row-gap: 0;
        width: var(--promo-col, 100cqw);
        height: 7.0625em;
        padding: 0.5em 0 0;
    }
    .promo-slide__product {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        justify-content: flex-end;
        width: 10.875em;
        height: 6.25em;
    }
    .promo-slider .promo-slide__product img {
        object-position: right center;
    }
    .promo-slide__text {
        display: block;
        grid-column: 4;
        grid-row: 1;
        text-align: center;
    }
    .promo-slide__title {
        display: block;
        font-size: 2.125em;
    }
    .promo-slide__br {
        display: none;
    }
    .promo-slide--blue .promo-slide__zone {
        color: #f52922;
    }
    .promo-slide--red .promo-slide__zone {
        color: #140e54;
    }
    .promo-slide__dates {
        display: block;
        margin-top: 0.0417em;
        font-size: 1.5em;
    }
    .promo-slide__badge {
        grid-column: 6;
        align-self: center;
        width: 19.5625em;
        height: 4.95375em;
        margin-top: 0;
    }
    .promo-slide__badge-text {
        font-size: 1.125em;
    }
    /* Одна строка. Кегль не мельче 9px — на планшете он иначе был бы 7px.
       Разрядка по макету 0.68em, но в узкой колонке ужимается, чтобы строка
       влезла: (колонка − ширина текста без разрядки 48.1em) / 73 знака.
       Столько же отступа справа убираем — разрядка стоит и после последней
       буквы, иначе строка левее центра. */
    .promo-slide__warning {
        display: block;
        padding-top: 0.3125em;
    }
    .promo-slide__warning > span {
        --promo-ls: clamp(0px, (var(--promo-col, 100cqw) - 48.1em) / 73, 0.68em);
        display: inline;
        padding-left: 0;
        margin-right: calc(-1 * var(--promo-ls));
        font-size: max(1em, 9px);
        letter-spacing: var(--promo-ls);
    }

    .promo-slider__nav {
        width: var(--promo-col, 100cqw);
        height: 10.125em;
    }
    /* Стрелки — кружки 44 из макета по краям колонки, центр на уровне фото и
       текста (60.5 от верха); не мельче 24px. */
    .promo-slider .promo-slider__arrow {
        top: calc(3.78125em - max(2.75em, 24px) / 2);
        width: max(2.75em, 24px);
        height: max(2.75em, 24px);
        border: max(0.055em, 1px) solid #e3e3e3;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        transition: background-color 0.2s, opacity 0.2s;
    }
    .promo-slider .promo-slider__arrow:hover {
        background: rgba(255, 255, 255, 0.7);
    }
    .promo-slider__arrow:focus-visible {
        outline-offset: 2px;
    }
    .promo-slider .promo-slider__arrow svg {
        width: 40%;
        height: 40%;
    }
    /* Точки — как на мобильном: внизу по центру, 6px (не мельче 4px) и шаг
       22. Центр — на 150.5, между низом букв предупреждения и краем полосы.
       В макете ПК точек нет, добавлены по просьбе клиента. */
    .promo-slider__dots {
        bottom: 0.21875em;
    }
    .promo-slider__dot::before {
        width: max(0.375em, 4px);
        height: max(0.375em, 4px);
        margin: 0;
        transform: translate(-50%, -50%);
    }
}

/* С 1024 — строго пропорционально колонке, без подъёма кегля: мышью в новом
   шаблоне так же уменьшается вся страница. */
@media (min-width: 1024px) {
    .promo-slider__track,
    .promo-slider__nav {
        font-size: min(16px, calc(var(--promo-col, 100cqw) / 97.625));
    }
}

/* Мышью стрелки видны только при наведении на баннер и при фокусе с
   клавиатуры. Не :focus-within: после клика мышью фокус остаётся на ссылке,
   и стрелки висели бы и после ухода курсора. На сенсорном экране навести
   нечем — там стрелки видны всегда. */
@media (min-width: 640px) and (hover: hover) {
    .promo-slider .promo-slider__arrow {
        opacity: 0;
    }
    .promo-slider:hover .promo-slider__arrow,
    .promo-slider:has(:focus-visible) .promo-slider__arrow {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .promo-slider__track {
        scroll-behavior: auto;
    }
}

/* End */


/* Start:/local/templates/spazgan/components/bitrix/menu/bottom/style.min.css?1786730693490*/
ul.left-menu{list-style:none;margin:0;padding:0;margin-bottom:8px;position:relative}ul.left-menu li{padding:10px 16px;background:#f5f5f5 url(/local/templates/spazgan/components/bitrix/menu/bottom/images/left_menu_bg.gif) top repeat-x}ul.left-menu li a{font-size:100%;color:#bc262c;font-weight:bold;text-decoration:none}ul.left-menu li a:visited{color:#bc262c}ul.left-menu li a:hover{color:#bc262c}ul.left-menu li a.selected:link,ul.left-menu li a.selected:visited,ul.left-menu li a.selected:active,ul.left-menu li a.selected:hover{color:#fc8d3d}
/* End */


/* Start:/local/templates/spazgan/template_styles.css?17907907001216*/
.block__progress-item {
    height: auto;
}
/* Баннер акций под шапкой. Слайдер — полоса во всю ширину окна, как в
   макете, поэтому боковых полей у обёртки нет (у гифки были 0.5rem).
   Отступ снизу — чтобы следующий блок не прилипал к баннеру.
   --promo-col — колонка, в которой стоит содержимое баннера: та же ширина,
   что у .l-container (85vw / 93.75vw / 94.44vw, не шире 2440px). */
.p-it-b{
    margin-top: 95px;
    margin-bottom: 2rem;
    --promo-col: 85vw;
}
@media (min-width: 768px) {
    .p-it-b{
        --promo-col: 93.75vw;
    }
}
@media (min-width: 1024px) {
    .p-it-b{
        --promo-col: min(94.44vw, 2440px);
    }
}
@media (max-width: 1440px) {
    .p-it-b{
        margin-top: 80px;
    }
}

.l-content .js-padding{
    padding-top: 0 !important;
}
.faq__accordion-list .accordion__name h3 {
    margin: 0;
}
.buying__container .breadcrumbs, .land1__left .breadcrumbs {
    position: relative;
    left: auto;
    top: auto;
    margin-bottom: 30px;
    display: inline-block;
}
/* End */
/* /local/templates/spazgan/components/bitrix/menu/top/style.min.css?1786730693490 */
/* /local/templates/.default/components/bitrix/news.list/promo_slider/style.css?179079032319819 */
/* /local/templates/spazgan/components/bitrix/menu/bottom/style.min.css?1786730693490 */
/* /local/templates/spazgan/template_styles.css?17907907001216 */