/* Start:/local/templates/frk/css/breadcrumbs.css?17906096411350*/
/*
 * Хлебные крошки.
 *
 * Сквозной элемент для внутренних страниц. Последний пункт — текущая
 * страница — не ссылка и набран цветом текста, остальные приглушены,
 * пока на них не наводят.
 */

.frk-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--frk-space-2xs);
  font-family: var(--frk-font-ui);
  font-weight: var(--frk-weight-light);

  /*
   * Фиксированные 14px, а не --frk-size-ui-md: тот токен растёт до 16px
   * к 1920, а в макете (2056:46146) крошки набраны ролью Description/Light
   * 14px на всех ширинах — это не масштабируемый заголовочный кегль, а
   * мелкая служебная подпись, она не растёт вместе с полотном.
   */
  font-size: 14px;
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
  color: rgb(19 18 18 / 60%);
}

.frk-breadcrumb__link {
  color: inherit;
  transition: color var(--frk-motion-fast) var(--frk-motion-ease);
}

.frk-breadcrumb__link:hover {
  color: var(--frk-color-gold);
}

.frk-breadcrumb__current {
  color: var(--frk-color-ink);
}

/* End */


/* Start:/local/templates/frk/css/catalog.css?179069252112694*/
/*
 * Страница «Каталог» (ТЗ 6.2, макеты node 2399:8707 / 2413:1085 / 2399:11120).
 *
 * Карточки товара переиспользуют .frk-product-card--large целиком: и узкая,
 * и широкая плитка каталога набраны той же крупной типографикой, что
 * витрина новинок на главной — просто у широкой плитки грид-колонок вдвое
 * больше. Раз колонок вдвое больше при той же пропорции изображения,
 * снимок получается вдвое выше — ровно так, как в макете, без отдельного
 * набора картинок под широкий вариант.
 */

/*
 * Отступ от шапки до хлебных крошек — фиксированные 16px, как на карточке
 * товара (product.css), а не секционный ритм героя: правило для всех
 * внутренних страниц без высокого героя под крошками.
 */
.frk-catalog {
  padding-top: var(--frk-space-sm);
}

.frk-catalog__title {
  margin-top: calc(var(--frk-space-sm) - var(--frk-title-leading-trim));
  margin-bottom: calc(var(--frk-space-sm) - var(--frk-title-leading-trim));
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: var(--frk-size-page-title);
  line-height: var(--frk-leading-title);
  letter-spacing: var(--frk-tracking-serif);
}

/* --- Ряд категорий ------------------------------------------------------- */

.frk-catalog-tabs {
  display: flex;
  gap: var(--frk-space-md);
  margin-bottom: var(--frk-space-md);
  padding-bottom: 2px;
}

.frk-catalog-tabs__item {
  flex-shrink: 0;
  scroll-snap-align: start;
  font-family: var(--frk-font-title);
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-display-md);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-serif);
  white-space: nowrap;
  color: rgb(19 18 18 / 60%);
  transition: color var(--frk-motion-fast) var(--frk-motion-ease);
}

.frk-catalog-tabs__item:hover {
  color: var(--frk-color-ink);
}

.frk-catalog-tabs__item[aria-current="true"] {
  color: var(--frk-color-ink);
}

/* --- Панель инструментов: фильтр, применённые теги, сортировка ---------- */

.frk-catalog-toolbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--frk-space-sm);
  padding-bottom: var(--frk-space-sm);
}

/*
 * Лента «Фильтр» + применённые теги. Без активных фильтров она короткая
 * (одна кнопка «Фильтр») и на мобильном естественно делит строку с
 * сортировкой и видом сетки — они на одном уровне. Как только появляются
 * теги, лента перестаёт помещаться рядом с ними: тулбар помечает это
 * классом is-filtered (catalog-toolbar.js), лента занимает всю строку сама
 * (flex-basis 100%), а «Сбросить все» и «Сортировка» опускаются на
 * следующую строку и встают по её краям (space-between тулбара).
 * На десктопе, где всё влезает в одну строку в любом случае, ширина всегда
 * по контенту.
 */
.frk-catalog-toolbar__filters {
  display: flex;
  align-items: center;
  gap: var(--frk-space-sm);
  flex: 0 1 auto;
  min-width: 0;
}

.frk-catalog-toolbar.is-filtered .frk-catalog-toolbar__filters {
  flex: 1 0 100%;
}

@media (min-width: 768px) {
  /* На десктопе всё влезает в одну строку независимо от is-filtered — переключение только для мобильного */
  .frk-catalog-toolbar__filters,
  .frk-catalog-toolbar.is-filtered .frk-catalog-toolbar__filters {
    flex: 0 1 auto;
  }
}

.frk-catalog-toolbar__trigger {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--frk-space-xs);
  font-size: var(--frk-size-ui-lg);
  letter-spacing: var(--frk-tracking-ui);
}

.frk-catalog-toolbar__trigger[aria-expanded="true"],
.frk-catalog-toolbar__trigger.is-active {
  color: var(--frk-color-gold);
}

.frk-catalog-toolbar__end {
  display: flex;
  align-items: center;
  gap: var(--frk-space-md);
  margin-left: auto;
}

.frk-catalog-toolbar__sort {
  position: relative;
}

.frk-catalog-toolbar__sort-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--frk-space-xs);
  font-size: var(--frk-size-ui-lg);
  letter-spacing: var(--frk-tracking-ui);
}


.frk-sort-menu {
  position: absolute;
  z-index: 10;
  top: 100%;
  right: 0;
  margin-top: var(--frk-space-2xs);
  min-width: 220px;
  padding: var(--frk-space-2xs);
  border: 1px solid var(--frk-color-border);
  border-radius: var(--frk-radius);
  background: var(--frk-color-surface);
}

.frk-sort-menu[hidden] {
  display: none;
}

.frk-sort-menu__option {
  display: block;
  width: 100%;
  padding: var(--frk-space-xs) var(--frk-space-sm);
  border-radius: var(--frk-radius);
  text-align: left;
  font-size: var(--frk-size-ui-md);
  letter-spacing: var(--frk-tracking-ui);
  transition: background-color var(--frk-motion-fast) var(--frk-motion-ease);
}

.frk-sort-menu__option:hover {
  background: var(--frk-color-surface-muted);
}

.frk-sort-menu__option[aria-current="true"] {
  color: var(--frk-color-gold);
  font-weight: var(--frk-weight-medium);
}

.frk-catalog-toolbar__view {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  opacity: 0.6;
  transition: opacity var(--frk-motion-fast) var(--frk-motion-ease);
}

.frk-catalog-toolbar__view:hover {
  opacity: 1;
}

/* --- Сетка карточек ------------------------------------------------------- */

.frk-catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--frk-layout-gap);
  /* Между рядами карточек — не сайтовый зазор сетки (4px), а свой отступ: 24px на мобильном и планшете */
  row-gap: var(--frk-space-md);
  margin-top: var(--frk-space-md);
}

.frk-catalog-grid__item--wide {
  grid-column: span 2;
}

@media (min-width: 1024px) {
  .frk-catalog-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* 32px между рядами на десктопе */
    row-gap: var(--frk-space-lg);
  }

  /* От строки «Фильтр / Сортировка» до карточек 24px: 16 даёт отступ панели (2399:8859 → 2399:8709; баг-лист, строка 34) */
  .frk-catalog-toolbar ~ .frk-catalog-grid {
    margin-top: var(--frk-space-xs);
  }

  /* Открытый фильтр встаёт вровень с верхом карточек — отступ тот же, что у сетки */
  .frk-catalog-toolbar .frk-filter-panel {
    margin-top: var(--frk-space-xs);
  }
}

/*
 * Подпись карточки в сетке по макетам 2399:8815 / 2413:1183 / 2399:11221:
 *   фото → название   2 на 1920, 6 на планшете и телефоне;
 *   название → описание 4 (на телефоне описания нет);
 *   описание → цена   16 на 1920, 12 на планшете, от названия 6 на телефоне.
 * Цена прижата к низу карточки общим правилом (product-card.css), здесь
 * только отступы.
 */
.frk-catalog-grid .frk-product-card__body {
  gap: 0;
}

.frk-catalog-grid .frk-product-card__excerpt {
  margin-top: var(--frk-space-2xs);
}

/* Товар без описания: пустой абзац не должен добавлять свой отступ к расстоянию до цены */
.frk-catalog-grid .frk-product-card__excerpt:empty {
  display: none;
}

.frk-catalog-grid .frk-product-card__footer {
  padding-top: 6px;
}

/*
 * С планшета значения плавные между точками макета 768 и 1920
 * (2413:1183 → 2399:8815): фото → название 6 → 2, описание 14 → 20,
 * цена 16 → 20, отступ до цены 12 → 16 — без скачка на 1024.
 * Описание 60% чёрного, а не прозрачность 0.5 крупной карточки.
 */
@media (min-width: 768px) {
  .frk-catalog-grid .frk-product-card {
    gap: clamp(2px, 8.67px - 0.347vw, 6px);
  }

  .frk-catalog-grid .frk-product-card__excerpt {
    opacity: 1;
    color: rgb(19 18 18 / 60%);
    font-size: clamp(14px, 10px + 0.521vw, 20px);
  }

  .frk-catalog-grid .frk-product-card__price {
    font-size: var(--frk-size-ui-lg);
  }

  .frk-catalog-grid .frk-product-card__footer {
    padding-top: clamp(12px, 9.33px + 0.347vw, 16px);
  }
}

.frk-catalog__empty {
  padding-block: var(--frk-space-xl);
  text-align: center;
  font-size: var(--frk-size-ui-lg);
  color: rgb(19 18 18 / 60%);
}

.frk-catalog__empty[hidden] {
  display: none;
}

/* --- Загрузить ещё --------------------------------------------------------- */

.frk-catalog__load-more {
  display: block;
  margin: var(--frk-space-lg) auto 0;
  color: var(--frk-color-gold);
  font-size: var(--frk-size-ui-lg);
  letter-spacing: var(--frk-tracking-ui);
  transition: color var(--frk-motion-fast) var(--frk-motion-ease);
}

.frk-catalog__load-more:hover {
  color: var(--frk-color-ink);
}

.frk-catalog__load-more[hidden] {
  display: none;
}

/*
 * Скелетон следующей порции на время «загрузки». Порция всегда 12 —
 * ровно два цикла раскладки на десктопе (4 обычные + 2 широкие) и три
 * цикла на планшете и телефоне (2 обычные + 2 широкие), поэтому подгрузка
 * никогда не обрывает ритм сетки на середине.
 */
.frk-catalog-grid__item.is-loading .frk-product-card__media {
  background: linear-gradient(
    100deg,
    rgb(19 18 18 / 4%) 30%,
    rgb(19 18 18 / 8%) 50%,
    rgb(19 18 18 / 4%) 70%
  );
  background-size: 200% 100%;
  animation: frk-skeleton 1.4s ease-in-out infinite;
}

@keyframes frk-skeleton {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .frk-catalog-grid__item.is-loading .frk-product-card__media {
    animation: none;
  }
}

/* --- FAQ секция ------------------------------------------------------------ */

.frk-catalog__faq {
  padding-top: var(--frk-rhythm);
  /* Фиксированные 80px до футера на любой ширине — не --frk-rhythm, тот растёт до 200px на десктопе */
  padding-bottom: 80px;
}

/*
 * У .frk-footer есть свой padding-top (--frk-rhythm-footer, 80–91px) — это отступ
 * ДО тёмной плашки .frk-footer__inner, а не до самого <footer>: цвет фона лежит
 * на внутреннем блоке, поэтому этот паддинг снаружи не виден и складывается
 * с padding-bottom секции выше него. С обоими отступами разрыв «последний
 * вопрос → тёмная плашка» выходил 160–171px, а не 80. Здесь его снимаем —
 * весь отступ несёт сама секция FAQ.
 */
.frk-catalog ~ .frk-footer {
  padding-top: 0;
}

@media (min-width: 1024px) {
  .frk-catalog__faq {
    /* Фиксированные 176px от последней карточки до заголовка на десктопе */
    padding-top: 176px;
  }
}

.frk-catalog__faq-title {
  margin-bottom: var(--frk-space-md);
  font-family: var(--frk-font-title);
  font-weight: var(--frk-weight-light);
  font-size: 32px;
  line-height: var(--frk-leading-tight);
  letter-spacing: var(--frk-tracking-serif);
}

@media (min-width: 1024px) {
  .frk-catalog__faq-title {
    /* Не display-xl: в макете (2399:9386) заголовок 48px на 1920, а не 64–88 */
    font-size: var(--frk-size-display-lg);
    line-height: var(--frk-leading-display);
  }
}

/* End */


/* Start:/local/templates/frk/css/accordion.css?17906096417565*/
/*
 * Аккордеон «Вопросы и ответы».
 *
 * Сквозная секция (4.5) — используется на каталоге и, по мере вёрстки,
 * на других страницах с тем же содержимым из «Контента» → «Вопросы и ответы».
 *
 * Раскрытие тройное: клик и клавиатура работают везде через нативную
 * кнопку — Tab ставит фокус, Enter/Space переключают; на десктопе поверх
 * этого лежит подсказка наведением, как в макете. Наведение никогда
 * не единственный способ увидеть ответ: клик открывает пункт и без него.
 * При загрузке все пункты закрыты (см. accordion.js).
 */

.frk-accordion__item {
  border-bottom: 2px solid var(--frk-color-surface-muted);
}

.frk-accordion__item:first-child {
  border-top: 2px solid var(--frk-color-surface-muted);
}

.frk-accordion__item:last-child {
  border-bottom: none;
}

.frk-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--frk-space-md);
  width: 100%;
  padding-block: var(--frk-space-sm);
  text-align: left;
}

.frk-accordion__question {
  display: flex;
  align-items: baseline;
  gap: var(--frk-space-sm);
  font-family: var(--frk-font-title);
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-display-lg);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-serif);
}

/*
 * Стрелка 11×20 повёрнута на 90°: на экране она 20 в ширину, а в раскладке
 * занимает 11. Поля по 4.5px возвращают ей настоящую ширину — иначе она
 * вылезала за правый край пункта в поле страницы (баг-лист 2, строка 21).
 */
.frk-accordion__icon {
  flex-shrink: 0;
  width: 11px;
  height: 20px;
  margin-inline: 4.5px;
  transform: rotate(90deg);
  transition: transform var(--frk-motion-base) var(--frk-motion-ease);
}

.frk-accordion__trigger[aria-expanded="true"] .frk-accordion__icon {
  transform: rotate(-90deg);
}

.frk-accordion__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--frk-motion-base) var(--frk-motion-ease);
}

.frk-accordion__panel[data-open] {
  max-height: var(--frk-accordion-panel-height, 400px);
}

.frk-accordion__answer {
  padding-bottom: var(--frk-space-sm);
  max-width: 62ch;
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-ui-lg);
  line-height: var(--frk-leading-text);
  letter-spacing: var(--frk-tracking-ui);
  color: rgb(19 18 18 / 60%);
}

/*
 * Наведение — подсказка не глубже открытого состояния: на десктопе, где
 * есть точный указатель, ответ проступает под курсором даже без клика,
 * как в макете. Уходит курсор — сворачивается обратно, если пункт не
 * зафиксирован кликом.
 */
@media (hover: hover) and (pointer: fine) {
  .frk-accordion__item:hover .frk-accordion__panel:not([data-open]) {
    max-height: var(--frk-accordion-panel-height, 400px);
  }
}

@media (min-width: 768px) {
  .frk-accordion__trigger {
    padding-block: var(--frk-space-md);
  }
}

/*
 * Десктоп: вопрос и ответ стоят в одну строку, а не раскрываются вниз —
 * так в макете «Каталог_вопросы» (2069:28485). Ответ управляется
 * прозрачностью, а не высотой: он не подвинет соседние строки, когда
 * появляется по наведению или фокусу.
 *
 * Строка с показанным ответом (is-peek, accordion.js) — компонент 2359:683:
 * серая заливка от разделителя до разделителя вырастает сверху вниз,
 * вопрос плавно съезжает на 16px вправо. Колонка вопроса — половина строки
 * с запасом справа под этот сдвиг, чтобы текст не упирался в ответ.
 */
@media (min-width: 1024px) {
  .frk-accordion__item {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: var(--frk-space-2xs);
    padding-block: 21px;
  }

  .frk-accordion__item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--frk-color-surface-muted);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--frk-motion-base) var(--frk-motion-ease);
  }

  .frk-accordion__item.is-peek::before {
    transform: scaleY(1);
  }

  .frk-accordion__trigger {
    flex: 0 0 50%;
    padding-block: 0;
    padding-right: var(--frk-space-lg);
  }

  .frk-accordion__question {
    font-size: 36px;
    transition: transform var(--frk-motion-base) var(--frk-motion-ease);
  }

  .frk-accordion__item.is-peek .frk-accordion__question {
    transform: translateX(var(--frk-space-sm));
  }

  .frk-accordion__icon {
    display: none;
  }

  .frk-accordion__panel {
    flex: 1 1 0;
    max-height: none;
    overflow: visible;
    opacity: 0;
    transition: opacity var(--frk-motion-base) var(--frk-motion-ease);
  }

  /*
   * На десктопе видимость решает не [data-open]/:hover сам по себе, а JS
   * (accordion.js, is-peek): наведение на любой пункт группы подменяет то,
   * что видно, а не добавляет к нему — иначе кликнутый ответ и
   * наведённый показывались бы одновременно.
   */
  .frk-accordion__item.is-peek .frk-accordion__panel {
    max-height: none;
    opacity: 1;
  }

  /* 881px и интерлиньяж 120% — 2359:689 */
  .frk-accordion__answer {
    padding-bottom: 0;
    max-width: 881px;
    font-size: var(--frk-size-ui-lg);
    line-height: var(--frk-leading-base);
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .frk-accordion__item::before,
  .frk-accordion__question,
  .frk-accordion__panel {
    transition: none;
  }
}

/*
 * Секция «Вопросы и ответы» целиком: заголовок и аккордеон под ним.
 * Заголовок в макете (2069:27330) — 48px при высоте строки 50px на 1920,
 * 32px на мобильном.
 *
 * Отступ до футера — фиксированные 80px на любой ширине, не --frk-rhythm:
 * тот растёт до 200px на десктопе. Отступ сверху секция получает от соседа
 * (разрыв секций страницы), сама его не задаёт.
 */
.frk-faq {
  padding-bottom: 80px;
}

.frk-faq__title {
  margin-bottom: var(--frk-space-md);
  font-family: var(--frk-font-title);
  font-weight: var(--frk-weight-light);
  font-size: 32px;
  line-height: var(--frk-leading-tight);
  letter-spacing: var(--frk-tracking-serif);
}

@media (min-width: 768px) {
  .frk-faq__title {
    font-size: var(--frk-size-display-lg);
  }
}

/* End */
/* /local/templates/frk/css/breadcrumbs.css?17906096411350 */
/* /local/templates/frk/css/catalog.css?179069252112694 */
/* /local/templates/frk/css/accordion.css?17906096417565 */