/* Start:/local/templates/ekspopipe/assets/css/base/fonts.css?17894571443312*/
/* Порядок слоёв: вендоры < ui-кит шаблона < стили секций (вне слоёв) */
@layer vendor, ui;

@layer ui {

/* Roboto — локальные подмножества (cyrillic, latin, latin-ext), вес 400/500/700 */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/local/templates/ekspopipe/assets/css/base/../../fonts/roboto-cyrillic-400.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/local/templates/ekspopipe/assets/css/base/../../fonts/roboto-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/local/templates/ekspopipe/assets/css/base/../../fonts/roboto-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/local/templates/ekspopipe/assets/css/base/../../fonts/roboto-cyrillic-500.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/local/templates/ekspopipe/assets/css/base/../../fonts/roboto-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/local/templates/ekspopipe/assets/css/base/../../fonts/roboto-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/local/templates/ekspopipe/assets/css/base/../../fonts/roboto-cyrillic-700.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/local/templates/ekspopipe/assets/css/base/../../fonts/roboto-latin-ext-700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/local/templates/ekspopipe/assets/css/base/../../fonts/roboto-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

}

/* End */


/* Start:/local/templates/ekspopipe/assets/css/base/tokens.css?17894571445795*/
@layer ui {

/* ==========================================================================
   Дизайн-токены. Единственный источник правды по цветам, типографике,
   отступам и радиусам. Значения взяты из Figma-переменных UI-Kit.
   ========================================================================== */

:root {
  /* --- Цвета ------------------------------------------------------------ */
  --c-main:         #294878;  /* main blue      */
  --c-secondary:    #55709A;  /* secondary blue */
  --c-hover:        #1C3D6F;  /* hover blue     */
  --c-active:       #132F5D;  /* active blue    */
  --c-light-blue:   #E3EAFB;  /* light blue     */
  --c-opacity-blue: #CCD4F0;  /* opacity blue   */
  --c-bg:           #F6F8FE;  /* bg             */
  --c-white:        #FFFFFF;
  --c-black:        #272727;
  --c-text:         #4D4D4D;
  --c-grey:         #A7A7A7;
  --c-red:          #EB5757;

  --c-white-80: rgba(255, 255, 255, .8);
  --c-white-40: rgba(255, 255, 255, .4);
  --c-white-20: rgba(255, 255, 255, .2);
  --c-grey-60:  rgba(167, 167, 167, .6);

  --c-primary-black: #0F0F0F;                 /* primary black — подзаголовки детальной */
  --c-dash:          rgba(87, 95, 112, .5);   /* пунктир в строке характеристик         */

  /* --- Типографика ------------------------------------------------------ */
  --font-base: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --lh-tight: 1.1;  /* заголовки и medium-начертание */
  --lh-base:  1.3;  /* обычный текст                 */
  --ls-base:  -.03em;

  /* Шкала (desktop 1920). Переопределяется ниже по брейкпоинтам. */
  --fs-title:    64px;  /* заголовок секции: своя ступень, на мобиле мельче H1 */
  --fs-h1:       64px;
  --fs-h2:       44px;
  --fs-h3:       36px;
  --fs-h4:       28px;
  --fs-h5:       24px;

  --fs-body-l:   24px;
  --fs-body-m:   20px;
  --fs-body-s:   18px;
  --fs-body-xs:  16px;

  --fs-cap-l:    16px;
  --fs-cap-m:    14px;
  --fs-cap-s:    12px;

  /* --- Сетка и отступы -------------------------------------------------- */
  --container-max: 1920px;
  --gap-page:  40px;   /* боковые поля страницы           */
  --gap-block: 44px;   /* между колонками крупных блоков  */
  --gap-card:  32px;   /* внутренние отступы карточек     */

  --space-4:  4px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-44: 44px;
  --space-60: 60px;

  /* --- Радиусы ---------------------------------------------------------- */
  --r-2xl:  28px;  /* стеклянные панели       */
  --r-xl:   20px;  /* карточки, крупные поля  */
  --r-lg:   16px;
  --r-md:   8px;   /* кнопки шапки, табы      */
  --r-sm:   4px;
  --r-pill: 41px;  /* кнопки-таблетки         */
  --r-full: 9999px;

  /* --- Прочее ----------------------------------------------------------- */
  --header-h: 133px;  /* высота закреплённой шапки */
  --icon-size: 24px;
  --control-l:  50px;  /* высота/сторона иконочной кнопки */
  --control-m:  46px;
  --control-s:  39px;

  --transition: .2s ease;
  --shadow-card: 0 4px 24px rgba(41, 72, 120, .08);
}

/* --- Laptop 1440 --------------------------------------------------------- */
@media (max-width: 1727px) {
  :root {
    --header-h:   105px;

    --fs-title:   44px;
    --fs-h1:      44px;
    --fs-h2:      36px;
    --fs-h3:      28px;
    --fs-h4:      20px;
    --fs-h5:      20px;

    --fs-body-l:  18px;
    --fs-body-m:  16px;
    --fs-body-s:  16px;
    --fs-body-xs: 14px;

    --fs-cap-l:   14px;
    --fs-cap-m:   13px;
    --fs-cap-s:   12px;

    --gap-page:  32px;
    --gap-block: 32px;
    --gap-card:  24px;

    --r-xl: 20px;
    --r-lg: 12px;
    --r-md: 6px;

    --icon-size: 20px;
    --control-l: 36px;
    --control-m: 36px;
    --control-s: 31px;
  }
}

/* --- Tablet 1024 --------------------------------------------------------- */
@media (max-width: 1279px) {
  :root {
    --header-h:   98px;

    --fs-title:   36px;
    --fs-h1:      36px;
    --fs-h2:      28px;
    --fs-h3:      24px;
    --fs-h4:      18px;
    --fs-h5:      18px;

    --fs-body-l:  16px;
    --fs-body-m:  16px;
    --fs-body-s:  14px;
    --fs-body-xs: 14px;

    --fs-cap-l:   14px;
    --fs-cap-m:   12px;
    --fs-cap-s:   12px;

    --gap-page:  24px;
    --gap-block: 24px;
    --gap-card:  24px;

    --r-xl: 20px;
  }
}

/* --- Mobile 375 ---------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --header-h:   95px;  /* белая строка 29 + синяя 66 */

    --fs-title:   24px;
    --fs-h1:      28px;
    --fs-h2:      24px;
    --fs-h3:      20px;
    --fs-h4:      16px;
    --fs-h5:      16px;

    --fs-body-l:  14px;
    --fs-body-m:  14px;
    --fs-body-s:  14px;
    --fs-body-xs: 12px;

    --fs-cap-l:   12px;
    --fs-cap-m:   12px;
    --fs-cap-s:   11px;

    --gap-page:  12px;
    --gap-block: 20px;
    --gap-card:  16px;

    --r-xl: 10px;
    --r-lg: 10px;

    --icon-size: 18px;
    --control-l: 32px;
    --control-m: 32px;
    --control-s: 28px;
  }
}

}

/* End */


/* Start:/local/templates/ekspopipe/assets/css/base/reset.css?17894571441970*/
@layer ui {

/* ==========================================================================
   Reset / normalize
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-base);
  font-size: var(--fs-body-m);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

input, textarea { background: none; border: 0; }
textarea { resize: vertical; }

:focus-visible {
  outline: 2px solid var(--c-main);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

/* Иконки из спрайта */
.icon {
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 auto;
  fill: none;
  color: inherit;
  pointer-events: none;
}

.icon.is-rot-90  { transform: rotate(90deg); }
.icon.is-rot-180 { transform: rotate(180deg); }
.icon.is-rot-270 { transform: rotate(270deg); }

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

}

/* End */


/* Start:/local/templates/ekspopipe/assets/css/base/typography.css?17895611414927*/
@layer ui {

/* ==========================================================================
   Типографика. Классы повторяют текстовые стили из Figma.
   ========================================================================== */

.h-title, .h1, .h2, .h3, .h4, .h5 {
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-base);
  color: var(--c-main);
}

.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.h4 { font-size: var(--fs-h4); }
.h5 { font-size: var(--fs-h5); }

/* Заголовок секции: 64 / 44 / 36 / 24 — на мобиле на ступень мельче H1 */
.h-title { font-size: var(--fs-title); }

/* Body / Medium */
.text-m-l  { font-size: var(--fs-body-l);  font-weight: 500; line-height: var(--lh-tight); }
.text-m-m  { font-size: var(--fs-body-m);  font-weight: 500; line-height: var(--lh-tight); }
.text-m-s  { font-size: var(--fs-body-s);  font-weight: 500; line-height: var(--lh-tight); }
.text-m-xs { font-size: var(--fs-body-xs); font-weight: 500; line-height: var(--lh-tight); }

/* Body / Regular */
.text-l  { font-size: var(--fs-body-l);  font-weight: 400; line-height: var(--lh-base); }
.text-m  { font-size: var(--fs-body-m);  font-weight: 400; line-height: var(--lh-base); }
.text-s  { font-size: var(--fs-body-s);  font-weight: 400; line-height: var(--lh-base); }
.text-xs { font-size: var(--fs-body-xs); font-weight: 400; line-height: var(--lh-base); }

/* Body / Bold */
.text-b-xs  { font-size: var(--fs-body-xs); font-weight: 700; line-height: var(--lh-base); }
.text-b-xxs { font-size: var(--fs-cap-m);   font-weight: 700; line-height: var(--lh-base); }

/* Caption */
.caption-l   { font-size: var(--fs-cap-l); font-weight: 400; line-height: var(--lh-base); }
.caption-m   { font-size: var(--fs-cap-m); font-weight: 400; line-height: var(--lh-base); }
.caption-s   { font-size: var(--fs-cap-s); font-weight: 400; line-height: var(--lh-base); }
.caption-m-l { font-size: var(--fs-cap-l); font-weight: 500; line-height: var(--lh-tight); }
.caption-m-m { font-size: var(--fs-cap-m); font-weight: 500; line-height: var(--lh-tight); }
.caption-m-s { font-size: var(--fs-cap-s); font-weight: 500; line-height: var(--lh-tight); }

/* Текст из визуального редактора (контент статических страниц).
   Отступы задаются между блоками, чтобы у первого и последнего их не было. */
.static__content {
  color: var(--c-text);
  font-size: var(--fs-body-xs);
  line-height: var(--lh-base);
}

.static__content > * + * { margin-top: 1em; }

.static__content :is(h2, h3, h4) {
  color: var(--c-black);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-base);
}

.static__content h2 { font-size: var(--fs-h5); }
.static__content h3 { font-size: var(--fs-body-m); }
.static__content h4 { font-size: var(--fs-body-s); }

.static__content > * + :is(h2, h3, h4) { margin-top: 1.6em; }
.static__content > :is(h2, h3, h4) + * { margin-top: .6em; }

.static__content :is(ul, ol) {
  display: flex;
  flex-direction: column;
  gap: .5em;
  padding-left: 1.4em;
}

.static__content ul { list-style: disc; }
.static__content ol { list-style: decimal; }
.static__content li::marker { color: var(--c-main); }

.static__content :is(ul, ol) :is(ul, ol) { margin-top: .5em; }

.static__content a {
  color: var(--c-main);
  text-decoration: underline;
  text-underline-offset: .15em;
}

.static__content a:hover { color: var(--c-hover); }

.static__content :is(b, strong) {
  color: var(--c-black);
  font-weight: 500;
}

.static__content img { border-radius: var(--r-xl); }

.static__content table {
  width: 100%;
  border-collapse: collapse;
}

.static__content :is(th, td) {
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--c-opacity-blue);
  text-align: left;
  vertical-align: top;
}

.static__content th {
  color: var(--c-black);
  font-weight: 500;
}

.static__content blockquote {
  padding: var(--space-20) var(--space-24);
  border-left: 3px solid var(--c-main);
  border-radius: var(--r-md);
  background: var(--c-bg);
}

/* Цветовые модификаторы текста */
.t-main      { color: var(--c-main); }
.t-secondary { color: var(--c-secondary); }
.t-text      { color: var(--c-text); }
.t-black     { color: var(--c-black); }
.t-grey      { color: var(--c-grey); }
.t-white     { color: var(--c-white); }
.t-white-80  { color: var(--c-white-80); }
.t-red       { color: var(--c-red); }

/* Обрезка в N строк */
.clamp-1,
.clamp-2,
.clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

}

/* End */


/* Start:/local/templates/ekspopipe/assets/css/base/layout.css?17895611412458*/
@layer ui {

/* ==========================================================================
   Сетка и служебные обёртки
   ========================================================================== */

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Шапка закреплена и выпадает из потока — компенсируем её высоту */
.page__body {
  flex: 1 0 auto;
  padding-top: var(--header-h);
}

html { scroll-padding-top: var(--header-h); }

/* Основной контейнер: во всю ширину с боковыми полями страницы */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gap-page);
}

/* Обёртка контента статических страниц (свойство страницы page_wrapper) */
.static {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--gap-page);
}

.static__title {
  margin-bottom: var(--space-32);
  color: var(--c-black);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-base);
}

@media (max-width: 767px) {
  .static__title { margin-bottom: var(--space-20); }
}

/* Контейнер без боковых полей (для блоков во всю ширину) */
.container--flush { padding-inline: 0; }

/* Секция страницы */
.section { padding-block: var(--space-40); }
.section--tight { padding-block: var(--space-24); }

/* Простые сетки-хелперы */
.grid { display: grid; gap: var(--space-20); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1279px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Видимость по брейкпоинтам */
@media (max-width: 1279px) { .hide-tablet-down { display: none !important; } }
@media (max-width: 767px)  { .hide-mobile      { display: none !important; } }

/* Блокировка прокрутки при открытом меню */
.is-locked { overflow: hidden; }

}

/* End */


/* Start:/local/templates/ekspopipe/partials/accordion/style.css?17894571444125*/
@layer ui {

/* ==========================================================================
   Блок: Accordion (Answer)
   ========================================================================== */

.accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.accordion__item {
  border: 2px solid var(--c-bg);
  border-radius: var(--r-xl);
  background: var(--c-white);
  overflow: hidden;
  transition: background-color var(--transition);
}

/* Пункты стыкуются: общая граница и скругление только снизу */
.accordion__item + .accordion__item {
  border-top-width: 0;
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}

.accordion__head {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 28px 24px 32px;
  text-align: left;
}

.accordion__marker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: var(--r-pill);
  background: var(--c-light-blue);
  color: var(--c-main);
  transition: background-color var(--transition), color var(--transition);
}

.accordion__icon {
  --icon-size: 24px;
  position: absolute;
  transition: opacity var(--transition), transform var(--transition);
}

.accordion__icon--cross { opacity: 0; transform: rotate(-45deg); }

.accordion__title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--c-main);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-base);
  transition: color var(--transition);
}

/* --- Hover ---------------------------------------------------------------- */
.accordion__head:hover .accordion__marker { background: var(--c-hover); color: var(--c-white); }
.accordion__head:hover .accordion__title  { color: var(--c-hover); }

/* --- Панель --------------------------------------------------------------- */
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}

.accordion__body {
  overflow: hidden;
  padding-inline: calc(56px + 24px) 24px;
  color: var(--c-text);
  font-size: var(--fs-body-m);
  line-height: var(--lh-base);
}

.accordion__body > * + * { margin-top: 1em; }

/* --- Открытый пункт ------------------------------------------------------- */
.accordion__item.is-open {
  background: var(--c-bg);
}

.accordion__item.is-open .accordion__head { padding-bottom: 20px; }
.accordion__item.is-open .accordion__marker { background: var(--c-hover); color: var(--c-white); }
.accordion__item.is-open .accordion__title  { color: var(--c-hover); }

.accordion__item.is-open .accordion__icon--plus  { opacity: 0; transform: rotate(45deg); }
.accordion__item.is-open .accordion__icon--cross { opacity: 1; transform: rotate(0); }

.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }

.accordion__item.is-open .accordion__body { padding-bottom: 32px; }

/* --- Адаптив --------------------------------------------------------------- */
@media (max-width: 1727px) {
  .accordion__head   { gap: 24px; padding: 20px; }
  .accordion__marker { width: 46px; height: 46px; }
  .accordion__icon   { --icon-size: 22px; }
  .accordion__body   { padding-inline: calc(46px + 24px) 20px; }
  .accordion__item.is-open .accordion__body { padding-bottom: 24px; }
}

@media (max-width: 1279px) {
  .accordion__head   { gap: 20px; padding: 12px; }
  .accordion__marker { width: 44px; height: 44px; }
  .accordion__icon   { --icon-size: 20px; }
  .accordion__body   { padding-inline: calc(44px + 20px) 12px; }
  .accordion__item.is-open .accordion__body { padding-bottom: 16px; }
}

@media (max-width: 767px) {
  .accordion__head   { gap: 16px; padding: 16px 12px; }
  .accordion__marker { width: 39px; height: 39px; }
  .accordion__icon   { --icon-size: 15px; }
  .accordion__body   { padding-inline: 0 12px; }
  .accordion__item.is-open .accordion__body { padding-bottom: 16px; }
}

}

/* End */


/* Start:/local/templates/ekspopipe/partials/breadcrumbs/style.css?17894571441491*/
@layer ui {

/* ==========================================================================
   Блок: Хлебные крошки
   ========================================================================== */

.breadcrumbs {
  --bc-fs:   var(--fs-cap-l);
  --bc-icon: 18px;

  background: var(--c-bg);
}

.breadcrumbs__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-block: var(--gap-page);
}

.breadcrumbs__item {
  color: var(--c-grey);
  font-size: var(--bc-fs);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-base);
  transition: color var(--transition);
}

a.breadcrumbs__item:hover { color: var(--c-main); }

.breadcrumbs__item--current { color: var(--c-black); }

/* Шеврон смотрит вправо */
.breadcrumbs__sep {
  --icon-size: var(--bc-icon);
  flex: 0 0 auto;
  color: var(--c-grey);
  transform: rotate(-90deg);
}

/* --- Адаптив -------------------------------------------------------------- */
@media (max-width: 1727px) { .breadcrumbs { --bc-icon: 14px; } }

/* Mobile — Caption / Medium / XS: 10px без трекинга, между строками 8px,
   между пунктами 4px (макеты каталога и детальной) */
@media (max-width: 767px) {
  .breadcrumbs        { --bc-fs: 10px; --bc-icon: 12px; }
  .breadcrumbs__inner { gap: 8px 4px; }
  .breadcrumbs__item  { letter-spacing: 0; }
}

}

/* End */


/* Start:/local/templates/ekspopipe/partials/button/style.css?179319549315396*/
@layer ui {

  /* ==========================================================================
   Блок: Button
   Типы: primary / secondary / icon / link / nobg / dropdown
   Размеры: l / m / s / xs
   ========================================================================== */

  .btn {
    --btn-bg: transparent;
    --btn-bg-hover: transparent;
    --btn-bg-active: transparent;
    --btn-color: currentColor;
    --btn-pad-x: 0px;
    --btn-pad-y: 0px;
    --btn-gap: 8px;
    --btn-radius: var(--r-pill);
    --btn-fs: var(--fs-body-xs);
    --btn-fw: 500;
    --btn-lh: var(--lh-tight);
    --btn-icon: 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    padding: var(--btn-pad-y) var(--btn-pad-x);
    border-radius: var(--btn-radius);
    background: var(--btn-bg);
    color: var(--btn-color);
    font-size: var(--btn-fs);
    font-weight: var(--btn-fw);
    line-height: var(--btn-lh);
    letter-spacing: var(--ls-base);
    text-align: center;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition),
      border-color var(--transition), opacity var(--transition);
  }

  .btn--block {
    display: flex;
    width: 100%;
  }

  .btn__text {
    display: block;
  }

  .btn__icon {
    --icon-size: var(--btn-icon);
    transition: transform var(--transition);
  }

  .btn[disabled],
  .btn.is-disabled {
    opacity: .5;
    pointer-events: none;
  }

  /* --------------------------------------------------------------------------
   Primary
   -------------------------------------------------------------------------- */
  .btn--primary {
    --btn-bg: var(--c-main);
    --btn-bg-hover: var(--c-hover);
    --btn-bg-active: var(--c-active);
    --btn-color: var(--c-white);
  }

  .btn--primary:hover,
  .btn--primary.is-hover {
    background: var(--btn-bg-hover);
  }

  .btn--primary:active,
  .btn--primary.is-active {
    background: var(--btn-bg-active);
  }

  /* Светлая вариация — на синем фоне (например, форма в футере) */
  .btn--primary.btn--light {
    --btn-bg: var(--c-light-blue);
    --btn-bg-hover: var(--c-opacity-blue);
    --btn-bg-active: var(--c-white);
    --btn-color: var(--c-main);
  }

  /* --------------------------------------------------------------------------
   Secondary
   -------------------------------------------------------------------------- */
  .btn--secondary {
    --btn-bg: var(--c-secondary);
    --btn-bg-hover: var(--c-hover);
    --btn-bg-active: var(--c-active);
    --btn-color: var(--c-white);
  }

  .btn--secondary:hover,
  .btn--secondary.is-hover {
    background: var(--btn-bg-hover);
  }

  .btn--secondary:active,
  .btn--secondary.is-active {
    background: var(--btn-bg-active);
  }

  /* Светлые вариации — на белой карточке (каталог, фильтр) */
  .btn--secondary.btn--soft {
    --btn-bg: var(--c-light-blue);
    --btn-bg-hover: var(--c-opacity-blue);
    --btn-bg-active: var(--c-white);
    --btn-color: var(--c-black);
  }

  .btn--secondary.btn--fill {
    --btn-bg: var(--c-opacity-blue);
    --btn-bg-hover: var(--c-light-blue);
    --btn-bg-active: var(--c-white);
    --btn-color: var(--c-black);
  }

  /* Белая вариация — на светло-синей плашке (блок покупки на детальной) */
  .btn--secondary.btn--white {
    --btn-bg: var(--c-white);
    --btn-bg-hover: var(--c-opacity-blue);
    --btn-bg-active: var(--c-bg);
    --btn-color: var(--c-text);
  }

  .btn--secondary.btn--soft:hover,
  .btn--secondary.btn--fill:hover,
  .btn--secondary.btn--white:hover {
    background: var(--btn-bg-hover);
    color: var(--btn-color);
  }

  .btn--secondary.btn--soft:active,
  .btn--secondary.btn--fill:active,
  .btn--secondary.btn--white:active {
    background: var(--btn-bg-active);
    color: var(--c-main);
  }

  /* --------------------------------------------------------------------------
   Icon — круглая иконочная кнопка
   -------------------------------------------------------------------------- */
  .btn--icon {
    --btn-bg: var(--c-white);
    --btn-color: var(--c-main);
    --btn-gap: 0px;
    aspect-ratio: 1;
  }

  .btn--icon:hover,
  .btn--icon.is-hover {
    background: var(--c-hover);
    color: var(--c-white);
  }

  .btn--icon:active,
  .btn--icon.is-active {
    background: var(--c-active);
    color: var(--c-white);
  }

  /* Синяя вариация — стрелка у заголовка секции */
  .btn--icon.btn--main {
    --btn-bg: var(--c-main);
    --btn-color: var(--c-white);
  }

  .btn--icon.btn--main:hover {
    background: var(--c-hover);
    color: var(--c-white);
  }

  .btn--icon.btn--main:active {
    background: var(--c-active);
    color: var(--c-white);
  }

  /* Залитая вариация — стрелка в карточке каталога */
  .btn--icon.btn--fill {
    --btn-bg: var(--c-opacity-blue);
    --btn-color: var(--c-main);
  }

  .btn--icon.btn--fill:hover {
    background: var(--c-hover);
    color: var(--c-white);
  }

  .btn--icon.btn--fill:active {
    background: var(--c-active);
    color: var(--c-white);
  }

  /* --------------------------------------------------------------------------
   Link — текстовая ссылка, по умолчанию на тёмном фоне
   -------------------------------------------------------------------------- */
  .btn--link {
    --btn-color: var(--c-white-80);
    --btn-fw: 400;
    --btn-lh: var(--lh-base);
    --btn-gap: 6px;
    --btn-radius: 0;
    justify-content: flex-start;
    text-align: left;
  }

  .btn--link:hover,
  .btn--link.is-hover {
    color: var(--c-bg);
  }

  .btn--link:active,
  .btn--link.is-active {
    color: var(--c-white);
  }

  .btn--link.btn--on-light {
    --btn-color: var(--c-text);
  }

  .btn--link.btn--on-light:hover {
    color: var(--c-main);
  }

  .btn--link.btn--on-light:active {
    color: var(--c-active);
  }

  /* --------------------------------------------------------------------------
   No bg — текст с иконкой и подчёркиванием
   -------------------------------------------------------------------------- */
  .btn--nobg {
    --btn-color: var(--c-main);
    --btn-gap: 8px;
    --btn-radius: 0;
    position: relative;
    padding-bottom: 3px;
  }
/* 
  .btn--nobg::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: currentColor;
    transition: opacity var(--transition);
  } */

  .btn--nobg:hover,
  .btn--nobg.is-hover {
    color: var(--c-hover);
  }

  .btn--nobg:active,
  .btn--nobg.is-active {
    color: var(--c-active);
  }

  .btn--nobg.btn--on-dark {
    --btn-color: var(--c-white);
  }

  .btn--nobg.btn--on-dark:hover {
    color: var(--c-light-blue);
  }

  /* --------------------------------------------------------------------------
   Dropdown — пункт меню с шевроном
   -------------------------------------------------------------------------- */
  .btn--dropdown {
    --btn-color: var(--c-text);
    --btn-fw: 400;
    --btn-lh: var(--lh-base);
    --btn-gap: 4px;
    --btn-radius: 0;
    --btn-icon: 18px;
  }

  .btn--dropdown:hover,
  .btn--dropdown.is-hover {
    color: var(--c-hover);
  }

  .btn--dropdown:active,
  .btn--dropdown.is-active,
  .btn--dropdown.is-open {
    color: var(--c-active);
  }

  .btn--dropdown.is-open .btn__icon {
    transform: rotate(180deg);
  }

  /* --------------------------------------------------------------------------
   Размеры
   -------------------------------------------------------------------------- */

  /* L */
  .btn--l.btn--primary {
    --btn-pad-x: 28px;
    --btn-pad-y: 16px;
    --btn-gap: 16px;
    --btn-fs: var(--fs-body-m);
    --btn-icon: 24px;
  }

  .btn--l.btn--secondary {
    --btn-pad-x: 24px;
    --btn-pad-y: 16px;
    --btn-gap: 16px;
    --btn-fs: var(--fs-body-xs);
    --btn-icon: 18px;
  }

  .btn--l.btn--icon {
    --btn-pad-x: 16px;
    --btn-pad-y: 16px;
    --btn-icon: 24px;
  }

  .btn--l.btn--link {
    --btn-fs: var(--fs-body-m);
  }

  .btn--l.btn--nobg {
    --btn-fs: var(--fs-body-m);
    --btn-icon: 26px;
  }

  .btn--l.btn--dropdown {
    --btn-fs: var(--fs-body-xs);
  }

  /* M */
  .btn--m.btn--primary {
    --btn-pad-x: 20px;
    --btn-pad-y: 12px;
    --btn-gap: 12px;
    --btn-fs: var(--fs-body-s);
    --btn-icon: 22px;
  }

  .btn--m.btn--secondary {
    --btn-pad-x: 24px;
    --btn-pad-y: 14px;
    --btn-gap: 16px;
    --btn-fs: var(--fs-body-xs);
    --btn-icon: 18px;
  }

  .btn--m.btn--icon {
    --btn-pad-x: 12px;
    --btn-pad-y: 12px;
    --btn-icon: 22px;
  }

  .btn--m.btn--link {
    --btn-fs: var(--fs-body-s);
  }

  .btn--m.btn--nobg {
    --btn-fs: var(--fs-body-xs);
    --btn-icon: 24px;
  }

  .btn--m.btn--dropdown {
    --btn-fs: var(--fs-body-xs);
    --btn-icon: 18px;
  }

  /* S */
  .btn--s.btn--primary {
    --btn-pad-x: 20px;
    --btn-pad-y: 12px;
    --btn-gap: 12px;
    --btn-fs: var(--fs-body-xs);
    --btn-icon: 20px;
  }

  .btn--s.btn--secondary {
    --btn-pad-x: 20px;
    --btn-pad-y: 12px;
    --btn-gap: 8px;
    --btn-fs: var(--fs-cap-m);
    --btn-icon: 15px;
  }

  .btn--s.btn--icon {
    --btn-pad-x: 12px;
    --btn-pad-y: 12px;
    --btn-icon: 20px;
  }

  .btn--s.btn--link {
    --btn-fs: var(--fs-body-xs);
  }

  .btn--s.btn--nobg {
    --btn-fs: var(--fs-cap-l);
    --btn-icon: 20px;
  }

  .btn--s.btn--dropdown {
    --btn-fs: var(--fs-cap-m);
    --btn-icon: 16px;
  }

  /* XS */
  .btn--xs.btn--primary {
    --btn-pad-x: 20px;
    --btn-pad-y: 12px;
    --btn-gap: 8px;
    --btn-fs: var(--fs-cap-m);
    --btn-icon: 15px;
  }

  .btn--xs.btn--secondary {
    --btn-pad-x: 16px;
    --btn-pad-y: 8px;
    --btn-gap: 6px;
    --btn-fs: var(--fs-cap-s);
    --btn-icon: 13px;
  }

  .btn--xs.btn--icon {
    --btn-pad-x: 12px;
    --btn-pad-y: 12px;
    --btn-icon: 15px;
  }

  .btn--xs.btn--link {
    --btn-fs: var(--fs-cap-m);
  }

  .btn--xs.btn--nobg {
    --btn-fs: var(--fs-cap-m);
    --btn-icon: 18px;
  }

  .btn--xs.btn--dropdown {
    --btn-fs: var(--fs-cap-s);
    --btn-icon: 14px;
  }

  /* --------------------------------------------------------------------------
   Адаптив

   В макете кнопка Primary/L — отдельный вариант на каждый брейкпоинт
   (Desktop / Laptop / Mobile), а не одна фиксированная величина.
   Ниже перенесены значения из Figma: паддинги, отступ и кегль ужимаются,
   как на макете главной.
   -------------------------------------------------------------------------- */

  /* Laptop 1440 */
  @media (max-width: 1727px) {
    .btn--l.btn--primary {
      --btn-pad-x: 20px;
      --btn-pad-y: 12px;
      --btn-gap: 12px;
      --btn-fs: 18px;
      --btn-icon: 22px;
    }
  }

  /* Tablet 1024 */
  @media (max-width: 1279px) {
    .btn--l.btn--primary {
      --btn-fs: 16px;
      --btn-icon: 20px;
    }
  }

  /* Mobile 375 */
  @media (max-width: 767px) {
    .btn--l.btn--primary {
      --btn-gap: 8px;
      --btn-fs: 14px;
      --btn-icon: 15px;
    }
  }

  /* Icon/L — в макете кнопка ужимается по брейкпоинтам так же, как Primary */
  @media (max-width: 1727px) {
    .btn--l.btn--icon {
      --btn-pad-x: 12px;
      --btn-pad-y: 12px;
      --btn-icon: 22px;
    }
  }

  @media (max-width: 1279px) {
    .btn--l.btn--icon {
      --btn-icon: 20px;
    }
  }

  @media (max-width: 767px) {
    .btn--l.btn--icon {
      --btn-icon: 15px;
    }
  }

  /* Secondary/L — вертикальный отступ и кегль ужимаются по брейкпоинтам */
  @media (max-width: 1727px) {
    .btn--l.btn--secondary {
      --btn-pad-x: 16px;
      --btn-pad-y: 12px;
      --btn-gap: 12px;
    }
  }

  @media (max-width: 1279px) {
    .btn--l.btn--secondary {
      --btn-pad-x: 20px;
      --btn-gap: 8px;
    }
  }

  @media (max-width: 767px) {
    .btn--l.btn--secondary {
      --btn-pad-x: 16px;
      --btn-pad-y: 8px;
      --btn-gap: 6px;
    }
  }

  /* --------------------------------------------------------------------------
   Catalog — круглая иконочная кнопка каталога
   (Figma: Catalog Icon Button, L / M / S × Default / Hover / Active)

   Сторона задаётся явно, а не паддингом: в макете это 50 / 39 / 31.
   Правила идут последними, чтобы перебить общие размеры .btn--*.btn--icon.
   -------------------------------------------------------------------------- */
  .btn--icon.btn--catalog {
    --btn-bg: var(--c-bg);
    --btn-color: var(--c-secondary);
    --btn-radius: var(--r-full);
    width: var(--btn-side);
    height: var(--btn-side);
  }

  .btn--icon.btn--catalog:hover,
  .btn--icon.btn--catalog.is-hover {
    background: var(--c-light-blue);
    color: var(--c-hover);
  }

  .btn--icon.btn--catalog:active,
  .btn--icon.btn--catalog.is-active,
  .btn--icon.btn--catalog.is-on {
    background: var(--c-light-blue);
    color: var(--c-active);
  }

  /* Замкнутые иконки (сердце) при клике заливаются целиком,
   у незамкнутых меняется только цвет линий — заливка им ничего не рисует */
  /* Путь иконки лежит в теневом дереве <use>, селектор до него не достаёт —
   заливку передаёт наследуемая переменная (в спрайте: fill: var(--icon-fill)) */
  .btn--icon.btn--catalog:active .btn__icon,
  .btn--icon.btn--catalog.is-active .btn__icon,
  .btn--icon.btn--catalog.is-on .btn__icon {
    --icon-fill: currentColor;
  }

  /* Desktop / Laptop: выбранная кнопка остаётся на светлом фоне, голубой фон —
   только у наведения (макет «Состояния кнопки избранное в карточке товара») */
  @media (min-width: 1280px) and (hover: hover) {
    .btn--icon.btn--catalog.is-on { background: var(--btn-bg); }
    .btn--icon.btn--catalog.is-on:hover { background: var(--c-light-blue); }
  }

  /* Фиксированные размеры — для витрины и мест, где кнопка не должна ужиматься */
  .btn--m.btn--catalog {
    --btn-side: 39px;
    --btn-icon: 20px;
    --btn-pad-x: 0px;
    --btn-pad-y: 0px;
  }

  .btn--s.btn--catalog {
    --btn-side: 31px;
    --btn-icon: 15px;
    --btn-pad-x: 0px;
    --btn-pad-y: 0px;
  }

  /* L ужимается по брейкпоинтам так же, как остальные кнопки макета */
  .btn--l.btn--catalog {
    --btn-side: 50px;
    --btn-icon: 24px;
    --btn-pad-x: 0px;
    --btn-pad-y: 0px;
  }

  @media (max-width: 1727px) {
    .btn--l.btn--catalog {
      --btn-side: 39px;
      --btn-icon: 20px;
    }
  }

  @media (max-width: 767px) {
    .btn--l.btn--catalog {
      --btn-side: 31px;
      --btn-icon: 15px;
    }
  }

}
/* End */


/* Start:/local/templates/ekspopipe/partials/catalog-card-mini/style.css?17894571442104*/
@layer ui {

/* ==========================================================================
   Блок: Card catalog preview mini

   В макете компонент двухслойный: внешняя рамка (padding + радиус 20) и
   сама карточка с картинкой. Рамка задаёт зазор между плитками и служит
   местом под состояние выделения.
   ========================================================================== */

.catalog-mini {
  display: flex;
  padding: 5px;
  border-radius: 20px;  /* в макете фиксированный на всех брейкпоинтах */
}

.catalog-mini__card {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 225 / 227;
  padding: 12px 16px 16px;
  border-radius: 18px;
  background: var(--c-main);
  overflow: hidden;
  isolation: isolate;
}

.catalog-mini__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  overflow: hidden;
}

.catalog-mini__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.catalog-mini__card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3) 100%);
  transition: background var(--transition);
}

.catalog-mini:hover .catalog-mini__image { transform: scale(1.05); }

.catalog-mini:hover .catalog-mini__card::after {
  background: linear-gradient(180deg, rgba(19, 47, 93, .1) 0%, rgba(19, 47, 93, .6) 100%);
}

.catalog-mini__title {
  color: var(--c-white);
  font-size: 20px;
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-base);
}

/* --- Адаптив ------------------------------------------------------------- */

/* Laptop 1440 */
@media (max-width: 1727px) {
  .catalog-mini { padding: 2px; }
  .catalog-mini__title { font-size: 18px; }
}

/* Tablet 1024 */
@media (max-width: 1279px) {
  .catalog-mini__title { font-size: 14px; }
}

}

/* End */


/* Start:/local/templates/ekspopipe/partials/catalog-card/style.css?17897205663164*/
@layer ui {

  /* ==========================================================================
   Блок: Card catalog preview

   Плашки-теги над изображением есть только на 1920 и 1440 — ниже макет
   показывает карточку без них.
   ========================================================================== */

  .catalog-card {
    --cc-pad: 32px;
    --cc-media: 280px;
    --cc-img-h: 158%;
    /* квадрат картинки относительно высоты контейнера */

    display: flex;
    flex-direction: column;
    gap: 12px;
    border-radius: var(--r-xl);
    background: var(--c-bg);
    overflow: hidden;
    transition: background-color var(--transition);
  }

  .catalog-card:hover {
    background: var(--c-light-blue);
  }

  .catalog-card__tags {
    display: flex;
    align-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    padding: var(--cc-pad) var(--cc-pad) 0;
    min-height: 160px;
  }

  .catalog-card:hover .tag--soft {
    background: var(--c-opacity-blue);
  }

  .catalog-card__media {
    position: relative;
    height: var(--cc-media);
    overflow: hidden;
  }

  /* Картинка — квадрат, прижатый к правому краю и выходящий за верх и низ
   контейнера. Часть карточек в макете отзеркалена по горизонтали. */
  .catalog-card__image {
    /* position: absolute;
  top: 50%;
  right: 0;
  width: auto;
  height: var(--cc-img-h);
  aspect-ratio: 1;
  max-width: none;
  object-fit: cover;
  translate: 0 -50%; */
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: scale .4s ease;
  }

  /* .catalog-card--mirror .catalog-card__image { scale: -1 1; } */

  .catalog-card:hover .catalog-card__image {
    scale: 1.03;
  }

  /* .catalog-card--mirror:hover .catalog-card__image { scale: -1.03 1.03; } */

  .catalog-card__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: auto;
    padding: 0 var(--cc-pad) var(--cc-pad);
    flex-grow: 1;
  }

  .catalog-card__title {
    color: var(--c-main);
    font-size: 36px;
  }

  .catalog-card__text {
    color: var(--c-text);
    font-size: var(--fs-body-m);
    line-height: var(--lh-base);
    flex-grow: 1;
  }

  .catalog-card__more {
    align-self: flex-start;
  }

  /* --- Адаптив --------------------------------------------------------------- */
  @media (max-width: 1727px) {
    .catalog-card {
      --cc-pad: 24px;
      --cc-media: 205px;
      --cc-img-h: 160%;
    }

    .catalog-card__body {
      gap: 16px;
    }

    .catalog-card__title {
      font-size: 28px;
    }
  }

  @media (max-width: 1279px) {
    .catalog-card {
      --cc-pad: 16px;
      --cc-media: 191px;
      --cc-img-h: 140%;
    }

    .catalog-card__tags {
      display: none;
    }

    .catalog-card__title {
      font-size: 24px;
    }

    .catalog-card__text {
      font-size: 14px;
    }
  }

  @media (max-width: 767px) {
    .catalog-card {
      --cc-media: 212px;
      --cc-img-h: 134%;
    }
  }

}
/* End */


/* Start:/local/templates/ekspopipe/partials/catalog-product-card/style.css?17931954933399*/
@layer ui {

/* ==========================================================================
   Блок: Product Card страницы каталога
   ========================================================================== */

.catalog-product-card {
  --cpc-pad:     20px;
  --cpc-media:   286px;  /* высота области с картинкой */
  --cpc-gap:     16px;   /* между названием и кнопками */
  --cpc-btn-gap: 8px;
  --cpc-title:   20px;

  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  background: var(--c-white);
  overflow: hidden;
  transition: box-shadow var(--transition);
}

.catalog-product-card:hover { box-shadow: 0 0 10px rgba(85, 112, 154, .4); }

/* --- Медиа ---------------------------------------------------------------- */
.catalog-product-card__media {
  position: relative;
  flex: 0 0 auto;
  height: var(--cpc-media);
  background: var(--c-bg);
}

.catalog-product-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catalog-product-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Сравнение и избранное. Tablet и Mobile — видны всегда; Desktop и Laptop —
   появляются при наведении на карточку (на сенсорных экранах наведения нет,
   там они видны всегда). Оформление и размеры — из UI-Kit (.btn--catalog L) */
.catalog-product-card__actions {
  position: absolute;
  z-index: 2;
  inset: var(--cpc-pad) var(--cpc-pad) auto auto;
  display: flex;
  gap: 8px;
  transition: opacity var(--transition), visibility var(--transition);
}

@media (min-width: 1280px) and (hover: hover) {
  .catalog-product-card:not(:hover, :focus-within) .catalog-product-card__actions {
    visibility: hidden;
    opacity: 0;
  }
}

@media (max-width: 1279px) {
  .catalog-product-card__actions { gap: 4px; }
}

/* --- Текст ---------------------------------------------------------------- */
.catalog-product-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--cpc-gap);
  padding: 12px var(--cpc-pad) var(--cpc-pad);
}

.catalog-product-card__title {
  min-height: calc(var(--cpc-title) * var(--lh-tight) * 2);
  color: var(--c-black);
  font-size: var(--cpc-title);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-base);
  transition: color var(--transition);
}

.catalog-product-card:hover .catalog-product-card__title { color: var(--c-main); }

.catalog-product-card__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--cpc-btn-gap);
}

/* --- Адаптив --------------------------------------------------------------- */
@media (max-width: 1727px) {
  .catalog-product-card {
    --cpc-pad:     16px;
    --cpc-media:   241px;
    --cpc-gap:     12px;
    --cpc-btn-gap: 6px;
    --cpc-title:   16px;
  }

  .catalog-product-card__body { padding-top: 4px; }
}

@media (max-width: 1279px) {
  .catalog-product-card {
    --cpc-pad:   12px;
    --cpc-media: 200px;
    --cpc-gap:   10px;
    --cpc-title: 14px;
  }

  .catalog-product-card__body { padding-top: 2px; }
}

@media (max-width: 767px) {
  .catalog-product-card {
    --cpc-media: 176px;
    --cpc-gap:   8px;
    --cpc-title: 12px;
  }
}

}

/* End */


/* Start:/local/templates/ekspopipe/partials/counter/style.css?17894571441253*/
@layer ui {

/* ==========================================================================
   Блок: Счётчик
   Состояния: default / focused
   ========================================================================== */

.counter {
  --counter-h: 36px;
  --counter-w: 46px;
  --counter-border: var(--c-light-blue);

  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--counter-w);
  height: var(--counter-h);
  padding: 8px;
  border: 1px solid var(--counter-border);
  border-radius: var(--r-md);
  background: var(--c-white);
  transition: border-color var(--transition);
}

.counter__input {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-black);
  font-size: 14px;
  font-weight: 400;
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  text-align: center;
}

.counter__input:focus { outline: none; }

.counter:focus-within,
.counter.is-focused { --counter-border: var(--c-active); }

/* --- Адаптив -------------------------------------------------------------- */

/* Tablet 1024 и ниже — ячейка ниже на 4px */
@media (max-width: 1279px) {
  .counter { --counter-h: 32px; }
}

}

/* End */


/* Start:/local/templates/ekspopipe/partials/document-card/style.css?17894571442041*/
@layer ui {

/* ==========================================================================
   Блок: Card documents

   Размеры взяты из секции «Документация» на главной: 20 / 16 / 14 / 12
   для подписи и 40 / 32 / 32 / 28 для иконки. На мобиле карточка и
   контейнер меняются фоном — белым становится контейнер.
   ========================================================================== */

.doc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  min-height: 218px;
  padding: 40px;
  border-radius: var(--r-xl);
  background: var(--c-white);
  text-align: center;
  transition: background-color var(--transition), color var(--transition);
}

.doc-card__icon {
  --icon-size: 40px;
  display: flex;
  color: var(--c-secondary);
  transition: color var(--transition);
}

.doc-card__title {
  color: var(--c-secondary);
  font-size: 20px;
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-base);
  transition: color var(--transition);
}

a.doc-card:hover,
.doc-card.is-active { background: var(--c-light-blue); }

a.doc-card:hover .doc-card__icon,
a.doc-card:hover .doc-card__title,
.doc-card.is-active .doc-card__icon,
.doc-card.is-active .doc-card__title { color: var(--c-main); }

/* --- Адаптив --------------------------------------------------------------- */
@media (max-width: 1727px) {
  .doc-card { gap: 24px; min-height: 0; padding: 24px 40px; }
  .doc-card__icon  { --icon-size: 32px; }
  .doc-card__title { font-size: 16px; }
}

@media (max-width: 1279px) {
  .doc-card { gap: 16px; min-height: 149px; padding: 24px 20px; }
  .doc-card__title { font-size: 14px; }
}

@media (max-width: 767px) {
  .doc-card {
    gap: 12px;
    padding: 24px 18px;
    border-radius: 8px;
    background: var(--c-bg);
  }

  .doc-card__icon  { --icon-size: 28px; }
  .doc-card__title { font-size: 12px; }
}

}

/* End */


/* Start:/local/templates/ekspopipe/partials/feature-card/style.css?17894571441535*/
@layer ui {

/* ==========================================================================
   Блок: Card (преимущество)

   Иконка прижата к верху, текст к низу — карточка тянется по высоте ячейки.
   ========================================================================== */

.feature-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  height: 100%;
  padding: var(--gap-card);
  border-radius: var(--r-xl);
  background: var(--c-white);
}

.feature-card__icon {
  --icon-size: 40px;
  display: flex;
  color: var(--c-opacity-blue);
}

.feature-card__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.feature-card__title {
  color: var(--c-main);
  font-size: 28px;
}

.feature-card__text {
  color: var(--c-text);
  font-size: var(--fs-body-m);
  line-height: var(--lh-base);
}

/* --- Тёмная карточка ----------------------------------------------------- */
.feature-card--dark { background: var(--c-main); }

.feature-card--dark .feature-card__title { color: var(--c-white); }
.feature-card--dark .feature-card__text  { color: var(--c-white-80); }

/* --- Адаптив ------------------------------------------------------------- */
@media (max-width: 1727px) {
  .feature-card__icon  { --icon-size: 32px; }
  .feature-card__body  { gap: 16px; }
  .feature-card__title { font-size: 24px; }
}

@media (max-width: 767px) {
  .feature-card__title { font-size: 20px; }
}

}

/* End */


/* Start:/local/templates/ekspopipe/partials/hint/style.css?17931954931067*/
@layer ui {

/* ==========================================================================
   Блок: Tooltip — подсказка над кнопкой при наведении
   (Figma: Tooltip, «Состояния кнопки избранное в карточке товара»)

   Один элемент на страницу, позиционируется из JS (partials/hint/script.js):
   карточки обрезают содержимое по скруглению (overflow: hidden), а подсказка
   выходит за их край.
   ========================================================================== */

.hint {
  position: fixed;
  z-index: 140;
  top: 0;
  left: 0;
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: var(--c-black);
  color: var(--c-white);
  font-size: 14px;
  font-weight: 400;
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition);
}

.hint.is-open { opacity: 1; }

}

/* End */


/* Start:/local/templates/ekspopipe/partials/input/style.css?17894571443593*/
@layer ui {

/* ==========================================================================
   Блок: Input field
   Состояния: default / focused / filled / error
   Темы: dark (на синем фоне) / light (на светлом)
   ========================================================================== */

.field {
  --field-pad-x:  24px;
  --field-pad-y:  16px;
  --field-radius: var(--r-xl);
  --field-fs:     var(--fs-body-l);

  --field-bg:          var(--c-white-20);
  --field-color:       var(--c-white);
  --field-placeholder: var(--c-white);
  --field-border:      transparent;

  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.field__control {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--field-pad-y) var(--field-pad-x) calc(var(--field-pad-y) + 2px);
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius);
  background: var(--field-bg);
  transition: border-color var(--transition), background-color var(--transition);
}

.field__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--field-color);
  font-size: var(--field-fs);
  font-weight: 400;
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
}

.field__input:focus { outline: none; }

.field__input::placeholder {
  color: var(--field-placeholder);
  opacity: 1;
  transition: color var(--transition);
}

.field--textarea .field__input {
  resize: vertical;
  min-height: calc(var(--field-fs) * var(--lh-base) * 3);
}

.field--textarea .field__control { align-items: flex-start; }

/* Кнопка очистки — появляется, когда поле в фокусе или заполнено */
.field__clear {
  --icon-size: 24px;
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--field-color);
  transition: opacity var(--transition);
}

.field__clear:hover { opacity: .7; }

.field:focus-within .field__clear,
.field.is-focused .field__clear,
.field.is-filled .field__clear,
.field.is-error .field__clear,
.field.has-value .field__clear { display: flex; }

.field__error {
  padding-inline: var(--field-pad-x);
  color: var(--c-red);
  font-size: var(--fs-cap-l);
  line-height: var(--lh-base);
}

/* --- Состояния ----------------------------------------------------------- */

/* focused: плейсхолдер бледнеет, появляется каретка */
.field:focus-within,
.field.is-focused { --field-placeholder: var(--c-white-20); }

.field.is-focused .field__input::placeholder { color: var(--c-white-20); }

.field.is-error .field__control { border-color: var(--c-red); }

/* --- Тема light ---------------------------------------------------------- */
.field--light {
  --field-bg:          var(--c-white);
  --field-color:       var(--c-black);
  --field-placeholder: var(--c-grey);
  --field-border:      var(--c-opacity-blue);
}

.field--light:focus-within,
.field--light.is-focused {
  --field-border: var(--c-main);
  --field-placeholder: var(--c-grey);
}

/* --- Адаптив ------------------------------------------------------------- */
@media (max-width: 1727px) {
  .field { --field-pad-x: 20px; --field-pad-y: 12px; }
  .field__clear { --icon-size: 20px; }
}

@media (max-width: 767px) {
  .field { --field-pad-x: 16px; --field-pad-y: 10px; }
  .field__clear { --icon-size: 16px; }
}

}

/* End */


/* Start:/local/templates/ekspopipe/partials/logo-card/style.css?1789457144941*/
@layer ui {

/* ==========================================================================
   Блок: Logo Card — логотип клиента

   Пропорции и высоту задаёт секция: на широких экранах карточка держит
   соотношение из макета, на планшете и мобиле — фиксированную высоту.
   ========================================================================== */

.logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: 12px;
  background: var(--c-white);
}

.logo-card__media {
  display: block;
  width: 100%;
  height: 100%;
}

.logo-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* В макете логотипы обесцвечены */
  filter: grayscale(1);
}

.logo-card--cover .logo-card__image { object-fit: cover; }

}

/* End */


/* Start:/local/templates/ekspopipe/partials/pagination/style.css?17894571441886*/
@layer ui {

/* ==========================================================================
   Блок: Пагинация
   ========================================================================== */

.pagination {
  --pg-fs:   16px;
  --pg-gap:  16px;
  --pg-icon: 20px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
}

.pagination__list {
  display: flex;
  align-items: center;
  gap: var(--pg-gap);
}

.pagination__page,
.pagination__gap {
  color: var(--c-black);
  font-size: var(--pg-fs);
  font-weight: 400;
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  transition: color var(--transition);
}

a.pagination__page:hover { color: var(--c-main); }

.pagination__page.is-current {
  padding: 7px 10px;
  border-radius: 6px;
  background: var(--c-active);
  color: var(--c-white);
}

.pagination__arrow {
  --icon-size: var(--pg-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--c-black);
  transition: color var(--transition);
}

.pagination__arrow:hover { color: var(--c-main); }

.pagination__arrow.is-disabled {
  color: var(--c-grey);
  pointer-events: none;
}

.pagination__arrow--prev .icon { transform: rotate(90deg); }
.pagination__arrow--next .icon { transform: rotate(-90deg); }

/* --- Адаптив -------------------------------------------------------------- */
@media (max-width: 1727px) {
  .pagination {
    --pg-fs:   14px;
    --pg-gap:  12px;
    --pg-icon: 14px;
  }
}

@media (max-width: 767px) {
  .pagination { --pg-gap: 16px; }

  /* В макете кнопка под навигацией не ужимается вместе с Secondary/L */
  .btn.pagination__more {
    --btn-pad-x: 20px;
    --btn-pad-y: 12px;
    --btn-fs:    14px;
  }
}

}

/* End */


/* Start:/local/templates/ekspopipe/partials/product-card/style.css?17894571442909*/
@layer ui {

/* ==========================================================================
   Блок: Product Card
   ========================================================================== */

.product-card {
  --pc-pad:        20px;
  --pc-media:      284px;  /* высота области с картинкой */
  --pc-action-gap: 8px;
  --pc-body-gap:   16px;
  --pc-title:      20px;

  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  background: var(--c-white);
  overflow: hidden;
  transition: box-shadow var(--transition);
}

.product-card:hover { box-shadow: var(--shadow-card); }

/* --- Медиа ---------------------------------------------------------------- */
.product-card__media {
  position: relative;
  flex: 0 0 auto;
  height: var(--pc-media);
  background: var(--c-bg);
}

.product-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.product-card__actions {
  position: absolute;
  z-index: 2;
  inset: var(--pc-pad) var(--pc-pad) auto auto;
  display: flex;
  gap: var(--pc-action-gap);
}

/* Оформление и размеры — из UI-Kit (.btn--catalog в blocks/button),
   здесь остаётся только расположение поверх картинки */
.product-card__action { flex: 0 0 auto; }

/* --- Текст ---------------------------------------------------------------- */
.product-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--pc-body-gap);
  padding: 12px var(--pc-pad) var(--pc-pad);
}

.product-card__title {
  min-height: calc(var(--pc-title) * var(--lh-tight) * 2);
  color: var(--c-black);
  font-size: var(--pc-title);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-base);
  transition: color var(--transition);
}

.product-card:hover .product-card__title,
.product-card.is-active .product-card__title { color: var(--c-main); }

.product-card.is-active .product-card__action { background: var(--c-main); color: var(--c-white); }

/* --- Адаптив --------------------------------------------------------------- */
@media (max-width: 1727px) {
  .product-card {
    --pc-pad:        16px;
    --pc-media:      241px;
    --pc-action-gap: 4px;
    --pc-body-gap:   12px;
    --pc-title:      16px;
  }

  .product-card__body { padding-top: 4px; }
}

@media (max-width: 1279px) {
  .product-card {
    --pc-pad:      12px;
    --pc-media:    200px;
    --pc-body-gap: 10px;
    --pc-title:    14px;
  }

  .product-card__body { padding-top: 2px; }
}

@media (max-width: 767px) {
  .product-card {
    --pc-media:    176px;
    --pc-body-gap: 8px;
    --pc-title:    12px;
  }
}

}

/* End */


/* Start:/local/templates/ekspopipe/partials/promo-card/style.css?17894571441012*/
@layer ui {

/* ==========================================================================
   Блок: Card catalog text (промо-плашка)
   ========================================================================== */

.promo-card {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 32px;
  border-radius: var(--r-xl);
  background: var(--c-bg);
  transition: background-color var(--transition);
}

.promo-card:hover { background: var(--c-light-blue); }

.promo-card__title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--c-main);
  font-size: 36px;
}

.promo-card__more { flex: 0 0 auto; }

/* --- Адаптив --------------------------------------------------------------- */
@media (max-width: 1727px) {
  .promo-card { gap: 20px; padding: 24px 32px; }
  .promo-card__title { font-size: 28px; }
}

@media (max-width: 1279px) {
  .promo-card { gap: 16px; padding: 16px; }
  .promo-card__title { font-size: 24px; }
}

@media (max-width: 767px) {
  .promo-card { gap: 12px; }
}

}

/* End */


/* Start:/local/templates/ekspopipe/partials/review-card/style.css?17931938803716*/
@layer ui {

/* ==========================================================================
   Блок: Отзыв Card — вид страницы /otzyvy/ (1920 / 1440 / 1024 / 375)

   Текст сверху, снизу плашка с автором и должностью и квадратное фото
   справа. Минимальную высоту задаёт секция через --review-card-h.
   ========================================================================== */

.review-card {
  --review-pad:         12px;
  --review-gap:         12px;  /* текст ↔ плашка автора */
  --review-text-pad:    20px;
  --review-person-gap:  12px;  /* плашка ↔ фото */
  --review-info-pad:    20px;
  --review-info-gap:    12px;
  --review-info-bg:     #F7F8FB;
  --review-photo:       134px;
  --review-author-fs:   18px;
  --review-job-fs:      16px;

  display: flex;
  flex-direction: column;
  gap: var(--review-gap);
  min-height: var(--review-card-h, 0px);
  padding: var(--review-pad);
  border-radius: 20px;  /* по UI-kit 20px на всех брейкпоинтах, --r-xl на мобиле 10px */
  background: var(--c-white);
}

/* Поле «Заказ» отключено — стили плашки оставлены на случай возврата
.review-card__tag.tag {
  align-self: flex-start;
  width: 286px;
  max-width: 100%;
  font-size: 16px;
}
*/

.review-card__body {
  flex: 1 0 auto;
  padding: var(--review-text-pad);
}

.review-card__text {
  color: var(--c-text);
  font-size: var(--fs-body-m);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  overflow-wrap: break-word;
}

.review-card__person {
  display: flex;
  align-items: stretch;
  gap: var(--review-person-gap);
}

.review-card__info {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--review-info-gap);
  min-width: 0;
  min-height: var(--review-photo);
  padding: var(--review-info-pad);
  border-radius: 12px;
  background: var(--review-info-bg);
  overflow-wrap: break-word;
}

.review-card__author {
  color: var(--c-black);
  font-size: var(--review-author-fs);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-base);
}

.review-card__job {
  color: var(--c-text);
  font-size: var(--review-job-fs);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
}

.review-card__photo {
  display: block;
  flex: none;
  width: var(--review-photo);
  height: var(--review-photo);
  border-radius: 12px;
  overflow: hidden;
}

.review-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Адаптив --------------------------------------------------------------- */

/* Laptop 1440 */
@media (max-width: 1727px) {
  .review-card {
    --review-pad:         10px;
    --review-text-pad:    14px;
    --review-person-gap:  10px;
    --review-info-pad:    14px;
    --review-info-gap:    8px;
    --review-photo:       102px;
    --review-author-fs:   14px;
    --review-job-fs:      14px;
  }

  /* .review-card__tag.tag { width: 249px; font-size: 14px; } */
}

/* Mobile 375 — высота по контенту, фото — квадрат по высоте плашки */
@media (max-width: 767px) {
  .review-card {
    --review-pad:         8px;
    --review-gap:         16px;
    --review-text-pad:    10px;
    --review-person-gap:  8px;
    --review-info-pad:    10px;
    --review-info-gap:    8px;
    --review-author-fs:   14px;
    --review-job-fs:      12px;
  }

  .review-card__body { flex: none; }

  .review-card__info { min-height: 0; }

  .review-card__photo {
    width: auto;
    height: auto;
    aspect-ratio: 1;
  }
}

}

/* End */


/* Start:/local/templates/ekspopipe/partials/search/style.css?17894571442757*/
@layer ui {

/* ==========================================================================
   Блок: Search container
   Состояния: default / hover / focused / filled-in
   ========================================================================== */

.search {
  --search-fs:       16px;
  --search-btn:      50px;
  --search-btn-icon: 20px;
  --search-border:   var(--c-light-blue);

  display: flex;
  align-items: center;
  width: 100%;
  padding: 2px 2px 2px 16px;
  border: 1px solid var(--search-border);
  border-radius: var(--r-md);
  background: var(--c-white);
  transition: border-color var(--transition);
}

.search__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-black);
  font-size: var(--search-fs);
  font-weight: 400;
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
}

.search__input:focus { outline: none; }

.search__input::placeholder {
  color: var(--c-grey);
  opacity: 1;
}

/* Системный крестик Safari/Chrome мешает своему — прячем */
.search__input::-webkit-search-cancel-button { display: none; }

/* Крестик появляется, когда в поле есть каретка или текст */
.search__clear {
  --icon-size: var(--search-btn-icon);
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-inline: 12px;
  color: var(--c-black);
  transition: opacity var(--transition);
}

.search__clear:hover { opacity: .7; }

.search:focus-within .search__clear,
.search.is-focused .search__clear,
.search.is-filled .search__clear,
.search.has-value .search__clear { display: flex; }

.search__submit {
  --icon-size: var(--search-btn-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--search-btn);
  height: var(--search-btn);
  border-radius: 6px;
  background: var(--c-secondary);
  color: var(--c-white);
  transition: background-color var(--transition);
}

.search__submit:hover  { background: var(--c-hover); }
.search__submit:active { background: var(--c-active); }

/* --- Состояния ----------------------------------------------------------- */
.search:hover,
.search.is-hover { --search-border: var(--c-hover); }

.search:focus-within,
.search.is-focused,
.search.is-filled { --search-border: var(--c-active); }

/* --- Адаптив -------------------------------------------------------------- */

/* Laptop 1440 и ниже — в макете один общий размер */
@media (max-width: 1727px) {
  .search {
    --search-fs:  14px;
    --search-btn: 44px;
  }
}

}

/* End */


/* Start:/local/templates/ekspopipe/partials/slider/style.css?17894571442755*/
@layer ui {

/* ==========================================================================
   Блок: Slider (Swiper)
   ========================================================================== */

.slider {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.slider__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.slider__title { color: var(--c-main); }

.slider__viewport {
  width: 100%;
  overflow: hidden;
}

/* Слайд по контенту: ширину задаёт содержимое или модификатор ниже */
.slider__slide { height: auto; }

.slider--cards .slider__slide { width: 320px; }
.slider--wide  .slider__slide { width: 600px; }
.slider--mini  .slider__slide { width: 225px; }

@media (max-width: 1727px) {
  .slider--cards .slider__slide { width: 242px; }
  .slider--wide  .slider__slide { width: 450px; }
  .slider--mini  .slider__slide { width: 207px; }
}

@media (max-width: 1279px) {
  .slider--cards .slider__slide { width: 209px; }
  .slider--wide  .slider__slide { width: 310px; }
  .slider--mini  .slider__slide { width: 163px; }
}

@media (max-width: 767px) {
  .slider--cards .slider__slide { width: 170px; }
  .slider--wide  .slider__slide { width: 280px; }
  .slider--mini  .slider__slide { width: 140px; }
}

/* --- Навигация ------------------------------------------------------------ */
.slider__nav-group {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.slider__nav-group--bottom { justify-content: flex-end; }

.slider__nav {
  --icon-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--control-l);
  height: var(--control-l);
  border-radius: var(--r-pill);
  background: var(--c-opacity-blue);
  color: var(--c-main);
  transition: background-color var(--transition), color var(--transition), opacity var(--transition);
}

.slider__nav:hover  { background: var(--c-hover); color: var(--c-white); }
.slider__nav:active { background: var(--c-active); color: var(--c-white); }

.slider__nav.swiper-button-disabled { opacity: .4; pointer-events: none; }

/* --- Пагинация ------------------------------------------------------------ */
.slider__pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.slider__pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--c-opacity-blue);
  opacity: 1;
  transition: background-color var(--transition), width var(--transition);
}

.slider__pagination .swiper-pagination-bullet-active {
  width: 24px;
  background: var(--c-main);
}

}

/* End */


/* Start:/local/templates/ekspopipe/partials/snackbar/style.css?17931954932871*/
@layer ui {

/* ==========================================================================
   Блок: Info window с действием — тёмная плашка внизу экрана
   (Figma: info window, макет «Избранное»)
   ========================================================================== */

.snackbar {
  --snackbar-fs:   var(--fs-cap-l);
  --snackbar-icon: 20px;

  /* Поверх шапки (100), окна фильтра (110) и светлой плашки (120) */
  position: fixed;
  z-index: 130;
  bottom: var(--space-40);
  /* По центру без left: 50% — иначе ширина плашки ограничена половиной экрана */
  left: 0;
  right: 0;
  width: fit-content;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  max-width: calc(100% - var(--gap-page) * 2);
  padding: 14px 24px 14px 14px;
  border-radius: var(--r-md);
  background: var(--c-black);
  color: var(--c-white);
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, .19));
  transform: translateY(16px);
  opacity: 0;
  transition: transform var(--transition), opacity var(--transition);
}

.snackbar.is-open {
  transform: none;
  opacity: 1;
}

.snackbar__message {
  display: flex;
  align-items: center;
  gap: inherit;
  min-width: 0;
}

.snackbar__icon {
  --icon-size: var(--snackbar-icon);
  flex: 0 0 auto;
  color: var(--c-opacity-blue);
}

.snackbar__text {
  font-size: var(--snackbar-fs);
  font-weight: 400;
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
}

/* Mini button */
.snackbar__action {
  flex: 0 0 auto;
  padding: 4px 10px 5px;
  border-radius: var(--r-sm);
  background: var(--c-white-40);
  color: var(--c-white);
  font-size: 12px;
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-base);
  white-space: nowrap;
  transition: background-color var(--transition);
}

.snackbar__action:hover { background: rgba(255, 255, 255, .5); }

/* --- Адаптив -------------------------------------------------------------- */
@media (max-width: 1727px) {
  .snackbar {
    --snackbar-fs:   var(--fs-cap-m);
    --snackbar-icon: 14px;
    padding-block: 12px;
  }
}

/* Mobile: кнопка уходит под текст на всю ширину */
@media (max-width: 767px) {
  .snackbar {
    --snackbar-fs: 12px;
    bottom: var(--space-24);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
    padding: 8px 12px 8px 8px;
    border-radius: var(--r-sm);
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, .19));
  }

  .snackbar__message { gap: var(--space-8); }

  .snackbar__action {
    background: var(--c-white-20);
    color: var(--c-white-80);
  }
}

@media (prefers-reduced-motion: reduce) {
  .snackbar { transition: opacity var(--transition); transform: none; }
}

}

/* End */


/* Start:/local/templates/ekspopipe/partials/tag/style.css?17894571442885*/
@layer ui {

/* ==========================================================================
   Блок: Tag / Tab
   outline — таблетка с обводкой   (Tab block)
   glass   — полупрозрачная плашка (Tab Opacity)
   soft    — светло-синяя плашка   (Tab Type of product)
   ========================================================================== */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: var(--ls-base);
  transition: background-color var(--transition), border-color var(--transition),
              color var(--transition);
}

.tag__icon { --icon-size: 24px; }

/* --- outline ------------------------------------------------------------- */
.tag--outline {
  padding: 12px 24px;
  border: 1px solid var(--c-grey-60);
  border-radius: 58px;
  color: var(--c-grey);
  font-size: 24px;
  font-weight: 400;
  line-height: var(--lh-base);
}

.tag--outline.tag--white {
  border-color: var(--c-white-80);
  color: var(--c-white-80);
}

a.tag--outline:hover { border-color: var(--c-main); color: var(--c-main); }
a.tag--outline.tag--white:hover { border-color: var(--c-white); color: var(--c-white); }

/* --- glass --------------------------------------------------------------- */
.tag--glass {
  padding: 10px 16px;
  border-radius: var(--r-md);
  background: var(--c-white-20);
  color: var(--c-white);
  font-size: var(--fs-cap-l);
  font-weight: 500;
  line-height: var(--lh-tight);
}

a.tag--glass:hover { background: rgba(255, 255, 255, .32); }

/* --- soft ---------------------------------------------------------------- */
.tag--soft {
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: var(--c-light-blue);
  color: var(--c-main);
  font-size: var(--fs-cap-l);
  font-weight: 400;
  line-height: var(--lh-base);
}

a.tag--soft:hover { background: var(--c-opacity-blue); }

/* Выбранный таб — быстрые ссылки каталога и сортировка в окне фильтра */
.tag--soft.is-active { background: var(--c-hover); color: var(--c-white); }
a.tag--soft.is-active:hover { background: var(--c-active); }

/* --- Адаптив ------------------------------------------------------------- */
@media (max-width: 1727px) {
  .tag--outline { padding: 7px 16px; font-size: 16px; }
  .tag--soft    { padding: 7px 10px; }
  .tag--glass   { padding: 10px 12px; gap: 8px; }
  .tag__icon    { --icon-size: 16px; }
}

@media (max-width: 1279px) {
  .tag--outline { padding: 6px 12px; font-size: 14px; }
}

@media (max-width: 767px) {
  .tag--outline { padding: 5px 10px; border-width: .7px; font-size: 12px; }
  .tag--soft    { padding: 6px 8px; border-radius: 4px; }
  .tag--glass   { padding: 8px; }
  .tag__icon    { --icon-size: 13px; }
}

}

/* End */


/* Start:/local/templates/ekspopipe/partials/text-card/style.css?1789457144859*/
@layer ui {

/* ==========================================================================
   Блок: Text card
   ========================================================================== */

.text-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 32px 32px;
  border-radius: var(--r-xl);
  background: var(--c-white);
}

.text-card__title {
  color: var(--c-main);
  font-size: 28px;
}

.text-card__text {
  color: var(--c-text);
  font-size: var(--fs-body-m);
  line-height: var(--lh-base);
}

/* --- Адаптив --------------------------------------------------------------- */
@media (max-width: 1727px) {
  .text-card { gap: 8px; padding: 20px 24px 24px; }
  .text-card__title { font-size: 24px; }
}

@media (max-width: 767px) {
  .text-card { padding: 16px 16px 18px; }
  .text-card__title { font-size: 20px; }
}

}

/* End */


/* Start:/local/templates/ekspopipe/partials/toast/style.css?17894571441740*/
@layer ui {

/* ==========================================================================
   Блок: Info window — плашка-уведомление
   Выезжает справа налево, поэтому позиционируется фиксированно.
   ========================================================================== */

.toast {
  --toast-fs:   var(--fs-cap-l);
  --toast-icon: 20px;

  /* Поверх всего: шапки (100) и окна фильтра на мобиле (110) */
  position: fixed;
  z-index: 120;
  top: calc(var(--header-h) + var(--space-16));
  right: var(--gap-page);
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  max-width: calc(100% - var(--gap-page) * 2);
  padding: 14px 24px 14px 14px;
  border-radius: var(--r-md);
  background: var(--c-light-blue);
  color: var(--c-black);
  transform: translateX(calc(100% + var(--gap-page)));
  transition: transform var(--transition), opacity var(--transition);
  opacity: 0;
}

.toast.is-open {
  transform: translateX(0);
  opacity: 1;
}

.toast__icon {
  --icon-size: var(--toast-icon);
  flex: 0 0 auto;
  color: var(--c-main);
}

.toast__text {
  font-size: var(--toast-fs);
  font-weight: 400;
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
}

/* --- Адаптив -------------------------------------------------------------- */
@media (max-width: 1727px) { .toast { --toast-icon: 18px; padding: 12px 20px 12px 12px; } }
@media (max-width: 767px)  { .toast { --toast-icon: 16px; padding: 10px 16px 10px 10px; } }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity var(--transition); transform: none; }
}

}

/* End */


/* Start:/local/templates/ekspopipe/sections/header/style.css?179319549330785*/
@layer ui {

  /* ==========================================================================
   Блок: Header
   ========================================================================== */

  /* Шапка закреплена: высота фиксирована по брейкпоинтам (--header-h),
   на неё же опирается верхний отступ контента в layout.css */
  .header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
  }

  /* --------------------------------------------------------------------------
   Верхняя строка
   -------------------------------------------------------------------------- */
  .header__top {
    background: var(--c-white);
  }

  .header__top-inner {
    /* Нижний отступ строки нужен ещё и выпадающему списку: он начинается
     ровно от нижнего края прехедера, а не от края пункта меню */
    --header-pre-pt: 12px;
    --header-pre-pb: 12px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: var(--container-max);
    margin-inline: auto;
    padding: var(--header-pre-pt) var(--gap-page) var(--header-pre-pb);
  }

  .header__top-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
  }

  .header__top-menu {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    gap: 44px;
    flex: 1 1 auto;
    justify-content: center;
  }

  /* --- Выпадающий список пункта инфо-меню ---------------------------------- */
  .header__top-item {
    position: relative;
    display: flex;
    align-items: center;
  }

  .header__submenu {
    position: absolute;
    top: calc(100% + var(--header-pre-pb));
    left: -22px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: calc(100% + 44px);
    padding: 0 22px 22px;
    border-radius: 0 0 12px 12px;
    background: var(--c-white);
    opacity: 0;
    transition: opacity .15s ease;
  }

  .header__submenu.is-open {
    opacity: 1;
  }

  /* Мостик через зазор между пунктом и панелью: без него курсор по дороге
   вниз выходит из пункта и список закрывается */
  .header__submenu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--header-pre-pb);
  }

  .header__submenu-link {
    color: var(--c-text);
    font-size: var(--fs-body-xs);
    line-height: var(--lh-base);
    white-space: nowrap;
  }

  .header__submenu-link:hover,
  .header__submenu-link:focus-visible {
    color: var(--c-active);
  }

  .header__contacts {
    display: flex;
    align-items: center;
    gap: 32px;
    flex: 0 0 auto;
  }

  .header__contact {
    color: var(--c-text);
  }

  .header__contact:hover {
    color: var(--c-main);
  }

  /* Город, MAX и «Оставить заявку» — кнопки No bg, но в шапке без подчёркивания */
  .header__top .btn--nobg {
    padding-bottom: 0;
  }

  /* .header__top .btn--nobg::after {
    content: none;
  } */

  .header__burger {
    --icon-size: 20px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-md);
    color: var(--c-main);
    transition: background-color var(--transition), color var(--transition);
  }

  /* Крестик в макете заметно мельче бургера: занимает около половины
   иконочного бокса, а не весь его */
  .header__burger-icon--close {
    display: none;
    --icon-size: 12px;
  }

  .header__burger.is-open .header__burger-icon {
    display: none;
  }

  .header__burger.is-open .header__burger-icon--close {
    display: block;
  }

  /* На мобиле открытый бургер становится белой кнопкой, как в макете */
  .header__burger--dark.is-open {
    background: var(--c-white);
    color: var(--c-hover);
  }

  .header__burger--dark .header__burger-icon--close {
    --icon-size: 10px;
  }

  /* --------------------------------------------------------------------------
   Основная строка
   -------------------------------------------------------------------------- */
  .header__main {
    background: var(--c-main);
  }

  .header__main-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: var(--container-max);
    margin-inline: auto;
    padding: 16px var(--gap-page);
  }

  .header__logo {
    flex: 0 0 auto;
    color: var(--c-white);
    font-size: var(--fs-h5);
    font-weight: 500;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-base);
    white-space: nowrap;
  }

  /* Дубль логотипа для белой строки: включается только на мобиле */
  .header__logo--top {
    display: none;
  }

  .header__nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .header__nav::-webkit-scrollbar {
    display: none;
  }

  .header__nav-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    height: var(--control-l);
    padding-inline: 20px;
    border-radius: var(--r-md);
    background: var(--c-secondary);
    color: var(--c-white);
    font-size: var(--fs-cap-l);
    font-weight: 500;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-base);
    white-space: nowrap;
    transition: background-color var(--transition);
  }

  .header__nav-link:hover {
    background: var(--c-hover);
  }

  .header__nav-link:active,
  .header__nav-link.is-active {
    background: var(--c-active);
  }

  .header__nav-icon {
    --icon-size: 24px;
  }

  .header__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
  }

  .header__action {
    --icon-size: 24px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--control-l);
    height: var(--control-l);
    border-radius: var(--r-md);
    color: var(--c-white);
    transition: background-color var(--transition);
  }

  /* Иконки спрайта красятся через currentColor — цвет задаётся color, а не fill */
  .header__action .icon {
    color: var(--c-opacity-blue);
  }

  /* Наведение и клик — один и тот же полупрозрачный фон (макет «Хедер»);
   после перехода на страницу кнопка возвращается в обычное состояние */
  .header__action:hover,
  .header__action:active {
    background: var(--c-white-20);
  }

  /* Разделитель рисуется псевдоэлементом, а не отдельным тегом: тогда он
   пропадает вместе со скрытой кнопкой и не ломает ряд на другом брейкпоинте.
   Отступ 4px с каждой стороны — как в макете. */
  .header__action+.header__action {
    margin-left: 5px;
  }

  .header__action+.header__action::before {
    content: '';
    position: absolute;
    top: 50%;
    right: calc(100% + 4px);
    width: 1px;
    height: 24px;
    background: var(--c-white-20);
    transform: translateY(-50%);
  }

  /* Звонок и MAX появляются только на мобиле, поэтому выше по брейкпоинтам
   первой видимой кнопкой остаётся поиск — и разделитель перед ней лишний */
  .header__action--call,
  .header__action--max {
    display: none;
  }

  @media (min-width: 768px) {
    .header__action+.header__action--search {
      margin-left: 0;
    }

    .header__action+.header__action--search::before {
      content: none;
    }
  }

  /* --------------------------------------------------------------------------
   Поиск

   Занимает всю основную строку вместо бургера, логотипа и иконок.
   В макете нарисован только на мобиле — на широких экранах та же механика
   в размерах строки: кнопка и поле высотой --control-l.
   -------------------------------------------------------------------------- */
  .header__search {
    display: none;
  }

  .header__main-inner.is-search .header__burger,
  .header__main-inner.is-search .header__logo,
  .header__main-inner.is-search .header__nav,
  .header__main-inner.is-search .header__actions {
    display: none;
  }

  .header__main-inner.is-search .header__search {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .header__search-back,
  .header__search-submit {
    --icon-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--control-l);
    height: var(--control-l);
    border-radius: var(--r-md);
  }

  .header__search-back {
    background: var(--c-white);
    color: var(--c-hover);
  }

  .header__search-submit {
    color: var(--c-white);
    transition: background-color var(--transition);
  }

  .header__search-submit:hover {
    background: var(--c-hover);
  }

  .header__search-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 auto;
    min-width: 0;
    height: var(--control-l);
    padding: 4px 4px 4px 20px;
    border-radius: var(--r-md);
    background: var(--c-white-20);
  }

  .header__search-input {
    flex: 1 1 auto;
    outline: none;
    min-width: 0;
    color: var(--c-white);
    font-size: var(--fs-cap-l);
    font-weight: 500;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-base);
  }

  .header__search-input::placeholder {
    color: var(--c-white);
  }

  .header__search-input::-webkit-search-cancel-button {
    display: none;
  }

  /* --------------------------------------------------------------------------
   Слои внутри шапки, сверху вниз:
     4 — прехедер: его выпадающие списки должны лежать над синей строкой
     3 — панель бургера: на планшете она накрывает синюю строку
     2 — синяя строка
     1 — мега-меню и полосы товаров, они начинаются ниже шапки
     0 — затемнение
   -------------------------------------------------------------------------- */
  .header__top {
    position: relative;
    z-index: 4;
  }

  .header__menu {
    z-index: 3;
  }

  .header__main {
    position: relative;
    z-index: 2;
  }

  .header__catalog,
  .header__promo {
    z-index: 1;
  }

  .header__dim {
    position: fixed;
    inset: 0;
    z-index: 0;
    /* Затемнение лежит внутри шапки: без этого курсор над ним считался бы
     курсором внутри шапки и полоса не закрывалась бы */
    pointer-events: none;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .2s ease;
  }

  .header__dim.is-open {
    opacity: 1;
  }

  /* --------------------------------------------------------------------------
   Полоса товаров раздела

   Выпадает по наведению на раздел каталога и подвёрстывается под шапку.
   -------------------------------------------------------------------------- */
  .header__promo {
    --promo-gap: 20px;
    --promo-pt: 12px;
    --promo-pb: 40px;
    --promo-card-p: 20px;

    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--c-main);
    border-radius: 0 0 var(--r-xl) var(--r-xl);
    opacity: 0;
    transition: opacity .2s ease;
  }

  .header__promo.is-open {
    opacity: 1;
  }

  .header__promo-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--promo-gap);
    max-width: var(--container-max);
    margin-inline: auto;
    padding: var(--promo-pt) var(--gap-page) var(--promo-pb);
  }

  .header__promo-card {
    display: flex;
    width: calc((100% - (var(--promo-gap) * 6))/7);
    /*flex: 1 1 0;*/
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--c-white);
    border-radius: var(--r-xl);
    -webkit-border-radius: var(--r-xl);
    -moz-border-radius: var(--r-xl);
    -ms-border-radius: var(--r-xl);
    -o-border-radius: var(--r-xl);
  }

  .header__promo-media {
    display: block;
    aspect-ratio: 1;
    width: 100%;
  }

  .header__promo-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .header__promo-title {
    padding: 0 var(--promo-card-p) var(--promo-card-p);
    color: var(--c-text);
    font-size: var(--fs-body-m);
    font-weight: 500;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-base);
    transition: color var(--transition);
  }

  .header__promo-card:hover .header__promo-title {
    color: var(--c-hover);
  }

  /* Раздел, для которого открыта полоса */
  .header__nav-link.is-promo-open {
    background: var(--c-white);
    color: var(--c-hover);
  }

  /* --------------------------------------------------------------------------
   Мега-меню каталога

   Панель занимает всё пространство под закреплённой шапкой. Слева — список
   категорий со своим скроллом, справа — подкатегории активной категории.
   -------------------------------------------------------------------------- */
  .header__nav-link--catalog {
    cursor: pointer;
  }

  .header__nav-icon--close {
    display: none;
  }

  .header__nav-link--catalog.is-open {
    background: var(--c-white);
    color: var(--c-hover);
  }

  .header__nav-link--catalog.is-open .header__nav-icon {
    display: none;
  }

  .header__nav-link--catalog.is-open .header__nav-icon--close {
    display: block;
  }

  .header__catalog {
    --catalog-side: 318px;
    /* колонка категорий вместе со скроллбаром */
    --catalog-cols: 3;
    --catalog-gap: 20px;
    --catalog-pad-y: 24px;
    --catalog-horizontal-pad: 60px;
    --catalog-vertical-pad: 10px;

    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--c-bg);
    opacity: 0;
    transition: opacity .2s ease;
  }

  .header__catalog.is-open {
    opacity: 1;
  }

  .header__catalog-inner {
    display: flex;
    gap: var(--catalog-gap);
    align-items: flex-start;
    height: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding: var(--catalog-pad-y) var(--gap-page);
  }

  /* --- Список категорий ---------------------------------------------------- */
  .header__catalog-list {
    display: flex;
    flex: 0 0 var(--catalog-side);
    flex-direction: column;
    gap: 8px;
    align-self: stretch;
    width: var(--catalog-side);
    padding-right: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--c-grey) transparent;
  }

  .header__catalog-list::-webkit-scrollbar {
    width: 8px;
  }

  .header__catalog-list::-webkit-scrollbar-track {
    background: transparent;
  }

  .header__catalog-list::-webkit-scrollbar-thumb {
    border-radius: var(--r-full);
    background: var(--c-grey);
  }

  .header__catalog-item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    padding: 16px 20px;
    border-radius: 8px;
    /* в макете фиксированный на всех брейкпоинтах */
    background: var(--c-white);
    color: var(--c-text);
    font-size: var(--fs-cap-l);
    font-weight: 500;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-base);
    text-align: left;
    transition: background-color var(--transition), color var(--transition);
  }

  .header__catalog-item-text {
    flex: 1 1 auto;
  }

  .header__catalog-item-icon {
    --icon-size: 18px;
    transform: rotate(-90deg);
  }

  .header__catalog-item:hover {
    color: var(--c-main);
  }

  .header__catalog-item.is-active {
    background: var(--c-light-blue);
    color: var(--c-active);
  }

  /* --- Подкатегории -------------------------------------------------------- */
  .header__catalog-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 20px;
    align-self: stretch;
    min-width: 0;
    padding-block: 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .header__catalog-title {
    padding-inline: var(--catalog-horizontal-pad);
    color: var(--c-black);
    font-size: 28px;
    font-weight: 500;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-base);
  }

  a.header__catalog-title:hover {
    color: var(--c-main);
  }

  .header__catalog-groups {
    display: grid;
    grid-template-columns: repeat(var(--catalog-cols), minmax(0, 1fr));
    gap: var(--catalog-gap);
  }

  .header__catalog-group {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-inline: var(--catalog-horizontal-pad);
    padding-block: var(--catalog-vertical-pad);
  }

  .header__catalog-group-title {
    color: var(--c-black);
    font-size: 24px;
    font-weight: 500;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-base);
  }

  a.header__catalog-group-title:hover {
    color: var(--c-main);
  }

  .header__catalog-links {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .header__catalog-link {
    color: var(--c-text);
    font-size: var(--fs-body-m);
    line-height: var(--lh-base);
  }

  .header__catalog-link:hover {
    color: var(--c-main);
  }

  /* --------------------------------------------------------------------------
   Панель бургера

   На планшете выпадает из-под прехедера и показывает разделы в три колонки,
   на мобиле — из-под всей шапки, с каталогом-аккордеоном и контактами.
   -------------------------------------------------------------------------- */
  .header__menu {
    --menu-top: 38px;
    /* высота прехедера на планшете */
    --menu-pad-y: 12px;
    --menu-group-pad: 40px;
    --menu-group-gap: 32px;
    --menu-link-gap: 20px;

    position: fixed;
    top: var(--menu-top);
    left: 0;
    right: 0;
    max-height: calc(100dvh - var(--menu-top));
    background: var(--c-bg);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    transition: opacity .2s ease;
  }

  .header__menu.is-open {
    opacity: 1;
  }

  .header__menu-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: var(--container-max);
    margin-inline: auto;
    padding: var(--menu-pad-y) var(--gap-page);
  }

  /* Всё, кроме разделов, показывается только на мобиле */
  .header__menu-card,
  .header__menu-quick,
  .header__menu-city,
  .header__menu-catalog {
    display: none;
  }

  /* --- Карточка контактов (мобила) ----------------------------------------- */
  .header__menu-card {
    flex-direction: column;
    gap: 16px;
    padding: 14px 16px;
    border-radius: var(--r-md);
    background: var(--c-light-blue);
  }

  .header__menu-card-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }

  .header__menu-card-contacts,
  .header__menu-card-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--c-black);
    font-size: 14px;
    font-weight: 500;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-base);
  }

  /* Разделитель между контактами и адресом */
  .header__menu-card-info {
    padding-top: 16px;
    border-top: 1px solid var(--c-opacity-blue);
  }

  .header__menu-contact:hover {
    color: var(--c-hover);
  }

  /* В макете подпись у MAX крупнее обычной S-кнопки */
  .header__menu-card-max.btn {
    --btn-fs: 14px;
    --btn-gap: 4px;
    --btn-icon: 20px;
    flex: 0 0 auto;
  }

  /* --- Избранное и сравнение (мобила) -------------------------------------- */
  .header__menu-quick {
    gap: 8px;
  }

  .header__menu-quick-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 0;
    min-width: 0;
    padding: 4px 12px 4px 4px;
    border-radius: var(--r-md);
    background: var(--c-white);
  }

  .header__menu-quick-text {
    color: var(--c-main);
    font-size: 12px;
    font-weight: 500;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-base);
  }

  /* Кнопка внутри ссылки — оформление без собственной интерактивности */
  .header__menu-quick-item .btn {
    pointer-events: none;
  }

  .header__menu-quick-item:hover .btn {
    background: var(--c-light-blue);
    color: var(--c-hover);
  }

  /* --- Разделы ------------------------------------------------------------- */
  .header__menu-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .header__menu-group {
    display: flex;
    flex-direction: column;
    gap: var(--menu-group-gap);
    align-self: start;
    padding: var(--menu-group-pad);
  }

  .header__menu-title {
    color: var(--c-black);
    font-size: 20px;
    font-weight: 500;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-base);
  }

  a.header__menu-title:hover {
    color: var(--c-main);
  }

  .header__menu-list {
    display: flex;
    flex-direction: column;
    gap: var(--menu-link-gap);
  }

  .header__menu-link {
    color: var(--c-text);
    font-size: 16px;
    line-height: var(--lh-base);
  }

  .header__menu-link:hover {
    color: var(--c-main);
  }

  /* --- Каталог-аккордеон (мобила) ------------------------------------------ */
  .header__menu-catalog {
    flex-direction: column;
    gap: 16px;
  }

  .header__menu-acc {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .header__menu-acc-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border-radius: 8px;
    /* в макете фиксированный на всех брейкпоинтах */
    background: var(--c-white);
    color: var(--c-text);
    font-size: 14px;
    font-weight: 500;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-base);
    text-align: left;
    transition: background-color var(--transition), color var(--transition);
  }

  .header__menu-acc-text {
    flex: 1 1 auto;
  }

  .header__menu-acc-icon {
    --icon-size: 18px;
    transition: transform var(--transition);
  }

  /* Раскрытый пункт остаётся белым — в макете подложка больше не подсвечивается,
   меняется только цвет заголовка */
  .header__menu-acc-item.is-open .header__menu-acc-head {
    border-radius: 8px 8px 0 0;
    color: var(--c-active);
  }

  .header__menu-acc-item.is-open .header__menu-acc-icon {
    transform: rotate(180deg);
  }

  .header__menu-acc-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 16px 20px;
    border-radius: 0 0 8px 8px;
    background: var(--c-white);
  }

  .header__menu-more {
    align-self: center;
  }

  /* --------------------------------------------------------------------------
   Адаптив
   -------------------------------------------------------------------------- */

  /* Laptop 1440 */
  @media (max-width: 1727px) {
    .header__top-inner {
      --header-pre-pt: 10px;
      --header-pre-pb: 8px;
    }

    .header__top-menu {
      gap: 32px;
    }

    .header__submenu {
      padding-bottom: 18px;
    }

    /* В макете подпись у MAX, «Оставить заявку» и города на ступень крупнее XS.
     Двойной класс — чтобы перебить .btn--m.btn--nobg из блока button */
    .header__contacts .btn--nobg {
      --btn-fs: 16px;
    }

    .header__city.btn {
      --btn-fs: 16px;
    }

    .header__main-inner {
      padding-block: 12px;
    }

    .header__logo {
      font-size: 16px;
    }

    .header__nav {
      gap: 4px;
    }

    .header__nav-link {
      gap: 8px;
      padding-inline: 12px;
    }

    .header__nav-icon {
      --icon-size: 16px;
    }

    .header__action {
      --icon-size: 20px;
    }

    .header__search-back,
    .header__search-submit {
      --icon-size: 20px;
    }

    .header__catalog {
      --catalog-side: 334px;
      --catalog-gap: 12px;
      --catalog-horizontal-pad: 40px;
      --catalog-vertical-pad: 5px;
    }

    .header__catalog-title {
      font-size: 24px;
    }

    .header__catalog-group-title {
      font-size: 20px;
    }

    .header__promo {
      --promo-gap: 12px;
      --promo-pt: 8px;
      --promo-pb: 32px;
      --promo-card-p: 16px;
    }
  }

  /* Tablet 1024 — прячем инфо-меню, показываем бургер */
  @media (max-width: 1279px) {
    .header__top-inner {
      --header-pre-pt: 8px;
      --header-pre-pb: 6px;
    }

    .header__top-menu {
      display: none;
    }

    /* Бургер здесь — голая иконка, а не кнопка: она задаёт высоту строки */
    .header__burger {
      --icon-size: 24px;
      display: flex;
    }

    .header__contacts .btn--nobg {
      --btn-fs: var(--fs-body-xs);
      --btn-icon: 20px;
    }

    .header__city.btn {
      --btn-fs: var(--fs-body-xs);
      --btn-icon: 20px;
    }

    .header__main-inner {
      padding-block: 12px;
    }

    .header__logo {
      font-size: 14px;
    }

    .header__nav {
      justify-content: flex-start;
    }

    .header__catalog {
      --catalog-side: 317px;
      --catalog-cols: 2;
      --catalog-pad-y: 12px;
    }

    .header__catalog-item {
      padding: 14px 16px;
    }

    /* Полоса товаров здесь открывается кликом, у активного раздела крестик */
    .header__promo {
      --promo-gap: 12px;
      --promo-pt: 8px;
      --promo-pb: 24px;
      --promo-card-p: 12px;
    }

    .header__promo-title {
      font-size: 14px;
    }

    .header__nav-link.is-promo-open .header__nav-icon--close {
      display: block;
    }
  }

  /* Mobile 375 — белая строка с логотипом и телефоном, ниже синяя с кнопками */
  @media (max-width: 767px) {

    /* Верхняя строка: только логотип и телефон, всё остальное уезжает */
    .header__top-inner {
      --header-pre-pt: 8px;
      --header-pre-pb: 8px;
      gap: 12px;
    }

    .header__top-left .header__burger,
    .header__top-left .btn,
    .header__contacts .btn {
      display: none;
    }

    .header__logo--top {
      display: block;
      color: var(--c-main);
      font-size: 12px;
    }

    .header__contacts {
      gap: 12px;
    }

    .header__contact {
      font-size: 12px;
      font-weight: 500;
      line-height: var(--lh-tight);
    }

    .header__main-inner {
      gap: 8px;
      padding-block: 8px;
    }

    /* Планшетный бургер — голая иконка 24, мобильный — кнопка 50 с иконкой 24.
     Размер задаём явно: выше по каскаду у бургера стоит width/height auto */
    .header__burger--dark {
      --icon-size: 24px;
      display: flex;
      width: 50px;
      height: 50px;
      color: var(--c-opacity-blue);
    }

    .header__main-inner .header__logo {
      display: none;
    }

    /* логотип переехал в белую строку */
    .header__nav {
      display: none;
    }

    .header__catalog {
      display: none;
    }

    /* на мобиле каталог живёт в панели бургера */
    .header__actions {
      gap: 4px;
      margin-left: auto;
    }

    /* Панель бургера: из-под всей шапки, разделы в одну колонку с разделителями */
    .header__menu {
      --menu-top: var(--header-h);
      --menu-group-pad: 0px;
      --menu-group-gap: 20px;
      --menu-link-gap: 12px;
    }

    .header__menu-card,
    .header__menu-quick,
    .header__menu-city,
    .header__menu-catalog {
      display: flex;
    }

    .header__menu-city {
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    /* В макете кнопка «Изменить» компактнее обычной XS */
    .header__menu-city-change.btn {
      --btn-pad-x: 16px;
      --btn-pad-y: 8px;
      --btn-bg: var(--c-secondary);
    }

    .header__menu-groups {
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
    }

    .header__menu-group {
      padding-top: 16px;
      border-top: 1px solid var(--c-opacity-blue);
    }

    .header__menu-link {
      font-size: 14px;
    }

    /* Иконки и разделители в синей строке — не белые, а opacity blue */
    .header__action {
      --icon-size: 24px;
      width: 50px;
      height: 50px;
      color: var(--c-opacity-blue);
    }

    .header__action+.header__action::before {
      background: var(--c-opacity-blue);
    }

    .header__action--call,
    .header__action--max {
      display: flex;
    }

    .header__search-back,
    .header__search-submit {
      --icon-size: 24px;
      width: 50px;
      height: 50px;
    }

    .header__search-field {
      height: 50px;
      padding-left: 12px;
    }
  }

  @media (min-width: 768px) {
    .header__burger--dark {
      display: none !important;
    }
  }

}
/* End */


/* Start:/local/templates/ekspopipe/sections/footer/style.css?17895620928535*/
@layer ui {

  /* ==========================================================================
   Блок: Footer
   ========================================================================== */

  .footer {
    color: var(--c-white);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    overflow: hidden;
  }

  /* --------------------------------------------------------------------------
   Форма заявки
   -------------------------------------------------------------------------- */
  .footer__form {
    background: var(--c-secondary);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding-bottom: 20px;
  }

  .footer__form-inner {
    display: flex;
    gap: var(--gap-block);
    max-width: var(--container-max);
    margin-inline: auto;
    padding: var(--gap-page);
  }

  .footer__form-left {
    display: flex;
    flex: 1 1 50%;
    flex-direction: column;
    justify-content: space-between;
    gap: 44px;
    min-width: 0;
  }

  .footer__form-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 44px;
  }

  .footer__heading {
    color: var(--c-white);
    max-width: 734px;
  }

  .footer__form-text {
    max-width: 46ch;
    color: var(--c-white);
    font-size: var(--fs-body-l);
    line-height: var(--lh-base);
  }

  .footer__form-right {
    display: flex;
    flex: 1 1 50%;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    min-width: 0;
  }

  .footer__fields {
    display: flex;
    flex-direction: column;
    gap: 13px;
    width: 100%;
  }

  /* Согласие на обработку персональных данных */
  .footer__agree {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--c-white-80);
    font-size: var(--fs-cap-m);
    line-height: var(--lh-base);
    cursor: pointer;
  }

  .footer__agree-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .footer__agree-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: var(--c-white-20);
    transition: background-color var(--transition), border-color var(--transition);
  }

  .footer__agree-box::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--c-white);
    opacity: 0;
    transition: opacity var(--transition);
  }

  .footer__agree:hover .footer__agree-box { background: var(--c-white-40); }

  .footer__agree-input:checked ~ .footer__agree-box::before { opacity: 1; }

  .footer__agree-input:focus-visible ~ .footer__agree-box {
    outline: 2px solid var(--c-white);
    outline-offset: 2px;
  }

  .footer__agree.is-error .footer__agree-box { border-color: var(--c-red); }

  .footer__agree-text {
    flex: 1 1 0;
    min-width: 0;
  }

  .footer__agree-text a {
    color: var(--c-white);
    text-decoration: underline;
    text-underline-offset: .15em;
  }

  .footer__agree .field__error {
    flex-basis: 100%;
    padding-inline: 0;
  }

  /* --------------------------------------------------------------------------
   Колонки подвала
   -------------------------------------------------------------------------- */
  .footer__main {
    background: var(--c-main);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    margin-top: -20px;
  }

  .footer__cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: var(--container-max);
    margin-inline: auto;
  }

  .footer__col {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 40px 60px;
    min-width: 0;
  }

  .footer__col-title {
    color: var(--c-white);
  }

  .footer__contact-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .footer__text {
    color: var(--c-white);
    font-size: var(--fs-body-m);
    line-height: var(--lh-base);
  }

  .footer__phone {
    color: var(--c-white);
    font-size: var(--fs-body-m);
    font-weight: 500;
    line-height: var(--lh-tight);
  }

  .footer__phone:hover {
    color: var(--c-light-blue);
  }

  .footer__divider {
    display: block;
    height: 1px;
    background: var(--c-white-20);
  }

  .footer__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  /* --- Поиск ---------------------------------------------------------------- */
  .footer__search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--control-l);
    padding: 4px 4px 4px 20px;
    border-radius: var(--r-md);
    background: var(--c-white-20);
  }

  .footer__search-input {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--c-white);
    font-size: var(--fs-cap-l);
    font-weight: 500;
    /* inherit взял бы -3% от размера родителя, а не от своего */
    letter-spacing: var(--ls-base);
    padding: 0;
  }

  .footer__search-input::placeholder {
    color: var(--c-white);
    opacity: 1;
  }

  .footer__search-input:focus {
    outline: none;
  }

  .footer__search-btn {
    --icon-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: calc(var(--control-l) - 8px);
    height: calc(var(--control-l) - 8px);
    border-radius: var(--r-md);
    color: var(--c-white);
    transition: background-color var(--transition);
  }

  .footer__search-btn:hover {
    background: var(--c-white-20);
  }

  /* --------------------------------------------------------------------------
   Низ подвала
   -------------------------------------------------------------------------- */
  .footer__bottom {
    display: flex;
    align-items: baseline;
    gap: 60px;
    max-width: var(--container-max);
    margin-inline: auto;
    padding: var(--gap-page);
  }

  .footer__logo {
    flex: 0 0 auto;
    color: var(--c-white);
    font-size: var(--fs-h1);
    font-weight: 500;
    line-height: 1;
    letter-spacing: var(--ls-base);
  }

  .footer__bottom-links {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-width: 0;
  }

  /* --------------------------------------------------------------------------
   Адаптив
   -------------------------------------------------------------------------- */
  @media (max-width: 1727px) {

    .footer__form-left,
    .footer__form-title {
      gap: 32px;
    }

    .footer__fields {
      gap: 8px;
    }

    .footer__form-right {
      gap: 20px;
    }

    .footer__col {
      gap: 24px;
      padding: 32px;
    }

    .footer__contact-group,
    .footer__links {
      gap: 12px;
    }

    .footer__logo {
      font-size: 32px;
    }

    .footer__bottom {
      gap: 32px;
    }

    .footer__search-btn {
      --icon-size: 20px;
    }
  }

  @media (max-width: 1279px) {
    .footer__form-inner {
      flex-direction: column;
    }

    .footer__form-left,
    .footer__form-right {
      flex: 1 1 auto;
      width: 100%;
    }

    .footer__cols {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer__bottom {
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
    }

    .footer__bottom-links {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }

    .footer__logo {
      font-size: var(--fs-h2);
    }
  }

  @media (max-width: 767px) {

    .footer__form-left,
    .footer__form-title {
      gap: 16px;
    }

    .footer__form-inner {
      gap: 20px;
    }

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

    .footer__col {
      gap: 16px;
      padding: 20px var(--gap-page);
    }

    .footer__col {
      padding-top: 16px;
    }

    .footer__col:not(:first-child) {
      border-bottom: 1px solid rgb(255, 255, 255, 0.2);
    }

    /* .footer__col+.footer__col {
      padding-top: 0;
    } */

    /* Поиск на мобиле в макете не уменьшается: 50px, текст 16px */
    .footer__search {
      height: 50px;
      border-radius: 8px;
    }

    .footer__search-input {
      font-size: 16px;
    }

    .footer__search-btn {
      width: 42px;
      height: 42px;
    }

    .footer__bottom {
      padding: 20px var(--gap-page);
    }

    .footer__logo {
      font-size: var(--fs-h3);
    }
  }

}
/* End */


/* Start:/local/templates/ekspopipe/components/bitrix/search.title/header/style.css?1789457144761*/
/* Подсказки поиска в шапке. Контейнер позиционирует JCTitleSearch (.title-search-result) */

.title-search-result {
  z-index: 120;
  display: none;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: 0 12px 32px rgb(0 0 0 / 12%);
}

.search-suggest {
  display: flex;
  flex-direction: column;
  padding-block: 8px;
}

.search-suggest__item {
  padding: 10px 16px;
  color: var(--c-black);
  font-size: var(--fs-body-s);
  text-decoration: none;
}

.search-suggest__item b {
  color: var(--c-main);
  font-weight: 500;
}

.search-suggest__item:hover,
.search-suggest__item:focus-visible {
  background: var(--c-bg);
}

.search-suggest__item--all {
  color: var(--c-main);
}

/* End */
/* /local/templates/ekspopipe/assets/css/base/fonts.css?17894571443312 */
/* /local/templates/ekspopipe/assets/css/base/tokens.css?17894571445795 */
/* /local/templates/ekspopipe/assets/css/base/reset.css?17894571441970 */
/* /local/templates/ekspopipe/assets/css/base/typography.css?17895611414927 */
/* /local/templates/ekspopipe/assets/css/base/layout.css?17895611412458 */
/* /local/templates/ekspopipe/partials/accordion/style.css?17894571444125 */
/* /local/templates/ekspopipe/partials/breadcrumbs/style.css?17894571441491 */
/* /local/templates/ekspopipe/partials/button/style.css?179319549315396 */
/* /local/templates/ekspopipe/partials/catalog-card-mini/style.css?17894571442104 */
/* /local/templates/ekspopipe/partials/catalog-card/style.css?17897205663164 */
/* /local/templates/ekspopipe/partials/catalog-product-card/style.css?17931954933399 */
/* /local/templates/ekspopipe/partials/counter/style.css?17894571441253 */
/* /local/templates/ekspopipe/partials/document-card/style.css?17894571442041 */
/* /local/templates/ekspopipe/partials/feature-card/style.css?17894571441535 */
/* /local/templates/ekspopipe/partials/hint/style.css?17931954931067 */
/* /local/templates/ekspopipe/partials/input/style.css?17894571443593 */
/* /local/templates/ekspopipe/partials/logo-card/style.css?1789457144941 */
/* /local/templates/ekspopipe/partials/pagination/style.css?17894571441886 */
/* /local/templates/ekspopipe/partials/product-card/style.css?17894571442909 */
/* /local/templates/ekspopipe/partials/promo-card/style.css?17894571441012 */
/* /local/templates/ekspopipe/partials/review-card/style.css?17931938803716 */
/* /local/templates/ekspopipe/partials/search/style.css?17894571442757 */
/* /local/templates/ekspopipe/partials/slider/style.css?17894571442755 */
/* /local/templates/ekspopipe/partials/snackbar/style.css?17931954932871 */
/* /local/templates/ekspopipe/partials/tag/style.css?17894571442885 */
/* /local/templates/ekspopipe/partials/text-card/style.css?1789457144859 */
/* /local/templates/ekspopipe/partials/toast/style.css?17894571441740 */
/* /local/templates/ekspopipe/sections/header/style.css?179319549330785 */
/* /local/templates/ekspopipe/sections/footer/style.css?17895620928535 */
/* /local/templates/ekspopipe/components/bitrix/search.title/header/style.css?1789457144761 */