/* Start:/local/templates/frk/css/hero.css?179060964113832*/
/*
 * Герой главной.
 *
 * На всех ширинах — от 360 до бесконечности — снимок и текст лежат
 * в одной ячейке: фотография занимает всю секцию, заголовок и подпись
 * стоят прямо поверх неё. Сверено напрямую по макету (get_design_context
 * на «Mask group» блока: node 2396:7691 — 360, 2413:573 — 640): текст
 * и кнопка «В коллекцию» — не отдельная строка над снимком, а лежат
 * на самом кадре, с тем же самым отступом (6px внутри + 6px поле секции),
 * что и на десктопе.
 *
 * Раньше здесь была версия с двумя раздельными строками (текст сверху,
 * снимок снизу) — это оказалось ошибкой: те же самые числа макета (343
 * при 360, 543 при 640), которые тогда приняли за высоту ТОЛЬКО снимка,
 * на самом деле высота всей слитой ячейки была другой — 552 при 360
 * и 761 при 640 (см. формулу ниже). Двухстрочная версия не совпадала
 * с макетом ни по высоте, ни по структуре.
 *
 * Ниже 1024 — своя, отдельная от десктопа картинка (уже, не кроп широкой
 * версии через object-position): в макете это тот же приём, что и на
 * десктопе, но с собственным кадром на модели. В разметке это <picture>
 * с <source media="(max-width: 1023px)"> — в админке это будет отдельное
 * поле загрузки, не автоматический пересчёт одного фото под все ширины.
 */

/*
 * Поле страницы — внешний отступ, а не padding: подложка секции должна
 * заканчиваться там же, где плашка шапки, а не заливать поля до края окна.
 */
.frk-hero {
  position: relative;
  display: grid;
  margin-inline: var(--frk-layout-gutter);
  border-radius: var(--frk-radius);
  isolation: isolate;
}

.frk-hero__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--frk-radius);
}

/*
 * <picture> по умолчанию display:block с высотой по контенту — img внутри
 * с height:100% упирается в это auto и откатывается на натуральные
 * пропорции (в разметке это было незаметно: overflow:hidden у контейнера
 * молча подрезает лишнее снизу, но кадрирование object-fit/object-position
 * при этом считается от неверной, слишком высокой рамки). Явные width/
 * height:100% на <picture> убирают цикличность процентов.
 */
.frk-hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

/*
 * <video> — тот же слот, что и <img>, по конвенции .frk-product__media
 * из карточки товара (img/video рядом, переключение через [hidden]):
 * админка отдаёт фото или видео, второе лежит в разметке скрытым.
 * Автоплей вместо кнопки-плей из галереи товара — здесь ролик фоновый,
 * не по клику.
 */
.frk-hero__media img,
.frk-hero__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Без этого правила [hidden] проигрывает display:block выше по специфичности */
.frk-hero__media video[hidden] {
  display: none;
}

.frk-hero__media img {
  /*
   * Исходник вертикальный (2:3), а показывается в широких окнах. Точка
   * кадрирования одна на все ширины: она отмеряет 12% от срезаемой части
   * сверху, поэтому головы остаются в кадре и на 360, и на 2560 —
   * без отдельных правил и без масштабирования картинки.
   */
  object-position: 50% 12%;
}

/*
 * Растворение кадра в фоне секции. Переход занимает почти половину снимка:
 * на узких десктопах полотно уже, заголовок подходит к фигурам ближе,
 * и более короткого перехода не хватает, чтобы текст остался читаемым.
 */
.frk-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to left,
    rgb(237 237 238 / 0%) 52%,
    var(--frk-color-surface-hero) 100%
  );
}

.frk-hero__content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--frk-space-md);
  align-content: start;
  justify-items: start;
  padding: 6px;
  color: var(--frk-color-ink);
}

.frk-hero__title {
  /*
   * Ширина задана в долях кегля: в макете строка занимает 898 пикселей
   * при кегле 132. Привязка к кеглю, а не к полотну, удерживает перенос
   * на любой ширине экрана.
   */
  max-width: 6.8em;
  font-family: var(--frk-font-display);

  /* На узком экране строки стоят плотнее — так в макете 360 */
  line-height: 0.85;
  font-weight: var(--frk-weight-extralight);
  font-size: var(--frk-size-display-2xl);
  letter-spacing: var(--frk-tracking-serif);
}

/*
 * На десктопе «которые» стоит в первой строке, как в макете, иначе вторая
 * строка заходит на людей на снимке (баг-лист 2, строка 11). Макет набран
 * Source Serif, «Слова, которые» Roboto Serif-ом занимает 6.83em — на
 * 6.8em строка переносилась раньше. Балансировка строк (base.css) тоже
 * снята: она уравнивала строки и возвращала «которые» во вторую.
 */
@media (min-width: 1024px) {
  .frk-hero__title {
    max-width: 7em;
    text-wrap: wrap;
  }
}

.frk-hero__subtitle {
  max-width: 17.4em;
  font-family: var(--frk-font-accent);
  font-weight: var(--frk-weight-thin);
  font-size: var(--frk-size-hero-lead);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
}

/*
 * Кнопка стоит в нижнем углу секции, а не в потоке за подзаголовком:
 * между ними в макете пустое поле со снимком.
 */
.frk-hero__action {
  position: absolute;
  bottom: 12px;

  /* Выровнена по левому краю текста — внутреннему отступу содержимого */
  left: 6px;
  z-index: 2;
}

/* ========================================================================= *
 * Десктоп: текст поверх снимка
 * ========================================================================= */

@media (min-width: 1024px) {
  .frk-hero {
    /*
     * Снимок и текст лежат в одной ячейке: фотография занимает всю ширину
     * полотна, заголовок стоит поверх её осветлённой части.
     */
    grid-template-areas: "hero";

    /*
     * Высота задана жёстко, как в макете: снимок вертикальный, и без
     * ограничения он растягивает секцию на всю свою высоту. На широких
     * экранах полотно продолжает тянуться, а кадр просто берёт больший
     * горизонтальный охват.
     */
    height: 880px;
  }

  .frk-hero__media,
  .frk-hero__content {
    grid-area: hero;
  }

  /*
   * Снимок занимает правые три четверти полотна и прижат к правому краю —
   * так в макете. Левая четверть остаётся чистым фоном под заголовок,
   * а стык гасится градиентом внутри кадра.
   */
  .frk-hero__media {
    width: 76%;
    height: 100%;
    margin-left: auto;
  }

  /*
   * На десктопе подложка принадлежит всей секции: снимок растворяется в ней
   * градиентом, и слева от него нет границы. На узких экранах подложка
   * остаётся только под снимком — над текстом она читалась бы серой плашкой.
   */
  .frk-hero {
    background: var(--frk-color-surface-hero);
  }

  /* В макете (2396:1851) заголовок стоит в 8px от левого края кадра и в 3px от верхнего */
  .frk-hero__content {
    align-content: start;
    padding: 3px var(--frk-space-xs) 0;
  }

  /* 8px от нижнего и левого края кадра (2396:668, баг-лист строка 17) */
  .frk-hero__action {
    bottom: var(--frk-space-xs);
    left: var(--frk-space-xs);
  }

  /*
   * Ширины заданы в долях кегля, а не полотна. В макете заголовок занимает
   * 898 пикселей при кегле 132 — это 6.8em, и такая привязка удерживает
   * перенос строк на любой ширине экрана. От доли полотна пришлось уйти:
   * на 1440 кегль уже почти десктопный, а полотно ещё узкое, и заголовок
   * разваливался на три строки вместо двух.
   */
  .frk-hero__title {
    line-height: var(--frk-leading-display);
  }
}

/* ========================================================================= *
 * До десктопа: текст сверху, снимок снизу — две раздельные строки
 * ========================================================================= */

/*
 * ПРАВИЛО МАКЕТА: ниже 1024 герой — та же слитая ячейка, что и на
 * десктопе (текст и кнопка поверх фото), но фото на всю ширину
 * (на десктопе — 76% и прижато вправо), и высота не 880 фиксированных,
 * а по формуле из двух точек макета.
 */
@media (max-width: 1023px) {
  .frk-hero {
    grid-template-areas: "hero";
    background: var(--frk-color-surface-hero);

    /*
     * Высота — та же слитая ячейка (текст + фото вместе), не строка
     * снимка отдельно. Две точки макета: 552px при 360, 761px при 640.
     * Дальше до 1024 макета нет — держим последнее известное значение,
     * тем же приёмом, что и переход 3→2 карточек в new-arrivals.css.
     */
    height: clamp(552px, calc(74.643vw + 283.29px), 761px);
  }

  .frk-hero__media,
  .frk-hero__content {
    grid-area: hero;
  }

  .frk-hero__media {
    width: 100%;
    height: 100%;
  }

  /*
   * Снимок стоит в кадре так, как в макете, а не обрезан по нему: он шире
   * кадра и опущен ниже его верха, чтобы заголовок не наезжал на людей
   * (баг-лист, строки 27 и 28). Точки макета: на 360 — снимок 523 из 348,
   * на 96px ниже верха и на 108px левее (2396:7694); на 640 — 826 из 628,
   * на 51 ниже и на 135 левее (2413:576). Между ними прямые от ширины
   * кадра; отступ сверху — margin, потому что только он в процентах
   * считается от ширины. Шире 640 отступ не меньше макетных 51px: прямая
   * дальше увела бы верх снимка за край кадра и срезала бы головы.
   */
  .frk-hero__media picture {
    position: absolute;
    top: 0;
    left: calc(-9.746% - 73.95px);
    width: calc(107.96% + 147.8px);
    max-width: none;
    height: auto;
    margin-top: max(51px, calc(151.64px - 16.025%));
  }

  .frk-hero__media picture img {
    height: auto;
    object-fit: fill;
  }

  /* Растворение кадра в фоне — только десктопный приём: в макетах 360 и 640 снимок без затемнения слева */
  .frk-hero__media::after {
    content: none;
  }

  /*
   * .frk-hero__content (padding: 6px, база) и .frk-hero__action (left:
   * 6px, база) уже совпадают с отступом текста в макете — здесь
   * их трогать не нужно, в отличие от версии с раздельными строками.
   */
}

/* End */


/* Start:/local/templates/frk/css/intro.css?17906096411631*/
/*
 * Вводный блок о проекте: крупное утверждение, пояснение вполголоса
 * и переход на страницу бренда.
 */

.frk-intro {
  display: grid;
  justify-items: start;
  gap: var(--frk-space-lg);

  /*
   * Отступ от героя снят с макета: на 1920 секция начинается на 1020 при
   * герое, который заканчивается на 960, на узких макетах стык такой же,
   * как у остальных секций. Нижнего отступа нет — расстояние до ленты
   * категорий задаёт она сама.
   */
  padding-top: var(--frk-rhythm-hero);
}

.frk-intro__text {
  display: grid;
  gap: var(--frk-space-sm);
}

.frk-intro__lead {
  /*
   * Ширина отмерена в долях кегля: в макете строка занимает 1498 пикселей
   * при кегле 48. Привязка к кеглю удерживает перенос на любой ширине.
   */
  max-width: 31.2em;
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: var(--frk-size-display-lg);
  line-height: 1.1;
  letter-spacing: var(--frk-tracking-serif);
}

.frk-intro__note {
  max-width: 43.2em;
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-ui-lg);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);

  /* В макете пояснение приглушено ровно наполовину */
  opacity: 0.5;
}

/* End */


/* Start:/local/templates/frk/css/categories.css?17906096414184*/
/*
 * Лента категорий.
 *
 * Плитки не помещаются в экран и прокручиваются вбок. Прокрутка нативная
 * со снапом: на тач-устройствах это даёт правильную инерцию, которую
 * библиотеки только имитируют, а без JS лента остаётся работоспособной.
 *
 * Обрезанная справа плитка показывает, что список продолжается. На узких
 * экранах лента уходит за край окна, на десктопе — обрезается по полю.
 *
 * Общее поведение ленты (плавность, снятие снапа на время перетаскивания,
 * скрытая полоса прокрутки) задано один раз в layout.css по атрибуту
 * data-drag-scroll — здесь только то, что отличает эту ленту от прочих.
 */

.frk-categories {
  padding-top: var(--frk-rhythm);
}

.frk-categories__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--frk-space-md);
  margin-bottom: var(--frk-space-sm);
}

.frk-categories__title {
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: var(--frk-size-display-lg);
  line-height: 1.1;
  letter-spacing: var(--frk-tracking-serif);
  white-space: nowrap;
}

/*
 * На узком экране два заголовка в одну строку помещаются впритык, и Roboto
 * Serif шире гарнитуры из макета — при 24 пикселях правый уходит за край
 * и тянет за собой горизонтальную прокрутку всей страницы.
 */
@media (max-width: 479px) {
  .frk-categories__title {
    font-size: 20px;
  }
}

.frk-categories__track {
  display: flex;
  gap: var(--frk-layout-gap);
  scroll-snap-type: x proximity;
  padding-inline: var(--frk-layout-gutter);

  /* Снап учитывает поле слева, иначе плитка прилипает к самому краю окна */
  scroll-padding-left: var(--frk-layout-gutter);
}

/*
 * На десктопе контент не выходит за края плашки шапки (баг-лист, строка 10):
 * лента обрезается по полю страницы, а не по краю окна.
 */
@media (min-width: 1024px) {
  .frk-categories__track {
    margin-inline: var(--frk-layout-gutter);
    padding-inline: 0;
    scroll-padding-left: 0;
  }
}

.frk-category {
  flex: 0 0 auto;
  scroll-snap-align: start;

  /* Ширина плитки снята с макета: 378 из 1904 пикселей полотна */
  width: clamp(140px, 19.85vw, 378px);
}

.frk-category__link {
  display: grid;
  gap: var(--frk-space-xs);
  justify-items: center;
}

.frk-category__media {
  width: 100%;

  /* Пропорция изображения из макета: 378 на 479 */
  aspect-ratio: 378 / 479;
  overflow: hidden;
  border-radius: var(--frk-radius);
  background: #ebebeb;
}

.frk-category__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--frk-motion-slow) var(--frk-motion-ease);
}

.frk-category__link:hover .frk-category__media img {
  transform: scale(1.03);
}

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

.frk-category__name {
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: var(--frk-size-display-md);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-serif);
  text-align: center;
  transition: color var(--frk-motion-fast) var(--frk-motion-ease);
}

/* На планшете и телефоне от заголовка блока до содержимого 12px, как в макетах 360 и 640 (баг-лист, строки 25 и 30) */
@media (max-width: 1023px) {
  .frk-categories__head {
    margin-bottom: 12px;
  }
}

/* End */


/* Start:/local/templates/frk/css/details.css?179069252115386*/
/*
 * «Внимание к деталям».
 *
 * Пять снимков идут в шахматном порядке: нечётные справа, чётные слева.
 * Название стоит по центру полотна, номер — у противоположного от снимка
 * края.
 *
 * На десктопе поверх статичной раскладки работает движение-лента (см. ниже,
 * блок «Десктоп: движение-лента»): секция становится «липкой» на 0.4 экрана
 * прокрутки сверх самого sticky-экрана, каждая деталь держит свой натуральный
 * размер из статики и едет по вертикали (details-scroll.js) — следующая
 * въезжает снизу, текущая уезжает вверх, шахматка лево/право не меняется,
 * поэтому взгляд по мере прокрутки идёт змейкой, а не мигает на месте.
 *
 * Ниже десктопа — лёгкое проявление без sticky, деталь появляется и гаснет
 * в обе стороны при прокрутке (details-scroll.js). При
 * prefers-reduced-motion: reduce — обычная статика без движения вовсе.
 */

.frk-details {
  padding-top: var(--frk-rhythm-details);
}

.frk-details__head {
  display: grid;
  gap: var(--frk-space-sm);
  margin-bottom: var(--frk-space-2xl);
  padding-inline: var(--frk-layout-gutter);
}

.frk-details__title {
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: var(--frk-size-display-xl);
  line-height: var(--frk-leading-display);
  letter-spacing: var(--frk-tracking-serif);
}

.frk-details__note {
  /*
   * Ширина снята с макета: 601 пиксель при кегле 20. На узком экране
   * это больше доступного места, поэтому ограничиваем полотном —
   * иначе абзац утягивает страницу в горизонтальную прокрутку.
   */
  max-width: min(30em, 100%);
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-ui-lg);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
  opacity: 0.5;
}

.frk-details__list {
  display: grid;
}

.frk-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: var(--frk-layout-gap);
}

.frk-detail__media {
  /* Снимок квадратный: 632 на 632 в макете */
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--frk-radius);
  background: rgb(19 18 18 / 4%);
}

.frk-detail__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frk-detail__text {
  display: grid;
  gap: var(--frk-space-xs);
  justify-items: center;

  /*
   * Без этого колонка растягивается под неразрывный номер и утягивает
   * страницу в горизонтальную прокрутку: содержимое сетки по умолчанию
   * не даёт ей стать уже своего минимума.
   */
  min-width: 0;
}

.frk-detail__name {
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: var(--frk-size-display-lg);
  line-height: var(--frk-leading-tight);
  letter-spacing: var(--frk-tracking-serif);
}

.frk-detail__number {
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: var(--frk-size-caption);
  white-space: nowrap;
  line-height: var(--frk-leading-tight);
  letter-spacing: var(--frk-tracking-serif);
  font-variant-numeric: lining-nums proportional-nums;
}

/*
 * Чётные детали зеркальны: снимок уходит влево, номер — вправо.
 * Порядок в разметке при этом не меняется, поэтому читается она
 * одинаково и глазом, и скринридером.
 */
.frk-detail:nth-child(even) .frk-detail__media {
  order: -1;
}

/* ========================================================================= *
 * До десктопа (макет 360 — 2396:7786): снимок на половину строки, подписи
 * во второй половине — название прижато к снимку, номер у внешнего края.
 * Строки идут шахматкой, как на десктопе. На планшете — так же, по выбору
 * заказчика (в макете 640 снимок на треть строки).
 * ========================================================================= */

@media (max-width: 1023px) {
  .frk-details__list {
    gap: var(--frk-layout-gap);
    padding-inline: var(--frk-layout-gutter);
  }

  .frk-detail__media {
    grid-row: 1;
    grid-column: 2;
  }

  .frk-detail:nth-child(even) .frk-detail__media {
    grid-column: 1;
  }

  /*
   * В разметке номер идёт перед названием: в нечётной строке он и так у
   * внешнего (левого) края, в чётной ряд разворачивается, и номер уходит
   * вправо, а название — к снимку слева.
   */
  .frk-detail__text {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--frk-space-xs);
  }

  .frk-detail:nth-child(even) .frk-detail__text {
    grid-column: 2;
    flex-direction: row-reverse;
  }

  .frk-detail__number {
    font-weight: var(--frk-weight-light);
    font-size: 10px;
  }

  .frk-detail__name {
    min-width: 0;
    font-weight: var(--frk-weight-light);
    font-size: 20px;
    line-height: var(--frk-leading-base);
    text-align: right;
  }

  .frk-detail:nth-child(even) .frk-detail__name {
    text-align: left;
  }
}

/*
 * Лёгкое проявление ниже десктопа: без sticky и без цикличности — деталь
 * проступает, когда доходит очередь прокрутки до неё, и гаснет обратно,
 * если прокрутить назад (details-scroll.js переключает is-visible туда-
 * обратно через IntersectionObserver, без unobserve). Проще, чем смена
 * кадров, и не спорит с инерцией прокрутки на телефоне.
 */
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .frk-detail {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity var(--frk-motion-slow) var(--frk-motion-ease),
      transform var(--frk-motion-slow) var(--frk-motion-ease);
  }

  .frk-detail.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ========================================================================= *
 * Десктоп: полотно из двенадцати колонок, детали заходят друг на друга
 * ========================================================================= */

@media (min-width: 1024px) {
  .frk-detail {
    grid-template-columns: repeat(var(--frk-layout-columns), minmax(0, 1fr));
  }

  .frk-detail__media {
    /* Четыре колонки из двенадцати — те самые 632 пикселя при полотне 1904 */
    grid-column: 9 / span 4;
  }

  .frk-detail__text {
    grid-column: 1 / span 8;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    align-items: center;
    gap: var(--frk-layout-gap);
  }

  .frk-detail__number {
    grid-column: 1 / span 3;
    text-align: center;
  }

  .frk-detail__name {
    grid-column: 4 / span 5;
    text-align: center;
  }

  /* Зеркальная раскладка чётных деталей */
  .frk-detail:nth-child(even) .frk-detail__media {
    grid-column: 1 / span 4;
    order: 0;
  }

  .frk-detail:nth-child(even) .frk-detail__text {
    grid-column: 5 / span 8;
  }

  .frk-detail:nth-child(even) .frk-detail__number {
    grid-column: 6 / span 3;
  }

  .frk-detail:nth-child(even) .frk-detail__name {
    grid-column: 1 / span 5;
  }

  /*
   * Соседние детали заходят друг на друга: в макете шаг между ними 472
   * пикселя при высоте снимка 632. Доля от ширины полотна сохраняет
   * это отношение на любом экране.
   */
  .frk-detail + .frk-detail {
    margin-top: -8.4vw;
  }

  /*
   * В макете заголовок секции стоит не над списком, а в левой половине
   * первой строки: снимок первой детали начинается на той же высоте, что
   * и слово «Внимание». Кладём заголовок и список в одну ячейку сетки —
   * заголовок прижат к верху, а номер и название первой детали стоят
   * посередине снимка, то есть заметно ниже сноски и не спорят с ней.
   */
  .frk-details {
    display: grid;
    grid-template-columns: repeat(var(--frk-layout-columns), minmax(0, 1fr));
    column-gap: var(--frk-layout-gap);
    padding-inline: var(--frk-layout-gutter);
  }

  .frk-details__head {
    grid-area: 1 / 1 / 2 / 9;
    align-self: start;
    margin-bottom: 0;
    padding-inline: 0;
    z-index: 1;
  }

  /* Обёртка прокрутки — то же место в сетке, что раньше занимал список */
  .frk-details__scroller {
    grid-area: 1 / 1 / 2 / 13;
  }
}

/* ========================================================================= *
 * Десктоп: движение-лента — «липкий» проезд деталей одна за другой
 * ========================================================================= */

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  /*
   * Высота и обёртки, и самого sticky-списка теперь считает details-scroll.js
   * (см. syncScrollerSize) — здесь только запасной размер на случай, если
   * скрипт почему-то не выполнится, чтобы контент не схлопнулся в 0.
   *
   * Раньше список был жёстко 100vh: он «липнет» на весь экран, а натуральный
   * кадр (снимок 632px) занимает только верхнюю его часть — снизу оставалось
   * пустое поле почти в пол-экрана, которое приходилось домотать прежде, чем
   * releasится страница. Это и ощущалось как «огромный пробел перед Гардероб
   * с историей», хотя сам CSS-отступ (--frk-rhythm-new: 164px) был верным
   * всё это время. Список теперь высотой РОВНО в кадр — пустого поля нет
   * вообще, sticky отпускает страницу сразу за последним кадром, и «Гардероб
   * с историей» естественно оказывается там же, где его ставит статика:
   * никакой отдельной анимации подъезда не нужно, только 164px из padding-top
   * у .frk-new. Общая высота обёртки = высота кадра + запас на цикл
   * (тот же расчёт от скорости сглаживания, что убирал "пролетает без
   * остановки", теперь просто прибавляется к другой базе).
   */
  /*
   * Кадры обрезаются по обёртке, а не по краю списка: новая деталь видна
   * и ниже него, от линии проявления (details-scroll.js, баг-лист 2,
   * строка 7). clip, а не hidden, — иначе обёртка стала бы контейнером
   * прокрутки и список перестал бы прилипать. За обёртку, на следующий
   * блок, деталь не заходит.
   */
  .frk-details__scroller {
    height: 300vh;
    overflow: clip;
  }

  .frk-details__list {
    position: sticky;
    top: 0;
    height: 90vh;
  }

  /*
   * Кадр держит натуральный размер из статики (grid-template-columns
   * наследуется из общего десктопного правила выше — снимок 632px, текст
   * рядом на его высоте), а не растянут на весь экран: иначе это уже не
   * тот кадр, что в макете, даже в состоянии покоя. Позиционируем только
   * top/left/width — высоту определяет контент, как в статике.
   */
  .frk-detail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;

    /*
     * Без transition — details-scroll.js выставляет transform/opacity
     * напрямую от прогресса скролла на каждый кадр. CSS-transition поверх
     * заставлял бы значение "догонять" быстро меняющуюся цель и на резкой
     * прокрутке отставал бы от неё, а не сглаживал переход.
     */
  }

  /*
   * В статике соседние детали заходят друг на друга отрицательным отступом
   * (margin-top: -8.4vw у .frk-detail + .frk-detail, см. выше) — у
   * позиционированного элемента этот отступ никуда не девается. Обнулять
   * его на самом .frk-detail бесполезно: специфичность у .frk-detail +
   * .frk-detail выше (два класса против одного) и побеждает независимо
   * от порядка правил в файле — сбрасывать нужно тем же селектором с
   * соседом.
   */
  .frk-detail + .frk-detail {
    margin-top: 0;
  }

  .frk-detail.is-active {
    pointer-events: auto;
    z-index: 1;
  }

  .frk-detail__media img {
    will-change: transform;
  }
}

/* На планшете и телефоне от заголовка блока до содержимого 12px, как в макетах 360 и 640 (баг-лист, строки 25 и 30) */
@media (max-width: 1023px) {
  .frk-details__head {
    gap: 12px;
  }
}

/* End */


/* Start:/local/templates/frk/css/new-arrivals.css?17906096415878*/
/*
 * «Гардероб с историей» — витрина новинок.
 *
 * Две крупные карточки в ряд — макет, снятый на полотне 1920 (951×1080,
 * держится через aspect-ratio у самой карточки, --frk-card-aspect,
 * см. product-card.css). На более узком десктопе (1024–1919) эти же
 * две почти квадратные карточки в ряд требуют огромной высоты — жать их
 * по высоте только портит вид (см. историю в git). Вместо этого от 1024
 * до 1919 показываем ТРИ карточки в ряд (третья — [data-new-extra] в
 * разметке, скрыта на телефоне/планшете и на 1920+): каждая карточка уже,
 * а значит и ниже, и три штуки в ряд на такой ширине умещаются без всякого
 * сжатия. Ровно на 1920 возвращаемся к двум крупным — как в макете.
 * На телефоне — по образцу мобильного каталога.
 */

/* Третья карточка — только для десктопной раскладки в 3 колонки (см. ниже). */
[data-new-extra] {
  display: none;
}

.frk-new {
  display: grid;
  justify-items: center;
  gap: var(--frk-space-lg);
  padding-top: var(--frk-rhythm-new);
}

.frk-new__head {
  display: grid;
  width: 100%;
}

/*
 * Лёгкое проявление на десктопе при входе в кадр — управляется тем же
 * скриптом, что и движение в «Внимание к деталям» (details-scroll.js):
 * с тех пор как sticky-список там стал высотой ровно в кадр, этот блок
 * идёт сразу следом без пустого поля, и проявление довершает ощущение
 * прибытия, а не резкой статичной смены. Гаснет обратно, если унесло
 * вниз обратной прокруткой — тот же приём, что у мобильного проявления
 * деталей.
 */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .frk-new__head {
    opacity: 0;
    transform: translateY(32px);
    transition:
      opacity var(--frk-motion-slow) var(--frk-motion-ease),
      transform var(--frk-motion-slow) var(--frk-motion-ease);
  }

  .frk-new__head.is-visible {
    opacity: 1;
    transform: none;
  }
}

.frk-new__eyebrow {
  font-weight: var(--frk-weight-extralight);
  font-size: var(--frk-size-ui-lg);
  line-height: var(--frk-leading-tight);
  letter-spacing: -0.02em;
}

.frk-new__title {
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: var(--frk-size-display-xl);
  line-height: var(--frk-leading-display);
  letter-spacing: var(--frk-tracking-serif);
}

.frk-new__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--frk-layout-gap);
  width: 100%;
  margin-top: var(--frk-space-md);
}

/*
 * 1024–1919: три карточки в ряд вместо двух — при такой ширине две
 * почти квадратные карточки (951:1080) растягиваются на пол-экрана и
 * требуют огромной высоты (пробовали сжимать по высоте — портит вид,
 * см. историю в git). Три более узкие карточки такой проблемы не создают.
 * Третья карточка — [data-new-extra] в разметке, временная (реального
 * третьего товара из макета/каталога ещё нет, взяли «Кепку» — тот же
 * товар, что в качестве заглушки стоит в самом макете для этого блока,
 * node 2396:491).
 */
@media (min-width: 1024px) and (max-width: 1919px) {
  .frk-new__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  [data-new-extra] {
    display: flex;
  }
}

/*
 * Ниже планшета карточка повторяет мобильный каталог: снимок 172 на 195,
 * поле 6 пикселей между снимком и подписями.
 */
@media (max-width: 767px) {
  .frk-new .frk-product-card--large {
    --frk-card-aspect: 172 / 195;
  }
}

.frk-new .frk-button {
  margin-top: calc(var(--frk-space-lg) - var(--frk-space-lg));
}

/*
 * Файлы (733×1100) уже́ и выше рамки карточки (951×1080): чтобы закрыть
 * ширину без искажений, cover растягивает снимок так, что по высоте
 * остаётся обрезать 347px лишнего. Без точки кадрирования обрезка идёт
 * поровну сверху и снизу — а голова на обеих фотографиях начинается
 * всего в ~140px от верха исходника, то есть обрезка по центру снимает
 * её почти вплотную. Сдвиг точки к верху отдаёт весь лишний запас низу
 * (брюки/джинсы), а не волосам.
 */
.frk-new .frk-product-card__media img {
  object-position: 50% 8%;
}

/* На планшете и телефоне от заголовка блока до содержимого 12px, как в макетах 360 и 640 (баг-лист, строки 25 и 30) */
@media (max-width: 1023px) {
  .frk-new__grid {
    margin-top: 12px;
  }
}

/* End */


/* Start:/local/templates/frk/css/quotes.css?179060964115036*/
/*
 * «Хронология высказываний» — слайдер цитат.
 *
 * Цитаты сменяются на месте, по строкам (см. низ файла и quotes.js); без
 * скрипта остаётся лента с нативной прокруткой и снапом. Кавычки по краям
 * не входят в ленту — это неподвижная рамка, внутри которой сменяются
 * высказывания.
 *
 * Расстояния внутри блока сняты с макета 1920: 68 пикселей между надписью
 * и цитатой, столько же между метаданными и кнопкой, 40 между подписью
 * и метаданными. Раньше здесь стоял один отступ на всё, и блок выглядел
 * плотнее макета при вдвое большем поле вокруг себя.
 */

.frk-quotes {
  padding-top: var(--frk-rhythm);
}

.frk-quotes__eyebrow {
  margin-bottom: var(--frk-quote-gap);
  font-family: var(--frk-font-accent);
  font-weight: var(--frk-weight-extralight);
  font-size: var(--frk-size-ui-lg);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
  text-align: center;
  opacity: 0.5;
}

.frk-quotes {
  position: relative;
}

.frk-quotes__viewport {
  display: flex;
}

/*
 * Кавычки по краям листают ленту — в макете это и есть стрелки. Когда
 * работает скрипт, знак стоит по центру текста цитаты (ниже, у режима
 * смены на месте). Положения здесь и в блоке до 1024 — для ленты без
 * скрипта: на десктопе верх кавычки вровень с верхом надписи «Хронология
 * высказываний», кегль огромный (300px), и знак сам дотягивается вниз
 * до середины цитаты.
 */
.frk-quotes__mark {
  position: absolute;
  top: var(--frk-rhythm);
  z-index: 2;
  font-family: "Source Serif Quotes", var(--frk-font-title);
  font-weight: var(--frk-weight-extralight);
  font-size: var(--frk-size-quote-mark);
  line-height: 1;
  letter-spacing: -0.03em;

  /*
   * Бледность задана сплошным цветом (12% чернил на белом), а не opacity:
   * полупрозрачная кавычка просвечивала текст листаемой ленты, и цитата
   * выглядела проходящей поверх неё. Сплошная — перекрывает текст, он
   * уходит под кавычку.
   */
  color: color-mix(in srgb, var(--frk-color-ink) 12%, var(--frk-color-paper));
  user-select: none;
  transition: color var(--frk-motion-base) var(--frk-motion-ease);
}

.frk-quotes__mark--open {
  left: 0;
}

.frk-quotes__mark--close {
  right: 0;
}

/*
 * На десктопе кавычка в макете не жмётся к самому краю контейнера — узел
 * 2381:14735 инсетнут на 108px от края полотна при 1920 (5.625% ширины
 * экрана). Ниже 1024 в макете (мобильный экспорт) кавычка, наоборот, стоит
 * вровень с краем — там этот отступ не нужен.
 */
@media (min-width: 1024px) {
  .frk-quotes__mark--open {
    left: 5.625vw;
  }

  .frk-quotes__mark--close {
    right: 5.625vw;
  }
}

/*
 * Ниже 1024 приём «верх кавычки = верх надписи» не работает: кегль здесь
 * всего 56–58px, знак остаётся у самой надписи и не дотягивается до
 * цитаты — это и была жалоба «стрелка на уровне Хронология высказываний».
 * Положение снято промером пикселей напрямую с мобильного экспорта
 * макета и десктопного скрина (не на глаз): центр видимого знака стоит
 * на 89.5px ниже верха надписи при 360 и на 192.6px ниже при 1920 —
 * прямая между этими точками даёт формулу top ниже.
 *
 * Кнопка становится flex-боксом фиксированной высоты (тоже по двум
 * точкам макета — видимая высота знака 26px при 360, 114px при 1920):
 * знак центрируется внутри по flex-осям, а не по базовой линии шрифта,
 * чью середину пришлось бы вычислять для каждого начертания отдельно.
 * top у бокса сдвинут так, чтобы его середина, а не верх, приходилась
 * на нужную точку.
 */
@media (max-width: 1023px) {
  .frk-quotes {
    --frk-quotes-mark-box: calc(5.59vw + 6.3px);
  }

  .frk-quotes__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    top: calc(var(--frk-rhythm) + 3.814vw + 62.56px);
    height: var(--frk-quotes-mark-box);
  }

  /*
   * Кавычки не упираются в край экрана — стоят в поле страницы, а цитата
   * сужена так, чтобы между ней и знаком оставался зазор: на 360 текст
   * 278 из 348, как в макете (2398:7913; баг-лист, строка 31). Ширина
   * знака растёт вместе с его высотой, поэтому и поле цитаты считается
   * от неё.
   */
  .frk-quotes__mark--open {
    left: var(--frk-layout-gutter);
  }

  .frk-quotes__mark--close {
    right: var(--frk-layout-gutter);
  }

}

.frk-quotes__mark:hover:not([disabled]) {
  color: var(--frk-color-ink);
}

/*
 * Дошли до края ленты — листать в эту сторону больше нечего. Знак остаётся
 * виден тем же бледным цветом (заказчик: кавычки видны всегда), просто
 * не откликается на наведение.
 */
.frk-quotes__mark[disabled] {
  cursor: default;
}

.frk-quotes__track {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  scroll-snap-type: x mandatory;
}

.frk-quote {
  display: grid;
  justify-items: center;
  align-content: start;
  flex: 0 0 100%;
  scroll-snap-align: center;

  /* Кавычки стоят вне ленты, поэтому поле внутри слайда небольшое */
  padding-inline: var(--frk-space-sm);
}

/* До 1024 поле цитаты — под знак кавычки в поле страницы (см. .frk-quotes__mark выше) */
@media (max-width: 1023px) {
  .frk-quote {
    padding-inline: calc(5.59vw + 8.3px + var(--frk-layout-gutter));
  }
}

.frk-quote__text {
  margin: 0;

  /*
   * Цитаты разной длины: без ограничения ширины короткие («Россия — это
   * люди...», «Мы сильны...») укладываются в одну длинную строку, а первая,
   * подлиннее, сама переносится на две. Чтобы все высказывания смотрелись
   * одинаково, ширина ограничена так, что двух строк не избежать ни одной
   * из них, а text-wrap: balance выравнивает их между собой.
   */
  max-width: 16em;
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);

  /*
   * Цитата набрана мельче заголовков секций: в макете 360 это 28, в макете
   * 1920 — 88. Общим кеглем заголовка высказывание разваливалось на пять
   * строк вместо трёх.
   */
  font-size: clamp(28px, 3.846vw + 14.15px, 88px);
  line-height: var(--frk-leading-display);
  letter-spacing: var(--frk-tracking-serif);
  text-align: center;
  text-wrap: balance;
}

.frk-quote__signature {
  width: clamp(96px, 7.5vw, 144px);
  height: auto;
  margin-top: var(--frk-quote-gap);
}

.frk-quote__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--frk-space-xs) var(--frk-space-md);
  margin-top: var(--frk-quote-gap-sm);
  font-family: var(--frk-font-accent);
  font-weight: var(--frk-weight-extralight);
  font-size: var(--frk-size-ui-lg);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
  text-align: center;
  opacity: 0.5;
}

/* Подпись в админке необязательна: без неё метаданные отходят от цитаты, как подпись */
.frk-quote__meta:first-child {
  margin-top: var(--frk-quote-gap);
}

.frk-quote .frk-button {
  margin-top: var(--frk-quote-gap);
}

.frk-quote__details {
  display: grid;
  justify-items: center;
}

/* ========================================================================= *
 * Смена цитаты по строкам (баг-лист, строка 19, quotes.js)
 * ========================================================================= */

/*
 * Цитаты лежат в одной ячейке, её высота — по самой длинной, поэтому блок
 * не прыгает при смене. Видна текущая и та, что уходит.
 */
.frk-quotes__track[data-quotes-mode="fade"] {
  display: grid;
  overflow: visible;
  scroll-snap-type: none;
}

/*
 * Текст и подписи идут друг за другом с обычным отступом, и эта группа
 * стоит по центру ячейки: у короткой цитаты свободное место уходит
 * поровну вверх и вниз, а не в дыру между текстом и подписью. Блок
 * подписей у всех цитат одной высоты (quotes.js), поэтому середина
 * текста у любой цитаты в одной точке, и кавычки стоят в ней.
 *
 * Внутри блока подпись, метаданные и кнопка тоже идут подряд, а запас
 * до общей высоты — под кнопкой. Иначе у записи без подписи или с
 * метаданными в меньшее число строк он расходился бы в зазоры между
 * ними. Цена — такая группа стоит выше центра на половину запаса.
 */
.frk-quotes__track[data-quotes-mode="fade"] > .frk-quote {
  grid-area: 1 / 1;
  align-content: center;
  visibility: hidden;
}

.frk-quotes__track[data-quotes-mode="fade"] .frk-quote__details {
  align-content: start;
}

.frk-quotes__track[data-quotes-mode="fade"] > .is-current,
.frk-quotes__track[data-quotes-mode="fade"] > .is-leaving {
  visibility: visible;
}

.frk-quotes__track[data-quotes-mode="fade"] > .is-leaving {
  pointer-events: none;
}

/*
 * Маска строки чуть выше самой строки: при интерлиньяже 0.9 выносные
 * элементы Roboto Serif выходят за строку, и маска ровно по ней срезала бы
 * их. Внешний отступ возвращает строке прежнее место в потоке.
 */
.frk-quote__line {
  display: block;
  overflow: hidden;
  padding-block: 0.15em;
  margin-block: -0.15em;
}

.frk-quote__line > span {
  display: block;
  transition: transform var(--frk-motion-slow) var(--frk-motion-ease);
  transition-delay: calc(var(--frk-line, 0) * 80ms);
}

/*
 * Направление — по стрелке (data-quotes-dir, quotes.js): «вперёд» строка
 * уходит вверх за край маски, новая выезжает снизу; «назад» — наоборот.
 */
[data-quotes-dir="next"] .is-leaving .frk-quote__line > span {
  transform: translateY(-1.3em);
}

[data-quotes-dir="prev"] .is-leaving .frk-quote__line > span {
  transform: translateY(1.3em);
}

.is-entering .frk-quote__line > span {
  transition: none;
}

/* Новая строка трогается, когда старая почти ушла из маски: иначе они на миг пересекаются */
.frk-quotes__track[data-quotes-mode="fade"] .is-current .frk-quote__line > span {
  transition-delay: calc(200ms + var(--frk-line, 0) * 80ms);
}

[data-quotes-dir="next"] .is-entering .frk-quote__line > span {
  transform: translateY(1.3em);
}

[data-quotes-dir="prev"] .is-entering .frk-quote__line > span {
  transform: translateY(-1.3em);
}

/*
 * Подписи у цитат разной длины стоят на разной высоте (разница —
 * полстроки), поэтому блок целиком гаснет вместе с уходящим текстом и
 * проявляется с новым, пока въезжают его строки. Новый трогается, когда
 * старый почти погас: двух подписей сразу не видно.
 */
.frk-quotes__track[data-quotes-mode="fade"] .frk-quote__details {
  opacity: 0;
  transition: opacity var(--frk-motion-base) var(--frk-motion-ease);
}

.frk-quotes__track[data-quotes-mode="fade"] .is-current .frk-quote__details {
  opacity: 1;
  transition-duration: var(--frk-motion-slow);
  transition-delay: 200ms;
}

/*
 * Кавычки — по центру текста цитаты. quotes.js кладёт в
 * --frk-quotes-center расстояние от верха блока до середины текста,
 * общее для всех цитат. Видимая середина знака «» в этом начертании
 * на 0.1em ниже середины строки: при line-height: 1 — на 0.6em ниже
 * её верха. Ниже 1024 строка стоит по центру бокса (см. выше), там
 * от середины отнимается половина его высоты.
 */
.frk-quotes__viewport:has(> [data-quotes-mode="fade"]) > .frk-quotes__mark {
  top: calc(var(--frk-quotes-center) - 0.6em);
}

@media (max-width: 1023px) {
  .frk-quotes__viewport:has(> [data-quotes-mode="fade"]) > .frk-quotes__mark {
    top: calc(var(--frk-quotes-center) - var(--frk-quotes-mark-box) / 2 - 0.1em);
  }
}

@media (prefers-reduced-motion: reduce) {
  .frk-quote__line > span,
  .frk-quotes__track[data-quotes-mode="fade"] .frk-quote__details {
    transition: none;
  }
}

/* End */


/* Start:/local/templates/frk/css/story.css?179060964110405*/
/*
 * «История, которую носят».
 *
 * Слева лента образов, справа — товары этого образа. Ведущая лента одна:
 * смена образа переключает набор товаров справа. Листание товаров образ
 * не трогает — так описано в правках к ТЗ. Связь задана номером в
 * data-story-products и разбирается в js/story.js.
 *
 * Оформление ленты (точки, стрелки, плашка под ними) общее для страницы
 * и лежит в slider.css.
 */

/*
 * Заголовок → лента: в макете 12px на 360 и на 768, и только на 1920
 * зазор становится 24 (--frk-space-md). Не растёт между 768 и 1920,
 * как остальные кегли токенов, — прыжок ровно на границе десктопа.
 */
.frk-story {
  display: grid;
  gap: 12px;
  padding-top: var(--frk-rhythm);
}

@media (min-width: 1920px) {
  .frk-story {
    gap: var(--frk-space-md);
  }
}

.frk-story__title {
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: var(--frk-size-display-xl);
  line-height: var(--frk-leading-display);
  letter-spacing: var(--frk-tracking-serif);
}

.frk-story__row {
  display: grid;
  gap: var(--frk-layout-gap);
  min-width: 0;
}

.frk-story__products {
  min-width: 0;
}

@media (min-width: 768px) {
  .frk-story__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.frk-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}

/*
 * Пропорция кадра по макету: 360 — 348×395, 640 — 312×400, 1920 — квадрат
 * 950×950. На десктопе высота идёт по прямой от вертикального кадра на 1024
 * (643px) до квадрата на 1920: вертикальный кадр до самого 1920 делал блок
 * на 1280–1440 намного выше ширины (баг-лист, строка 20), а квадрат уже на
 * 1024 не оставлял места снимку вещи под подписями и управлением.
 */
.frk-slide__media {
  aspect-ratio: 348 / 395;
  overflow: hidden;
  border-radius: var(--frk-radius);
  background: var(--frk-color-surface-muted);
}

@media (min-width: 768px) {
  .frk-slide__media {
    aspect-ratio: 312 / 400;
  }
}

@media (min-width: 1024px) and (max-width: 1919px) {
  .frk-slide__media {
    aspect-ratio: auto;
    height: calc(292.2px + 34.26vw);
  }
}

@media (min-width: 1920px) {
  .frk-slide__media {
    aspect-ratio: 1;
  }
}

.frk-slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  /*
   * Кадр вертикальный, окно квадратное. Точка кадрирования смещена вверх:
   * по центру у образа срезало голову.
   */
  object-position: 50% 18%;
}

/*
 * Карточка товара в правой ленте: снимок лежит на светлой подложке,
 * подписи выстроены под ним по центру. Снимку отдан один свободный ряд
 * (minmax(0,1fr)) — остальные три ряда под текст и кнопку берут ровно
 * свою высоту. Так снимок всегда укладывается в то, что осталось после
 * подписей и запаса под управление снизу (padding-bottom ниже), даже
 * если реальное фото не квадратное — не зависит от его пропорции.
 */
.frk-slide--product .frk-slide__media {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  justify-items: center;
  gap: var(--frk-space-md);
  padding: var(--frk-space-lg);
}

/*
 * Ширина снимка в процентах считается от области ВНУТРИ padding (32px
 * с каждой стороны — задан на .frk-slide--product .frk-slide__media выше),
 * а не от полной ширины плашки. На 360/768 это 284/248px после вычета
 * padding, и макетные 199/178px дают ~71%. На 1920 те же 32px — куда
 * меньшая доля от 950, там макетные 593px после вычета padding — 67%.
 * height:100% + object-fit:contain — снимок уменьшается по высоте
 * вместо того, чтобы вылезать за пределы своего ряда.
 */
.frk-slide--product .frk-slide__media img {
  width: 100%;
  height: 100%;
  max-width: 71%;
  object-fit: contain;
}

/*
 * Десктоп (2396:1876): снимок — квадрат 593 из 950 с обрезкой по центру,
 * в 61px от верха, как в макете, а не вертикальный кадр целиком: так вещь
 * крупнее. Ряд снимка забирает высоту, оставшуюся после подписей и запаса
 * под управление, поэтому уже 1920 квадрат ужимается, а не вылезает.
 * Отступы между снимком, названием, ценой и кнопкой — 35, 12 и 32px.
 */
@media (min-width: 1024px) {
  .frk-slide--product .frk-slide__media {
    gap: 0;
    padding-top: 6.42%;
    padding-inline: 0;
  }

  .frk-slide--product .frk-slide__media img {
    width: auto;
    max-width: 62.42%;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: 50% 50%;
  }

  .frk-slide--product .frk-slide__name {
    margin-top: 35px;
  }

  .frk-slide--product .frk-slide__price {
    margin-top: 12px;
  }

  .frk-slide--product .frk-slide__buy {
    margin-top: var(--frk-space-lg);
  }
}

.frk-slide__name {
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: var(--frk-size-display-md);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-serif);
  text-align: center;
}

.frk-slide__price {
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-regular);
  /* Фиксированные 20px (2380:12935) — не --frk-size-ui-lg, тот меняется по ширине экрана */
  font-size: 20px;
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-serif);
  /* Пропорциональные цифры, не табличные — так в макете цены (2380:12935) */
  font-variant-numeric: lining-nums proportional-nums;
}

.frk-slide__buy {
  color: var(--frk-color-gold);
  font-size: var(--frk-size-ui-lg);
  line-height: var(--frk-leading-tight);
  letter-spacing: var(--frk-tracking-ui);
  transition: opacity var(--frk-motion-fast) var(--frk-motion-ease);
}

.frk-slide__buy:hover {
  opacity: 0.7;
}

/*
 * Управление правой ленты лежит на светлой подложке товара и не должно
 * наезжать на кнопку «В корзину»: подложке добавлен запас снизу.
 */
.frk-slider--on-light .frk-slide--product .frk-slide__media {
  padding-bottom: calc(var(--frk-space-lg) + 96px);
}

/*
 * Телефон (2398:8055): снимок вещи 199×225 из 348×395, в 18px от верха,
 * с обрезкой по центру; название Light 20, цена 14, «В корзину» 14 —
 * с отступами 11, 6 и 23px (баг-лист, строка 32). Снизу 56px до края —
 * стрелок на телефоне нет, под точки десктопный запас не нужен.
 */
@media (max-width: 767px) {
  .frk-slide--product .frk-slide__media {
    gap: 0;
    padding: 5.14% 0 0;
  }

  .frk-slider--on-light .frk-slide--product .frk-slide__media {
    padding-bottom: 56px;
  }

  .frk-slide--product .frk-slide__media img {
    width: auto;
    max-width: 57.2%;
    aspect-ratio: 199 / 225;
    object-fit: cover;
    object-position: 50% 50%;
  }

  .frk-slide--product .frk-slide__name {
    margin-top: 11px;
    font-weight: var(--frk-weight-light);
    font-size: 20px;
  }

  .frk-slide--product .frk-slide__price {
    margin-top: 6px;
    font-size: 14px;
  }

  .frk-slide--product .frk-slide__buy {
    margin-top: 23px;
    font-size: 14px;
    line-height: var(--frk-leading-tight);
  }
}

/*
 * Планшет (2413:748, плашка 312×400): снимок вещи в 6px от верха, под ним
 * название Light 24 в две строки, цена 16 и «В корзину» 16 — с отступами
 * 0, 8 и 18px, снизу 51px под точки (баг-лист 2, строка 13). Снимок забирает
 * всю высоту, что осталась от подписей: в пропорциях макета (плашка
 * 312×400) это ровно 178×228, а с 768 он растёт вместе с плашкой, а не
 * остаётся мелким.
 */
@media (min-width: 768px) and (max-width: 1023px) {
  .frk-slide--product .frk-slide__media {
    gap: 0;
    padding: 6px 0 0;
  }

  .frk-slider--on-light .frk-slide--product .frk-slide__media {
    padding-bottom: 51px;
  }

  .frk-slide--product .frk-slide__media img {
    width: auto;
    height: 100%;
    max-width: 100%;
    aspect-ratio: 178 / 228;
    object-fit: cover;
    object-position: 50% 50%;
  }

  .frk-slide--product .frk-slide__name {
    max-width: 69%;
    font-weight: var(--frk-weight-light);
    font-size: 24px;
    line-height: 1.1;
  }

  .frk-slide--product .frk-slide__price {
    margin-top: 8px;
    font-size: 16px;
  }

  .frk-slide--product .frk-slide__buy {
    margin-top: 18px;
    font-size: 16px;
  }
}

/* Окно до десктопа с мышью: под точками ещё и стрелки — запас снизу прежний, чтобы они не наезжали на «В корзину» */
@media (max-width: 1023px) and (hover: hover) and (pointer: fine) {
  .frk-slider--on-light .frk-slide--product .frk-slide__media {
    padding-bottom: calc(var(--frk-space-lg) + 96px);
  }
}

/* End */


/* Start:/local/templates/frk/css/people.css?17906096414140*/
/*
 * «Разделяют ценности» — лента баннеров.
 *
 * Карточка здесь — баннер из админки: снимок, заголовок, описание и
 * необязательная ссылка. Если ссылка задана, кликабельна вся область
 * вместе с подписями и открывается в новой вкладке; если нет — тот же
 * блок выводится обычным контейнером. Поэтому заголовок хранится одной
 * строкой: в инфоблоке это одно поле, а не два.
 */

.frk-people {
  display: grid;
  gap: var(--frk-space-md);
  padding-top: var(--frk-rhythm);
}

.frk-people__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--frk-space-md);
}

.frk-people__title {
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: var(--frk-size-display-xl);
  line-height: var(--frk-leading-display);
  letter-spacing: var(--frk-tracking-serif);
}

/* Стрелки стоят у правого края заголовка, а не поверх карточек */
.frk-people__arrows {
  flex-shrink: 0;
}

.frk-people__track {
  display: flex;
  gap: var(--frk-layout-gap);
  scroll-snap-type: x proximity;
}

.frk-person {
  flex: 0 0 auto;
  min-width: 0;
  scroll-snap-align: start;

  /* Ширина карточки из макета: 632 из 1904 пикселей полотна */
  width: clamp(240px, 33.2vw, 632px);
}


.frk-person__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.frk-person__media {
  /* Пропорция из макета: 632 на 722 */
  aspect-ratio: 632 / 722;
  overflow: hidden;
  border-radius: var(--frk-radius);
  background: rgb(19 18 18 / 4%);
}

.frk-person__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--frk-motion-slow) var(--frk-motion-ease);
}

a.frk-person__link:hover .frk-person__media img {
  transform: scale(1.03);
}

/* На 360 карточка — 278 из 348, снимок 278×316 (2398:8201): видна целиком и край следующей */
@media (max-width: 767px) {
  .frk-person {
    width: 80%;
  }

  .frk-person__media {
    aspect-ratio: 278 / 316;
  }
}

/*
 * Планшет: видно две карточки и край третьей в 66px — тот же край, что
 * у второй карточки на 360 (баг-лист, строка 23). Снимок 312×355 (2413:768).
 */
@media (min-width: 768px) and (max-width: 1023px) {
  .frk-person {
    width: calc((100% - 2 * var(--frk-layout-gap) - 66px) / 2);
  }

  .frk-person__media {
    aspect-ratio: 312 / 355;
  }
}

/*
 * Подпись — имя и вещь, в макете два текста (2396:2000, 2396:2001). По
 * наведению золотом выделяется только вещь: карточка ведёт на неё, а не
 * на человека.
 */
a.frk-person__link:hover .frk-person__item {
  color: var(--frk-color-gold);
}

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

.frk-person__caption {
  display: flex;
  flex-direction: column;
  gap: var(--frk-space-2xs);
  padding-right: var(--frk-space-xs);
  padding-top: var(--frk-space-2xs);
}

.frk-person__name {
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: var(--frk-size-display-md);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
}

.frk-person__role {
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-ui-lg);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
  opacity: 0.6;
}

/* На планшете и телефоне от заголовка блока до содержимого 12px, как в макетах 360 и 640 (баг-лист, строки 25 и 30) */
@media (max-width: 1023px) {
  .frk-people {
    gap: 12px;
  }
}

/* End */


/* Start:/local/templates/frk/css/picks.css?17906096413809*/
/*
 * «Выбор в деталях» — лента товаров.
 *
 * Та же карточка, что в каталоге, поставленная в прокручиваемый ряд.
 * Управление повторяет блок «Разделяют ценности»: стрелки у заголовка,
 * прокрутка жестом и зажатым курсором.
 */

.frk-picks {
  display: grid;
  gap: var(--frk-space-md);
  padding-top: var(--frk-rhythm);
  justify-items: center;
}

.frk-picks__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--frk-space-md);
  width: 100%;
}

.frk-picks__title {
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: var(--frk-size-display-xl);
  line-height: var(--frk-leading-display);
  letter-spacing: var(--frk-tracking-serif);
}

/* Стрелки справа и без заголовка — поле в записи «Главная» может быть пустым */
.frk-picks__arrows {
  flex-shrink: 0;
  margin-left: auto;
}

.frk-picks__track {
  display: flex;
  gap: var(--frk-layout-gap);
  width: 100%;
  scroll-snap-type: x proximity;
}

.frk-picks__item {
  flex: 0 0 auto;
  min-width: 0;
  scroll-snap-align: start;

  /* Ширина карточки из макета: 632 из 1904 пикселей полотна */
  width: clamp(240px, 33.2vw, 632px);
}

/* Пропорция снимка в этой ленте отличается от карточки в панели меню */
.frk-picks__item.frk-product-card {
  --frk-card-aspect: 632 / 758;
}

/* На 360 карточка — 278 из 348, снимок 278×315 (2398:8308) */
@media (max-width: 767px) {
  .frk-picks__item {
    width: 80%;
  }

  .frk-picks__item.frk-product-card {
    --frk-card-aspect: 278 / 315;
  }
}

/* Планшет: две карточки и край третьей в 66px, как в «Разделяют ценности»; снимок 312×354 (2413:1021) */
@media (min-width: 768px) and (max-width: 1023px) {
  .frk-picks__item {
    width: calc((100% - 2 * var(--frk-layout-gap) - 66px) / 2);
  }

  .frk-picks__item.frk-product-card {
    --frk-card-aspect: 312 / 354;
  }
}

.frk-picks__item .frk-product-card__title {
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: var(--frk-size-display-md);
  line-height: var(--frk-leading-base);
}

.frk-picks__item .frk-product-card__price {
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-regular);
  font-size: var(--frk-size-ui-lg);
}

.frk-picks__item .frk-product-card__excerpt {
  opacity: 0.5;
}

/* Метки стоят в ряд: у товара их бывает две — «новинка» и «хит сезона» */
.frk-picks__badges {
  position: absolute;
  top: var(--frk-space-2xs);
  left: var(--frk-space-2xs);
  z-index: 1;
  display: flex;
  gap: var(--frk-space-2xs);
}

.frk-picks__badges .frk-product-card__badge {
  position: static;
}

/*
 * Кнопка «Смотреть каталог» отстоит от ряда на 32 пикселя — так в макете.
 * Секция раздаёт 24, поэтому кнопке добавлена разница.
 */
.frk-picks .frk-button {
  margin-top: calc(var(--frk-space-lg) - var(--frk-space-md));
}

/* На планшете и телефоне от заголовка блока до содержимого 12px, как в макетах 360 и 640 (баг-лист, строки 25 и 30); кнопка под лентой остаётся в 32px */
@media (max-width: 1023px) {
  .frk-picks {
    gap: 12px;
  }

  .frk-picks .frk-button {
    margin-top: calc(var(--frk-space-lg) - 12px);
  }
}

/* End */


/* Start:/local/templates/frk/css/journal.css?17906096416490*/
/*
 * «Журнал» на главной — три избранные записи без прокрутки (баг-лист,
 * строка 22): на десктопе разворот 950 + 473 + 473 (2396:576), на планшете
 * крупная запись и две под ней, на телефоне столбиком.
 */

.frk-journal {
  display: grid;
  gap: var(--frk-space-md);
  padding-top: var(--frk-rhythm);
  justify-items: center;
}

.frk-journal__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--frk-space-md);
  width: 100%;
}

.frk-journal__title {
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: var(--frk-size-display-xl);
  line-height: var(--frk-leading-display);
  letter-spacing: var(--frk-tracking-serif);
}

.frk-journal__list {
  display: flex;
  gap: var(--frk-layout-gap);
  width: 100%;
}

/* CMS отдаёт три записи; если придёт больше, лишние не ломают разворот */
.frk-journal__list > .frk-article:nth-child(n + 4) {
  display: none;
}

.frk-article {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-width: 0;
}

.frk-article__media {
  position: relative;
  aspect-ratio: 950 / 476;
  overflow: hidden;
  border-radius: var(--frk-radius);
  background: rgb(19 18 18 / 4%);
}

/*
 * Порог «крупная запись и две под ней» у журнала — 640, ширина планшетного
 * макета, а не общие для сайта 768: на 640–767 столбик из трёх крупных
 * записей выглядел не как в макете (баг-лист, строка 26, решение заказчика
 * только для этого блока).
 */
@media (max-width: 639px) {
  .frk-journal__list {
    flex-direction: column;
    gap: 20px;
  }

  .frk-article,
  .frk-article--lead {
    width: 100%;
  }

  .frk-article__media,
  .frk-article--lead .frk-article__media {
    aspect-ratio: 348 / 200;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .frk-journal__list {
    flex-wrap: wrap;
  }

  /* На главной между крупной записью и парой под ней 24px, по горизонтали — зазор сетки (2413:812) */
  .frk-journal .frk-journal__list {
    row-gap: var(--frk-space-md);
  }

  .frk-article--lead {
    width: 100%;
  }

  .frk-article--lead .frk-article__media {
    aspect-ratio: 628 / 360;
  }

  .frk-article:not(.frk-article--lead) {
    width: calc((100% - var(--frk-layout-gap)) / 2);
  }

  .frk-article:not(.frk-article--lead) .frk-article__media {
    aspect-ratio: 312 / 200;
  }
}

.frk-article__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--frk-motion-slow) var(--frk-motion-ease);
}

.frk-article:hover .frk-article__media img {
  transform: scale(1.03);
}

/* Рубрика лежит поверх снимка в верхнем углу */
.frk-article__label {
  position: absolute;
  top: var(--frk-space-2xs);
  left: var(--frk-space-2xs);
  padding: var(--frk-space-badge);
  border-radius: 1px;
  background: var(--frk-color-surface);
  color: var(--frk-color-ink);
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-badge);
  line-height: var(--frk-leading-tight);
  letter-spacing: var(--frk-tracking-ui);
  text-transform: uppercase;
}

.frk-article__body {
  display: flex;
  flex-direction: column;
  gap: var(--frk-space-sm);
  padding-top: var(--frk-space-xs);
}

/*
 * Ниже 1024 (мобилка/планшет) заголовок записи — фиксированный кегль
 * по макету, не общий токен --frk-size-display-md (тот растёт с 1920
 * и используется ещё в подписи под плиткой категории).
 */
.frk-article__heading {
  font-family: var(--frk-font-display);
  font-weight: var(--frk-weight-extralight);
  font-size: 20px;
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-serif);
  transition: color var(--frk-motion-fast) var(--frk-motion-ease);
}

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

/* В журнале на главной заголовок не золотится — только лёгкое увеличение снимка, как у карточек (баг-лист 2, строка 9) */
.frk-journal .frk-article:hover .frk-article__heading {
  color: inherit;
}

@media (min-width: 640px) and (max-width: 1023px) {
  .frk-article__heading {
    font-size: 24px;
  }
}

@media (min-width: 1024px) {
  .frk-article__heading {
    font-size: var(--frk-size-display-md);
  }
}

.frk-article__excerpt,
.frk-article__date {
  font-size: var(--frk-size-ui-lg);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
  opacity: 0.5;
}

.frk-article__excerpt {
  margin-top: var(--frk-space-2xs);
  font-size: 14px;
}

@media (min-width: 1024px) {
  .frk-article__excerpt {
    font-size: var(--frk-size-ui-lg);
  }
}

/*
 * Кнопка «Все статьи» отстоит от ленты на 32 пикселя — так в макете.
 */
.frk-journal .frk-button {
  margin-top: calc(var(--frk-space-lg) - var(--frk-space-md));
}

@media (min-width: 1024px) {
  /*
   * Разворот из трёх записей занимает полотно целиком: 950 + 4 + 473 + 4 + 473.
   * Ширины считаются от полотна за вычетом двух зазоров, поэтому на любом
   * экране пропорция сетки из макета сохраняется.
   */
  .frk-article--lead {
    width: calc((100% - 2 * var(--frk-layout-gap)) * 0.501055);
  }

  .frk-article:not(.frk-article--lead) {
    width: calc((100% - 2 * var(--frk-layout-gap)) * 0.249473);
  }

  .frk-article:not(.frk-article--lead) .frk-article__media {
    aspect-ratio: 473 / 476;
  }
}

/* На планшете и телефоне от заголовка блока до содержимого 12px, как в макетах 360 и 640 (баг-лист, строки 25 и 30); кнопка под записями остаётся в 32px */
@media (max-width: 1023px) {
  .frk-journal {
    gap: 12px;
  }

  .frk-journal .frk-button {
    margin-top: calc(var(--frk-space-lg) - 12px);
  }
}

/* End */
/* /local/templates/frk/css/hero.css?179060964113832 */
/* /local/templates/frk/css/intro.css?17906096411631 */
/* /local/templates/frk/css/categories.css?17906096414184 */
/* /local/templates/frk/css/details.css?179069252115386 */
/* /local/templates/frk/css/new-arrivals.css?17906096415878 */
/* /local/templates/frk/css/quotes.css?179060964115036 */
/* /local/templates/frk/css/story.css?179060964110405 */
/* /local/templates/frk/css/people.css?17906096414140 */
/* /local/templates/frk/css/picks.css?17906096413809 */
/* /local/templates/frk/css/journal.css?17906096416490 */