/* 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/info-page.css?17906096414446*/
/*
 * Информационные страницы: «Доставка» (ТЗ 7.4, макет 2069:27140) и
 * «Оплата и возврат» (ТЗ 7.3, макет 2069:27915).
 *
 * Обе страницы статичные и собраны из одного узора: заголовок, вводный абзац
 * и секции «заголовок слева — текст справа». Тексты приходят из визуального
 * редактора CMS, поэтому стили держатся на обёртке .frk-info__text, а не на
 * конкретных тегах внутри.
 *
 * Отступ «шапка → крошки» и «крошки → заголовок» — фиксированные 16px, как
 * на каталоге и карточке товара (frontend-guidelines.md).
 */

.frk-info {
  /* Разрыв между секциями: 80px до десктопа, 100px на 1920 (замер по макету) */
  --frk-info-gap: 80px;

  padding-top: var(--frk-space-sm);
}

@media (min-width: 1024px) {
  .frk-info {
    --frk-info-gap: clamp(80px, 57.14px + 2.232vw, 100px);
  }
}

/*
 * Крошки на этих страницах набраны 14px на любой ширине (2069:27299), а общий
 * компонент растёт до 16px на 1920.
 */
.frk-info .frk-breadcrumb {
  font-size: 14px;
}

.frk-info__title {
  margin-top: var(--frk-space-sm);
  font-size: var(--frk-size-page-title);
  line-height: var(--frk-leading-tight);
}

.frk-info__lead {
  max-width: 880px;
  margin-top: var(--frk-space-sm);
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-ui-lg);
  line-height: var(--frk-leading-base);
  color: rgb(19 18 18 / 60%);
}

/* --- Секция «заголовок — текст» ------------------------------------------ */

.frk-info__section {
  display: grid;
  gap: var(--frk-space-sm);
  margin-top: var(--frk-info-gap);
}

/*
 * Первая секция стоит ближе к вводному абзацу, чем общий разрыв: 40px между
 * строками текста (баг-лист 2, строка 16). Заказчик меряет от строки до
 * строки, без полуинтерлиньяжа, — между блоками это 36.
 */
.frk-info__lead + .frk-info__section {
  margin-top: 36px;
}

.frk-info__heading {
  font-family: var(--frk-font-title);
  font-weight: var(--frk-weight-light);
  font-size: 32px;
  /* Heading/H2 в макете: 48px при высоте строки 53px */
  line-height: 1.1;
}

.frk-info__body {
  display: grid;
  gap: var(--frk-space-md);
}

/* До текста пункта 12px между строками (баг-лист 2, строка 17), между блоками 8 — см. отступ секции выше */
.frk-info__subheading {
  margin-bottom: var(--frk-space-xs);
  font-family: var(--frk-font-title);
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-display-lg);
  line-height: 1.1;
}

.frk-info__text {
  max-width: 860px;
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-ui-lg);
  line-height: var(--frk-leading-base);
  color: rgb(19 18 18 / 60%);
}

.frk-info__text p + p {
  margin-top: var(--frk-space-sm);
}

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

/*
 * Десктоп: заголовок секции занимает левые 6 колонок, текст — правые 6
 * (в макете 951px и 955px от левого поля при колонке 155px).
 */
@media (min-width: 1024px) {
  .frk-info__section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--frk-layout-gap);
    align-items: start;
  }
}

/* Секция FAQ — отдельный компонент (accordion.css), сетка «заголовок — текст» ей не нужна */
.frk-info > .frk-faq {
  margin-top: var(--frk-info-gap);
}

/*
 * У .frk-footer свой padding-top (--frk-rhythm-footer) — это отступ до тёмной
 * плашки, а не до <footer>; вместе с отступом секции FAQ выше он удваивал бы
 * разрыв «последний вопрос → плашка». Весь отступ несёт секция FAQ.
 */
.frk-info ~ .frk-footer {
  padding-top: 0;
}

/* 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/info-page.css?17906096414446 */
/* /local/templates/frk/css/accordion.css?17906096417565 */