/* Start:/local/components/qfast/heroblock/templates/.default/style.min.css?17758676258960*/
/* ========== HEROBLOCK — fluid responsive component ========== */

/* ========== ROOT CONTAINER ========== */

.heroblock {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-bottom-right-radius: 32px;
  border-bottom-left-radius: 32px;
  aspect-ratio: 1920 / 1100;
  height: 100vh;
}

.heroblock__bg-blur {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.heroblock__bg-main {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ========== BACKGROUND IMAGES ========== */

.heroblock__bg-blur {
  position: absolute;
  top: 0;
  /* Картинка шире контейнера. Чтобы при «оседании» 150%→130% не было бокового
     сдвига, держим её по центру: left = (100% − width)/2 → 150%→-25%, 130%→-15%. */
  left: -25%;
  width: 150%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.heroblock__bg-main {
  position: absolute;
  top: 0;
  left: -25%;
  width: 150%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.heroblock__bg-main {
  z-index: 3;
}

/* ========== BACKGROUND SETTLE (desktop / tablet) ========== */
/* При появлении задник и герой синхронно «оседают»: 150% → 130%.
   left = (100% − width)/2 в обоих состояниях — кадр остаётся по центру,
   меняется только масштаб (никакого бокового сдвига). Покрытие с запасом. */
@keyframes heroblock-bg-settle {
  from { width: 150%; left: -25%; }
  to   { width: 130%; left: -15%; }
}

.heroblock--loaded .heroblock__bg-blur,
.heroblock--loaded .heroblock__bg-main {
  width: 130%;
  left: -15%;
  /* both: во время задержки держим стартовый кадр (150%/-25%), а не конечный —
     иначе картинка дёргается: сначала прыжок в конец, потом обратно в начало. */
  animation: heroblock-bg-settle 2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

/* ========== TITLE FRAME ========== */
/* 80/1920 = 4.167%,  259/1100 = 23.545% */

@keyframes heroblock-title-slide {
  from { top: 23.545dvh; }
  to   { top: 12.545dvh; }
}
@media (max-width: 1536px) {
  @keyframes heroblock-title-slide {
    from { top: 23.545dvh; }
    to   { top: 12.545dvh; }
  }
}
@media (max-width: 768px) {
  @keyframes heroblock-title-slide {
    from { top: 23.545dvh; scale: 1 }
    to   { top: 12.545dvh; scale: 1.2}
  }
}
@keyframes heroblock-title-top-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.heroblock__title-frame {
  position: absolute;
  z-index: 2;
  left: 4.167%;
  top: 23.545%;
  width: 91.667%; /* (1920 - 160) / 1920 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.667vw; /* 32/1920 */
}

.heroblock--loaded .heroblock__title-frame {
  top: 8.545%;
  animation: heroblock-title-slide 3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.heroblock__title-top {
  width: 100%;
  text-align: center;
  color: #E2F397;
  font-size: clamp(15px, 1.25vw, 24px);
  opacity: 0;
  font-family: Inter, sans-serif;
  font-weight: 900;
  line-height: 110%;
}

.heroblock--loaded .heroblock__title-top {
  animation: heroblock-title-top-fade 1.5s ease-out 0.5s both;
}

/* ========== VECTOR LETTERS "ЯРКУЮ ЖИЗНЬ" ========== */
/* Container: 1623.62 x 180 at 1920 → 84.56% width, aspect-ratio 9.02 */

@keyframes heroblock-title-stretch {
  from { opacity: 0; transform: scale(0.65); }
  to   { opacity: 1; transform: scale(1); }
}

.heroblock__title-vectors {
  position: relative;
  width: 84.56%;
  aspect-ratio: 1623.62 / 180;
  opacity: 0;
  transform: scale(0.65);
  transform-origin: center center;
}

.heroblock--loaded .heroblock__title-vectors {
  opacity: 1;
  transform: scale(1);
  /* both: во время задержки держим scale(0.65)/opacity:0, иначе текст дёргается */
  animation: heroblock-title-stretch 2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.heroblock__title-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ========== SUBTITLE ========== */

@keyframes heroblock-subtitle-slide {
  from { bottom: -15.5%; opacity: 0; }
  to   { bottom: 6.5%; opacity: 1; }
}

.heroblock__subtitle {
  position: absolute;
  z-index: 4;
  left: 4.167%;
  bottom: -15.5%;
  width: 28.646%; /* 550/1920 */
  color: white;
  font-size: clamp(15px, 1.25vw, 24px);
  font-family: Inter, sans-serif;
  font-weight: 900;
  line-height: 110%;
  opacity: 0;
}

.heroblock--loaded .heroblock__subtitle {
  bottom: 6.5%;
  animation: heroblock-subtitle-slide 3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.heroblock__mobile-icons {
  z-index: 4;
}

/* ========== MOBILE ICONS — hidden on desktop/tablet ========== */

.heroblock__mobile-icons {
  display: none;
}

/* ==========================================================================
   @media (max-width: 1200px) — Tablet
   ========================================================================== */

@media (max-width: 1200px) {

  .heroblock {
    aspect-ratio: 1200 / 650;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
  }

  .heroblock__bg-blur {
    filter: blur(1.56px);
  }

  /* title-frame: 50/1200 = 4.167%, 161.9/650 = 24.908% */
  .heroblock__title-frame {
    left: 4.167%;
    top: 24.908%;
    width: 91.663%;
    gap: 1.667vw;
  }

  .heroblock__title-top {
    font-size: clamp(13px, 1.25vw, 15px);
  }

  /* vectors: same proportions, just different % of container width */
  /* 1014.76/1200 = 84.56% — same ratio */
  .heroblock__title-vectors {
    width: 84.56%;
  }

  /* subtitle: 20/1200=1.667%, 589.5/650=90.69% from top → bottom ~9.3% */
  .heroblock__subtitle {
    left: 1.667%;
    bottom: auto;
    top: 90.692%;
    width: 34.889%; /* 418.67/1200 */
    font-size: clamp(14px, 1.5vw, 18px);
  }
}

/* ==========================================================================
   @media (max-width: 767px) — Mobile
   ========================================================================== */

@media (max-width: 767px) {

  @keyframes heroblock-bg-zoom-mobile {
    0%   {
      transform: scale(1.4) translateZ(0); object-fit: cover}
    100% { transform: scale(1) translateZ(0); }
  }

  .heroblock {
    aspect-ratio: 360 / 650;
    background: #094141;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .heroblock::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30%;
    background: linear-gradient(to bottom, transparent 0%, #8c8c8c 100%);
    mix-blend-mode: multiply;
    z-index: 3;
    pointer-events: none;
  }

  .heroblock__bg-blur,
  .heroblock__bg-main {
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 34%;
    transform-origin: center 50%;
    transform: scale(1.4) translateZ(0);
  }

  .heroblock--loaded .heroblock__bg-blur,
  .heroblock--loaded .heroblock__bg-main {
    animation: heroblock-bg-zoom-mobile 3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .heroblock__bg-blur {
    filter: blur(0.48px);
  }

  /* title-frame: 4/360=1.117%, 100/650=15.385% */
  .heroblock__title-frame {
    left: 1.117%;
    top: 15.385%;
    width: 97.769%;
    gap: 2.222vw;
  }

  .heroblock__title-top {
    font-size: clamp(12px, 3.889vw, 14px);
    white-space: nowrap;
  }

  /* vectors: 280/360=77.778% — narrower on mobile */
  .heroblock__title-vectors {
    width: 77.778%;
  }

  /* subtitle: 14.59/360=4.053%, positioned just below container */
  .heroblock__subtitle {
    left: 4.053%;
    bottom: auto;
    top: auto;
    /* below the fold — clipped by overflow:hidden as in design */
    bottom: -2%;
    width: 62.383%; /* 224.58/360 */
    font-size: clamp(12px, 3.889vw, 14px);
  }

  /* iOS Safari URL bar compensation: 100lvh - 100svh = высота нижней панели браузера.
     Когда URL bar показан — subtitle поднимается, когда скрыт — стоит в дизайнерской позиции. */
  @keyframes heroblock-subtitle-slide-mobile {
    from { bottom: -15.5%; opacity: 0; }
    to   { bottom: calc(6.5% + (100lvh - 100svh)); opacity: 1; }
  }

  .heroblock--loaded .heroblock__subtitle {
    bottom: calc(6.5% + (100lvh - 100svh));
    animation: heroblock-subtitle-slide-mobile 3s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  /* Mobile icon buttons — show */
  .heroblock__mobile-icons {
    display: inline-flex;
    position: absolute;
    right: 5.556%; /* (360-260-80)/360 ≈ right side */
    bottom: -5%;
    width: 22.222%; /* 80/360 */
    aspect-ratio: 80 / 25;
    background: rgba(239, 239, 239, 0.80);
    border-radius: 1000px;
    align-items: center;
  }

  .heroblock__mobile-icon {
    width: 50%;
    height: 100%;
    border-radius: 1000px;
  }
}

/* End */


/* Start:/local/components/qfast/textblock/templates/.default/style.css?17755936091089*/
/* textblock */

.textblock {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 80px;
  padding: 0 80px;
}

.textblock__title {
  flex-shrink: 0;
  width: 557px;
  color: #094141;
  font-size: 48px;
  font-family: Inter, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 110%;
  margin: 0;
}

.textblock__text {
  max-width: 696px;
  color: #094141;
  font-size: 20px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -1px;
  margin: 0;
}

@media (max-width: 1200px) {
  .textblock {
    padding: 0 20px;
    gap: 40px;
  }

  .textblock__title {
    width: auto;
    flex: 1;
    font-size: 32px;
  }

  .textblock__text {
    flex: 1;
    font-size: 14px;
    letter-spacing: -0.70px;
  }
}

@media (max-width: 480px) {
  .textblock {
    flex-direction: column;
    padding: 0 20px;
    gap: 20px;
  }

  .textblock__title {
    width: 100%;
    font-size: 24px;
  }

  .textblock__text {
    max-width: 100%;
    font-size: 14px;
    letter-spacing: -0.70px;
  }
}

/* End */


/* Start:/local/templates/qfast/components/bitrix/news.list/smart/style.css?177584967226606*/
/* smart — catalog.section slider template */
/* Base: 1920×1080 desktop, dynamic dvw/dvh + clamp() */

/* ============================================
   CSS Variables (on root component)
   ============================================ */

.smart {
  /* ===== Настраиваемые параметры ===== */

  /* Базовые размеры */
  --smart-base:          clamp(16px, 1.67dvw, 32px);    /* 32px */
  --smart-side-pad:      clamp(40px, 4.17dvw, 80px);    /* 80px */
  --smart-radius:        var(--smart-base);              /* 32px */

  /* Карточка */
  --smart-card-w:        clamp(360px, 28.33dvw, 544px); /* 544px */
  --smart-card-h:        clamp(540px, 80.19dvh, 85vh);  /* max 80vh */
  --smart-card-pad:      var(--smart-base);              /* 32px */
  --smart-card-right:    clamp(50px, 5.21dvw, 100px);   /* 100px */
  --smart-card-top:      clamp(80px, 14.81dvh, 160px);  /* 160px */
  --smart-card-gap:      var(--smart-base);              /* 32px */

  /* Изображение товара */
  --smart-img-size:      clamp(280px, 25dvw, 480px);    /* 480px */
  --smart-img-radius:    clamp(4px, 0.42dvw, 8px);      /* 8px */

  /* Декоративный блок */
  --smart-deco-w:        clamp(280px, 54.32dvw, 1043px); /* плавное масштабирование, max 1043 */
  --smart-deco-top:      clamp(170px, 31.48dvh, 340px);  /* 340px */

  /* Заголовок */
  --smart-title-top:     clamp(40px, 7.41dvh, 80px);    /* 80px */

  /* Шрифты */
  --smart-fs-title:      clamp(18px, 1.67dvw, 32px);    /* 32px — card name */
  --smart-fs-text:       clamp(14px, 1.25dvw, 24px);    /* 24px — price/color */
  --smart-fs-small:      clamp(14px, 1.04dvw, 20px);    /* 20px — title/detail btn */
  --smart-fs-nav:        clamp(14px, 0.94dvw, 18px);    /* 18px — nav btn */

  /* Кнопки */
  --smart-btn-w:         clamp(120px, 11.46dvw, 220px); /* 220px */
  --smart-btn-h:         clamp(36px, 2.71dvw, 52px);    /* 52px */

  /* Цветовые точки */
  --smart-dot-size:      clamp(20px, 1.56dvw, 30px);    /* 30px */
  --smart-dot-offset:    clamp(8px, 0.63dvw, 12px);     /* 12px */

  /* Навигация */
  --smart-nav-bottom:    clamp(30px, 5.56dvh, 60px);    /* 60px */
  --smart-nav-gap:       clamp(8px, 0.83dvw, 16px);     /* 16px */
  --smart-nav-pad-v:     clamp(8px, 1.11dvh, 12px);     /* 12px */
  --smart-nav-pad-h:     var(--smart-base);              /* 32px */

  /* Мелкие gap-ы */
  --smart-info-gap:      clamp(8px, 0.63dvw, 12px);     /* 12px */
  --smart-prices-gap:    clamp(8px, 0.68dvw, 13px);     /* 13px */
  --smart-actions-gap:   clamp(6px, 0.52dvw, 10px);     /* 10px */
  --smart-fav-size:      var(--smart-btn-h);             /* 52px */
}

/* ============================================
   Scroll wrapper
   ============================================ */

.smart-scroll {
  height: calc(100vh * var(--smart-slides, 2));
  position: relative;
}

.smart__card-conntent {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--smart-card-gap);
}

.smart__mobile-only {
  display: none;
}

/* ============================================
   Main container
   ============================================ */

.smart {
  width: 100%;
  height: 100vh;
  position: sticky;
  top: 0;
  background: #094141;
  overflow: hidden;
  border-radius: var(--smart-radius);
  margin: 0 auto;
}

/* Background image */
.smart__bg-picture,
.smart__card-picture {
  display: contents;
}

/* Мобильная панорама: скрыта на десктопе */
.smart__bg-panorama {
  display: none;
}

.smart__bg {
  width: 120.7%;
  height: 111.3%;
  left: -10.4%;
  top: -9.3%;
  position: absolute;
  object-fit: cover;
}

/* ============================================
   Title "Выбери свою Qleva"
   ============================================ */

.smart__title {
  position: absolute;
  left: var(--smart-side-pad);
  top: var(--smart-title-top);
  color: #E2F397;
  font-size: var(--smart-fs-small);
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.05dvw;
  z-index: 10;
}

/* ============================================
   Decorative text group
   ============================================ */

.smart__deco-group {
  position: absolute;
  z-index: 1;
  width: var(--smart-deco-w);
  height: auto;
  left: var(--smart-side-pad);
  top: var(--smart-deco-top);
}

.smart__deco {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================
   Mirrored slide (card left, deco right)
   ============================================ */

.smart__slide--mirrored .smart__card {
  right: auto;
  left: var(--smart-side-pad);
}

.smart__slide--mirrored .smart__deco-group {
  left: auto;
  right: var(--smart-side-pad);
}

/* ============================================
   Background inside slides
   ============================================ */

.smart__slide .smart__bg {
  opacity: 0;
  transform: scale(1.08);
}

.smart__slide.smart__slide--active .smart__bg {
  opacity: 1;
  transform: scale(1);
}

.smart__slide--entering .smart__bg {
  animation: smartBgEnter 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.smart__slide--leaving .smart__bg {
  opacity: 1;
  transform: scale(1);
  animation: smartBgLeave 0.7s ease forwards;
}

/* ============================================
   Slides (per-element animations)
   ============================================ */

.smart__slide {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.smart__slide--active {
  pointer-events: auto;
  z-index: 2;
}

.smart__slide--leaving {
  pointer-events: none;
  z-index: 1;
}

.smart__slide--entering {
  pointer-events: none;
  z-index: 3;
}

/* --- Card: hidden by default, visible when active. Едет ПОВЕРХ надписи. --- */
.smart__slide .smart__card {
  opacity: 0;
}

.smart__slide.smart__slide--active .smart__card {
  opacity: 1;
  transform: none;
}

/* Уезжающая карточка проезжает к слоту в новом слайде (над надписью) */
.smart__slide--leaving .smart__card {
  animation: smartCardSwapOut 1s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

/* Въезжающая карточка приезжает из слота старого слайда */
.smart__slide--entering .smart__card {
  animation: smartCardSwapIn 1s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

/* --- Deco group: hidden by default, visible when active. Едет ПОД карточкой. --- */
.smart__slide .smart__deco-group {
  opacity: 0;
}

.smart__slide.smart__slide--active .smart__deco-group {
  opacity: 1;
  transform: none;
}

/* Уезжающая надпись проезжает под карточкой к слоту нового слайда */
.smart__slide--leaving .smart__deco-group {
  animation: smartDecoSwapOut 1s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

/* Въезжающая надпись выезжает из-под карточки в свой слот */
.smart__slide--entering .smart__deco-group {
  animation: smartDecoSwapIn 1s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

/* ============================================
   Keyframes — "обмен местами": карточка и надпись
   проезжают друг сквозь друга (надпись под карточкой),
   текст надписи подменяется в момент проезда под карточкой.

   --smart-card-shift / --smart-deco-shift задаются из JS:
   px-смещение от текущего слота к слоту в новом слайде.
   ============================================ */

@keyframes smartCardSwapOut {
  0%   { opacity: 1; transform: translateX(0); }
  60%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(var(--smart-card-shift, 0)); }
}

@keyframes smartCardSwapIn {
  0%   { opacity: 0; transform: translateX(calc(-1 * var(--smart-card-shift, 0))); }
  40%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes smartDecoSwapOut {
  0%   { opacity: 1; transform: translateX(0); }
  40%  { opacity: 1; }
  52%  { opacity: 0; }
  100% { opacity: 0; transform: translateX(var(--smart-deco-shift, 0)); }
}

@keyframes smartDecoSwapIn {
  0%   { opacity: 0; transform: translateX(calc(-1 * var(--smart-deco-shift, 0))); }
  48%  { opacity: 0; }
  62%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); }
}

/* Background */
@keyframes smartBgEnter {
  0%   { opacity: 0; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes smartBgLeave {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.95); }
}

/* ============================================
   Product card
   ============================================ */

.smart__card {
  max-width: var(--smart-card-w);
  min-width: var(--smart-card-w);
  padding: var(--smart-card-pad);
  right: var(--smart-card-right);
  top: var(--smart-card-top);
  position: absolute;
  z-index: 3; /* поверх .smart__deco-group (z-index: 1) — надпись проезжает под карточкой */
  background: #EFEFEF;
  box-shadow: 0px 0.37dvh 0.74dvh rgba(3, 26, 26, 0.10);
  border-radius: var(--smart-radius);
  backdrop-filter: blur(7.50px);
}

/* ============================================
   Color dots (product switcher)
   ============================================ */

.smart__colors {
  position: absolute;
  left: var(--smart-dot-offset);
  top: var(--smart-dot-offset);
  display: flex;
  gap: 0px;
  z-index: 5;
}

.smart__color-dot {
  width: var(--smart-dot-size);
  height: var(--smart-dot-size);
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.smart__color-dot svg {
  width: 85%;
  height: 85%;
  display: block;
  border-radius: 50%;
}

.smart__color-dot--active {
  border-color: var(--dot-color, #094141);
}

/* ============================================
   Card images (stacked for crossfade)
   ============================================ */

.smart__card-images {
  width: var(--smart-img-size);
  height: var(--smart-img-size);
  position: relative;
  border-radius: var(--smart-img-radius);
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
}

.smart__card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.smart__card-image--active {
  opacity: 1;
}

/* ============================================
   Card info (stacked for crossfade)
   ============================================ */

.smart__card-infos {
  position: relative;
  flex: 1;
  min-height: 0;
}

.smart__card-info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--smart-info-gap);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.smart__card-info--active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}

.smart__card-name {
  color: #094141;
  font-size: var(--smart-fs-title);
  font-family: Inter, sans-serif;
  font-weight: 900;
  line-height: 110%;
}

.smart__card-color {
  color: #094141;
  font-size: var(--smart-fs-text);
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.06dvw;
}

.smart__card-prices {
  display: inline-flex;
  align-items: center;
  gap: var(--smart-prices-gap);
}

.smart__card-price {
  color: #094141;
  font-size: var(--smart-fs-text);
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.06dvw;
  white-space: nowrap;
}

.smart__card-old-price {
  position: relative;
  opacity: 0.50;
  color: #094141;
  font-size: var(--smart-fs-text);
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.06dvw;
  white-space: nowrap;
}

.smart__card-old-price-line {
  position: absolute;
  left: -1px;
  top: 50%;
  width: 100%;
  height: 2px;
  background: #094141;
}

/* ============================================
   Buttons (stacked per product)
   ============================================ */

.smart__card-buttons {
  position: relative;
  min-height: var(--smart-btn-h);
}

.smart__card-actions {
  display: none;
  align-items: center;
  gap: var(--smart-actions-gap);
}

.smart__card-actions--active {
  display: flex;
}

.smart__btn-cart {
  width: var(--smart-btn-w);
  height: var(--smart-btn-h);
  background: #094141;
  border-radius: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: var(--smart-fs-text);
  font-family: Inter, sans-serif;
  font-weight: 700;
  line-height: 120%;
  letter-spacing: -0.025dvw;
  text-decoration: none;
  white-space: nowrap;
}

.smart__btn-detail {
  width: var(--smart-btn-w);
  height: var(--smart-btn-h);
  background: white;
  border-radius: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #094141;
  font-size: var(--smart-fs-small);
  font-family: Inter, sans-serif;
  font-weight: 700;
  line-height: 120%;
  letter-spacing: -0.02dvw;
  text-decoration: none;
  white-space: nowrap;
}

/* Favorite button */
.smart__btn-favorite {
  display: none;
  width: var(--smart-fav-size);
  height: var(--smart-fav-size);
  position: absolute;
  right: 0;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  z-index: 5;
}

.smart__btn-favorite svg {
  width: 100%;
  height: 100%;
}

.smart__btn-favorite.is-favorite svg {
  display: none;
}

.smart__btn-favorite::after {
  content: none;
}

.smart__btn-favorite.is-favorite::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='52' height='52' viewBox='0 0 52 52' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M27.0158 35.3068C26.442 35.8393 25.5533 35.8393 24.9795 35.3068L24.597 34.9505C19.6208 30.3718 16.332 27.3418 16.332 23.6443C16.332 20.6143 18.672 18.248 21.6495 18.248C23.3333 18.248 24.9458 19.043 25.9995 20.288C27.0533 19.043 28.6658 18.248 30.3495 18.248C33.327 18.248 35.667 20.6105 35.667 23.6443C35.667 27.3418 32.382 30.3718 27.402 34.9543L27.0195 35.3105L27.0158 35.3068Z' fill='%23E2F397' stroke='%23E2F397' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.smart__btn-favorite svg path {
  transition: fill 0.2s ease, stroke 0.2s ease;
}

/* ============================================
   Section navigation (tabs)
   ============================================ */

.smart__nav {
  position: absolute;
  bottom: var(--smart-nav-bottom);
  left: var(--smart-side-pad);
  display: flex;
  gap: var(--smart-nav-gap);
  z-index: 10;
}

.smart__nav-btn {
  padding: var(--smart-nav-pad-v) var(--smart-nav-pad-h);
  border-radius: 1000px;
  border: 1.5px solid rgba(226, 243, 151, 0.4);
  background: transparent;
  color: rgba(226, 243, 151, 0.6);
  font-size: var(--smart-fs-nav);
  font-family: Inter, sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.smart__nav-btn:hover {
  border-color: rgba(226, 243, 151, 0.7);
  color: rgba(226, 243, 151, 0.9);
}

.smart__nav-btn--active {
  background: #E2F397;
  border-color: #E2F397;
  color: #094141;
}

.smart__nav-btn--active:hover {
  color: #094141;
  border-color: #E2F397;
}

/* ============================================
   Низкая высота viewport (например 1536×695) — уменьшаем карточку
   ============================================ */

@media (max-height: 800px) and (min-width: 1441px) {
  .smart__card {
    scale: 0.7;
  }

  .smart__bg {
    width: 110.7%;
    height: 136.3%;
  }
}

/* ============================================
   @media 1440px — tablet overrides
   ============================================ */

@media (max-width: 1440px) {
  .smart {
    --smart-base:        1.67dvw;
    --smart-side-pad:    1.39dvw;    /* 20px */
    --smart-radius:      1.67dvw;    /* 24px */

    --smart-card-w:      25.56dvw;   /* 368px */
    --smart-card-h:      auto;
    --smart-card-pad:    1.67dvw;    /* 24px */
    --smart-card-right:  1.39dvw;    /* 20px */
    --smart-card-top:    27%;
    --smart-card-gap:    1.67dvw;    /* 24px */

    --smart-img-size:    22.22dvw;   /* 320px */

    --smart-deco-top:    calc(36%);

    --smart-title-top:   5.56dvh;    /* 60px */

    --smart-fs-title:    1.25dvw;    /* 18px */
    --smart-fs-text:     0.97dvw;    /* 14px */
    --smart-fs-small:    0.97dvw;    /* 14px */
    --smart-fs-nav:      0.97dvw;    /* 14px */

    --smart-btn-w:       10.42dvw;   /* 150px */
    --smart-btn-h:       2.78dvw;    /* 40px */

    --smart-dot-size:    1.39dvw;    /* 20px */

    --smart-nav-bottom:  3.70dvh;    /* 40px */
    --smart-nav-gap:     0.69dvw;    /* 10px */
    --smart-nav-pad-v:   0.69dvw;    /* 10px */
    --smart-nav-pad-h:   1.67dvw;    /* 24px */

    --smart-prices-gap:  0.56dvw;    /* 8px */
    --smart-actions-gap: 0.56dvw;    /* 8px */
    --smart-fav-size:    2.43dvw;    /* 35px */

    max-width: 1440px;
  }

  .smart__card {
    max-height: 554px;
    background: white;
  }

  .smart__colors {
    gap: 4px;
  }

  .smart__card-color {
    letter-spacing: -0.70px;
  }

  .smart__card-price {
    letter-spacing: -0.70px;
  }

  .smart__card-old-price {
    letter-spacing: -0.70px;
  }

  .smart__card-old-price-line {
    height: 1px;
  }

  .smart__btn-cart {
    font-size: 1.11dvw;  /* 16px */
    letter-spacing: -0.32px;
  }

  .smart__btn-detail {
    font-size: 1.11dvw;  /* 16px */
    letter-spacing: -0.32px;
    /* iOS Safari < 16.4: outline не учитывает border-radius — даёт квадратную рамку. Используем inset box-shadow. */
    box-shadow: inset 0 0 0 1px #094141;
  }

  .smart__btn-favorite {
    right: 24px;
  }

  .smart__title {
    letter-spacing: -0.70px;
  }

  /* Mirrored tablet */
  .smart__slide--mirrored .smart__card {
    right: auto;
    left: var(--smart-side-pad);
  }

  .smart__slide--mirrored .smart__deco-group {
    left: auto;
    right: var(--smart-side-pad);
  }
}

/* ============================================
   @media 480px — mobile overrides
   ============================================ */

@media (max-width: 480px) {
  .smart__desktop-only {
    display: none;
  }

  .smart__mobile-only {
    display: block;
  }

  .smart {
    --smart-side-pad:    5.56dvw;    /* 20px */
    --smart-radius:      3.33dvw;    /* 12px */

    --smart-card-w:      86.11dvw;   /* 310px */
    --smart-card-h:      130.56dvw;  /* 470px */
    --smart-card-pad:    6.67dvw;    /* 24px */
    --smart-card-gap:    6.67dvw;    /* 24px */

    --smart-img-size:    72.22dvw;   /* 260px */
    --smart-img-radius:  1.23dvw;    /* 4.42px */

    --smart-fs-title:    5dvw;       /* 18px */
    --smart-fs-text:     3.89dvw;    /* 14px */
    --smart-fs-small:    3.89dvw;    /* 14px */

    --smart-btn-w:       31.67dvw;   /* 114px */
    --smart-btn-h:       8.33dvw;    /* 30px */

    --smart-dot-size:    4.44dvw;    /* 16px */

    --smart-nav-bottom:  5.56dvw;    /* 20px */
    --smart-nav-gap:     2.22dvw;    /* 8px */
    --smart-nav-pad-v:   2.22dvw;    /* 8px */
    --smart-nav-pad-h:   4.44dvw;    /* 16px */
    --smart-fs-nav:      3.33dvw;    /* 12px */

    --smart-info-gap:    2.22dvw;    /* 8px */
    --smart-prices-gap:  1.94dvw;    /* 7px */
    --smart-actions-gap: 1.54dvw;    /* 5.53px */
    --smart-fav-size:    8.33dvw;    /* 30px */

    max-width: 360px;
    height: 750px;
    background: white;
  }

  .smart__bg {
    width: 1100px;
    height: 750px;
    left: 0;
    top: 0;
  }

  .smart__title {
    width: 320px;
    left: var(--smart-side-pad);
    top: 62px;
    letter-spacing: -0.70px;
  }

  .smart__deco-group {
    left: 25px;
    top: 100px;
  }

  .smart__card {
    left: 25px;
    right: auto;
    top: 242.48px;
    background: #EFEFEF;
    box-shadow: 0px 2.21px 5.53px rgba(9, 65, 65, 0.10);
    border-radius: 17.70px;
    backdrop-filter: blur(4.15px);
  }

  .smart__colors {
    gap: 4px;
  }

  .smart__card-color {
    letter-spacing: -0.70px;
  }

  .smart__card-price {
    letter-spacing: -0.70px;
  }

  .smart__card-old-price {
    letter-spacing: -0.70px;
  }

  .smart__card-old-price-line {
    height: 1.17px;
  }

  .smart__btn-cart {
    padding-left: 24px;
    padding-right: 24px;
    font-size: 3.2dvw;
    letter-spacing: -0.28px;
  }

  .smart__btn-detail {
    padding-left: 24px;
    padding-right: 24px;
    font-size: 3.2dvw;
    letter-spacing: -0.28px;
  }

  .smart__btn-favorite {
    right: 24px;
  }

  .smart__nav {
    left: 25px;
  }

  /* Mirrored mobile: same layout as default, no mirror */
  .smart__slide--mirrored .smart__card {
    left: 25px;
    right: auto;
  }
}

/* ============================================
   @media 768px — mobile column layout
   ============================================ */

@media (max-width: 768px) {
  .smart-scroll {
    height: calc(100lvh * var(--smart-slides, 2));
  }

  .smart {
    border-radius: 0;
    max-width: 100%;
    height: 100lvh;
  }

  /* Фон: широкая панорама, JS двигает через transform */
  .smart__bg {
    width: 300%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
    object-position: left center;
  }

  /* Скрываем все слайдовые фоны, показываем панораму */
  .smart__slide .smart__bg-picture {
    display: none !important;
  }

  .smart__bg-panorama {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 300%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    z-index: 0;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Flex column на всех состояниях слайда */
  .smart__slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5svh;
    padding: clamp(75px, 9svh, 95px) 0 4svh;
  }

  .smart__title {
    position: absolute;
    left: 20px;
    top: 60px;
  }

  .smart__deco-group {
    position: relative;
    align-self: flex-end;
    right: initial;
    top: auto;
    left: -52px;
    width: auto;
    max-width: 80%;
    height: 11svh;
    aspect-ratio: 607 / 227;
    z-index: 2;
  }

  /* Deco/card: JS управляет opacity напрямую */
  .smart__slide .smart__deco-group,
  .smart__slide .smart__card {
    transition: none;
  }

  /* Отключаем desktop-анимации на мобилке */
  .smart__slide .smart__deco-group,
  .smart__slide .smart__card,
  .smart__slide--entering .smart__deco-group,
  .smart__slide--leaving .smart__deco-group,
  .smart__slide--entering .smart__card,
  .smart__slide--leaving .smart__card {
    animation: none !important;
    transform: none !important;
  }

  .smart__card {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: calc(100% - 32px);
    max-width: 368px;
    min-width: unset;
    height: auto;
    z-index: 2;
    box-sizing: border-box;
  }

  .smart__card-images {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  /* Mirrored: same layout, no mirror */
  .smart__slide--mirrored .smart__card {
    left: auto;
    right: auto;
  }
}

/* ============================================
   Portrait — tablet (iPad и подобные)
   ============================================ */

@media (max-aspect-ratio: 3/4) and (min-width: 768px) {
  .smart {
    --smart-card-w:      45dvw;       /* карточки крупнее — узкий dvw */
    --smart-card-pad:    3dvw;
    --smart-card-gap:    3dvw;
    --smart-card-right:  3dvw;
    --smart-card-top:    20%;

    --smart-img-size:    38dvw;
    --smart-img-radius:  1dvw;

    --smart-deco-top:    25%;
    --smart-side-pad:    3dvw;

    --smart-radius:      2.5dvw;

    --smart-fs-title:    3dvw;
    --smart-fs-text:     2dvw;
    --smart-fs-small:    1.8dvw;
    --smart-fs-nav:      1.6dvw;

    --smart-btn-w:       18dvw;
    --smart-btn-h:       5dvw;
    --smart-fav-size:    5dvw;

    --smart-dot-size:    3dvw;
    --smart-dot-offset:  1.2dvw;

    --smart-nav-bottom:  4dvh;
    --smart-nav-gap:     1.5dvw;
    --smart-nav-pad-v:   1.2dvw;
    --smart-nav-pad-h:   2.5dvw;

    --smart-info-gap:    1.2dvw;
    --smart-prices-gap:  1dvw;
    --smart-actions-gap: 1dvw;

    --smart-title-top:   4dvh;
  }

  .smart__card {
    max-height: 60dvh;
  }

  .smart__deco-group {
    aspect-ratio: 607 / 227;
  }

  .smart__btn-cart {
    font-size: 2.2dvw;
  }

  .smart__btn-detail {
    font-size: 2dvw;
  }
}

/* ============================================
   Portrait — phone (смартфоны вертикально)
   ============================================ */

@media (max-aspect-ratio: 3/4) and (max-width: 767px) {
  .smart {
    --smart-card-w:      80dvw;
    --smart-card-pad:    5dvw;
    --smart-card-gap:    5dvw;

    --smart-img-size:    70dvw;
    --smart-img-radius:  2dvw;

    --smart-side-pad:    5dvw;
    --smart-radius:      4dvw;

    --smart-fs-title:    5.0dvw;
    --smart-fs-text:     4dvw;
    --smart-fs-small:    4dvw;
    --smart-fs-nav:      3.5dvw;

    --smart-btn-w:       30dvw;
    --smart-btn-h:       9dvw;
    --smart-fav-size:    9dvw;

    --smart-dot-size:    5dvw;
    --smart-dot-offset:  2dvw;

    --smart-nav-bottom:  3dvh;
    --smart-nav-gap:     2.5dvw;
    --smart-nav-pad-v:   2.5dvw;
    --smart-nav-pad-h:   4dvw;

    --smart-info-gap:    2.5dvw;
    --smart-prices-gap:  2dvw;
    --smart-actions-gap: 2dvw;
  }

  .smart__deco-group {
    aspect-ratio: 607 / 227;
  }

  .smart__btn-cart {
    font-size: 3.2dvw;
  }

  .smart__btn-detail {
    font-size: 3.2dvw;
  }

  .smart__slide {
    align-items: center;
  }
}

/* ========== Bitrix edit mode ========== */
body.bx-panel-mode .smart-scroll {
  height: auto;
}

body.bx-panel-mode .smart {
  overflow: visible;
  height: auto;
  position: relative;
}

body.bx-panel-mode .smart__slide {
  position: relative;
  display: block;
  opacity: 1;
}

body.bx-panel-mode .smart__card {
  position: relative;
}

/* End */


/* Start:/local/templates/qfast/components/bitrix/news.list/linerun/style.css?17759985492001*/
/* linerun — бегущая строка преимуществ */

.linerun {
	width: 100%;

	padding: 20px 0;
	background: #fff;
	overflow: hidden;
	position: relative;
}

.linerun__track {
	display: flex;
	will-change: transform;
	width: max-content;
}

.linerun__set {
	display: flex;
	align-items: center;
	gap: 40px;
	padding-right: 40px;
}

.linerun__item {
	display: flex;
	align-items: center;
	gap: 12px;
	white-space: nowrap;
}

.linerun__icon {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #E2F397;
}

/* Иконка-глиф внутри SVG нарисована мелко относительно его viewBox —
   увеличиваем сам SVG, выходящий за круг фон обрезается (overflow: hidden),
   при этом «зелёный блок» (.linerun__icon) остаётся прежнего размера. */
.linerun__icon svg,
.linerun__icon img {
	width: 185%;
	height: 185%;
}

.linerun__icon svg,
.linerun__icon svg path,
.linerun__icon svg circle,
.linerun__icon svg rect,
.linerun__icon svg polygon {
	fill: #094141 !important;
}

/* кроме фонового круга самого SVG — он должен остаться салатовым */
.linerun__icon svg [fill="#E2F397"],
.linerun__icon svg [fill="#e2f397"] {
	fill: #E2F397 !important;
}

.linerun__text {
	color: #094141;
	font-size: 24px;
	font-family: 'Inter', sans-serif;
	font-weight: 900;
	line-height: 110%;
}

/* ===== 1200px ===== */
@media (max-width: 1200px) {
	.linerun {

		padding: 12px 0;
	}

	.linerun__set {
		gap: 25px;
		padding-right: 25px;
	}

	.linerun__icon {
		width: 32px;
		height: 32px;
	}

	.linerun__text {
		font-size: 18px;
	}
}

/* ===== 360px ===== */
@media (max-width: 480px) {
	.linerun {

		padding: 12px 0;
	}

	.linerun__set {
		gap: 24px;
		padding-right: 24px;
	}

	.linerun__text {
		font-size: 16px;
	}
}

/* End */


/* Start:/local/templates/qfast/components/bitrix/news.list/utp_scroll/style.css?177584869817466*/
/* ========== UTP — native horizontal scroll ========== */

.utp {
  position: relative;
  height: auto;
  margin-bottom: calc(-1 * var(--utp-card-radius));

  /* ===== Настраиваемые параметры ===== */

  /* Размеры */
  --utp-base:          clamp(20px, 1.67dvw, 32px);    /* базовая единица              (32px @ 1920) */
  /* Ширина карточки: единая база для info/photo, без привязки к высоте экрана. */
  --utp-card-w:        clamp(280px, 26.33dvw, 544px);
  /* Reels-карточка дополнительно ограничивается по высоте экрана (aspect 480/660 — высокая, может не влезть). */
  --utp-card-w-reels:  min(var(--utp-card-w), calc((100dvh - 220px) * 480 / 660));
  --utp-card-gap:      var(--utp-base);                /* расстояние между карточками */
  --utp-card-pad:      var(--utp-base);                /* внутренний отступ карточки  */
  --utp-card-pad-bot:  var(--utp-base);                /* нижний отступ карточки      */
  --utp-card-radius:   var(--utp-base);                /* скругление карточки         */
  --utp-card-radius-media: clamp(16px, 1.25dvw, 24px); /* скругление медиа внутри   (24px @ 1920) */
  --utp-side-pad:      clamp(20px, 4.17dvw, 80px);    /* боковые отступы секции       (80px @ 1920) */
  --utp-track-margin-top:    5dvh;                      /* отступ track-wrap сверху — синхронизирован с --utp-section-pad-y */
  --utp-track-margin-bottom: calc(var(--utp-base) * -1); /* отступ track-wrap снизу */

  /* Шрифты */
  --utp-fs-title:      clamp(24px, 2.5dvw, 48px);     /* заголовок секции             (48px @ 1920) */
  --utp-fs-subtitle:   clamp(14px, 1.04dvw, 20px);    /* подзаголовок секции          (20px @ 1920) */
  /* Шрифты карточек переопределяются в .utp__card через cqi (контейнерные единицы) */
}

.utp__sticky {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #094141;
  padding-top: var(--utp-section-edge);
  padding-bottom: var(--utp-section-edge);
  height: calc(100dvh + var(--utp-section-edge) * 2);
  box-sizing: border-box;

  --utp-section-pad-y: 5dvh;    /* единый вертикальный отступ внутри секции */
  --utp-section-edge:  60px;    /* «зелёные» поля секции сверху/снизу (desktop) */

  border-top-left-radius: var(--utp-card-radius);
  border-top-right-radius: var(--utp-card-radius);
}

/* Header */
.utp__header {
  padding: var(--utp-section-pad-y) var(--utp-side-pad) 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-shrink: 0;
  padding-right: 440px;
}

.utp__title {
  flex: 1;
  color: #E2F397;
  font-size: var(--utp-fs-title);
  font-family: Inter, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 110%;
  margin: 0;
}

.utp__subtitle {
  width: 16.15dvw;
  color: #E2F397;
  font-size: var(--utp-fs-subtitle);
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.05dvw;
}

/* Track wrapper — нативная горизонтальная прокрутка */
.utp__track-wrap {
  flex: 1 1 0;
  min-height: 0;
  margin-top: var(--utp-track-margin-top);
  margin-bottom: var(--utp-track-margin-bottom);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  container-type: size;
}

/* Нативный скроллбар скрываем — показываем кастомный ниже */
.utp__track-wrap { scrollbar-width: none; }
.utp__track-wrap::-webkit-scrollbar { width: 0; height: 0; }

/* Custom scrollbar (pill) */
.utp__scrollbar {
  position: relative;
  margin: clamp(16px, 2.22dvh, 24px) var(--utp-side-pad) clamp(16px, 2.22dvh, 24px);
  height: clamp(6px, 0.74dvh, 8px);
  background: rgba(226, 243, 151, 0.2);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
}

.utp__scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #E2F397;
  border-radius: 999px;
  transition: background .15s ease;
}

.utp__scrollbar-thumb:hover,
.utp__scrollbar-thumb.active {
  background: #c8dd76;
}

/* Cards track — нативный горизонтальный скролл */
.utp__cards {
  display: flex;
  align-items: flex-start;
  gap: var(--utp-card-gap);
  padding: 0 var(--utp-side-pad) var(--utp-base);
  width: max-content;
}

/* ========== CARD BASE ========== */

.utp__card {
  flex-shrink: 0;
  border-radius: var(--utp-card-radius);
  overflow: hidden;
  background: white;
  box-sizing: border-box;
  max-height: clamp(40dvh, 95cqh, 80dvh);
  container-type: inline-size;
  container-name: utp-card;
  --utp-fs-card-name: clamp(14px, 5.88cqi, 32px);
  --utp-fs-card-name-info: clamp(12px, 4.41cqi, 24px);
  --utp-fs-card-sub: clamp(9px, 3.31cqi, 18px);
  --utp-fs-tag: clamp(9px, 3.68cqi, 20px);
  --utp-fs-stat-value: clamp(28px, 11.95cqi, 65px);
  --utp-fs-stat-text: clamp(9px, 3.68cqi, 20px);
}
/* ---- Reels card ---- */
.utp__card--reels {
  width: var(--utp-card-w-reels);
  display: flex;
  flex-direction: column;
  gap: 0.83dvw;
  padding: var(--utp-card-pad) var(--utp-card-pad) var(--utp-card-pad-bot);
}

.utp__card--reels .utp__card-media {
  width: 100%;
  aspect-ratio: 480 / 660;
  position: relative;
  overflow: hidden;
  border-radius: var(--utp-card-radius-media);
}

.utp__card--reels .utp__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.utp__card-video,
.utp__card-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  z-index: 2;
}

.utp__card-video {
  object-fit: cover;
}

.utp__card-media--playing .utp__card-img,
.utp__card-media--playing .utp__card-play {
  opacity: 0;
  pointer-events: none;
}

.utp__card-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3.13dvw;
  height: 3.13dvw;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0.37dvh 0.74dvh rgba(3, 26, 26, 0.10));
  transition: transform 0.3s;
}

.utp__card-play-default,
.utp__card-play-hover {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s;
}

.utp__card-play-default {
  opacity: 1;
}

.utp__card-play-hover {
  opacity: 0;
}

.utp__card-play:hover {
  transform: translate(-50%, -50%) scale(1.05);
}

.utp__card-play:hover .utp__card-play-default {
  opacity: 0;
}

.utp__card-play:hover .utp__card-play-hover {
  opacity: 1;
}

.utp__card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.83dvw;
}

.utp__card-texts {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.63dvw;
}

.utp__card-name {
  color: #094141;
  font-size: var(--utp-fs-card-name);
  font-family: Inter, sans-serif;
  font-weight: 900;
  line-height: 110%;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.utp__card-subtitle {
  color: #094141;
  font-size: var(--utp-fs-card-sub);
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.047dvw;
  overflow-wrap: anywhere;
}

.utp__card-arrow {
  flex-shrink: 0;
  width: 1.67dvw;
  height: 1.67dvw;
  background: #E2F397;
  color: #094141;
  border-radius: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}

.utp__card-arrow svg {
  width: 1.25dvw;
  height: 1.25dvw;
}

.utp__card-arrow:hover {
  background: #094141;
  color: #E2F397;
}

.utp__card-arrow:active {
  background: #094141;
  color: #E2F397;
}

/* Стрелка в info-карточке: прижимается вправо в строке статистики */
.utp__card-arrow--inline {
  margin-left: auto;
}

/* Запасной ряд под стрелку, если статистики нет (info-карточка) */
.utp__card-arrow-row {
  display: flex;
  justify-content: flex-end;
}

/* Стрелка в photo-карточке: абсолютная позиция в углу поверх фото */
.utp__card--photo {
  position: relative;
}

.utp__card-arrow--photo {
  position: absolute;
  right: var(--utp-card-radius-media);
  bottom: var(--utp-card-radius-media);
  z-index: 2;
}

/* ---- Info/UTP card ---- */
.utp__card--info {
  width: var(--utp-card-w);
  padding: var(--utp-card-pad);
  display: flex;
  flex-direction: column;
  gap: 1.25dvw;
  box-shadow: 0 0.37dvh 0.93dvh rgba(9, 65, 65, 0.10);
  backdrop-filter: blur(7px);
  height: fit-content;
}

.utp__card--info .utp__card-media {
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  border-radius: var(--utp-card-radius-media);
}

.utp__card--info .utp__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.utp__card-tag {
  position: absolute;
  top: var(--utp-card-radius-media);
  left: var(--utp-card-radius-media);
  display: flex;
  align-items: flex-end;
  gap: clamp(4px, 0.42dvw, 8px);
}

.utp__card-tag-icon {
  width: clamp(28px, 2.71dvw, 52px);
  height: clamp(28px, 2.71dvw, 52px);
  background: #BDEEFF;
  border-radius: 1000px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.utp__card-tag-icon-img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

.utp__card-tag-icon svg {
  width: 100%;
  height: 100%;
}

.utp__card-tag-text {
  height: clamp(32px, 2.92dvw, 56px);
  padding: 0 var(--utp-card-radius-media);
  background: #BDEEFF;
  border-radius: 2.81dvw;
  display: flex;
  align-items: center;
  color: #094141;
  font-size: var(--utp-fs-tag);
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.05dvw;
  white-space: nowrap;
}

/* Tag color variants */
.utp__card-tag--turquoise .utp__card-tag-icon,
.utp__card-tag--turquoise .utp__card-tag-text {
  background: #B2F0E8;
}

.utp__card-tag--green .utp__card-tag-icon,
.utp__card-tag--green .utp__card-tag-text {
  background: #E2F397;
}

.utp__card--info .utp__card-name {
  font-size: var(--utp-fs-card-name-info);
}

.utp__card-stat {
  display: flex;
  align-items: center;
  gap: 1.67dvw;
}

.utp__card-stat-value {
  width: 7.81dvw;
  color: #094141;
  font-size: var(--utp-fs-stat-value);
  font-family: Inter, sans-serif;
  font-weight: 900;
  line-height: 100%;
  letter-spacing: -0.07dvw;
}

.utp__card-stat-text {
  flex: 1;
  color: #094141;
  font-size: var(--utp-fs-stat-text);
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.05dvw;
}

/* ---- Photo card ---- */
.utp__card--photo {
  width: var(--utp-card-w-reels);
  aspect-ratio: 480 / 660;
  max-height: none;
  overflow: visible;
  background: transparent;
}

.utp__card--photo .utp__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: var(--utp-card-radius-media);
}

/* ========== Video popup ========== */

.utp-video-popup {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.utp-video-popup--visible {
  opacity: 1;
  pointer-events: auto;
}

.utp-video-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}

.utp-video-popup__content {
  position: relative;
  width: 90dvw;
  max-width: 46.88dvw;
  max-height: 85dvh;
  aspect-ratio: 16 / 9;
}

.utp-video-popup__content:has(.utp-video-popup__video) {
  width: auto;
  max-width: 20.83dvw;
  aspect-ratio: auto;
}

.utp-video-popup__iframe,
.utp-video-popup__video {
  width: 100%;
  height: 100%;
  border-radius: 0.83dvw;
  object-fit: contain;
  background: #000;
}

.utp-video-popup__close {
  position: absolute;
  top: -4.44dvh;
  right: 0;
  width: 2.08dvw;
  height: 2.08dvw;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 1.25dvw;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.utp-video-popup__close:hover {
  background: rgba(255, 255, 255, 0.3);
}

@media (max-width: 1599px) {

.utp__header {

  padding-right: 0px;
}

}



/* ========== Mobile ========== */
@media (max-width: 767px) {

  .utp {
    --utp-card-w:        58.33dvw;
    --utp-card-gap:      3.33dvw;
    --utp-card-pad:      3.33dvw;
    --utp-card-pad-bot:  6.67dvw;
    --utp-card-radius:   4.17dvw;
    --utp-card-radius-media: 2.5dvw;
    --utp-side-pad:      4.17dvw;
    --utp-fs-title:      5dvw;
    --utp-fs-subtitle:   2.92dvw;
  }

  /* Поднимаем минимумы — на узких контейнерах cqi даёт слишком мелкий текст */
  .utp__card {
    --utp-fs-card-name:       clamp(18px, 7cqi, 24px);
    --utp-fs-card-name-info:  clamp(16px, 5.5cqi, 22px);
    --utp-fs-card-sub:        clamp(15px, 5.5cqi, 18px);
    --utp-fs-tag:             clamp(12px, 4cqi, 16px);
    --utp-fs-stat-value:      clamp(27px, 13cqi, 60px);
    --utp-fs-stat-text:       clamp(12px, 5.5cqi, 18px);
  }
  .utp__track-wrap {

    container-type: normal;
  }
  .utp__sticky {
    border-radius: 0;
    --utp-section-edge: 0px;
    padding-bottom: var(--utp-section-pad-y);
    height: auto;
    max-height: none;
  }

  /* На мобиле даём карточкам и треку растягиваться по контенту,
     чтобы текст не резался overflow: hidden внутри карточки */
  .utp__track-wrap {
    flex: 0 0 auto;
    min-height: 0;
    margin-bottom: 0;
  }
  .utp__card {
    max-height: none;
  }
  .utp__cards {
    padding-bottom: 0;
  }
  .utp__scrollbar {
    margin-top: var(--utp-card-gap);
    margin-bottom: var(--utp-card-gap);
  }

  .utp__header {
    padding: 5dvh var(--utp-side-pad) 0;
    flex-direction: column;
    gap: 2.5dvw;
  }

  .utp__subtitle { width: 100%; }

  .utp__card--reels { gap: 3.33dvw; }

  .utp__card-play { width: 6.25dvw; height: 6.25dvw; }

  .utp__card--info { gap: 2.5dvw; }
  .utp__card-tag-icon { width: 5.83dvw; height: 5.83dvw; }
  .utp__card-tag-text { height: 6.67dvw; padding: 0 2.5dvw; }
  .utp__card-stat-value { width: 16.67dvw; }

  .utp__card-arrow { width: 5dvw; height: 5dvw; }
  .utp__card-arrow svg { width: 3.33dvw; height: 3.33dvw; }

}


/* ========== Portrait — tablet (iPad и подобные) ========== */
@media (max-aspect-ratio: 3/4) and (min-width: 768px) {

  .utp {
    /* Размеры — увеличиваем относительно узкой ширины */
    --utp-card-w:        45dvw;
    --utp-card-gap:      3dvw;
    --utp-card-pad:      2.5dvw;
    --utp-card-pad-bot:  4dvw;
    --utp-card-radius:   3dvw;
    --utp-card-radius-media: 2dvw;
    --utp-side-pad:      3dvw;
    --utp-track-margin-top:    4dvw;
    --utp-track-margin-bottom: 4dvw;

    /* Шрифты — крупнее чтобы не терялись */
    --utp-fs-title:      4dvw;
    --utp-fs-subtitle:   1.8dvw;
  }

  .utp__sticky {
    --utp-section-edge: 0px;
    padding-bottom: var(--utp-section-pad-y);
    height: 100dvh;
    max-height: 100dvh;
  }

  .utp__header {

    flex-direction: column;
    gap: 2dvw;
  }
  .utp__track-wrap {
    container-type: size;


  }
  .utp__subtitle { width: 60dvw; }

  .utp__card-play { width: 4dvw; height: 4dvw; }

  .utp__card--info { gap: 2dvw; }
  .utp__card-tag-icon { width: 4dvw; height: 4dvw; }
  .utp__card-tag-text { height: 5dvw; padding: 0 2dvw; }
  .utp__card-stat-value { width: 12dvw; }

  .utp__card-arrow { width: 3.5dvw; height: 3.5dvw; }
  .utp__card-arrow svg { width: 2.5dvw; height: 2.5dvw; }

  .utp__track-wrap {
    flex: inherit;
  }

}


/* ========== Portrait — phone (смартфоны вертикально) ========== */
@media (max-aspect-ratio: 3/4) and (max-width: 767px) {

  .utp {
    /* Размеры — крупные карточки на узком экране */
    --utp-card-w:        75dvw;
    --utp-card-gap:      4dvw;
    --utp-card-pad:      4dvw;
    --utp-card-pad-bot:  6dvw;
    --utp-card-radius:   5dvw;
    --utp-card-radius-media: 3dvw;
    --utp-side-pad:      5dvw;
    --utp-track-margin-top:    5dvw;
    --utp-track-margin-bottom: 5dvw;

    /* Шрифты — читаемые на маленьком экране */
    --utp-fs-title:      7dvw;
    --utp-fs-subtitle:   3.5dvw;
  }
  .utp__track-wrap {
    flex: inherit;
  }

  .utp__header {
    padding: 10dvh var(--utp-side-pad) 0;
  }
  .utp__track-wrap {

    align-items: inherit;

  }
  .utp__card-play { width: 8dvw; height: 8dvw; }

  .utp__card--info { gap: 3dvw; }
  .utp__card-tag-icon { width: 7dvw; height: 7dvw; }
  .utp__card-tag-text { height: 8dvw; padding: 0 3dvw; }
  .utp__card-stat-value { width: 20dvw; }

  .utp__card-arrow { width: 6dvw; height: 6dvw; }
  .utp__card-arrow svg { width: 4dvw; height: 4dvw; }

}

/* End */


/* Start:/local/templates/qfast/components/bitrix/news.list/news_articles/style.css?177706492510372*/
/* ========== NEWS — blog/articles slider ========== */

.news {
  /* ===== Настраиваемые параметры ===== */
  --articles-base:           clamp(16px, 1.67dvw, 32px);
  --articles-radius:         clamp(16px, 1.67dvw, 32px);
  --articles-side-pad-x:     clamp(20px, 4.17dvw, 80px);
  --articles-side-pad-y:     clamp(40px, 7.41dvh, 80px);
  --articles-margin-top:     clamp(-32px, -2.96dvh, -16px);

  --articles-inner-gap:      clamp(32px, 5.56dvh, 60px);
  --articles-content-gap:    clamp(20px, 3.7dvh, 40px);

  --articles-card-w:         clamp(360px, 29.38dvw, 564px);
  --articles-card-pad:       var(--articles-base);
  --articles-card-gap:       var(--articles-base);
  --articles-card-radius:    clamp(16px, 1.56dvw, 30px);
  --articles-cards-gap:      clamp(16px, 1.3dvw, 25px);

  --articles-image-radius:   clamp(6px, 0.42dvw, 8px);
  --articles-image-pad-y:    clamp(10px, 1.57dvh, 17px);
  --articles-image-pad-x:    clamp(12px, 0.99dvw, 19px);

  --articles-tag-pad-y:      clamp(6px, 0.74dvh, 8px);
  --articles-tag-pad-x:      clamp(12px, 1.04dvw, 20px);
  --articles-card-text-gap:  clamp(8px, 0.63dvw, 12px);

  --articles-progress-h:     clamp(6px, 0.93dvh, 10px);

  --articles-fs-title:       clamp(32px, 2.5dvw, 48px);
  --articles-fs-subtitle:    clamp(14px, 1.04dvw, 20px);
  --articles-fs-tag:         clamp(12px, 0.83dvw, 16px);
  --articles-fs-card-title:  clamp(18px, 1.25dvw, 24px);
  --articles-fs-card-desc:   clamp(14px, 1.04dvw, 20px);

  --articles-subtitle-w:     clamp(180px, 11.61dvw, 223px);

  margin-top: var(--articles-margin-top);
  position: relative;
  background: #6E56A4;
  overflow: clip;
  border-radius: var(--articles-radius);
  padding: var(--articles-side-pad-y) var(--articles-side-pad-x);
}

/* ===== SVG backgrounds ===== */
.news__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.news__bg--desktop { display: block; top: 128px; }
.news__bg--tablet  { display: none; }
.news__bg--mobile  { display: none; }

/* ===== Inner layout ===== */
.news__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--articles-inner-gap);
}

.news__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 450px;

}

.news__title {
  color: white;
  font-size: var(--articles-fs-title);
  font-family: Inter, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 110%;
  margin: 0;
  white-space: nowrap;
}

.news__subtitle {
  max-width: var(--articles-subtitle-w);
  color: white;
  font-size: var(--articles-fs-subtitle);
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.05dvw;
  margin: 0;
}

/* ===== Content ===== */
.news__content {
  display: flex;
  flex-direction: column;
  gap: var(--articles-content-gap);
}

/* ===== Cards row ===== */
.news__cards {
  display: flex;
  gap: var(--articles-cards-gap);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-top: 10px;
  padding-bottom: 10px;
  /* Тянем ленту на полную ширину .news, чтобы карточки улетали за край экрана */
  margin-inline: calc(-1 * var(--articles-side-pad-x));
  padding-inline: var(--articles-side-pad-x);
  scroll-padding-inline: var(--articles-side-pad-x);
}
.news__cards::-webkit-scrollbar { display: none; }

/* ===== Card ===== */
.news__card {
  flex: 0 0 var(--articles-card-w);
  scroll-snap-align: start;
  background: white;
  border-radius: var(--articles-card-radius);
  padding: var(--articles-card-pad);
  display: flex;
  flex-direction: column;
  gap: var(--articles-card-gap);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}
.news__card:hover {
  transform: translateY(-4px);
}

.news__card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 500 / 400;
  background: #C8C8C8;
  border-radius: var(--articles-image-radius);
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--articles-image-pad-y) var(--articles-image-pad-x);
}
.news__card-image picture {
  position: absolute;
  inset: 0;
  display: block;
}
.news__card-image-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.news__card-image > .news__tag { position: relative; z-index: 1; }

.news__tag {
  padding: var(--articles-tag-pad-y) var(--articles-tag-pad-x);
  border-radius: 1000px;
  font-size: var(--articles-fs-tag);
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.04dvw;
  white-space: nowrap;
}

.news__tag--category {
  background: #E2F397;
  color: #094141;
}

.news__tag--time {
  background: white;
  color: #094141;
}

.news__card-text {
  display: flex;
  flex-direction: column;
  gap: var(--articles-card-text-gap);
}

.news__card-title {
  color: #094141;
  font-size: var(--articles-fs-card-title);
  font-family: Inter, sans-serif;
  font-weight: 900;
  line-height: 110%;
}

.news__card-desc {
  color: #094141;
  font-size: var(--articles-fs-card-desc);
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.05dvw;
}

/* ===== Scrollbar / slider ===== */
.news__progress {
  position: relative;
  height: var(--articles-progress-h);
  background: white;
  border-radius: 1000px;
  cursor: pointer;
}

.news__progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 33%;
  background: #094141;
  border-radius: 1000px;
  cursor: grab;
}

.news__progress-bar:active {
  cursor: grabbing;
}

/* ==========================================================================
   @media (max-width: 1599px) — Tablet
   ========================================================================== */

@media (max-width: 1599px) {
  .news__header {

    padding-right: 0px;

  }
  .news {
    --articles-radius:        24px;
    --articles-side-pad-x:    20px;
    --articles-side-pad-y:    60px;
    --articles-inner-gap:     40px;
    --articles-content-gap:   20px;
    --articles-cards-gap:     24px;
    --articles-card-w:        368px;
    --articles-card-pad:      24px;
    --articles-card-gap:      24px;
    --articles-card-radius:   24px;
    --articles-card-text-gap: 8px;
    --articles-image-pad-y:   10px;
    --articles-image-pad-x:   10px;
    --articles-progress-h:    6px;
    --articles-subtitle-w:    160px;
    --articles-fs-tag:        14px;
  }

  .news__bg--desktop { display: none; }
  .news__bg--tablet  { display: block; }

  .news__subtitle { letter-spacing: -0.7px; }

  .news__card-image { aspect-ratio: 1 / 1; }

  .news__tag { letter-spacing: -0.7px; }
}

/* ==========================================================================
   @media (max-width: 767px) — Mobile
   ========================================================================== */

@media (max-width: 767px) {
  .news {
    --articles-radius:        12px;
    --articles-side-pad-x:    20px;
    --articles-side-pad-y:    100px;
    --articles-inner-gap:     40px;
    --articles-content-gap:   40px;
    --articles-cards-gap:     12px;
    --articles-card-w:        308px;
    --articles-card-pad:      12px;
    --articles-card-gap:      24px;
    --articles-card-radius:   12px;
    --articles-card-text-gap: 8px;
    --articles-image-pad-y:   10px;
    --articles-image-pad-x:   10px;
    --articles-subtitle-w:    none;
    --articles-fs-tag:        12px;
  }

  .news__bg--tablet  { display: none; }
  .news__bg--mobile  { display: block; }

  .news__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .news__title {
    color: #E2F397;
    white-space: normal;
  }

  .news__subtitle {
    color: #E2F397;
    letter-spacing: -0.7px;
  }

  .news__card {
    padding: 12px 12px 32px;
  }

  .news__card-image { aspect-ratio: 1 / 1; }

  .news__tag {
    letter-spacing: -0.6px;
    padding: 4px 12px;
  }

  .news__progress { display: none; }
}

/* ==========================================================================
   Portrait — tablet
   ========================================================================== */

@media (max-aspect-ratio: 3/4) and (min-width: 768px) {
  .news {
    --articles-radius:        3dvw;
    --articles-side-pad-x:    3dvw;
    --articles-side-pad-y:    5dvw;
    --articles-inner-gap:     3dvw;
    --articles-content-gap:   2.5dvw;
    --articles-cards-gap:     2.5dvw;
    --articles-card-w:        45dvw;
    --articles-card-pad:      2.5dvw;
    --articles-card-gap:      2.5dvw;
    --articles-card-radius:   3dvw;
    --articles-image-radius:  1.5dvw;
    --articles-image-pad-y:   1.5dvw;
    --articles-image-pad-x:   1.5dvw;
    --articles-tag-pad-y:     1dvw;
    --articles-tag-pad-x:     2dvw;
    --articles-card-text-gap: 1.2dvw;
    --articles-progress-h:    0.8dvw;
    --articles-subtitle-w:    60dvw;
    --articles-fs-title:      4dvw;
    --articles-fs-subtitle:   1.8dvw;
    --articles-fs-tag:        1.6dvw;
    --articles-fs-card-title: 2.4dvw;
    --articles-fs-card-desc:  1.8dvw;
  }

  .news__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 2dvw;
  }
}

/* ==========================================================================
   Portrait — phone
   ========================================================================== */

@media (max-aspect-ratio: 3/4) and (max-width: 767px) {
  .news {
    --articles-radius:        4dvw;
    --articles-side-pad-x:    5dvw;
    --articles-side-pad-y:    16dvw;
    --articles-inner-gap:     6dvw;
    --articles-content-gap:   8dvw;
    --articles-cards-gap:     3dvw;
    --articles-card-w:        75dvw;
    --articles-card-pad:      4dvw;
    --articles-card-gap:      4dvw;
    --articles-card-radius:   4dvw;
    --articles-image-radius:  2dvw;
    --articles-image-pad-y:   2.5dvw;
    --articles-image-pad-x:   2.5dvw;
    --articles-tag-pad-y:     1.5dvw;
    --articles-tag-pad-x:     3dvw;
    --articles-card-text-gap: 2dvw;
    --articles-subtitle-w:    100%;
    --articles-fs-title:      7dvw;
    --articles-fs-subtitle:   3.5dvw;
    --articles-fs-tag:        3dvw;
    --articles-fs-card-title: 4.5dvw;
    --articles-fs-card-desc:  3.5dvw;
  }
}

/* End */


/* Start:/local/components/qfast/gdekupit/templates/.default/style.css?17762569833186*/
/* ========== GDEKUPIT — "Где найти Qleva?" ========== */

.gdekupit {
  width: 100%;
  background: white;
  overflow: hidden;
  padding: 0 0 10px;
}

.gdekupit__inner {
  max-width: 830px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.gdekupit__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 656px;
}

.gdekupit__title {
  text-align: center;
  color: #094141;
  font-size: clamp(32px, 2.5vw, 48px);
  font-family: Inter, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 110%;
  margin: 0;
}

.gdekupit__subtitle {
  text-align: center;
  color: #094141;
  font-size: clamp(14px, 1.04vw, 20px);
  font-family: Inter, sans-serif;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -1px;
  margin: 0;
}

/* ========== ICONS ROW ========== */

.gdekupit__icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.gdekupit__icon {
  position: relative;
  width: 150px;
  height: 70px;
  display: block;
  text-decoration: none;
}

/* Icon default/hover swap */
.gdekupit__icon--hover .gdekupit__icon-default,
.gdekupit__icon--hover .gdekupit__icon-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.2s;
}

.gdekupit__icon--hover .gdekupit__icon-hover {
  opacity: 0;
}

.gdekupit__icon--hover:hover .gdekupit__icon-default {
  opacity: 0;
}

.gdekupit__icon--hover:hover .gdekupit__icon-hover {
  opacity: 1;
}

/* ==========================================================================
   @media (max-width: 1200px) — Tablet
   ========================================================================== */

@media (max-width: 1200px) {
  .gdekupit__inner {
    max-width: 560px;
    gap: 24px;
  }

  .gdekupit__text {
    max-width: 410px;
    gap: 8px;
  }

  .gdekupit__subtitle {
    letter-spacing: -0.70px;
  }

  .gdekupit__icons {
    gap: 12.5px;
  }

  .gdekupit__icon {
    width: 102px;
    height: 48px;
  }
}

/* ==========================================================================
   @media (max-width: 767px) — Mobile
   ========================================================================== */

@media (max-width: 767px) {
  .gdekupit {
    padding: 80px 20px 60px;
  }

  .gdekupit__inner {
    max-width: 320px;
    align-items: center;
    gap: 32px;
  }

  .gdekupit__text {
    max-width: 283px;
    align-items: center;
    gap: 4px;
  }

  .gdekupit__title {
    text-align: center;
    font-size: 28px;
    white-space: nowrap;
  }

  .gdekupit__subtitle {
    text-align: center;
    font-size: 14px;
    letter-spacing: -0.70px;
    white-space: nowrap;
  }

  .gdekupit__icons {
    justify-content: center;
    gap: 4px;
    align-self: stretch;
  }

  .gdekupit__icon {
    width: 100px;
    height: 48px;
  }

  /* Touch-устройства: ховер не срабатывает, показываем hover-вариант постоянно */
  .gdekupit__icon--hover .gdekupit__icon-default {
    opacity: 0;
  }
  .gdekupit__icon--hover .gdekupit__icon-hover {
    opacity: 1;
  }
}

/* End */


/* Start:/local/components/qfast/musik/templates/v3/style.css?177587097325756*/
/* ========== MUSIK SLIDER — split-panel before/after ========== */

.musik-wrap {
  width: 100%;
  overflow: hidden;
  border-radius: 1.667cqw;
  container-type: inline-size;
  aspect-ratio: 1920 / 1080;
}

.animatsiya-muzyka {
  --split: 67.934cqw;
  width: 100%;
  height: 100%;
  position: relative;
  background: #094141;
  overflow: hidden;
}

/* ========== LEFT BACKGROUND (energetic guy) — z:1 ========== */

.animatsiya-muzyka__group-2043683175 {
  width: 101.486cqw;
  height: 152.211cqw;
  left: -1.486cqw;
  top: -47.46cqw;
  position: absolute;
  z-index: 1;
}

.animatsiya-muzyka__qleva9708-5 {
  width: 101.486cqw;
  height: 152.211cqw;
  left: 0;
  top: 0;
  position: absolute;
}

.animatsiya-muzyka__qleva9708-7 {
  width: 101.486cqw;
  height: 152.211cqw;
  left: 0;
  top: 0;
  transition: filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  position: absolute;
  will-change: filter;
  transform: translateZ(0);
}


/* ========== GREEN TEXT "Махи шваброй" (left side) — z:3 ========== */

.animatsiya-muzyka__group-2043683159 {
  width: 39.323cqw;
  height: 12.656cqw;
  left: 4.167cqw;
  top: 20.312cqw;
  position: absolute;
  z-index: 3;
  transition: filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.animatsiya-muzyka__svg-2 {
  width: 39.323cqw;
  height: 9.948cqw;
  left: 0;
  top: 2.708cqw;
  position: absolute;
}

.animatsiya-muzyka__tantsy,
.animatsiya-muzyka__dzen-img,
.animatsiya-muzyka__m-tantsy,
.animatsiya-muzyka__m-dzen-img { width: 100%; height: 100%; display: block; }

.animatsiya-muzyka__makhi-shvabroy-pod-ritmichnye {
  left: 10cqw;
  top: 0;
  position: absolute;
  color: #E2F397;
  font-size: 1.25cqw;
  font-family: Inter;
  font-weight: 900;
  line-height: 110%;
  white-space: nowrap;
}


/* ========== RIGHT PANEL (zen girl) — z:5, overflow:hidden ========== */
/* Images clipped to panel bounds. Blue text (dzen) inside — peeks at edge */

.animatsiya-muzyka__mask-group {
  width: calc(100cqw - var(--split));
  height: 57.292cqw;
  left: var(--split);
  top: 0;
  position: absolute;
  z-index: 5;
  overflow: hidden;
}

.animatsiya-muzyka--animating .animatsiya-muzyka__mask-group {
  transition: left 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.animatsiya-muzyka__rectangle-3976566 {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  background: #D9D9D9;
}

.animatsiya-muzyka__group-2043683177 {
  width: 101.055cqw;
  height: 151.553cqw;
  left: calc(-1 * var(--split));
  top: -39.235cqw;
  position: absolute;
}

.animatsiya-muzyka--animating .animatsiya-muzyka__group-2043683177 {
  transition: left 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.animatsiya-muzyka__qleva9642-2 {
  width: 101.055cqw;
  height: 151.553cqw;
  left: 0;
  top: 0;
  position: absolute;
}

.animatsiya-muzyka__qleva9642-3 {
  width: 101.055cqw;
  height: 151.553cqw;
  left: 0;
  top: 0;
  position: absolute;
  filter: none;
  transition: filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: filter;
  transform: translateZ(0);
}

/* State 1: right panel (inactive) blurred — text too */
.animatsiya-muzyka__dzen {
  filter: none;
  transition: filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* State 2: left blurs, right sharpens */
.animatsiya-muzyka--state-2 .animatsiya-muzyka__qleva9708-7 {
  filter: none;
}
.animatsiya-muzyka--state-2 .animatsiya-muzyka__qleva9642-3 {
  filter: none;
}
.animatsiya-muzyka--state-2 .animatsiya-muzyka__dzen {
  filter: none;
}
.animatsiya-muzyka--state-2 .animatsiya-muzyka__group-2043683159 {
  filter: none;
}

/* Blue text "Мой дом мой храм" — inside mask-group, peeks from edge */
.animatsiya-muzyka__dzen {
  width: 32.054cqw;
  height: 13.316cqw;
  left: 63.542cqw;
  top: 59.547cqw;
  position: absolute;
}

.animatsiya-muzyka__moy-dom-moy-khram {
  left: 9.777cqw;
  top: 0;
  position: absolute;
  color: #BDEEFF;
  font-size: 1.25cqw;
  font-family: Inter;
  font-weight: 900;
  line-height: 110%;
  white-space: nowrap;
}

.animatsiya-muzyka__svg {
  width: 32.054cqw;
  height: 10.527cqw;
  left: 0;
  top: 2.79cqw;
  position: absolute;
  overflow: hidden;
}

/* ========== BUTTONS (root level) — z:8 ========== */

.animatsiya-muzyka__knopki {
  width: 11.458cqw;
  height: 2.708cqw;
  padding-left: 3.125cqw;
  padding-right: 3.125cqw;
  left: 44.271cqw;
  top: 50.417cqw;
  position: absolute;
  z-index: 8;
  background: #E2F397;
  border-radius: 52.083cqw;
  justify-content: center;
  align-items: center;
  gap: 0.521cqw;
  display: inline-flex;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.5s ease;
}
.animatsiya-muzyka__knopki:hover { opacity: 0.85; }

.animatsiya-muzyka__v-katalog {
  color: #094141;
  font-size: 1.042cqw;
  font-family: Inter;
  font-weight: 700;
  line-height: 120%;
  letter-spacing: -0.021cqw;
  white-space: nowrap;
}

.animatsiya-muzyka__knopki-2 {
  width: 11.458cqw;
  height: 2.708cqw;
  padding-left: 3.125cqw;
  padding-right: 3.125cqw;
  left: 44.271cqw;
  top: 50.417cqw;
  position: absolute;
  z-index: 8;
  background: #BDEEFF;
  border-radius: 52.083cqw;
  justify-content: center;
  align-items: center;
  gap: 0.521cqw;
  display: inline-flex;
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.animatsiya-muzyka__knopki-2:hover { opacity: 0.85; }

.animatsiya-muzyka__v-katalog-2 {
  color: #094141;
  font-size: 1.042cqw;
  font-family: Inter;
  font-weight: 700;
  line-height: 120%;
  letter-spacing: -0.021cqw;
  white-space: nowrap;
}


/* ========== DIVIDER WITH ARROWS — z:10 ========== */

.animatsiya-muzyka__group-2043683174 {
  display: none;
}

.animatsiya-muzyka__rectangle-3976563 {
  width: 0.156cqw;
  height: 57.292cqw;
  left: 2.822cqw;
  top: 0;
  position: absolute;
  background: white;
}

.animatsiya-muzyka__ikonki {
  height: 2.083cqw;
  max-width: 5.801cqw;
  min-width: 5.801cqw;
  padding-left: 1.25cqw;
  padding-right: 1.25cqw;
  padding-top: 0.26cqw;
  padding-bottom: 0.26cqw;
  left: 0;
  top: 27.318cqw;
  position: absolute;
  background: white;
  border-radius: 52.083cqw;
  justify-content: center;
  align-items: center;
  gap: 1.25cqw;
  display: inline-flex;
}

.animatsiya-muzyka__arrow-3-stroke {
  width: 1.026cqw;
  height: 1.042cqw;
  cursor: pointer;
}

.animatsiya-muzyka__arrow-3-stroke-2 {
  width: 1.026cqw;
  height: 1.042cqw;
  transform: rotate(-3deg);
  transform-origin: top left;
  cursor: pointer;
}


/* ========== TITLE — z:6 ========== */

.animatsiya-muzyka__frame-34871 {
  width: 34.67cqw;
  max-height: 7.76cqw;
  min-height: 7.76cqw;
  left: 4.167cqw;
  top: 4.167cqw;
  position: absolute;
  z-index: 6;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.25cqw;
  display: inline-flex;
}

.animatsiya-muzyka__qleva-radio {
  align-self: stretch;
  color: white;
  font-size: 2.5cqw;
  font-family: Inter;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 110%;
  word-wrap: break-word;
}

.animatsiya-muzyka__uborka-pod-muzyku-eto-50-k-skorosti-i-10 {
  width: 29.976cqw;
  color: white;
  font-size: 1.042cqw;
  font-family: Inter;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.052cqw;
  word-wrap: break-word;
}


/* ========== STATE 2: right panel expands, divider moves ========== */

.animatsiya-muzyka--state-2 {
  --split: 32.066cqw;
}

.animatsiya-muzyka--state-2 .animatsiya-muzyka__group-2043683174 {
  left: 29.167cqw;
}


/* ========== DRAG HANDLE (before/after) ========== */

.animatsiya-muzyka__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: 6cqw;
  transform: translateX(-50%);
  z-index: 15;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.animatsiya-muzyka__handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0.208cqw;
  background: rgba(255, 255, 255, 0.7);
  transform: translateX(-50%);
  pointer-events: none;
}

.animatsiya-muzyka--animating .animatsiya-muzyka__handle {
  transition: left 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.animatsiya-muzyka__handle-knob {
  width: 5.801cqw;
  height: 2.083cqw;
  padding: 0.26cqw 1.25cqw;
  border-radius: 52.083cqw;
  background: white;
  box-shadow: 0 0.2cqw 0.6cqw rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25cqw;
  color: #094141;
  pointer-events: none;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

.animatsiya-muzyka__handle-knob svg,
.animatsiya-muzyka__handle-knob img {
  width: 1.026cqw;
  height: 1.042cqw;
  flex-shrink: 0;
}

.animatsiya-muzyka--state-2 .animatsiya-muzyka__knopki {
  opacity: 0;
  pointer-events: none;
}

.animatsiya-muzyka--state-2 .animatsiya-muzyka__knopki-2 {
  opacity: 1;
  pointer-events: auto;
}


/* ========== MOBILE-ONLY: hidden on desktop ========== */

.animatsiya-muzyka__m-card-1,
.animatsiya-muzyka__m-card-2,
.animatsiya-muzyka__m-knopki,
.animatsiya-muzyka__m-knopki-2,
.animatsiya-muzyka__m-nav {
  display: none;
}


/* =====================================================
   @media — Tablet (max-width: 75cqw)
   ===================================================== */

@media (max-width: 1440px) {

  .musik-wrap { border-radius: 2cqw; }

  /* размеры наследуются от .musik-wrap */

  /* Left bg */
  .animatsiya-muzyka__group-2043683175 {
    width: 101.487cqw; height: 152.212cqw;
    left: -1.487cqw; top: -47.46cqw;
  }
  .animatsiya-muzyka__qleva9708-5 { width: 101.487cqw; height: 152.212cqw; }
  .animatsiya-muzyka__qleva9708-7 { width: 101.487cqw; height: 152.212cqw; }

  /* Green text */
  .animatsiya-muzyka__group-2043683159 {
    width: 39.323cqw; height: auto;
    max-height: 13.615cqw; min-height: 13.615cqw;
    left: 1.667cqw; top: 20.312cqw;
    flex-direction: column; justify-content: flex-start;
    align-items: center; gap: 2cqw; display: inline-flex;
  }
  .animatsiya-muzyka__makhi-shvabroy-pod-ritmichnye {
    left: auto; top: auto; position: static;
    align-self: stretch; text-align: center;
    font-size: 1.5cqw; white-space: normal; word-wrap: break-word;
  }
  .animatsiya-muzyka__svg-2 { width: 39.323cqw; height: 9.948cqw; left: auto; top: auto; position: relative; }

  /* Right panel */
  .animatsiya-muzyka__mask-group { height: 57.292cqw; }
  .animatsiya-muzyka__group-2043683177 {
    width: 101.055cqw; height: 151.553cqw;
    top: -39.235cqw;
  }
  .animatsiya-muzyka__qleva9642-2 { width: 101.055cqw; height: 151.553cqw; }
  .animatsiya-muzyka__qleva9642-3 { width: 101.055cqw; height: 151.553cqw; }

  .animatsiya-muzyka__dzen {
    width: 32.053cqw; height: auto;
    max-height: 14.193cqw; min-height: 14.193cqw;
    left: 65.875cqw; top: 59.548cqw;
    flex-direction: column; justify-content: flex-start;
    align-items: center; gap: 2cqw; display: inline-flex;
  }
  .animatsiya-muzyka__moy-dom-moy-khram {
    left: auto; top: auto; position: static;
    align-self: stretch; text-align: center;
    font-size: 1.5cqw; white-space: normal; word-wrap: break-word;
  }
  .animatsiya-muzyka__svg { width: 32.053cqw; height: 10.527cqw; left: auto; top: auto; position: relative; }

  /* Buttons */
  .animatsiya-muzyka__knopki,
  .animatsiya-muzyka__knopki-2 {
    width: auto; height: 3.333cqw;
    max-width: 12.5cqw; min-width: 12.5cqw;
    padding-left: 3.333cqw; padding-right: 3.333cqw;
    left: 43.75cqw; top: 49.583cqw;
  }
  .animatsiya-muzyka__v-katalog,
  .animatsiya-muzyka__v-katalog-2 { font-size: 1.333cqw; letter-spacing: -0.027cqw; }

  /* Divider */
  .animatsiya-muzyka__group-2043683174 {
    width: 5.802cqw; height: 57.292cqw;
    left: 65.104cqw; top: -0.479cqw;
  }
  .animatsiya-muzyka__rectangle-3976563 { width: 0.157cqw; height: 57.292cqw; left: 2.822cqw; }
  .animatsiya-muzyka__ikonki {
    height: 2.083cqw; max-width: 5.802cqw; min-width: 5.802cqw;
    padding-left: 1.25cqw; padding-right: 1.25cqw;
    padding-top: 0.261cqw; padding-bottom: 0.261cqw;
    top: 27.276cqw; border-radius: 52.083cqw; gap: 1.25cqw;
  }
  .animatsiya-muzyka__arrow-3-stroke   { width: 1.026cqw; height: 1.042cqw; }
  .animatsiya-muzyka__arrow-3-stroke-2 { width: 1.026cqw; height: 1.042cqw; }

  /* Title */
  .animatsiya-muzyka__frame-34871 {
    width: 34.671cqw; max-height: 8.167cqw; min-height: 8.167cqw;
    left: 1.667cqw; top: 5cqw; gap: 1cqw;
  }
  .animatsiya-muzyka__qleva-radio { font-size: 2.667cqw; }
  .animatsiya-muzyka__uborka-pod-muzyku-eto-50-k-skorosti-i-10 {
    width: 29.976cqw; font-size: 1.167cqw; letter-spacing: -0.058cqw;
  }

  /* Tablet state 2 */
  .animatsiya-muzyka--state-2 {
    --split: 32.786cqw;
  }
  .animatsiya-muzyka--state-2 .animatsiya-muzyka__group-2043683174 {
    left: 29.917cqw;
  }
}


/* =====================================================
   @media — Mobile (max-width: 63.917cqw)
   ===================================================== */

@media (max-width: 767px) {

  .musik-wrap { border-radius: 3.333cqw 3.333cqw 0 0; aspect-ratio: 360 / 725; }

  .animatsiya-muzyka { background: #EFEFEF; }

  /* Hide desktop elements */
  .animatsiya-muzyka__group-2043683175,
  .animatsiya-muzyka__mask-group,
  .animatsiya-muzyka__group-2043683174,
  .animatsiya-muzyka__group-2043683159,
  .animatsiya-muzyka__knopki,
  .animatsiya-muzyka__knopki-2 {
    display: none;
  }

  /* Title mobile */
  .animatsiya-muzyka__frame-34871 {
    width: 88.889cqw; max-height: 31.944cqw; min-height: 31.944cqw;
    left: 5.556cqw; top: 16.667cqw; gap: 3.333cqw;
  }
  .animatsiya-muzyka__qleva-radio { color: #094141; font-size: 8.889cqw; }
  .animatsiya-muzyka__uborka-pod-muzyku-eto-50-k-skorosti-i-10 {
    width: 87.181cqw; color: #094141; font-size: 3.889cqw; letter-spacing: -0.194cqw;
  }

  /* Show mobile elements */
  .animatsiya-muzyka__m-card-1,
  .animatsiya-muzyka__m-card-2,
  .animatsiya-muzyka__m-knopki,
  .animatsiya-muzyka__m-knopki-2,
  .animatsiya-muzyka__m-nav { display: block; }

  /* Card 1 */
  .animatsiya-muzyka__m-card-1 { width: 100cqw; height: 133.333cqw; left: 0; top: 60.278cqw; position: absolute; overflow: hidden; border-radius: 3.333cqw; }
  /* Mobile: одна фото-карточка целиком — скрываем правую "пиковую" зону с бабой */
  .animatsiya-muzyka__m-rect-right,
  .animatsiya-muzyka__m-group-bg-2,
  .animatsiya-muzyka__m-dzen-wrap { display: none; }

  .animatsiya-muzyka__m-rect-left { width: 100cqw; height: 133.333cqw; left: 0; top: 0; position: absolute; background: #D9D9D9; border-radius: 3.333cqw; }
  .animatsiya-muzyka__m-group-bg-1 { width: 277.778cqw; height: 433.936cqw; left: -91.544cqw; top: -101.822cqw; position: absolute; }
  .animatsiya-muzyka__m-qleva9708-5 { width: 277.778cqw; height: 433.936cqw; left: 0; top: 0; position: absolute; }
  .animatsiya-muzyka__m-qleva9708-7 { width: 277.778cqw; height: 433.936cqw; left: 0; top: 0; position: absolute; }
  .animatsiya-muzyka__m-text-block-1 { width: 88.889cqw; max-height: 30.542cqw; min-height: 30.542cqw; left: 97.1cqw; top: 107.378cqw; position: absolute; flex-direction: column; justify-content: flex-start; align-items: center; gap: 3.333cqw; display: inline-flex; }
  .animatsiya-muzyka__m-makhi-shvabroy { align-self: stretch; text-align: center; color: #E2F397; font-size: 3.889cqw; font-family: Inter; font-weight: 700; line-height: 120%; letter-spacing: -0.078cqw; word-wrap: break-word; }
  .animatsiya-muzyka__m-svg-1 { width: 88.889cqw; height: 22.486cqw; position: relative; }
  .animatsiya-muzyka__m-rect-right { width: 20.822cqw; height: 133.333cqw; left: 79.178cqw; top: 0; position: absolute; background: #D9D9D9; border-top-right-radius: 3.333cqw; border-bottom-right-radius: 3.333cqw; }
  .animatsiya-muzyka__m-group-bg-2 { width: 181.578cqw; height: 272.311cqw; left: -31.731cqw; top: -45.211cqw; position: absolute; }
  .animatsiya-muzyka__m-qleva9642-2 { width: 181.578cqw; height: 272.311cqw; left: 0; top: 0; position: absolute; }
  .animatsiya-muzyka__m-qleva9642-3 { width: 181.578cqw; height: 272.311cqw; left: 0; top: 0; position: absolute; }
  .animatsiya-muzyka__m-dzen-wrap { width: 88.889cqw; height: 30.278cqw; left: 37.286cqw; top: 50.767cqw; position: absolute; }
  .animatsiya-muzyka__m-dzen-inner { width: 88.889cqw; max-height: 30.278cqw; min-height: 30.278cqw; left: 0; top: 0; position: absolute; flex-direction: column; justify-content: flex-start; align-items: center; gap: 3.333cqw; display: inline-flex; }
  .animatsiya-muzyka__m-moy-dom { align-self: stretch; text-align: center; color: #BDEEFF; font-size: 3.889cqw; font-family: Inter; font-weight: 700; line-height: 120%; letter-spacing: -0.078cqw; word-wrap: break-word; }
  .animatsiya-muzyka__m-svg-dzen { width: 67.667cqw; height: 22.222cqw; position: relative; overflow: hidden; }

  /* Mobile button 1 */
  .animatsiya-muzyka__m-knopki { height: 8.333cqw; max-width: 30.556cqw; min-width: 30.556cqw; padding-left: 6.667cqw; padding-right: 6.667cqw; left: 30.678cqw; top: 179.722cqw; position: absolute; background: #E2F397; border-radius: 277.778cqw; justify-content: center; align-items: center; gap: 2.778cqw; display: inline-flex; text-decoration: none; cursor: pointer; }
  .animatsiya-muzyka__m-v-katalog { color: #094141; font-size: 3.889cqw; font-family: Inter; font-weight: 700; line-height: 120%; letter-spacing: -0.078cqw; white-space: nowrap; }

  /* Card 2 */
  .animatsiya-muzyka__m-card-2 { width: 100cqw; height: 133.333cqw; left: 0; top: 60.278cqw; position: absolute; overflow: hidden; border-radius: 3.333cqw; }
  /* Mobile card-2: только баба, скрываем мужика */
  .animatsiya-muzyka__m-rect-left-2,
  .animatsiya-muzyka__m-group-bg-3,
  .animatsiya-muzyka__m-text-block-2 { display: none; }

  .animatsiya-muzyka__m-rect-right-2 { width: 100cqw; height: 133.333cqw; left: 0; top: 0; position: absolute; background: #D9D9D9; border-radius: 3.333cqw; }
  .animatsiya-muzyka__m-group-bg-4 { width: 181.578cqw; height: 272.311cqw; left: -40cqw; top: -65cqw; position: absolute; }
  .animatsiya-muzyka__m-qleva9708-5-2 { width: 277.778cqw; height: 433.936cqw; left: 0; top: 0; position: absolute; }
  .animatsiya-muzyka__m-qleva9708-7-2 { width: 277.778cqw; height: 433.936cqw; left: 0; top: 0; position: absolute; }
  .animatsiya-muzyka__m-text-block-2 { width: 88.889cqw; max-height: 30.542cqw; min-height: 30.542cqw; left: 97.1cqw; top: 107.378cqw; position: absolute; flex-direction: column; justify-content: flex-start; align-items: center; gap: 3.333cqw; display: inline-flex; }
  .animatsiya-muzyka__m-makhi-shvabroy-2 { align-self: stretch; text-align: center; color: #E2F397; font-size: 3.889cqw; font-family: Inter; font-weight: 700; line-height: 120%; letter-spacing: -0.078cqw; word-wrap: break-word; }
  .animatsiya-muzyka__m-svg-1-2 { width: 88.889cqw; height: 22.486cqw; position: relative; }
  .animatsiya-muzyka__m-rect-right-2 { width: 20.822cqw; height: 141.667cqw; left: 79.178cqw; top: 0; position: absolute; background: #D9D9D9; border-top-right-radius: 3.333cqw; border-bottom-right-radius: 3.333cqw; }
  .animatsiya-muzyka__m-group-bg-4 { width: 181.578cqw; height: 272.311cqw; left: -31.731cqw; top: -45.211cqw; position: absolute; }
  .animatsiya-muzyka__m-qleva9642-2-2 { width: 181.578cqw; height: 272.311cqw; left: 0; top: 0; position: absolute; }
  .animatsiya-muzyka__m-qleva9642-3-2 { width: 181.578cqw; height: 272.311cqw; left: 0; top: 0; position: absolute; }
  .animatsiya-muzyka__m-dzen-wrap-2 { width: 88.889cqw; height: 30.278cqw; left: 37.286cqw; top: 50.767cqw; position: absolute; }
  .animatsiya-muzyka__m-dzen-inner-2 { width: 88.889cqw; max-height: 30.278cqw; min-height: 30.278cqw; left: 0; top: 0; position: absolute; flex-direction: column; justify-content: flex-start; align-items: center; gap: 3.333cqw; display: inline-flex; }
  .animatsiya-muzyka__m-moy-dom-2 { align-self: stretch; text-align: center; color: #BDEEFF; font-size: 3.889cqw; font-family: Inter; font-weight: 700; line-height: 120%; letter-spacing: -0.078cqw; word-wrap: break-word; }
  .animatsiya-muzyka__m-svg-dzen-2 { width: 67.667cqw; height: 22.222cqw; position: relative; overflow: hidden; }

  /* Mobile button 2 */
  .animatsiya-muzyka__m-knopki-2 { height: 8.333cqw; max-width: 30.556cqw; min-width: 30.556cqw; padding-left: 6.667cqw; padding-right: 6.667cqw; left: 30.678cqw; top: 179.722cqw; position: absolute; background: #BDEEFF; border-radius: 277.778cqw; justify-content: center; align-items: center; gap: 2.778cqw; display: inline-flex; text-decoration: none; cursor: pointer; }
  .animatsiya-muzyka__m-v-katalog-2 { color: #094141; font-size: 3.889cqw; font-family: Inter; font-weight: 700; line-height: 120%; letter-spacing: -0.078cqw; white-space: nowrap; }

  /* Mobile nav */
  .animatsiya-muzyka__m-nav { z-index: 20; width: 20cqw; height: 141.667cqw; left: 69.292cqw; top: 59.722cqw; position: absolute; z-index: 10; }
  .animatsiya-muzyka__m-nav-line { width: 0.278cqw; height: 141.667cqw; left: 9.861cqw; top: 0; position: absolute; background: white; }
  .animatsiya-muzyka__m-nav-icons { height: 8.5cqw; max-width: 20cqw; min-width: 20cqw; padding-left: 3.889cqw; padding-right: 3.889cqw; padding-top: 1.042cqw; padding-bottom: 1.042cqw; left: 0; top: 59.675cqw; position: absolute; background: white; border-radius: 208.381cqw; justify-content: center; align-items: center; gap: 3.889cqw; display: inline-flex; }
  .animatsiya-muzyka__m-arrow-1 { width: 4.167cqw; height: 4.167cqw; cursor: pointer; }
  .animatsiya-muzyka__m-arrow-2 { width: 4.167cqw; height: 4.167cqw; transform: rotate(-3deg); transform-origin: top left; cursor: pointer; }

  /* Mobile slider */
  .animatsiya-muzyka__m-card-1,
  .animatsiya-muzyka__m-card-2,
  .animatsiya-muzyka__m-knopki,
  .animatsiya-muzyka__m-knopki-2 {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
  }
  .animatsiya-muzyka__m-card-2 { transform: translateX(110cqw); }
  .animatsiya-muzyka__m-knopki-2 { opacity: 0; pointer-events: none; }

  /* Стрелки навигации сдвигаются на противоположную сторону при переключении */
  .animatsiya-muzyka__m-nav { transition: left 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
  .animatsiya-muzyka--state-2 .animatsiya-muzyka__m-nav { left: 10.708cqw; }
  .animatsiya-muzyka--state-2 .animatsiya-muzyka__m-card-1 { transform: translateX(-110cqw); }
  .animatsiya-muzyka--state-2 .animatsiya-muzyka__m-card-2 { transform: translateX(0); }
  .animatsiya-muzyka--state-2 .animatsiya-muzyka__m-knopki { opacity: 0; pointer-events: none; }
  .animatsiya-muzyka--state-2 .animatsiya-muzyka__m-knopki-2 { opacity: 1; pointer-events: auto; }

  /* === Mobile: before/after drag (переопределяет карусель-карусель выше) === */
  .animatsiya-muzyka { --split: 50cqw; }

  .animatsiya-muzyka__m-card-1 { transform: none !important; z-index: 1; }
  .animatsiya-muzyka__m-card-2 {
    transform: none !important;
    clip-path: inset(0 0 0 var(--split));
    z-index: 2;
    transition: none;
  }
  .animatsiya-muzyka--animating .animatsiya-muzyka__m-card-2 {
    transition: clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .animatsiya-muzyka__m-nav { display: none !important; }

  .animatsiya-muzyka__handle {
    display: flex;
    top: 60.278cqw;
    bottom: auto;
    height: 115cqw;
    width: 18cqw;
    z-index: 30;
  }

  .animatsiya-muzyka__m-knopki,
  .animatsiya-muzyka__m-knopki-2 { z-index: 40; }
  .animatsiya-muzyka__handle::before { width: 0.833cqw; }
  .animatsiya-muzyka__handle-knob {
    width: 16cqw;
    height: 6cqw;
    padding: 1cqw 3cqw;
    gap: 3cqw;
  }
  .animatsiya-muzyka__handle-knob img {
    width: 3cqw;
    height: 3cqw;
  }

  /* === Mobile: новые целиковые Mask group изображения (заменяют crop-на-голову) === */
  .animatsiya-muzyka__m-rect-left,
  .animatsiya-muzyka__m-rect-right-2 {
    background: transparent;
  }

  .animatsiya-muzyka__m-group-bg-1,
  .animatsiya-muzyka__m-group-bg-4 {
    width: 100cqw;
    height: 133.333cqw;
    left: 0;
    top: 0;
  }

  .animatsiya-muzyka__m-group-bg-1 picture,
  .animatsiya-muzyka__m-group-bg-4 picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .animatsiya-muzyka__m-qleva9708-5,
  .animatsiya-muzyka__m-qleva9642-2-2 {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
    object-position: center;
    border-radius: 3.333cqw;
  }

  /* Тексты с подписями + SVG-стрелками перепозиционированы под новые координаты bg-групп (0,0) */
  .animatsiya-muzyka__m-text-block-1 {
    left: 5.556cqw;
    top: 5.556cqw;
  }
  .animatsiya-muzyka__m-dzen-wrap-2 {
    left: 5.556cqw;
    top: 5.556cqw;
  }
}

/* End */


/* Start:/local/templates/qfast/components/bitrix/news.list/slider_catalog/style.css?177585691313785*/
/* ==========================================================================
   slider-catalog — native horizontal scroll + табы фильтрации
   base: 1920x1080
   ========================================================================== */

.slider-catalog {
	position: relative;
	width: 100%;
	height: auto;

	/* ===== Настраиваемые параметры ===== */

	/* Отступы */
	--sc-base:               clamp(16px, 1.67dvw, 32px);
	--sc-side-pad:           clamp(20px, 8.17dvw, 80px);
	--sc-vert-pad-top:       calc(var(--section-gap) + var(--section-overlap));
	--sc-vert-pad-bot:       clamp(24px, 4.44dvh, 48px);
	--sc-header-mb:          clamp(20px, 3.7dvh, 40px);
	--sc-radius:             clamp(16px, 1.67dvw, 32px);

	/* Header */
	--sc-fs-title:           clamp(24px, 2.5dvw, 48px);

	/* Tabs */
	--sc-tab-h:              clamp(36px, 2.71dvw, 52px);
	--sc-tab-pad-x:          clamp(20px, 3.13dvw, 60px);
	--sc-fs-tab:             clamp(14px, 1.04dvw, 20px);

	/* Cards */
	--sc-cards-gap:          clamp(12px, 1.25dvw, 24px);
	--sc-card-w:             clamp(320px, 28.33dvw, 544px);
	--sc-card-pad:           var(--sc-base);
	--sc-card-radius:        var(--sc-base);
	--sc-card-gap:           var(--sc-base);
	--sc-card-top-gap:       clamp(12px, 1.25dvw, 24px);
	--sc-card-img-radius:    clamp(6px, 0.42dvw, 8px);

	/* Favorite / badge */
	--sc-fav-size:           clamp(32px, 2.71dvw, 52px);
	--sc-badge-pad-y:        clamp(4px, 0.42dvw, 8px);
	--sc-badge-pad-x:        clamp(10px, 1.04dvw, 20px);
	--sc-badge-radius:       clamp(6px, 0.42dvw, 8px);
	--sc-fs-badge:           clamp(12px, 0.83dvw, 16px);

	/* Info */
	--sc-info-gap:           clamp(8px, 0.63dvw, 12px);
	--sc-fs-name:            clamp(18px, 1.67dvw, 32px);
	--sc-fs-price:           clamp(14px, 1.04dvw, 20px);
	--sc-prices-gap:         clamp(8px, 0.68dvw, 13px);

	/* Buttons */
	--sc-buttons-gap:        clamp(6px, 0.52dvw, 10px);
	--sc-btn-w:              clamp(140px, 11.46dvw, 220px);
	--sc-btn-h:              clamp(36px, 2.71dvw, 52px);
	--sc-fs-btn:             clamp(14px, 1.04dvw, 20px);
}

.slider-catalog__sticky {
	position: relative;
	background: #EFEFEF;
	border-radius: var(--sc-radius);
	padding-bottom: var(--sc-vert-pad-bot);
}

.slider-catalog__inner {
	display: flex;
	flex-direction: column;
}

/* Header */
.slider-catalog__header {
	padding: var(--sc-vert-pad-top) var(--sc-side-pad) 0;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--sc-base);
	margin-bottom: var(--sc-header-mb);
	flex-shrink: 0;
}

.slider-catalog__title {
	color: #094141;
	font-size: var(--sc-fs-title);
	font-family: Inter, sans-serif;
	font-weight: 900;
	text-transform: uppercase;
	line-height: 110%;
	white-space: nowrap;
	margin: 0;
}

/* Tabs */
.slider-catalog__tabs {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.slider-catalog__tab {
	height: var(--sc-tab-h);
	padding: 0 var(--sc-tab-pad-x);
	background: white;
	border: none;
	cursor: pointer;
	color: #094141;
	font-size: var(--sc-fs-tab);
	font-family: Inter, sans-serif;
	font-weight: 700;
	line-height: 120%;
	letter-spacing: -0.02em;
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s, color 0.2s;
}

.slider-catalog__tab:first-child {
	border-radius: 1000px 0 0 1000px;
}

.slider-catalog__tab:last-child {
	border-radius: 0 1000px 1000px 0;
}

.slider-catalog__tab--active {
	background: #094141;
	color: white;
}

.slider-catalog__tab-divider {
	width: 1px;
	height: var(--sc-tab-h);
	background: #094141;
	flex-shrink: 0;
}

/* Track wrap — горизонтальная прокрутка, полоса скрыта (навигация только точками) */
.slider-catalog__track-wrap {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	margin-bottom: var(--sc-header-mb);
	padding-bottom: 30px;
}
span.slider-catalog__card-badge{
	display: none;
}
.slider-catalog__track-wrap::-webkit-scrollbar { width: 0; height: 0; display: none; }

.slider-catalog__cards {
	display: flex;
	gap: var(--sc-cards-gap);
	padding: 0 var(--sc-side-pad);
	width: max-content;
}

/* Card */
.slider-catalog__card {
	min-width: var(--sc-card-w);
	max-width: var(--sc-card-w);
	padding: var(--sc-card-pad);
	background: white;
	box-shadow: 0 0.37dvh 0.74dvh rgba(9, 65, 65, 0.10);
	border-radius: var(--sc-card-radius);
	backdrop-filter: blur(7.5px);
	display: flex;
	flex-direction: column;
	gap: var(--sc-card-gap);
	flex-shrink: 0;
	scroll-snap-align: start;
}

.slider-catalog__card[hidden] {
	display: none !important;
}

.slider-catalog__card--sold-out {
	opacity: 0.85;
}

/* Card top */
.slider-catalog__card-top {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sc-card-top-gap);
	flex: 1;
}

.slider-catalog__card-image {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--sc-card-img-radius);
	object-fit: cover;
}

.slider-catalog__card-image--placeholder {
	background: #D9D9D9;
}

/* Favorite */
.slider-catalog__card-favorite {
	position: absolute;
	top: 0;
	right: 0;
	width: var(--sc-fav-size);
	height: var(--sc-fav-size);
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.slider-catalog__card-favorite svg {
	width: 100%;
	height: 100%;
}

.slider-catalog__card-favorite svg path {
	transition: fill 0.2s;
}

.slider-catalog__card-favorite:hover svg path {
	fill: #E2F397;
}

.slider-catalog__card-favorite.is-favorite svg {
	display: none;
}

.slider-catalog__card-favorite.is-favorite::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-image: url("data:image/svg+xml,%3Csvg width='52' height='52' viewBox='0 0 52 52' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M27.0158 35.3068C26.442 35.8393 25.5533 35.8393 24.9795 35.3068L24.597 34.9505C19.6208 30.3718 16.332 27.3418 16.332 23.6443C16.332 20.6143 18.672 18.248 21.6495 18.248C23.3333 18.248 24.9458 19.043 25.9995 20.288C27.0533 19.043 28.6658 18.248 30.3495 18.248C33.327 18.248 35.667 20.6105 35.667 23.6443C35.667 27.3418 32.382 30.3718 27.402 34.9543L27.0195 35.3105L27.0158 35.3068Z' fill='%23E2F397' stroke='%23E2F397' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

/* Badge */
.slider-catalog__card-badge {
	position: absolute;
	top: 0;
	left: 0;
	padding: var(--sc-badge-pad-y) var(--sc-badge-pad-x);
	background: #E2F397;
	border-radius: var(--sc-badge-radius);
	color: #094141;
	font-size: var(--sc-fs-badge);
	font-family: Inter, sans-serif;
	font-weight: 400;
	line-height: 120%;
	letter-spacing: -0.05em;
	white-space: nowrap;
}

.slider-catalog__card-badge--sold-out {
	background: #5A8080;
	color: white;
}

/* Info */
.slider-catalog__card-info {
	display: flex;
	flex-direction: column;
	gap: var(--sc-info-gap);
}

.slider-catalog__card-name {
	color: #094141;
	font-size: var(--sc-fs-name);
	font-family: Inter, sans-serif;
	font-weight: 900;
	line-height: 110%;
	word-wrap: break-word;
}

.slider-catalog__card-color {
	color: #094141;
	font-size: var(--sc-fs-price);
	font-family: Inter, sans-serif;
	font-weight: 400;
	line-height: 120%;
	letter-spacing: -0.05em;
}

/* Prices */
.slider-catalog__card-prices {
	display: flex;
	align-items: center;
	gap: var(--sc-prices-gap);
}

.slider-catalog__card-price,
.slider-catalog__card-old-price {
	color: #094141;
	font-size: var(--sc-fs-price);
	font-family: Inter, sans-serif;
	font-weight: 400;
	line-height: 120%;
	letter-spacing: -0.05em;
	white-space: nowrap;
}

.slider-catalog__card-old-price {
	position: relative;
	opacity: 0.5;
}

.slider-catalog__card-old-price-line {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 1.5px;
	background: #094141;
}

/* Buttons */
.slider-catalog__card-buttons {
	display: flex;
	align-items: center;
	gap: var(--sc-buttons-gap);
}

.slider-catalog__btn-cart,
.slider-catalog__btn-detail {
	width: var(--sc-btn-w);
	height: var(--sc-btn-h);
	border-radius: 1000px;
	font-size: var(--sc-fs-btn);
	font-family: Inter, sans-serif;
	font-weight: 700;
	line-height: 120%;
	letter-spacing: -0.02em;
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s, opacity 0.2s;
}

.slider-catalog__btn-cart {
	background: #094141;
	color: white;
	border: none;
}

.slider-catalog__btn-cart:hover {
	opacity: 0.85;
}

.slider-catalog__btn-cart--disabled {
	background: #5A8080;
	cursor: default;
	pointer-events: none;
}

.slider-catalog__btn-detail {
	background: white;
	/* iOS Safari < 16.4: outline не учитывает border-radius — даёт квадратную рамку. Используем inset box-shadow. */
	box-shadow: inset 0 0 0 2px #094141;
	color: #094141;
}

.slider-catalog__btn-detail:hover {
	background: #f5f5f0;
}

/* Pagination dots */
.slider-catalog__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(4px, 0.31dvw, 6px);
	margin: 0 var(--sc-side-pad) var(--sc-vert-pad-bot);
	flex-shrink: 0;
}

.slider-catalog__dot {
	width: clamp(8px, 0.63dvw, 12px);
	height: clamp(8px, 0.63dvw, 12px);
	background: #5A8080;
	border-radius: 1000px;
	cursor: pointer;
	transition: width 0.3s, background 0.3s;
}

.slider-catalog__dot--active {
	width: clamp(40px, 3.33dvw, 64px);
	background: #094141;
}

/* ========== Tablet: max-width 1599px ========== */
@media (max-width: 1599px) {
	.slider-catalog {
		--sc-base:            1.67dvw;
		--sc-side-pad:        2.5dvw;
		--sc-radius:          1.5dvw;
		--sc-vert-pad-top:    calc(var(--section-gap) + var(--section-overlap));
		--sc-vert-pad-bot:    3dvh;

		--sc-fs-title:        2.8dvw;

		--sc-tab-h:           2.5dvw;
		--sc-tab-pad-x:       2.5dvw;
		--sc-fs-tab:          1dvw;

		--sc-cards-gap:       1.25dvw;
		--sc-card-w:          30dvw;
		--sc-card-img-radius: 0.5dvw;

		--sc-fav-size:        2.5dvw;
		--sc-badge-pad-y:     0.5dvw;
		--sc-badge-pad-x:     1dvw;
		--sc-fs-badge:        1dvw;

		--sc-info-gap:        0.6dvw;
		--sc-fs-name:         1.8dvw;
		--sc-fs-price:        1.2dvw;
		--sc-prices-gap:      0.7dvw;

		--sc-buttons-gap:     0.6dvw;
		--sc-btn-w:           12dvw;
		--sc-btn-h:           3.2dvw;
		--sc-fs-btn:          1.2dvw;
	}

	.slider-catalog__btn-detail {
		box-shadow: inset 0 0 0 1px #094141;
	}
}

/* ========== Narrow laptop: 1440-1599px (низкие экраны типа 1536×695) ========== */
@media (min-width: 1440px) and (max-width: 1599px) {
	.slider-catalog {
		--sc-card-w:          22dvw;        /* 4 карточки вместо 3 */
		--sc-cards-gap:       1dvw;

		--sc-fs-title:        2dvw;
		--sc-tab-h:           2dvw;
		--sc-tab-pad-x:       2dvw;
		--sc-fs-tab:          0.85dvw;

		--sc-fav-size:        2dvw;
		--sc-fs-badge:        0.85dvw;

		--sc-fs-name:         1.4dvw;
		--sc-fs-price:        1dvw;
		--sc-prices-gap:      0.5dvw;

		--sc-btn-w:           9dvw;
		--sc-btn-h:           2.6dvw;
		--sc-fs-btn:          1dvw;
	}
}

/* ========== Mobile: max-width 767px ========== */
@media (max-width: 767px) {
	.slider-catalog {
		--sc-base:            3.33dvw;
		--sc-side-pad:        4.17dvw;
		--sc-radius:          0;
		--sc-vert-pad-top:    calc(var(--section-gap) + var(--section-overlap));
		--sc-vert-pad-bot:    3dvh;
		--sc-header-mb:       2.5dvh;

		--sc-fs-title:        5dvw;

		--sc-tab-h:           7dvw;
		--sc-tab-pad-x:       5dvw;
		--sc-fs-tab:          3dvw;

		--sc-cards-gap:       3.33dvw;
		--sc-card-w:          70dvw;
		--sc-card-img-radius: 2.5dvw;

		--sc-fav-size:        7dvw;
		--sc-badge-pad-y:     1dvw;
		--sc-badge-pad-x:     2.5dvw;
		--sc-fs-badge:        2.5dvw;

		--sc-info-gap:        1.5dvw;
		--sc-fs-name:         4.5dvw;
		--sc-fs-price:        3dvw;
		--sc-prices-gap:      2dvw;

		--sc-buttons-gap:     2dvw;
		--sc-btn-w:           30dvw;
		--sc-btn-h:           8dvw;
		--sc-fs-btn:          3.2dvw;
	}

	.slider-catalog__header {
		flex-direction: column;
		gap: 4dvw;
	}

	.slider-catalog__title {
		white-space: normal;
	}

	.slider-catalog__btn-cart,
	.slider-catalog__btn-detail {
		padding: 0 4dvw;
	}

	.slider-catalog__btn-detail {
		box-shadow: inset 0 0 0 1px #094141;
	}
}

/* ========== Portrait — tablet ========== */
@media (max-aspect-ratio: 3/4) and (min-width: 768px) {
	.slider-catalog {
		--sc-base:            2.5dvw;
		--sc-side-pad:        3dvw;
		--sc-vert-pad-top:    calc(var(--section-gap) + var(--section-overlap));
		--sc-vert-pad-bot:    3dvh;

		--sc-fs-title:        4dvw;
		--sc-tab-h:           5dvw;
		--sc-tab-pad-x:       3dvw;
		--sc-fs-tab:          1.6dvw;

		--sc-cards-gap:       2.5dvw;
		--sc-card-w:          45dvw;
		--sc-card-img-radius: 1.5dvw;

		--sc-fav-size:        4dvw;
		--sc-fs-badge:        1.6dvw;

		--sc-fs-name:         2.5dvw;
		--sc-fs-price:        1.6dvw;

		--sc-btn-w:           18dvw;
		--sc-btn-h:           5dvw;
		--sc-fs-btn:          1.6dvw;
	}

	.slider-catalog__header {
		flex-direction: column;
		gap: 2dvw;
	}
}

/* ========== Portrait — phone ========== */
@media (max-aspect-ratio: 3/4) and (max-width: 767px) {
	.slider-catalog {
		--sc-card-w:          75dvw;
		--sc-fs-title:        7dvw;
	}
}

/* ========== Bitrix edit mode ========== */
body.bx-panel-mode .slider-catalog {
	height: auto !important;
}

body.bx-panel-mode .slider-catalog__sticky {
	position: static;
	height: auto;
	overflow: visible;
}

body.bx-panel-mode .slider-catalog__cards {
	flex-wrap: wrap;
	transform: none !important;
}

body.bx-panel-mode .slider-catalog__dots {
	display: none;
}

/* End */


/* Start:/local/templates/qfast/components/bitrix/form.result.new/ask_question/style.css?177707617010186*/
/* ==========================================================================
   ask — форма «Задать вопрос» (компонент form.result.new:ask_question)
   base: 1920×1080
   ========================================================================== */

.ask {
	scroll-margin-top: 90px;
	/* ===== Настраиваемые параметры ===== */

	/* Секция */
	--ask-pad-v:          var(--section-gap);          /* clamp(60px, 14.81dvh, 160px) */
	--ask-pad-h:          clamp(20px, 4.17dvw, 80px);  /* 80px */
	--ask-gap:            clamp(12px, 1.04dvw, 20px);  /* 20px */

	/* Карточка */
	--ask-card-pad:       clamp(24px, 3.33dvw, 64px);   /* 64px */
	--ask-card-radius:    clamp(16px, 1.67dvw, 32px);   /* 32px */

	/* Заголовок / подзаголовок */
	--ask-header-gap:     clamp(8px, 0.63dvw, 12px);    /* 12px */
	--ask-fs-title:       clamp(24px, 2.5dvw, 48px);    /* 48px */
	--ask-fs-subtitle:    clamp(14px, 1.04dvw, 20px);   /* 20px */

	/* Body / поля */
	--ask-body-gap:       clamp(12px, 1.25dvw, 24px);   /* 24px */
	--ask-fields-gap:     clamp(8px, 0.83dvw, 16px);    /* 16px */
	--ask-field-gap:      clamp(4px, 0.42dvw, 8px);     /* 8px */
	--ask-fs-label:       clamp(12px, 0.83dvw, 16px);   /* 16px */
	--ask-input-h:        clamp(42px, 3.125dvw, 60px);  /* 60px */
	--ask-input-pad:      clamp(12px, 0.98dvw, 18.75px);/* 18.75px */
	--ask-input-radius:   clamp(8px, 0.52dvw, 10px);    /* 10px */
	--ask-fs-input:       clamp(12px, 0.83dvw, 16px);   /* 16px */
	--ask-textarea-h:     clamp(80px, 6.25dvw, 120px);  /* 120px */

	/* Consent / кнопка */
	--ask-consent-gap:    clamp(4px, 0.42dvw, 8px);     /* 8px */
	--ask-checkbox-size:  clamp(12px, 0.73dvw, 14px);   /* 14px */
	--ask-fs-consent:     clamp(10px, 0.83dvw, 16px);   /* 16px */
	--ask-btn-w:          clamp(155px, 11.46dvw, 220px);/* 220px */
	--ask-btn-h:          clamp(40px, 2.71dvw, 52px);   /* 52px */
	--ask-btn-pad-x:      clamp(40px, 3.13dvw, 60px);   /* 60px */
	--ask-fs-btn:         clamp(14px, 1.04dvw, 20px);   /* 20px */

	/* ===== Секция ===== */
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	padding: var(--ask-pad-v) var(--ask-pad-h);
	display: flex;
	align-items: center;
	justify-content: center;
	background: white;
	overflow: hidden;
}

.ask__row {
	width: 100%;
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: var(--ask-gap);
}

/* ===== Карточки ===== */
.ask__form-card,
.ask__image-card {
	border-radius: var(--ask-card-radius);
	overflow: hidden;
	position: relative;
}

.ask__form-card {
	flex: 1.2 1 0;   /* ~55% ширины */
}

.ask__image-card {
	flex: 1 1 0;     /* ~45% ширины, высота тянется под форму */
}

.ask__form-card {
	background: #094141;
	padding: var(--ask-card-pad);
	display: flex;
	flex-direction: column;
}

/* ===== Форма ===== */
.ask__form {
	position: relative;
	z-index: 2;
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.ask__content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--ask-body-gap);
	min-height: 0;
}

.ask__content[hidden],
.ask__success[hidden] {
	display: none;
}

/* ===== Header ===== */
.ask__header {
	display: flex;
	flex-direction: column;
	gap: var(--ask-header-gap);
}

.ask__title {
	color: white;
	font-family: Inter, sans-serif;
	font-weight: 900;
	font-size: var(--ask-fs-title);
	line-height: 110%;
	text-transform: uppercase;
	margin: 0;
}

.ask__subtitle {
	color: white;
	font-family: Inter, sans-serif;
	font-weight: 400;
	font-size: var(--ask-fs-subtitle);
	line-height: 120%;
	letter-spacing: -0.05em;
	margin: 0;
}

/* ===== Body (поля + consent) ===== */
.ask__body {
	display: flex;
	flex-direction: column;
	gap: var(--ask-body-gap);
}

.ask__fields {
	display: flex;
	flex-direction: column;
	gap: var(--ask-fields-gap);
}

.ask__field {
	display: flex;
	flex-direction: column;
	gap: var(--ask-field-gap);
}

.ask__label {
	color: white;
	font-family: Inter, sans-serif;
	font-weight: 400;
	font-size: var(--ask-fs-label);
	line-height: 120%;
	letter-spacing: -0.05em;
}

.ask__input-wrap {
	height: var(--ask-input-h);
	padding: var(--ask-input-pad);
	background: white;
	border-radius: var(--ask-input-radius);
	display: flex;
	align-items: center;
}

.ask__input-wrap--textarea {
	height: var(--ask-textarea-h);
	align-items: flex-start;
}

.ask__input {
	width: 100%;
	height: 100%;
	border: none;
	outline: none;
	background: transparent;
	color: #094141;
	font-family: Inter, sans-serif;
	font-weight: 400;
	font-size: var(--ask-fs-input);
	line-height: 120%;
	letter-spacing: -0.05em;
}

.ask__input--textarea {
	resize: none;
	font-family: Inter, sans-serif;
}

.ask__input::placeholder {
	color: #5A8080;
}

.ask__input--error {
	color: #F34E2D;
}

.ask__error {
	color: #F34E2D;
	font-family: Inter, sans-serif;
	font-weight: 400;
	font-size: var(--ask-fs-label);
	line-height: 120%;
	letter-spacing: -0.05em;
	min-height: 1em;
}

.ask__error:empty {
	display: none;
}

/* ===== Consent ===== */
.ask__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--ask-consent-gap);
}

.ask__checkbox {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: var(--ask-checkbox-size);
	height: var(--ask-checkbox-size);
	min-width: var(--ask-checkbox-size);
	margin-top: 0.3em;
	cursor: pointer;
	flex-shrink: 0;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px white;
	background: transparent;
	padding: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ask__checkbox::after {
	content: '';
	width: 0;
	height: 0;
	border-radius: 50%;
	background: white;
	transition: all 0.15s ease;
}

.ask__checkbox:checked::after {
	width: 60%;
	height: 60%;
}

.ask__consent-text {
	color: white;
	font-family: Inter, sans-serif;
	font-weight: 400;
	font-size: var(--ask-fs-consent);
	line-height: 120%;
	letter-spacing: -0.05em;
	cursor: pointer;
}

.ask__consent-link {
	color: white;
	text-decoration: underline;
}

.ask__consent .ask__consent-text a {
	color: inherit;
	text-decoration: underline;
}

.ask__consent .ask__consent-text a:hover {
	text-decoration: none;
}

/* ===== Submit ===== */
.ask__submit {
	width: var(--ask-btn-w);
	min-height: var(--ask-btn-h);
	max-height: var(--ask-btn-h);
	padding: 0 var(--ask-btn-pad-x);
	background: #E2F397;
	border: none;
	border-radius: 1000px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: opacity 0.2s;
}

.ask__submit:hover {
	opacity: 0.9;
}

.ask__submit[disabled] {
	opacity: 0.6;
	cursor: default;
}

.ask__submit-text {
	color: #094141;
	font-family: Inter, sans-serif;
	font-weight: 700;
	font-size: var(--ask-fs-btn);
	line-height: 120%;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

/* ===== Image card ===== */
.ask__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ===== Ellipses ===== */
.ask__ellipses {
	position: absolute;
	z-index: 1;
	overflow: visible;
	pointer-events: none;
}

.ask__ellipses--desktop {
	left: 50%;
	top: 50%;
	width: 50%;
	height: 50%;
}

.ask__ellipses--tablet,
.ask__ellipses--mobile {
	display: none;
}

.ask__ellipses--mobile {
	width: 919.13px;
	height: 628.57px;
	left: 238.63px;
	top: 115.71px;
}

.ask__ellipse {
	position: absolute;
	transform: rotate(2deg);
	transform-origin: top left;
	background: #E2F397;
	border-radius: 9999px;
}

.ask__ellipse--1 { width: 160.22px; height: 234.98px; left: 0; top: 390.38px; }
.ask__ellipse--2 { width: 251.69px; height: 415.58px; left: 106.14px; top: 212.99px; }
.ask__ellipse--3 { width: 316.14px; height: 550.04px; left: 302.94px; top: 50.89px; }
.ask__ellipse--4 { width: 319.58px; height: 599.90px; left: 599.55px; top: 0; }

/* ==========================================================================
   Tablet: max-width 1200px
   ========================================================================== */
@media (max-width: 1200px) {
	.ask {
		--ask-pad-h:          20px;
		--ask-card-pad:       40px;
		--ask-card-radius:    24px;

		--ask-header-gap:     8px;
		--ask-fs-title:       32px;
		--ask-fs-subtitle:    14px;

		--ask-body-gap:       16px;
		--ask-fields-gap:     10px;

		--ask-fs-label:       14px;
		--ask-input-h:        42px;
		--ask-input-pad:      12px;
		--ask-input-radius:   8px;
		--ask-fs-input:       14px;
		--ask-textarea-h:     90px;

		--ask-consent-gap:    4px;
		--ask-checkbox-size:  10px;
		--ask-fs-consent:     10px;

		--ask-btn-w:          155px;
		--ask-btn-h:          40px;
		--ask-btn-pad-x:      40px;
		--ask-fs-btn:         16px;
	}

	.ask__ellipses--desktop { display: none; }
	.ask__ellipses--tablet {
		display: block;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
}
section#ask {
	background: #efefef;
}
/* ==========================================================================
   Mobile: max-width 767px
   ========================================================================== */
@media (max-width: 767px) {
	.ask {
		--ask-pad-v:          0px;
		--ask-pad-h:          0px;
		--ask-gap:            0px;

		--ask-card-pad:       56px 28px 90px;
		--ask-card-radius:    24px;

		--ask-body-gap:       20px;
		--ask-fields-gap:     12px;
		--ask-field-gap:      4px;

		--ask-fs-input:       12px;
		--ask-fs-consent:     12px;
		--ask-checkbox-size:  12px;
		--ask-textarea-h:     110px;

		background: none;
		display: block;
	}

	.ask__row {
		flex-direction: column;
	}

	.ask__form-card {
		flex: none;
		width: 100%;
	}

	.ask__image-card {
		order: -1;
		flex: none;
		width: 100%;
		height: 358px;
	}

	.ask__image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center center;
	}

	.ask__form-card {
		padding: 56px 28px 90px;
		border-radius: 24px 24px 24px 24px;
		margin-top: -35px;
		position: relative;
		z-index: 2;
	}

	.ask__image-card {
		position: relative;
		z-index: 1;
	}

	.ask__image-card picture {
		display: block;
		width: 100%;
		height: 100%;
	}
	.ask__image {
		display: block;
	}

	.ask__ellipses--tablet { display: none; }
	.ask__ellipses--mobile { display: block; }
}


/* End */


/* Start:/local/templates/qfast/components/bitrix/news.list/otvety/style.css?17762579794070*/
/* news.list / otvety — блок «Ответы на важные вопросы» (FAQ-аккордеон) */

.otvety {
	--otvety-color: #094141;
	--otvety-accent: #E2F397;

	--otvety-pad-x: clamp(16px, 4.1667dvw, 80px);   /* 80px @1920 */
	--otvety-gap: clamp(32px, 3.125dvw, 60px);      /* 60px — между заголовком/колонками/кнопкой */
	--otvety-col-gap: clamp(16px, 2.0833dvw, 40px); /* 40px — между колонками */
	--otvety-item-gap: clamp(10px, 1.0417dvw, 20px);/* 20px — между карточками */
	--otvety-card-pad-x: clamp(20px, 2.0833dvw, 40px); /* 40px */
	--otvety-card-pad-y: clamp(18px, 1.5625dvw, 30px); /* 30px */
	--otvety-radius: clamp(14px, 1.25dvw, 24px);    /* 24px */
	--otvety-arrow: clamp(28px, 1.6667dvw, 32px);   /* 32px */

	--otvety-title-fz: clamp(28px, 2.5dvw, 48px);   /* 48px */
	--otvety-q-fz: clamp(17px, 1.25dvw, 24px);      /* 24px */
	--otvety-a-fz: clamp(15px, 1.0417dvw, 20px);    /* 20px */

	background: #EFEFEF;
	color: var(--otvety-color);
	font-family: Inter, "Helvetica Neue", Arial, sans-serif;
	padding: clamp(40px, 5dvw, 96px) 0;
}

.otvety__inner {
	max-width: 1920px;
	margin: 0 auto;
	padding: 0 var(--otvety-pad-x);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--otvety-gap);
}

.otvety__title {
	align-self: stretch;
	margin: 0;
	color: var(--otvety-color);
	font-size: var(--otvety-title-fz);
	font-weight: 900;
	line-height: 1.1;
	text-transform: uppercase;
	word-wrap: break-word;
}

.otvety__cols {
	align-self: stretch;
	display: flex;
	align-items: flex-start;
	gap: var(--otvety-col-gap);
}

.otvety__col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--otvety-item-gap);
}

.otvety__item {
	background: #fff;
	border-radius: var(--otvety-radius);
	overflow: hidden;
}

.otvety__head {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--otvety-card-pad-x);
	padding: var(--otvety-card-pad-y) var(--otvety-card-pad-x);
	margin: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.otvety__q {
	font-size: var(--otvety-q-fz);
	font-weight: 900;
	line-height: 1.1;
	color: var(--otvety-color);
	word-wrap: break-word;
}

.otvety__arrow {
	flex: 0 0 auto;
	width: var(--otvety-arrow);
	height: var(--otvety-arrow);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 1000px;
	background: var(--otvety-accent);
	color: var(--otvety-color);
	transition: background .25s ease, color .25s ease, transform .3s ease;
}

.otvety__arrow svg {
	display: block;
	width: 100%;
	height: 100%;
}

.otvety__item.is-open .otvety__arrow {
	background: var(--otvety-color);
	color: var(--otvety-accent);
	transform: rotate(180deg);
}

.otvety__body {
	max-height: 0;
	overflow: hidden;
	transition: max-height .35s ease;
}

.otvety__a {
	padding: 0 var(--otvety-card-pad-x) var(--otvety-card-pad-y);
	color: var(--otvety-color);
	font-size: var(--otvety-a-fz);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.03em;
	word-wrap: break-word;
}

.otvety__a p { margin: 0 0 .6em; }
.otvety__a p:last-child { margin-bottom: 0; }

.otvety__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(42px, 2.7083dvw, 52px);
	padding: clamp(11px, 0.7292dvw, 14px) clamp(28px, 3.125dvw, 60px);
	border-radius: 1000px;
	background: var(--otvety-color);
	color: #fff;
	font-size: clamp(16px, 1.0417dvw, 20px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-decoration: none;
	white-space: nowrap;
	transition: background .2s ease;
}

.otvety__btn:hover { background: #0b5050; }
.otvety__btn:active { background: #073535; }

@media (max-width: 767px) {
	.otvety {
		padding: clamp(40px, 5dvw, 96px) 0 clamp(72px, 18dvw, 110px);
	}
	.otvety__cols {
		flex-direction: column;
		gap: var(--otvety-item-gap);
	}
	.otvety__btn { white-space: normal; text-align: center; }
}

/* End */
/* /local/components/qfast/heroblock/templates/.default/style.min.css?17758676258960 */
/* /local/components/qfast/textblock/templates/.default/style.css?17755936091089 */
/* /local/templates/qfast/components/bitrix/news.list/smart/style.css?177584967226606 */
/* /local/templates/qfast/components/bitrix/news.list/linerun/style.css?17759985492001 */
/* /local/templates/qfast/components/bitrix/news.list/utp_scroll/style.css?177584869817466 */
/* /local/templates/qfast/components/bitrix/news.list/news_articles/style.css?177706492510372 */
/* /local/components/qfast/gdekupit/templates/.default/style.css?17762569833186 */
/* /local/components/qfast/musik/templates/v3/style.css?177587097325756 */
/* /local/templates/qfast/components/bitrix/news.list/slider_catalog/style.css?177585691313785 */
/* /local/templates/qfast/components/bitrix/form.result.new/ask_question/style.css?177707617010186 */
/* /local/templates/qfast/components/bitrix/news.list/otvety/style.css?17762579794070 */